Three pillars of (web)design

2008-01-27

…at least from my point of view.


Typography (or whatever you want to call it; the way letters are handled)

If it’s unreadable, your visitors will not be able to read anything, the more readable your website is, the more they will be able to read.

One of the most common cause of problems is “liquid layout”. Say what you want, but having 150 letters on one line is no good. Wikipedia is guilty of this. They try to make up for it by having short paragraphs, which usually works rather well (or you can resize your browser window, but I like to keep it fullscreen), but it’s far from optimal.

Another common problem is “designers” raping the letters by setting unusual letterspacing. This can be excused in titles and such, but having longer text with any letterspacing but default (be it lower or higher) should be a prisonable crime.

Wisely choosing linespacing (line-height) can also significantly help improve the readability – the longer the lines, the bigger linespacing you should use.

It’s usually a bad idea to set text-align to “justify”. That’s because today’s browsers can’t break words. I use justified text here, because I think it looks a bit better, but maybe I should drop it (comments are welcome! ;-))

And one more thing… the letters should be in a colour that is readable on the chosen background… which brings us to the next part:


Colours

Colours are very important, as they are the first thing your visitor will notice. What colors you should use depends largely on your audience, but you should just use common sense (don’t be like the wackos who use completely black background surrounded by the shiniest green you could imagine :-P).


Whitespace

I consider whitespace (the empty areas that are not filled with anything, they don’t necessarily have to be white ^^) to be the most important and most overlooked aspect of webdesign. If you need to separate two elements, inserting some white space is the most natural and effective thing to do. The more of it, the more separated the elements become. It’s actually amazingly simple.

← Walking as a means of transport Native speakers' spelling →

11 thoughts on “Three pillars of (web)design”

ignus 2008-01-27

“Prisonable” is not a word… It should be “punishable”

tasuki 2008-01-28

Thanks for correcting me, I’m always happy to improve my English… But you know, you could have included a comment concerning the actual content, too. :P

And I really thought it was a word. I must’ve read it somewhere, wouldn’t have written it otherwise.

Also, “punishable” would have a slightly different meaning than what I intended.

Ondra 2008-01-28

Od svého prvního a posledního komerčního webu se necítím být webdesignerem, takže jenom můj názor uživatele. Mám “liquid layout” rád protože si pak můžu sám nastavit šířku stránky změnou šířky okna a taky si často reguluji velikost písma čemuž je tento layout přizpůsobivější. Na brouzdání fullscreen nepoužívám, protože chci mít zbytek obrazovky využitý něčím jiným (třeba druhým prohlížečem). S mým horizontálním rozlišením 2832px by taky byl fullscreen browsing trošku nepraktický :).

ignus 2008-01-28

Yeah, sorry about my short post, but I have never designed a webpage in my life, so I don’t really have an informed opinion…

But I think you will find this link amusing.

tasuki 2008-01-31

orwen: vidis, to me nenapadlo, ze mozna hodne lidi pouziva horizontalne zmensene okno… to je docela dobry argument :)

ignus: great link ^_^

Drc 2008-01-31

Schvalne jsem si zkousel (z nejakych nudnych duvodu) nadefinovat v LaTeXu diplomku tak aby splnovala formalni pozadavky.

Pri te prilezitosti jsem dospel k dvema zaverum: a) pozadavky jsou stanoveny tak, aby, kdyz uz je ta prace obsahove o nicem, alespoň co nejhnusněji vypadala b) veskere normy (napriklad ČSN 01 6910) jsou udelane pro psaci stroje, v lepsim pripade pro Word. Word je tam skutecne explicitne uveden (verze z roku 2002 – mozna existuje i z roku 2007, ale tu se mi nepodarilo sehnat). No, alespon podle me by norma mela byt OBECNA…

Kdyby nekdo z vas mel najeke linky na stranky, kde jsou pekne popsany typograficke zvyklosti tak at se se mnou (prosim, prosim) podeli :-)

Drc 2008-01-31

Nezapomel jsem rict, ze za tu normu chteji 700? >:-(

tasuki 2008-02-01

Jednoznacne nejlepsi popis ceskych typografickych zvyklosti ma typomil. Ten clovek nejenze vi, o cem pise, ale dokonce ta pravidla sam dodrzuje. ;-)

Kdysi jsem kdesi videl velice dobry navod jak na typografii v (La)TeXu, ale ted ho bohuzel nejsem schopny najit. :-

Drc 2008-02-01

Díky :-)

Jeste doplnim, ze ta norma z roku 2007 skutecne existuje (akorat ji MU zrejme nema koupenou) a v jejim nazvu jsou uz psaci stroje vypusteny – takze mozna obrat k lepsimu :-) (cena taky vzrostla ;-()

tasuki 2008-02-03

Na normy se vykasli. Sice je neznam, ale predpokladam, ze obsahuji naprosto nahodna pravidla.

Budes-li dodrzovat typograficke zasady/konvence/pravidla (ktere na rozdil od vselijakych absurdnich norem plati jiz nekolik staleti, a je docela dobra sance, ze jim to jeste par staleti vydrzi ;-)), bude to urcite lepsi.

Drc 2008-02-04

Pravdu dis moudra sovo…

Add your commentHow does this work?