1. Make it Mobile
With 1.2 Billion people using their phones for web browsing, you need to make sure your website works on a phone. There’s a philosophy you may have heard of called “Mobile First Web Design” which is the practice of starting with the mobile version of a site and designing/building up rather than first imagining how it’ll look on a computer. Designing for phones first puts a responsive site as first priority rather than as a second thought, it results in a mobile design that isn’t a stripped version of the desktop lacking content, and it makes your desktop version pleasantly clean since you couldn’t clutter the mobile version. Whether or not you utilize this practice, your website should always have a user-friendly mobile version.
2. Use Your Intuition
When you see a bar at the top of the screen with words like “about” and “contact”, you’re likely going to think it’s a menu bar. Imagine clicking “about” and a video pops up and starts playing with obnoxious music. This isn’t what you were expecting! You were probably expecting to be taken to a new page that starts with something like “About our company”. A website should function as a user expects. When it comes to web design, a surprise is rarely good at best and annoyingly confusing at worst. Essentially, place things where it makes sense and have buttons function in a way that makes sense.
3. Give It Hierarchy
It’s important to have an order in your content. This means putting the first thing first and making the title bigger than the paragraph below it. This also means not making every element an attention-grabber or show-stopper. Make sure you’re not overloading your viewer with distracting tidbits or links in your web design.
4. Don’t Fear White Space
No, it doesn’t have to literally be white. White space is just the space on the page that lets your eyes rest, where there’s no text, photos, or element that your eye focuses on. A good example of this is Google. You can picture their entire homepage in your head because it’s just the logo, a few buttons, and a search bar. White space can also help to create a balanced, effortlessly sleek website and will often happen naturally when you’re using a mobile-first web design. See? They all start to correspond!
5. Explore Cool Typefaces
This point is two-fold. We all know not to use Comic Sans and Papyrus but you also don’t need to use only Helvetica! It’s good to search for a typeface that works for your company. Are you a bookshop? Maybe a nice serif font like Mrs Eaves should be your header font. Are you a tech blog? Maybe Brace is a little more for you. Now, you also don’t want to let your typefaces work against you. You need a legible font for your body copy. Something like Brace would get tiresome if all of the paragraphs looked like that. You also would want to avoid serif fonts for body copy. Sans serifs, like this font that you’re using for reading this very sentence, have shown to be easier on the eye on a screen and serifs are easier in print. The more you know!
6. Limit Your Typefaces
You were just flying through all the beautiful fonts this world has to offer and you found 8 that you like! Well, too bad. Usually, it’s best if you only have 1-3 different typefaces. 2 is my magic number. One for the body copy, and another for other instances like buttons and/or headers. It’s also hard to find 3 or more fonts that all complement one another whereas there are plenty of font pairings out there that are lovely together.
7. Space Out
Just like it’s hard to read text when it’s too close together, it becomes distracting and hard to read a website when the elements are too close together. Take Yale’s art program website for example; there’s a lot wrong here (remember my white space point?) but let’s look at the space between the posters. There’s no room between some and up to maybe 40 pixels between others. How are you supposed to take that information? If they’re touching, are they together? What’s the difference between a lot of space and just a little? Is there any? Who made these web design choices?
8. Get Gridded
A nice grid is key to web design. It makes elements evenly spaced and well organized. You can use a grid in a traditional sense like in a photo gallery or you can use a grid more liberally like on this website we made for a client. You don’t really think about it but there’s a grid system in this web design. It also can be very handy for mobile design since it has much easier stacking abilities.
Keeping your web design simple is important for two reasons. 1) A user coming to your site wants to find information quickly and 2) A simple design is a good one. Keep the typefaces to a minimum (remember that one?), remember to utilize white space (oh hey!), don’t try to incorporate too many different design elements. Over-complication leads to messes like this (this link plays sound upon clicking).
10. Break the Mold!
Since web design is still a creative endeavor, one is allowed to completely disregard the rules as long as it’s done well! Of course, you don’t HAVE to have a menu bar at the top right of the page. But, if you’re going to have it somewhere else, you better have a good reason aesthetically for doing so. You can also break the mold of web design in smaller ways such as using non-traditional icons for elements or by having the header be abnormally large so as to create an interesting focal point. It’s great to not just be another hum-drum website but we encourage a strong hold on the previous 9 tips before disregarding them.
Since your website says a lot about you or your company, it’s important to let it speak with your voice. All these tips are important but they can create a minimalistic, clean, and ultimately generic web design if the voice of the company isn’t being used. In short, speak precisely, speak eloquently, and speak with your own voice.