Smashing Magazine - #440: Interface Design

Design better animations, typography, icons and use Gestalt principles in product design. Issue #440 Jan 23, 2024 View in the browser

Smashing Newsletter

Konbanwa Smashing Friends,

Interface design matters. A well-functioning product will get people through their tasks, but it’s also well-designed, people might stay with it for years to come. That’s also how we craft a compelling story and guide users through their flows. Andd: that’s also where interface design patterns come into play.

In today’s newsletter, we look at the interface design — from Gestalt principles and typographic hierarchy to iconography, writing systems and animation. Happy exploring, everyone!

SmashingConf Freiburg
SmashingConf Freiburg
SmashingConfs 2024: our schedule for 2024, and we’d be absolutely delighted to welcome you! Jump to all photos (by Marc Thiele).

On our end, we are slowly rolling out new speakers, workshops and projects for 2024. As always, if you are looking for kind, passionate, and smart friends, we have wonderful SmashingConfs this year — with early-bird tickets and friendly bundles for teams.

Sending a lot of positive energy and peace your way, everyone — to you and to wonderful people around you.


1. Guide To Animation In UX

Getting UI animation right can be a challenge. It needs to feel natural and be unobtrusive enough not to distract users from the task they want to perform. But how to achieve that? Taras Skytskyi wrote a practical guide to using animation in UX, covering all the rules and principles you need to be aware of to create delightful animation effects that, well, feel just right.

The ultimate guide to proper use of animation in UX

The guide explores animation duration and speed, easing, and choreography. You’ll learn to adapt your animation to different screen sizes and platforms, how to read animation curves, and how to guide your user’s attention when transitioning from one state to another. Taras doesn’t cover specific use cases but rather universal principles that you can apply to all kinds of interface animations. (cm)

2. Gestalt Principles In UI Design

The human brain is constantly trying to make sense of the things it perceives, connecting the dots and comparing previous experiences. Understanding how these mechanisms work can help you make better UI design decisions. That’s where Gestalt principles come in.

Gestalt Principles In UI Design

Developed by German psychologists in the 1920s, Gestalt (“form” or “shape” in German) defines a group of visual perception principles that explain how people perceive visual elements.

Eleana Gkogka wrote a detailed overview of Gestalt principles in which she not only explains each principle in detail but also explores how it applies in UI design. A great reminder that UI design isn’t all about pretty pixels and polished layouts but rather psychology and communication. (cm)

3. The Art Of Symbols

The dot, the pentagram, the Star of Venus, the Saint Hannes Cross. For more than 40,000 years, humans have used symbols to communicate complex ideas. And while some symbols are still widely understood today, others are more obscure. To learn more about the origin and meaning of ancient symbols, the team at brand strategy and design agency Emotive Brand created Art of Symbols.

Art of Symbols

Art of Symbols explains 100 symbols from the history of humanity. But not only that. It also renders them in a new way to breathe fresh life into the ancient shapes and reflect on their core ideas. The project is a wonderful encyclopedia of symbology and a great example of how a simple symbol and creative decision-making can create a powerful design. (cm)

From our sponsor

Make Better Use Of Data With Datacamp

DataCamp helps individual learners make better use of data. Build data skills online while learning from the world’s top data scientists. Help close the talent gap with DataCamp.

4. Typographic Hierarchy

Typographic hierarchy helps users find the things they need more quickly. So what’s the key to creating a visual hierarchy that guides a user’s view and attention purposefully? Oliver Schöndorfer shares practical tips for establishing typographic hierarchy with contrast and space.

Typographic Hierarchy

As Oliver explains, contrast can be achieved in several ways, with weight being the most striking one. The second cornerstone to creating visual hierarchy is space, meaning that you reduce space when elements belong together. To help you get typographic hierarchy right in your next project, Oliver also compiled a five-step roadmap you can follow along. (cm)

5. Upcoming Workshops and Conferences

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

Smashing Online Events
With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s a quick overview:

6. The World’s Writing Systems

Did you know that 131 of the 293 writing systems we know of today aren’t encoded in the Unicode standard and thus can’t be used on a computer? The World’s Writing Systems is the first step of an initiative to identify them — and an exciting journey through the history of writing systems and the remote corners of typography.

The World’s Writing Systems

From historic scripts like Egyptian hieroglyphs to writing systems that have developed in the last few years, such as Luo in Africa or Badaga in South Asia, the site showcases writing systems throughout history. It presents one glyph for each writing system and also features details on whether the system is already encoded in Unicode. Fascinating! (cm)

From our sponsor

