5 fundamental elements of interface design
How components like language, colour, imagery, typography, and icons work in the context of a user interface.
Before embarking on any interface design project, it is pertinent to discuss the concept of content (what is it?), context (who’s it for?), and audience (where does it live?). Identifying the goals, constraints, platforms, audiences e.t.c will help shape the designs and help in developing the best possible visual solution for it.
Prior to designing these solutions, there exist some key fundamental elements that we should keep track of:
1. Language
There are various ways we can work with words within our project:
Word as Naming/Branding
When we consider language as a design tool, naming is the first thing that comes to mind. A product’s naming has the power to set the mood at the very entry level of your brand’s experience.
Word as Tone/Attitude:
It’s quite useful to come up with a set of words that can be applied to every design direction you have. Tones vary with your brand’s intent and decisions on whether they should be strict, scientific, friendly, entertaining, fun or playful should align with those intents.
2. Colour
Colour also sets the mood for your interface as humans generally respond to them in a very emotive and subjective way.
Since colour is both relative and subjective, we have to figure out how to control that subjectivity a little bit in order to get it to do what we want it to do for our interface i.e create the intended atmosphere, mood or function.
Colour as Mood:
When we have a purely black and white creative, we often admit the connotations with such as very serious, and that stems from cultural connotations of black and white printing in newspapers and early photography. By adding a simple vibrant colour to the creative, we can immediately change such connotation.
It is safe to know that some connotations come from real world while some were fabricated. Pink representing boys and blue representing girls is an example of a cultural convention.
Colour as Navigation:
In terms of function, colour can be used in a variety of ways but most prominently as a navigation in our interface.
Taking a look at the 2 buttons below, it becomes immediately apparent which of them is passive and which is active. We can also use colour to show states like passive (inactive), active (touch/hover), activated (press/click) e.t.c
3. Imagery
Imagery can come in different styles: shapes, illustrations, photography, 3D renderings, e.t.c. But whatever the style, they can serve as content, mood, and navigation in the context of an interface design.
Imagery as content
Imagery can serve as content in our interfaces in 2 primary ways:
Contained imagery: where the imagery exists in some form of grid or frames. This type of imagery is usually for delivering some sort of content to the intended audience. Examples include product images in an e-commerce site search results, a grid showcasing a hierarchical category of some sort e.t.c
Contained imagery provides a very functional comparative structure that is very useful when you need to work across contents that need to be searched or that need to work across a lot of different sized platforms.
Immersive imagery: where the imagery exists as a design element in itself, breaking out of the box and being in its own world. This is usually common for games, apps, animations e.t.c
Imagery as mood
Imagery can help to set a tone or ambience that the audience can relate to. Usually, brands do have a style guide that explicitly states what type of images to be used and how they should be used across an entire brand experience.
Imagery as navigation
Asides the aesthetic function, imagery can also serve as a navigation. This is very common in the e-commerce space. For instance, on the Balenciaga product page, imagery serves as the main navigation element. Imagery as navigation also has immense usefulness in geospatial sectors.
4. Typography
Type can work in many different ways in the context of an app or a website. This includes working as content that we consume, as part of an interface in terms of buttons or labels or as part of a branding system to give your product a recognisable identity.
Typography as content
Content consumption can be in form of text, videos, audios e.t.c But text is quite better in some areas than these other forms. Think of how to represent the word “ambiguous” with an imagery or video. Type comes to the rescue when it becomes difficult to depict certain representations. Type is fast, accurate and economical (in terms of a screen real estate).
Typography as interface
Text needs to have a visual form and a typographic representation. So, it becomes a design problem. As Harshita Arora shared in her freeCodeCamp article, typography also determines readability. Semantically, type is also less ambiguous when trying to depict some representations.
For instance, in the image below, STOP only means one thing: there’s absolutely no gray area there. There’s no different interpretation, and this can be very useful in terms of designing an interface. Language is very economical in terms of its meaning and has a great deal of flexibility in terms of how it works that imagery cannot compete with.
So, words are great for the accurate representation of complex non-visual concepts and this is great for an interface designer because quite often, we’ll be trying to show things that are complex non-visual concepts, and these appear in a lot of different places, in menus, naming, buttons, instructions e.t.c Type is everywhere in our interface because it’s still the fastest and most accurate way we have to communicate complex and specific ideas.
Typography as branding
Type here is less about content or connotation but more of identity and individuality. The aim here really is to have a typographic visual brand that helps your product stand out. For Google, that could be settling for Product Sans as their default brand type. For this function of type as a branding element, it works closely with colour and sometimes icons.
5. Icons
Generally, icons vie for visual interests and recognizability. One of the things that people often get confused about is the difference between an icon and a symbol.
Icon vs Symbol
An icon shows us a visual representation of a thing that is relatively realistic compared to what the thing is. But a symbol doesn’t necessarily look like the thing that it represents. An icon is pictorial, a symbol is non-pictorial. It will be hard to represent something as broad and something as abstract as music with a fixed single visual image.
Icon as interface
Icons and symbols act as interface elements by representing certain actions. For instance, the notification icon on Medium looks like a bell, so it represents that but as a symbol, it stands for the idea or concept of notifications. A very common example that is used for two different things is the magnifying glass. It’s used when we want to zoom in and zoom out, which is its iconic function, but it’s also used when we type text into search for something, which is its symbolic function.
Icon as branding
Icons and symbols can act as instant representatives of a product, brand or company. A popular instance is the Apple logo which is more recognized in its symbolic form as Apple’s identity and less as an icon denoting apple as a fruit.
We don’t even see an apple and think of food anymore when we see it drawn in this way, we can only think of the company. The connection and familiarity we draw to this is a manifestation of how a symbolic representation can totally eclipse the literal depictive value of an icon. The success here relies on combining what is commonly obvious with what is learned or associative.
