
Find short-cuts while you program that save time and do not sacrifice quality. If you can save time on html coding and designing the graphics, you can spend more time creating more ideas and pages that improve your site. Make sure to re-use graphics over and over again.
The top graphic, commonly called the "header", can be used on all the pages. That means you won't have to create a new header for every page in the site. Once a graphic has been downloaded to a browser's cache, it loads immediately from the hard drive instead of the the internet which is much faster. This will decrease download time since the graphic has already been downloaded.
One of the most time saving things to learn is Cascading Style Sheets (CSS). Style Sheets allow you to maintain full control over hypertext, table and font, sizes, colors and decorations. If you want to change any of these, it is much easier to change it ONCE, in one file rather than EVERY instance on every page!
Imagine this scenario. You're fifty pages into creating a client's website and suddenly they request the text font be changed from Times New Roman to Arial and they prefer dark grey instead of black. We can't stress this enough: take the time to learn cascading style sheets. If enough people request it, we will create a tutorial devoted to CSS.
Website layout - an overview
The first thing to decide on is a color scheme. Look all around you for colors that match. Concentrate on 2 or 3 main colors that work well with each other. Make sure to use both light and dark colors for contrast and emphasis. Keep in mind that you need to decide on a text color too and choose a color that will make it stand out against it's background and be as legible as possible.
Sometimes you need to make tough decisions and even break a few rules. The overused buzz words "thinking outside the box" come to mind. Take this page you're reading right now for example. The text is white and the background is dithered (semi-transparent) and darker. Most designers would use a solid black background to make white text stand out more and make it a easier to read. You lose the interesting, semi-transparent effect of the cement background. Don't be afraid to experiment, try new things and break a few design rules along the way.
Now that we have a color scheme in mind, decide between the look of a solid color background or a textured one. Solid colors backgrounds are easier to work especially when it comes to alpha transparency. Textured backgrounds are more interesting and have a more professional look. You may even want to create more than one background like we did here. This page has three backgrounds. The main, grey cement, the 'darker cement' behind this text and the diagonal blue lines in the top header, small header, page separator and navigation bar.
Next, you'll want to decide on horizontal or vertical navigation and where it will go on the page. Horizontally across the top or bottom? Vertically down the left or right side? The choice is mostly personal preference unless the site is very large. The width of the page can limit amount of space for horizontal navigation. Larger websites work better with vertical navigation since web pages can scroll forever. |