Welcome to Gaia! ::

Design Tips!

I know that a lot of people have trouble with coding, but I think that coming up with a good design for any page is much harder. Why? Because in truth there isn't a lot to html and css, and once you've gotten the basics down its very easy to apply your knowledge to other pages. Design on the other hand is much more difficult to learn because it relies even more on experience, observation and creativity.

And so, here are my tips that I've observed in my web design experience. This isn't a definitive guide; feel free to debate anything you see here or suggest a few of your own.

Maybe this should be in the Resources subforum, but it's still under construction so I thought here would be best sweatdrop Feel free to move it if any of you mods disagree.

On with the show!

1. Stealing is wrong and punishable
You'd think this would be very obvious, but with the amount of stolen material on the web and already a few cases of stealing in Gaia profiles, I thought I'd say it here anyway. Taking a look at someone's code to see how the achieved something is perfectly fine, but it crosses the line when you take their layout in its entirety or their images. Not only is this a reportable offense on Gaia, but its just plain WRONG. People work hard on their graphics and profiles, so be sure to respect that.

2. Don't go overboard with animation.
Okay, so flashy blinky animated thingies might look cool at first... but don't overdo it. Animated things attract the eye to them, and if your page is littered with them it becomes confusing and overwhelming. It's also a common trait of 'n00b' web designers to shove every animated gif they can find on their website, and you don't want to be in any way compared to them =_=

3. Backgrounds are meant to stay in the background.
In general you want a person viewing your page to look at your content rather than focussing on the background. Things such as animated backgrounds, bright colours, loud patterns, and badly tiled images draw the eye and take the background into the foreground, where it competes with the content for the viewer's attention, which goes against what a good background should be! Try stick with less saturated colours, cool colours, subtle patterns and images to keep the background in the background.

4. Animated backgrounds are EVIL.
If you put #2 and #3 together this is implicit, but this really, really bugs me so I had to make it a separate one. I can't recall a single website that uses an animated background effectively, and I doubt I ever will. Just... don't. Please. It makes Chisa's eyes sad.

5. Colour choice is important.
If possible, try steer clear of specifying any colours other than black or white by keyword. Those colours are usually oversaturated and overused; you can have a lot more control by specifying colours in hex. Also remember that saturated colours and warm colours like reds and yellows are very attention grabbing (and thus shouldn't be used too much), and less saturated colours and cool colours like blue are more calm and tend to recede, which is why I tend to use them for backgrounds.

6. Make sure text is readable.
There's a few ways you can do this (or screw it up). Colour is a big one - always make sure there's enough contrast between the text colour and the background that it's easily readable. Font size is another one - I usually use a font size of 11px because I find it neat and more readable than larger sizes, but it depends largely on the font you're using and personal taste. I'd say anything smaller than 10px makes for too much straining. For font faces, sans-serif fonts (thats the ones without the little flicky bits on the ends of letters) are easier to read on a computer screen than serif fonts (with flicky bits - like Times New Roman), so keep in mind that if you're using serifs you might want to go with a larger font size. Left alignment is best for large amounts of text (anything larger than a line or two), because we read left -> right and with centered or right aligned text our eyes have to return to a different position each time. Lastly, italicized or bolded text is harder to read in large amounts, so try to use the minimaly.

7. Times New Roman on the web is EVIL.
Yes, I have a few evil things... TNR is one of them. It looks fantastic in print, but just dies on a web page. As I said earlier the serifs make it more difficult to read on screen, and the aliasing (erm... pixellated~ness, sorta) just makes it worse. And for some odd reason its become the default font on webpages where no other font is specified, which makes it appear a lot on newbie sites. The default font on Gaia is Verdana which looks nice, but if you're thinking of changing the font to something else, just please don't pick Times New Roman. Please.

8. Respect other people's ears.
Meaning, don't let your multimedia start up automatically if it has any kind of sound in it! Music on websites is another pet hate of mine and many others; if you're listening to your own music, suddenly having some random noises or music coming at you is really annoying. Put in a control that allows the viewer to start up your multimedia when and if they want to, or at the very least put in a way to turn it off.

9. Make the background colour of your element similar to the major colour of your background image.
Why? 'cos then you can actually read the content in the (small for some..incredibly huge for others) space of time it takes to load the background. So, for eg. if you have black text that'll show up on your nice pink BG, make the actual HTML elements BG as close a match to that pink as possible.
submitted by Deviant

10. Use CSS instead of images wherever possible.
while in some cases it's inavoidable, it's always a good idea to use CSS and HTML first before using images: it's faster and easier.
for eg. if you have a BG for your headers that is just a flat colour or gives your header a border, why not rather just set the borders and bg colour? eh? Eh?!?!
submitted by Deviant

11. Always credit artists
I know many people who use commissioned pieces in their profiles and they don't say anything about who did them.

I'd like a little tag in the about section that I did your background, ya?
submitted by Bidelle

*

Hokay, that's all I got for now... I'm sure I'll come up with a few more things later. Feel free to dispute any of the things I just said, or come up with your own suggestions for it.

Please, respect my ears!

Alot of people already play music so I really
(really*1000) want to stress the importance of number 8.

I have the pleasure of a seriously ******** up flash install, so no one's multimedia works. ^w^
Ah, bliss. wink
Oh, and as for animated backgrounds, I'm kinda planning on making my background very gently move, just by moving about the parts of the tile. razz
(The Tile)
I'd welcome your opinion, but I think it wouldn't be that destracting, just a tad relaxing. :3

I'll just convert the bugger.
All I've got at the moment is that jaypeg.
It'll be the work of a moment to swap encodings. 3nodding
EDIT: Link

Only freaks don't like water.
heart
All I was really planning on doing was cutting pixels from the bottom, moving the whole lot down and pasting them at the top, so it sorta flowed down the page. whee

Sadly.
Anyway.
Lets remove ourselfs to offtopicness subforumy afore it is too late. wink

Yay, discussion and controversy already xd

@Sors: I realise that doing that does require people to have Flash and a bit of effort to stick the control in, and I know that some Flash movies taken from other sites can't be edited to include such controls... but I'm still of the opinion that if you can't put the control on there, you shouldn't put it on your page at all. I know a lot of people will disagree with me, but I just really hate it when random music or noises start up unexpectedly xp

@Che: Agreed, like, to the power of infinity. Plus one xd

@PrincessNeko: I can't actually see the Sailor Cosmos in Firefox... I can see her in IE, but she's not animated O_o Anyhoo, I think that (even if she was animated) she'd be more of a feature than a background, especially as you're not trying to put anything on top of her and expecting people to read it. I think that's fine. I didn't want to say only tiled backgrounds though, because the last time I said that the person in question said that it wasn't tiled, it was actually one large image... which is much worse xp

@Mwa: Hrmm... hokay, this is just an opinion, but I think the background tile is a little too 'busy' as it is sweatdrop It tiles seamlessly which is good, but... I dunno, its not working for me and I don't know exactly why. Could be that tiled water backgrounds seem a bit cliche to me sweatdrop Once again, just opinion.

@Deviant: Oh god yes! Damn Comic sans mad

I love Verdana, a lot of peole use Arial but I think its a little too narrow, and it has a bit of an outdated look after its vogue in the 70's. I usually prefer serif fonts for print, although I guess it depends what look you're going for 3nodding

Oooh, the backgrounds thing is a useful idea! Sometimes if a page is taking too long I just assume the person made the text colour stupidly unreadable, and just leave the page sweatdrop I'll definitely add that one in.

I agree with the second one too, although I haven't seen many cases of that on Gaia yet.

Hear hear evil