This site was last updated 15/3/18
A good place to start with web site design is with a pen or pencil and some paper, making a list of the various pages needed. For our example, we will look at a personal web site. Typically, this consists of the following main pages: Home (or Welcome); About Me; News; Gallery; Contact Me, obviously the choice is yours to make. There can be other pages coming off these main sections called ‘Child’ pages, for example, a ‘Hobbies’ page could be a ‘Child’ page of the ‘About Me’ page.
The next is page size, how wide will our page be? We must consider that not everyone will have the latest kit with large or wide displays, some people do not have their browser maximised either; therefore, our page width should consider this. Generally, our content should fit within an 800-pixel width screen (less the scroll bar gives around 760 pixels as the main area for content). This size means those people with a larger width screen will see some page background while those with the smaller screen sizes (or a reduced browser window) will see our content without the need for constantly scrolling from left to right and back again to read our content. We want to engage with our audience, not turn them away!
Do we want our navigation (nav) buttons running across the top, or down the side, of our pages? Do we want to use the Serif WebPlus inbuilt button styles, or do we want to create our own? The inbuilt ones are very good, and extremely flexible. For our example, though, we are going to be making the buttons in Serif DrawPlus. We will cover two of the issues that are raised using this method further on, but it does have the advantage of creating pages with a custom look.
What is our colour scheme going to be? It would be good if we could look at a colour wheel to set this up, now where have we seen one...? Oh, yes, here are two colour wheels! These are a freely available resource to download and place into the ‘My Designs’ section of the Serif DrawPlus or Serif WebPlus ‘Gallery’ tab. We will be using various tones of one colour for the page and ‘on page’ background colours and a complimentary colour providing added impact for highlights. Following this step-by-step ‘Simple graphics for a Serif WebPlus web site’ project should provide a greater understanding of how to create a website from scratch without relying on a template.
I know we are chomping at the bit to fire up a program and begin all the fun stuff, but it is good to consider these points carefully when making these decisions before looking at the graphic design of the page.
The use of three Serif products in this project is designed to create some familiarity with the software packages. Much of the following can be created straight in WebPlus; the steps are quite easily converted to using the one program. Using DrawPlus adds the capability of using layers; I find this provides greater control over the creation process with a way to easily make amendments without affecting the main site. Layers are not available in WebPlus. Please remember there are many ways of creating a site layout for WebPlus (including straight from a template, quick and easy).
This is just one of the ways to create an individual web site.
Time to allow: A week-end or several one hour sessions.
PLEASE NOTE: It has been reported that users of Vista browsing with Internet Explorer have experienced some problems with the display of a number of these pages. I have posted a possible solution here. Firefox and other browsers do not have a problem in Vista. XP users do not have have any problems.