The field of web design is complicated. Designers and developers must consider the website’s overall appeal and practical design.  Designing may be challenging since there are so many factors to consider. We’ve put up this tutorial for you to make the work easier.

We’ll concentrate on the key tenets, concepts, and methods in this manual to help you design a fantastic user experience for your website. We’ll begin with broad issues like user flows (how to describe the website’s structure), then go down to the specific page (what to consider at the time of web page design). We’ll also discuss testing and other crucial design elements, such as mobile considerations.

1. Designing the user flows

Your user flow, or how a visitor will travel around your website, should be considered initially. Web page design aims to create flows rather than a collection of separate pages. The visitor follows this route in a series of stages from the entrance point (the first page they land on) to the particular action you want them to perform (a conversion action, like a sign-up, purchase, etc.). As you create your website, the following information will assist you in determining your user flows.

Structure of information

For the benefit of your visitors, you can arrange information using the discipline of information architecture (IA). Information architects study how people organize information and design a hierarchy that meets their needs. Strong user research and usability testing lead to good information architecture.

User requirements can be investigated through a variety of methods. An information architect frequently participates in user interviews, card sorting, and moderated usability testing, watching how users engage with the current design and offer their thoughts.

The menus and navigation of the website are also defined using IA. After finishing their work on a menu, UX experts utilize a different method called “tree testing” to demonstrate that it will function. Before building the real interface, trees are tested.

Global navigation

Usability’s foundation is navigation. Visitors will most likely quit your website if they can’t find their way around. Because of this, your website’s navigation should follow a few guidelines:

• Simplicity. Visitors should be able to navigate your website with the fewest number of clicks feasible with the aid of your navigation.
• Clarity. There should be no room for interpretation regarding what each navigation choice represents.
• Consistency. All website pages should have the same navigation structure.

When creating navigation, take the following into account:

• Choose a navigational strategy depending on the user’s requirements. For instance, it’s preferable to avoid hamburger menu navigation if most of your users are unfamiliar with the icon’s meaning. The bulk of the people that visit your website should be catered for in the navigation.
• Give the navigation choices priority. A competent design team would rank navigation alternatives following frequent user tasks, taking task importance and frequency into account.
• Make it obvious. Reduce cognitive stress on the user by having crucial navigational alternatives always visible. We run the danger of visitors being unable to identify navigation alternatives when we hide them.
• Share the place as it is. Offer location cues like breadcrumbs on huge web pages. The absence of a location indicator on many websites is a typical issue. Visitors will immediately notice that your navigation requires improvement if they have to question, “Where am I?”

Visual & functional design of web links

A crucial component of online navigation links. Their usefulness is directly impacted by their aesthetic and functional design. Use these interactive components according to a few guidelines:

• Be able to differentiate internal connections from external ones. Users anticipate various actions from internal and external connections. All internal links should open in the same tab to allow users to use the “back” button.
• Modify the links you’ve visited’s color. Users may mistakenly visit the same pages again if clicked links don’t change color.
• Check each link twice. Arriving at a 404-error page is annoying. To identify any broken links on your website, use tools like Dead Link Checker.

Browser’s “Back” button

Ensure the “back” button functions as expected because it may be the most frequently used browser button. A user anticipates returning to the same location on the original page after clicking the “back” button after clicking a link on a page. Avoid instances, especially on lengthy pages, were hitting “back” takes the user back to the top of the first page rather than where they left off. The user incurs extra interaction costs when they are forced to navigate over stuff they have already viewed after losing their place.

Search

Some internet users search for a specific product when they arrive. They probably won’t utilize the navigation choices to discover it as they already know what they want. In this instance, the “Search” tool will serve as a shortcut. The page they’re looking for should be easily accessible via a search box that visitors may use to enter text and submit their search query.

Consider the following fundamental guidelines while creating the search box:

