Nowadays, everybody can become a web designer. Many creatives, including SAE students, choose to design websites on their own. How to make conscious choices when designing a website? What are the most important website elements and how to use them efficiently? Finally, how to make a website clear, readable and engaging? This article introduces a set of basic rules that will help you to deal with the basic web designer’s problems.
Text and illustration by Joanna Wróblewska
Designing a website is pretty complex, so it is important to understand well the basics. Being visible online will make it easier to promote whatever you do. It might be also a great opportunity to impress your future employer, get feedback or create an online community. Just take a moment to learn about the basics and challenge yourself! There is no better experience than being proud of presenting your own professional creations to the world.
Firstly, realize what are the crucial website elements: a two-dimensional space, a simple navigation, both “about” and “contact information” sections, a call to action, search, an informative footer, buttons, typefaces and images create a typical web layout. You should probably consider including each of those elements on your website to make it intuitive and inviting to all international users.
What do your viewers expect? No matter what the topic is, they will all search for impressive images, functionality, and clear calls-to-action. It means that every web designer will face this fact sooner or later. Maybe it is worth to take a pen and a piece of paper, and make a bunch of sketches before you really design a website? Some tips for web designers are truly timeless!
Tip 1: use grid based layouts
Placing elements of a website randomly can result in a poor and chaotic design, which will not draw users’ attention. Luckily, you can always choose to use the grid. A grid is a series of intersecting horizontal and vertical lines that allow to order elements on the website. It helps users to better understand the structure of a website and navigate it in an easy, logical way. A grid will allow you to arrange the website contents into sections, columns and boxes resulting in a more sustainable, appealing design.
Tip 2: learn about the F Pattern Layout
The F Pattern layout explores and reinforces natural experience of most website users. It is focused on a bunch of simple rules related to eye-tracking on the computer screen. You may want to choose it instead of searching for a more traditional visual flow.
Visitors start to explore a website from the top left corner, then they tend to scan the top of the site, after which they move down and explore the content from the left to the right sidebar. Base on that, we can conclude that the brand-mark and navigation are crucial for a website. Images receive the greatest level of attention, headlines came next. Texts are rather scanned quickly than read thoroughly. Remember, that this kind of layout is comfortable and reading it feels natural to most web-surfers.
Tip 3: focus on essential elements
A well-designed and simple logo, a clear tagline and several high-quality images are a must for a decent website design. Moreover, including a short description of your business and placing an easy-accessible contact information will make your website much more user-friendly. A balanced combination between such elements and a white space should allow you to draw users’ attention. Do not forget about the footer – many web-surfers will scroll down to find more information and enjoy clicking around.
Tip 4: simplify navigation
How easy is it for users to take action and move around your website? A ‘three click rule” will help you to design a simple and logical page hierarchy! It is all about designing a website in a way that all the desirable information in available to web-surfers within just three clicks. Burring information will not be helpful and can easily discourage your potential clients. In this case, “less is truly more”, so pay attention to how your navigation structure will influence the user experience.
Tip 5: use high-quality images
Using the right images is essential, since they are a part of visual culture and common intercultural language. A good image choice will allow you to connect with your target audience much quicker than you think. It is important to use optimized high-quality images taken by professionals or purchased from reliable photo stocks. At the same time, they should load fast – nowadays, nobody has patience to wait for longer than about five seconds!
Tip 6: pick right typefaces
Sans Serif typefaces are much easier to read on a computer screen. Preferably, you should choose to use them. Pay attention to the contrast between font sizes: make headlines strong and visible, align the text well. Above all, improve tracking, leading and kerning in the text. Apps like Typecast can help you in developing a professional-looking typographic palettes!
Tip 7: limit the color scheme
Sticking to the chosen limited color palette will make your website design much more readable and clear. The text should be always placed on a contrasted background, if you want it to be readable and accessible to your clients. Remember, that complementary colors almost always fit good together, while strong and vivid colors will create more tension and emotion in a design. Lots of white space will give your website a clean, modern look.
Tip 8: use white space
You should not underestimate the rule of the white space in web design. Creating enough space between sections, paragraphs, and boxes will give it some “breathing” room and improve the user experience. Controlling white space in the layout will keep web-surfers focused on content and navigate user flow.
Tip 9: place buttons
Buttons encourage people to take action. Adding well-designed, attractive buttons to your website will increase the number of submissions, subscriptions, and sendings. Think of making your buttons appealing and interactive. Let them change color, gradient or shade after clicking. The most popular calls to action are short and straight to the point, like “Sign Up”, “Request a Quote”, “Buy Now” and “Work With Us.”
Tip 10: be careful with sidebars
Sidebars have been a popular website element in the last years. Especially bloggers would use them efficiently. Nowadays, many companies decide to remove sidebars from their websites to let users focus on articles and call to action graphics. Some organizations claim, that removing a sidebar can increase the number of clicks up to 35%!
Designing a website using WordPress or Weebly might seem very easy. Yet, it is essential to understand how web-surfers navigate online content and what makes their experience easier. High-quality visual material, simple and readable navigation should be combined with good typography choices and clear call to action graphics. Applying the tips from this article will surely increase the chances of offering users a good website browsing experience, which in the long term might be truly beneficial for your business.