Many businesses have websites and this is a growing tendency. As many decide to mark their presence through their websites, the role of web design is becoming increasingly big. However, web design is not easy and can take lots of time and effort to master. Like any other trade, it's important to understand the basics. Even if you are not a designer yourself, you need to understand what makes a great design in order to be able to hire the right people for the job.
Composition
1. Clear the clutter:
When designing a website, it can be tempting to simply throw everything you want on it; sometimes all on the same page. Because every element you add to a page, compete with others it can make it harder for the users to know where they should focus their attention to. So if you have many unimportant and unnecessary elements on your page, they can distract and impact the overall user experience (UX).
“Get rid of everything that is not essential to making a point.” – Christoph Niemann
Trim the fat, so to speak, by double-checking your designs for any elements that don't improve the overall experience and remove them or move to another screen or page. Try doing that with the written content, audio and video, and all elements on your website.
2. Use White Space:
After removing the unnecessary elements from your designs, you'll probably have lots of empty space. How are you going to use it? With nothing basically! In design, the space you don't put any element is called white space or negative space. You can use it to draw the users' attention to something you want them to see. Negative spaces used alone can be boring; but used artistically they can enhance the main subject, make it easier for the user to know exactly what you want them to focus their attention on, and improve legibility.
“Whitespace is like air: it is necessary for design to breathe.” –Wojciech Zieliński
Surround important elements with white space. The more space surrounds an element, the more attention it can grab. Avoid busy backgrounds. After all, backgrounds are supposed to be unnoticed, right?
3. Use Visual Hierarchy to Guide users
Visual hierarchy helps influence which elements the user sees first, second, and last. For example, a headline is going normally to be big and bold because it's intended to capture visitors' attention whilst the legal pages such as terms of use and privacy policies will be small on the footer because, although important, are not the first thing you want the user to see.
Visual hierarchy is not only about what elements you add to your website, but also how you add them. For instance, call-to-action (CTA) must be deliberately designed to stand out with bold colors and suggestive text to encourage clicks. Size, position, motion, color, the format can affect the visual hierarchy. A video will capture more attention than static content, big headline than small text, and so on; you got the point.
Remember that people don't read, they scan. Design your website in a way that makes it easy for people to scan it. Make top priority elements hard to ignore by using motion, color, or size. Avoid using competing elements.
Aesthetics
4. Choose colors wisely:
Did you know that colors have emotional connotations? Blue for trust, purple for royalty, green for peace, and so on. So when picking color keep the meaning associated with the colors and of course your brand. Also, remember that the meanings of color may vary depending on the culture, so take into consideration your target users when choosing which color you're going to use. How can you level up your color game?
- Remember that your favorite colors are not necessarily the best choice for the projects;
- Estabilish a color hierarchy: Primary, secondary, background;
- Keep your color pallete consistent throughout the entire website;
- Master the color wheel and color harmony.
5. Use typography strategically:
Words are important, there's no doubt about it. But you can enhance their effectiveness by giving them the right look. Typography includes typefaces, size, color, style, leading, tracking, etc. The impact the visual hierarchy and your brand. How can you level up your typography game?
- Understand the basics of typography;
- Choose typefaces that suit your business goals and brand's tone of voice and use them consistently;
- Use typefaces that are optimized for displaying in most computer';
- Use typography with scanability in mind. Small chunks of text are lot easier to digest than long packed paragraphs. Large blocks of text can intimidate readers;
- Mind color combination: The way your text interacts with the background, affects legibility specially for those with reading disabilities;
- Dont use cursive fonts for body text;
- It's not enough for a font to look good, it must read good. Using a font that looks good but not legible is bad for the user experience.
Functionality
6. Design you navigation correctly
The structure of the Navigation starts way before the actual web design starts, it's part of the Information Architecture (IA). When structuring your navigation take your target users into account, use labels that will make sense to your users. A great thing to remember is that the less the user has to think about where to find part of your website, the better.
Find a balance for the number of options: Not too little nor too much. Build your navigation based on real users' data. For example, for an e-commerce website, people buying shoes would search under clothing and others under Accessories. Only data from your target users can help you decide where how to organize. Don't reinvent the wheel. Put your navigation at the top with the logo ate the left. Although inventing and experimenting is good, stick with the conventions that users already understand can save you and your users headaches.
7. Make your website responsive
Responsive website is about how well your website displays on devices with different sizes. This is this important because many people visit websites through devices with different sizes and Google algorithm factors responsiveness to their search rankings. So by making your website responsive your website will offer a pleasant experience on mobile and increase the chances of ranking high on Google's search engine. The point here is: your website must look great no matter what screen people are using to visit it.
- Some common best practices when it comes to responsive web design are:
- Don't use m.dot sites, they're outdated, load slower and damage the SEO. Build single websites that works across devices.
- Think about the responsiveness of your website right at the start of the project
- When designing for mobile remove all the non essential elements since the space real estate is scarce.
- For most of case it wont be possible to design a website that's responsive for every device, that's why you must prioritize devices based on real users data.
Take aways
Designing and building a website is a huge task and requires time and effort, especially when you're new to the field. So don't be discouraged if you didn't understand everything here or if you realized how much is there for you to learn. As you practice, you'll get better at it.
If you're a business owner who's planning to have a website for your business, you may have reached the same conclusion as many, that hiring a web designer and a developer is the safest option for it saves time, money and headaches. If you want to learn more about the cost of building a website you can schedule a free consultation call, I'll be more than willing to help.
