Topic
Design
Interfaces that work: layout, typography, color and interaction.
- 17 articles
-
Design
Comic Sans: Why the World’s Most Hated Typeface Is Treated Unfairly
Comic Sans is called the most hated typeface in the world, unfairly. Its story shows that the hate is really about how it was misused. -
Design
Forms Nobody Abandons: 12 Rules for Better Form UX
Visible labels, well-timed validation, helpful error messages: 12 proven rules for forms, explained step by step using a real-world checkout example. -
Design
Design Systems for Small Teams: When They Pay Off and How to Start Small
When a design system pays off for a small team and how to build one in twelve weeks: from a UI inventory and design tokens to your first ten components. -
Design
Touch Targets: How Big Buttons on a Phone Need to Be
44, 48 or 24? Where the well-known minimum sizes for touch targets come from, why the hit area matters more than the visible size and what is really behind the thumb zone. -
Design
Designing Dark Mode Right: Colors, Contrast and Common Mistakes
A good dark mode is more than inverted colors. What research says about readability and how to design surfaces, accent colors, contrast and images for dark interfaces. -
Design
The Forgotten Screens: Empty States, Loading States and Error Pages
Empty lists, loading indicators and error pages often decide whether people keep going or give up. Here is how these states can show the way instead of leaving a void, explained step by step with an invoicing tool. -
Design
Color in the Interface: The Basics for Your First Color Palette
Neutrals, primary color, accent and status colors: how to build your first interface color palette without color theory, so it is easy to understand and has enough contrast. -
Design
Spacing and Grids in Interface Design: Whitespace, the 8-Point System and Layout Grids Explained
Why spacing decides whether an interface feels orderly and readable: whitespace, the 8-point system and layout grids explained simply, with before and after examples and a Figma walkthrough. -
Design
Mobile First and Responsive Design: Making Your Website Work on Every Screen
What responsive design and mobile first mean, how to prioritize content for small screens, set breakpoints and size touch targets properly. A practical introduction built around one running example. -
Design
Screen Typography: Font Size, Line Length and Line Height
What font size, how many characters per line, how much line height? Proven values for on-screen text, where they come from, and how to apply them right away in Figma and CSS. -
Design
Designing Buttons Right: Hierarchy, Labels, States and Size
Which button matters most, what should it say, how should it respond and how big does it need to be? Designing buttons and calls to action, explained step by step with one example. -
Design
Gestalt Principles in Interface Design: Proximity, Similarity and Closure
Why people see some elements as belonging together and others not: proximity, similarity and closure explained clearly, with before and after examples and a settings screen that gets better step by step. -
Design
Visual Hierarchy: How to Guide the Eye Through Your Interface
Size, weight, color, spacing and position decide what people see first on your page. How to use visual hierarchy on purpose, with before-and-after examples and simple tests. -
Design
Wireframe, Mockup, Prototype: What’s the Difference?
Wireframes, mockups and prototypes answer three different questions: what goes where, how does it look, and does it work? Follow one example project to see when you need which, and who should see what. -
Design
The 4 Most Frequently Asked Questions About the Hamburger Menu
Do people even recognize the hamburger icon, what are its downsides – and when does hidden navigation actually make sense? -
Design
What Is Atomic Design?
How the Atomic Design methodology breaks web projects down into their smallest building blocks and makes collaboration between design and development easier.