--- title: "Design" url: "https://insideuxdesign.com/en/blog/design" language: "en" description: "Interfaces that work: layout, typography, color and interaction." published: "2026-10-14T09:50:33+02:00" updated: "2026-10-15T00:41:53+02:00" --- # Design Interfaces that work: layout, typography, color and interaction. Topic # Design Interfaces that work: layout, typography, color and interaction. - 17 articles [ ](https://insideuxdesign.com/en/blog/comic-sans-why-the-worlds-most-hated-typeface-is-treated-unfairly) 14. Oktober 2026 ·Design ## [Comic Sans: Why the World’s Most Hated Typeface Is Treated Unfairly](https://insideuxdesign.com/en/blog/comic-sans-why-the-worlds-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. [ ](https://insideuxdesign.com/en/blog/forms-nobody-abandons-12-rules-for-better-form-ux) 8. Oktober 2026 ·Design ## [Forms Nobody Abandons: 12 Rules for Better Form UX](https://insideuxdesign.com/en/blog/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. [ ](https://insideuxdesign.com/en/blog/design-systems-for-small-teams) 6. Oktober 2026 ·Design ## [Design Systems for Small Teams: When They Pay Off and How to Start Small](https://insideuxdesign.com/en/blog/design-systems-for-small-teams) 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. [ ](https://insideuxdesign.com/en/blog/touch-targets-how-big-buttons-on-a-phone-need-to-be) 16. September 2026 ·Design ## [Touch Targets: How Big Buttons on a Phone Need to Be](https://insideuxdesign.com/en/blog/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. [ ](https://insideuxdesign.com/en/blog/designing-dark-mode-right-colors-contrast-and-common-mistakes) 12. August 2026 ·Design ## [Designing Dark Mode Right: Colors, Contrast and Common Mistakes](https://insideuxdesign.com/en/blog/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. [ ](https://insideuxdesign.com/en/blog/the-forgotten-screens-empty-states-loading-states-and-error-pages) 15. April 2026 ·Design ## [The Forgotten Screens: Empty States, Loading States and Error Pages](https://insideuxdesign.com/en/blog/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. [ ](https://insideuxdesign.com/en/blog/color-in-the-interface-the-basics-for-your-first-color-palette) 11. März 2026 ·Design ## [Color in the Interface: The Basics for Your First Color Palette](https://insideuxdesign.com/en/blog/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. [ ](https://insideuxdesign.com/en/blog/spacing-and-grids-in-interface-design-whitespace-the-8-point-system-and-layout-grids-explained) 20. August 2025 ·Design ## [Spacing and Grids in Interface Design: Whitespace, the 8-Point System and Layout Grids Explained](https://insideuxdesign.com/en/blog/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. [ ](https://insideuxdesign.com/en/blog/mobile-first-and-responsive-design-making-your-website-work-on-every-screen) 11. Juni 2025 ·Design ## [Mobile First and Responsive Design: Making Your Website Work on Every Screen](https://insideuxdesign.com/en/blog/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. [ ](https://insideuxdesign.com/en/blog/screen-typography-font-size-line-length-and-line-height) 12. Februar 2025 ·Design ## [Screen Typography: Font Size, Line Length and Line Height](https://insideuxdesign.com/en/blog/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. [ ](https://insideuxdesign.com/en/blog/designing-buttons-right-hierarchy-labels-states-and-size) 17. April 2024 ·Design ## [Designing Buttons Right: Hierarchy, Labels, States and Size](https://insideuxdesign.com/en/blog/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. [ ](https://insideuxdesign.com/en/blog/gestalt-principles-in-interface-design-proximity-similarity-and-closure) 13. März 2024 ·Design ## [Gestalt Principles in Interface Design: Proximity, Similarity and Closure](https://insideuxdesign.com/en/blog/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. [ ](https://insideuxdesign.com/en/blog/visual-hierarchy-how-to-guide-the-eye-through-your-interface) 14. Februar 2024 ·Design ## [Visual Hierarchy: How to Guide the Eye Through Your Interface](https://insideuxdesign.com/en/blog/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. [ ](https://insideuxdesign.com/en/blog/wireframe-mockup-prototype-whats-the-difference) 17. Januar 2024 ·Design ## [Wireframe, Mockup, Prototype: What’s the Difference?](https://insideuxdesign.com/en/blog/wireframe-mockup-prototype-whats-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. [ ](https://insideuxdesign.com/en/blog/the-4-most-asked-questions-about-the-hamburger-menu) 23. Dezember 2023 ·Design ## [The 4 Most Frequently Asked Questions About the Hamburger Menu](https://insideuxdesign.com/en/blog/the-4-most-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? [ ](https://insideuxdesign.com/en/blog/what-is-atomic-design) 23. Dezember 2023 ·Design ## [What Is Atomic Design?](https://insideuxdesign.com/en/blog/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.