What Goes Into the Price of a Web Page?

A single web page is at the heart of any full scale web design proposal, and is a huge cost driver in a proposal. Yet the actually question of “what goes into it” is often times misunderstood or down right left unasked. Most see it as simply as a design on paper. Slap a couple blocks of content in, place some images here and there, and put a unique spin in between them. How hard can it be?

Truth is, it’s not hard. But depending on what you are trying to do (read: achieve) it sometimes takes time. And time is at the root of a web page. It’s the time it takes to not only create the layout, but to strategize and arrive at a viable conclusion. It’s the time not only to convert the design into web-rendering code but account for the editability that is needed, test on browsers / devices, and run quality assurance. Time spent in each layer of a web page drives what the ultimate cost should be. As with anything, cost rates of time may vary and tools of implementation (read: software) may cut out time in certain areas. But there is always a trade-off that as a business you should be knowledge enough about weighing the risk / reward of saving money.

Web Pages are Like Onions

No they are not stinky (and do not make you cry…usually), but they are full of layers. Thinking of a web page in terms of layers helps to showcase the time and tasks that might typically go into each different phase. Each web page has 7 different layers, and depending on the complexity or focus of the scope of the page (or project) may split certain layers into their own unique ones.

How the Layers Break Down

Within each and every web page the below elements apply. The variable is that some can be ‘smushed’ into a quick process or elongated out. Just because the layers exist, however, does not mean that they should be forced to represent a tangible time allocation in each and every project. Some web page designs are just that simple (or are taking shape from other style guides present).

Regardless, we are assuming here a new project with a single web page that needs a little bit of everything in moderation. The time estimates below are strictly that (estimates) but come from experience in what a typical client would need to meet expectations.

Strategy & Planning

Read: Setting up team roles and communications as well as looking at competitors, inspiration and assets that a client may provide.

The most underrated (in terms of value a client typically identifies for this layer), Strategy & Planning lumps project management, client discovery, and strategy going forward into one. This starts as setting up each person’s role within the project, how we are expecting to communicate (and to whom), and a schedule of timeline with client needs identified. Beyond the planning comes the discovery of a client. This includes having the team understand who the client is and what they do as well as reviewing client assets, inspiration / notes given and a competitor analysis. Fulfilling these steps leads to the actually strategy formulation. It helps to beg the question “what are we building and why” and “what needs to be achieved to make this successful”. It takes these core questions and starts to formulate a creative direction in the designers mind to take to the following application phases.

Time: 3-5 hours

Content Mapping

Read: Flushing out sections or exact content you are putting on the web page.

This layer identifies what we are actually designing. More often than not this is the part that clients forget to really think about. It is regularly assumed that the content will be generated after they see the design. So, there is a chicken and egg conundrum that oftentimes leads in meeting in the middle and helping at least address sections (if not full content) that the client envisions putting on the web page.

Time: 1 hour

Wireframing

Read: Rough outlining sections and elements that will exist on the page with simple design cues.

This layer takes all the discovery, strategy and information from above and begins to form rough layout concepts. Wireframing requires taking content mapping and creatively laying it out in simple lines and shapes. This can be hand sketched or done digitally, but it forms the foundation for how the high fidelity mockup will take shape. Wireframing allows for the easy duplication and re-configuring of ideas within layouts that then are whittled down to one or two best fits.

Time: 1-2 hours

Digitization

Read: Taking the conceptualizations and wireframes and converting them into high fidelity digital design mockups.

This takes the wireframed ideas and puts digital design to them. Typically in Illustrator or Photoshop this applies the chosen color palette, type, proposed photographic style, and any icons or illustrations to the web page layout. At the end of design application this is delivered to the client as a ‘high fidelity mockup’ to review. The more digital designs provided, the more time spent in this layer.

Time: 2-3 hours

Front-End Development

Read: Turning the digital designs into code that show as a web page. This now includes tablet / mobile (aka responsive).

