Doug is a fictitious small business owner who's business has been building widgets since the 1970’s. Several years ago Doug had a website built by his nephew, who was in high school at the time. The site is now pretty outdated, and Doug occasionally gets a comment about how he really should think about updating it. Today Doug has made the decision to act on that feedback and begin the process of replacing his existing site with a new one. Although he has decided to redo his website and to hire a professional to do the work for him, he may quickly become frustrated with the process; after all, the point of hiring someone to do it for you is that you don’t have to worry about it yourself, right?
The truth is that a web design project is a marriage of the technical and design skills of your web designer, along with your knowledge and expertise in your business. As a business owner, if you go into a web design project ill-prepared, or wanting to be completely hands-off, you may find your project getting bogged down very quickly. The purpose of this post is give you a roadmap to follow before and during the project in order to allow your project to be completed as quickly and economically as possible.
Often times, people jump to the technical aspects of a project to start out with. They saw a cool feature on a different site that they want to emulate, or have an idea of how they want something to look. All of that is useful to the designer, but there are two key pieces of information that you should be looking at before we get down to the nitty gritty technical details. What are your business objectives? What is your budget?
If you were buying a car, you would have to have some idea of what you were willing to spend before heading over to the dealership. Your budget is going to determine if you head to the Chevy dealer or if you check out the BMW’s. Your budget will determine if you’re looking at new or used, what options your want etc.
The budget that you have for a web design project will determine if you go to a freelance designer or an agency. It will determine if you invest a lot of resources into search engine optimization, and other factors. Many a business owner has gone into a web design project with no idea what they want to spend more specific than “as little as I can get away with”. If we go back to the car analogy; if my only concern is to spend bottom dollar, I may end up with a vehicle which doesn’t actually meet my needs. If what I need is a pickup truck, and I buy a compact car because it was cheaper, I’ve saved some money up front, but will have a hard time getting the car to do what I need it to.
Before we start building a site, we should understand the site’s purpose. There are many things that we CAN do with a site. There are fewer things that we SHOULD do with a site. A quick look at Doug’s business can help us determine what the site’s objectives should be. Let’s say Doug’s business objectives are:
- Increase sales
- streamline customer support
- Increase awareness of Doug’s newest products
Knowing these objectives will help the designer to make key decisions about what he should and should not do with the site.
Determining the scope of a web design project is an important early step. Together with the designer you need to determine:
- How many pages the site will be?
- What is the complexity of the layouts needed?
- What features need to be built into the site?
- Are logos and graphics provided by client or need to be designed?
- Are images provided by client, are stock photos, or custom photography to be used?
- Will the client need training on adding content to the site?
- Is ongoing support needed?
- Is hosting to be provided by the client or the designer?
The bane of any designer’s existence is “scope-creep”. A price is determined between the client and the designer, and then the scope of the projects slowly starts to expand during the build phase of the project. Many designers will refuse to add anything to the scope until the original project is done, and the additions can be negotiated as a separate project. It’s just better for everyone if some careful thought is put into the scope ahead of time.
Determining Site Structure
As part of determining scope, you should determine the site’s structure. This is a helpful tool in gathering content for the site. By the site structure, I am referring to the pages, and their hierarchy in the site. While the pages needed in any given site will differ depending on your needs, there are some very common pages that you will find in most sites, These include:
- Products & Services
- Shop (for eCommerce Site)
Any of these top level pages may have sub pages underneath them. Let’s say Doug has a few different types of widget that he sells. He could have a page for Widget A, Widget B, and Widget C, which would be found under the products page. Perhaps under the about page, Doug has a fair bit of content, so he has a page about his company’s mission and vision, along with a bit of history, a second page about his team, and yet another page about community involvement.
At each step it isn't a bad exercise to look at our plan, and how it stacks up against our business objectives. Perhaps having three pages under “about”, none of which have any impact on our main objectives, is not appropriate, given the overall size of the project. It might be a much better use of our time to expand content and features for a support page, or expand the products and services page, or to write blog content which highlights Doug’s new products.
At this point, we can also evaluate our structure based on the amount of content that we have. If we really only have a paragraph or two of content, there is no need to create an entire page for it, if it could just as easily live as a section in another page, provided that it’s location is still intuitive enough to be found easily.
You will want to get your images together. There are a few things that you can do with your images to help with the process.
You don’t have to get your images sized perfectly before sending to your designer, but making sure that you’re not sending images which are either far too small, or far too large will be helpful.
At present, there is rarely any time when an image will need to be larger than 1920 x 1080 pixels. That would be a full screen image on an HD display. This may change in the future, as more and more computer displays become High Pixel Density (or Retina) displays, but for now, those 6,000 x 4,000 pixel images are overkill.
Often the opposite is the problem; you want a particular image to be a full-width hero image for a page, and the file given to the developer is a 300px x 200px thumbnail. When this is blown up, it will look terrible. You don’t want to scale images up (you can get away with it for background images, but then only to a point).
You may not be used to thinking of image dimensions in pixels, but it may help to think about the content width of your site. The content width is centre part of each page that, in which all of the content is contained. if the browser window exceeds the content width, then we see background on the sides.
The content width on most sites is between 960px, and 1280 px, with the average currently being about 1080px on a desktop browser (this of course changes on mobile). So if an image is going to span the entire content area, it is going to need to be about 1080px wide. If an image is going to span a portion of the content width, it would be approximately proportional to that; so if the image is going to span a half, or third of the content area, then the width would be around 540 or 360 pixels respectively.
Again, it’s not imperative that everything is perfectly sized at this point, but it it’s in the same neighbourhood, that’s great. If you are going to err, it is better for the image to be too large than too small.
Make sure you have the rights
You need to have the rights to use the images on your website. If you just take images from Google, or other websites, you may get away with it, but if you don’t, you could end up dealing with a real mess. If you need images, there are a few options:
Hire a Photographer
This one is great; if you have the budget. Get some high-quality shots custom made for you.
Use Paid Stock Sites
Cheaper than hiring a photographer, but you’ll have to sort through libraries of thousands of stock images, and find images which are relevant to you. This won’t work for very specific pictures, like an image of your facility.
Free Stock Sites
If you can find relevant high-quality images on free stock sites, you’re laughing. You may have difficulty finding the perfect image. A great resource is www.librestock.com, which pulls free stock from about 40 of the leading free stock sites on the internet, and puts them in one place for easy searching
Perhaps your customers have great shots of your business or products. You can make a contest, where customers can submit their images for a chance to win a prize.
File Name and Format
It can be helpful for search engine visibility if the file names of the images you use are descriptive. They can help the web crawler to understand what the content of the image is. What is even better than descriptive titles, are descriptive titles which match the overall theme of the page.
You’ll want to use images in the appropriate file format. Some image formats are very large (like a TIFF or BMP file) and others are much more compact (like a JPEG or GIF file). As a rule of thumb, JPG files are used for photos. PNG files are used when transparency is needed (often with logos or graphics). GIF files can be used for animations, and can be used where transparency is needed, but GIF’s have poor color reproduction, and so are not always a great option.
You’re far more of an expert about your business than your web designer is. You’ll need to supply the written content for the site. This is going to take some effort on your part, to sit down and think about what you want each site to say. If you are not the sort of person who finds it easy to write about your company, you may want to employ a copy writing service to help you get your ideas down in an engaging manner. Your web designer may be able to help with this, but unless that has been specifically mentioned in your agreement with him or her, assume that it will cost extra.
I would recommend that you create a Word doc for each page on the site. If you just have it all jammed into one document, it may not be clear which content is intended for which page. When you get to a point in the content where this will be an image, you can reference the file by name, but there is no need to embed the image into the document; that will just create more work for the designer later on.
Packaging it All Up
So we now have our structure figured out, our images squared away, and our written content penned. It’s time to put it all together in a way that will make it easy to understand. While the method I would prescribe is not the only way to do this, it should make things very straight forward for your developer.
I would suggest making a folder, and in that folder, subfolders, which match the names of the pages, and the structure of the site. In each subfolder, you can place more subfolders for each page that resides beneath that page in the site’s hierarchy, and the word document that contains the written content, along with any images that will be on that page.
Once that’s all done, ZIP the whole thing up into one file, and send off to your designer. It may be a little big to email, but there are plenty of file sharing services for sharing large files.
As much as you may try to get everything right the first time, you will inevitably find revisions that need to be made. There is often a very long and complex email thread that goes on during the final phases of a web design project with all of the last minute revisions. This is not an efficient way to work, and can easily end up in work being missed or unnecessary work being done. Rather than sending an email to the designer with a spelling mistake, or informing him that one of the products should be called “WidgetA”, rather than “Widget A”, compile your revisions into a single document.
Each revision, no matter how minor, can be given a name, a page number, and perhaps the subheading that it falls under. You could use colours or stroke through to make it clear.
…Doug’s widgets was founded in 1973 in
New Port Newport WI,…
Compiling the revisions will allow you to be far more systematic in ensuring that every ’t’ is crossed, and every ‘i’ is dotted. Many developers also specify a maximum number of revision documents, so this can help avoid being charged extra for the same number of revisions.
A little bit of planning and organizing can go a long way to making your web designer’s life a little easier. If your designer works on an hourly basis, you can save yourself some real money by taking the time to lay everything out clearly for the designer. If your designer has given you a fixed price, you can still speed up the project deliverables by putting in the extra effort, and make the final revisions a lot less difficult.