• Position the search box at the expected location for users. Based on research by A. Dawn Shaikh and Keisi Lenz, the graphic below displays where 142 participants predicted the search field. According to the survey, every web page’s top left or top right is the most practical location.
• Use a magnifying glass symbol to attract attention to the location. Most users are familiar with the general meaning of the magnifying glass symbol. The simplest version of the magnifying glass, a schematic symbol, is advised by the Nielsen Norman Group.
• Make the input box the proper size. It’s usual practice to shorten input fields. Users may certainly enter a long query into a small field, but the usability will suffer because only a piece of the content will be shown at once. Users often enter brief, inaccurate search terms when a search box is too small since lengthier search terms might be challenging and cumbersome to see. Ninety percent of inquiries can be answered using a 27-character input field.
• Include a search box on each page. Display a search bar on every page of the website so that visitors may utilize it from anywhere on the site.

2. Designing individual pages

It’s time to learn how to create individual web pages now that we’ve gone through the concepts of user flow. We’ve included the most important website design best practices below.

Content management

The most crucial aspect of web page design is to plan the layout around the page’s goals. Each page has a distinct objective, such as educating visitors about a topic or influencing their decision to convert. When you are clear on the page’s purpose, you should begin working on the design or creating the content. This activity will benefit from understanding content strategy, which is the planning, creating, and managing content on your website.

As you think about your content strategy, consider the following suggestions:

• Avoid over-informing people. Visitors who are overloaded with content on a page are quickly lost. There are some straightforward methods for reducing information overload. Chunking is a typical approach that involves dividing material into smaller pieces to improve user comprehension and processing. A checkout form is the ideal illustration of this. Break the checkout process down into simple phases and only show five to seven input fields at once, as seen in the following screenshot:
• Steer clear of industry-specific jargon. Visitors’ difficulty comprehending the content increases with each new term or phrase on the page. Writing for all reading abilities and choosing terms everyone understands plainly is a secure bet.
• Keep your sentences brief. Write in brief, readable chunks. Sentences should be 20 words or less, according to Robert Gunning’s book “How to Take the Fog Out of Business Writing.”
• Refrain from capitalizing every letter. For paragraphs, form labels, mistakes, and alerts, it’s better to avoid using all capitals. Acronyms and logos can be written in all caps. 

Page layout

Visitors will discover every user interface element easier if a website is appropriately organized. Several website design principles will assist you in developing a strong structure even if there are no universally applicable rules:

• Establish predictability. Employing well-known design patterns for your target audience may align with user expectations by examining your rivals’ websites and identifying similar design patterns.
• Use a grid for the layout. A layout grid separates a page into key areas and establishes how items relate to one another in size and placement. Combining various page elements into a unified layout is significantly simpler with a grid.
• To privatize crucial components, use a low-fidelity wireframe. Make a wireframe of the page before adding actual pieces, then go over it, removing anything that isn’t essential. Web designers may save a tonne of time by wireframing.

Visual hierarchy

People are less likely to read a whole online page than to scan it rapidly. As a result, it makes sense to build your web page so it can be quickly scanned. A strong visual hierarchy, which is the arrangement or display of components on a web page in a way that demonstrates their significance, can assist users in finding what they need.  A good visual hierarchy can considerably improve the ability to scan a page.

• Employ innate scanning patterns. When someone is reading a page, we, designers, have a lot of power over where they will look. Two natural scanning patterns that can assist you in directing the visitor’s gaze in the proper direction are the F-shaped and Z-shaped patterns. The Z pattern works well for pages that aren’t text-oriented, whereas the F pattern is ideal for text-heavy pages like articles and search results.
• Prioritize significant components visually. Make critical components the focus points so that visitors can see them immediately away, such as your principal call-to-action buttons or vital information.
• Produce prototypes to make the visual hierarchy clearer. High-fidelity design objects called mockups provide designers with a preview of the finished layout. It is considerably simpler to rearrange items in a web design tool than it is to do so in code.

Content loading

Even while a fast response is ideal, there are times when your website may need a longer time to provide users with the material. A poor Internet connection might slow response, or the process might take a little longer to finish. Your website should look quick and responsive regardless of the reason for this behavior. Here are a few techniques for doing this:

Ensure that routine loading doesn’t take too long. Our attention span is relatively short by nature. 10 seconds is roughly the maximum, according to research from the Nielsen Norman Group! When a website’s visitors must wait for it to load, they can get impatient and leave. Users will leave if the loading process takes too long, regardless of how elegantly the loading indication is made.

