It doesn’t matter if you’re part of an accomplished agency, a corporate team, or a solopreneur working with trusted freelancers.
Eventually, we’re all faced with a blank page that needs to be populated.
But the good news is that you can make things easier on yourself with a comprehensive design process.
What does that process look like? Keep reading to find out.
Why Should You Care About Web Design Workflow?
If you’ve ever worked on web design, this question is easy to answer. Despite all the best intentions, the design process breaks down over the course of a few simple decisions if there isn’t a consistent workflow.
And there’s a good reason for this. A well-built website is much more than just the sum of its parts. A design workflow serves to align the goals of all the stakeholders and helps everyone work in the same direction.
Without it, it’s easy for elements of your site design to start pulling in divergent directions. Ultimately, a good workflow allows you to reconcile aesthetics and functionality in a way that results in effective web design.
Web Design Workflow Step-By-Step
So the bad news is you need a comprehensive workflow to manage your tasks and work efficiently. The good news is we’ve laid out the basic steps for you in this guide.
1. Set Expectations, Goals, and Objectives
It should go without saying that you need to identify what your stakeholders want to achieve before you can begin. It can be an entirely new project or simple maintenance, but you have to start by establishing the goals.
Unfortunately, your responsibility will often go beyond passively listening. Often, you’ll need to guide the conversation in a way that leads to what you need to know.
This is a good place to bring project management tools into the equation, such as Trello, Asana, or Monday. These will help you keep information organized and easily accessible.
In practice, this usually takes the form of a kick-off meeting. In this foundational meeting, you want to ask the right questions to set up the design workflow.
Questions like:
- What are the business goals or needs that the website will serve?
- How does the website fit into the overall brand?
- Who is the website for?
- What is the timeline for your process?
- If there is a website in place already, why does it need a redesign?
Think of more questions to fill in any knowledge gaps you have. Better yet, read this guide to figure out what you’ll need and then start building your questionnaire.
2. Establish Clear Boundaries
Hang around with web designers long enough and you’re sure to hear a phrase spoken with distinct disdain.
Scope creep.
Too often, you’ll come away from a kick-off meeting with the feeling that everything was laid out nicely and everyone’s on the same page. And then as you get to work, the scope of the project expands and before you know it the wheels are coming off.
If the expanding scope of the project is matched by expanding budgets and timelines, that’s not an issue. But it typically doesn’t work out that way.
The solution is to clearly break down your tasks and establish a clear timeline for each.
You can do this by listing out the steps you need to complete and use a Gantt chart to visualize it. A Gantt chart is a simple visual breakdown of tasks over a period of time.
And, of course, if you’re working for a client, it makes sense to put everything in writing. A contract that outlines the timeline and expectations of the project can be invaluable in preventing scope creep.
3. Put Together Your Site’s Architecture
Now that everything’s in proverbial black and white, you can get to work on the site.
At this point, it’s worth noting that many of the following steps will happen concurrently or flow into one another at times. That’s not a huge issue, as long as it doesn’t affect the integrity of your design workflow.
The basic structure to start the design process is a site map. Using the information gained in the previous two steps, design a site map that advances the stated goals of the project and remains easy to use and understand by visitors.
Something as simple as a pen and paper sketch of the site map is a good place to start. Sketch boxes for each web page and start working down into subcategories. You can also use free tools, such as GlooMaps, to create a more refined site map and share it with your team.
Then, you can use your sitemap to start the wireframing process. Wireframing refers to creating the skeletal framework of a website to determine a site’s content needs and hierarchy.
You should also use it to identify any potential navigation and usability issues on different devices. Wireframing is a key factor in the process of creating responsive sites.
As you work, make sure you’re leaving behind proper documentation. If you ever hand off the site to another team or to an end-user, it will be a crucial tool to maintain your design’s integrity.
Keeping this documentation will also provide the basis to optimize your own web design process.
4. Create Your Content and Design
With your wireframes in hand, you can start assigning content-creation tasks.
Some teams choose to break up content creation and design into two distinct steps. That’s a good idea if you’re shorthanded or you want team members to work independently.
However, it’s often a good idea to pair the two.
Creating valuable content and pairing it with the right creative assets usually works better as an interdependent activity. Ideally, your content will take into account all the relevant SEO elements, as well. To accomplish that, you’ll need to pair excellent content with exceptional design.
In this step, you have the widest choice of tools.
Google Docs is as good a place as any to start creating and sharing content. If you choose to build a website using WordPress instead of a custom CMS, SEO tools, such as Yoast, will reliably help you make that content SEO-friendly.
As far as visual elements go, the classics won’t let you down. Photoshop and Illustrator are still Industry standards. And the newly-released Adobe XD shows a lot of potential for streamlining the entire UI/UX design process.
5. Develop and Test
Now, put it all together.
Map your content onto your wireframes.
If you’re using a content management system, this process is not overly technical. WordPress is the most popular to the point that it’s almost synonymous with CMS. Unless you have specific needs, such as ecommerce, it’s probably your best bet.
Once the site is developed and all the content is ready to be viewed, you have one more step to go before launch.
Testing.
All the content should be reviewed in full and all the functionalities of your site tested. A commonly used tool for this is SEO Spider. It compiles all the typical auditing tasks into one tool and it will save you a lot of time.
6. Release it Into the World and See What Happens
Is the site ready to see the light of day? There’s only one way to find out.
Launch it and hope for the best. Almost certainly, you’ll run into trouble from the start. Hopefully, though, it’s only minor setbacks that you can fix easily.
But the initial launch is only the start of your site’s journey.
Remember, your goal was never to just launch a site but to meet a business goal. Through continuous testing and analytics, you’ll start to see if that comes true over time.
And don’t expect the site to be great from the start. In most cases, you’ll need to update content and features until it starts to align with user expectations.
Best Practices to Master Your Web Design Process
To make your web design process consistent and repeatable, stick to these best practices:
1. Start With a Strong Sense of Branding
When you design a website, you need to remember that it’s going to be a part of a larger design ecosystem. The colors, composition, typography, formatting, etc. should all respond to this larger brand message.
Whenever possible, start with an in-depth understanding of the brand before you design the website. It will help eliminate mistakes from the standpoint of brand consistency.
2. Don’t Stray Too Far from Convention
At this point in our relationship with all things internet, there are certain reliable use patterns that most people follow. Things like expecting a logo in the top left and a menu on the right, knowing what a hamburger button does, and other such factors.
Leverage these heuristics to make your process easier and faster. There’s no need to reinvent what works. Instead, leverage it to support your design vision and execution.
3. Underpromise and Overdeliver
It goes without saying that you should always make sure you meet the conditions of the project charter. However, it’s almost always a good idea to go above and beyond what’s in writing.
Often, stakeholders won’t be aware of the ongoing process that it will take to reach the goals they set out for their website. It’s a good idea to help guide them in a way that leads to results rather than to just clock out when the site launches.
Conclusion
This is a bird’s eye view of the design workflow. Every new project will bring its own challenges, but with a tried-and-true process, you’ll be ready for them.
Think of your web design workflow as an ongoing process. Every site you design will teach you something new about your team and about the process itself.
Make sure you continue to apply what you learn and continuously build a better workflow.
Author bio:
Max Benz is a marketing manager at Filestage and loves creating amazing websites. Apart from that, he’s building a German remote job board, remote-job.net.
