Web design basics
Although the web has the added dimension of interactivity, the basic
rules of design apply. Just as in all forms of art and design, form
and colour are the building blocks of any web page.
HTML is the computer code behind most conventional web pages. Programs,
like Dreamweaver, can help us make up pages more easily. These programs
allow us to manipulate graphic images and text on screen, dragging,
dropping, resizing, colouring and even adding interactive links to any
part of the design. The software generates the necessary HTML code to
display the page as we see it.
To be a web site builder would involve training in the use of specific
web site software such as Microsoft Front Page, Adobe GoLIve or Macromedia
Dreamweaver and Flash.
If, however, you are interested in the languages more suited to the
construction of web sites, then you would need to learn about specific
software and web site programming languages such as html, xml, vrml,
Java, JavaScript, CGI Script, actionscript - Flash, ASP, JSP and PHPk of others in various departments.
Use these links to find out more.
GETTING STARTED
HOME PAGE
DEVELOPING DESIGN IDEAS
BUILDING THE SITE
DEFINING THE SITE
FRAMES OR TABLES?
CHOPPING YOUR DESIGN
WORKING ON THE BUILD
CREATING ROLLOVERS
TESTING
ADDING PAGES
UPLOADING & UPDATING
GETTING STARTED
First of all you need to make a few decisions:
The answers to these questions will determine:
Before you start to create pages for your website,
you must have a clear idea of its structure. To work this out you will
first need to sort through all your content (all the text and images
often called ´assets´) and organise it into sections
and pages.
When you have organised your content into sections, arrange these sections
as a site map. This will determine how people find their way around
your site - usually referred to as the ´navigation´ - and
will determine how you design your links.
Take a look at this example:
Keep your structure simple. People don´t want too many clicks/pages
to go through to get to what they want.
Before beginning to ´build´ your site you will need to make some important
decisions:
HOME PAGE
The 'home' page is the ´doorway´ to your website. This is where you
make your first impression and where you need to get the viewer's interest.
Make a quick checklist of the first level of links that you will need
to include on your home page to take the user to each of your sections.
Your homepage design may hinge on a creative use of these 'button/type'
graphic elements or it may be based on a graphic that relates directly
to the site's content.
Another type of home page is the 'News/Magazine' type approach.
Have a look at some examples:
| Click on these examples | MTv.com | bbc news | Xfm site |
This approach allows for a greater number of
sections/links to be included on the home page and allows for easy navigation
of large sites.
There are several ways in which you can arrange your navigation, such
as:
These menus contain the links to the main sections.
The advantage of this system is that the navigation bar is on every
page of the site and therefore does not have to reload each time. It
also provides visual continuity to the site.
DEVELOPING DESIGN IDEAS
You will find it easiest to start your home page design by doing some
thumbnail sketches. This allows you to work quickly and to get a variety
of ideas down on paper without getting 'bogged down' in too much detail.
A few tips:
BUILDING THE SITE
Techniques vary according to the software used.
This will also affect the ways in which images and text are imported
and controlled. For detailed instructions refer to the manual supplied
with your software.
DEFINING THE SITE
Your finished web site will be made up of many files e.g. html files,
gif files etc. You will need to keep these files in a well-organised
series of folders and folders within folders (sub folders). The main
folder (containing all the others) is called the root.
FRAMES OR TABLES?
Another factor, which will affect how you organise your files, is the
method that you use to control the structure of your pages:
Frames
If you build your pages using frames, your file structure will become
more complicated. However, the benefit is that you will be able to keep
the main menu elements within a frame that can stay on screen at all
times. This means that your menu will not have to reload each time a
viewer visits another page within the site.
Tables
If you build your pages using tables, your file structure will be simpler.
You won't get confused when you start making the links between pages.
However, all the items on each page will have to reload each time.
CHOPPING UP YOUR DESIGN
Graphic elements always take longer to load than text elements, so you
need to keep their file size as small as possible.
It is possible to put the whole design in as one image and then create
the links by defining specific areas to be interactive. However, you
will find that a page created this way will take a long time to load
and the viewer will not see any part of the page appear for some time.
The viewer might think their browser has crashed and reboot not to return
- or run out of patience and go somewhere else!
Before you start to build your first page, prepare all the graphic elements.
The best way to do this is to print out your Photoshop file (the design
you created earlier for your Home page) to a laser printer. You can
then start to work out how to chop this design up into smaller elements.
Look at your design and, using a ruler and pencil, start to divide the
page up with horizontal and vertical lines. Initially you should extend
these lines right across the page, from top to bottom and from left
to right. Later you can modify the grid using shorter lines that subdivide
cells of the grid.
If you are using frames, you will first need to divide the page into
the same number and format of divisions as in the frame structure that
you have chosen. You can then treat each of these sections as a separate
page and divide them again (where necessary) to be built using the tabular
method. These separate pages will then be imported into the individual
frames that make up your home page. Make sure that you name these separate
pages appropriately and that their names relate to the names you have
chosen for your home page frames.
Before you start to crop/cut and paste sections of your Photoshop file,
replicate all your major pencil divisions in the digital file using
rulers/guides. This will make the task a lot easier.
As you begin to save the graphic elements of your design, you should
consider using the 'save for web' facility in Photoshop or a program
such as Fireworks. This will reduce the number of colours to an absolute
minimum and save in a compressed or web-friendly format. You can either
save them as .gif files or as .jpg files.
WORKING ON THE BUILD
As you start to put your home page together you will want to start creating
the links to the next level of pages on your site map. For this reason
it is useful to create some simple dummy pages. These need only be plain
html pages with just a few words of text to differentiate them.
Doing this before you start lets you create all the interactive links
on your home page and means that you don't have to recreate rollovers
later.
CREATING ROLLOVERS
You can greatly enhance the visual interest of your page by creating
buttons and other graphic links that react to the cursor when it touches
them. For instance you can make them change colour or grow in size.
 |
and  can make: |
|
The usual way to create these is to save two variations of the same
image file. Keep the original file with its layers so that you can return
to it and create more buttons/graphics with the same effect but different
words.
You should make sure that you use a simple system for naming these files:
Example: aboutme.gif (normal state) and aboutme1.gif (rollover state)
or contact.gif (normal state) and contact1.gif (rollover state)
If you keep to a system like this then there is less chance of you getting
your normal state files muddled up with your rollover files!
TESTING
back to menu
ADDING PAGES
When you are satisfied that your Home Page and all its links are working
correctly, you can move on to create the pages that it links to.
You will already have simple html pages, which you have created links
to already. Now you need to design and build these pages as you did
the Home Page.
Remember to add a 'Home' button to take the user back to the home page.
You will probably want to establish links directly to the other pages
too.
If you are using frames you will need to:
When you have created these pages you should
test them in the chosen browsers.
Before you publish your site on the Internet, always get someone else
to proof read every page. Ideally, give them printed copies to work
from. When they have done this, also ask them to test the site on screen,
checking all the links and navigation. Make a note of anything that
you need to sort out and test again.
UPLOADING AND UPDATING
Uploading the site
When you are ready for your site to be seen in public, upload it to
the online server.
Your Internet Service Provider should be able to provide you with space
on their server for a monthly fee and they will provide you with all
the information/passwords for connecting to it. The techniques for uploading
vary with each software package, so read the relevant section in the
manual.
Sometimes things can go wrong during the upload, so re-test your site
online after uploading. You may need to upload it again before it works
properly. If there are any problems you can't solve yourself, you should
contact the technical support facility at your ISP.
Updating the site
Remember that when you wish to make changes to the site, you should
always make them to your copy on your computer first before uploading
to the server.