Use skeleton screens while a page loads. Progress indicators are often used on websites to signify that data is loading. A progress indicator may have noble intentions but may not be the best choice because it offers visual feedback. Skeleton displays are a great substitute for this. These “containers” are momentarily blank pages progressively filled with data. The gradual presentation of information on the screen gives the impression that events are occurring instantly. Designers can use a skeleton screen instead of a loading indication to draw users’ attention to real progress and build anticipation for what’s to come.

Imagery 

Imagery  Images are a potent approach to grab the user’s attention because humans are highly visual. A single image can say more to the user than a block of words with a complex layout. Additionally, pictures may transcend language borders in a way that words can’t.

You may use pictures in your web page design by keeping the following guidelines in mind:

• Ensure that the photos are pertinent. Images that provide the wrong impression are one of the biggest design risks. Choose distinct photos that serve your product’s objectives.
• Steer clear of individuals in stock photographs. Users may be engaged by using human faces in design. Visitors are more likely to believe that there are actual people behind a brand or organization when they can see other people’s faces. However, many business websites depend upon generic stock photographs to establish credibility. Visitors who view fake photographs could begin to doubt the business.
• Use distortion-free, high-quality assets. The quality of the graphic elements inside may greatly influence the user’s perception of your website. Testing resolution sizes for different ratios and devices can help you avoid having pixelated photos that cause customers to question the quality of your goods.

Videos

Videos are more widely used than ever because of the faster Internet, especially since they prolong user engagement. There is video everywhere now. We are seeing it on our computers, tablets, and mobile devices. Video is one of the most successful techniques for engaging your audience since it transmits more emotion and truly gives them a sense of the product or service.

If you wish to use video on the website, take into account the following advice:

• Make audio “off” by default with an on/off switch. Users do not anticipate hearing sounds when they first visit a page. They might not enjoy abrupt and unexpected noise if they’re in a public setting and aren’t using headphones. Most of the time, users close the page as soon as it starts playing.
• Make promotional films as concise as you can. Keep corporate films between two and three minutes long. Short films are more enticing to most consumers, according to D-Mak Productions’ study.
• Always strive to create goods usable by consumers of all abilities, including people who are blind or deaf.
• Offer another method of obtaining the content. Include captions and a complete transcript of the video for accessibility.

Call-to-action buttons (CTAs)

CTAs are buttons that direct users toward your conversion objective. The goal of a CTA design is to guide users in the direction of a certain action. Examples of CTAs include the following: “Start a trial,” “Download the book,” “Sign up for updates,” “Get a consultation,” and “Sign up for updates.”

When creating CTA buttons, keep the following in mind:

• Size. Your CTA needs to be noticeable enough to get attention. You can choose the size with a fast test that takes five seconds. After seeing a webpage for five seconds, list the components you can recall. Congratulations if the CTA is one of the components! It is the right size.
• Visual importance. Contrasting colors create eye-catching buttons and perform best as CTAs. Certain buttons may be made to stand out by being shown more prominently.
• Negative room. The visual hierarchy of components includes factors like size, color, and space surrounding a CTA. The button is set apart from other interface components by white (or negative) space, providing the necessary breathing area.
• Labels. Use wording that encourages users to take action when creating CTA labels. Strong verbs like “start,” “get,” or “join” should be used.

Use the “blur test” to evaluate your CTA. The blur test is a fast test to see if the user’s eye will follow your direction. Apply a blur effect in Adobe XD to a snapshot of your page. Which aspects on your page stand out when you see them in a blur? Make changes if you don’t like what you see.

Web forms

One of the most significant ways people connect online is by filling out forms. Users should be able to fill out forms swiftly.

You may enhance your form design by following these suggestions for design:

• Only ask what is necessary. The conversion rate of a form will decrease for every additional field you add. Users will be less encouraged to supply the data if you ask them additional questions. Always consider why and how you will utilize the information before asking people for it.
• Logically arrange the form. For instance, asking for someone’s address before their name could appear unusual.
• Combine relevant fields. A flow through one set of questions to the following is created by grouping. The user can better understand the data by grouping fields that are linked to one another.

Animation

