Pick any one of the websites you most often traffic every day and you are likely to find at least one or more of the exact same icons somewhere at the top or bottom of their homepages: You will likely find a little bird, a small camera, a lowercase “f” and perhaps a lowercase “in” on their site.
This iconography is so common, so embedded in our media now, that you don’t have to see these icons we just mentioned to know exactly what we’re talking about: Twitter (little bird), Instagram (little camera), Facebook (lowercase f) and LinkedIn (lowercase in). Copyright laws would prevent you from improving on these icons; but even if you could redesign them to your liking, there would be no reason to attempt one for your own website because everyone already knows what they mean when they see them.
We know, for instance, that when we click on the little bird on a website it will lead us to the company’s Twitter account. We don’t, however, associate that little bird with any specific company’s Twitter account; we associate it with Twitter itself.
The little bird—or the little camera or lowercase f, etc.—work as icons because they’re actionable and tell users what to do. But they also double as brand logos for these social media companies, which means that while they accomplish some of what your site needs from a UX perspective, they don’t function to enhance the aesthetic design of your site or your brand.
About a decade ago, the New York Times published an interesting article declaring the “demise” of form follows function, which is one of the most well-known axioms (or cliché’s, as the Times deemed it) associated with architectural design. The phrase, coined by Louis Sullivan, an American architect, has often been misstated, with Sullivan’s actual principle being “form ever follows function.”
But whatever the exact wording of Sullivan’s quote, the architectural design industry has always referred to it as form follows function, which essentially means “that the style of architecture should reflect its purpose,” and was used as a guiding principle for 20th Century design.
However, the Times’ Alice Rawsthorn noted that because of digital technology, “designers can squeeze so many functions into such tiny containers that there is more computing power in a basic cell phone” than was possible at NASA’s headquarters when it opened in 1958.
“That is why the appearance of most digital products bears no relation to what they do,” Rawsthorn wrote.
To prove her point, Rawsthorn used the latest model of Apple’s iPod Shuffle (again, this was 2009) that was the smallest version yet of the device.
“How could you be expected to guess what that tiny metal box does by looking at it?” Rawsthorn wondered. “There are no clues to suggest that it might play music. Like most other digital devices, the Shuffle is (literally) an inscrutable box of tricks.”
Rawsthorn added that “the dislocation of form and function has set a new challenge for designers: how to help us to operate ever more complex digital products.” With devices like the Shuffle becoming “an inscrutable box of tricks,” Rawsthorn pointed to the increasing importance that UI was playing in making digital products effectively functionable for users. She noted:
"
If the UI is well designed, you should be able to use the device so intuitively that you will not have to think about it. But if it is badly designed, the process will seem so confusing that you will probably blame yourself for doing something wrong.
"
What Rawsthorn wrote about the iPod Shuffle a decade ago is still a truism for designers today: When you’re building a website (or an app), you should be able to navigate it “so intuitively that you will not have to think about it.”
This is where iconography plays a significant role in the UI and UX process for a digital product. When we visit a website we intuitively know that by clicking on the little image of a house, it’s going to take us back to the homepage.
But now that those tiny, inscrutable metal boxes like the Shuffle have been tossed into technology’s dustbin, and we’re consuming our music and other media on devices that are actually getting bigger and more intuitive instead of smaller and more confusing, the question is whether form follows function has become a relevant axiom again to follow in design.
In fact, many designers today (we mean digital, not architectural), are more apt to follow a slightly altered version of Louis Sullivan’s famous axiom that was coined by probably his most famous pupil, the master architect and interior designer Frank Lloyd Wright. Wright said his mentor’s form follows function principle should really be form and function are one, meaning they should be “joined in a spiritual union.”
In a letter he wrote near the end of his life, Wright said that his design for the Guggenheim Museum was meant “to make the building and the painting a beautiful symphony such as never existed in the world of Art before.” For designers, a “spiritual union” takes into account aesthetics and function to create “a beautiful symphony” out of the product’s UI and UX.
This is why custom iconography can be so crucial to a design project, allowing you to not only create a visually appealing user interface, but also create a better user experience. You can get an idea of how this looks in the following examples of custom iconography that RocketAir designed for the American Council on Education and Noodle.
With the iconography for the American Council on Education, the goal was to create icons with rounded corners, “which plays in closely with the ACE Engage logo,” according to Taylor Rosenbauer, founder and CEO of RocketAir.
“We designed custom icons that fit ACE’s new brand aesthetic,” Rosenbauer continued. “By doing this, we carry the brand into and throughout the user interface to inject personality and have a custom, unique feel.”
By creating custom icons, RocketAir’s designers were able to incorporate the color palette of ACE’s logo in unique and interesting ways that would have been impossible with stock iconography. In the screenshot above, the icons are in their “activated” or “selected” state, Rosenbauer notes; when they’re deactivated, they’re just grey.
“So, when they become activated, they really light up and get the user’s attention,” Rosenbauer says.
With Noodle’s iconography, RocketAir was following a similar tack with what they did for ACE: Just as they incorporated the color palette of ACE’s logo into the icons on its website to “carry the brand into and throughout the user interface,” RocketAir’s designers were “bringing the brand vibe into the user interface” with their custom icons for Noodle, Rosenbauer notes.
In addition to strengthening a company’s brand, the custom iconography also strengthens the site’s aesthetics. In the screenshots above, the icons make pages that have no information more interesting, while also serving as “signals” to emphasize messaging in the UI.
This is why custom icons also serve an important UX function because they help users with signaling, and with “affordance”—or the idea that the UI can help indicate the intended functionality of a component before a user has engaged with it.
“Doing this kind of custom iconography is often overlooked, but it really takes the interface/product to the next level,” Rosenbauer says.
Meanwhile, when you source generic icons from an icon library, you lose out on building a sense of cohesiveness on a site because you’re pulling from different sources.
“You want the interface to feel ‘designed’—and custom icons that are all designed with the same weighting, the same thickness and the same proportions really bring a lot of consistency and togetherness to the interface,” Rosenbauer says. “And it especially plays well into a broader design system.”
