website design

What Should A Typical Website Design Process Look Like?

“I was talking to a potential client about their new website and it made me think of all future clients, this one is for you” 

Our future potential client has a business website already created in another state. The owner of the company asked the web developer to build their new business website for their recently expanded Florida business. The team reached out to our company because they are in a tough situation without new clients and without prospects. The contact told me, we are going to see the new website in its completed format this Friday! After 2 months of waiting for something….. 

I gasped……I could see the anxst/concern/trepidation in her eyes…..I’m writing this for her/you. 

What Should A Typical Web Design Process Be With My Web Person I Hire? 

When you hire a company to build your website, there is a universal website design process that most reputable web development companies follow to support you, our clients. Most reputable companies will follow a similar set of process.

Style and Branding Meeting 

In order for anyone to design your new website with your specific brand in mind, we must interview you to understand what colors are preferred for your business. Understanding your specific fonts, types of imagery, tone, likes, dislikes, example websites, important functionality needs, and general direction for your new website are all necessary elements to gather at the beginning of the website development process to ensure the construction of all website visual elements are ‘on-brand’. On-brand is simply interal marketing jargon for ensuring your marketing materials capture the breath and the voice of your company through design elements. 

Sitemap 

Once we possess a better understanding of your design pallet, we will begin developing the architecture, page structure or bone structure of your website. Laying out the main heading pages referred to the ‘top level navigation’ pages, then identifying which sub pages will be included often referred to as ‘interior pages’ is the next step in your website design process. Each of your top level navigation pages such as; Home, About Us, Contact Us, Services, Shop, or Products, are all designed differently with a different look and feel. The sub or interior pages, will look like each correlating navigation page. As an example, all of your service pages will have a similar design as your main navigation service page. Once you approve your sitemap, you will start to see your website come to life.

Wireframe 

A wireframe is a blueprint drawing of all top-level navigation or variation pages that have different designs. The wireframe images look much like a blueprint of a house, but a blueprint of your website. It will typically be a black & white raw sketch of boxes, squares, triangles, and raw elements just to show you a really raw & rudimental layout of your website pages that contain different designs. There would be a wireframe for the home page, a different wireframe for the about us page, and a different wireframe for the contact us page. A low fidelity wireframe may be used in client relationships where the client is experienced working with several website designs so elements like the placement of their phone number may simply have the 999-999-9999 in as a placeholder. 

Clients that do not have as much experience with web development relationships may receive a high-fidelity wireframe which will show more specific and client specific elements whereas they would see the placement of their phone number with their actual phone number. The wireframe simply provides the raw overview of ‘placement of website elements on the page’, not the exact content that will be used. As an example you’ll see where a video will be placed, or where the banners will be placed but you won’t see the finished video or completed banners just yet. The wireframe is typically added with custom website or larger website projects and is typically not used in smaller or more templated web design projects. 

Visual Concept

In smaller or templated website projects many companies move directly to the visual concept stage after the sitemap is approved by their client. In custom websites or larger website projects, the visual concept will follow the wireframing stage. In this stage you will see for the first time, a graphic design image of all of your top-level navigation variation pages. Here is where you’ll see your colors, fonts, imagery, videography, and placement of website elements start coming to life. 

By this time, all of your website content should be turned in to your developer which includes all necessary page content, videos, images, sound bytes and graphics you specifically would like to include in your new website design. Your website specific content will start to be included but will not be exclusively added during this stage as there may be elements missing your website developer needs. It’s also important to mention during this stage your focus should be on the overall look and feel of the website, not worrying about links that are not working, or things that are not ‘clickable’. Remember your website is in development and not currently ‘live’. Many things are still not completed so many parts of the functionality will still not work at this time. Focus on the look and feel of each page you see. Do you like the layout? The color scheme, the typography, the sizes of the images, videos, placement of the content, videos, images, etc. 

Mock Up 

This is the 5th and final stage of your website design and development. The mock up is the stage where all of your content is inserted and the latin placeholder content is removed. Your specific website banner(s) are added, videos, images, written text, soundbytes and other contextual content is added. Once the mock up is complete your website will be mostly a completed website and ready to ‘go live’. Your website is still not live at this point so your external page links may not be working. Here is the time you’ll want to look at all of your images, your written text, your videos, sound bytes, etc, to make sure you are satisfied with them to go live.This is the stage for simple image swapping, simple content exchanging, and simple video replacement. This is not the stage for a major structural change on the website or for new pages to be added, or pages to be taken away. This is the stage for 1 last punch list of simple edits to be made and then your website is ready to push live.

Go Live 

This is the point where your website moves from a staging or development environment to the live server on the internet. Your website developer will point your domain name of your website (example: www.apple.com) to the newly migrated website that is now live on a server. They’ll make sure all of the internal page links and external page links are working, your social media profiles are linked, your contact lead form is working and your mobile website is looking as it should on all devices. They’ll also ensure your email is working properly after the website goes live. It’s important to note, there may be some downtime in the switch over from your old website to your new website. That downtime is typically only a few moments, but could take up to approximately 2 hours. 

Why Causes My Website Design Process To Fail? 

  • *Most web development relationships only allow a client to provide 1-round of revisions per-each-stage of the web design process. 
    • One round of revisions for the sitemap, one round for the wireframe, one round for the visual concept and one round for the mock up. Some clients provide feedback in dribs-and-drabs, and some do not take the process seriously so they wait until the very end to provide any feedback. This not only causes massive project delays but you could be in a situation where you are in breach of contract, out-of-scope and owe your web development company much more money as a result of your actions. 
  • *You did not deliver what you promised to deliver on time to your web developer. 
    • It is extremely common for clients to want to save money during the website design process and complete some of the work on their own such as writing their own web page content. In 9 out of 10 situations clients say they will write their own content ,however, do not write the content. In many of these cases, they do not turn it in on time, or at all, and they do not deliver other elements such as videos, images or sound bites in time to complete the website mockup. This failure to uphold your end of the contract also causes massive project delays and additional resources expended by the web development company. In many cases this brings the web development project to an immediate halt. 
  • *The client does not provide real or tangible feedback during each stage of the website process and waits until the end of the line to take things seriously with feedback. 
    • When someone spends time, energy and resources to help you and your business, you should take that seriously and show the same respect in return to provide real and tangible feedback. Saying things like “I hate this, this is horrible, this sucks, this is ugly, are not helpful points of feedback and do not move the project forward towards a resolution”. Also, if you wait until the end of the development process to take it seriously and start ‘looking to provide feedback’ you could be providing feedback that was due 1-3 stages past in the development process, which may subject you to additional charges and cause significant project completion delays. 
  • *The client ghosts to avoid making payments on the bill. 
    • Some clients ghost their vendor when the last payment is due to kick-the-can-down-the-road and avoid paying the final website paymentl. This only hurts you in the long run because the site you have online now is failing, if you even have one active at all. It’s already not helping you convert leads, built sales, transact sales, or support your businesses functionality. By playing games you are not only in breach of contract but hurting you, your family and your business.

More About Website Developement

The website design process involves collaborative brainstorming sessions, wireframing, and iterative design iterations to create a user-friendly and visually appealing online presence. From conceptualizing the layout and structure to selecting color schemes and typography, every step of the website design process is meticulously crafted to deliver an immersive and engaging user experience. Through a blend of creativity, user research, and technical expertise, the website design process transforms ideas into interactive digital platforms that captivate audiences and achieve business objectives.

About The Author

The AD Leaf Marketing Firm The AD Leaf Marketing Firm