Serra Marangoz
← Home

UI practice

Daily UI

7 challenges · 7 brands · 3 breakpoints

A daily practice to sharpen my UI craft. Every brief gets its own made-up brand, a real constraint and a layout for phone, tablet and desktop.

#001 / 007

Sign up

OVRE — A members club for a fashion label’s limited drops.

The brief: Design a sign-up page, modal or form for something people want to join.

  1. Value before the askThe perk line (early drops, free returns, 10% off) explains why to join before asking for anything.
  2. One field to startEmail-first with a single Continue action; Apple and Google as quick alternatives.
  3. Re-prioritised per deviceDesktop splits photo and form; on mobile, social sign-in moves above email for thumb reach.
#002 / 007

Checkout

NIGHTSHIFT — Paying for a weekend music-festival pass.

The brief: Design a credit card checkout form or page with numbers, dates and security codes.

  1. A card that types alongThe card preview mirrors every field, so typos are caught before paying.
  2. Honest urgencyA visible ticket-hold timer explains the time limit instead of hiding it.
  3. Trust at the pay momentInline validation, the total on the button, security and refund info right below.
#003 / 007

Landing page

lumen — A clean-skincare brand with refillable glass.

The brief: Design a landing page with a clear headline, call-to-action and typography.

  1. Proof before the pitchClaim chips (vegan, fragrance-free, derm-tested) sit right under the hero.
  2. Transparency as the hook“Five ingredients” lists each active with its %, the brand promise made visible.
  3. Social proof, then one ask4.9★ from 3,200 reviews and a verified quote lead to one 10%-off signup.
#004 / 007

Calculator

A calm calculator for phone and tablet, with basic and scientific modes.

The brief: Design a calculator: standard, scientific or specialty, for phone, tablet or web.

  1. Context above the answerThe previous equation stays visible above the result, so you never lose track.
  2. Modes as a toggleBasic and Scientific sit in a segmented control, not a hidden menu.
  3. Reach-first keypadLarge rounded keys, operators in one column and a wide 0 key.
#005 / 007

App icon

Ease — A breathing and sleep app: calm in 3 minutes a day.

The brief: Design an app icon that represents the product and stands out on a home screen.

  1. Tested in contextThe icon is judged on a real home screen, next to familiar apps.
  2. One icon, every sizeIt holds up at 20px in the widget and 118px on the App Store page.
  3. Brand beyond the iconA streak widget and a store listing carry the same calm voice.
#006 / 007

User profile

stride — A profile for a running community.

The brief: Design a user profile, mindful of the most important data, names, imagery and placement.

  1. Identity, goal, proofName and bio first, then the yearly distance goal, then PB stats.
  2. Highlight what’s newA fresh half-marathon PB is tagged NEW so achievements stand out.
  3. Same data, re-rankedDesktop uses a sidebar card, tablet leads with a cover, mobile adds a tab bar.
#007 / 007

404 page

Halo® — A playful 404 for a design studio’s website.

The brief: Design a 404 page that suits the brand, is user-friendly and helps lost visitors.

  1. A dead end turned into playStickers float, flee and can be caught, with a counter keeping score.
  2. Three clear exitsBack home, See the work and Say hello: every visitor has a next step.
  3. Brand voice in the copy“This page took a long lunch.” keeps the tone light, not technical.
Stickers are a component set: 4 types × 5 states.