The 6 Stages of Web Design: What You Need to Know Before Starting a Website Design Project

You finally made the decision to redesign your website, but—due to no one’s particular fault—you are now being pulled into a vortex of chaos. You know that at the end of the adventure you will have an awesome new website, but all the points in-between are kind of fuzzy.

Let’s add some much-needed clarity.

A special note: This article is intended for all the non-designers, non–developers and non–web gurus out there. The normal people who are diving, perhaps reluctantly or with anxiety, head-first into their first web design project.

A Snapshot of “Our Web Design Process” from Oneupweb on Vimeo.

1. Discovery: What’s the Deal?

Every web design project begins with research.

Your entire team will work together to develop a web design strategy.
Your entire team will work together to develop a web design strategy

We—your entire digital team—want to know all about your brand, who you are, and what your needs are. We need to know about who your customers are, what they need from you, how they are using your current website, and what their pain points are.

We will ask a lot of questions. We will dig down deep. And when we come up for air, we will know you and your business in ways better than your mother.

This stage begins at the first touch point and extends well into the other stages of the web design process.

Common Elements of the Discovery Stage:

Brand and Market Research

Market research is the overarching practice of gathering information about your market and customers for the intent of gaining insight or supporting decision making.  Having a deep understanding of your customer and market allow us to develop audience segmentation, which helps us to build user personas. This segmentation helps us identify different groups of purchasers in a market in order to target specific products and services for each group or segment.

Market Research helps to support digital campaigns with insights into triggers that influence our target audiences for the purposes of guiding strategy. Companies that have a clear understanding of the needs of their customers are more effective at communicating the right message through the right channel.

Market research informs brand strategy, communications planning and content creation as it relates to overall strategic marketing. Market research examines key demographics, usage patterns, attitudes, behavior and purchase triggers and drivers. Market research also tests messaging concepts to determine the best ways to communicate and market to the end user. Understanding how users respond to brand messages helps to develop messaging that elicits desired business outcomes.

User Experience (UX) Audits

This report breaks down your website’s current navigation, ease of use and aesthetic, dissecting it and measuring it against best practices, current trends, your target audience’s needs, competitor websites and more. From this report, a list of improvements can be identified.

Eye Tracking Studies
Eye Tracking study example
An eye tracking study can give insight into what pain points your audience is experiencing when they visit your website.

Performed either as part of a greater UX audit or on its own, an eye tracking study takes a sample of real users and places them in a controlled environment with special eye tracking cameras that watch how they use your website, what they look at, and for how long. This type of study can show exactly what moment a user becomes confused or frustrated, and often leads to insights that cannot be gathered by survey alone.

User Persona Development

A user persona is a distillation of key demographic and socioeconomic target audience information into a facsimile character that can be used to weigh key decisions against. Often we will pretend that the persona created is an actual user. We will ask questions such as, “Will Sara like this?” or “Is this the button Jim will click?” User personas are easier to use than hard demographic data because they, in essence, trick the brain into thinking that “Sara” is a real person to accommodate.

2. Planning: Where Do We Need to Go?

During the planning phase, a team of designers, SEO specialists, developers and UX experts work together with you to decide on how many pages will be needed, how the navigation will function, where content will go, and what the framework of individual webpage templates will be.

Also during this stage much of the methods to develop and technology used to create the website will be chosen. This means selecting an appropriate Content Management System (CMS) such as WordPress or Magento, deciding on any special animations or transition effects such as the use of parallax and HTML 5 animations.

With good planning, your website will be able to grow with your business or organization and stand up to real-world use for an extended period of time.

What you will be presented with during this stage:

Sitemaps
A sitemap shows the hierarchy and organization of your website
A sitemap shows the hierarchy and organization of your website

A sitemap is a diagram that shows the exact structure of your entire website, and includes where individual pages live within that structure. For example: it would show that the “Our History” page should live within the “About Us” section of the website and that the “Widget-o-Matic” product page shouldlive under “Our Products.”

A good sitemap is a collaborative effort between your design team and your SEO team. It is important for your SEO team to review site architecture and how navigation is labeled. This isn’t to suggest that the SEO team will want to stuff keywords throughout your navigation, but they want to make sure search engines will have context too.

Without a logical sitemap your growing website might quickly unravel into chaos.

Wireframes

If a sitemap is the blueprint of a website then wireframes are the foundation and framing-in of the house. The goal of a wireframe is to establish information hierarchy on the page as well as what elements belong and where they should go.

wirefameing process shot
The process of wireframeing often starts with pen and paper before moving to the computer

Often a website redesign brings the desire to “simplify,” but if organic traffic is part of your digital strategy, make sure your wireframes indicate on-page elements like headings, images, copy, etc. This will help achieve a harmonious balance that will keep your users happy and give search engines the ability to index your website so your users can find it.

3. Design: Going There

Now that the blueprint and framing of the house is complete it is time to paint walls, install fixtures, and roll out carpets.

The design stage, often viewed as the most exciting phase of the web design process, is where all the planning and strategizing come together.

To start, a design team will typically create 2-3 different mockups of the homepage based on a previously established wireframe, for you to choose from. These designs can be vastly different, and may appeal to your target audience in different ways. Once a design direction is selected, other key templates will be mocked up and made ready for development.

What you might see during this phase:

Static Mockups
example of building a static mockup
Static mockups of websites usually are buillt in a graphics program such as Photoshop