This takes the design and converts it to static HTML, CSS and JavaScript. It is called ‘front-end’ because once completed it literally is the digital design in a web page format (read: the front-facing page that the public sees). This includes responsive development which allows the page to be altered for different device breakpoints. There are two main ways to achieve this: custom media queries and frameworks. Not digging deep in the depths of those differences here, but the surface difference is that custom media queries requires a developer to personally break down to each breakpoint and decide how he / she wants the page to look versus a framework which does it by ‘default’.

Time: 3-4 hours

Back-End Development

Read: Making the web page editable by an administrator logging in to a CMS and / or developing out specific features & functions of the site not related to the front-end.

Probably the least thought about when it comes to web page design, but of course the most important in terms of execution. This is the choosing and applying of a CMS (content management system) to the web page and any features / functions that might follow. The CMS (read: WordPress, Drupal, Joomla, Shopify, Magento, etc.) will allow the user to edit the information on the page, delete and add sections. Because we are assuming this as a simple web page application the features would typically be no more than a form, a tracking script and perhaps another outside software code snippet. The back-end development phase looks to handle these features (such as form submissions) and make sure that they are programmed to deliver to an email and potentially be archived in the CMS.

Time: 1-2 hours

Testing & QA

Read: Reviewing the developed pages on browsers (Chrome, Firefox, IE, etc.) and devices (iOS, Android, Phone, Tablet, etc.) and ensuring that it looks the same across all mediums.

Once the page is done being ‘developed’ (read: front and back-end complete) it needs to be tested. While almost everything a developer on the web page project has implemented should be based on best practice experiences, it is still necessary to view the web page on all different device types and browsers. Often times little inconsistencies such as spacing discrepancies, misalignments or other little bugs pop up when viewing it between the browsers and devices. This player helps to correct those so there is a consistent viewers experience. This layer can easily be skipped; however, it may lead to the client themselves just getting frustrated about little ‘bugs’ here and there.

Time: 1 hour

Feedback & Revisioning

Read: Gathering client feedback and implementing in where it differs from the approved digital designs.

This layer is the most variable depending on the depth of review and responses that a client may give. The primary goal is to confirm that the client is happy with how the page looks and to go over what the approved design was. Beyond that it is to gather any changes (against what was approved) the client has now that they can see it as a web page.

Time: The Great Unknown

Why the Big Difference, Greg?

So why do seemingly similar agencies charge different prices? While there is a totally different discussion on value pricing / pricing models to be had, the general reasoning is because it’s rarely just about the design of the web page. For starters, companies put vastly different weights on timing expectations based on past experience. So even in a single one-page example (as close to a vacuum-type experiment as possible) there will be variances of individual agencies that put more time into strategy versus design versus development and so on.

As the project gets more complex or has more ‘pieces’ that variable compounds and is more about pricing in terms of timing for features, functions and non-design elements than the actual completion of design. Something as simple seeming as content migration from your site to the new site could be factored in for 100 hours (or $10,000).

Bringing it All Home

One thing to remember is that there will always be optional variations to the above. One example in particular is if you choose a company to select a theme for you. Let’s say the company you are working with suggests a WordPress theme that they will help you customize and you agree to it. You approve the theme and get started. This helps to roll up layers into each other. For example you would no longer need the Wireframe, Digitization, Front-End Development or Back-End Development phases. Your project would include the following layers*: Strategy & Planning, Content Mapping, Testing & QA, Feedback and Revisioning.

This would potentially save a ton of time spent in individual layers, and therefore money. But with anything there are trade-offs that must be considered.

*There would be a small portion in there for theme installation, etc. but it is negligible in the totality of this discussion.

A little underwhelming of course if you are looking for a whole website, but as you scale up the number of designs and the complexities of the project time allocations change. For example if you were designing ten web pages just like the one above it would (or should) not take 120-180 hours. There would be cost / time savings across the board as you are able to reap efficiencies.

Putting all of this together you have a web page…a SINGLE web page for around $1,000 to $1,500. This assumes a $100 / hr rate and is honestly on the very conservative side in estimating. It might sound like a lot but the truth in costing comes at the time spent doing it and the rate you are agreeing to. If you want to save on costs, find ways to cut out time or lessen the rate. As they always say, “you get what you pay for” and in terms of a web page it is simply time (amount of hours) and experience (the rate).