When I first started out as a web designer (not very long ago, mind you) one of the things I was most frustrated with was not being able to do anything. I took online courses that taught me about coding and about color theory and whether you should include sandwich icons in your responsible nav menu, but I didn’t know what a web design process for a project really looked like. I had no idea where to start or what marked completion.
I ended up getting an entry level job at an agency and I learned a ton about how to and how not to run a web design project and what a bad web design process looked like. The most important thing is to keep your web design process fluid and flexible for each client. Everyone is different and each project flows in its own way. However, you need to figure out some critical checkpoints in your system to cover all your bases and keep your system intact.
For everyone out there who is just starting out, or maybe you’re building a quick Squarespace website and you don’t know where to begin, take a look at my web design process.
This is the beginning. The first thing you’d want to do is submit a proposal in writing of the project. This gives the client an idea of what they will be getting for the amount of money you’re asking. You can spend this time tweaking expectations, services, and pricing as you both see fit. Once you agree on the proposal, get your contract signed, send your invoice, and recieve your deposit. You should never start working until you get your deposit!
If you’re designing on your own, write yourself a proposal that includes everything you’ll need to include on the site and how much you’ll need to spend. (Remember to include the price of domain names, hosting, email automation, etc.)
Send a welcome email to your client and anyone else on the team. Explain what the expectations are, the best ways to contact you and when, and any other information you need to share. This is a good opportunity to share any forms of questionaires you need them to fill out to help you start designing. Also in the welcome email you can schedule a kick-off meeting to go over the questioniare and answer any questions on either side. You also need to collect e-commerce information and SEO requirements here. Check out my web design questioniare for some examples of great questions to ask.
On your end, you should take this time to schedule any payment reminders and checkpoints for the project. Once you get your questionnaire back and have your questions answered, you’re ready to go!
Pre-Build Design Phase
The next phase is, in my opinion, the most fun. This is where you take teh information your client gave you and translate it into something real.
The first thing I do is build a sitemap of each page on the site, which pages are nested inside other pages, etc. From that, create a black and white wireframe of each of the site pages. You’ll want to get this approved before moving on. You can use the wireframe to request content. With a specific idea of how much content you need and where, you can provide your client with a list on what type of page copy you need on each page, how many photos you need, etc.
I like to provide my clients with a document or link to an article on how to write good page copy and SEO best practices for content. I don’t always send the same one; do some research and find some resources you like, especially if you’re writing the content yourself.
Now I come up with a color palette that matches the clients needs and wants. I’ll build a mockup of the website from the wireframe and include the colors from the palette. I’ll get this approved by the client before moving on to the next phase.
I will purcahse hosting and the domain name and set up my environment. I use WordPress and host on GoDaddy, so this is the time where I create a development database, install WordPress and install my theme. Tip: If you are using WordPress, make sure you discourage search engines from indexing the site!
This is most people’s favorite part. Build each page according to how you had them mapped out in the mockup. Upload and insert your content, proofread everything, add your logos and favion, and design your blog layout. This is probably the most straightforward phase but can take the longest amount of time depending on the size of the site.
Since I use WordPress, I use Woocommerce integrated with PayPal for my ecommerce sites. I highly recommend it as it flows in seamlessly with the rest of the site and is easy to teach clients to use.
SEO Integration Phase
You should be thinking about SEO the entire way. But if you’re just getting used to using SEO, you can go back near the end and double check that you’ve got everything down. Instead of going into full detail here about on-page SEO best practices, check out my blog post on improving your on-page SEO in an afternoon.
Post-Design Steps and Testing
Make sure that before you move on to this phase, you get the overal design appoved by the client. Let them know that you’ve not done any testing yet. It doesn’t make sense to test and perfect everything if the client will want you to make big changes anyway.
Spend this time to add all the final touches. Add social media integrations and feeds. Test all your forms, test all the links (yes, manually go in and click on everything), and test the site on every machine and browser that you can. Fix any discrepancies or broken elements. Get friends and family to test for you to make sure the user experience on teh site is flawles. You can use a site like Heap to analyze how testers use and interact with the site – and it’s free!
You’re almost done!
The site is live! Traffic is flowing in! Your web design workflow was a success, but it’s not over! Schedule a training session where you can teach your client how to use their new website. Link them to any other services you provide that they might be able to use. Then, schedule a 1 month follow up call and a 6 month follow up call. There’s no better feeling than hearing your client say “I’m so glad you called! I love the site but I want to add something… can you do that?”
I advise you to test a third time after training before sending an invoice. You never want a client to reply to an invoice by saying “the site isn’t even working right!” Once you’re paid and everything is roses, add their site to your portfolio and your social media. Brag about all the hard work you’ve done and how great it turned out![/vc_column_text]
Build Your Own Web Design Workflow
No one process is THE BEST. But you can look at this web design workflow and make tweaks to fit your needs, your own clients, and your own preferences.