Approved Design Model for Web Development

Regardless of the “build methodology” that is being adopted, I am a big believer in getting the design approved prior to the start of development. When I look at websites’ conversion metrics, I find websites do convert higher with a well thought out design.  I wrote this blog post for the audience of web development and marketing agencies but many of these same principals will apply internally to a company or the DIY individual (not recommended)

Design Will Dictate Website Functionality

In most cases the design will dictate the functionality of the website. Therefore, the vision of the designer can provide the road-map to what type of functionality will be required in the development phase. It is important to have the person / entities responsible for development review the design before it is sent to the “end client” for approval. This can prevent any headaches from getting a design approved that can be problematic in development.  

Designing Even When Using a Premium Theme

Even when using a premium WordPress theme such as Divi or Avada, an approved design can give the process a much more professional experience. The designer should be familiar with any natural limitations of the theme they are designing for. In some cases, the theme may not support the design. There should be full transparency when picking a theme VS. a custom design. This is due to the design requests from the client that may not be easily achievable within the theme.  

Showcasing the Design for Approval

One mistake I see being made is when the marketing / web design agency sends over the design in a way it will not naturally render for the end user. To circumvent this issue, we started in 2012 sending back the design for approval wrapped in a few lines of HTML. This allows the person(s) responsible for approval to view the website as it should render on a desktop / laptop.     

Process to Showcase a Design Using This Method
1) Obtain working FTP credentials
2) Create a folder structure that make sense (example: / designs/website-name/)
3) Name / upload an exported JPG files (recommended size: 1920px width)
4) Edit the HTML / PHP file(s) to account for image length / JPG names (see highlighted code)
5) Name / Upload the HTML / PHP file(s)
6) Test the link

Sample code to display a design
Product of the above sample code

Mobile Designs or Bootstrap / Theme?

I go back and forth on whether to request mobile designs or let “bootstrap” or the theme naturally account for how the design will display. This decision depends on a number of factors. The primary factor is budget. To clarify, a lower budget client that does not have enough in its budget for the extra design hours might have to live with how the website naturally displays. However, this is with the assumption that the bootstrap framework / theme naturally “makes sense” and will only require a few design edits. The framework, CMS and / or theme will guide this decision.


Getting a design approved prior to the start of development will provide more structure to your project. This will help to control edits as the project is in development. Even when a premium theme is being used, the extra time spent in design will be saved in development. Contact me with any questions you might have.      

Visit Us
Follow Me