Here are some tips on how to design a website.
This tutorial will take you through the basics of client management, design theory, and design process. Hopefully, when we are all done, you will be able to design a usable website from scratch as well as manage your client’s expectations reasonably well.
Today’s section is outlined below:
1. What you need
2. Planning your design
- a. Setting client expectations
- b. Setting up your scope
- c. Design planning with your client
- d. Identifying your build method
- e. Sketching and wire-framing
Please note, all sections of this tutorial have to do with design only, and will not include any coding. We will go over how to build certain areas for quick and efficient coding, but for the most part we will be working on methods and in Photoshop. I will probably do a future tutorial set on building the code as well.
Section 1: What you need (Your Design Tools)
For Design
- – mouse, keyboard, you know… probably something relatively fast. It needs to be able to run a graphics editing program. I strongly recommend Adobe Photoshop. It has a learning curve, but is so powerful that you can create just about anything you can imagine.
- – see above.
For Coding (future tutorial)
- – this will be for editing html/css code. I use Adobe Dreamweaver, but if you don’t like it or can’t afford it, there are a lot of other free or much cheaper options. PHP Designer is a great option as well. However, if you want to be really hardcore, you can just use notepad.
- – this allows you to upload your website to a server. I recommend filezilla, it is an open-source, free program. You can get it for free here: www.filezilla-project.org
- – this is a place to put your website. For small websites that will not get much traffic, I recommend using https://www.godaddy.com as your server. For large-scale projects, J House Media uses Rackspace (www.rackspace.com).
- – Internet Explorer 6 and 7, Firefox 2 and 3, Safari, and Google Chrome. These are for testing your website. I recommend using the debug bar for both IE 6 and 7.
- –Firebug and Web Developer Toolbar. Don’t forget about these. They are really, really useful.
Section 2: Planning your Design
Setting up client expectations
Congratulations! You just signed a new client. Now it’s time to start building that website right? Wrong. Before going any further, you have to set up the business agreement and make sure you and your client are on the same page. This means both of your expectations need to meet up in these areas: what the scope covers, how much it costs, and when it will be finished. I recommend an accounting class for anyone who is trying to manage this solo. If you are working by yourself on a project, I would also recommend setting up equally divided payment milestones in conjuction with project deliverables:
- 1. Upfront payment usually upon delivery of the scope.
- 2. Payment upon delivery of site concept.
- 3. Payment upon delivery of site storyboards.
- 4. Payment upon delivery of CSS and Coding.
- 5. Payment upon delivery of programming or delivery of all functionality in the site.
- 6. Payment upon launch of website.
This kind of payment system also protects the designer. If you get half way through a design, and the client runs out of money, you will not do too much work on top of what you have already been paid for. So, now that you and your client have agreed on these basics, it’s time to move on. Oh, if you and your client cannot agree on these things, don’t move on! There is a great blog that outlines some problems you may run into that you definitely want to avoid.
Setting up your scope of work
The planning of your website is the most crucial part of the entire project that is most often completely ignored. Without proper planning and upfront client management, you will almost definitely run into scope creep and eventually run yourself into the ground. Over the last several years, we have come up with a lot of methods of dealing with this issue. The first method is to outline every piece of the project before you or the client agree to it. At J House Media, we do this with what we call a ‘Site Architecture’ or a ‘Site Breakdown’ document. This document outlines every piece of the website before we begin. A breakdown can take hours or even days to complete. But the amount of money, time, and heartache that it saves you in the end are well worth it. The basic structure that we use is like this:
- Page or Section Name
- I. On-Page Feature
- A. Fields / Structure of each item
- B. Notes of how this feature works
- II. Subsection Name
- A. Fields / Structure of each item
- B. Notes on how each item works
For Example:
Design planning with your client
This is the part where I really start to enjoy the job. Interacting with clients to meet help them meet their goals can be a great experience. The first thing to realized is that you MUST stay within your set scope. If you deviate from your scope write it down, and inform the client that you will be sending them a quote for any changes. Ok, now the fun part.
From here, I go over an 8-page long design questionnaire that covers a lot of different areas. Below is a brief synopsis:
- Do you have any graphics or pictures you want me to use?
- Do you have a logo?
- Do you have a preset color scheme? If not, what colors do you want to use?
- When will you send these things to me?
- What is the main focus of this website? *This question should already be known and covered, but it is ALWAYS a good idea to ask again. Clients have a knack for forgetting and/or changing things down the line. So often I get a site from sales and meet with the client and they expand the reason for the site a lot. Much of the time it is because they thought about it while talking to sales, and have more to say after rattling it around in their heads for a bit.
- Who is going to be looking at this website? *This question, I go into as much depth as possible, as it will determine what kinds of users and machines will be viewing this website. This in turn determines how I will build the site, if I use a standard or non-standard stage width, and how graphics intensive I can make the site.
- Do you have any special fonts you want us to use?
- Are there any other questions that we have not covered that you want to go over?
Please keep in mind, these questions are just my outline, for each question here, there are several questions that we actually ask. And often times, there are questions we ask about the answers that clients give us. We call this the design questionnaire meeting, and I prefer to hold this meeting in person. A lot of the time, I get more of a feeling about how the clients needs and wants their site done than I do actual information about the site. This meeting usually takes me between an hour and two hours, and I usually get more from this meeting than any other meeting I have with the client.
Identifying your build method
By design method, I am referring to the process of building your website. The two main methods of design that I have used are:
1. Design everything in photoshop(or other equivalent program) first then take those designs to html/css.
2. Design as you go. This process generally means doing sketches and storyboards as you go and jumping straight into the html/css. If you need graphic elements, determining the locations and aspects and building them in Photoshop as you need them.
Each way has it’s pluses and minuses. If you are working for a client that is going to have a lot of graphic detail, I generally recommend designing everything in photoshop first. This way, you can present the comps to the client then make any changes in photoshop and have the client sign off on everything before you every touch your html editor. However, if you are building a gui or a sparse website, it may be better to use the design as you go method. Especially since it is often easier to make a lot of line and text changes in html/css than it is in photoshop. A good example of this would be making a table. It takes a while to draw all the cell lines in photoshop, but with something like dreamweaver, you can have it done in seconds.
At J House Media, we always design every page in Photoshop first then have the client sign off on it before we begin any html/css. This way we do not have to go back and redo work. If a client wants additional changes after they have approved it, their timeline gets pushed back, and they are charged an hourly fee for the changes. This keeps us on time and in the black.
Sketching and Wireframing
Ok, so now we know what we are going to build, the architecture, the colors, the demographics, etc. for the site that we are going to build. This next step is very useful for large sites, and I used to do it for every site that I built. Storyboarding is great because it gives you a map to follow, and it gives the client expectations. If you and the client were in totally different mindsets, now you will be on the same page. Below, I have included an example storyboard we did recently.
On this wireframe, some of the design elements were already in place, and we were just redoing the content area of the site. Whenever we do a wireframe, we always make sure to have the designer who did it go over it with the client. Sometimes, there is information about the wireframe that is not immediately obvious from looking at it.
An example of this here is that one the featured players area, there is a horizontal scrollbar underneath that will have to be developed in javascript. This needs to be obvious to the client as well as any additional developers working on the site. Now that you have your storyboards approved by your client, you have everything you need to officially begin working on your website… Yay!
