The Website Development Process

  • By Bryan Bailey

The Website Development Process

The website development process can be intimidating if you don't already have a background in computers. So many little parts; any of which can lead to a less than ideal experience for you as the customer. Sure, there's a lot that's involved in designing a website and then expressing that visual design into code. But it doesn't need to be so complicated. I try to simplify as much as the process as humanly possible to where your website is no more difficult to maintain than your facebook.

Step 1: Website Discovery Session

So you've accepted my proposal and agreement has been made. Now what? Where do we start?

All of my projects start in exactly the same way and that is through a discovery session at your place of business or through skype or facetime if you are not local. A discovery session can take as little as an hour or as long as an entire day depending on the scope or complexity of the project.

What I look to establish in this session is:

  1. The visual direction you want your website to take
  2. What a success looks like for Phase One of the project
  3. What your current baseline is, and what we can do to improve it

Features and goals should have already been established in the proposal/quote phase, so we'll run over that again quickly to make sure we're still on course. We will also go over any industry specific knowledge and terminology that we need to be aware of. This helps to keep everyone on the same page as the project progresses.

This is the first building block in starting to build trust and the foundation of a great relationship!

Step 2: Visual Website Research

We'll now start to solidify the visual direction of the website. We've already touched on this during the discovery process. By disqualifying certain design styles at this early stage, we can ensure time isn't wasted exploring a visual direction that was never going to get approve (saving you time and revenue in the process).

Step 3: Wireframe Sketches and User Journey Planning

After planning, discovery and research it's time to start working on the visual logic of your website design to truly bring it to life.

I'll ask myself:

  • What are visitors to the website looking for?
  • Where are site visitors coming from, and what do they know about your business already
  • Who are the visitors to the website?
  • Why should visitors use and trust your website?
  • When in the buying cycle are visitors coming to the website?

Step 4: Mockup & Digital Wireframing

Once the visual and user flow of the website is established, it's time to move on and produce a mockup. This process involves taking the rough wireframing sketches and notes and creating a polished, digital rendering of he site's key pages and user journey. Clients then have to sign off on them before starting the next step in the process.

Step 5: Homepage Design

Once the mockups are approved, it's on to the homepage design itself. Both a desktop and mobile version of the homepage are critical to making your website a success. The purpose of designing the homepage first is to allow a visual style to be established that will then be used throughout the entire website.

Step 6: Other Key Page Design

With the design of the Home page established we move on to other key pages, which tend to include:

  • Pages with a special layout( product pages, checkout pages)
  • Pages with unique functionality (pricing tables, forms, etc)
  • Key identified templates (single blog posts)

In a typical website design project, there will usually be between 10 and 15 pages designed.

Step 7: Revisions and Final Design Sign Off

This is where the design to development shift happens.

  • We identify all website page templates that need built
  • Consider all functionality necessary and conceptualize ideas to implement them
  • Another runthrough of the website style to clear up any issues

Step 8: First Pass Website Build

The first thing done is programming the repeatable and reusable parts of the website

That typically includes:

  • The header design (including navigation)
  • The footer design
  • The main call to action
  • Font and color variables
  • Spacing and margins
  • Post templating

Once the repeatable sections are coded, I tend to code the rest of the home page. At this point a demo will be setup on an AWS server inaccessible to the general public. If the website is account based, you will be able to log in to see what the administrator user flow will look like

Step 9: First Pass Website Build

Once the first pass demo has been signed off on, we can go ahead and finalize the website. We'll keep our momentum going and get the rest of the website finished. At this point, all client content is added into place, and flexible, editable content fields are created. This gives you the ability to change aspects of your website as your business grows. At this stage, we'll assist with setting you up with necessary social media accounts and integrate them into the website.

Step 10: Device Testing

As I design with a mobile first methodology, most device compatibility is great right from the start. I test the website as I build it, but there is a dedicated step in this process explicitly for device testing. At this point, I'm typically testing websites across a range of devices, including:

  • Mobile phones (iphone, android, windows, horizontal and vertical orientations)
  • Tablets
  • Laptops
  • Desktops
  • Internet enabled game consoles (I like to be thorough)

Step 11: Browser & Bug Testing

Device testing then leads to browser and bug testing. What we're looking for when testing on different browsers and devices is:

  • Glitches that break the site
  • Things that don't work
  • Styling that doesn't look quite right
  • Areas for improvement

Step 12: Clients Sign Off

Whew! The hard part is now finished. Once the bugs are all ironed out, and the site has been tested to the ends of the universe and back, I'll seek client sign off. At this point the final invoice is sent and the client gets to see their shiny new website.

Step 13: Moving From Staging to Live

Websites are typically built and tested locally, or on a staging server. If you the client is hosting with us, we'll move their website from the development server to their own live server. If hosting elsewhere, after the final invoice has been paid I will deploy the site to the preferred hosting server and make sure things are up and running.

Step 14: Website Training

Once the site is ready to go, I offer a website training session. In this session, which can be run in-person or through skype/facebook, we'll go over:

  • Website content management
  • Blog management
  • Google analytics usage
  • Occasionally, Google Search Console usage

Conclusion: There And Back Again - A Website Journey

The website design process, as you can see, is quite complex and involved. This is why anyone who quotes you a website price without finding out the parameters and details of what you're looking for is likely not the kind of developer you want to leave in charge of your branding initiative. Your website is a marketing tool that works for you 24/7. Therefore, you need to make sure you are putting your best foot forward at all times. Some websites are that simple; others, not so much, but the process remains the same.

I LOVE programming and building things, and would love to help you get your website right. Get in touch with me if you need help!

Play A Game of Tetris!

↓ - ↑ - ← - ← - a → - ↓

...or click here if you're not quite that nerdy!