Let's talk about Interface Design
Why every even seemingly small design decision matters
This post will be more in the sphere of aesthetics in the world of design and specifically product design in the digital space. We all use different digital products daily on our phones and computers. Have we had the time to stop and analyse each of the hundreds decisions designers are making when creating a new UI style for the products they are designing? Obviously not, because (Who cares. (I’m joking)), we are immersing in the experience and don’t think about those things, but they do have a massive weight on the overall effect on our experience interacting with a product.
What is compounding a visual design style for a digital app? It’s basically a composition different elements, with the main ones that are: Typography, Text & Content (What we write to users and how, with what tone), Color (has the most prominent and primary effect), UI Conventions (Controllers and user flows we are already familiar with from using other products) and the last one is Visual Reference - which is a tool designers use to borrow visual elements from other places (not necessarily from the digital world) and use it in the design to support a general visual direction they’ll aim for. More elements that affect an overall design are UI effects as Drop Shadow, blur, opacity etc. & of course animation and interaction - we’ll touch these in more details later in the post.
With this short brief explanation and intro let’s dive into more details on each of these elements and see how they can affect an overall look and feel for our startup’s application or interface design.
Typography
We’ll touch this element first as it has a huge effect on how we perceive a design both form the reason that one, in modern products it’s now very common to see texts as the main components users interact with, if it’s supplying users with data, navigation, notifications - texts are playing a focal part in every modern product. Different styles of typography can definitely create a tone to an interface.
Sans Serif
Sans Serif typography communicates ease of use, simplicity, straight-forwardness and a simple attitude basically. It should be our choice when we want to have these values an integral part of our product.
Serif
Serif fonts holds a more mature, precise and profound energies. When we use these fonts it’s some what to say that the content that is delivered has some level of importance, truthfulness, and formality to it.
Slab
Slab fonts are actually variants of the Serif fonts with a little more curves and softness. A good use of slab fonts will be as display fonts - Titles, headers etc. It communicates formality with a wink. It’s been very popular with the American culture advertising world so that’s something to think of as well when we choose slab fonts.
A combination of two typography styles
This is where it gets a little more interesting. When we blend two types of fonts we create a new visual that is neither this or that. In this case Serif titles can add warmness and character to a sans serif based designs. It’s also a good approach to show data on more simple-looking fonts (sans-serif) and titles or big numbers with Serif fonts, again, utilising character to the whole interface look and feel and creating a little contrast / information hierarchy tool for the users when they scan our design.
More font sizes and style vs. Less
Here is a very basic rule - when we want to create an interface that will come across as more simple looking and easy to use, we’ll try to use less font size differences and less style differences. It will help the overall look and feel to be as close to ‘reading a paragraph of text’ so It makes sense why this rule apply simplicity.
Conversely, when we want to create a look and feel that will be more ‘interesting’ and ‘playful’ for the user we’ll use more font size and style differences. With that, using multiple font sizes that are not as similar and consistent can create even unintentionally a feeling of a ‘professional’ and ‘authentic looking’ user interface as it can feel a little undone and sometime even spartan looking.
Text and Tone of Voice
As mentioned in the typography section, in modern interfaces texts are being used in a massive amount as tools to communicate with users. What you write, how you write has a tremendous effect on the overall user experience. It has such an important role in modern UI that we can see interfaces that are almost based on texts only. If you think about it, it’s just one step before what seems to be the next step of interfaces which is text-to-voice, voice-to-text and interfaces that aren’t nessicarily require any physical object or screen or anything basically as the engagement point with users.
Color
I think this one is the most obvious one of it all. We all know how color changes everything, how different colors creates different atmospheres and emotions - and as creators and designers we use it to do just that - create digital atmosphere and engage, better say immerse our users with the experience we create utilising their emotions and feelings.
On SaaS products we use colors in a more subtle, careful way where most of the use of color goes by these parameters
Brand guidelines
We adopt brand guidelines as our base colors to work with. The prominent hues are being used in CTAs, controllers and buttons, and the more subtle ones as supplementary use of accents in different areas of the interface.
Color convention use
We use primary colors as green, red to communicate positive or negative elements in our interface, for example: positive feedback for a user engagement or an error message presented in some shade of red.
Color Background and interface accents
It seems pretty straight forward but as design is a practice that involves a lot of micro decisions that eventually create the final image what we call the interface. The background colors and interface accents - what range of colors will we use for effects like shadows? Disabled buttons, ghost buttons and less important controllers in our interface.
We can choose between a various of options, let’s go through them:
Fully White based background
We’ll go fully white based design when we want an excessive amount of focus on the content and when we don’t have a lot of information in a one screen so we can also utilise using less lines, frames and shapes to differentiate between elements. Doing that in good manners will result in a very clean, timeless, readable, modern product design.
Light grey based background
Light grey background helps to create an interface that is still simple and clean looking but can also support layering and grouping in the interface. It’s easier to divide a design into frame and boxes on a light background while still maintaining a balanced look. It works really well when we want to create an interface that is a little bit more technical looking.
Dark mode - black
Darker screens are for better readability in darker places or hours, from obvious reasons - we force the screen to project less light to our users thus making the product they are facing fit better their surroundings in terms of light balance.
Dark mode - A shade of dark blue
Different dark hues also help soothe the UI and making it a little more crisp, with each hue adding a different ‘accent’ to the interface to support an overall look and feel.
Dark mode - A shade of teal
We can see how even a slight tone change can have a big impact on the overall design. Dark blue and teal can be sometime a better fit for application that we know users going to spend a lot of time using - as creators & editing tools.
White based background with colored tiles
We know that there’s a lot of function emphasised thinking that has to come in mind when designing dashboard interfaces. We can adopt using more color when we want to create a more playful and creative atmosphere - on main screen or even on short wizards and creation screens.
UI Conventions
Conventions or better put design patterns put users in a state of familiarity with the objects they are about to interact with. When we design a new product, we can already created UI objects as advantage so when users are meeting with it it’s not their first time, and more then less they will be able to immediately know how to interact with it. In the professional design world there’s a similar term, more profound that is called ‘Affordance’, which is basically describes how to design objects in a way that already hints the user what will happen once they will interact with it. A good example could be a ‘Story’ feature. Once we’ve interacted with it once (let’s say on Instagram), when we’ll see it again in another platform or place (let’s say, Twitter) we are already familiar with it hence having more confidence to try and use it.
Visual Reference
While all of the above described elements that compound the full interface design I think this element is a little more unique and somewhat under wraps. This is because some of the design decisions we made might be influenced by things outside of the digital space and these can inspire a design that once users interact with it they will automatically, subconsciously associate it with things that they are already familiar with from the world out site. A good example of it could be a use of neon palette colors with dark backgrounds that can be associated with screens that present information on transformation stations and airports. Another example could be typography style that is associated with a more industrial angle and will use bold typography with a primary high saturated hue like bright yellow, which build a lot of contrast and automatically associates the design with the industrial world.
Neon Colors
This post will be more in the sphere of aesthetics in the world of design and specifically product design in the digital space. We all use different digital products daily on our phones and computers. Have we had the time to stop and analyse each of the hundreds decisions designers are making.
Industrial Influenced UI
This post will be more in the sphere of aesthetics in the world of design and specifically product design in the digital space. We all use different digital products daily on our phones and computers. Have we had the time to stop and analyse each of the hundreds decisions designers are making.
Summary
To re-cap product design is a result of multitude of small decisions designers are making to create a complete, cohesive look and feel for a product. Like any creative brief, good product design thrive where there are very much defined confines and rules to create in, so making sure we know what visual we're aiming for will result in a much agile process and faster result, with way way less hassle to get there. Good luck!
