So, you want to build a website. Congratulations!
Now what?
Well, you can’t just slap together a few pages of content, stamp it with your logo, and call it a day.
I mean, technically, you can. But if you want your website to be successful, you need to follow some kind of plan.
That’s where the web design review process comes in.
I know you have lots of questions. What exactly goes into the web design review process? Who do you need to meet with? And where do you even start?
I’m here to answer all those questions for you and show you step-by-step what’s involved in our website design review process at Connective. We have honed this process over the years since our company’s founding and we have confidence in our process. When we’re finished, you’ll have a better idea of what goes on behind the scenes while we work on a website.
Let’s dive right in.
1. Initial project prep
Before we can even get started working on a website, we’re going to have to meet with the stakeholders.
But who exactly are the stakeholders? They could be clients, end users, or any other people who have a vested interest in the final project.
These people are going to have a ton of input in the web design review process because they know what works for them – and what doesn’t.
During this initial meeting, we work together with everyone to outline the scope of the project. This gets everybody on the same page as far as expectations, what the final website is going to look like, and so on.
The assessment process includes:
- Budget, timelines, and due dates for deliverables
- Risks assessments and constraints
- Reviews throughout each stage of the project
- Marketing insights that we can use to make the project better
- Desired customer behavior (what clients want the user to do, such as buying a product)
- Target audience and user persona
It’s really important for everyone to agree on the scope of the project now. When it comes to huge projects, scope creep is a real problem.
What is scope creep? Basically, it’s when clients keep thinking of new things to add and piling on more and more requirements until the design team is buried under a mountain of work they can’t possibly dig out of before the deadline.
“Wouldn’t it be cool if we added this nifty feature?” a client might ask after we’ve already gotten started. “I know it’s going to extend the timeline by three months. But I really want it!”
No. Once the project is underway, we want to avoid scope creep as best we can. We make sure everyone gets their ideas out in the open now so our team isn’t faced with unexpected additions to the project later.
We’ll also discuss what the website should look like at this meeting. It’s important for everyone to agree on this.
Why? Well, if three people want a slick, modern-looking interface and four prefer a more artistic style with lots of bold colors, we’re going to have problems.
Once we’re done with the initial meeting, the project manager can take over.
2. First ticket for the designer
Next, the project manager puts together the first ticket for the designer. This ticket is going to have all the details the designer needs to work on the website.
The ticket includes the key people involved with the project, such as the name of the designer, the art director, and of course, the project manager themselves.
The ticket also includes key dates and deadlines so everybody knows what’s due and by when. For example, there’s going to be a due date for round one, revisions, and so on.
One of the most important things here is the final client-facing due date. That’s when we present all of our work to the client, so everything needs to be ready by then.
In this ticket, the project manager gives the designer size limits to work with. The designer needs these limits so they can make sure their work isn’t too big or too small.
Finally, the ticket includes all the important links to resources for the designer. These links can include:
- Client link to a questionnaire
- Project tracker spreadsheet and sitemap
- Wireframes
- Logo and branding
- Images to consider using
- Kick-off meeting recording
- Folder to upload the design
All of that may sound like a lot, but it’s critical info that helps the designer stay on top of things.
3. Designer meets with the art director
Both the designer and art director are critical to the website-building process. At this point, you might be wondering, “What’s the difference between a designer and an art director?”
Basically, the art director works with the creative team to figure out how to communicate the website’s message visually. They’re in charge of guiding the website’s overall look and feel.
The web designer is part of the creative team. They handle things such as appearance, website layout, and usability.
Before the designer can get started on the first round, they’ll need to meet with the art director. This meeting helps the designer understand the art director’s vision for the way the website is supposed to look.
Designing a website is about much more than picking pretty colors and nice images. During this meeting, the art director and the designer will consider:
- Visual hierarchy
- Movement
- Patterns
- Emphasis
- Balance
- Contrast
- Branding elements
- Fonts and typography
Phew! That’s a lot of elements to consider, I know. If you have no idea what I’m talking about, let me give you a primer on some of the most important parts of web design that we work with.
- Color: Color is a pretty personal choice, but ideally, we want to stick with colors that match the business’s branding. We try not to go crazy with wild colors, like hot pink or neon orange. It’s okay to use these colors, but we don’t want to overwhelm visitors, so we’ll use them sparingly. For best results, we prefer a theme with three to five colors, max.
- Typography: We’ve got hundreds of fonts to choose from, and some of them are really cool! Unfortunately, not every font out there is a good choice for websites. Some sure bets we like to stick with include Montserrat, Open Sans, and Roboto.
- Visual hierarchy: In web design, visual hierarchy tells visitors where to look. If we don’t do this right, users will get confused and not be able to focus on anything. Designers can draw their attention using white space, contrast, images, and larger text.
- Movement and flow: When a visitor lands on any website, they want to see content that flows in a natural, easy-to-understand way. People tend to read in a kind of “F-shaped” pattern, from left to right and top to bottom. Designers arrange elements in this way to go along with the natural visual flow.
4. Designer begins round one
With the information from the art director in hand, the designer is ready to start the first round of the website. A big part of this phase is turning low-fidelity wireframes into high-fidelity ones.
But what are wireframes? Without a wireframe, our team will have no idea what element goes where.
It’s like building a house with no blueprint. We could end up with windows in weird places, rooms that are too small, and stairs that lead to nowhere.
As you can see, coming up with wireframes is a step we simply can’t do without.
What exactly goes into making a wireframe? Here are a few key components:
- Buttons and other key elements: Our wireframe needs to include elements such as a search bar, menus, buttons, and other methods for users to navigate the site. We use the wireframe to tell designers where these things should go.
- Web copy: If possible, we try to include text from actual content instead of a placeholder phrase such as “lorem ipsum.” This allows designers to better visualize flow and whitespace so they can make adjustments as needed.
- Grids: Grids are square and rectangular boxes that help designers keep elements organized on the page. We use them to check spacing and ensure the page won’t look too cluttered.
There’s a big difference between low-fidelity and high-fidelity wireframes, too. Low-fidelity wireframes are really basic, sort of like a rough sketch that tells designers where things need to go. High-fidelity wireframes, on the other hand, usually include actual copies, images, and other visual elements. We rely on both in the web design process.
UX/UI design is important at this stage, as well. UX stands for user experience, and UI means User Interface. UX refers to how the website “feels” when visitors use it. UI refers to things like buttons, icons, and other visual elements visitors use to interact with the site.
UX and UI might seem very similar, but they each require different skill sets. Essentially, the UX designer is the one who plans information architecture and guides the user journey. The UI designer handles mockups, layouts, and the overall aesthetic.
5. Project manager checks for wireframe and UX/UI accuracy
When the designer finishes the first round of their work, they send it over to the project manager. The project manager is going to check to make sure the website meets client needs for wireframes and UX/UI accuracy. If it doesn’t, it goes back to the designer for a revision.
6. Art director review and round two
After the project manager approves the designer’s work, it goes over to the art director, who is going to review it for taste and style. The art director and the project manager compile notes, then send it all back to the designer for round two.
And let me tell you, there’s definitely going to be a round two. No designer is ever going to get their work 100% perfect on the first try. But that’s okay; it doesn’t mean anything is wrong. This is all just part of the process.
Using the notes from the art director and project manager, the designer gets started on round two. When they’re done, they’ll send the work back to the art director, skipping the project manager this time.
This back-and-forth dance continues until finally, everyone is happy.
7. Final steps
Now that we’ve finished all that hard work, the designer sends the website back to the project manager for the final review. At this point, it’s the project manager’s job to put it all together into a presentation for the client.
This step is critical because if the client doesn’t like it, we have to go back to the drawing board. But since we’ve already discussed what the client wants in the initial onboarding meeting, there shouldn’t be any problems here.
If the client approves, we can finally get started with actually building the site. Developers do this using three primary tools: HTML, CSS, and JavaScript.
HTML stands for Hyper-Text Markup Language, and you can think of it as the building blocks of the internet. HTML is different from your average programming language in that it uses tags to annotate or “mark up,” pieces of content on a web page. Developers use HTML to do things like making text bold so it stands out, denoting a new paragraph, and adding image tags.
CSS stands for Cascading Style Sheets. It goes hand-in-hand with HTML to make a website look more appealing. For instance, CSS can change background colors or fonts. Developers can use CSS to apply visual changes to entire pages so they don’t need to make all those changes by hand.
Not only that, but CSS also dictates the size at which web pages will display. Thanks to CSS, a website can automatically adjust to fit any screen, whether it’s a desktop monitor or a phone.
When you hear about JavaScript, you should think of “interaction.” JavaScript controls actions and behaviors that happen when users interact with the website. For example, if a user clicks a button and sees a pop-up message that says “Thanks for your submission,” that’s JavaScript working behind the scenes.
Tying it all together
Now you’ve got a better idea of how our web design review process works at Connective. I know all those steps seem a bit overwhelming, but they’re all necessary for a great final product. We want to give our clients a product they love, and that’s why we’ll never design a website any other way!
