A Comprehensive Guide to Web Design

Image Source: Adobe Stock

by Nick Babich

posted on 11-27-2017

Web design is tricky. One has to take a lot of things into account when designing a website, from visual appearance (how the website looks) to functional design (how the website works). To simplify the task, we’ve prepared this guide.

In this article, we’ll focus on the main principles, heuristics, and approaches that will help you to create a great user experience for your website. We’ll start with global things, like the user journey (how to define the “skeleton” of the website) and then work down to the individual page (what should be considered during web page design). We’ll also cover other essential aspects of design, such as mobile considerations and testing.

Designing the user journey

Information architecture

People often use the term “information architecture” (IA) to mean the menus on a website. But that’s not correct. While menus are a part of IA, they are only one aspect of it.

IA is all about the organization of information in a clear and logical way. Such organization follows a clear purpose: helping users to navigate a complex set of information. Good IA creates a hierarchy that aligns with user’s expectations. But good hierarchy and intuitive navigation don’t happen by chance. They are a result of proper user research and testing.

There are a number of ways to research user needs. Often, an information architect will take an active part in user interviews or card sorting, where the architect would hear of user expectations directly or see how prospective users would categorize a variety of information groups. Information architects also need access to the results of usability tests to see whether users are able to navigate efficiently.

Card sorting is a simple way to figure out how best to group and organize content based on user input. One of the reasons why information architects like card sorting is because of the clarity of patterns that typically emerges. Image Source: FosterMilo)

A menu structure would be created based on the results of user interviews, and card sorting would be tested for whether it satisfies the user’s mental model. UX researchers use a technique called “tree testing” to prove that it will work. This happens before designing the actual interface.

Tree testing is a reliable method of finding whether users can work with the proposed menu structure. Image Source: Nielsen Norman Group

Global navigation

Navigation is a cornerstone of usability. It doesn’t matter how good your website is if users can’t find their way around it. That’s why navigation on your website should adhere to a few principles:

Consider a few things when designing navigation:

Links and navigation options

Links and navigation options are key factors in the navigation process and have a direct effect on the user journey. Follow a few rules with these interactive elements:

Knowing which pages they’ve visited keeps the user from unintentionally revisiting the same pages.

“Back” button in browser

The “Back” button is perhaps the second-most popular UI control in the browser (after the URL input field). Make sure the “back” button works according to user expectations. When a user follows a link on a page and then clicks the “back” button, they expect to return to the same spot on the original page. Avoid situations in which clicking “back” brings the user to the top of the initial page, instead of where they left off, especially on pages. Losing their spot forces the user to scroll through content they have already seen. It’s no surprise that users get frustrated quickly with no proper “back-to-position” functionality.

Breadcrumbs

Breadcrumbs are a set of contextual links that function as a navigation aid on websites. It’s a secondary navigation scheme that usually shows the user’s location on a website.

While this element doesn’t require a lot of explanation, a few things are worth mentioning:

Distinguishing between different levels of this breadcrumb trail is hard.

Search

Some users come to a website looking for one particular item. They don’t want to use the navigation options. They want to type text in a search box, submit their search query, and find the page they’re looking for.

Take these few basic rules into account when designing the search box:

Designing individual pages

Content strategy

Perhaps the most important thing about content strategy is to focus the design on page objectives. Understand the goal of the page and write content according to the goal.

Here are a few practical tips to improve content comprehension:

Image Source: Witteia

Image Source: The Daily Rind

Text in all caps is hard for users to read.

Page structure

A properly-structured page makes it clear where each user interface element is located in the layout. While there are no one-size-fits-all rules, there are a few guidelines that will help you create a solid structure:

Grids and layout systems are part of the heritage of design and are still relevant in a multi-screen world. Adobe XD’s layout grids enable designers to achieve consistent, organized designs for different screen sizes and to manage the proportionsbetween elements by customizing the grids.

A low-fidelity wireframe created in Adobe XD. Image Source: Tim Hykes

Visual hierarchy

People are more likely to quickly scan a web page than to read everything there. Therefore, if a visitor wants to find content or complete a task, they are going to scan until they find where they need to go. You, as a designer, can help them with that by designing a good visual hierarchy. Visual hierarchy refers to the arrangement or presentation of elements in a way that indicates importance (that is, where visitor’s eyes should focus first, second, etc.). A proper visual hierarchy makes it easy to scan the page.

An F-shaped pattern is used by CNN.

A Z-scanning pattern is used by Basecamp.

The “Learn More About Brains” call to action stands out.

Scrolling behavior

A persistent myth among web designers is that people don’t scroll. To be clear: Today, everybody scrolls!

Improving scrolling behavior is possible with a few tips:

Scroll-activated sticky navigation. Image Source: Zenman

Provide visual feedback when loading new content. This is especially important for web pages where content loads dynamically (such as news feeds). Because content-loading during scrolling is supposed to be fast (it shouldn’t take longer than 2 to 10 seconds), you can use looped animation to indicate that the system is working.

