Interactive Web Design Cost Calculator
Published on August 1, 2013 on WebsiteHomework.com by Greg Sidelnikov
This page is designed to help you determine the costs and the amount of time it will take to develop your website. Change various parameters using controls below to determine the costs of your website. This website costs calculator was programmed with the goal to help visitors get "the average" costs required to build various kinds of websites, using some of the most popular features for each "calculator button". The results are based on facts about web design industry and provided to everyone at no cost or obligation. Press buttons on the calculator to add or remove (toggle) that feature. Use the "lower quality" and "higher quality" buttons to adjust the costs.
Note, there are many "do it yourself" websites that offer web design tools, such as template editors (Godaddy, Wix, etc.) that can dramatically reduce the costs associated with building your website. However, these tools are usually limited (for example, as of 8/11/2013, the GoDaddy website builder is free but it is limited only to 5 pages and pre-designed web templates.) You can use website builders to make entire websites to reduce the costs. This calculator assumes working with a live web designer or a company, creating completely custom designs from scratch (HTML code needs to be written by the designer, which takes time that you are paying for.)
Installing Web Cost Calculator On Your Website
First, select the theme for your calcluator:
If you're a web designer, you can install this calculator (and even provide your own buttons and pricing) on your website so that your clients can get a decent idea of how much you would charge for a particular service.
License Requirements. Please do not remove the "Website Homework" logo nor the link at the bottom, when installing the costs calculator on your website. If you really need to do that, please request permission first (firstname.lastname@example.org). Please send a link to your website where you want the web design costs calculator to be installed.
Files and Code Needed To Install Web Costs Calculator
The calculator is distributed as a jQuery plugin. You will need to download a copy of jQuery first, then the calculator plugin. The "generated code" box below will show you how to create a blank HTML page with jQuery and calc plugin included (the minimum code, a blank page with the web costs calculator.) From then on you should be able to figure out how to integrate it into your own web page.
- Download jQuery Library (required)
- Download the Calc jQuery plugin (this is the main calculator code file "wdccalc.js", download it and place it in the same directory with your html file where the calculator is to appear.)
- Copy and paste the code below into a file, for example "calc.html", save it and open it in your browser to test. It assumes "jquery.js" and "wdccalc.js" files (see above for download locations) are already located in the same folder, wherever "calc.html" will be placed. Or, manually modify head script tags (specifically, the src attribute) to point to the correct location of "jquery.js" library and "wdccalc.js" plugin, wherever you placed them on your hard drive or web server.
How does one calculate the cost of quality? Calculating costs of a website can be confusing because different design companies offer different rates based on quality of work. This web design costs calculator provides a fairly accurate calculation of the final price the client should expect from many web design and development companies. Quality meter accurately scales the price of each feature. You can get a medium quality logo for $50 but a logo designed by professional identity designer would cost $500 or so.
Copyright © 2005-2013 by Greg Sidelnikov. All rights reserved.
Subscribe by E-mail to Receive New Tutorials and Articles.
Receive new articles in your inbox. Subscribe for free to the www.learnjquery.org RSS tutorial news feed.
Once subscribed, you will receive an update every time a new tutorial or article is published.
Your e-mail address is kept private and you can unsubscribe at any time.
Please Do Not Copy This Article
This article is copyrighted. If you are interested in reprinting rights please contact the author for permission.
Related Articles in jQuery Section
- Cheat Sheet Printout Diagram: Working With Text Input, Select/Option, Textarea, Radio and Checkbox Elements
- Cheat Sheet Printout Diagram: Loading a PHP Script Using jQuery Ajax Method
- Cheat Sheet Printout Diagram for jQuery Methods: offset, height, innerHeight, outerHeight(true), CSS Transform, Translate, Scale, Rotate.
- Adding jQuery to Your Web Page or Entire Website
- A Free Online jQuery Training Class / Course / Tutorial
- Using Main / Utility "each" Method to Loop through Objects (Arrays, JSON, Object Literal)
- Using "each" to Loop Through a List of Selected Elements