UI/UX design cheat sheet (Product designer)

1. 1How product design worksWhat UX and UI mean, how design work flows from a problem to a shipped screen, and how to tell whether a design worked.8 concepts

   1. 1UX and UIUser experience (UX) is how well someone gets a job done with a product, end to end.
   2. 2Double DiamondA model of the design process in two phases that each widen then narrow: discover and define the right problem, then develop and deliver the right solution.
   3. 3Problem statementOne or two sentences naming who is struggling, with what, and why it matters, without naming a solution.
   4. 4WireframeA simple layout of a screen in grey boxes and placeholder text, showing structure and content priority without visual styling.
   5. 5PrototypeA version of a design people can interact with, from linked paper sketches to realistic Figma or code prototypes.
   6. 6Design rolesThe usual jobs around design: product designers own flows and screens, UX researchers run studies, content designers own words, and design engineers build…
   7. 7Task success rateThe share of participants who complete a given task, often reported with time on task and error count.
   8. 8System Usability ScaleA standard ten-question questionnaire about perceived usability, scored from 0 to 100.

   8 in this chapterOpen this chapter
2. 2Visual design fundamentalsThe learnable rules that make a screen look ordered: grids, spacing, type, colour, hierarchy, grouping and icons.10 concepts

   1. 1Layout gridColumns separated by gutters inside outer margins, used to align content.
   2. 2BreakpointsThe screen widths at which a layout changes, for example from one column to two.
   3. 3Spacing scaleA fixed set of distances, often multiples of 4 or 8 pixels (4, 8, 12, 16, 24, 32, 48, 64), used for all padding and gaps.
   4. 4ProximityThe principle that items placed close together are seen as related.
   5. 5Type scaleA small fixed set of font sizes, such as 12, 14, 16, 20, 24, 32 and 40, each clearly different from the next.
   6. 6Line length and line heightLine length is the number of characters per line; line height is the vertical space per line.
   7. 7Colour paletteA planned set of colours: neutrals for text and surfaces, one primary colour for actions, and semantic colours for success, warning and error, each in several…
   8. 8Visual hierarchyThe order in which the eye reads a screen, controlled by size, weight, colour, contrast, position and space.
   9. 9Gestalt principlesRules describing how people perceive groups: proximity, similarity, common region, continuity and closure.
   10. 10Icon usageUsing symbols to aid recognition, from one consistent set with the same stroke, size and style.

   10 in this chapterOpen this chapter
3. Figma essentialsThe Figma features that make files fast to change and easy to hand over: frames, auto layout, components, variants, variables and Dev Mode.9 conceptsOpens with credits
4. UX research and usabilityMethods to learn what people need and whether a design works, from interviews and information architecture to usability tests and heuristic reviews.12 conceptsOpens with credits
5. Interaction design and patternsHow interfaces behave and speak: forms, navigation, states, feedback, overlays and microcopy.10 conceptsOpens with credits
6. AccessibilityWCAG 2.2 basics that designers and developers can apply and check themselves: contrast, focus, targets, structure and screen readers.11 conceptsOpens with credits
7. Design systemsHow teams keep products consistent with tokens, documented components and shared rules, and the platform systems to learn from.9 conceptsOpens with credits
8. Portfolio and first design roleHow to show your work as case studies, take part in critiques and hiring rounds, and freelance without being exploited.7 conceptsOpens with credits
9. 9Glossary, A to ZEvery concept in the sheet and the smaller terms it uses, in one list.182 terms

Figma, usability, design for developers.