An effective user interface has a point; it is meaningful and practical. Another crucial component for efficient interaction is animation. Animation is being used by an increasing number of designers as a practical component to improve user experience. Nevertheless, animation in design could only improve the user experience if it is used in the appropriate context.

Following are some situations when animation can improve the user experience:

• Visual confirmation of user action. An effective interface design offers feedback. Visual feedback is helpful when you need to tell users of an operation’s outcome. Functional animation can reveal any issues, if there are any. A shaking motion, for instance, might let the user know that they typed the erroneous password.
• A system status display. Visibility of system state, one of Jakob Nielsen’s ten usability criteria, continues to rank among the most crucial guidelines for user interface design. Users would like to know their present position in a system at all times, and a website should inform them of this situation using the right visual cues. The web’s standard activities of downloading and transferring data make them excellent candidates for enabling functional animation. For instance, an animated loading bar creates expectations for how quickly the action will occur by displaying how quickly a process is progressing.
• Transitions in navigation. Movements between states on a website are known as navigational transitions. Users have effortlessly transferred between the two states thanks to functional animation, which establishes a link between them. For instance, going from a high-level view to a detailed view.
• Effects of parallax. With the popular web design technique, parallax, the backdrop scrolls more slowly than the foreground information. This technique may give web design a sense of movement and motion.
• Branding. Animation done well creates an emotional connection with viewers. It may draw attention to a product’s advantages and create an engaging and memorable user experience.

3. Mobile considerations

Nearly 50% of users now use mobile devices to access the Internet. What does this indicate for web designers like us? It implies that every website we develop needs to have a mobile strategy.

Adaptive design

It’s crucial to make your website responsive to different screen sizes and resolutions. Here are some essential rules to remember:

• Strive toward a one-column design. Due to its ability to scale effectively between multiple device resolutions & between “portrait” and “landscape” modes, a single-column layout typically performs well on mobile displays.
• To provide priority to navigating across breakpoints, use the “Priority+” pattern. Michael Scharnagl coined the phrase “priority+” to describe navigation, highlighting the most crucial components and concealing less crucial ones behind a “more” button. This kind of navigation makes advantage of the available screen real estate; as screen real estate rises, so does the number of exposed navigation choices, improving visibility and increasing engagement.
• The Guardian employs the Priority+ pattern for its segment navigation in the screenshot sample below. This design pattern is particularly useful for content-rich websites with several parts and pages, like a news website or a major retailer’s online store. When the user clicks “All,” fewer significant things appear.
• Image sizes should be suitable for platforms and screens. A website must adjust to display flawlessly across all devices and screen resolutions. One of the biggest difficulties responsive website designers encounter is producing attractive pictures for the web. To make this work easier, you may construct breakpoints for photos interactively using tools like the Responsive Image Breakpoints Generator.

From clickable to tappable

Mobile web interactions are created by finger touches rather than mouse clicks. As a result, various rules apply while developing touch targets and interactions.

• Touch targets with the correct size. According to the study, a recommended minimum touch target size is 1010 millimeters. This principle applies to both app and website design. All clickable and bigger interactive components (links, buttons, or menus) should be used.
• More prominent visual indicators of engagement. There is no hover state on mobile devices to give your user more visual cues. Use visual design strategies to make it possible for users to accurately guess how an interface piece will function by looking at it. For example, consider employing a square form with a light shadow for buttons.

4. Accessibility

Another crucial rule for website design is accessibility. Everybody should be able to use today’s products, regardless of their ability. Designing products to accommodate consumers with disabilities need to be a priority.

Users with impaired vision

Limited contrast poses particular challenges for people with low eyesight and those with trouble detecting contrast. Many websites have text material that is low contrast. Although grey lettering on a white backdrop may be stylish, it is also difficult to read and use.

Reading low-contrast writing might be challenging on a laptop, but it can be downright impossible on a mobile device. Imagine attempting to stroll in the sun while reading low-contrast text on a mobile device.

Readability is the most crucial quality for text and other components on a website, which demands a strong enough contrast between text and backdrop. The W3C’s Web Content Accessibility Guidelines (WCAG) contain a contrast-ratio suggestion to ensure that text is accessible by those with visual impairments. The following contrast ratios are advised for both body text and picture text:

Low-vision and color-blind users

