Web Design
Principles 3, 6, & 7:
Accessibility, Design, Communication & Space
To Do:
- Use the Working Document for notes on design principles you started in the last ePortfolio Design Quest.
- As you watch the videos in these ePortfolio Design Quests, and then read the material, make notes to yourself about what is and is not working in your ePortfolio design.
- Note that this page has more than one video.
- You will be sharing this in one of our F2F sessions.
Design Principle 3
Accessibility
Principle 3:
Accessibility & Design
When a visitor enters the website, he/she must be able to access each bit of information in the easiest manner. This means that the text must be legible, the colors must not be harsh on the eyes and the background must not overpower the content, etc. To make the website accessible to everyone, you can follow some of the following points:
- Typefaces – Make sure you select a font type and font size which is readable to all and is not too fancy for some to access or understand. For example, Fonts like Verdana, Times New Roman, Arial, etc. are simple fonts that almost everyone can easily read online. Similarly, the font size that works the best is 12-14 pts but you can be a little flexible with it.
- Colors – As far as the user experience is concerned, your color scheme and contrast must be well thought of and should be able to create visual harmony and balance. It is always better to choose contrasting colors for the background and written content so that it can be easily read. Choose a darker text color and a lighter background shade so that the result is easy to the eyes. Extra bright colors must be used sparingly.
- Images – Do you know that the human mind perceives and processes images a lot faster than text? Well, it is thus a good idea to choose and place the right images on your web pages to communicate with the audiences in a better way. Make sure they are high-quality images and are suitable for your purpose.
- Layout - Is the layout attractive, clean, and consistent. Many of your audience members will prefer images that line up and are of appropriate relations in size. A clean look might have all images lined up across a page with descriptors evenly spaced just under them. The images would need to be the same size and style to give the site a professional feel. You would not want to mix clip art images and photos in an image gallery navigation section of the site.
What about your site:
Inaccessible typeface and/or contrast; Images inappropriate for the content or are of poor quality; There are inconsistencies on the site that keep it from looking professional.
10 = Perfect typeface and contrast; images are not only appropriate and are of good quality, but they are part of the presentation of content; Layout is highly professional and consistent.
How might you improve on the accessibility and visual design of your site?
Design Principle 3, 6, & 7
Principle 6:
Communication & Content
Principle 6: Communication and Content
Visual language:
- Clear & consistent layout structure,
- Economy & simplicity
- Efficacious
- Well written & easy to understand
Everyone who visits your website is looking for some kind of information or content, and thus it is very important for you to communicate with them clearly and in an engaging manner. Your information must be compelling, easy to read and easy to process. Communication is not just about providing written information but also about offering images, infographics and another form of media such as videos and audio pieces. Web design takes into consideration a concept called ‘Visible language’. According to this concept, visible language is the content people see on the screen and involves three fundamental principles. They are given as follows:
- Organized with a clear, consistent layout structure – The first principle of visible language or effective communication is to provide the visitors of your website a clear and highly consistent layout or structure. Some important parts of the organization of concept include the layout involving the division of content, consistency, navigation, as well as visual appeal. In order to make your website communicate effectively, you need to organize and place your blocks of information in an easy to process manner.
- Economy & Simplicity – This principle involves achieving more by utilizing less. This means that you must try to deliver the most information by providing fewer visual elements. The design or layout must be free of clutter, should be simple and must have a high degree of clarity. It must throw emphasis on what is important and create distinctiveness between different elements.
- Communicate effectively – The user interface of the web design must be such that users are able to understand everything in the most convenient way. There must be a balance between readability, legibility, color, texture, and views.
Besides this, the content given on the website must be appropriate, well written, and easy to understand. It is important that you adjust the style of writing according to the preference of the target audience and avoid promotional writing. The writing must pull visitors and must leave them intrigued and wanting for more. It must clearly spell out what you do and what you aim to achieve.
What about your site:
Does your site communicate what you want it to in a consistent, visually organized manner, which is free of clutter and has just the right number of elements and choices to make it highly usable. As well, is the content written in a manner which will fulfill your goals for the site.
1 = No to the above statement
10 = absolutely to the above statement.
How might you improve your site's communication and content presentation? Add this to your ePortfolio "to do" list.
Principle 7:
White Space & Simplicity
A simple design is an effective design. Complexity is just not something that a visitor wants to see on your web page, and one of the most important aspects of a simple design is white space. White space is something that web designers must not be afraid of. White space not only helps to take the cognitive load off the website but also makes it easier for users to perceive the information provided on the website. White space helps to divide the web page into several distinct parts or areas which makes it simpler to process information. It is always better to have a whitespace solution to the problem of complex hierarchical structures. The following are some of the other things that can be considered as a part of a simple design:
- Grid-based layout – To avoid a messy structure or appearance of the website, you must opt for a grid-based layout in which content is divided into columns, boxes, and different sections.
- F-pattern design – It is a fact that the human eye scans screens in an ‘F’ pattern. Thus, it is a good idea to design a web page or website in a way that complements the natural reading behaviors of the visitors.
- Conventional designs – Conventional designs are not always boring and rather work well as far as visitor response or like ability is concerned. They add a hint of trust, reliability as well as brand credibility.
What about your site:
Does your site have a simple design that makes it easy to use?
1 = No to the above statement
10 = absolutely to the above statement.
How might you improve your site's design?
