As part of Quest 3 for OLTD 509, a course on Emergent Environments & Technologies taught by the 'master' Avi Luxenburg (via gamification using 3D Game Lab to design some truly creative quests of learning), part of our research was to read Web Design Principles Of Successful Websites, by Martin Luenendonk for Entrepreneurial Insights (June 3, 2015).
The following are a few points from the above-noted article on some basic elements of good web design.
Certain elements should be incorporated into a website design for visual and technical appeal. These include attention to:
Certain elements should be incorporated into a website design for visual and technical appeal. These include attention to:
- Shape – a geometric or abstract shape that fits the design
- Texture – natural and artificial textures can make a website look more appealing
- Direction – an element of website design which helps our eyes move from one area of the website to another, moving in an order of relevance
- Colour – using colours in a creative way can raise the appeal of a website
There are Seven Web Design Principles (outlined by Martin)
How a website looks, feels, works and responds can be attributed to the following principles:
How a website looks, feels, works and responds can be attributed to the following principles:
- Web design principle #1: Highly intuitive structure
- The website should be self-explanatory and simple to understand so visitors don’t have to wonder how to navigate between pages, etc.
- Web design principle #2: Visual hierarchy
- Visual hierarchy refers to the way we move from one topic/content/block to another. Visitors to the site should view what is most important first, and then be moved following a hierarchical order.
- Two ways to create visual hierarchy are:
- Size hierarchy – Use size to indicate importance (the more important things are, the larger they should appear).
- Content hierarchy – The eye should travel first to the content that is the most important.
- Note: Professor Avi Luxenburg discusses another way to guide attention through the use of Striking Elements, or elements which are strikingly different from others on the page and thus stand out.
- Web design principle #3: Accessibility
- Visitors to the website must be able to access information in the easiest fashion
- Typefaces – Select a font that is easily readable such as Verdana, Times New Roman, Arial, etc. Also, select a font size that allows for easy reading – i.e., 16 px is suggested by Martin (2015).
- Colours – Colour scheme and contrast should create visual harmony and balance. For ease of reading, use contrasting colours for the text and background. A darker text colour and a lighter background are recommended, while bright colours should be used sparingly.
- Images – Well chosen, high-quality images contribute to ease of navigation and universal accessibility of the website.
- Visitors to the website must be able to access information in the easiest fashion
- Web design principle #4: Hick’s law
- Hick’s law states: ‘with every additional choice increases the time required to take a decision‘ Martin (2015). This means a simple uncluttered website with fewer choices offers a better user experience. Eliminate distractions!
- Web design principle #5: Fitt’s Law
- “According to Fitt’s Law, “the time needed to move to a target is dependent upon the size of the target as well as the distance to the target” Martin (2015). This means make your “click here” buttons easily visible and accessible.
- Web design principle #6: Communication and content
- The content people see when they arrive at a website can be termed the “visible language”. Therefore to communicate clearly and engage your audience, you need to do the following:
- Organize – A clear and consistent layout is needed. Consider: division of content and how you organize your blocks and menus for navigation, consistency, and visual appeal.
- Economize – Make your design simple, clean, and free of clutter. Achieve more by using less.
- Communicate – Make your site easily understandable. Maintain a balance between “readability, legibility, colour, texture, and views” Martin (2015).
- When writing, keep in mind your target audience and the concept of search engine optimization (the process of maximizing the number of visitors to a particular website by ensuring that the site appears high on the list of results returned by a search engine).
- The content people see when they arrive at a website can be termed the “visible language”. Therefore to communicate clearly and engage your audience, you need to do the following:
- Web design principle #7. White space and simple design
- A simple design is important, and white space (the unmarked parts of a page, including the margins, space between columns, graphics, etc.) can help by clearly differentiating areas to make it easier for users to process information. However, text should not be justified (i.e., full alignment, or double justification, in contrast to only left justification) on websites. According to dmj website design, the WC3 Standards Committee states:
Many people with cognitive disabilities have a great deal of trouble with blocks of text that are justified (aligned to both the left and the right margins). The spaces between words create “rivers of white” running down the page, which can make the text difficult for some people to read.
- The following should also be considered:
- Grid-based layout – To keep things clean and simple opt for a grid-based layout using columns, sections, and boxes to divide content.
- F-pattern design – It is said that the human eye scans in an F-pattern, so try to design in a manner that complements this natural tendency.
- Conventional designs – Conventional designs are said to work well for visitor response and likability.
- Web design principle #8: Regular testing
- Test Early and Test Often or ‘TETO’ Martin (2015).
References
Jarvis, M. (n.d.). Why you shouldn’t align html justify [Blog post]. Dmj website design. Retrieved
January 12, 2016, from http://dmjcomputerservices.com/blog/why-you-shouldnt-align-html-
justify/
Luenendonk, M. (2015, June 3). Web Design Principles Of Successful Websites [Blog post].
Entrepreneurial insights. Retrieved January 11, 2016, from http://www.cleverism.com/web-
design-principles-successful-websites/
Wikipedia. (n.d.). Search engine optimization. Retrieved January 12, 2016, from
https://en.wikipedia.org/wiki/Search_engine_optimization
Jarvis, M. (n.d.). Why you shouldn’t align html justify [Blog post]. Dmj website design. Retrieved
January 12, 2016, from http://dmjcomputerservices.com/blog/why-you-shouldnt-align-html-
justify/
Luenendonk, M. (2015, June 3). Web Design Principles Of Successful Websites [Blog post].
Entrepreneurial insights. Retrieved January 11, 2016, from http://www.cleverism.com/web-
design-principles-successful-websites/
Wikipedia. (n.d.). Search engine optimization. Retrieved January 12, 2016, from
https://en.wikipedia.org/wiki/Search_engine_optimization