Explore Thousands Of Hands-on Creative Classes With Skillshare

From creative arts to business and technology, Skillshare has something for everyone. If you're looking to learn something new or enhance your existing skills, explore the Skillshare platform today and start your own learning journey.

7. Complete Guide To Iconography

Icons are mighty little helpers. They can be quickly understood, are language-independent, and don’t take up much space in a design. If you’ve always wanted to create your own icon set or need to design icons for an upcoming project, Bonnie Kate Wolf wrote a complete guide to iconography.

A complete guide to iconography

The guide takes you step-by-step through the process of building icons, aligning them with your brand, and integrating them into your design system. You’ll dive deep into the basic elements of icons, explore design considerations, and also learn more about using boolean operations and vector networks. Precious advice for design systems experts, illustrators, and product designers alike. (cm)

8. News From The Smashing Library 📚

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. Have you checked them out already?

Success At Scale
… and we’re currently working on a new book: Success At Scale, shipping in February. Pre-order your copy or browse the complete library.

9. Recent Smashing Articles

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#439: Accessibility and Inclusive Design

Tuesday, January 16, 2024

Playbook for universal design, accessible target sizes and tools for accessible design, annotations and brand colors. Issue #439 • Jan 16, 2024 • View in the browser Smashing Newsletter Latha math

#438: Free Books and Guides

Tuesday, January 9, 2024

With books, templates and guides for product designers and front-end engineers. Issue #438 • Jan 9, 2024 • View in the browser Smashing Newsletter Boa noite Smashing Friends, Roll up your sleeves! In

#437: New Ways of Working in 2024

Tuesday, January 2, 2024

New work practices for 2024, UI Stack, “How to work with me”-manuals and useful tools for Figma and SVG. Issue #437 • Jan 2, 2024 • View in the browser Smashing Newsletter God kveld Smashing Friends,

#436: State of Front-End, AI and UX 2024

Tuesday, December 19, 2023

New opportunities and challenges ahead of us — from new CSS and JavaScript features to state of AI, UX, email design and graphic design in 2024. Issue #436 • Dec 19, 2023 • View in the browser Smashing

#435: Figma

Tuesday, December 12, 2023

Figma file organization, advanced Figma techniques, optimizing large and slow Figma files, wireframing toolkits and accessibility plug-ins. Issue #435 • Dec 12, 2023 • View in the browser Smashing

You Might Also Like

The Color Secrets Pros Swear By

Thursday, July 11, 2024

View in your browser | Update your preferences ADPro Keeping Up With Color It seems there's a new hot topic in color every week. This year alone, we've seen the “unexpected red” theory take

What’s Behind a Microtrend?

Tuesday, July 9, 2024

View in your browser | Update your preferences ADPro If you've ever wondered about the next big decor moment or debated dipping a toe into TikTok, AD's Senior Digital Design Editor Sydney Gore

#464: Friendly Little Helpers

Tuesday, July 9, 2024

Radio time machine, reverse dictionary, micropedia and templates on how to say No and Goodbye with grace. Issue #464 • July 9, 2024 • View in the browser Smashing Newsletter Gamarjoba Smashing Friends,

Accessibility Weekly #404: Overlays Misunderstand Accessibility

Monday, July 8, 2024

July 8, 2024 • Issue #404 View this issue online or browse the full issue archive. Featured: Overlays misunderstand accessibility "Accessibility overlays are a peculiar approach to accessibility

Reflections from Config

Sunday, July 7, 2024

Issue 202: Thoughts from the annual Figma conference ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Athena Calderone and Young Huh’s Savviest Social Media Advice

Tuesday, July 2, 2024

View in your browser | Update your preferences ADPro As we head into the July 4th holiday, we're revisiting some of our most popular business tips. Among our faves: This conversation on social

#463: Data Visualization

Tuesday, July 2, 2024

Data visualization in design systems, visual data visualization vocabulary, decision trees, color scales and accessible charts. Issue #463 • July 2, 2024 • View in the browser Smashing Newsletter Hello

Accessibility Weekly #403: In Detail - 1.4.11 Non-Text Contrast

Monday, July 1, 2024

June 24, 2024 • Issue #403 View this issue online or browse the full issue archive. Featured: In detail: 1.4.11 Non-Text Contrast (User Interface Components) "The Web Content Accessibility

Spotlight: Kate Syuma

Sunday, June 30, 2024

Issue 201: A conversation on scaling at Miro, Growthmates, and advising ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Inside Balsamiq: our new approach to internal product training

Thursday, June 27, 2024

Streamlining our team's product knowledge ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