Website Design Process, An Insider's Look

Whether you’re redesigning a site or starting one from scratch, it’s essential to follow a structured website design process to make it as valuable and effective for your customer while helping you achieve your business goals.

We’ve outlined a series of steps that we recommend following and are part of our internal website design process.

1. Start With the User
2. Information Architecture
3. Layout
4. Visual Design
5. Copy
6. Accessibility

Start with the User

As per usual, an effective website design process starts by listening to your users.

You want to discover their information requirements and balance them with what your business is trying to communicate. The intersection between these two fields will be the keystone piece that will articulate the rest of the site’s information.

You can uncover that information by conducting user interviews, reviewing existing research data, and looking at analytics data in the case of existing sites.

Information Architecture

Information architecture in the context of a website design process refers to what content you present and how. It defines the structure of all the sections and pages on the site and the relation between them.

Card Sorting

Card sorting is a great exercise to help you shape your site’s information architecture. It’s an exercise in which you assign individual pieces of information to sticky notes that you can order into buckets representing sections or pages in your site.

The card sorting methodology makes it easy to balance the critical pieces of information with supporting content. It helps you quickly organize the data based on priority, length, and category.

The Inverted Pyramid

We’ve talked about how designers use the inverted pyramid as part of their website design process repertoire of tools. (Check this article: SaaS Dashboard UX: Trends, Guidelines, & Fundamentals)

The inverted pyramid is a journalistic technique to prioritize information. It organizes data into three blocks:

The lead is the key information that’s most likely to grab your user’s interest. It conveys the main message succinctly.

The body It’s the main content of the page and comprises most of the page’s information. It includes images, explanations, quotes, facts, and figures.

The tail It supplements the body with extra information such as further readings, related articles, sources, and links to background stories.

The key to using the inverted pyramid is to identify the information that’s more likely to grab the user’s attention and to use it as the lead. Once you capture their interest, develop the central idea by providing more details on the body.

The inverted pyramid is a great tool to optimize conversions and page views. It’s also very respectful of the visitor’s time.

Wireframes

After defining the information architecture, it’s time to think about the layout and content distribution through wireframes.

A wireframe is an essential step in every website design process. We can define it as a map that shows each element’s placement and size on every page. It’s an initial draft of how you will distribute the information across the site once it’s complete.

Wireframes are typically low-fidelity representations of the future state of your website. You want to start with a low-fidelity diagram because it allows you to define content placement a bit further and make changes if necessary.

Ideally, you want to wireframe every page of your website and see how the information flows from one page to the next. That’s going to help you see the entire website from a bird’s eye view.

Screen Flows

Screen flows are combinations of wireframes and user flows representing the direction in which the user would navigate through the site. They are an additional but constructive step to ensure there are no gaps in the experience.

Now that we have defined the content, layout, and user flow, it’s time to add the final layer of fidelity in the website design process: the visual design.

Visual Design

The visual design is quite literally the visible part of the experience. It’s what the user interacts with, and it’s no surprise that so many people refer to this layer as “the design.”

We can define the visual design as a high-fidelity representation of your site. It comprises the aesthetics and all the elements that the user will interact with when navigating the site.

We like to think of visual design as a combination of components in a system. Hence the term design system. We wrote an article that addresses the most common questions around design systems for SaaS products here: Design Systems For SaaS Products: Everything You Need To Know

If you have an existing set of branding guidelines, you may apply them to the design system. If you are starting from scratch or intend to do a re-brand, you might want to create a list of all the components that your site will need.

When creating new components, follow a hierarchical structure that allows simple elements that you can combine into more complex organisms.

This approach is known as Atomic Design, and its main advantage is the possibility to tweak or replace specific pieces without affecting large parts of the design.

Accessibility

Last but not least, we have accessibility. Accessibility refers to ensuring your site can be used by as many people as possible.

Some of the most important factors when designing for accessibility are

• Legibility
• Contrast Ratio
• Clear Language
• Alt Text
• Semantic HTML
• Interaction

If you want to learn more about accessibility, consider visiting The A11Y Project.

While accessibility usually refers to making sure you account for sensory impairment, It’s also important to highlight that device compatibility plays a significant role in determining whether most people can access your site.

For instance, have you considered what your site would look like if rendered on the browser of an Amazon Kindle? What about supporting extra-large displays such as TVs? These are questions that you should consider when working on the accessibility of your site.

Conclusion

Designing a good site is a matter of following a structured website design process such as the one we outlined here. That will enable you to present your site’s content in a pleasant and informative way for your users.

Follow this website design process guidelines to make sure your site is as good as it can be.