Going from Visual to Functional with the Development Process

The Blog

Going from Visual to Functional with the Development Process


In the previous articles for this series we’ve going through a Discovery Session to understand our voice, our audience, and our goals. We’ve also worked through a Branding & Design process to give those things a visual representation. Now it’s up to the smartest people I know to take it to the next level… functional!

The development process always excites me the most because we get to see these concepts come to life.

It can take a while to get there, but spending the necessary time up front to nail discovery and design makes the developers life that much easier.

Let’s walk through the process.

Receive Approved Design Files

Typically the design files that the development team receives are layered, which allows them to grab different elements as necessary.

The opposite of that would be flat files, which is a single image of everything all put together. It’s much harder to isolate individual elements this way (think logos, buttons, icons, etc).

We typically keep an archive of every iteration from the design process in case we need it, but the developers should only be receiving the final approved designs so that there is no confusion.

Once we have these we need the Functional Document before we can start building anything.

Review Approved Functional Document

Along with the design files we need to include the Functional Document.

This can be delivered a number of different ways. (Word Doc, PDF, Online Tool, etc)

Currently we use an online application called Notism that allows us and the customer to make comments on any part of the page design. We use this throughout the design process to get confirmations, uploading the most recent version of each page design as necessary.

By the time it gets to the developers, the final images and comments about specific functionality are available.

After a quick review between the project manager and the developer, they can get started.

Building Pages

There are many different ways to build out a website. I’m not sure if there is a ‘best’ way, but I can give you an idea of how we approach it.

First step is creating a staging environment and fresh WordPress installation (we build all of our websites on the WordPress platform). The developer may also have a local installation to work from, especially in the beginning.

Start with the Home Page.

This will often share the same Header and Footer as the rest of the pages which can then be reused to build out sub-pages.

Depending on the scope of the project, once the Home page has been seen and approved in browser, we will continue building out the rest of the pages.

During this phase the content will been input and formatted throughout the website.

What if we have some additional functionality that isn’t just text and images?

Integrating Custom Functionality

Now that we have our core pages and templates build, we can start integrating anything else that the website needs.

Some examples of that include:

  • E-commerce
  • APIs
  • Case Studies
  • User Portals
  • etc

Websites have the ability now more than ever to be web applications.  We constantly receive requests for new ideas and implementations so the sky is the limit.

Now that we’ve completed building everything, it’s time for testing.

Quality Assurance & Testing

Many hours have now been spent making the new website a reality.

Everyone is really excited to wrap up and let this beast loose on the internet, but wait.

Let’s do some quality assurance first and make sure everything works.

The first thing we want to do is check the website against our Functional Document. Since this document also includes the approved design files, we can match the look and placement of images and elements, with the actual functions of the site.

Once that has been cleared up, we need to thoroughly attempt to break anything custom. End users will always find a way to do it so let’s try to catch it first.

Order products, submit contact forms, log in as a regular user to see what access level looks like, sign up for email lists, etc.

After we’ve done a round of Q/A, it’s time to send it off to the customer for their review.

It’s expected that there will be some revisions to work through.

Once everyone is satisfied with the website, it’s time to take it live!

What’s next?

In the next article we are going to take you through the steps for Deploying the website.

There are some important things to be aware of when doing this to avoid common mistakes.

» More content from:

Bret Phillips

Updated headshots for our updated website

By Bret Phillips - Apr, 05 2018


Launching Your New Website Without Breaking The Internet

By Bret Phillips - Apr, 07 2017


Nailing the Branding and Design Process

By Bret Phillips - Feb, 24 2017

Web Design

Related Posts

A stronger Dragon Army is here.

We’ve been acquired by one of Atlanta’s fastest-growing agencies, Dragon Army. Through this partnership, we are proud to offer expanded capabilities in the areas of web, mobile, content, and branding to better serve our clients and partners. Excited to be a part of the Dragon Army family!

Learn more Got it