Web Page Design: A Comprehensive Guide

Illustrated by Prabhat Mahapatra

Web design is a complex subject. Designers and developers have to consider both visual appearance (how the website looks) and functional design (how the website works). With so many things that you need to take into account, the process of design can be tricky. To simplify the task, we’ve prepared this guide for you.

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

Designing the user flows

The first thing to consider is your user flow, or the path by which the visitor will navigate through your website. After all, web page design isn’t about creating a collection of individual pages; it’s about creating flows. This path is a series of steps that the visitor takes from the entry point (the first page where they land) toward the specific action you want them to take (typically a conversion action, such as a sign-up, purchase, etc.). The following will help you determine your user flows as you design your website.

Information architecture

Information architecture (IA) is a discipline that allows you to organize information clearly and logically for your visitors. Information architects analyze how users structure information and create a hierarchy that aligns with the user’s expectations. Good IA is a result of solid user research and usability testing.

There are several ways to research user needs. Often, an information architect will take an active part in user interviews, card sorting, and moderated usability testing where they observe how people interact with the existing design and share their opinions on it.

Card sorting is a simple technique that allows UX practitioners to understand how users group and organize content. Image credit experience ux.

IA is also used to define the site’s navigation and menus. When UX practitioners finish working on a menu, they use another technique called “tree testing” to prove that it will work. Tree testing happens before designing the actual interface.

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

Global navigation

Navigation is a cornerstone of usability. If visitors can’t navigate your website, they will most likely leave. That’s why the navigation on your website should adhere to a few principles:

Simplicity. Your navigation should help visitors understand how to get around on your site with the fewest clicks possible.
Clarity. There shouldn’t be any guessing about what each navigation option means.
Consistency. The navigation system should be the same for all pages on the website.

Consider a few things when designing navigation:

Select a navigation pattern based on the user’s needs. Navigation should accommodate the needs of the majority of your website visitors. For example, it’s better to avoid hamburger-menu navigation if the majority of your users aren’t familiar with the meaning of the icon itself.
Prioritize navigation options. A good design team will prioritize navigation options according to common user tasks, considering both priority and frequency of tasks.
Make it visible. Minimize the user’s cognitive load by making important navigation options permanently visible. When we hide navigation options we risk that visitors won’t be able to find them.
Communicate the current location. Failing to indicate the current visitor’s location is a common problem on many websites. If visitors have to ask, “Where am I?”, that’s a clear indication that your navigation needs some work. For large websites, offer location indicators like breadcrumbs.

Visual and functional design of web links

Links are a key element in web navigation. Their visual and functional design has a direct impact on usability. Follow a few rules with these interactive elements:

Recognize the difference between internal and external links. Users expect different behavior for internal and external links. All internal links should open in the same tab so that visitors can use the “back” button.
Change the color of visited links. When visited links don’t change color, users could unintentionally revisit the same pages multiple times.
Double-check all links. It’s frustrating to arrive at a 404-error page. Use tools like Dead Link Checker to find any broken links on your website.

“Back” button in a browser

The “back” button is perhaps the most used button in the browser, so make sure it 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 long pages. Losing their spot forces the user to scroll through content they have already seen, which leads to unnecessary interaction cost.

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:

Don’t use breadcrumbs as a replacement for primary navigation. Visitors should use the main menu to navigate; breadcrumbs should only support the visitors in that. When visitors rely on breadcrumbs as a primary method of navigation, rather than an extra feature, it is a clear indication of poor navigation design.

On the Best Buy website, breadcrumbs support the primary navigation. Image credit Best Buy.

Separate each level clearly. Use arrowheads as separators, not slashes. A forward slash (/) can easily clash with product categories on e-commerce websites. If you’re going to use the forward slash, ensure that no product category will ever have a slash:

Example of poor breadcrumb structure; distinguishing between the different levels of this breadcrumb trail may be difficult for users.

Search

Some visitors come to a website looking for a specific item. Since they know what they want, they probably won’t use the navigation options to find it. The “Search” feature will act as a shortcut in this case. Visitors should be able 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:

