We have already had an overview of basic principles to keep in mind while developing your website. So far perhaps you have some sort of plan forming in your mind for all you need to do to accomplish what you want with your website.
Well, get ready to roll up those sleeves and get your hands dirty! We’re now going to delve into website design in more detail. This is where we separate the mice from the men.
Just kidding about the mouse thing.
Laying Out Pages on your Website
To lay out your pages, you first need to know what they are. You can do this by drawing up what is known as a site map. This will help you now to figure out how many pages you need and what you want on each page, and later it will help you with building your links and setting up navigation throughout your website.
Organizing Content
You already know from previous chapters that you need to include a contact page, a FAQs page, and an “about” page on your website. Go and get a sheet of paper and you can figure out what other information you want to put on your website. Jot down everything that you want your website to have on it, noting all content and graphics you want to include. Don’t leave anything out at this stage; you can always cut down the amount of content later if need be.
With the pages of notes in front of you, it’s time to organize the information into a more rational whole.
Note the ideas that would fall into similar topics and divide them into groups. For example, on a business website, you could group together warranty information and return information. On a personal site, you might put employment information on the same page as your résumé.
You should also put areas together that are similar in interactivity. For example, you should put a bulletin board and guest book in the same area of your website, so organize them together now.
Narrow the groups down. You probably have several groups that are scattered in scope. If you have too many, your site won’t look good. Limit your groups to somewhere between five and seven. More than that will make your website look too spread out and might scare visitors away.
You must either cut out the groups that aren’t necessary, or combine a few groups into one bigger one. Now write down each group and the ideas you want to include under that group on your sheet of paper.
List your ideas in order of importance. After following the previous steps, you have somewhere between five and seven groups with relative information listed under them. Now you need to prioritize the ideas you want included in each group.
Beside each idea, write its number in order of importance. When you are designing your site, you will probably find it easiest to start with using just the highest-rated ideas on your list. You can always add the later lower-rated information later.
Find the links between your ideas. One of the greatest things about the internet is its ability to link pages together. It’s time for you to start deciding which pages ought to be linked to which. Each page can’t simply be linked to every other page, because that would cause confusion. But some should stick out at you as needing to be linked together.
For example, if you want to have a page that mentions all of your pets, and also have a page with photos of your pets, you can link the name of your pet to its photo, and so on.
Start thinking about links to other websites. Linking to pages in other websites can be just as useful as linking to your own. If you have a good “links” page, people may come to visit your website simply to use it, which would increase your number of visitors and the length of time they stay on your website.
Decide what graphics you want to include. One of the hardest things about building a website is finding fresh sources of graphics. Unless your hobby is graphic design, you will need to buy images or find free ones you can use. It’s never too early to start finding the ones you will need.
You should now have around six main topics with one or more main ideas under each one. Basically, you should have a good outline that shows you every page you want to include on your website, and what you want to have on those pages. Where do you go from here?
You are now going to build a site map. A site map is a visual representation of the pages that will be on your site and how they will be organized. Or, it could be described as a flowchart that shows each page you will have in your website and how visitors to your site will move throughout the pages.
It would be most helpful to draw it on a big piece of poster board so you will have plenty of room to draw and you will easily be able to access that information once you are building your website.
Once you have your drawing board, just grab a pencil or a marker and we’ll get started on your site map!
Building a Site Map
Building your site map is one of the more fun elements of web design, so don’t be intimidated. This is where everything really begins! You get to start being creative at this point. And the steps are not hard to do.
Start with the main page in your site, the home page. At the top of your poster board, draw a rectangle and label it as your “Home” or “Index” page. This page will be a sort of home base to your site. It’s the page that every other page revolves around.
Your home page needs to state the name of your website, its purpose, and how to move around within it. You can include some content too if you want. An example would be either website updates or information on the products you sell.
It is important to note that your home page is not what is known as an “enter” page. Some people have a sort of introduction page to their home pages. Because this is unnecessary and drives away your visitors, having an enter page before your home page is not advisable.
List the main topics of your website. Under your “Home Page” rectangle, draw rectangles for each one of your main groups. If you followed the previous instructions, it should be fewer than seven. Write the name of the topic in each rectangle. Then draw a line from each rectangle to the one that says “Home Page.”
Fill in all your detail pages. These are the ideas that you prioritized under the main topics. Underneath the row of topic rectangles, draw and label a rectangle for each idea, and then draw lines to connect each idea with its topic.
Write down which pages and features will be shared. For example, on a business website, you might have many pages linked to one “Shipping Policy” page. Or on a personal website, you might need to link several different pages to one “Contact Us” page.
If you were to draw lines between these pages and all the pages that will link to them, you’d soon have a confusing tangle in your diagram. Instead, assign each of these shared pages a symbol. You can then draw the symbols on the pages that will link to those shared pages.
Draw rectangles for each of the shared pages, label them, and assign them symbols.
Assign your pages their own filenames. This step is only after you have your diagram all drawn out.
Since every page on your website will have its own filename, you may as well decide now what they will be. This will help you keep things straight once you start building or coding your website.
Most of the files you will build should use either .htm or .html as its extension. If your hosting server uses Microsoft Windows as its operating system, it will probably be .htm pages you are building. To find out, you need to ask your host. Your home page will usually be called either index.htm or index.html.
Name your pages in a way that reflects their content, and keep the names short. This will help you as you build your website and will help your eventual visitors by being easier to remember and easier to type than longer names. Don’t use embedded spaces when naming your files. For example, name you page contactus.html rather than contact_us.html. Spaces just add confusion and more variables.
Look over your site map. Move around anything that you want to change, and add anything you think might be missing. You might want to make a neat final copy to reference before you start building your website.
You now have a blueprint of what your website will look like and how people will move through it. You’re almost done with this stage! You just have a few more things to keep in mind.
Think about any “hidden” pages there might be. For example, if you have an e-mail form on your contact page, you will need to build a page that appears after someone has used that form to acknowledge that it was sent. Remember to add anything like this to your website planning.
Also, at some point in the future, you will want to change and update your website. When this happens, update your copy of your site map too. That will help you keep track of the organization of your website.
If you build a site map into your website, visitors may also use it to navigate, which may be a helpful thing for you to consider. Now that you know what pages you want to include in your site and what they need to have on them, we’ll look at how to design your actual pages!
Determining Individual Page Layouts
According to your sitemap, you should have several pages in your website that you need to construct. Grab a sheet of paper for each of the rectangles in your diagram. You need to draw on each sheet roughly what each page will look like.
Keep in mind the basic design principles previously discussed while constructing your pages. They need to be uncluttered and appealing, and contain text broken up by graphics which are not too big. Map out your headers and buttons, where you might want to put your logo and e-mail links.
Once you have gotten a page drawn up for each webpage you will build, you will know exactly how to construct each page. You’ll now be able to do so quickly, efficiently, and without worry of leaving something necessary out.
| < Prev | Next > |
|---|