According to estimates, 0.6% of the world’s population is blind, 4.5% have color blindness, and 4% have impaired vision.

Avoid utilizing color alone to convey meaning in your designs if you want them to be usable by these consumers. Using color “as the only visual way of conveying information, suggesting an action, encouraging a reaction, or identifying a visual element” is not recommended, according to the W3C.

Forms are a typical illustration of this. Green and red signals, which indicate success and errors, are frequently used. But for those with color blindness, red & green are the hardest hues to detect. The error messages that state “the fields indicated in red are needed” are probably familiar to you. Even if it doesn’t seem like a huge concern, this error message can be very upsetting for those with a color vision impairment. Instead, designers should use color to emphasize or accentuate what is already seen.

The creator of the following form should include clearer indications, such as “The email address you provided is not valid,” or at the very least, put an indicator close to the problematic area.

Blind people

The Internet’s visually impaired and sighted users rely heavily on images and graphics. Screen readers and other assistive technology are used by the blind to interpret web pages. Images are “read” by screen readers using the alternative text that has been assigned to them. They won’t understand the material as intended if the such text is absent or not sufficiently detailed.

The following rules should be followed when writing text substitutes for images:

• Detailed alternate text is required for every “meaningful” image. (A “meaningful” image gives the material on the page further context.)
• If a picture is just aesthetic and offers the viewer no relevant information, a text replacement is not required.

Keyboard-friendly context

Some users, such as those with motor disabilities, use their keyboard instead of a mouse to browse the Internet. It’s crucial to have keyboard-based navigation available to serve this demographic.

Here are the fundamental guidelines for keyboard usage:

• Verify that the keyboard’s focus is apparent. Because they find it ugly, some site designers delete the keyboard focus indication. This choice makes it more difficult for keyboard users to engage with the page effectively.
• Every interactive component needs to be reachable. All interactive components, not only the principal navigation menus or calls to action, must be accessible to keyboard users.

5. Testing

The next skill you must acquire is testing your website. Even if you adhere to all of the recommendations above for website design, there is no guarantee that your users will find it useful. Since there is no other way to be certain, it is wise to test frequently and early.

Iterative evaluation

Testing is an iterative process, just like every other step of the design cycle. Early on in the design phase, get input, and keep iterating.

Test page loading time 

Users hate slow-loading websites. Response time is so important for modern websites. The Nielsen Norman Group lists three response-time restrictions:

• 0.10 seconds. For users, this feels instant.
• 1 second. The user will feel a minor delay.
• 10 seconds.  Users can exit the website right away.

Of course, we shouldn’t make visitors to our websites wait 10 seconds for anything. However, a delay of even a few seconds might ruin the experience.

What typically results in a lengthy loading period?

• Heavy content items (like embedded video & slideshow widgets); 
• Back-end code that isn’t optimised 
• Hardware-related problems.

Testing A/B

When you’re having trouble deciding between two design options, an A/B test is excellent. This testing strategy involves randomly assigning one of two versions to an equal number of users, then examining the analytics to determine which version successfully achieved your goal.

6. Design Transfer

Creating a functioning solution and prototyping the design are crucial elements in the UX design process. Designers create a specification, which outlines how to code the design, as soon as it is prepared for development. A specification guarantees that the design is carried out by the team in accordance with the original purpose. The transition between the two is called a “handoff.”

Without a proper specification, the website’s developers will either rely on guessing or go back to the designer for clarification on some issues. However, depending on the design’s intricate, creating a specification by hand can be difficult and time-consuming.

Designers may publish a public URL using the design specs tool in Adobe XD so that developers can view flows, take measurements, and replicate styles. The time-consuming process of writing specs to convey positioning, colors, text styles, and fonts to the developer is no longer necessary for designers.

Your product team may use Mockplus Cloud as a single point of truth for all design-related information by exporting assets from XD. Your design systems may be built on the cloud, making it easier for developers and designers to build and reuse design components like patterns and visual motifs.

Conclusion

This advice for site design is only the beginning, of course. For the greatest outcomes, combine these concepts with those of yours. Use analytics and user input to enhance your website experience as a project under development consistently. Also, keep in mind that design is for consumers, not only for designers.