Put the search box where users expect to find it. The chart below, based on a study by A. Dawn Shaikh and Keisi Lenz, shows the expected location of the search field according to a survey of 142 participants. The study found that the most convenient spot is the top left or top right of every page on a website.

According to one study, the top left or top right of your pages is the best place for a search box. Image credit Erik Moeller.

Use a magnifying glass icon to draw attention to the area. The magnifying glass icon has a universal meaning—most users are familiar with it. The Nielsen Norman Group recommends using a schematic icon, the simplest version of the magnifying glass.

To draw attention to your search bar, use an icon like a magnifying glass. Image credit icons8.

Size the input box appropriately. Making the input field too short is a common mistake. Of course, users can type a long query into a short field, but only a portion of the text will be visible at a time, which isn’t great for usability. In fact, when a search box is too short, visitors tend to use short, imprecise queries, because longer queries can be hard and inconvenient to read. A 27-character input field will accommodate 90% of queries.

Amazon’s large input box allows visitors to see their entire search query. Image credit Amazon.

Put the search box on every page. Show the search box on every page so that users can access it regardless of where they are on the website.

Designing individual pages

Now that we’ve reviewed the basics of user flow, it’s time to learn how to design the individual web pages. Below we’ve summarized the key website designing guidelines to know.

Content strategy

When it comes to web page design, the most important thing is to design around the page’s objectives. Content strategy—which refers to planning, creating, and managing content on your website—will help with this exercise. Each page has its own goal, such as informing visitors about something or encouraging them to convert. Once you understand the goal of the page, only then should you work on the design or write the content.

Here are a few practical tips as you consider your content strategy:

Prevent information overload. Too much information on a page can easily overwhelm visitors. There are some simple ways to minimize information overload. One common technique is chunking: breaking content into smaller chunks to help users understand and process it better. A checkout form is a perfect example of this. Display, at most, five to seven input fields at a time and break down the checkout process into easy steps, like in this screenshot:

Example of a step-by-step checkout process. Image credit Witteia.

Avoid jargon and industry-specific terms. Each unknown term or phrase that appears on the page will make it that much harder for visitors to understand the information. A safe bet is to write for all reading levels and pick words that are clearly and easily understandable to everyone.
Minimize long sentences. Write in small, scannable segments. According to Robert Gunning’s book “How to Take the Fog Out of Business Writing”, sentences should be 20 words or fewer.
Avoid capitalizing all letters. All-caps text is fine for acronyms and logos. But it’s best to avoid all caps for paragraphs, form labels, errors, and notifications. In his book Legibility of Print, Miles Tinker mentions that all-caps dramatically reduces the speed of reading.

Page structure

A properly structured page will help visitors find each user interface element. While there are no one-size-fits-all rules, there are a few website design guidelines that will help you create a solid structure:

Make it predictable. Look at your competitors’ websites, identify common design patterns, and align with user expectations by using design patterns that are familiar to your target audience.
Use a layout grid. A layout grid divides a page into major regions and defines the relationships between elements in terms of size and position. With the help of a grid, combining different parts of a page in a cohesive layout becomes much easier.

A 12-column grid is good for web page design. Adobe XD’s layout grids help designers create consistent, organized designs for different screen sizes and manage the proportions between elements. Image credit Adobe XD.

Use a low-fidelity wireframe to privatize essential elements. Wireframing can save web designers a lot of time. Before building the page with real elements, create a wireframe, analyze it, and remove anything that isn’t absolutely necessary.

Example of a low-fidelity wireframe created in Adobe XD. Image credit Tim Hykes.

Visual hierarchy

People are more likely to quickly scan a web page than to read everything there. Therefore, it’s a good idea to optimize your web page design for fast scanning. You can help visitors find what they need with a good visual hierarchy, which refers to the arrangement or presentation of elements on a web page in a way that indicates their importance (that is, where their eyes should focus first, second, etc.). Good visual hierarchy can significantly improve page scannability.

Use natural scanning patterns. As designers, we have a lot of control over where people look when they’re viewing a page. The F-shaped pattern and the Z-shaped pattern are two natural scanning patterns that can help you to set the right path for the visitor’s eyes. For text-heavy pages, such as articles and search results, the F pattern is better, whereas the Z pattern is good for pages that aren’t text-oriented.

