Dynadot

Website Design Tips

Spaceship Spaceship
Watch
Impact
74
Website Design Tips

Hey, I'v made a Reviewing article, a Website Development Resource List, so why not make a Website Design Tips article? :hehe:

Ok, on this article, i will try and break it down, into the main points of design.
I'm gonna try and keep it simple. ;)

Audience / Genre
This may seem like a stupid point to think about when designing, but i have reviewed many sites that havn't designed their site to suit their auidence and site genre.

Ok, when designing, try and make your design to look like something which resembles your site genre,
eg...A car site? Add a car, or something which resembles a car in your header...eg, tyres, a engine, or the car itself.

Or, a sports site? Add a sports related image in.
Like i said, it's a obvious thing to do, but many forget to do it.

A lot of the time, i see poker sites, or game sites, which will have a abstract image in, and i wouldn't have a clue what the site was about, untill i started to read the Welcome text in detail.
However, don't go over the top, eg, have bullit points as Footballs, typres, or dollar signs etc...it would just look tacky. ;)

Now, colour, lets say you have a skateboarding site? or Rock band site? You could make it have a white background, but why not use a dark grey, or black...
Try and associate site colours with the genre...eg, childs site, Bright, colourful colours...

Equal Margins / Padding
I think this is a very important note, that will make your site look cool, or tacky.

Try and make equal margins, in content boxes, containers, or text/images.
So, on your content box, add the margin / padding of 1-px (for ex'), and have that on the left, right, top and the bottom, it makes it look very neat!
If you have unequal margins, it can look like you just added text, and couldn't bother how your site is layed out.

Animated Images
Animated images can make your site look cool, in the header...
However, having alot of animated images surrounding your content, really puts most people off what they are reading, and loose focus, causing them to leave...sometimes ads are animated, ok, just don't have so many crammed together around content!

Evern still images can be annoying, when surrounding text, so, try to organize you ads, so they are away from content, but easily visable.

Widths
It can be annoying choosing the width of your site sometimes, to make it perfect.
I find sites look best depending on their content.

If your websites has alot of articles, long peices of content, use a wide design (Fluid), also, it won't make your page look aslong, and make your users think "Uh, too much to read".
If you have little content, then it's basically the other way around...You want users to think you have a fair bit of content, so, cramming text up abit will create this impression.

Colours and Text
We talked about colours and genres above, but this time, this has a different reason.

Back last year, when i was in school in graphics, we had to learn about "ergonomics", this can play a very important part in graphic and webdesign.
Basically, it's partly about choosing colours that go well together...
Don't have a site with a dark background, they dark grey text, it makes it very hard to read...
Also, don't have a site with a dark background, and bright colours, both can strain the eyes, and make it hard to read.
Keep this in mind when design, choose colours that can go well together.

Fonts, there is so many of them these days!
Arial, Verdana and Tahoma are still the most used fonts on websites, that's good, they are easy to read.
I'm talking about these new grunge, graffity, modern fonts...some look good, some don't.
Bare in mind, whichever font you use, it has to be easy to read!

Examples below of Colours and Text
easylm4.jpg
hardkk7.gif

Navigation
Basically, use easy to read fonts, and colours that go well together, like the points above, and place the navigation near the top of your page, so it gets noticed.

Welcome messages.
Let your visitors know what your site is about, and what the benefits of them registering/visiting are!

When i opened my last forum, about a year ago, i posted it in the NamePros chat, and a user pointed out (I think it was RJ), that it doesn't say what the forum is about, or, what the benefits of registration are...
Thinking about it, it was a stupid mistake i did, but, we sometimes miss things such as this.

So, add a box, keeping it with your sites theme, add in what your site is about, and the benefits of registering...keep it short and simple...
A good example, is the Welcome Headers here at NamePros.
See below
welcomeheaderbq0.gif
(It is wider on the homepage, i just make it thinner for this post)
If your forum is running on vBulletin, you could try the Weclome Headers plugin. It just generally makes the process easier. It can be found here

Notices
A easy way to get notices across to your users, if via a little box, which is a nice colour which stands out, but abit pale. ;)
noticeae2.gif


Or, you could use a "corner banner", which is what i used to use on my forum.
See below
banneruv9.jpg

It looks neat and tidy, and isn't obstructing the view, and it doesn't annoy anyone...
Note: Clesto was my old site. ; )

Hopefully, that's some points that may help you. : )
I will add more points as time goes on. : )

Adrian
Rep is appreciated. :)
 
4
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
Very nice Tips
Great article
Thanks
 
0
•••
Netty said:
what good html tutorial sites could u recommend? :hi:

I think you may try the w3schools.com and planet-source-code.com... those sites are great for web development...
 
0
•••
Thanks for the tips. Its really helpful.
 
0
•••
0
•••
Also you can add some SEO related tips for web designing.. It really helps in coming up with SEO friendly website.
 
0
•••
Thanks for the simple and clear cut tips..Are very valuable for newbies...
 
0
•••
Thanks for the Post.
They will be helpful for us users.
I really agree on that Animated Images facts, its indeed a good
content for a website to have.
 
0
•••
I go w3schools for any code or scripting doubts, I guess that is the authority.

I also like the way they layout their tutorials.

This is a good thread though.
 
0
•••
0
•••
Thanks for this small tip, I guess everyone can use this today or in the future. Thanks again.
 
0
•••
Don't distract your visitors with blinking or scrolling text, animated GIFs, or auto-loading sound. Don't annoy your visitors with pop-up windows. Don't use image backgrounds.Minimize clicking! Limit page length to 2 screenfuls, or 6-7 screenfuls for articles.
 
0
•••
Thanks

Thanks a lot! It's really a nice post! Very useful for me. Bz I'm just a beginner in web designing. Thanks again
 
0
•••
I would recommend this

hai world ^_^... i usually go to net.tutsplus.com for inspiration and for new tips on web development



do you there any code to use of how to integrate this to html/xml. do you prefer using this in fireworks?

for coding i usually use Notepad ++ the software will highlight the variables for me plus it is an opensource ^^......

and don't forget to use Firebug in Firefox addon it's really helps ^^
 
0
•••
0
•••
They are great tips. Thanks.
 
0
•••
Fantastic tips. thanks a lot for sharing them.
 
0
•••
great tips.I think can yourself provide tutorials.nice work
 
0
•••
Thanks for sharing these nice tips ..Great sharing
 
0
•••
Thanks for sharing this guide with us, ;)

It really helped me.
 
0
•••
nice

hi this is a nice artical and very help for the new web developers
 
0
•••
Do some research into your keywords/industry/competition/customers/etc and find out your positioning in the market, customer expectations/needs, etc.

Create solid calls to action and lead customers through the sales process...
 
0
•••
Nice tips,helpful for the guys who have just started to web designing.
 
0
•••
A Website is Essential, Especially if you're thinking of starting an Online Business. Having a website is a great thing, whether its for personal or business use. Here is a simple guide to creating an effective website that will keep your visitors coming back.
 
0
•••
I like the way you explained. very informative for newcomers like me.
 
0
•••
0
•••
  • The sidebar remains visible by scrolling at a speed relative to the page’s height.
Back