I was asked a while back about the steps involved in developing a website. While it may seem like a simple answer to come up with, there should always be a method for the madness. So what steps do you need to follow? Well there are no rules for this and everyone has his or her own method, but finding a method that works well for you can take some time.
Well with that said let’s follow a good plan of attack for designing and developing a website.
1. Content Areas
The first thing that you’re going to want to do is grab some paper and a pen or fire up a text editor. You want to make sure that you have in mind exactly what is going to be on your website. This means coming up with all the details that you will need for the finished project.
First write down all the areas your website is going to need or the ones that you want. Header/banner, menu, content area, ads, footers, recent updates, etc. – you may not need everything you write down but it’s nice if it’s all there.
Now take each area and think about what will go in those areas. If you’re dealing with the header for your site, do you want a logo for your site? What about a search for the site? Or if it’s for a business are you going to put the business address in the header or some other place? Do this for all the areas you want to have on the site. This also means figuring out the menu items – which will be important in the next step.
2. Site Layout
Once you have a more detailed thought about what will all be on your website you can start to draw up some site layouts. I find this step is best done with pencil and paper – if you mess something up a quick erase and you’re back in business.
It’s also a good idea here to say something about these site layouts you’re working on. Even if you don’t think this layout isn’t going to work, don’t throw it out. Put it in a folder, it may work for a different site in the future.
Since you now have a better idea for your content areas and what they will contain you can get a good idea of how much room they will take up. This is nice to know so you can start placing the areas for your site layout. If the menu has a lot of items it might not look right in a horizontal position across the top of your site. If you find that you have some extra space you want to fill in, you may be able to place an image or even some ads in the space. It can also help when you’re trying to decide if a fixed layout would work better than a fluid layout (or vice versa).
With the site mocked up in a very generic fashion it’s time to start with the X/HTML code. Rough it in so that you’re setting up your content areas but still leaving enough flexibility to move things around and staying prepared for future updates.
3. Site Design
The design of the site can be the biggest problem for people if they aren’t the most artistic person in the world. I know it’s a challenge for me at times. How you go about coming up with a design depends a lot on the site you’re dealing with. You want to try to figure that out before you start the actual code for the site. If you want a more corporate looking site then strive for that. If you want a site that’s more tailored towards a theme then think about what you’re site is about.
I recently began working on a website for a farm. It was mainly to cover their fall festivities – hay rides, pumpkin farm, apple orchard, and so on. The site was more whimsical looking so a simple use of fall color still left it looking more business than “fun.” I added images to the menu items, removed the “logo” and replaced it with an image of the farm, and then placed a “watermarked” pumpkin image in the bottom right corner of the site. With those slight changes, the site went from “blah” to one that both adults and kids would like to look at (hopefully).
The idea here is that you’re going to need to work with the function and theme of your site and not against it.
4. Coloring
I can’t stress enough the wonder that Cascading Style Sheets (CSS) have brought to web design. Putting the design of your site into an external style sheet can save you time and headaches in the long run. You’ve already mocked up the site layout, you probably filled in some generic content so you can see a generic version of your site, and you’re read to get going with the colors.
In the last step you’ve thought about the design and may already have a few images you’re ready to work with. Now it’s on to coloring your site and this is where that external style sheet will come in handy. Take a look at the images you’re about to use on your site. Work with the colors to come up with a color combination that will look nice to your viewers and most importantly are easy to read.
If you’re not working with images then don’t get frustrated. Think of the overall feel you want for your site. Is it a site that’s trying to grab a person’s attention? Then bright colors like red, orange and yellow may work. Are you trying to be more professional? Then dark or rich colors may work well for the site.
There are programs out there that can be very handy in picking colors for you. I know I use a few of them. But keep in mind that while they can provide guidance for you, very seldom do they give you just what you want. You need to play with the colors until you get them how you want them, so making the quick changes in the CSS file is the best and quickest method to getting the site right.
5. Touching It Up
Once you’re set with your layout, design, colors and images, it may be time for some touching up. We don’t always get the site to look exactly the way we want it and we sometimes need to go back and maybe add a little extra “white space” to the site so it’s not so cluttered. If you’ve been using an external style sheet this is usually a quick job that will give you the results you were looking for.
And there you have it: a quick and easy method for the madness that is web design and development.