User Interface Guideline 101 — Design Guide for Academic Website
Hello, I want to share with you what is user interface guidelines and how we implemented it for designing a system (website) that adjusts the branding of an institution. In developing the Software Development Project (PPL), I had the opportunity to become a UI/UX Designer in my team, which is MK-PPL team (and at the same time in the INOS team) to design User Interface Guidelines in designing Practicum Assessment and Evaluation Information Systems for the Faculty of Social and Political Sciences (FISIP), University of Indonesia. The project that we developed is a web-based information system that is used to facilitate the process of assessment, evaluation, and reporting of practicum courses conducted by students, lecturers, and social institutions.
Before we start, let’s look at an example of visualization from the User Interface Guidelines. As a person who likes visuals, of course, I would be very happy if we’re given an interesting visualization, rather than boring sentences or paragraphs, isn’t that right?😋
What is User Interface (UI) Guidelines?
Based on the UI Guidelines example above, we can define that the UI Guidelines are a document that contains guidelines for designing a digital product. Based on the definition of interaction-design.org, design guidelines are sets of recommendations on how to apply design principles to provide a positive user experience. The aim is to provide clear instructions to designers and developers in implementing a guide that includes intuitive, learnable abilities, efficiency, and consistency.
Why do we have to make UI Guidelines?
The main reason why it must be made is to prioritize “Consistency and standards” (as the application of 10 Usability Heuristics for User Interface Design) in implementing every text, button, icon, spacing, color, etc. in the development of a system / a digital product.
If a designer or a developer finds several designs that are inconsistent, they can easily look at the UI Guidelines to find out which is the appropriate and suitable one. Not only that, if a system wants to be further developed, every component that already exists will be more scalable to make more complex components.
For our case, because the system developed by 2 separate teams, our team and the other group need a clear and consistent UI Guidelines, so we can stick to these guidelines.
What aspects are found in the UI Guidelines?
Now after we know the definitions of the UI Guidelines, let’s look at what aspects should be used as guidelines in designing a digital product. These aspects of the guide consist of:
- Typography. Font type, typeface choices, and font sizes that can be used
- Colors. Color choices that can be used, include primary, secondary, and tertiary color
- Button. The shape, color, text, radius, size, and behavior for the button
- Input & Form. A guide for the shape, size, from the input field
- Icon. The icon type and size.
- Spacing. A guide for the distance between components and white space.
- Interaction & Behavior. A guide that covers actions and user interactions with a component (hover, scroll, click, etc.)
- Error & System Status. A guide that includes information if an error occurs and displays the status of an action.
- And many more
What kind of branding does our client use?
In our case, the guidelines to be designed need to be adjusted by considering and following the branding of a company or institution. In the development of our system, our client does not provide specific requirements regarding the branding that needs to be applied, but they recommend us to use the color identity from the client. So, we need to research and observe first, what kind of identity that reflects our clients, and how does the interface of our existing website that our client already has. Our client, the Faculty of Social and Political Sciences (FISIP), University of Indonesia has its own color identity that represents the faculty, which is 🍊ORANGE🍊. We can see some examples of their web pages from fisip.ui.ac.id down below.
What tools do we need to use?
In making UI Guidelines, I made every component of the design in Figma. The main reason for using Figma is the features provided in making master components and reusable styles easier for designers on a design project. With the master component and reusable styles, it makes it easy for me to reuse the components that have been made and adjust the styling dynamically if there are changes that occur without having to change each component that has been duplicated.
UI Guidelines Implementation in Practicum Assessment and Evaluation Information Systems
- Typography
UI Guidelines in typography include rules in the use of fonts, font size, font-weight, and all things related to the use of text in the product being designed. The font used is Nunito Sans which is available on Google Fonts.
Here’s the typography guide from our system:
- Color
Creating a color guide starts from listing the primary colors that will be used, namely black, white, gray (base color), red (error indication), green (an indication of success), and orange (the main color of the system which adjusts to the branding).
From the primary color that has been made, several levels of color (lighter or darker) are made from the primary color. This secondary color creation is used to adjust the system requirements so that it is not too rigid and limited, here’s the UI Guidelines for color:
- Button
Guidelines for creating buttons are done by registering the types of buttons and the behaviors contained on the buttons, such as when they are active, when they have hovered, or when they are disabled. Button also created a hierarchy of levels from the most important to the least important levels, namely primary, secondary, and triad.
Making the button guide used in this system also applies the guidance from the Material Design (Google’s design system) which has been adjusted to our system styling.
- Spacing
Apart from typography, colors, and icons, one of the aspects that are quite important but which often receives less attention is spacing. Although seemingly trivial, spacing helps designers create consistent designs and can provide “breathing” space between each of its components. Spacing is also useful for making designs that are made to look more minimalist and clean design. To facilitate the front-end design and development phase, a spacing unit is used, which is a multiple of 4.
The following is a spacing guide as well as examples of its implementation:
- Icon & Component
Icons will be very useful to help emphasize the focus of the information conveyed by a system. The icons we use come from one main source, namely Material Design Icons (icon library from Google’s design system) because to maintain consistency and similarity in the types of icons we used.
The following is an example of an implementation of the icon we used:
After the guide of color, typography, and icons is formed, the small components are combined into a larger component. Since our system has many similarities in the page design of each role, creating a uniform component can help us in terms of reusability.
Here is an example of implementing a component that has been created:
After the UI Guidelines are created, each of these guidelines can be saved in Figma in the form of “Local Styles” for colors and typography, while for components a master component is created so that they can appear on the assets list. Below is the display when the UI Guidelines have been saved into Figma.
What are the benefits of UI guidelines in the development phase?
In the design phase, of course, the UI Guidelines are very useful for designers, but how it can be useful from the developer’s side?😏
In terms of back-end developers, these guidelines are useful to assist in the preparation of a clearer database model and make it easier to understand the business flow that the user wants to achieve 👌🏻
From a front-end developer perspective, these guidelines are useful for compiling HTML tags and CSS styling in creating each component. But not only that, with the help of Figma, front-end developers can also copy code from the CSS of each component. Since our team uses React and styled components library in creating the interface of each page. With the help of the Zeplin platform, each component of the design can also be directly exported and generated into styled components code which can be directly copied and pasted, so that it can shorten the processing time🥰
Key Takeaways
Using the User Interface Guidelines can be useful in developing software products, both web and mobile apps. Especially for designers, guidelines can help in designing and making each design page much easier because we don’t have to create each component one by one from scratch, the design pages that are created will also look more consistent with one another.
For future development guidelines, the UI Guidelines can be adjusted according to the needs and requirements. If we need to create alternative designs or add new components, just adjust the existing components and make some modifications.
Designing and making UI guidelines do not stop at the beginning of the design and planning process, but still need to be updated and maintained over time and changing needs
Thanks. I hope you enjoy this article!🥰
Also read my other article, “The Art of Designing a Product” about creating wireframes, mockups, and the implementation of 10 Usability Heuristics:
or the article “Persona in Product Development” about the 5 types of Persona in our project:
References:
