Please remember this was written in 2003, some stuff may be out of date

Website Design Tips 1

Ok... i've seen this question thrown around a fair bit in this forum, and others, so I thought I could share some of my knowledge of web design with you. Anyone who wants to add anything or query ideas, feel free If anyone wants to know, i'm just completing the 2nd year of a Multimedia IT degree... so I know a fair bit of web design tricks

This week's bit:


Web Site Tools...

Now, most of you have little or limited knowledge of HTML, let alone PHP, ASP, JSP, Flash... the list goes on.

Luckily, you don't need to these days. If you want a simple site, that doesn't look like crap you can get yourself a web authoring program. Number one on my list is Macromedia Dreamweaver MX (http://www.macromedia.com). It's simple to use, has it's own tutorials for beginners to immediately start making good looking sites. For advanced users, it can be a ***** adding unnecessary coding, and pointless scripts... but that won't matter to most.

Microsoft Frontpage is a fave amongst beginners... but that's why we see so many lame websites on the net. Frontpage is only a step up from notepad imo.

If you want to go crazy get Macromedia Flash MX, buy yourself a tutorial book and learn it in a couple of days (that's what I had to do). It's easy to get to grips with simple animations and basic sites, but to a beginner ActionScript will take a while to get used to without prior knowledge in scripting languages. If you know some java, vb or anything using programming constructs, it's easy to get into.

For those who know their code, i've found knocking up the basic structure in dreamweaver then editing the code manually from then on is the best way to go.

For a novice, you can't just jump into these programs. But if you want a good site, that won't require mass coding and knowledge of what's behind the looks, learning how to use an authoring app is your best option.

Here's some useful sites for design tips, if you're raring to get started:


An eye for an eye leaves everyone a pirate.
Website Analysis 1:

I just sent the analysis below to CICADA of his site:


I hope he won't mind me posting it here....

1) Logo: You need a logo for your band... something striking, something linked to the band name, but WITH THE BAND NAME. Stick the logo across the top of the screen, so it's the first thing people see and they know your band name easily. Atm it's not even displayed.... that isnt gonna get you remembered.

2) Background: Red isn't easy on the eyes... it causes strain with continued viewing. Something more chilled, light blues are a fave with me... black works well for a contrast with light writing, and white maybe boring but filled up with fancy graphics and logos.

3) Navigation: I don't like your buttons... the writing looks like a kid wrote it, it just doesnt fit too well. Plus for what they are they take WAY too long to load. You need to ensure you use max compression on jpeg images (or gif them), without losing too much quality. You can reduce file size DRAMATICALLY. Locating them on the top of the screen is a good thing, but you need a logo up there, maybe in the top left (consistent to most other sites). Being similar to other sites is actually good... it's the content that will make it stand out.

4) Text: All caps is annoying. It's like "Internet shouting"... it's frowned on in design.

5) Audio: You need it. Essential. Without it, it's basically a personal website of no interest to anyone but yourselfs.

6) Theme: That's one thing you have... though it needs to be changed as i suggested above, make sure the site is consistent throughout... you need people to relate a theme, or scheme with your site.


I'll go through these bits in more detail in future weeks, if anyone wants me to....
An eye for an eye leaves everyone a pirate.
I don't like templates... not only can you not apply your own design to them (which is essential if your band wants a thematic site associated with them), they're also damn restrictive.

But it's a good way to learn if you look at the way they're structured, so mess about with them
An eye for an eye leaves everyone a pirate.
Website Design Tips 2

Okie doke... this week...

<ul><li>Designing a home page that is an effective site guide</li>
<li>Designing a site that's easy to navigate </li></ul>

The Web pages on a site can be broken down into three main groupings:
1. Home page (one)
2. Main topic page (a few)
3. Subsidiary pages (a few per topic)

On all these pages you should limit the pages to 2-3 screens because the people dont like to scroll for ever, and remember to display the important information prominently.

