Golden Rules for Designing a Consistent Website
“Design is everywhere. From the dress you’re wearing to the smartphone you’re holding, it’s Design.”
— Samadara Ginige, Designer and Developer
Have any of you ever thought that mockups done by UI designers could be done on Microsoft Paint? I mean mockups are technically just rectangles, circles and text, right? I am not going to lie, but I was one of the ‘this seems too easy to be a job’ people. Well needless to say I was wrong since my boss very kindly told me to work on my (very first) mockup a little bit (a lot) more. Guess randomly placed rectangles and text in different sizes just didn’t cut it.
After a little bit of research, I thought that a sure fire way to get approvals on my designs would be to add fancy pictures. That’s what you see on sites like collectui.com where they show absolutely beautiful mockups of websites. I tried the fancy approach to designing and that failed as well, not surprising since I was a week old UI designer.
After a few more no’s from my boss, I realized that the one common thing all great websites have is consistency in design.
Focusing on consistency is a lot easier (in theory) than trying to make a bunch of fancy elements work on a screen. But it usually takes a lot of trial and error to get the perfect style guide that can work for your website.
A style guide is basically a rule book for your website with specifications on fonts and colors and even pixels. Following a style guide to the T usually ensures that most of your website is consistent!
In this article, I am going to share with you the specifications on fonts, colors, and pixels that should work for 99.9% of websites (just like Dettol).
1. Fonts
Probably the most important part of this part is choosing a font. Yes, just one! I love using fonts like Lato, Helvetica and LL Brown (Airbnb’s font). These are easy-to-read fonts on most devices and have different weights (light, regular, bold etc.) that you can use creatively.
Most websites go so far as only choosing two fonts, the first one to be used only sparingly and for very important elements and the other to be used for basically everything else. Having two fonts are difficult because it needs to have a common synergy while still looking different enough to have an impact. This is good enough reason for me to suggest that you only use one font in the beginning and then introduce a new font when you are sure how to use it in the most impactful way possible.
Now onto font sizes! Correct usage of font sizes can really make your website look well thought out when a user uses it. Follow this perfectly and I assure you, your website designs will look a whole lot better!
- Size 50: Used for Titles and Calls to Action (CTAs).
- Size 35: Headings.
- Size 25: Body.
- Size 16: Input from users.
- Size 13 (and anything smaller): Things you want to hide in plain sight like Terms and Conditions.
2. Colors
More is more! Wrong! When it comes to colors in a website design, less is more. In fact, 5 is perfect. Word of caution, you can’t just use any 5 random colors. coolors.co is a pretty cool website that can help you decide on those 5 colors easily while ensuring the undertones match.
And the most important thing to note when using colors in your design is that each color has a specific purpose that you want the user to feel. Colors should thus only be used for their specific purpose to ensure consistency throughout your website designs.
- Logo Color: This color is predominantly present in your logo and this should be used for Titles and Calls to Action (CTAs).
- Dark Color: This color should be used for the body in your websites and should be something that is easy to read, eg. Black, Purples, Dark Greys.
- Bright Color: This should be sparingly used in the body of the website to draw the attention of users to important information and is only to be used after the dark color. Eg. Teal, Light Greys, Orange.
- Positive Color: This should be used when the user has finished a positive action like signing up or placing an order. Eg. Yellows, Greens.
- Negative Color: This should be used to convey to users that something has gone wrong like missing information fields or error messages. Eg. Reds.
3. Pixels
Pixel space between elements is probably the one thing that first-timers aren’t immediately aware of. But this is also something that if done consistently can create a much better-looking website.
The specs I use for the distance between each elements are 13px, 16px, 25px, 50px and 100px. And these tend to work well with the font sizes that I suggested as well!
If you are using Sketch, you can view the distance between elements by selecting an element, pressing ‘Option’ and then hovering over the other element. To move the element 10px at a time, simply hold ‘Shift’ while pressing the arrows.
Another good tip for beginners is to double the spacing between elements that you originally intended. Trust me ample space is important when it comes to making your designs look perfect!
That’s all I have for this article! Hopefully, this will help you design your websites. If you need more help designing your websites, I am a mentor on The Startup Buddy and you can easily book a session with me!
UI is really not that hard if you stick to the golden rules. If you add in your creativity, your users are in for a stellar website! But if this is just not your cup of tea, you can also find service providers that will build beautiful websites for you. You can find a list of them here if you ever need to employ their services!
PS: Comment on what other articles you would like to see next!
The Startup Buddy is SEA’s founder friendly Startup builder. We provide step-by-step guidance through specially designed missions, mentors from around the world and curated content to help you in your Startup journey! Find out more at The Startup Buddy!
