Buona giornata Smashing Friends,

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!

Get your free ticket and mark your calendar: Thursday, Feb. 20, 8–11 am (PT). (Check your timezone) 🌍

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)

From our sponsor

JavaScript Form Builder: Generate Dynamic JSON Forms And Collect Data Right In Your App

Building your own form management system is simple with SurveyJS UI components. A no-code, fully customizable form builder UI, compatible with any backend system and all popular JS frameworks like React, Angular, and Vue. Features include support for custom questions, a built-in CSS editor, PDF export, real-time analytics, and more. Get started—no sign-up required.

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.

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:

• 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. 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)

From our friends

Open Web Docs is a community of web developers, standards makers, and technology companies that considers web platform documentation to be critical digital infrastructure. To ensure its long-term health, we work together on creating and maintaining documentation and compatibility data on MDN Web Docs, caniuse.com, Baseline, and other projects. Sponsor OWD on GitHub to support our work!

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 →

Meet our newest book: Success At Scale by Addy Osmani. Get the book or browse the complete library.

9. Recent Smashing Articles

• Tight Mode: Why Browsers Produce Different Performance Results
• Lesser Known Uses Of Better Known Attributes
• How To Design For High-Traffic Events And Prevent Your Website From Crashing
• Mastering SVG Arcs
• What Does AI Really Mean?

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 rock.

Follow us on Twitter • Join us on Facebook