Subtle animation (such as Tumblr’s loading indicator) tells the user that more content is being loaded.

Tumbler’s signup page uses scroll hijacking.

Content loading

Content loading is worth additional clarification. While an instant response is best, there are occasions when your website will need more time to deliver content to visitors. A bad internet connection could cause a slow reaction, or an operation could take a bit more time to complete. But no matter the cause of such behavior, your website should appear fast and responsive.

Facebook uses skeleton screens to fill out the UI as content is loaded incrementally.

Buttons

Buttons are vital to creating a smooth conversational flow. It’s worth paying attention to these basic best practices for buttons:

Is the orange box in the top-left corner of the screen a button? No, but the shape and label make the element look like one.

Don’t make people wonder what an interface element does. Source Image: UX Matters

Strive for consistency.

Imagery

As the saying goes, a picture is worth a thousand words. Human beings are highly visual creatures, able to process visual information almost instantly; 90 percent of all information that we perceive and that gets transmitted to our brains is visual. Images are a powerful way to capture the user’s attention and to differentiate a product. A single image can convey more to the viewer than an elaborately-designed block of text. Furthermore, images cross language barriers in a way that text simply can’t.

The following principles will help you integrate imagery in your web design:

Images that aren’t related to the topic will cause confusion.

Inauthentic images leave the user with a sense of shallow, false pretense.

A degraded image versus a properly sized image. Image Source: Adobe

Video

With increasing internet speeds, videos are becoming more popular, especially considering that they extend time spent on site. Today, video is everywhere. We’re watching it on our desktops, tablets, and phones. When used effectively, video is one of the most powerful tools available for engaging an audience — it conveys more emotion and really gives people a feel for a product or service.

Facebook videos play automatically as soon as the user reaches them, but no sound plays unless the user enables it.

Image Source: Dmakproductions

Subtitles and transcript will make video content more accessible. Image Source: TED

Call-to-Action Buttons

Calls to action (CTA) are buttons that guide users towards your conversion goal. The whole point of a CTA is to direct visitors to a desired course of action. Some common examples of CTAs are:

Take a few things into account when designing CTA buttons:

The green of the CTA on Firefox’s page jumps off the page and immediately gets the user’s attention.

The previous version of Dropbox’s home page has a good example of using negative space to make the primary CTA pop. The blue “Sign up for free” CTA stands out against the light blue of the background.

Evernote has one of the most common yet still effective action-oriented texts for its CTA.

Tip: You can quickly test a CTA using a blur effect. A blur test is a quick technique to determine whether the user’s eye will go where you want it to go. Take a screenshot of your page and apply a blur effect in Adobe XD (see the example on charity: water below). Looking at the blurred version of your page, which elements stand out? If you don’t like what’s being projected, revise.

A blur test is a technique to reveal a design’s focal point and visual hierarchy.

Web Forms

Filling a form remains one of the most important types of interaction for users on the web. In fact, a form is often considered the final step in the completion of a goal. Users should be able to complete forms quickly and without confusion.

Group related fields together. Image Source: Nielsen Norman Group

Animation

More and more designers are incorporating animation as a functional element to enhance the user experience. Animation is no longer just for delight — it is one of the most important tools for effective interaction. However, animation in design can enhance the user experience only if it’s incorporated at the right time and place. Good UI animation has a purpose — it is meaningful and functional.

Here are a few cases in which animation can enhance the experience:

Users will see this animation and immediately understand the problem. Image Source: The Kinetic UI

Image Source: xjw

Image Source: Ramotion

Image Source: Heco

Mobile considerations

Today, almost 50 percent of users access the web from mobile devices. What does this mean for us web designers? It means that we must have a mobile strategy for every website we design.

Practice responsive web design

It’s essential to optimize your website for the vast landscape of desktop and mobile browsers, each of which has a different screen resolution, set of supported technologies, and user base.

The Guardian employs the Priority+ pattern for its section navigation. Image Source: Brad Frost

Responsive Image Breakpoints Generator helps you to manage multiple sizes of images, enabling you to generate responsive image breakpoints interactively.

Going from “clickable” to “tappable”

On the mobile web, interaction is done via finger taps, not mouse clicks. This means that different rules apply when you’re designing touch targets and interactions.

Smaller touch targets are harder for users to tap than larger ones. Image Source: Apple

Accessibility

Today’s products must be accessible to everyone, regardless of a person’s abilities. Designing for users with impairments is one way that designers can practice empathy and learn to experience the world from someone else’s perspective.

Users with poor eyesight

A lot of websites use low contrast for text copy. While low-contrast text may be trendy, it’s also illegible and inaccessible. Low contrast is especially problematic for users with low vision and who struggle with contrast sensitivity.

Gray text on a light-gray background is hard to read. The experience will be far from good, and the design simply won’t work.

Low-contrast text is hard to read on a desktop, but it becomes even more difficult on mobile. Imagine trying to read low-contrast text on a mobile device while walking in bright sunlight. This is a good reminder that accessible visual design is better visual design for all users.

