Visualize the Invisible in 10 Minutes! | UI Design

What is UI? User Interface. I’ve talked about the general overview of UI in my previous post, so I am going to summarize, it is the bridge between the user and the content.

This read will talk about the big picture of overall design direction commonly referred to as the look and feel. We’ll go into the details of how components of visual design work in the context of the interface design and finally, we’ll talk about how UI designers use language, shape, colour, imagery, typography and icons as formal building blocks to create complex visual structures.

So that was a mouthful but don’t be scared, I’ll take a very casual approach here and if you’ve read the previous post, you know I live up to my promises.

Let’s dive in.

I believe I don’t need to tell you this but to work on a UI, you first need to define what are you creating? Who is it for? Where does it live? Without clear articulation, no matter how much we work, it will lead us nowhere. No idea. No UI. Simple.

First, let’s take apart the term “Look and Feel.” It translates to a broader sense of how design works in a UI project. The style and the mood of the project. UI designers tend to envision the emotions and mood the interface is going to inspire and then make visual decisions accordingly.

One method they employ is of mood boards. A mood board is where they try and paint a broad picture of research and look and feel. This helps them envision the overall design direction and this is still part of pre-design. This is like painting a picture with broad visual strokes trying to get a design sense.

This is the core of what a lot of UI design comprises of. It is envisioning the design, trying to give it a visual form before it even exists. Deriving the tangible from the intangible. This is one of the most key skills a UI designer must adhere and train. Visualizing the invisible. To begin a mood board, the first thing to do is some visual research, which is relatively easy nowadays with some fantastic copyright-free photo libraries like Pexels and Unsplash. Find the images that define and set the mood of your project. Typography and Color are also integral aspects of mood boards as typefaces themselves have a certain feeling about them and varying colour palettes convey a different sense of emotions. These are all very broad design elements that we are choosing from. When you in effect put all these together — the visual research, typefaces, colour palette — you are creating a mood and a feeling of imagery, of colour and typography, and by conjunction, the feeling of your idea.

Now that we have a good idea of “look and feel” of UI and how to determine it using mood boarding, it is time to take on the visual elements, the building blocks of complex interfaces.

First one on the list is Language as a tool. So far, we’ve settled what does our product shall look like and what does it feel like, in a very visual way. Now we can think about words. Designers work out how they can use words to describe the tone and attitude much in the same way as a mood board, but literally. It is quite helpful to come up with a set of words, and those words won’t apply to every design direction that you have, but to that specific product only.

An example can be like

“The images are less about having a reality, be much more animated or cartoonish and they should give a different overall feeling than words. It would be much more friendly, casual, fun. Much less practical feeling. Maybe entertaining”

The keywords used in the example of animated, cartoonish, different, friendly, casual and others describe our product and we can use them to brand and name the product. In addition to the descriptive meaning, the sound and emotion associated with the linguistics should also be considered while branding.

Then come Color and Shape. We’ve previously discussed how colour works to create an overall mood. It is time to go into the specifics. Human beings generally respond to colours in a very subjective and emotive way. Black and white often have connotations with that of design being very serious and that stems from cultural connotations of black and white newspapers. By adding just a bit of colour, we can change those connotations. For example, replacing white with red, Red and Black carry a connotative meaning of energetic and dynamic. Colour is relative and subjective, so what designers do is they control that subjectivity and get it to do what they want to create an atmosphere, a mood as well as function.

Colour for function? Seen traffic lights. That’s an apt example. We can use colour for navigation in our interfaces.

Pretty sure you will press the green button. We are used to thinking that perhaps green makes it the one to be picked, but in reality, there is another dimension working for it. Its distinction. It stands out.

Another way colours work is by creating a system of similarities and differences. Similar colours function similarly and vice versa. That can also work in terms of associations.

If you look at the above three sets of buttons, you will be perceiving the green one as the activating button, the grey the inactive and the red one to stop. This perception is based on real-world experiences and the connotations that these colours hold. Green is associated with active and successful. Grey, a dull colour, is associated with inactivity and this is true for all muted colours. Whereas, red is associated with intensity, error, and stopping emotions.

You can probably understand this one by yourself. One button can take on different colour states to tell different things. All these techniques and methods enable designers to control colours’ subjectivity for their purposes.

Let’s talk about Shapes now. There are two ways designers use shapes, as interface elements such as buttons and as design elements such as shapes mixed up with images. The interface elements are used for functional purposes whereas design elements for look and feel. Design elements are not essential for functionality but important for creating a mood. They use shapes for interface elements because of their functionality and it’s a certain kind of shape that is normally geometric, simple, and systematic making it easy to learn — since they are familiar to the real-world.

