The Process Of Web Design: From Discovery to Prototype

In honor of Photoshop's 25th Anniversary, I want to discuss the wonderful process of web design. There are many talented hands that go into making awesome websites, but for this post I will focus on the designer’s role in the web design process– from the discovery phase all the way up to awesomely interactive prototypes. Buckle your seatbelt!

Many people don’t realize how many steps are involved in the process of web design. When designing a website, a designer is starting from a blank slate – err page. And there is more to web design than just opening Photoshop and adding a few well-placed text boxes and images.
Even the best designers can fail if they skip over the early important steps.

So, let’s take a journey through the art of designing badass, user-friendly, websites.

Discovery

First, you can’t design a website if you don’t know who the client is, what their goals are, and who their target audience is. If you’ve already started designing and you haven’t figured this out yet, you’re already failing. Scrap that design and start over – the right way.

It’s important to understand the client’s business, their industry, what they’re selling, and who they’re selling it to. I like to call this the “Information Gathering Phase” because that’s your goal in this stage of the game. It is meant to gather as much information about the client and their audience as possible, so you can make clear, informed decisions later and tailor to their specific needs.

Some questions that are typically asked during Discovery:

• What is the business?
• What are you selling?
• What are you trying to achieve?
• What are the business goals?
• What are the website goals?
• Who are the target users?
• What do the users want from the website? *Please, don’t forget this step. User experience is essential.
• Who are the competitors?

Getting the answers to these questions will help create a strong base for all of the design decisions that follow.

Brand Visualization

Whether the website is for a new or existing company, I still find that it is important to visualize the brand and what their future website will be. Once, you’ve gathered the brand assets (logo, brand guidelines, etc.) you will use them in conjunction with the information gathered in the discovery phase to create a mood board.

What is a mood board?

Mood boards are a great way to convey design ideas, gather inspiration, and visualize the basic concept of a project. Many times it’s easier to convey big design ideas visually instead of verbally, and mood boards are generally a great way to convey a variety of concepts. You examine the client feedback and information from the discovery phase and use that to help create a visual language.

One popular tool used for creating mood boards is Pinterest or Evernote (yes, you can use pinterest for more than fashion and interior decorating.) It’s also a great curation tool for web designers!

Rough Sketches

Rough sketches on paper are very helpful when visualizing a basic layout. In this stage, designers typically do many quick, rough sketches to get ideas out really fast. Because of this, some designers choose to not even show these sketches to the client. That’s what wireframes are for. But we’ll get there later...

Sketches are created without over-thinking or over-analyzing. There are many advantages to this. It’s a quick way to generate a number of ideas and skipping this step can limit those ideas. Sketching with a pencil or pen (or a sharpie, if you’re feeling bold!) is SO much faster than using a computer to create it.

Using a computer makes you want to spend a lot of time making things perfectly aligned, making sure your boxes are the same size, and making sure your type is kerned. Ahhh! You get caught up in minor things that take a lot of time and it can cloud the creative process. Sketching can take seconds on paper vs hours in Illustrator or Photoshop.

Sketching = more ideas in less time. It’s easier, and faster, to eliminate bad ideas and focus on refining good ones.

Plus, there’s something about a pen on paper that just helps ideas flow better. And it can be done on the go. I’m guilty of sketching ideas on napkins or random scraps of paper. Experiment at this stage and go crazy! You’ll weed out the bad ones and narrow down the good ones in the next step.

Wireframes

We’re finally at the wireframing stage! Once you decide which sketches would be better suited for the website, you wireframe them. I find it easier to select about 2-3 sketches to wireframe. This is the stage where you show a more refined appearance of your sketches.

Wireframes separate concepts from details. They’re supposed to look unfinished. It helps to not get too caught up on details.

I like to think of wireframes as a blueprint. In this stage, you will think about sizing, placement, information hierarchy, and of course User Experience. It’s also important to determine your grid, which is a structured method of laying out elements and organizing the flow of information. This is especially useful when working on responsive websites.

It’s also useful to understand how the user will interact with the site, so you can add in menu states or button behaviors. You can even move from white and black boxes and lines, to more refined grayscale elements and text, which can help to determine the visual strength of the elements.
There are a number of tools you can use. Some designers use Illustrator. I like to use Balsamiq. It’s much faster and has a collection of ready-made assets I can add to the document.

Mockups

Now, it’s time for some real eye-candy. In this stage, you will start designing in Photoshop, and adding colors typefaces, images, etc. Mockups are static, realistic design representations that show as close as possible how the final site will look. This is where clients can really start to see their website come alive.

If you don’t have the copy and images yet use Lorem Ipsum and placeholder photos that represent the look & feel of the final images.
Please remember that the User Experience is important, so think about the user. User testing could be really helpful during this stage. It’s a lot easier to make changes in the mockup phase than the development phase.

Prototypes

Prototypes take mockups one step further. Some designers stop at mockups, but if you want to show a little more functionality or animation, prototypes are the way to go. Prototypes are especially helpful for responsive websites. They can help define how elements change at different screen sizes, add in movement, and add interaction. It’s also awesome for testing user flow!

There are a number of tools you can use like Invision and Marvel. You upload static mockups and add hotspots that will transform them into interactive prototypes, with transitions and animations to show how users will interact with the site. It’s a great way to show how the website will work on desktop, tablet, and mobile devices. HTML prototypes are also popular, using frameworks like Bootstrap and Foundation.

The Web Design Process is a lengthy one, but following each step is crucial. I know it’s tempting to go straight to mockups and prototypes, but so many things can get left behind this way. It’s important to make design decisions based on the client, the users, and the research. Otherwise, it’s just arbitrary design. Yeah, sure it may look pretty. But does it work?