Never sacrifice usability for beauty. The most important characteristic of text and other vital elements on a website is readability. Readability requires sufficient contrast between text and background. To ensure that text is readable by people with visual impairments, the W3C’s Web Content Accessibility Guidelines (WCAG) has a contrast-ratio recommendation. The following contrast ratios are recommended for body text and image text:

Bad: These lines of text do not meet the color-contrast ratio recommendations and are difficult to read against their background.

Good: These lines of text follow the color-contrast ratio recommendations and are legible against their background.

You can use WebAIM’s Color Contrast Checker to quickly find out whether you’re within the optimal range.

Color blind users

It’s estimated that 4.5 percent of the global population experience color blindness (that’s 1 in 12 men and 1 in 200 women), 4 percent% suffer from low vision (1 in 30 people), and 0.6 percent% are blind (1 in 188 people). It’s easy to forget that we must also design for this group of users, because most designers don’t experience such problems.

To make design accessible for these users, avoid using color alone to convey meaning. As the W3C states, color shouldn’t be used as “the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”

One common example where color is used as the sole means of conveying information is alerts in forms. Success and error messages are often colored green and red, respectively. But red and green are the colors most affected by color-vision deficiency — these colors can be difficult to distinguish for people with deuteranopia or protanopia. Most probably, you’ve seen error messages like, “The fields marked in red are required.” While it might not seem like a big deal, this error message appearing in a form like the one below can be extremely frustrating for people with a color-vision deficiency. Designers should use color to highlight or complement what is already visible.

Bad: This form relies only on red and green to indicate fields with and without errors. Color blind users wouldn’t be able to identify the fields in red.

In the form above, the designer should give more specific instruction, like, “The email address you entered is not valid.” or at least display an icon near the field that requires attention.

Good: Icons and labels show which fields are invalid, better communicating the information to a color-blind user.

Blind users

Images and illustrations are a significant part of the web experience. Blind people use assistive technologies such as screen readers to interpret websites. Screen readers “read” images by relying on alternative text attributed to the image. If that text is not present or is not descriptive enough, blind users won’t be able to get the information as intended.

Consider two examples — first, Threadless, a popular t-shirt store. This page doesn’t say much about the item being sold. The only text information available is a combination of price and size.

The second example is from ASOS. This page, selling a similar shirt, provides accurate alternative text for the item. This helps people who use screen readers to envision what the item looks like.

When creating text alternatives for images, follow this guideline:

Keyboard-friendly experience

Certain users navigate the internet using their keyboard, rather than a mouse. For example, people with motor impairments have difficulty with the fine motor movements required for using a mouse. Make the interactive and navigation elements easily accessible to this group of users by enabling interactive elements to be focused with the Tab key and by displaying a keyboard-focus indicator.

Here are the most basic rules for keyboard navigation:

You can find detailed requirements for keyboard interaction in the “Design Patterns and Widgets” section of the W3C’s “WAI-ARIA Authoring Practices” document.

Testing

Iterative testing

Testing is an essential part of the UX design process. And like any other part of the design cycle, it is an iterative process. Gather feedback early on in the design process, and iterate throughout.

Image Source: Extreme Uncertainty

Test page-loading time

Users hate slow-loading web pages. That’s why response time is a critical factor on modern websites. According to Nielsen Norman Group, there are three response-time limits:

Obviously, we shouldn’t make users wait 10 seconds for anything on our websites. But even a few seconds of delay — which happens regularly — makes an experience unpleasant. Users will be annoyed with having to wait for the operation.

What usually causes slow loading time?

Tools like PageSpeed Insights will help you to find the causes of slow times.

A/B testing

An A/B test is ideal when you’re struggling to choose between two versions of a design (such as an existing version and a redesigned version of a page). This testing method consists of showing one of two versions randomly to an equal number of users and then reviewing analytics to see which version accomplished your goal more effectively.

Image Source: VWO

Developer handoff

UX design process has two important steps: prototyping the design and developing a working solution. The step that connects the two is called a handoff. As soon as the design is finalized and ready to be moved to development, designers prepare a specification, which is a document that describes how the design should be coded. A specification ensures that the design will be implemented according to the original intention. Precision in the specification is critical, because with an inaccurate specification, the developers will have to either rely on guesswork when building the website or go back to the designer to get answers to their questions. But assembling a specification manually can be a headache and usually takes significant time, depending on the complexity of the design.

With Design Specs (Beta) feature in Adobe XD, designers can publish a public URL for developers to inspect flows, grab measurements and copy styles. Designers no longer have to spend time authoring specifications to communicate positioning, colors, character styles or fonts to the developer.

Adobe XD’s design specs feature (in beta).

Conclusion

As with any aspect of design, the tips shared here are just a start. Mix and match these ideas with your own for best results. Treat your website as a continually-evolving project, and use analytics and user feedback to constantly improve the experience. And remember that design isn’t just for designers — it’s for users.

For regular UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter!

Topics: Creativity, Design, Insights & Inspiration

Products: Creative Cloud, XD