Guidelines, but for Design!
What is It? 🤔
It’s basically something that you should stick to when you’re making something, especially design and interfaces. Design guidelines are being made because developers can have their own view of doing something. That’s why sometimes there should be a fine standard on how something should be done properly. 👍
So, there are some several things to consider on why we should have a design guideline.
- Should be easier for developers to code. Well, sometimes specifications can be a bit late. So design guidelines let developers know what to do and the standard on how to fill small things, like button color, scrolling views, or just any small details in general that is not included in the prototype.
- Consistency, which is important to make a good a united impression on our app. Consistency here means the same design will apply to each page of our application. This is kinda important. I’ll give you a quick peek of our software engineering app (again I can’t stop promoting it because these blog series is just meant to showcase on what I’ve learned throughout the course)
- One of the most important point of consistency is maybe just not about the usual things you may expect (colors between each screen). But one of the most important things is computation between screen, should be consistent. The above screenshot was a demo for the app in a large Samsung Galaxy Tab, which still looks great and runs well! Why? Because we’re using a consistent computation by not just using pixel comparation, but also width and height scale of the window. 📞
- Speed up implementation process. I’m not kidding about this one. When you’re sticking to a design guidelines, a good developer team will eventually sticks out their preference into such design patterns that let the developer reuses components, and making constants everywhere! Which is a good practice, because it will shorten code, increase readability, improve code single responsibility. 🍎
Come on, let’s consider something
When making design guidelines, there are several things we should pay attention to.
UI components should be consistent. To do this, it is very recommended for us to create our own button component that can be used everywhere. It can be adjusted using a certain library. For example, we’re using Native Base Components Library. Even though the library already provide a good button, we still have to equip that button, for example adding certain standard of color scheme, functionality, and such. 🤔 For example, here is the Promise Button components which take up a promise and can make it load when the handler is running. With this, the spinner design should be consistent everywhere.
Font, font size, color, are also quite important. You don’t want to have a screen that is fully styled with a certain font style while some are not. It can actually be adjusted through a global color components. In React Native or Expo, which the project basically we maintain, there is a NativeBaseProvider wrapper that can contains lots of theme, which can be used to adjust fonts and colors. 🦊
Color Analysis
Let’s have some fun here, but we’re still discussing about design guidelines.
This is how I organize the folders, there are several reasons on why I did this.
- It’s easier for me to remember colors for each apps.
- I like to see when app icons lined up well.
Now, maybe you wonder what’s the meaning of some colors. And you should wonder, why are there less yellow colored app, and purple ones. Not because they’re bad. But just because I don’t really use those kinds of softwares that are colored yellow.
Referencing from https://citygro.com/color-and-meaning-business-branding-infographic:
- Red: Attention-getting, warmth, power, passion, action. Red raises the blood pressure, and makes people hungry.
- Yellow: Joyful, curiosity, happiness, warmth. Yellow is attention grabbing, and promotes happiness and warmth.
- Orange: Affordable, creative, light-hearted, and youthful. Orange combines the effect of red and yellow, exciting, and may drive appetite.
- Green: Healing, tranquility, environmental, fresh. Green represents vitality and renewal, and is eco-frinedly and soothing.
- Blue: Calming, confidence, dignity, loyalty, trustworthy. Blue is popular in government and medical companies for its authoritative appeal and ability to evoke success and security.
- Purple: Expensive, nobility, regal, sophisticated, and spiritual. Purple is a blend of red and blue, and is viewed to have confidence and warmth.
- Pink: Feminine, innocent, and gentle. Pink is often used to add female appeal, and represents innocence and delicateness.
- White: Peace, purity, cleanliness. White shouldn’t be underestimated.
- Brown: Natural and earthy, rough, and utility. Brown is used to represent construction, and depth.
- Black: Distinctive, serious, and authority. Black is sophisticated and classic, just like a clean-cut suit.
Well to be honest I don’t understand why I write this section. I just thing that like some color scheme make it easier for people to leave an impression under their conciousness. In our app, we were tasked to set the color scheme to blue. It’s the meaning of trustworthy, as it’s a financial app, it explicitly implies that you can trust us. 🙏
But regardless of color, navigations, and readable font size should be a standpoint when making a design too, and functionally, our app should maintain a mental model that is familiar in the real world, and doesn’t take any new hard stuff to learn when first getting into our app 🌵.
For example, this is a screen that basically asks you to reorder those phrases making sure you have taken note of it.
Typography Analysis, The Sans Serif vs Serif Battle
Typography means the rules of our font use, font size, ad font weight.
We were going to use the Inter font, because it’s a good Sans Serif font. You might have ever wonder, when determining fonts, there is a serif, mono, or sans serif tag.
In general, here are the characteristics of each font type:
- Serif, Each character in serif usually end in strokes, it has this unique old school type of font where it’s used to emphasize or make something more readable or official. Sometimes we can see it newspaper article, or research paper in general. 👨💼
- Sans Serif, the letters and characters are plain and have that modern accent kind of vibe, it doesn’t have any strokes at the end, and usually placed where we want to make something stand out. Social media and products use this kind of fonts. Facebook uses this type of font. Facebook, twitter, online games, usually use these kinds of fonts. 🍬
- Monospaced, in monospace. each character have the same amount of horizontal space. We can see this in a text editor or command lines. It is used to make matrix and code clear. 👩💻
Well in our app, we mostly used the sans serif one. Typography should be discussed for the sake of readability and eye pleasing ness of a text.
Component
There are some special basic components that should be defined as per your app. Some of them are button, input field, icon, cards, and some more depends on your app. In our app, we used coin cards and history cards for easier display management. For example, this is the investment card, which is used on some place of our app.
There are also transaction history card, easier to display more than one object of history item.
Talking about components, next we should talk about atomic design
Atomic Design
Brad Frost talked about the concept of atomic design, in a nutshell, it tells us to design everything atomically, everything is contained on top of the others, and that containers should be separated into its own responsibility sistem, hence, the atomic.
Reference: https://bradfrost.com/blog/post/atomic-web-design/
He separated atomic design into 5 different levels:
- Atoms, atoms here is the smallest level of the components, this are usually denoted by text, url or images, which in some hypertext languages, like HTML is the ones which is wrapped with the label tag ones.
- Molecules, Molecules are composed by atoms, we can see molecules as a component, and implementation wise, sometimes you don’t really need to create a class out of this one yet, because it’s not necessarily be used anywhere. But molecules are sometimes denoted by a wrapping of a container, for example a flexbox which wraps the “atoms”.
- Organisms, are composed of molecules, in this level, sometimes should be separated into several different classes. Why? Because Organisms are tend to be reusable.
- Taking a look at the above example, the header of the page is considered as an organism, while the current price and its price is the molecule, same as the coin name and its logo, it’s considered as a molecule. here, the organism can be made into a functional component, or class component, next time you wanna use it in other places, you can just reuse it.
- Templates, you should see everything coming together. Template consists of organism, BUT, not yet been filled with data and enough knowledge to be something interpretable by the user. Next, you should see te upper level, page.
- Pages, are a specific instance of a template. If we consider the example above, templates are like the skeleton of the page, while pages are the specific instance which uses the template. For example, if I open another screen which shows “Ethereum (ETH)” instead of “Bitcoin (BTC)”, those are the pages I meant.
Why is this design principle can be taken into consideration when making design guidelines? Because we can specify each level into other programmers in the team. The atomic design separates responsibility of components based on its level of cohesion. It provides a clear methodology for crafting the user interface.
It gives us the ability to traverse from the “PLAN” to the “RESULT”.
Look Goods on The Eye, Color System
The above design principle is actually not yet complete without the attributes, or properties. One of them is color.
References: https://usabilitygeek.com/colors-in-ui-design-a-guide-for-creating-the-perfect-ui/
When delivering a harmonious color scheme, you should consider shades, tints, and tones. You should know when your design has enough contrast so the user can see the focus of object clearly. Most of the time, you should avoid saturated colors on backgrounds or unconsistent different colors on several places. Colors that are different in hue (length of wave) but very saturated. Sometimes, those kind of designs just make it less vibrant. Focus of the user will be distracted by it. User will certainly had a hard time focusing on your app.
Source: https://uxmovement.com/content/how-color-saturation-affects-user-efficiency/
Here, you should define interactive and denotative colors. Interactive colors and styles are used for buttons, links, or captions. While denotative colors are the colors that you want to “idea plant” your user with. For example, when you are using red as error, and green as success, you should avoid using green as button colors unless its denoting something is succeeding, same goes for red.
And lastly, the most important thing is accessibility.
You should check whether your app is good in contrast, you can check it at https://webaim.org/resources/contrastchecker/. Why? Because contrast ratio will show how much “seeable” something in front of another in terms of readability. When designing a system, you should consider picking a good contrast ratio set of colors so that your app is accessible for everyone (also take notes for those who are color blind, OK? 💖)
How to Make a Guideline?
Well, sometimes you don’t have to make it in an explicit way, you can just discuss this with your team by defining some stuffs first hand on the documents. Make sure everyone will use the same font, color, and stick to the prototype when implementing, especially frontend UIs. 🌈.
This shall conclude the User Interface Series of my software engineering project blog! Hasta luego!
