20 tipů pro váš lepší webdesign
16/08/2006 / Webdesign
Jelikož kamzík je tvor vzácný, zmije bojácná a bouřkám jsme se vyhli, dovolenou v zemi tureckých záchodů a balkánského sýra jsem přežil ve zdraví. Ba co víc, tělu i mysli jsem dal v chladném horském vzduchu bohatě odpočinout. Na práci i tedlencten internet jsem na těch 14 dní slastně zapomněl. Ale vše krásné jednou končí, práce volá a blog si žádá příspěvky.
Původně jsem zamýšel vydat Tipy pro webdesign ještě před odjezdem, ale časová tíseň mi to nedovolila. Takže přichází na řadu nyní. Neberte je jako dogma, neberte je jako že vám cpu nějaké svoje moudrosti. Je to taková syntéza zkušeností a rad, které se vám mohou hodit, anžto je občas dobré se jimi řídit.
1. Všechno si zaznamenávejte
Na záchodě, v autobuse, na přednášce. Tam všude vás může napadnout skvelá myšlenka, a když ji nezaznamenáte, zmizí. Zapomenete na ni. Ideální je pro každý projekt mít jeden papír a na ten myšlenky doplňovat.
2. Udělejte si skicu
Možná nejste zvyklí kreslit, ruka vám ujíždí a linky jsou roztřesené, ale kreslete. V nákresu nejde o stíny a přechody, jde o kompozici a velikost prvků. Ujistěte se, zda jste nezapomněli zahrnout každičký požadavek ze zadání. Papír se skicou a ten s myšlenkami držte pohromadě.
3. Buďte kreativní v kompozici
Hoďte hlavičku vlevo do vertikály, použijte třísloupcový layout, cokoli. Je dobré se čas od času vyhnout stereotypu header nahoře — menu vlevo — body vpravo. Ale zase to nepřehánějte.
4. Inspirujte se
Inspirujte se v provedení, inspirujte se v kompozici, inspirujte se v detailech. Ale držte se desatera, které to říká jasně — nepokradeš! Hranice mezi inspirací a krádeží může být tenká, držte si od ní raději odstup.
5. Zapněte si mřížku
Dejte jí rozdělení po 100 bodech s 10 segmenty a čas od času podle ní zarovnejte nebo upravte rozměry. Kodérovi se určitě lépe dělá s hlavičkou 650x70 px, než 634x72.
6. Používejte paletku info
Zapomeňte na měřítko pro vzdálenosti či kapátko pro zjištění barevné hodnoty. Naučte se tuhle paletku používat, sledujte co umí a přiroste vám k srdci.
7. Čitelnost na prvním místě
Dobrý design se pozná podle toho, že je krásný i použitelný. Jestli vám na tu světle modrou nejde nic jiného, nežli titěrné bílé písmo, začněte znovu. Ověřte si dostatečný kontrast písma. Krásná, leč samoúčelná grafika je k ničemu.
8. Odkazy od sebe
Na váš web nepřijdou jen teenageři s myší Logitech vytrénovaní headshoty v CounterStriku. Pamatujte na starší či hůře pohyblivé a předcházejte frustrujícím překlikům tím, že odkazy (např. v menu) od sebe umístíte v dostatečné vzdálenosti.
9. Jesus saves
Tak si z něho vemte příklad. Ukládejte často, nejlépe do dvou souborů.
10. Používejte placené fotobanky
SXC je profláklé, nejlepší kusy dávno vybrané a tisíckrát použité. Zařiďte si VISA kartu a za 1 dolar můžete v placených fotobankách vybírat ze statisíců kvalitních fotek, které ve free fotobankách těžko najdete. Pro začátek zkuste třeba istockphoto.
11. Neobjevujte znovu kolo
Trojúhelník je výstraha, obdélník informace. Nesnažte se měnit to, co osvědčeně funguje.
12. Nechte se zkritizovat
Hlavně v začátcích je zpětná vazba důležitá. Najděte někoho zkušenějšího a zeptejte se ho na jeho názor. Neptejte se mas ve veřejných diskuzních fórech, je to téměř ztráta času.
13. Nebojte se změn na poslední chvíli
I když jste to od začátku plánovali jinak, někdy je dobré odklonit se od původního záměru a zkusit provést nějaký ten prvek jinak. Vždycky máte přece zálohu, tak se nebojte.
14. Čtěte
Čtěte odborné články v angličtině. Nainstalujte si do Firefoxu Seznam lištičku se slovníkem a nic už vám nezabrání nasávat ze sebe moudrost elitních designérů.
15. Dejte si pohov
Minimálně jednou si dopřejte odpočinek. Skočte vyvenčit psa, umyjte nádobí, na chvilku si lehněte. Důležité je mít odstup a čerstvý zrak.
16. Dodržujte hierarchii prvků
Správné odstupňování prvků, ať už jejich velikostí či barevnou výrazností, umožňuje snadnou orientaci na webu. Dbejte i na jejich logické oddělení.
17. Naleštěte to
Pořád to nevypadá? Tak tam hoďte nějaký ten přechod, zaoblený roh a stín. Otrlejší mohou zkusit i šikmé proužky (letos na podzim bude móda proužků zprava doleva.)
18. Pohrajte si s patičkou
Manažeři vám budou koukat na boty, webdesigneři na patičku. Vtipně doladěná patička je třešničkou na vašem webovém dortu.
19. Nedělejte se s tím, co můžete výhodně koupit
Nejdou vám 3D ikonky? Kupte si je. Ušetřete si trápení při výrobě i žal nad výsledkem.
20. Udělejte si v tom pořádek
Pojmenujte vrstvy, uspořádejte je do sad. Udělejte si systém v adresářích. Výhodné je pojmenovávat adresáře např. „06_08_Kadernictvi“. 06 je rok, 08 měsíc. Za to dáte název firmy a přehledný systém je na světě.
Tak a je to. Ani to nebolelo, ne?
Novější: Grafický design: Sny a realita »
Komentáře pro článek: 20 tipů pro váš lepší webdesign
[3] Ošklivý sup, 16/08/2006
Jojo, taky sem chtěl poznamenat, že každý proužek jde zprava doleva :-)
(krom toho co jde rovně dolů)
Proboha proč je povinný mail v komentářích?
[4] Jakub Švehla, 17/08/2006
Chtěl bych se zeptat, kde se dají stáhnou ty 3D ikonky???
[5] Jiří Tvrdek, 17/08/2006
[4] Trochu rest z minula, na který se zapomnělo. Už to povinné není, momentálně odstraňujeme hvězdičku.
[5] Zmiňované istockphoto nabízí krom fotek i ikonky a vektorové objekty, iconsety se dají koupit i na templatemonster.com, popřípadě na serverech typu www.iconshock.com.
[6] habendorf, 17/08/2006
“Tak tam hoďte nějaký ten přechod, zaoblený roh a stín.”
A kodér ať se z toho třeba podělá :o)
Nejvíc asi miluji dva na sebe kolmé gradienty, jeden třeba vertikální na body a pak horizontální třeba jako stín stránky (samozřejmě s kulatými rohy). Při gumovém layoutu radost kódovat.
[7] Littlemaple, 17/08/2006
[7] Musíš ale uznat, že všechno nějak jde. A když se to povede hezky, může pak na sebe být kodér hrdý, že něco takového překonal. A třeba i nějak elegantně. Popravdě potom mě taková práce opravdu baví a je to radost kódovat :) .
[9] Jakub Švehla, 17/08/2006
Škoda, že ještě nemůžu mít svoji kreditku… To bych si hned nějaké fotky nebo ty 3D ikonky koupil, jsou fakt pěkný a 1$ není nějak moc… Ale naši myslím nemají moc rádi nakupování přes internet…
[11] Jiří Tvrdek, 17/08/2006
[11] Přístup ke všem fotografiím má každý, kdo se registruje. Pomocí platební karty si člověk koupí od 10 do snad 500 kreditů, cena jednoho kreditu odpovídá jednomu dolaru.
Od rozlišení se pak odvíjí cena fotografie, pro web začíná na 1 kreditu a končí na nějakých 20 kreditech za A3 (pokud je k dispozici). Vektorové iconsety a ilustrace se pohybují od 5 kreditů, ale dají se často sehnat i levněji v bitmapě.
Koupě nových kreditů je otázkou dvou minut, stačí zadat číslo karty, datum vypršení a nějaké kontaktní údaje, které se dají pohodlně načíst z profilu. Zůstatek na kartě je okamžitě zkontrolován a kredity přičteny.
[12] habendorf, 17/08/2006
[8] To máš pravdu, i když to tak z mého příspěvku nevypadá, souhlasím s tebou. Jen je problém v tom, že si málokdo uvědomuje, že je to velká spousta práce navíc a hlavně – že je třeba ji zaplatit :o)
[14] GurmetKlub.cz, 18/08/2006
Krásné “dvacatero”. Není nad efektivní tvorbu webu. Nákup grafických prvků na internetu šetří nejen čas, ale ve finále i peníze.
[15] Marek Prokop, 18/08/2006
Moc hezký článek (a moc hezký design blogu), díky. Škoda, že nejsem grafik, takže většinu rad nevyužiju.
[17] Saša Pánek, 20/08/2006
Spravny grafik nedodrzuje bod 20 ;]
[18] Pavel, 21/08/2006
Radis vtipne zpracovat paticku – nejak zde na blogu nevidim tve vtipne ztvarneni paticky (prosty konec opakujiciho se obrazku na pozadi v DIVu)
[19] Jiří Tvrdek, 21/08/2006
[19] Geez, to od nynějška budeš kontrolovat každý web který udělám a budeš zkoumat, jestli dodržuji tohle dvacatero?
[20] Saša Pánek, 21/08/2006
No, ale kdyz uz to radis jako dvacatero tak by ses ho mel drzet ne? ;]
[21] Jiří Tvrdek, 22/08/2006
Ale kdepak, tohle je můj blog a můžu si tady dělat co chci. Dokonce mazat nevhodné komentáře!
Ale neudělám to, abyste viděli, jaký jsem lidumil.
[22] Saša Pánek, 22/08/2006
Slibujes, ze nesmazes zadny nevhodny komentar i kdyz to bude primy utok na Tvoje vytvory, slibujes? ;]
[23] Jiří Tvrdek, 22/08/2006
[23] Ne, budu mazat co se mi zachce a kdy se mi zachce, hehe.
[1] Tomáš Kučera, 16/08/2006
Díky za pěkný článek.
Bod 5: Svatá pravda, když jsem nedávno kódoval jeden tvůj design (přes Honzu Rozehnala :) šlo to pěkně od ruky. Kdyby měl v tom každý takový pořádek…
Bod 15: Nevím, jestli to je módou, ale snad všichni grafici mají hafana :) Člověk je pak shání a oni se venčí. Ti grafici…