Web Design

Our Web Design Process (with Gifs)

date posted

04/23/18

read time

5 Mins

Untitled-5

We create amazing websites – that are built to be powerful and effective, based visually on telling the story of what makes you special. Using our many years of marketing, psychology, testing and analytics we have learned more and more about what actually works in inspiring action on our clients websites, and so that knowledge goes into the layout and implementation of your website.

We also pride ourselves on making websites that are editable by non-technical people, that are mobile friendly so people can access your site anywhere, and attractive for search engines like Google.

Web Design Process

We thought we’d share with you the overall web design process so that you can have some idea of what working with us would be like! That being said, newer web designers or other people in our industry might find this process interesting as well – with some of the same process phases most designers have, but some nuances I’m sure that might be more original to us.

Intro: The Sales Process

We clarify the main functionality of the needed site, and details of the engagement.

We love sitting down with prospects and finding out all about what sets them apart from their competitors – and what people find compelling about them. We do jump into the details like what the timeline needs to be for getting the site launched, budget, and if we really feel like we can make a client money. We try not to take on projects we aren’t sure we can make wildly successful.

1. The Discovery Process

We create an on-boarding document all about what makes you special

In this phase we document all of the competitive advantages, visual elements we can showcase to help people trust you, and other key items that help us layout the ideal website for your situation. This usually consists of a long meeting and a workshop like approach so that we get everything out on the table, understand your business, your key goals and what we want people to do on the site.

2. Wireframing

Blocking out the main layout in a low-fi (hand drawn) way

Often referred to as ‘information architecture’, wire-framing allows us to get the main blocking done without spending a bunch of time on the fancy visual elements or get lost in the weeds of details in the design.

3. Visual Design – feedback and iteration

Designing in Photoshop / Illustrator

Now that the key pieces are generally laid out – we can add some substance, some frills, and some visual style to the bare bones of the layout we’ve created. This is when the computer gets involved, and where the awesome Photoshop and Illustrator skills start to take-over and make magic. I tend to think of it as one of the most important steps, because even when coded – the site reflects these styles closely. We try to incorporate the things we know about SEO into the visual design phase, which makes our process a little bit more appropriate for clients who care about Google traffic on their website.

4. Web Development / Coding

Coding using WordPress, HTML, CSS, PHP, Javascript to make a real functioning website

In this process there’s the front end design (HTML, CSS, Javascript) of the site, and then PHP / WordPress / Database… which handles the ability for us to give the client access to edit content and images without knowing code. We create this to reflect the design, but this is the real thing – the design was only a picture of how we wanted it to look – towards the end of this process it starts to be a little more exciting, because it’s real.

5. Quality Assurance

We go through the site and make sure everything is working, you do as well to make sure it’s how you want it.

Not everything is perfect on the first run, but we try to allow time to work out the kinks in the development site, so it’s launched in a way you and our company can be proud of. We test on different devices and browsers – and have you look through it, and give feedback as well, while we clean up any miscellaneous things that are harder to account for in a mockup / photoshop context.

Banner Text: "Complimentary Website Audit: Unlock Your Winning Strategy"  
Bold Text: "Claim Yours Now"  
Note with Arrow: "Exclusively for Home Service Companies"  

Background: Dark with a subtle pattern.

6. Launch

We make the site live, soft launch, then a more celebratory launch (ideally with a champagne pop!)

We have done this at a work site of a construction company – at the fancy Artful Living office, at all kinds of businesses, and at our office as well. We just like having that moment of completion, because the world of websites often doesn’t seem to have a beginning or an end. This is good because we’re always improving, but we like to celebrate the wins along the way!

Optional: Drive traffic

We set your site up for SEO from the start, but the more ongoing aspects of SEO we can also handle if you want.

We definitely teach our prospects and clients as much as we can about Search Engine Optimization as we can, but many opt for having us handle the ongoing work. From creating content, to getting links from around the web back to your site, and reporting on traffic and conversions monthly – we’re well equipped to drive meaningful traffic that increases revenue. This is of course optional, but we love doing this for clients because it’s such a huge part of what constitutes success online.

Thanks for reading about our web design process – if we can be of service to you, let us know!

Learn How To Do Google Local Service Ads Yourself (Free DIY Course)

Want to know how to start getting Local Service Ads leads on your own?

🎥 3 original videos designed to help you get started on LSA Ads.

🔥 Get the ‘Google Guaranteed’ badge to use in other marketing as well.

📈 Only pay per lead, and start getting more leads soon!

Is there you or someone on your team that would like to take it? Enter their info (or yours) below!

Ready to take the leap?

“We know what it takes to help get home service businesses more leads with Google. Even if we’re not the right fit, we’ll get you where you need to go.”

A woman with long, wavy brown hair stands confidently in front of a black brick wall, embodying Tim Brown's iconic urban style. She wears a black top and accessorizes with a heart pendant gold necklace.
- Sydnee Olsen, Sales Lead
Schedule Intro Call Schedule a Free 20-Minute Consultation (No Obligation)