Website Design
Published by Emil Abraham,
Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; interface design; authoring, including standardised code and proprietary software; user experience design; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term web design is normally used to describe the design process relating to the front-end (client side) design of a website including writing mark up. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and if their role involves creating mark-up then they are also expected to be up to date with web accessibility guidelines.
Effective web design is judged by the users of the website. There are many factors that affect the usability of a website, and it is not just about form (how good it looks), but also function (how easy is it to use).Websites that are not well designed tend to perform poorly and have sub-optimal Google Analytics metrics (e.g. high bounce rates, low time on site, low pages per visit and low conversions. The ten web design principles that will make the website aesthetically pleasing, easy to use, engaging, and effective are given below.
1. Purpose
- Good web design always caters to the needs of the user. Are the web visitors looking for information, entertainment, some type of interaction, or to transact with the business? Each page of the website needs to have a clear purpose, and to fulfil a specific need for the website users in the most effective way possible.
2. Communication
- People on the web tend to want information quickly, so it is important to communicate clearly, and make the information easy to read and digest. Some effective tactics to include in web design include: organising information using headlines and sub headlines, using bullet points instead of long winding sentences, and cutting the waffle.
3. Typefaces
- In general, Sans Serif fonts such as Arial, Calibri and Verdana are easier to read online (Sans Serif fonts are contemporary looking fonts without decorative finishes). The ideal font size for reading easily online is around 14 to 16 points and stick to a maximum of 3 typefaces in a maximum of 3 point sizes to keep your design streamlined.
4. Colours
- A well thought out colour palette can go a long way to enhance the user experience. Complementary colours create balance and harmony. Using contrasting colours for the text and background will make reading easier on the eye. Vibrant colours create emotion and should be used sparingly (e.g. for buttons and call to actions). Last but not least, white space is very effective at giving the website a modern and uncluttered look.
5. Images
- A picture can speak a thousand words, and choosing the right images for the website can help with brand positioning and connecting with the target audience. Also consider using infographics, videos and graphics as these can be much more effective at communicating than even the most well written piece of text.
6. Navigation
- Navigation is about how easy it is for people to take action and move around the website. Some tactics for effective navigation include a logical page hierarchy, using bread crumbs, designing clickable buttons, and following the ‘three click rule’ which means users will be able to find the information they are looking for, within three clicks. These steps can help to achieve good navigation- visualising the site, reviewing the user interests by studying the site logs, vertical and horizontal navigation bars, Site Map, Time stamps etc.
7. Grid-based layouts
- Placing content randomly on the web page can end up with a haphazard appearance that is messy. Grid based layouts arrange content into sections, columns and boxes that line up and feel balanced, which leads to a better looking website design.
8. "F" Pattern design
- Eye tracking studies have identified that people scan computer screens in an "F" pattern. Most of what people see is in the top and left of the screen and the right side of the screen are rarely seen. Rather than trying to force the viewer’s visual flow, effectively designed websites will work with a reader’s natural behaviour and display information in order of importance (left to right, and top to bottom).
9. Load time
- Everybody hates a website that takes ages to load. Tips to make page load times more effective include optimising image sizes (size and scale), combining code into a central CSS or JavaScript file (this reduces HTTP requests) and minify HTML, CSS, JavaScript (compressed to speed up their load time).
10: Mobile friendly
- It is now commonplace to access websites from multiple devices with multiple screen sizes, so it is important to consider if the website is mobile friendly. If the website isnot mobile friendly, either rebuild it in a responsive layout (this means your website will adjust to different screen widths) or build a dedicated mobile site (a separate website optimised specifically for mobile users).
Simplicity, weight, compatibility and consistency are all necessary in design. Readability, packaging and story length are relevant factors to facilitate communication by design. Website mechanics involves three different professionals- web editor, web designer who looks into the: look and feel, navigation, readability, and visual appeal of the website, and web programmers