UI Design — Importance of Design Guidelines and Prototyping
In this time I am going to talk about the importance of Design Guidelines, Prototyping, and a simple example of the guidelines implementation in developing a product. In this semester I am currently having a group project about making an Academic Bureau website for Economy and Business Faculty, and I am the one who responsible for deciding the branding or you can say as the Design Guideline of this project. In this article, let me describe to you what is Design Guidelines and how my group project implement it.
What is Design Guidelines?
A design guidelines is a document that plays a role as a manual for the developer and designer in developing a product. This guideline document is important because it will help them to maintain the consistency of the product design. Instead of giving further explanation, here’s some visualization for you to quickly understand.
Why need Design Guidelines?
As I explained to you before, guidelines is needed for the developers and designer in developing a product. By having a guideline, one of the 10 Nielsen’s general principles for interaction design will be fulfilled, which is #4: Consistency and Standards, because consistency is secured when every members in our project follow the guideline, and whenever we are confused and starting to be inconsistent we can just checkout the guidelines again and follow the guide.
What’s the Inside of a Design Guidelines?
As you can see in Pic 1.1, it is a little sight of what’s the inside of a design guidelines, and now I am going to mention and describe the important aspect needed in our project guidelines:
- Font, a text style will be used in the product. Not only the style, the font weight also must be stated in the guideline to make it variant. To decide which font our client gives me a freedom to choose whatever font we want, but choose the font wisely and choose a font which is easy and comfy to read.
- Color Palette, a set of color will be used in the product. In deciding this it depends on the client’s requests whether they give us a freedom to choose the colors or they have certain colors request to be used. In our current project, they had given the mock-up already so we had just taken the colors to be implemented when we develop the product.
- Component Behavior, is how the components inside the product behave, for instance like a button color change when it is hovered or clicked. This also important in order to give users more User Experience when they use the product.
- Component Properties, is simply the look of your component. It is up to you to decide about its shape, opacity, border thickness, border radius, padding, margin, etc. Imagine having many kinds of unnecessary shape for the buttons in your project, it would be confusing and dreadful to see, so this aspect is also important.
Deciding the Guidelines and Prototyping
We made our guidelines using tool called Figma, it is a tool for designing a prototype. A good prototype is a prototype with High Fidelity, which means the app simulation feels like the real app in terms of functionally and interactively.
Our project design guidelines is created by the following mock-up our client gave to us (wireframe and standard mock-up). Their only request is the color branding to be used in the product, so to make it easier to match the color we had just taken the hex color code and implement it later on. Here’s the mock-up they gave.
As you can see, the branding colors are yellow, black, grey, and white. Pay attention also to the color they use, white or grey for the background, black for the navigation bar, yellow for other components. But this mock-up is still raw, so we decide to make some improved prototype in order to concern our client more about what they want. Let’s get started in making the guidelines and then the prototype.
Colors
As you can see above, there are only few colors needed for those pages. We had some discussions first about the colors we’re going to use in the product, about the base color, normal component color, warning color, and success color. Here’s the result of our discussion.
This guide is used for making the prototype also used when implementing them in development process. To help deciding the warning, success, and normal component colors, you can use coloors.co, it is free and easy to use.
As a result above there is some blue colors there, then we modified the blue and the red a little bit brighter like you can see from the Picture 1.4. We did the same to look for the green color.
Component Properties and Behavior
Our client gave us the freedom to decide this, as long as it looks pleasing to their eyes. As you can see from from picture before, we use simple-kind properties and behavior for our button which only has circular border-radius and thin border thickness, with addition of simple hover with background color change.
We also know that in our project there are also containers and tables for certain features. What I mean by container is a component that has another component inside. All the containers in our project has similar style, which is its border-radius with size around 20px. The example of containers are tables, login section, menus, and many more you can see them below.
Font
Our client didn’t give us specific request for the font, so we decided to use “Montserrat”. A basic yet good looking font used often for designs and many more. The font must have variant size because each component has different purpose. For example, the navigation bar they must have big size of font in order to tell user to navigate between pages with the existing navbar. It also applies for the button and normal text in the page, we would not want a big font like navigation bar in normal text, so we change the font size there. The font guideline would look like this.
Prototyping
Prototype is a document that contains a simulation and interaction of a real app. We know that a good prototype is a prototype that has high-fidelity. With the tools like Figma, you can make a simulation and interaction between pages like an actual app. Figma provide the feature to make simulation by making certain simulation frames and some clickable areas. By clicking those areas the simulation will move through a certain frame you set when making the simulation flow. Here’s some small overview of simulation flow from our project prototype.
How do we implement them in development process?
This is where prototyping has some crucial benefits in development process. The prototype we made is like a manual book to the app we’ve been developing, because as I told you before, prototype shows you the simulation and interaction of the app.
Implementing this is a job as Front-end engineer, you will be working with CSS and HTML for styling the page, Javascript to connect the Back-end to Front-end.
As you can see, there is css styling script in figma. It is written according to the components you make in your prototype. But you can’t copy and paste the css completely because it is not a complete version of the styling, you can try it yourself it won’t be the same as the mock-up.
So you will have to explore more about styling in css, it is quite a lot especially in w3schools, there are a lot of tutorial about css, html, and javascript. Put that aside, here’s the real deal of the “Detail” button styling in css.
Completely different right? The only same thing is the background-color attribute. Somehow the scaling in figma and actual scale in HTML is kinda different, you use figma written css only as a small guide to know what are the attributes needed to style certain component so you have to somehow adjust them until it looks similar to the prototype you make.
Here are some components we make in actual website.
Benefits of Design Guidelines and Prototyping
So what are the benefits of making those two? Why don’t we just implement them directly in development process? As we know before, guidelines helps us to secure the consistency of product design, also it plays role as a guide for the developers and designer to develop the product. Likewise prototyping will give you a clear simulation and interaction about the app you are going to develop. So we can conclude that making design guidelines and prototyping will give us:
- Consistency and Standards are fulfilled and secured.
- Clear simulation about the app flow.
- Faster working hours by following guidelines and the prototype.
So hope this article helps you in developing a good product. My apologize if there are wrong words, see you next time :)