Example of an F-shaped pattern on the CNN website. Image credit CNN.

Example of an F-shaped pattern on the CNN website. Image credit CNN.

Example of a Z-scanning pattern on the Basecamp website. Image credit Basecamp.

Visually prioritize important elements. Make important elements, such as key content or your primary call-to-action buttons, the focal points so that visitors see them right away.

The “Pick a Plan” call-to-action stands out in this example. Image credit MailChimp.

Create mockups to clarify the visual hierarchy. Mockups are high-fidelity design artifacts that enable designers to see what the final layout will look like. Rearranging elements in a web design tool is much easier than doing it with code.

Example of a high-fidelity mockup created in Adobe XD. Image credit Coursetro.

Scrolling behavior

A persistent myth among web designers is that people don’t scroll. To be clear: everybody scrolls, and people start to scroll almost instantly as they land on a new page.

Knowing this, you can improve the user’s experience with these tips:

Encourage users to scroll. Despite the fact that people usually start scrolling as soon as the page loads, content at the top of the page is still very important. Put your most compelling content at the top:
- A good introduction. An excellent introduction sets the context for the content and answers the visitor’s question, “What’s this page all about?”
- Engaging imagery. Good imagery can accompany text and help visitors better understand the idea or topic.

In this example, Tesla uses powerful imagery to show the benefits and features of the Model X. Image credit Tesla.

Orient your users. When you create lengthy pages, keep in mind that visitors still require a sense of orientation (of their current location) and a sense of navigation (other possible paths). Long pages can make navigation problematic for users; if the top navigation bar loses visibility when the user scrolls down, they will have to scroll all the way back up when they’re deep within the page. The obvious solution to this is a sticky menu that shows the current location and that remains on screen in a consistent area at all times.

