Sefism UI/UX Design Cheat Sheet

What it is

The UI/UX design cheat sheet is the quick-revision companion to Sefism's UI/UX design roadmap. It is for students and early-career engineers learning to design interfaces, whether design is your main job or you are a developer who designs. Use it to revise the ideas behind each step, from framing a problem and visual design to Figma, research, accessibility and design systems.

Each concept is a short card: what it is in plain words, why it matters or when to use it, an example where one helps, and the mistake people usually make with it. Design vocabulary is a big part of the job (in critiques, in handoff, in hiring conversations), and the sheet is a fast way to keep those terms precise.

Two editions

• Designer: for aspiring product designers. It revises the process, visual rules, Figma techniques, research methods, accessibility and design system ideas you need for projects, critiques and portfolio case studies, and ends with a portfolio and first design role chapter. 76 concepts.
• Developer: for developers who design. It covers the same design process, visual rules, Figma, quick research, accessibility and design systems, then how tokens, layout and components translate into CSS and a component library. 79 concepts.

Seven chapters are shared; the eighth depends on the edition, and so do a few concepts and tips.

Chapter by chapter

1. How product design works

UX and UI, the Double Diamond, the problem statement, wireframes, prototypes, design roles, task success rate and the System Usability Scale: how design work flows from a problem to a shipped screen, and how to tell whether it worked.

2. Visual design fundamentals

Layout grids, breakpoints, a spacing scale, proximity, a type scale, line length and line height, colour palettes, visual hierarchy, Gestalt principles and icon usage. The learnable rules that make a screen look ordered.

3. Figma essentials

Frames, constraints, auto layout, components and instances, variants, component properties, Figma variables, Dev Mode and design handoff: the features that make files fast to change and easy to hand over.

4. UX research and usability

Generative and evaluative research, user interviews, leading questions, personas, jobs to be done, information architecture, tree testing, usability tests, Nielsen's ten usability heuristics and severity ratings. The designer edition adds journey maps and card sorting.

5. Interaction design and patterns

Form design, navigation patterns, Jakob's law, UI states, affordances and signifiers, visibility of system status, microcopy, error messages, modal dialogs and mobile first.

6. Accessibility

WCAG 2.2, contrast ratio, not relying on colour alone, focus indicators, target size and touch targets, alt text, semantic structure, screen readers, accessible names and checking accessibility yourself.

7. Design systems

What a design system is, design tokens, primitive and semantic tokens, component anatomy and states, documentation, Material Design 3, Apple's Human Interface Guidelines and the UI inventory. The developer edition adds headless and copy-in components.

8a. Portfolio and first design role (designer edition)

Case studies, the design portfolio, showing confidential work, design critique, design exercises, freelance scope and spec work: how to show your work and take part in hiring rounds without being exploited.

8b. Design in code (developer edition)

Flexbox, CSS grid, responsive design, container queries, CSS custom properties, fluid type, Tailwind theme variables, component APIs, Storybook and visual QA: how design decisions become CSS and components.

Each chapter links up to three library resources for depth, such as Refactoring UI, Laws of UX, Figma Learn, Nielsen Norman Group Articles, the GOV.UK Design System, How to Meet WCAG 2.2 and Storybook.

Rules of thumb worth remembering

Ten rules close the sheet, with a 126-term glossary behind them:

• Write the problem down before you open Figma or your editor.
• Use a spacing scale and a type scale, and never pick a value outside them.
• Check every text colour pair for contrast with a tool, not by eye.
• Design the empty, loading, error and success states, not just the ideal one.
• Five users per round, fix, then test again, beats one big study.
• Prefer familiar patterns; users spend most of their time in other products.
• Name tokens by purpose, such as color-text-muted, never by appearance.
• Every interactive element needs a visible focus state and an accessible name.

Designers get one more about showing decisions and the idea that failed, not only final screens; developers get one about building tokens before components and keeping raw hex values out of components.

How to use it with the roadmap

• After each stage: the chapters follow the roadmap's stages one to one. Read the chapter and check you could explain every term to a teammate.
• Before a critique: chapters 2 and 5 give you the words for what is wrong with a screen (hierarchy, proximity, system status, affordance), which makes feedback specific instead of a matter of taste.
• Before handoff or a release: chapter 6 is a short accessibility checklist, and chapter 7 checks your components have every state.
• When building a portfolio: the designer edition's last chapter covers case studies, showing confidential work, and spec work to avoid.

How it works on Sefism

Everything here is free to learn from. The public page lists every chapter title, with the first chapters open to read. Keeping the sheet uses credits, and new members get starting credits when they join. Adding the UI/UX design roadmap to your dashboard (your first roadmap is free) opens this sheet with it. In the member area you can switch between the designer and developer editions.

Related on Sefism

• The Frontend development cheat sheet, whose HTML, CSS and accessibility chapters pair well with the developer edition
• The Mobile development cheat sheet for platform layout and accessibility on phones
• How to build a developer portfolio as a beginner

FAQ

Is this enough to learn UX design? No. It is for revision; the roadmap and its picks (such as Figma Learn and Nielsen Norman Group articles) do the teaching.

Which edition should I pick? Designer if design will be your main job, developer if you build the interfaces you design. You can switch at any time.

Which accessibility standard does it use? WCAG 2.2, with contrast, focus, target size, structure and screen reader basics you can check yourself.