Guide·lines
/ˈɡaɪdˌlaɪnz/
Welcome back everyone! A few weeks before, we’ve talked about Design Guidelines. Well after a few weeks of productivity (and maybe a dash of procrastination), we’ve finally created a Minimum Viable Product that we can compare with the Design Guidelines we’ve made.
(No snarky remarks from me today, let’s just finish this as quickly as possible. I haven’t been sleeping right.)
Guidelines
a visual language communicating the design goals to the team, it is important to make sure that everyone can understand it and to enforce its usage
As I said earlier, I’ve already covered a lot about Design Guidelines a few weeks ago. Right now, we’re just gonna jog our memories a bit. So, Design Guidelines are basically a set of recommendations towards good practice in design. It’s mostly used to provide clear instructions to designers and developers on how to adopt specific principles, such as intuitiveness, learnability, efficiency, and consistency.
A design guideline stands between a principle in design (like how a design is supposed to be user-centric), and a standard or rule for implementing it (background and text color should be opposites that doesn’t ruin the eyes). A design guideline is intended to help designers understand how to implement a principle, without restricting their creativity in design, allowing them to unleash their potential based on a specific principle.
Why We Need IT???
Why, you ask? For example, let’s say you are tasked on creating the designs for an e-commerce app. However, you’re going at it blindly, without any guidelines. For what demographics is the app going to be for? What are the principles of the app? Without the answer to these things, your designs might be inconsistent in many sectors (Big icons on landing page but straight up small icons on store page, unreadable texts, etc). By defining the principles and the best practice to implement it, we can easily create designs correlating to that.
For example, still on the e-commerce app, yet we decide that the app should be user-centric and aesthetic, while the best practice would be to have the overall colors a mix of grey and bright colors on just the right spots (checkout button, add to cart button, remove from cart button, etc). We won’t really have to worry about inconsistencies and what-not.
Sure, the overall design might not really follow the guidelines we’ve set up 100%, however by setting up the best practice, designers won’t stray their designs too far from the guidelines. They would create assets and designs that would work synchronously with the designs set in the guidelines.
In fact, in Shneiderman’s Eight Golden Rules, the number one rule is Strive for Consistency. By using icons, colors, menu hierarchies and user flows that are familiar to the guidelines, users would familiarize themselves to the designs faster and easier. By not introducing users to unfamiliar designs, users would have a more pleasant experience while using our product.
Types of Guidelines
There are a lot of types of guidelines that we can implement. Which are: Style, Layout, UI Components, Text, Interaction And Behavior, Platform, Accessibility, Patterns and Resources. They each define a different component in the design.
Style mostly represents the visual expression. Layout defines the overall structure of interface. UI Component talks about the many displays on interface and how users interact with them. Text refers to the typography of an interface. Interaction And Behavior is mostly about the types of design a user interacts with. Platform details the specific platforms the interface supports, and it doesn’t refer to mobile or desktop only today, as watches and vehicles have become even more advanced. To achieve Accessibility, specific sets of guidelines are required to cater to each types. Reusable Patterns define the behaviors of some controls. A collection of Resources is usable to build design guidelines.
Designs in UKM Indonesia
While the overall design took quite a turn for us, most of the guidelines are still kept. Let’s define them one by one.
UI Components & Style
As we can see here, the overall components for the Header stays the same. The logo is kept on the left-hand side, while the right-hand side contains buttons for Mitra, Layanan, Menjadi Mitra and Login/Daftar. The major difference is that the search bar is changed so that it’s contained on the Header instead of on the body of the Landing Page.
As I said before, the first view of the Landing Page changes significantly. Not only is the search bar moved to the Header, the slogan is changed to a question on what the user wants to do. The lacis are also changed, instead of listing horizontally, it is now listed vertically.
The icons we ended up using also corresponds with the overall style of the design: thin, minimalistic designs.
Colors
While the colors took a drastic turn (Not too colorful), it maintained the darker-shade of colors instead of going with bright colors. The overall design took on a shade between white-grey-black, not too far from the original color palette which had dark shades of yellow, orange, green, and grey.
Typography
The typography stayed the same. Heebo is used mainly on the whole website. While Heebo Bold is not yet needed as we haven’t implemented article page and the likes, the heading and body is used by Heebo Regular with the corresponding sizes.
Conclusion
In conclusion, consistency is important, especially in designs. No matter how far we stray out of the guidelines, as long as it’s still very much consistent to the overall principle and rule for implementing it, it’s fine. Rules are there for a reason, not to limit your creativity.
I guess that’s about it about Design Guidelines. That’s it from me then. Here’s me, signing off!
Before I forget, here’s another “happy” gif that motivated me all throughout this week:
Namaste~
