It's easy to jump in when you get a new project. I know I get super excited about experimenting with new colors and playing with different fonts. I can't be the only one!
However, great design is about creating a website that aligns with an overarching strategy.
Trust me, going through a step-by-step will definitely save you time down the road. Not to mention a streamlined process will keep you on track. You'll no longer have to wonder "What's next?"
Before I begin, most of this assumes you're working with a client. However, you can definitely apply it to your own design workflow. I don't know why we cut corners when it comes to designing for ourselves!
1 | Know the purpose
Before you begin, it's important to know what’s the purpose behind the website. Are they looking to generate brand awareness, boost sales for enterprise customers, capture emails from new leads, or educate their audience in some way?
Best way to do this is through a questionnaire. But don’t stop there. Ask questions. Lots of them.
Helpful questions to ask at this stage:
Who is the target audience?
What do they expect to find on this site?
Is the website’s primary focus to inform, to sell, or to amuse?
How is it different from competitors and their sites?
If these questions aren’t all clearly answered in the beginning, the whole project can set off in the wrong direction.
2 | Nail project scope
Notice I didn't put this first. How else will you know what your client needs if you don't collaborate first?
Figure out what needs to be done to reach their goal and create a timeline. Otherwise, things can start piling in and overwhelming your project. This is especially problematic if the client isn't willing to expand the timeline or budget.
The best way to accomplish something big is to approach it in smaller pieces. As the saying goes, you can’t eat an elephant in one bite. Start with the core foundation of the project and build on top. If there’s time at the end for fancy features, that’s great!
An example of a timeline I used for a project in the past:
2 weeks - STRATEGY: Project timeline, brainstorming, research, competitive analysis, collaboration, navigation hierarchy, gathering content
3 weeks - DESIGN: Wireframes, initial mockup design, review, final mockup design, initial usability tests
3 weeks - DEVELOPMENT: Set up Squarespace template, build out all pages, establish form handling, make mobile-responsive, perform cross-browser compatibility tests
2 weeks - REVIEW: Get feedback from several parties, focus on SEO, make any necessary changes before the final launch
2 weeks - LAUNCH: Connect URL to Squarespace site, test to make sure everything is working properly, and then tell everybody about it!
Notice your timeline should be pretty close to your process after this point. It's always a good idea to let your client know roughly where things are at each stage. Never leave them hanging! I've been guilty of ignoring my clients because I've been "too" focused. Don't be like me.
Once you’ve figured the timeline/scope out, send it with a contract outlining what’s expected from both sides. Do this BEFORE you start any work.
3 | Sketch basic wireframe
Whether you use a notepad & pencil or use a wire-framing tool like Balsamiq or Sketch, the important thing is to get the basic layout down. Don't worry about colors and typography at this stage.
Figure out the relationships between the different pages. Figure out what pages will be linked in the main navigation and how to access the pages that aren’t. Sitemaps are particularly helpful here.
4 | Gather content
Often this step will go hand-in-hand with the previous step. Ideally, you would work with real content as early as possible, but sometimes that's just not realistic.
Typically, your client will produce the bulk of the content, but it’s important that you supply them with guidance on what keywords and phrases they should include in the text.
Make sure the content is optimized for keywords that users will search for. Use Google Keyword Planner for help figuring out what keywords are popular. Content that is well-written, informative and keyword-rich gets more easily picked up by search engines.
Also, no super long paragraphs. Period. Think headings, bullet points, short paragraphs. We want people to actually read this stuff.
5 | Build a visual style
Start with a mood-board and a collection of other websites that are similar to the overall look that you're going for. Draw inspiration from good examples on Dribbble and other design sites. Notice I didn’t say steal their designs. Play with colors, typography, and images to set the tone of your site. Keep things timeless with a dose of trendiness.
Side-note: As you build your portfolio, you’ll naturally start to develop a style, whether that is bright and colorful or muted and classy. Often when potential clients reach out, they noticed your style and liked it. Feel free to switch it up every once in a while but for the most part, stick with what works for you.
6 | Do the thing
Yes, you do actually need to make your vision to come to life. You can use a CMS like Wordpress and Squarespace or code your site from scratch.
If you’ve done your homework right, this step should be easy-breezy.
There's a lot more I can say here, but I'll save it for another time.
7 | Test and optimize your website
Once you build your website, you need to make sure it works properly. You can bet your visitors will judge your website if things are broken. Better to fix them now rather than after you’ve lost web traffic.
Thoroughly test each page to make sure all links are working. Make your website loads properly on all devices. Statistics show that the majority of web searches today are by phone. In addition, you’ll want to check how your site looks on different browsers. And no, you can’t pretend IE doesn’t exist (although I wish that were true!)
This is also a good point to figure out what analytics you need to track. Ensure that your call-to-action button is being monitored somehow.
Also, have one last look at the page meta titles and descriptions. Even the order of the words in the meta title can affect how well the page performs on a search engine.
8 | Launch
Once everything has been tested thoroughly, and you’re happy with the site, it’s time to launch!
Have a plan of action for how your client will promote the launch, whether that's through social media, email campaign, or word of mouth.
Remember, your website is never finished. Web design is a fluid and ongoing process that requires constant maintenance. So pull the trigger, but plan on continuing the process of refining and adding new things.
Final thoughts
There will be some overlap between the different phases of your project. But in general, find what works for you and stick with it!