UI/UX Designer
Visual design and layout questions
133 questions on Visual design and layout for ui/ux designers, easiest first.
Easy 45
- Making the primary action stand outeasy
- Confusing form labelseasy
- Showing what is clickableeasy
- An 8-point spacing systemeasy
- Using a type scaleeasy
- Which knob controls which burnereasy
- The ATM returns your card firsteasy
- Making one item stand outeasy
- A profile that is 70% completeeasy
- A loyalty card with two free stampseasy
- How people remember an experienceeasy
- Pretty designs feel easiereasy
- Labels floating between fieldseasy
- Links that look like plain texteasy
- A logo with gaps in the outlineeasy
- Grouping with a backgroundeasy
- Why modals dim the pageeasy
- The squint testeasy
- How people scan text-heavy pageseasy
- Layout for a simple ad landing pageeasy
- How many font weights to useeasy
- Line height for body texteasy
- The 60-30-10 colour ruleeasy
- Placing the subject in a photoeasy
- Master file format for a logoeasy
- Two kinds of white spaceeasy
- Repeating visual elementseasy
- Steps joined by a lineeasy
- Items that move togethereasy
- Seeing the simplest shapeeasy
- Linking a label to a chart pointeasy
- Giving a poster a focal pointeasy
- What symmetrical balance conveyseasy
- Balance that spreads from a centreeasy
- Making a price stand out with sizeeasy
- Centred paragraphseasy
- A settings page full of lineseasy
- Three buttons in a dialogeasy
- Colours that seem to come forwardeasy
- Opposite colours on the wheeleasy
- Neighbouring colourseasy
- Icon size next to a labeleasy
- The arrow hidden in a logoeasy
- What corner shapes communicateeasy
- A gap inside a headline wordeasy
Medium 52
- Designing dark modemedium
- The Doherty thresholdmedium
- Not knowing how to startmedium
- Not knowing if it workedmedium
- Accepting phone numbers in any formatmedium
- Ordering items in a navigation barmedium
- "Only seven menu items allowed"medium
- Width of a 4-column cardmedium
- Why 12 columns is popularmedium
- Gutters and marginsmedium
- When a modular grid helpsmedium
- Line height on a 4 px baselinemedium
- Spacing inside and between cardsmedium
- Calculating a type scale stepmedium
- Spacing for all-caps labelsmedium
- Line height for a 56 px headingmedium
- Digits that do not line upmedium
- Aligning numbers in a tablemedium
- What makes an element feel heavymedium
- The play icon that looks off-centremedium
- Circle and square of equal heightmedium
- Golden ratio column splitmedium
- Height of a 16:9 bannermedium
- Adding bleed to an A4 flyermedium
- Bright colours that print dullmedium
- Pixels needed for an A4 printmedium
- Highest possible contrast ratiomedium
- Using a triadic palettemedium
- Building lighter and darker stepsmedium
- Choosing the right greysmedium
- Brand colour everywheremedium
- Cards or a list for search resultsmedium
- Layouts on ultra-wide screensmedium
- Border or shadow for cardsmedium
- Where to place form labelsmedium
- Columns at each breakpointmedium
- Fluid or fixed columnsmedium
- A grid shaped by the contentmedium
- Grid for a long reportmedium
- Text cut off in a Storymedium
- How big a photo can printmedium
- Which side to leave spacemedium
- Mixing illustration stylesmedium
- Lines that guide the eyemedium
- Heavy chart gridlinesmedium
- Emphasis without bold or colourmedium
- Big price next to small textmedium
- The Gutenberg diagrammedium
- Three levels of text colourmedium
- Every component has its own radiusmedium
- Headings that barely differmedium
- Card text that starts in odd placesmedium
Hard 36
- Text over a photohard
- Preparing for German and Arabichard
- Where complexity has to livehard
- Corner radius for nested shapeshard
- The same grey looks differenthard
- Vivid colours in dark modehard
- Pure black text on whitehard
- White gaps running down a paragraphhard
- Building even colour stepshard
- Grey text on a coloured panelhard
- Shadows pointing different wayshard
- When breaking the grid workshard
- Icon looks too high next to a labelhard
- Quote marks that dent the left edgehard
- Lightest grey text on white for AAhard
- Everything is emphasisedhard
- Laying out a sales dashboardhard
- Article text on a phonehard
- Creating tension on purposehard
- Sizing and placing a key buttonhard
- Very faint disabled controlshard
- Two equal buttons in a herohard
- Twelve colours in one charthard
- Spacing that grows with levelhard
- Combining two gridshard
- Product photos in fixed card slotshard
- Stripes in a smooth gradienthard
- Equal gaps that look unequalhard
- Partner logos that look unequalhard
- Yellow brand text on whitehard
- Cramming everything above the foldhard
- Making a flat layout feel layeredhard
- Dense layouts for expertshard
- Spindly captions in a variable fonthard
- Red for sales and red for errorshard
- Displaying a long account numberhard