Static mockups are essentially “photographs” of how the website will look. They may be presented as .jpgs or PDFs. Often, if the website is intended to be responsive, separate static mockups showing how the page will look on various devices, such as a phone or tablet are created. Along with this, snapshots of various interactions may be created, such as how a button will look as a user hovers over it or what will happen when a user clicks on an item in the navigation.

For more on responsive design, download our free white paper: Responsive Design: Adapting to Your Mobile Audience.

Dynamic Mockups

Dynamic mockups go a step beyond the static mockups and begin to incorporate basic front-end development into the website design. Pages are created using development techniques to show how the website will look in the browser window (ex. Firefox). If the website design is intended to be responsive, the page will flex and move as the browser window is resized. It is important to note that a dynamic mockup is not a fully functioning webpage.

Design Assets

“Design assets” is sort of a catch-all term for all the bits and pieces of the site: images, icons, page banners, specialty layouts, text effects and a lot more.

Once created, design assets are incorporated into the development of the website. For example, a series of icons may be created in order to depict all of the services or products your company offers. Once the icons are approved, the design and development team will implement these “design assets” on the website.

Website Guide

A website guide is like a brand guide or style guide, but is specific to your new website. It outlines how pages should look and the basic information needed to replicate the styles used for future designer and content creators.  It should include what fonts, colors, images and button styles are used on the website, as well as how to use them. It may also include rules on what type of images to use and in what tone the copy should be written. A website guide should work in conjunction with your brand guidelines to keep quality and brand consistency high.

4. Development: Going There, Part II

Now that the look and feel of the website have been established, it’s time to make your website real.

Typically the homepage of the website will be developed first. Then a series of internal templates housing all the different forms of content on your site is developed. For many websites this also means implementing a content management system (CMS) and building in back-end functionality that will make the website easy to maintain in the future.

Bits and pieces:

Templates Developed
process shot of a developer
Developers convert the design mockups into a living breathing website

Templates are like a desk organizer—they give you a place to put all of your content. Typical templates for a website may include gallery pages, popups, blog pages, article pages, interactive maps, results pages, FAQ pages and more. Depending on the size of your project, there may be only a couple or 10+ different templates created for your content. (What templates are needed is typically decided upon during the planning process.)

301 Redirects

Often old and outdated webpages will be removed as part of the web redesign process. It is important to redirect users and search engines, to the new pages so that they don’t land on a 404 page (page not found).

Content & SEO Implementation

It’s best not to “tack” SEO on at the end of a site redesign, so make sure to bring in your SEO team during architecture, functionality and content discussions. If your SEO team is authoring copy, then make sure there is a strategy for reusing, redirecting and writing optimized copy before content migration begins.

Content Migration

In a redesign, it’s important to move existing content from an old site to the new website and to make sure that it fits within the new flow and hierarchy of the site. Not all or even most content will be migrated from the previous website. The decision to remove, consolidate or add brand-new updated content is typically decided upon during the planning stage’s sitemapping process.

 

5. Testing & Launch: Does It Work? / Hitting the Button

Before a website can be uploaded and released into the wild, it needs to be thoroughly tested. How else can we ensure that everything is working correctly? Nobody likes a broken website, especially a new website.

website testing process shot
The completed website is tested on a variety of devices

Here, multiple people will look at individual pages making sure that everything is as it should be. They will test the website in all the major browsers—Safari, Chrome, Firefox and Internet Explorer. Responsive websites will be tested at multiple sizes and on multiple devices—tablets, iPhones, Android phones, etc. They will go though each user scenario, filling out forms and making sure that everything works right.

The SEO team will check your server response codes, indexing, and will build an XML sitemap as well as implement a variety of SEO best practices.

And once everything is ready, the testing is complete, the content is placed, the tracking and analytic codes are in—everything is put together and in its rightful place—the website will be unleashed on the world, uploaded to the server, and…and…IT’S ALIVE!

Congratulations! But, we’re not done yet.

6. Management & Maintenance: Feeding the Beast & Improving Performance

The web design process is a closed cycle. There is no endpoint. If you want people coming back to your website over and over and over again, your website must remain fresh. It must remain relevant. It must remain in tip-top working order.

Yeah, it can be a lot of work. But doing it right means happier customers and more business for you.

web design cyclt
A look at the entire web design process

 

Onward and Upward:

CMS Training

If you are going to manage your website, make sure you know all the ins and outs of your chosen CMS. This meaning either teaching yourself through the many online sources that exist or bringing in your design/development team to consult with you over the finer points of managing your content in the best way possible.

Vigilance!

You should regularly test how your website works on multiple browsers and devices. You never know when an update might put your website in a twist. Make sure you know about and fix any issues before your users notice and go to another website instead of yours.

Asset Creation

As your website grows and changes you will need to have new design content. This could mean building new banners for your homepage or simply finding and purchasing the right stock photography for a new page.

Content Creation

Along with periodically updating new design assets you will need new content of your website. For many businesses the easiest way to incorporate and build content on your site is to have a well-designed, and well-maintained blog. Regular posting of quality blog content will keep your users up to date on all the latest industry news and events, and keep your site looking and feeling vital.

 

And, that’s all folks! Mostly…

The process of designing and building a top-notch website can be a lot of work, but with the right team and good planning, your website can be a star player in your industry.

Want to know more about website design and what we can do for you? Let’s chat!

Have a question about the web design process, leave a comment below.