Vox Digital’s Website Design Process
Hey there! Today we’re going to outline an awesome website design process that we ourselves follow to make sure the websites we build are perfect and following all industry standards.
Step 1: Brainstorming
Sitemap / Wireframing
This is the step where we decide which pages will be going on the site. We outline all of the pages we want and display them in a hierarchical list. We also start to mockup what the pages will look like on paper and in photoshop/sketch. During this process, we would be asking questions such as:
- What does your business do?
- Who are your competitors?
- What is the goal of the website?
- What is your budget?
- Who is going to be visiting the website?
Photoshop / Sketch Mockups
Now we take those rough sketches and ideas and move them into a design program like photoshop or sketch. This is where we are able to design all of the elements of the website exactly how they will be displayed on the website. This includes things like the branding elements of the page (colors, fonts, and logos.) As well as specific design elements like the padding and margins.
Step 2: Content
Content has never been more important in online marketing strategies. Content will make or break your website. During this process, you should be generating content that fits into the placeholders that are added to the design mockups. The stuff that says’s “Lorem Ipsum” – Strategically including keywords that you would like to rank for within the content will also be beneficial. The creation of high-quality content is extremely important.
Step 3: Development
This is when the development of the website starts. Duh! This process is pretty straight forward and includes a ton of HTML, Javascript, PHP, and SQL Queries usually. We usually share a development URL with our clients where they can view the progress. This is definitely the longest and most tedious part of the process. You need to make sure you’re developing a high-quality website that follows industry standards.
Step 4: Add Tracking
In order to track how well your website is performing, you’re going to need to integrate some sort of tracking. The most popular form being Google Analytics. This will help you determine what’s working and what’s not. Make sure you set up goal tracking to measure your conversions. Other popular forms of tracking include Facebook Analytics, Heatmap tracking with Hotjar, and other various forms of online tracking.
Step 5: Website Audit
Now that the website is in a good spot, we can go ahead and perform a full website audit. This includes checking for things like spelling and grammar, placeholder text, image optimization, and technical code improvements. We will also do basic optimizations for SEO, and depending on whether or not the client is signed up for an SEO campaign we will do more in-depth customization to the website.
Step 6: Client Review and Revisions
Thought we were over? Nope. Now the client comes into the picture and starts explaining exactly what they like and dislike about the website. We usually let them have 2 revisions before we go live. These revisions can be as big as they would like (within project scope) – We just don’t like a bunch of random revisions in 50+ unorganized emails. We’ve been there too many times. You would think that because we went over the website in the design process that there wouldn’t be a need for revisions. We used to think that too. We all thought wrong. People are constantly changing their minds, and that’s awesome! The creative process always includes a few unknowns. Nothing wrong with that!
Step 7: Breathe
Phew! That was a lot. Now it’s time to sit back and celebrate your accomplishments. Moving forward you’re going to want to be checking things like Google Search Console, Google Analytics, Facebook Analytics, and any other marketing platform / CRM you may have integrated into the website. Check stats like Impressions, CTR (Click Through Rate), Bounce Rate to make sure your marketing efforts are paying off. This is a never-ending game, and things are always changing in this space. We are constantly keeping up to date with industry-related blogs, influencers, and our own proven formula. We will be continually updating this blog ensuring all of the information is up to date.
Thanks for reading! If you’re looking for some help with your project, take a look at the services we offer here:
Calgary Website Design Services,
Search Engine Optimization
Social Media Marketing
Facebook Advertising
And feel free to shoot us a call at (403) 473-4847
Vox Digital
Vox Digital is a Calgary website design and digital marketing agency. This is our blog where you can find tons of free marketing resources! If you're interested in anything we do, feel free to contact us today!
Awesome guide. Loving the last step haha! This is pretty much my workflow down to a T. Good job!
Awesome! Thanks Luke. Glad you enjoyed the post!
🙌 🚀
Is Sketch available for Windows? Looks like the website only has a download for Mac.
Mac only! I use Photoshop for mockups on PC. If I need to create a really crazy mockup with animations then I use Sketch.