6 Phases of the Web Design Process

Andrew Tuzson – Founder / CEO

I have been approached by countless types of businesses and entrepreneurs to help them build the perfect website. The common quote could be summarized as “we are serious about our growth and we know a rock solid website will help make that happen.”

Successful web design is much more than identifying colors and fonts, or throwing a few stock images into a prebuilt theme – in fact, that is one issue with my industry and the focus of an upcoming article, but I digress. Successful web design employs a methodical approach that ensures the vision, mission, passion, differentiating factor, and story of the company or entity are successfully presented to the user in an easy to use manner. Did your repressed OCD perk up when you heard methodical? Mine too. I want to share 6 phases of the web design process that will help you increase the over efficiency of your development efforts and final product. Whether you are working on your website in-house or you are a freelance web designer, these methods ring true.

Phase 1: Information Gathering

Paul J. Meyer said “Productivity is never an accident. It is always the result of a commitment to excellence, intelligent planning, and focused effort.” The prolific legend, Ron Swanson also said, “Never half-ass two things, whole-ass one thing.” Man, he is spot on. Consider this – if you work in an industry with a steep learning curve and you have been tasked with developing the content for your website, you must write the content in a way that the newbie can understand. When people get confused, they bail and that’s a bad thing in the world of the web.

Your information gathering stage is arguably the most important phase of your web design efforts. You must consider your website’s goals, purpose, target audience, cadence, and content. Understanding what types of people will be accessing your website and what you want them to do once you have their attention is crucial to developing a solid user experience.

Phase 2: Conceptualization

Fellow OCS brains of the world, unite! This is one of my favorite phases of the web development process. In this phase the skeletal composition of the website starts to take shape by using the information gathered from phase one. A sitemap is a list of the primary topics areas of the website. If you can also include the sub-topics, that will save you the frustrations of the unforeseen.

This is also the ideal phase to identify which CMS (content management system) your website is best suited for. The battle royal of the CMS is a topic that we will be covering in a separate article, but the most common CMS platforms include WordPress and Drupal. #wixaintacms

Phase 3: Design

This phase seems obvious, but the design phase is when the web design process starts to visually come together. Because an ample amount of due diligence was applied during phases one and two, the web design team now understands who the website should be built for, its purpose, and cadence. This needs to drive the overall look and feel of the site. If you are a life insurance agent in Omaha, Nebraska focusing on the baby boomers, your site will look DRASTICALLY different than a life insurance agent from Miami who is focusing on term insurance for the Millennials.

This phase is where the website layout, look and feel, color schemes, and user interface start to take shape in a conceptualized format. Think of this phase as building a web design blueprint or roadmap. At Evol, we build these out as static images. They contain placeholder copy and they are geared to showcase the overall layout and approach to the site. This is clutch, as this will save you a copious amount of time once you are cranking in phase 4.

Phase 4: Development

NERDS ASSEMBLE! We are ready to shift our web design efforts into the development process. We have our research data. We know our overall structure of the site. We have an understanding of the overall look and feel. Now, it’s time to embrace practical application and code the hell out of this thing.

Typically, this process is achieved by developing the home page and an interior page “shell.” I say shell, as consistency needs to be maintained throughout the subpages, but content drives functionality. Because of this, web designers need to be flexible and adaptable. On a technical front, successful web design efforts require an understanding of front-end web development processes. Your web designer needs to understand writing valid HTML and CSS, CMS management, responsive web design, web standards, user experience, and more. Don’t fret, you’ll have the chance to test their chops in our next phase.

Phase 5: Testing and Delivery

If you hire someone to develop your website and beta testing is not a step in their process, employ the iconic wisdom of Monty Python and “run away!” Your site might look pretty, but your developer needs to take the time to break it. What I mean is, your website must be tested across multiple devices, as websites behave differently on your phone versus your laptop. The website needs to be analyzed using different operating systems and browsers.

A solid testing approach will track the steps of the actions taken in an attempt to create bugs or issues within the site. This will allow the development team to dig through the code to identify what went wrong during the user’s experience and more importantly, fix it.

Once tested, the site is ready for delivery. There any many paths a website can traverse from this crossroads. The most common include digital marketing efforts. However, one vital element is Phase 6.

Phase 6: Maintenance

One of the top ways of creating repeat visitors for your site is to constantly develop and publish new content. Whether this is blog page or a news feed, people want to engage with new content. It’s safe to say that most web designers and developers would be happy to work with you on an ongoing basis to help you achieve this demand for new content.

Maintenance also needs to include the updating of your CMS (content management system) and any third parties code libraries or plugins that were employed during the web design process. Many websites should be regularly backed up in the event of a bug being introduced into he code base and it is ideal to have a developer in your arsenal to help lead the charge if the site goes down.

In summary, efficient web design is much more than grabbing some slick pics from the internets and piecing together accidental gold. Solid web development is a methodical process that needs to embrace every phase of the process. Additional phases exist, depending on the scope of the project, but these six are the most commonly used in today’s design world. Happy designing!