Design for the Web (originating from Design for Print)
- Specify context of use: Identify who the primary users of the website, why they will use the website, what are their requirements and under what environment they will use it.
- Specify Requirements: Once the context is specified, it is the time to identify the granular requirements of the website. This is an important process which can further facilitate the designers to create storyboards, and set important goals to make the website successful.
- Create Design solutions and development: Based on the website goals and requirements, start an iterative process of design and development.
- Evaluate Product: Designers do usability testing to get users’ feedback on the website. Evaluation is a crucial step in website development which gives critical feedback.
Effective web design is judged by the users of the website and not the website owners.
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). So what makes good web design? Below we explore the top 10 web design principles that will make your website aesthetically pleasing, easy to use, engaging, and effective.
Further reading on Design Principles: Design
Good web design always caters to the needs of the user. Are your web visitors looking for information, entertainment, some type of interaction, or to transact with your business? Each page of your website needs to have a clear purpose, and to fulfill a specific need for your website users in the most effective way possible.
People on the web tend to want information quickly, so it is important to communicate clearly, and make your information easy to read and digest. Some effective tactics to include in your web design include: organising information using headlines and sub headlines, using bullet points instead of long windy sentences, and cutting the waffle.
In general, Sans Serif fonts such as Arial 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 16px and stick to a maximum of 3 typefaces in a maximum of 3 point sizes to keep your design streamlined.
Further reading: Typography
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/ negative space is very effective at giving your website a modern and uncluttered look.
Further reading: Colour
A picture can speak a thousand words, and choosing the right images for your website can help with brand positioning and connecting with your target audience. If you don’t have high quality professional photos on hand, consider purchasing stock photos to lift the look of your website. 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.
Navigation is about how easy it is for people to take action and move around your 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.
7. Grid based layouts
Placing content randomly on your 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.
Further reading: Grids
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 is 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
10: Mobile friendly
It is now commonplace to access websites from multiple devices with multiple screen sizes, so it is important to consider if your website is mobile friendly. If your website is not mobile friendly, you can either rebuild it in a responsive layout (this means your website will adjust to different screen widths) or you can build a dedicated mobile site (a separate website optimised specifically for mobile users).
It is easy to create a beautiful and functional website, simply by keeping these design elements in mind. Have you got a website design that needs reviewing or optimising? Or perhaps, you are planning a website and you are looking to get the design right from the ground up. Either way, these principles of effective web design can help your website be more engaging, useful, and memorable for visitors.
Gestalt Design Laws
Gestalt is a form of psychology based on cognitive behaviors.
The word “gestalt” means “unified whole.” It captures how we perceive, process, and piece together fragmented parts.
When applied to design and visual perception, gestalt refers to how the mind copes with a large amount of visual input from our everyday lives.
We tend to discern relationships among design elements and consolidate objects into groups to simplify input.
When leveraged properly, these relationships and groupings allow us to create a better user experience and communicate a message more effectively.
Here are the design principles derived from the Gestalt theory:
When objects are grouped together close in space, they tend to get perceived as one object.
The distance between objects on a page determines whether they’re perceived as a group.
Improve usability by putting elements of the same category close together, such as navigation or footer links, to show that they’re all parts of the same function.
Shared visual characteristics create relationships. If two items look alike, they’re perceived to be in the same group.
In website design, you can use visual treatments to communicate the function or category of a piece of content.
For example, when all testimonials share the same design treatment, visitors will perceive them to belong to the same category even when they’re scattered across the site.
Once the eye starts following something, it’ll continue traveling in that direction until it comes across another object.
Many conversion-focused websites leverage this cognitive habit by using photographs of models whose gaze is directed at the content or call-to-action on a page:
The brain seeks completeness, so when we see shapes or images that aren’t complete, it’ll fill in the blanks.
The law of closure can be used to make a visual design more interesting. It works best on objects that are common and recognizable by the audience.
The brain seeks out symmetrical arrangements.
When we see two unconnected but symmetrical elements, our mind will put them together to form a coherent shape.
A symmetrical arrangement of elements on a page helps create a visual unity that’s pleasing to the eye.
We group together objects that show the same directionality.
For example, when you have a group of people gesturing in the same direction, they’re perceived as a group.
Just like the gaze of a model used in the law of continuity, you can leverage this cognitive behavior to draw attention to content, logos, or calls to action.
Usability testing from the God Father of User Testing: Nielsen Norman Group
“That’s just one person” and “Our real users aren’t like that” are common objections to findings from qualitative usability testing. Address these concerns proactively to ensure your research is effective.
Usability testing and other UX evaluation methods can be divided into two major categories: formative evaluation and summative evaluation. Both have their place, but at different stages in the design lifecycle, and they have different characteristics, for example in the number of test participants needed for a good study.
Usability testing is similar to how wild animals hunt for food: we’re trying to hunt down the design flaws in the user interface and must optimize a series of studies for total gain, rather than spend too much on any one study.
There are a lot of elements involved in a mobile usability test. In this video, we’ll walk you through an example test setup, including the necessary equipment, and discuss how to prepare for a test.
The number of test participants for qualitative usability testing that optimizes return-on-investment is determined by 2 parameters: the facilitator’s observational skills and the design team’s speed when generating the next design iteration.
Visual design details like fonts and colors can have subtle but important effects on the overall user experience. Use research methods that are sensitive to these effects to test your visual design.
Formative usability testing is best done with a small number of study participants, so that you have time and budget to test more design iterations of the user interface.
Our words define UX research goals for users, stakeholders, and teams. Turning UX research into improved design is already challenging. Why make it more so by setting unsuitable expectations with the words we use to describe research?
There are a lot of elements involved in usability studies with a desktop computer. In this video, we’ll walk you through an example test setup, including the necessary equipment, and discuss how to prepare for a test.
There is no excuse for not performing usability studies. They’re fast and cheap, and very convincing. Test with representative customers using realistic task, then be amazed by what you observe.
In user research, between-groups designs reduce learning effects; repeated-measures designs require fewer participants and minimize the random noise.
The 5-second test is a simple usability technique to help designers gauge the audience’s first impressions of a webpage.
Facilitate better usability studies with these 3 techniques: Echo, Boomerang, and Columbo. These methods allow you to get clarification from participants with minimal disruption or bias.
Remote unmoderated usability testing is so fast and easy that some teams make it their only evaluation method. But don’t shy away from its more robust alternative, the remote moderated usability test, which can give you more information and is also inexpensive.
Card sorting is a UX research technique in which users organize topics into groups. Use it to create an IA that suits your users’ expectations.
Affinity diagramming has long been used in business to organize large sets of ideas into clusters. In UX, the method is used to organize research findings or to sort design ideas in ideation workshops.
Tips for translating UX issues found in analytics into user research. Analytics tell you what customers are doing, but not why they are doing it. Pairing analytics and user research will provide you with clearer answers.
Evidence from usability studies can be more convincing than what you say. Even if you can easily determine the difference between good and bad designs, test them anyway.
All usability studies involve asking participants to perform tasks, but the correct way to write those tasks depends on the methodology you’re using. Good quantitative tasks are concrete and focused, while good qualitative tasks are open-ended, flexible, and exploratory.
In user research, the facilitator’s choice of words can affect the participants’ feedback or behavior.
- Paper Prototyping Training Video
- How to Conduct Eyetracking Studies
- How to Recruit Participants for Usability Studies
- How to Conduct Usability Studies for Accessibility
- How to Conduct Usability Studies
UX Conference Training Courses
- Virtual Reality & User Research
- User Research Logistics
- Making Use of Qualitative Data with Video
- Conducting User Research in the Public Sector
- Working with Observers