As you think about how to design a web page in a way that minimizes user interaction cost, one solution is to use scroll-activated sticky navigation. Image credit 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 should be fast (no longer than two 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 loading. Image credit Tumblr.

Don’t hijack scrolling. User control and freedom are among the key heuristics for UI design coined by Jakob Nielsen. Hijacked scrolling is annoying to most users because it takes the control away and makes the scrolling behavior completely unpredictable. When you design a website, let the user control their browsing experience.

Content loading

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 itself could take a bit more time to complete. But no matter the cause of such behavior, your website should appear fast and responsive. Here are some ways to achieve this:

Make sure regular loading doesn’t take long. Our natural attention span is very low. According to Nielsen Norman Group research, 10 seconds is about the limit! When visitors have to wait for a website to load, they may become frustrated and leave. Even with the most beautifully designed loading indicator, users will still leave if it takes too long.
Use skeleton screens during loading. Many websites use progress indicators to show that data is loading. While the intention behind a progress indicator is good, since it provides visual feedback, the result can be negative. As Luke Wroblewski mentions, “Progress indicators by definition call attention to the fact that someone needs to wait. It’s like watching the clock tick down—when you do, time seems to go slower.”

Skeleton screens are an excellent alternative to this. These containers are essentially a temporarily blank version of the page, into which information is gradually loaded. Rather than showing a loading indicator, designers can use a skeleton screen to focus users’ attention on actual progress and create anticipation for what’s to come. Because information is incrementally displayed on the screen, it feels like things are happening immediately.

Facebook uses skeleton screens to fill out the UI as content loads incrementally. Image credit Facebook.

Buttons

Buttons are interactive UI elements that play a key role in conversational flow. It’s worth paying attention to these basic best practices for buttons:

Ensure that clickable elements actually look clickable. The way an object looks tells users how to use it. Visual elements that look like links or buttons but aren’t clickable, such as underlined words that aren’t links or elements that have a rectangular background but aren’t buttons, can easily confuse users.
Label buttons according to what they do. The label on any actionable interface element should always tie back to what it will do for the user. Descriptive labels can help with this—users will feel more comfortable if they understand what action a button does. Vague labels such as “Submit” or abstract labels like in the example below don’t provide enough information about the action.

A good website design guideline is to be clear with your button text so that users understand what the interface element does. Image credit UX Matters.

Design buttons consistently. Users remember details, whether consciously or not. When browsing a website, they’ll associate a particular element’s shape with button functionality. Therefore, visual consistency will not only contribute to a great-looking design but will also make the element’s behavior more predictable to visitors. The image below illustrates this point perfectly. Using three different button shapes will leave your user confused.

When designing buttons, consistency leads to better usability. Image credit Nick Babich.

Imagery

As the saying goes, a picture is worth a thousand words. Human beings are highly visual creatures and images are a powerful way to capture the user’s attention. 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 into your web page design:

Make sure images are relevant. One of the biggest dangers in design is imagery that conveys the wrong message. Select images that are clear and support your product goals.

Images that aren’t related to the topic will confuse visitors. Image credit Lloyds Bank.

Avoid generic photos of people. Using human faces in design is an effective way to engage users. When visitors see faces of other humans it makes them think that there are real humans behind the product or organization. But in an attempt to build trust, many corporate websites rely on generic stock photos. When visitors see inauthentic photos, they may start to doubt the organization.

Inauthentic stock images may create a poor first impression for visitors. Image credit Adobe Stock.

Use high-quality assets with no distortion. The quality of the visual assets on your website can have a tremendous impact on the user’s impression. Pixelated images make visitors doubt the quality of your product, so make sure to test resolution sizes for various ratios and devices.

Example of a pixelated, poorly sized image (left) versus a properly sized image (right). Image credit Adobe.

Videos

With increasing Internet speeds, videos are more popular than ever, especially considering that they extend the 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.

If you want to use video on your website, consider the following recommendations:

Set audio to “off” by default, with the option to turn it on. When users arrive on a page, they don’t expect that it will play any sound. If they’re in a public place and not wearing headphones, they might not appreciate sudden and unexpected audio. In most cases, users will leave the website as soon as it plays.

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

Keep promo videos as short as possible. According to research by D-Mak Productions, short videos are more appealing to the majority of users. Keep business videos in the range of two to three minutes.

According to research, users prefer shorter videos to longer videos. Image credit D-MAK Productions.

Provide an alternative way to access content. Always try to design your products for users with various abilities, including those who can’t hear or see. For accessibility, include captions and a full transcript of the video.

Subtitles will make your video content more accessible to your hearing- or visually impaired users. Image credit TED.

Call-to-action buttons (CTAs)

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

“Start a trial”
“Download the book”
“Sign up for updates”
“Get a consultation”

Take a few things into account when designing CTA buttons:

Size. Your CTA should be large enough to attract attention. A quick five-second test will help you determine the right size. View a web page for five seconds and then list the elements you remember. If the CTA is among the elements, then congrats! It’s sized appropriately.
Visual prominence. You can make certain buttons stand out by giving them more visual prominence. Contrasting colors work best for CTAs and make for striking buttons.

The green of the CTA button here jumps off the page and gets the visitor’s attention. Image credit Mozilla.

Negative space. Along with size and color, the amount of space around a CTA plays an important role in the visual hierarchy of elements. White (or negative) space creates essential breathing room and separates the button from other elements in the interface.

Labels. Use action-oriented text for CTA labels, as this will compel visitors to take action. Use strong verbs like “Start,” “Get,” or “Join.”

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

Tip: Use a “blur test” to test your CTA. 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 you see, revise.

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

Web forms

Filling out forms is one of the most important types of interaction for users on the web. Users should be able to complete forms quickly and without confusion.

Here are a few design recommendations that will help you improve your form design:

Ask only what’s required. Every extra field you add to a form will affect its conversion rate. The more you ask, the less motivated users will be to provide the data. Always think about why you’re requesting certain information from users and how you will be using it.
Order the form logically. For example, asking for someone’s address before their name might seem strange.
Group related fields together. Grouping creates a flow from one set of questions to the next. Grouping related fields together also helps the user make sense of the information.

For the best form-fill experience, group related fields together. Image credit Nielsen Norman Group.

Animation

Animation is another important tool for effective interaction. More and more designers are incorporating animation as a functional element to enhance the user experience. 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 user experience:

Visual feedback on user action. Good interaction design provides feedback. Visual feedback is helpful when you need to inform users about the result of an operation. If there’s a problem, functional animation can provide that information. For example, a shake animation can indicate that the user entered the wrong password.

Animations can help users understand problems, such as if they entered the wrong password. Image credit The Kinetic UI.

Visibility of system status. One of Jakob Nielsen’s 10 heuristics for usability, visibility of system status remains among the most important principles in user interface design. Users want to know their current context in a system at any given time, and a website should tell the user what’s happening via appropriate visual feedback. Data uploading and downloading are typical operations on the web and they are great candidates for functional animation. For example, an animated loading bar shows how fast a process is going and sets an expectation for how fast the action will happen.

Example of a unique animation for downloading progress. Image credit xjw.

Navigational transitions. Navigational transitions are movements between states on a website, such as from a high-level view to a detailed view. Functional animation creates a connection between the two states and smoothly transports users between them.

Example of a state transition on a corporate website. Image credit Ramotion.

Parallax effects. Parallax is a popular technique in web design in which the background moves at a different speed than the foreground content while scrolling. This effect can introduce a sense of dynamics and movement into web layouts. (Learn more about parallax best practices here.)
Branding. Well-crafted animation establishes an emotional connection with visitors. It can highlight a product’s strengths and make the user experience truly delightful and memorable.

Branding animation can create truly memorable experiences. Image credit Heco.

Mobile considerations

Today, almost 50% 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.

Responsive design

It’s essential to optimize your website for various screens and resolutions. Here are some key guidelines to follow:

Aim for a single-column layout. A single-column layout usually works best on mobile screens because it scales well between different device resolutions and between “portrait” and “landscape” mode.
Use the “Priority+” pattern to prioritize navigation across breakpoints. Priority+ is a term coined by Michael Scharnagl to describe navigation that exposes the most important elements and hides away less important items behind a “more” button. This type of navigation uses the available screen space; as space increases, the number of exposed navigation options increases as well, which leads to better visibility and more engagement.

This pattern is especially good for content-heavy websites with a lot of different sections and pages, such as a news website or a large retailer’s e-commerce store. In the screenshot example below, The Guardian uses the Priority+ pattern for its section navigation. Less important items show up when the user hits the “All” button.

In this example, The Guardian employs the Priority+ pattern for its section navigation. Image credit Brad Frost.

Size images appropriately for displays and platforms. A website must adapt to look perfect on all of the different devices and in all of the various resolutions. Creating great-looking images on the web is one of the main challenges web designers face when building responsive websites. To simplify this task, you can use tools like the Responsive Image Breakpoints Generator to generate breakpoints for images interactively.

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

From clickable to tappable

On the mobile web, finger taps (not mouse clicks) create interactions. This means that different rules apply when you’re designing touch targets and interactions.

Properly sized touch targets. All interactive elements (such as links, buttons, and menus) should be tappable and a bit larger. Refer to the MIT Touch Lab’s study to choose a proper size for your buttons. The study found that 10×10 millimeters is a good minimum touch target size. This rule works for both designing apps and websites.

Smaller touch targets are harder for users to tap than larger ones, so be sure to size your buttons appropriately. Image credit Apple.

Stronger visual signifiers of interactivity. On mobile, there is no hover state to provide additional visual feedback to your user. Thus, use visual design decisions that allow users to correctly predict how an interface element will behave just by looking at it. With buttons, for example, consider using a square shape with a subtle shadow.

Example of a CTA button design with good visual signifiers. Image credit Nick Babich.

Accessibility

Accessibility is another essential website design guideline. Today’s products must be accessible to everyone, regardless of a person’s abilities. Designing for users with impairments should be an integral part of product design.

Users with poor eyesight

A lot of websites use low contrast for text copy. While gray text on a white background may look cool, it is also illegible and inaccessible. Low contrast is especially problematic for users with low vision and those who struggle with contrast sensitivity.

Gray text on a light-gray background is hard to read; instead, opt for more contrast for better readability. Image credit Squarespace.

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.

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

Small text should have a contrast ratio of at least 4.5:1 against its background. A ratio of 7:1 is preferable.
Large text (at 14-point bold and 18-point regular and up) should have a contrast ratio of at least 3:1 against its background.

In this example of poor contrast, the lines of text do not meet the ratio recommendations and are difficult to read against their background. Image credit Nick Babich.

In this example of better contrast, the lines of text follow the color-contrast ratio recommendations and are legible against their background. Image credit Nick Babich.

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

WebAIM’s Color Contrast Checker will tell you whether your contrast ratio adheres to WCAG standards. Image credit WebAIM.

Color blind and low-vision users

It’s estimated that 4.5% of the global population experience color blindness (that’s 1 in 12 men and 1 in 200 women), 4% suffer from low vision (1 in 30 people), and 0.6% are blind (1 in 188 people).

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 of this is in forms. Success and error messages are often green and red, respectively. But red and green are the two most difficult colors to distinguish for people with color-vision deficiency. You’ve likely seen error messages that indicate something like “the fields marked in red are required.” While it might not seem like a big deal, this error message can be extremely frustrating for people with a color-vision deficiency. Instead, designers should use color to highlight or complement what is already visible.

In this example, the form relies only on the color red to indicate fields with and without errors. Color-blind users wouldn’t be able to identify these fields. Image credit WebAIM.

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

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

Blind users

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

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

Example of an e-commerce page that lacks detailed information about the item. Image credit Threadless.

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

In this example, the e-commerce page provides a good amount of detail about the product. Image credit ASOS.

When creating text alternatives for images, follow these guidelines:

All “meaningful” images require descriptive alternative text. (A “meaningful” photo adds context to the information on the page.)
A text alternative isn’t needed if an image is purely decorative and provides no useful information to the user.

Keyboard-friendly experience

Certain users, such as those with motor impairments, navigate the internet using their keyboard, rather than a mouse. To cater to this group, it’s important to enable keyboard-based navigation.

Here are the most basic rules for keyboard navigation:

Check that keyboard focus is visible and obvious. Some web designers remove the keyboard focus indicator because they think it’s an eyesore. This decision hinders keyboard users from properly interacting with the website.
All interactive elements should be accessible. Keyboard users must be able to access all interactive elements, not just the main navigation options or primary calls to action.

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

The next thing you need to learn is how to test your website. Even if you’ve followed all of the website design guidelines above, it doesn’t mean that it will work for your users. A good rule of thumb is “test early, test often” because it’s the only way to know for sure.

Iterative testing

Like any other part of the design cycle, testing is an iterative process. Gather feedback early on in the design process and iterate throughout.

Eric Ries’s Build-Measure-Learn feedback loop is an important part of the design and testing process. Image credit Eric Ries.

Test page loading time

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

0.1 second. This feels instant for users.
1 second. The user will sense a slight delay.
10 seconds. Users may leave the website immediately.

Obviously, we shouldn’t make users wait 10 seconds for anything on our websites. But even a few seconds of delay can make an experience unpleasant.

What usually causes slow loading time?

Heavy content objects (such as embedded video and slideshow widgets)
Unoptimized back-end code
Hardware-related issues (infrastructure that doesn’t allow for fast operations).

Tools like PageSpeed Insights will help you find the causes.

A/B testing

An A/B test is ideal when you’re struggling to choose between two versions of a design. 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.

Design handoff

The UX design process has two important steps: prototyping the design and developing a working solution. The “handoff” is the step that connects the two. As soon as the design is ready for development, designers prepare a specification, which is a document that describes how to code the design. A specification ensures that the team implements the design according to the original intention.

A good specification is critical because without it, 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 Adobe XD’s design specs feature, designers can publish a public URL so that developers can inspect flows, grab measurements, and copy styles. Designers no longer have to spend time authoring specifications to communicate positioning, colors, text styles, or fonts to the developer.

Your product team can also export assets from XD to Mockplus Cloud as a single source of truth for everything related to the design. The cloud can become a foundation for your design systems that will help both designers and developers create and reuse design elements, including patterns and visual styles.

Conclusion

Of course, these web design tips are just a start. Mix and match these ideas with your own for the 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.