January 14, 2025 Smashing Newsletter: Issue #490
This newsletter issue was sent out to 191,893 subscribers on Tuesday, January 14, 2025.
Editorial
How do we design interfaces that look right? How do we choose the right icons? How do we make sure that a design feels balanced and that we avoid unexpected optical effects? In this newsletter, we look at interface design and icon design — with a few helpful pointers along the way.
You will also find plenty of design patterns in our lovely video course on Smart Interface Design Patterns, updated yearly.
In February, we’ll also dive into accessibility, with Smashing exploring all the intricate details of designing accessible experiences, including accessible data visualization. It’s free, and we’d love to see you there!
Also, as the year starts, we are kicking off 2025 with a few practical online workshops on UX & front-end:
- The Power of Storytelling with Chiara Aliotta,
- Design Patterns For AI Interfaces with yours truly,
- Accessible Typography with Oliver Schöndorfer,
- SmashingConf Freiburg 2025 🇩🇪 (Sep 8–11),
- SmashingConf NYC 2025 🇺🇸 (Oct 6–9).
Happy learning and exploring, everyone!
— Vitaly
1. Optical Effects In User Interfaces
Our eyes sometimes perceive things differently than we might expect. Take the black square and the black circle pictured in the image below, for example. Although they have equal width and height, the square outweighs the circle, making it appear bigger.
The example with the square and the circle stems from Slava Shestopalov’s wonderful guide to optical effects in user interfaces in which he explores the peculiarities of human vision and how we can use that knowledge to create better designs.
The guide dives deep into visual weight, optical alignment, and corner rounding and features practical tips on how to iron out the discrepancies between pixel-perfect designs and human vision to ensure every detail in your UI looks balanced. A must-read for every designer. (cm)
2. 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 that helps you master the challenge.
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 get familiar with 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)
3. Free Icon Design Video Course
Learning the fundamentals of icon design in just one hour? Well, it actually is possible, as “Intro To Icons” proves. Created by Matt D. Smith, the video course prepares you for your first icon design adventure in 30 short lessons.
The course examines icon usage in existing apps, gets you familiar with the most important traits that every icon set needs, and shares tips on how to break down seemingly complex icons into basic shapes. Matt also demystifies the language behind SVG code for you so that you can confidently export and manipulate SVGs. An hour well spent. (cm)
4. Upcoming Workshops and Conferences
As you probably know, 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 hope you’ll find them useful.
As always, here’s a quick overview:
- The Power of Storytelling ux
with Chiara Aliotta. Jan 20 – Feb 3 - Design Patterns for AI Interfaces ux
with Vitaly Friedman. Jan 22 – Feb 5 - New Front-End Adventures, 2025 Edition dev
with Vitaly Friedman. Jan 27 – Feb 10 - Accessible Typography for Web & UI Design Masterclass design
with Oliver Schöndorfer. Feb 10–18 - Building Modern HTML Emails dev
with Rémi Parmentier. Mar 3–11 - The Secrets of Web Performance dev
with Ryan Townsend. May 7–21 - How To Measure UX and Design Impact UX
with Vitaly Friedman. Video course + live training - Jump to all workshops →
5. Gestalt Principles In UI Design
The human brain is constantly connecting the dots and comparing previous experiences to make sense of the things it perceives. Understanding how these mechanisms work can help us make better UI design decisions. That’s where the famous Gestalt principles come in.
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. This is a great reminder that UI design isn’t all about pretty pixels and polished layouts but rather psychology and communication. (cm)
6. How To Pick The Right Icons
While creating custom icons for a project is a wonderful thing, there are many high-quality icon sets out there to save you precious time. So many, that it can feel a bit overwhelming at times. So, how to choose from the myriad of options?
Stéphanie Walter wrote a quick guide to help you pick the right icons for a website or app. You’ll learn how to choose the icons that best convey your message, what makes a good, consistent icon selection, and how to make sure your icons work together so your design always looks professional. Practical tips to give your design the finishing touch. (cm)
7. Icon University
Whether you’re new to icon design or want to improve your skills, the Icon University is for you. Since 2010, a team of eight designers has crafted over 170,000 icons for Streamline. Now, they share their secrets of good icon design in the Icon University for free.
The Icon University is a friendly guide that maneuvers you through the complete icon design process with practical tips and principles for good icon design. You’ll learn how to start your icon project, design icons in Figma, and color, customize, and resize them. A hand-picked collection of books on icon design, signs, symbols, and graphic grids is also part of the Icon University. (cm)
8. Recently Published Books 📚
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 by Addy Osmani
- Understanding Privacy by Heather Burns
- Touch Design for Mobile Interfaces by Steven Hoober
- Check out all books →
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 Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.