From any subsidiary page the visitors must be able to go back to the home page/main topic pages. This is why navigation is so important:


Navigating through your web site

The First Screen:
The first page your audience will see is the home page. If you want people to stay, it has to be effective and pleasing to the eye. If you have a crap homepage, people aren't gonna bother to look further into the site, and are unlikely to come back.
A good analogy is that the home page of a web site is similar tot he cover page of a magazine. The most important factors that influence the sales are the the cover and the subject matter.

The home page must:
<ul><li>look professional </li>
<li>be ethical </li>
<li>be artistic </li>
<li>have interesting content </li>
<li>make the visitor stay </li></ul>

Navigational Tools - Graphics, Text, Frames:

Navigational Graphics...
Two categories:
- A button is a graphic with links to another page.
- An imagemap is a graphic that is treated by the browser as a navigational tool.

Text makes excellent navigational tools... since they're fast and easy to load by the browser. They are even more important on pages that use graphics and imagemaps as links, as if the visitor hits the 'stop' button before the imagemap loads, they won't know where they are going when they click. Using text as navigation will speed your site up no end... and remember, in web design speed is of the essence!!

Frames are a great idea for keeping the text links static so you dont have to constantly reload them. However, they're controversial because people use them poorly. Frames cause problems on varied screen resolutions, and can screw up a webpage on different browsers. Personally... I feel it's better to use tables to create a navigational bar.

Consistency in your site is VITAL. That means consistent colour buttons, consistent theme, consistent fonts, consistency ALL AROUND.

Location of Navigational Aids:
If you place your navigational buttons on the page, whenever you place them at the top or left of the page, make sure they are on the top or left hand side of every other page.

It is a very simple concept - every navigational tool has to have a consistent look and location. Navigation should always be predictable.

You want to create navigational tools that ...
<ul><li>are in the same spot on every page </li>
<li>have the same look </li>
<li>will get the visitor to the information in as few clicks as possible. </li></ul>

Here's some useful sites for tips on navigation


USE THIS SITE!!! >> http://www.useit.com/alertbox/9605.html


Previous Tips:
Website Design Tips 1
An eye for an eye leaves everyone a pirate.
Website Analysis 2

Okie... this week it's AngelOfLust's site:

To start off with... it's a good looking site People have said about the screen res, but the fact is that 800x600 is still the most commonly used screen res. Using tables on your site with percentage widths gets around having to worry about ur screen size, as they resize with the browser... have a browse on the web for details on that.

I noticed you changed a few things from when i last looked, like the buttons. The fact you couldnt see them was a big flaw... you shouldn't have to search for buttons lol.

Good layout for the buttons and logo... stays consistent throughout. One thing tho, is that the logo is pretty boring. A font in red isn't exactly exciting. Stick it into paint shop or photoshop and mess around with some effects. You need the name to stand out more... it is the main thing you want people to remember after all. The buttons... i can't work out why, but i don't particularly like them, i think it's the whole fading in bit. I like navigation to stand out from the start.

Another thing, why is there the space on the right of the screen? It seems as tho something should go there, but it's just empty... blank space isn't a good idea wherever possible get rid!

It's always tough putting text over graphics, since it can be hard to read in places where colours match. This is apparent in areas with the white text over the white of the wolves... it's not a big problem, but could become one with more text. The only way around this is darkening the image really.

Red and black make a good contrast, with the white text... good choices (for the type of music, there isn't much choice lol).

NEWS: Nowt wrong here, ordered by latest date prominance, regular updates, all good
BIO: Rather sparse lol... maybe some more info on equipment, yourself, how you write songs?
PICS: Don't like this at all... the pics are very small, thumbnail size... and are 20kb per pic. They don't need to be that filesize for such a small grayscale image. Compress them more using an imaging app... then upload a full size image that links from the smaller thumbnails. Thumbnails own web design.
MUSIC: yup, nowt wrong here.

Hope that helps
An eye for an eye leaves everyone a pirate.