Simple Web Design
IMPORTANT: This tutorial is about the graphic design of a website. Please see Website Setup Guide for my basic guide to setting up a website.
Many of the visitors to this site, and many of the people I've dealt with, are small businesspeople, who can't afford to have custom website design done by a professional web design firm.
Their only option is the "design your own website" option. A large number of these people haven't designed a website before, and only want to do one web design project - their own site.
The idea in their head seems like the best web design concept ever, but when it finally gets onto the screen, it doesn't come out as planned, and ends up looking very amateurish.
If at first you don't succeed, stop trying so hard
The problem is that graphic web design is not an easy job, and everyone's first web design attempt is always a "learning experience." :)
A lot of websites look unprofessional because the designer has tried too hard to make the graphics look good, without knowing what they're doing. If they just hadn't tried as hard, the site would have looked a whole lot better.
A reasonable number of pages on the internet fail my "blank page test". In this test, I look at a page. Then I cut and paste the text from that page into a blank page. If the blank page version looks better, they have failed the test. All the designer's work served only to make their page look worse :D
It's better to have no graphics than bad graphics.
This tutorial demonstrates one of the simplest ways to make a decent-looking website and avoid any risk of having bad graphics.
1 – Creating a web page title
Type in your header, and make it very big. The font can be a serif (curly) or sans serif (non-curly) font. I've used the "Trebuchet" font style here.
Set the tracking (spacing) of the text to -100, to condense it. (In Photoshop 6.0 or Photoshop 7.0, you'll need to click Window > Character first.)
Change the colour of the second word (or central word if you have three) to a red-orange colour. Leave the rest black.
Save the image for the web. Jpeg, Quality 60.
The reason that black and orange are good colours in this situation is that black contrasts with the white background, and orange contrasts well with both black and white. Orange is also a colour that doesn't really "say" anything, like red, green and blue do.
2 – Creating a navigation menu
Create a new image in Photoshop, around 30 pixels high by 550 wide.
Fill it with the same orange you used in the header.
Use the Type Tool, and insert appropriate white text for your navigation bar. To separate out the words, put a Bar between each word (press Shift + \)
Click File > Save for Web.
3 – Putting the pieces of your web page together
In your web editor, set up your page as follows:
Header image
Navigation Bar (use hotspots / image maps to make parts of the image into links.)
| Borderless table, 550 px wide, with your text in it. |
Navigation Bar (again)
Footer. e.g. Copyright info (Use size 1 grey Verdana text.)
4 – The finished product
|
Welcome to WebsiteOne WebsiteOne is a leader in web design and graphic design. Feel free to look at our web design portfolio, and see some of our previously completed web design projects. We are a professional web design company and can provide the latest in web design and graphic design solutions. Our Web Design Packages We provide various web design packages, suitable for professional businesspeople or small companies. Please contact our Web Design department if you have any further enquiries about web design.
Copyright 2010 Pegaweb Web Design & Photoshop Tutorials (www.pegaweb.com) |
