A. Initial Mistakes
Initially, the appearance of a webpage is probably less striking than either owner of visitor would like to see. With limited knowledge of webpage design and building and the lack of judgment because of the rush of excitement that comes with something new, brand new web pages usually leave something to be desired. Because of thise, it's generally easier to pick out a brand new page or page builder page from all the other pages on the internet. However, this is to be expected and not always a bad thing. When one can recognize where one has room for improvement, one can start improving right away.
Often, new webpages are either extremely wild or bland. If using an editor with a preformatted layout, one's web page may seem quite rigid and not as personal or creative as one might like. following the outline of an editor and simply filling in the blanks may result in a page which looks institutional and lacking artistic expression.
On the other hand, with the powerful tools a WYSIWYG builder allots a user, one may go overboard, the result of which is often a web page with many elements scattered in a random fashion. This may result in a page with countless Javascript pop ups, blinking or scrolling text, impossible to read text, clashing colours, background music and hideous images.
The ideal appearance of a web page is somewhere between reckless abandon and stifling exactly - a page with enough structure and organization to be functionable without being impersonal or lacking creativity. For some tips and advice on maximizing the visual appeal of your website, look at the next section.
You will probably be eager to try out many different things when it comes to the appearance of your website and there really are a lot of tools and features which can be handy if used correctly. Unfortunately, in our zest to learn, we often use these things incorrectly, at least at first.
A few key mistakes people make with new webpages include:
- Use of fonts which must be rather large to read
- Use of speciality fonts (Chiller, Old English et cetera) which everyone may not have installed
- Having a different colour scheme for each page
- Having no colour scheme at all
- Not giving links a unique link so that they become difficult to find
- Choosing colours which do not go well together
- Choosing text/link colours which are difficult to read over the background image/colour
- Choosing colours/shades of colours which are too close together
- Use of a background image which is too busy
- Use ofa background image which cuts off, is stretched or does not tile seamlessly
- Use of too large images which take up the whole page
- Use of too small images and resizing them (via HTML) so that they become distorted
- Background music which slows down loading time and may startle a visitor
- Use of blinking or marquee (scrolling) text
- Excessive use of images without a purpose
B. Uniformity
As you become more experienced, you'll probably realize that some things you were eager to do (Javascript, blinking text, clashing colours on blinding backgrounds, so on and so forth) were maybe not the best idea and you will need to tone down or limit those aspects. On the other hand, things you may not have considered doing before may become more appealing. One of these things is uniformity.
One key aspect of moving from a single - of a few - web page(s), is to remember uniformity. Using the same (reasonable) layout and (reasonable) colour scheme makes it easier for a visitor to move from page to page with ease. When one uses a different style for every page, the visitor's eyes are constantly having to readjust every time the visitor moves ot a new page. Furthermore, not having a consistant link colour will force the visitor to spend extra time looking for links to navigate your site, causing the overall viewing experience to be lessened.
When you keep yuor website uniform, you also save work for yourself. Instead of having to come up with a new theme for every page, you can retain one that you've already developed and you know works well. Additionally, a uniform style will help make your site feel connected and networked; every page will look like it is apart of something because it will match and, if navigational links (such as in a sidebar) and content can always be found in the same place, the visitor will quickly and easily be able to find what he is looking for on your site such as a link to the next page or the actual page content.
"Isn't that boring?" you ask. Well, only if you like browsing the web to be complicated and full of hassle. Initially, it may seem like a great idea to experiment, but you may end up creating many different pages with are only relatively related, which one would have difficult really calling a web site.
C. Colours
Now that you're considering using the same colour scheme over your entire website, it's a good idea to point out a few things to keep in mind when choosing these colours.
Choose text and link colours which can be read over the bkacground colour or image. Generally, it's a good idea to use a text colour which contrasts with your background colour. If you want to use a background image, it may be difficult to find a suitable text colour. Try not to use a background image which is too busy or has too many colours. If your background image contains every colour, it will be difficult to find a text colour which can be read over the entire thing.
Choose colours which go together well, not randomly. A scheme of blues and purples and reds, oranges and yellows would be better than using green, orange and purple. You may choose like or contrasting colours.
If using a header or layout image, choose your colours from the image. Use the colour picker in your graphics program, a program like Pixie or an addon like Colorzilla for Firefox and choose colours right from the source to make sure it will match.
Utilize colour palette and scheming tools/websites. There are a number of websites which provide you with schemes provided by other users or will help you come up with a colour scheme from your image or using your choice of colour.
Choose enough colours to work with. Generally, choosing 5 or so colours is a good idea. You will need a colour for the background, text, and links. You may also want to specify a colour for active, hovered and visited links as well as a colour or colours for emphasized (bold, italic, underlined, highlighted, quoted, headers) text. You may find that 1 or more of your colour choices does not work so well once you actually put it into use and may have to choose a different colour. You may be able to use less colours by reusing a colour for several purposes but make sure that text which you want to be differentiable from other text, actually does stand out.
Don't be afraid to experiment. Sometimes, colours which you may not naturally thnk to put together actually do go together quite well such as a bright green and a pale pink, or blues and oranges. However, if you're hesitant, don't be afraid to ask for a second opinion.
Don't forget black and white! Though some would argue that these are values, and not colours, black and white are go easily with each other and every other colour. They're a simple solution which we may overlook without noticing.
D. Layout
So, what exactly is a layout? In the simplest terms, it is how a webpage or site is laid out. In the realm of personal web sites (and most web sites) a layout is applied over the entire site uniformly so that certain parts - header, sidebar/extra info, navigation, content, footer - are easily distinguishable. Often, with personal sites, the focus of a layout is easthetics in the form of a layout or header image; although, with the Web2.0 revolution, the emphasis has shifted somewhat to functionality.
When developing a layout, one generally needs a graphics program (and knowledge of it) to produce an image to use. Additionally, one will also need to know HTML so that one may code the layout to display the image as well as the content and navigation which will go into the web site.
On the internet, there are also many resources for layouts. One can find many websits which provide free premade layouts which are freeware, shareware or linkware. Additionally, one can find many designers will to design a personalized layout for a small fee, which may or may not include the coding part. Also, once you make friends in the personal web site community, you may find someone willing to make a layout for you as a gift or if you ask.
The downside, however, of not making your own layout is that you may not have a chance to improve your skills at designing or coding. Additionally, the layout may not reflect your personality or website as well as it may have, did it contain your own personal touches.
Although a layout does not have to focus on graphics, most layouts of personal
web sites do and may do not consider a graphic-less layout to actually be a layout.It will become easier to design layouts after some practice. Placement, colour and spacial use all take some time to develop good judgment and it takes time to learn the ins and outs of a graphics program.
When working on a graphic for a layout it is important to keep a few things in mind: image quality, image size, complimenting content placement and site structure, spacial usage et cetera. It's easy to have fun designing something only to realize it's too big (in dimensions) to fit reasonable into a certain resolution, too large to load quickly on slower connections, you've used space poorly and there's a lot of blank space, the images you choose to work with were of poor quality, or that the image is gorgeous but it really leaves no room for the actual web site content. Remember, practice makes perfect!
When coding a layout, keep in mind that you'll need space for certain things such as the content and navigation. You may also want to include extra information such as a web cam, links, stats et cetera. Many people find that a two or three columned layout helps display the content alongside the navigation and extra information (usually in a sidebar[s]) and makes good use of space. However, you'll have personal preferences which will help you decide the placement for anything you want on your website.
In a layout, things stay in the same place, regardless of where you are within the site. While the content will change from page to page, the placement of the content stays the same as does the placement of the sidebar, navigation, header, footer so on and so forth. Keeping these things in the same position over the entire site makes it easy to find each aspect without much difficulty.
E. Simplicity
As you're learning to design and code, there is one thing most experienced designers will stress which is simplicity. The age old saying "Less is more" rings true here, as it does in most aspects of life. It can be easy to overdo things in your graphic making (text effects, layers, blended images) and in your coding (text colours, JavaScript effects, image use).
Keeping things uniform is an example of simplicity. Keeping things in the same position across the entire site also shows this. Using basic serif of sans serif fonts, such as Arial or Verdana, or default cursors also saves you time and effort as well as being simple. Using text rather than an image where appropriate (such as for a heading), making use of the horizontal rule and using only necessary JavaScript functions will also aid you when it comes to designing and coding your web site.
Make sure you have the basics and that they are recognizable. Using fancy names or images for links might look great but may only end up confusing the visitor (and yourself!) in the long run. Make sure to add a definition or explanation to anything that might cause confusion.
The most basic neccessities of any layout include set placement for content and navigation and while a webmaster may want to add extras (sidebar information is usually helpful and entertaining and a welcome message adds a personal touch), a website can become easily cluttered and difficult to read or use.
Δ = New
∇ = Updated
Back | Digg this | Post to del.icio.us
