Hello,
I'm Mervi Eskelinen!
An artist, nerd and sorcerer, dedicated to make world softer and better for everyone, and to get you to make more art. Make art, change the world!
A couple of web design tips
As someone who's job is to make websites look good and work well, I'd like everyone to use professional help with their web designs. Unfortunately this isn't always a possibility. I get it.
An attractive and accessible design with the interesting content will lure more visitors, invite them to come back and stick around. And a good design will give a boost for your content as well. It'll improve readability besides of looking good. It works also as a sign of professionalism and tell that you are really invested in your site.
The following tips are aimed mainly for those who aren't exactly professional in web design. Such as bloggers and so forth. Read all the tips after the jump.
\
Mind the width
Remember this: Still today most computer displays are set to resolution of 1024 x 768 pixels. That means any website width higher than 1024 pixels will result to horizontal scrolling on a screen like that.
If horizontal scrolling isn't what you want to create, I truly recommend to keep the maximum width of the site around 960 pixels. Of course this doesn't (exactly) apply to fluid or responsive designs.
In any case, remember this: The width of a text column shouldn't be (or be able to spread) too wide, because it'll make reading slower.
Space is your friend
It's usually called white space, but it doesn't have to be literally white. Space between elements gives air and calms the design.
Leave space between columns (like the text area and a sidebar). Make sure photos and other images stand out with some room around them.
Give the lines a bit extra height, but don't go overboard with it. Let the paragraphs breathe and subtitles pop.
Don't be afraid of bigger fonts
Small font sizes are often seen as something more cool than bigger ones. Small font sizes may give a kind of a professional look for a site, but actually they just make the texts harder to read.
Reading something written with small font sizes is like reading something written in small print. You know, that junk of disclaimer text nobody wants to read really. Gives a headache.
Giving the fonts on your site a little bit more body makes the texts easier to read. Try 14 or 15 px. Again, don't be silly with this: Too big is too big.
Speaking of fonts: Don't overuse them
Unless you really really know how to make a bunch of different typefaces look great together, keep the amount in maximum of three.
Too many different fonts are likely make the design look busy and most likely ugly. Unless you really really know what you are doing. It makes reading difficult too.
There are ways to inject all sorts of cool fonts for your site. However, remember that all the important texts (such as the content of your blog entries and information contents) must be in simple looking fonts. Arial isn't shameful and it's pretty readable.
Careful with all those colors
I have seen many sites that use a whole range of colors, but there are some that are just too colorful. Unless you are really good with combining colors together, don't use too many of them.
Of course if there are photos, videos and other image content on your site, they will add more color to it. The max three rule doesn't apply to these. It's the base design that needs to be toned down.
If you are unsure, use earthy colors or plain black and white, with an accent color for links and such smaller contents.
Contrast, contrast, contrast
Bright teal text on white is a bad idea. Or white on yellow. Or dark grey on black. Obviously.
Make sure there's enough contrast between the background and the foreground (text and other content). Black text on white is the safe way.
Be consistent
If your links are blue here, they should be blue there too. There are some things you can change without confusing the people using the site.
But (of course there's a but) give them clues on how to move around the site, how to interact with it. And then, when they've got the clues, don't change the rules of the game in the middle of it.
Basically the idea is to make sure the users will understand the logic of your design and they won't get lost on the way. Simple as that.
More quick tips
- Don't center long texts. It's terrible to read and makes you look like a true amateur.
- Use underlining for inline links (the links within a text content). They will pop out as links better than with other sorts of emphasizing. Also don't use underlining for anything other than links.
- Keep the navigation simple. If possible, don't have more than five links in main navigation.
- Don't clutter. Too many ads and banners make your site look busy and messy.
- Highlight the most important. Use buttons, emphasized text and so forth (with keeping the previous tip in mind).
This is a reader supported blog without paywalls and advertisement. If you appreciate my work and want to help me rewild the internet, please consider becoming a free or paid patron today. I can't do this without the support of readers like you. So if you can to contribute financially, I would really appreciate your help.