Imagery is another tool designers use since this is an image-based society we live in and are accustomed to information containerized in boxes visually. Imagery is primarily used for delivering information visually. If in our interface we need to offer visual variations, then the imagery is the best option since the text would get monotonous and boring.

There are two types of imagery. Contained and immersive. Contained imagery is what our social media comprises of whereas the immersive imagery forms a universe of its own such as games. Contained imagery is very useful when we need to deliver a lot of content that needs to be searched. Imagery will always add to the mood of the UI due to its visual form. Ever used icons for navigation? Back buttons, home screen buttons that are all imagery as navigation. So, you can see how diverse and elemental imagery is, it can be used for content, mood, and navigation all at the same time. It may sometimes not offer navigation, but it will always add to the aesthetics and mood.

Now we are going to discuss Typography as a tool for design. This one is as elemental as they come. An interface cannot be all visual. There would be so much ambiguity since every user will perceive it differently. This would raise so many design failures. The aptest and thorough solution is typography. It is used for content, interface, and branding. Text is fast, physical, and accurate. Leaves very little to perception and is a perfect medium to represent abstract entities. Text is a prevalent medium and is not eclipsed by video and audio and is still one of the most common methods of carrying knowledge — web, blog, tweets, and texts.

Text as an interface. The same attributes make it a perfect candidate — fast, accurate and economical. Economical how? Instead of writing the entire word “information”, we can use an icon with the letter “i” and it would pass the message.

Another example is of the capital letter “P” which represents parking, but if you add a grass letter ”s” to it ‘Ps” it represents Photoshop application. See how fast and economical it was to convey a message.

Finally, text as branding. Branding brings identity and a sense of individuality to the product. See the example above. Without their styling, the names lose their identity, recognizability and the mood their brands generate. Type matters.

We are at the last of tools for designers — Icons. Icons are very often confused with symbols so let’s tackle that first. In simple terms, icons are pictorial, and they look like the physical thing they represent whereas, symbols are non-pictorial and are representing more abstractly. Symbolic meanings need to be learned.

The designers try to find a middle ground between the two, then they can get the value from both the iconic meaning and the symbolic. It gives a much richer element. A good icon is capable of communicating ideas and aesthetics. It is functional and represents its technicality. It is easy to understand by the audience as well as is easily recognizable.

These were all the tools a UI designer uses to visualize the invisible. That wasn’t that hard now was it? Although for a UI designer, knowledge of these tools is not enough. They need to take care of some abstract features as well. What the interface looks like and how it is connected to how the interface works. Form, experience, and function are all connected.

They need to take care of the functionality of the system and make it logical hence predictable. Breaking the logic makes it difficult for the user to learn and interact, negating the entire meaning of the user interface. It should be expandable, and the predictability should apply to other components of the same interface. For example, a red button if stop something in one place, it should have the same function at the other places it is used. This helps the user define the roles and make predictions.

How does an interface work then? Logic, hierarchy, system, intuition, discovery, and learning.

Another feature they need to think of is Speed and Style. There are pros and cons to each. If the designer wants the speed to be fast, then the UI will be simple, direct, unambiguous, rapidly adaptable, predictable, and logical. However, the cons for all these can be that it may make the interface a bit boring. This is a challenge where a designer needs to make decisions on the complexity of the interface. Take the example of a button or other systems like menus, links, and fields. These are some the fastest means of interaction and their predictability both stems from real-world experiences and learned behaviours. A designer ensures to maintain speed for these components for easy navigation and interaction or otherwise it would affect the experience.

Designers also focus on making the styling entertaining, engaging, rewarding and individually unique. These are all really good attributes but may backfire and start to obstruct the experience, become time-consuming, frustrating and the uniqueness may seem unnecessary.

The best interface is the one that is visible and invisible at the same time.

Some interfaces can be content and functional driven like that of a calendar app. Its layout composition, colour palette, typography, icons, shapes will all be affected by the content it needs to deliver.

I believe this does it. This is one comprehensive and thorough brief on a UI Designer’s skill of visualizing the invisible and envisioning an interface out of an idea.

If you reached this end, you seriously need to pat yourself as now you are extremely well informed about a designer’s practices and will look at every digital interface differently. You should follow to stay tuned as I would be posting about UX design practices.

If you feel this helped, be sure clap a bit. It always feels good to be appreciated.

To learn more about design and tech do checkout The Design and Tech Show on YouTube, where I talk about UX in a visual manner.