The 10 Step Process of a Custom Website Design
January 20, 2012
By: Drew Meyers
Posted in: Website Creation Process
I don’t really know what the process is for designing a custom website…can you give me a brief overview?
I get this question fairly often, so thought I’d answer it here with a blog post.
Step 1: Determine Scope of Website
Are you looking for a custom designed WordPress blog? A totally custom website built from scratch with advanced functionality? Is your site just a content site? Do you need to give your users the ability to purchase goods or services directly from your site? Do you need separate calls to action depending on what type of content your users are looking at? Need custom page layouts for specific types of content (like product pages)? All of those questions go into determining the scope of your website creation or redesign.
Step 2: Quote
Once the scope of the website is determined, a website design shop should be able to give you a quote as to what it will cost you. And you can either accept or reject that proposal, or try to negotiate. Some development shops are cheaper than others — just keep in mind, you get what you pay for in terms of quality. The good ones are not going to negotiate much on price, as they already have a full plate of sites to build.
Step 3: Contract Signed and Deposit Paid
Once you agree on price, the next step is to sign a basic contract and then pay your initial deposit. Generally, a design firm will not put your site in the design queue or do anything else until the initial deposit (generally 50% of total) is paid.
Step 4: Goals and Wireframe
Prior to starting the actual design work, your goals need to be incorporated into a wireframe. A wireframe serves as an outline for a designer to design a website around — it includes rough placements of all content, calls to action, images, ads, etc to be included in your new website. You know your business better than anyone — it’s up to you to know what you want visitors on your website to do, and relay those goals to your project manager. The project manager you work with is generally the person that will wireframe a site prior to the design process. Your desired user actions will be incorporated into the wireframe. Here’s an example wireframe I completed for the redesign my personal blog.
Step 5: Client Design Direction
Before even beginning to think about how to design a custom website, the first step is always get direction from the client. This includes several pieces of information. First, it’s always a huge help for a designer to know several other websites that a client likes. Do you like reds and yellows? Or blues and greens? Even if it’s only components of a site such as the header, the more information, the better so that the design suits your design tastes from the start (rather than taking 5 revisions to get close to what you like). For instance, some people HATE black websites. Facts like that are help. A designer is flying blind if they try to design a site from scratch without knowing the clients’ design tastes.
Step 6: Wireframe is Turned into a Working Design File
Once the wireframe is approved by you, the client, the next step is to send the wireframe to a real designer to work their magic and create an image of exactly what the proposed website will look like. As an example, here’s the first design file for my personal blog redesign.
Step 7: Design file Produced by Designer and Client Feedback Incorporated
Once the initial design file is completed, it’ll be sent to you as an image. It’s up to you to provide feedback in terms of what you want changed — colors, functionality, artwork, etc. Once you provide a list of suggestions, then the designer will take another stab at the design. This process will repeat until you are 100% satisfied with the design. Nothing is coded prior to design approval being given by the client.
NOTE: Good design firms will fight you on some of your suggestions if they don’t think it will help you accomplish your desired user action. TRUST THEM. They know how to build successful websites better than you do. I’ve seen many clients f*ck up their own websites by demanding changes that shouldn’t be made. Don’t be that person.
Step 8: Design files turned into code (and a working, clickable WordPress theme)
Remember, NOTHING is coded until you give 100% approval of the design process. For a fairly basic WordPress blog design, allow roughly two weeks of development time.
Step 9: Change Requests
It gets really expensive from a development perspective to make changes after the site is already coded to the design that was produced. It’s one thing to give a developer a design file, send him away to code it all in one go — it’s another thing entirely to trade emails and phone calls back and forth with a developer continually tweaking minor components of the site. Changes AFTER design approval are certainly possible — after all, you need to be happy with your website — but are generally billed at $100-$200 per hour. So changes can get really expensive, really quickly.
Step 10: Pay, and Go Live!!
Once you are happy with the way the website appears on the development server, it’s time to go live. But, before you can go live, you need to pay the final deposit on the website (generally 50%). This is when the development firm you work with will put the new site on your current domain. To do this, you name servers will have to be changed if you are going to host with the design company who built your site, or they will need to be given access to your current hosting account if you wish to remain with the same host. If the latter, there may be a separate charge to implement the site on another host (since a development shop may not be familiar with that particular hosts’ system).
And that’s a wrap! If you have any questions, leave them in the comments or email me at drew at esmexecdesigns dot com.
**Photo via e-foreknowledge.co.uk