Flag

We stand with Ukraine and our team members from Ukraine. Here are ways you can help

Home ›› Business Value and ROI ›› 6 Key Questions to Guide International UX Research ›› Responsive Icons and Logos for the Responsive Web

Responsive Icons and Logos for the Responsive Web

by Joe Harrison
5 min read
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

Why designing responsive icons and logos can help create flexible, future-proof solutions that enhance user experience.

“Responsive” has become a bit of a buzzword since being coined by Ethan Marcotte in 2010. Marcotte showcased how elements on a page can dynamically change their layout to better suit smaller displays. Today, responsive design is more-or-less fully integrated into the web. It has grown with businesses buying into the principles of creating mobile optimized and flexible layouts for their websites. But it seems that the essence of what responsive design is all about has been somewhat lost. Although layout is considered the most important factor, responsive design is much broader than simply arranging content.

Responsive design is about context. Therefore, just shrinking or streamlining content on a page isn’t enough. Smaller design details such as icons and logos should follow similar contextual principles to create a truly responsive system.

Icons have become a native language for modern day devices, and we cannot simply assume that they will “slot” into responsive frameworks without certain considerations. They are incredibly effective at communicating something in a very small space, and can transcend language, communicating functionality and purpose to a global audience. They need to constantly evolve and change with users, technology, and design.

The Challenge is In the Detail

The ubiquity of high resolution displays means the quality of icons needs to be addressed. 72dpi icons just won’t cut it on today’s retina displays, so vector-based solutions need to be adopted.

resolution differences

The multitude of devices also poses challenges when displaying icons. We no longer have control over how our icons will look due to the diverse range of screen sizes, from wearables to cinema displays and everything in between. Creating a single icon that works across all these sizes can be a challenge, particularly if an icon is scaled to a very small size, because it can lose both its impact and legibility.

It seems that there is a gap in the thinking between responsive layouts and the actual design detail of the elements within the layout itself.

There are some solutions that have been devised to combat these challenges. One example is using Icon fonts, an effective but somewhat hacky technique of using web fonts to display symbols. Icon fonts allow designers to display crisp and legible icons across various devices. The problem is that the level of detail icon fonts can include is limited.

Another solution is using only CSS to display icons, meaning they, too, will render without pixelation. Again, the problem with this technique is that the icon style is limited to what we can create in code, and can also be tedious to update.

The bottom line is that both these solutions still restrict designers. Often the style of icon—such as color or level of detail—is dictated by the restrictions of the implementation method. This is not in keeping with good user experience, and current techniques do not factor in how icons are read at very large and very small sizes. So there must be a better solution?

A Responsive Solution

What if we could combine the principles of responsive design with the craft of iconography to find the perfect balance of simplicity in relation to screen size? What if the detail of an icon could change proportionately in relation to the screen width? What if icons could become responsive, adapting to the size of a device?

responsive icons GIF

You can see a visual representation of responsive icons at Responsiveicons.co.uk. The concept interrogates the complexity of icons, and the way in which they are displayed across different devices. By creating icons in SVG image format (Scalable Vector Graphic) and utilizing media queries, different icons can be displayed at different screen sizes without loss of quality or legibility. The result is a dynamically changing responsive icon, which is perfectly optimized for the size and context in which it is displayed.

What if the detail of an icon could change proportionately in relation to the screen width?

The Pros
  • Legibility: Icons are more readable at small sizes without being constrained to an ultra-minimal style when displayed at a larger size. With responsive icons, designers have the ability to fine-tune icons to display the “sweet spot” in terms of legibility across multiple sizes.
  • Flexibility: The icons will display varieties of detail depending on screen size. This is particularly useful as there is such a range of screen sizes. I used the example range earlier of cinema screens to wearables—there are huge differences! Designers may want icons to be more illustrative on larger screens.
  • Future-proof: the fluid nature of responsive icons means that icons are already optimized for new devices.
The Cons
  • Time: Responsive icons take longer to design. You could argue that iconography is already a time-consuming process, so why add extra work? Responsive web design is extra work, but the benefits of flexible solutions are becoming readily apparent on a global scale.
  • Recognition: One of the more frequent questions that I’ve been asked is how responsive icons affect user experience. If an icon changes in style, does this make it more difficult to remember? The answer is initially, perhaps. But optimization will always require differences in appearance of design, and as users become more attuned to icons on different devices within a particular brand, this problem will disappear. If anything, the changing icon may attract a user’s attention, creating a more engaged user.

The Future is Contextual

Icons are only a small aspect of a larger shift in thinking from responsive layouts to responsive design that incorporates all elements. Responsive typography is also something that is being explored, allowing web fonts to become fine-tuned for various displays and devices.

Branding could also start moving away from traditional, static and print-based principles to a more scalable future, with responsive logos and marks being used in design. We may start to see brands and designers loosen their grip on strict guidelines to allow more flexible logo solutions to be put in place.

responsive Coke logos

There are even more exciting avenues yet to be explored. Creating systems that are aware of a user’s age or culture could allow icons to be displayed based on what a user understands. For example, somebody who is 60 may not understand the same things as somebody in their teens, meaning that two different icons could be displayed based on fingerprint identification or facial recognition. This could help people through a complex process in a way that suits them best.

responsive icons age differences

Another example is thinking about responsive design in relation to ergonomics. What if icons could change in complexity based on how far away a person is from a device or display? What other tasks may they be performing at that time? Watching TV? Pushing a stroller or sitting on the bus? These contexts need to be considered if we are to create a truly effective experience when using icons.

Conclusion

Whether the concept of responsive icons is a valid technique for the future is uncertain. But it’s safe to say that creating flexible and scalable solutions that are optimized for today and considered for tomorrow can only benefit users, and the products and services that are designed for them.

 

post authorJoe Harrison

Joe Harrison, Joe is a London-based Lead Designer currently working for Great Fridays, a Product and Service design agency. He's worked on a wide range of projects for clients including Pearson, Capita, MasterCard and Nokia. In addition to designing websites and apps, Joe has a talent for iconography, and has been commissioned to create icons sets for clients such as Harrods and The Atlantic Magazine. More recently he's designed and built responsiveicons.co.uk and responsivelogos.co.uk, projects that explore new and innovative ways to display scalable design elements on the web.

Tweet
Share
Post
Share
Email
Print

Related Articles

Since personal computing’s inception in the 80s, we’ve shifted from command-line to graphical user interfaces. The recent advent of conversational AI has reversed the ‘locus of control’: computers can now understand and respond in natural language. It’s shaping the future of UX.

Article by Jurgen Gravestein
How Conversational AI Is Shaping The Future of UX 
  • The article discusses the transformative impact of conversational AI on UX design, emphasizing the need for user-centric approaches and the emerging societal changes driven by AI technology.
Share:How Conversational AI Is Shaping The Future of UX 
3 min read
Article by Savannah Kunovsky
How AI Can Help Us Solve the Climate Crisis
  • The article delves into the transformative intersection of generative AI and the Climate Era, highlighting their potential to reshape economies, influence consumer behaviors, and address sustainability challenges.
Share:How AI Can Help Us Solve the Climate Crisis
5 min read
Article by Josh Tyson
Meet the Intelligent Digital Worker, Your New AI Teammate
  • The article introduces the concept of Intelligent Digital Workers (IDWs), advanced bots designed to assist humans in various workplace functions, emphasizing their role in augmenting human capabilities and enhancing organizational efficiency.
Share:Meet the Intelligent Digital Worker, Your New AI Teammate
3 min read

Did you know UX Magazine hosts the most popular podcast about conversational AI?

Listen to Invisible Machines

This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and