Jste tu poprvé? - Skrýt (musíte být přihlášeni)

8 nejčastějších chyb začínajících webdesignérů

  • napsallefiath
  • sekceWebdesign
  • kategorieZáklady
  • znalostiČlánek je teoretický a předpokládá, že máte alespoň minimální znalosti grafických programů.

31. 12. 2008 v 0:00 17 8 nejčastějších chyb začínajících webdesignérů

Dokončili jste návrh stránek a padá na vás zdrcující kritika? Nevíte si rady, čeho se vyvarovat? Projděte si tento článek.

Upozornění! Zaprvé, tento článek není žádnou kopií článku ze smashing magazínu (http://www.smashingmagazine.com/…ace-designs/) – vznikl nezávisle na něm, z popudu některých začátečníků na našem fóru. Zadruhé, což je důležitější, tyto chyby obsahuje prakticky každý začátečnický návrh. Podstatné ovšem je, abyste se z článku poučili. Ne že hned půjdete vytvořit další design za 30 minut. Pokud jej jen tak proletíte, nemáte na to, tento článek je pro vás úplně zbytečný a nejlepší bude, když půjdete sledovat x-faktor na youtube.

Proč?

Protože webdesign je dle mě velmi zajímavé odvětví grafiky. Ne každý tohle může dělat a hlavně ne každý má tu trpělivost se zlepšovat a pracovat na sobě.

V tomto článku najdete různé neduhy začínajících webdesignérů, které, pokud by vám přetrvaly (mnoho lidí dostává bokovky, tedy práce od známých), vám způsobí mnoho problémů v komerční sféře. Protože dokud si nezkusíte něco, co bude myšleno vážně, jsme jenom u dětského plácání. Webdesign může být skvělý způsob, jak si vydělávat, pokud jste jak dobří webdesignéři, tak dobří obchodníci a dokážete oslovit klienty. A tento článek vám má pomoci s tím prvním. Hlavním rozdílem je to, že v komerční sféře se chyba nedá jen tak omluvit. Ale než se tam dostanete, chvilku to potrvá, pokud jste začátečníci.

Začátečníkem myslím samouky, jako jsem já. Ti, kteří studují designérské školy budou nepochybně nad věcí, takže se budeme dělit o vědomosti pěkně mezi sebou, co říkáte? Slyším ano? Rozebereme si to po krocích. Není to číslováno podle toho, že bych první věc pokládal za tu nejhrůznější, ani že by byla nejvíc vidět, pouze mi přišlo vhodné jednotlivé problémy takto oddělit.

Nepospíchejte hned tvořit podle toho, co si přečtete!

Museli byste být opravdu geniální, abyste hned dokázali tvořit podle toho, o čem budu psát. Tohle opravdu není to samé, jako když se naučíte malou násobilku a pozoruji to u mnoha lidí, takže jsem si tím jistý. Vývoj vyžaduje čas. Proto je tu tenhle článek, abyste se k němu mohli vždy vrátit. Udělejte to. Jedno přečtení nestačí – zapomenete to, nebo se později dostanete do konkrétní situace a budete si chtít oživit znalosti. Tento článek je jiný a pokud jej chápete jako další jednoduchý návod, který vás po přečtení naučí novou techniku, chápete jej špatně.

Po hromadě varování, které jsem ale jednoduše musel vypsat, protože na tom zatraceně záleží, se do toho pustíme.

1. Chybějící představa o tom, co chcete vytvořit

Jako první práci jste zkoušeli vytvořit vlastní portfolio? A víte vůbec, co by tam mělo být? Máte představu o tom, co byste tam umístili. Je dobré si procvičovat tvorbu děláním nových designů, ale svoji cestu si zpomalíte (anebo zničíte) tím, když budete tvořit nesmysly, u kterých nebudete mít ani představu, jak by měly fungovat. Šablona pro „nějakou společnost“ je právě jedním z těžších úkonů, které můžete dělat. V žádném případě to není vhodné pro začátečníka, zkazíte co můžete, a výsledkem bude opravdu něco anonymního, s čím by člověk nechtěl nic mít. Co doporučuji já – máte nějakou oblíbenou stránku? Něco, kde nejste spokojeni s tím, jak to vypadá? Tak zkuste právě tohle předělat. Zůstaňte nohama na zemi a tvořte něco, u čeho víte, jaký má být obsah, co nesmí chybět v navigaci a co může fungovat. To nejhorší, co můžete udělat, je chrlit jeden špatný návrh za druhým.

Ukázkový obrázek od pesare (určitě navštivte její profil na DA, přes odkaz z obrázku výše) – přestože smysl obrázku je jiný, dá se demonstrovat k naší potřebě. Stejně jako člověk nemůže existovat rozpolcený, stránky bez jasného smyslu nemá vůbec cenu tvořit.

2. Webdesignér není grafik!

Je možné, že vás to jako mě překvapí. Jistě jste viděli spoustu krásných designů, tak kde je problém? Problém je v tom, že prací webdesignéra není v první řadě udělat kráskou grafiku, ale sestavit design, který zákazníka nezmate, a on díky tomu nakoupí, nebo bude navštěvovat vaše stránky. Obsah v tomto případě není váš problém, váš problém je vše podat tak, aby návštěvník/zákazník neměl na stránkách problémy. Má vidět obsah, a ne aby grafika na sebe poutala veškerou pozornost (jsou samozřejmě vyjímky, umělecké stránky by takto poutat měly, ale na většinu stránek se toho spíš aplikovat nemá). Pokud dokážete zkombinovat obojí, skvělou grafiku, která zároveň nebude návštěvníkovi bránit v tom nejdůležitějším, tedy sběru informací (internet je o informacích – když koukáte na video, čtete článek, nakupujete – vždy při tom hledáte informace, než něco uděláte), gratuluji.

Webdesignér totiž musí hlavně přemýšlet. Na piplání grafických detailů zbude čas potom. Pokud zkazíte základní návrh, kvalitní grafika ho ze dna nepozvedne.

Znáte klanovky? Že ne? Jde o jistý druh stránek, kterým se tak přezdívá proto, že je nepoužívá nikdo jiný, než herní klany (a kdo ano, tak škodí sám sobě). Klanovky obvykle působí na první pohled dobře, protože mají pěkně vypiplané detaily a lidé si na nich opravdu vyhráli – jenže kde řádil grafik, tam spal webdesignér. Většina klanovek má špatné rozložení prvků a neuvěřitelně příšerně odsazený text.

Klanovka 1
Klanovka 2

Tyto designy prostě nemohou být normálně použity.

3. Problémy s fonty

Pro obsah, samozřejmě, nikdo vás neomezuje v tom, jaký font použijete v hlavičce, nebo nevigaci, nicméně musíte vědět tohle. Na internetu se pohybuje neskutečné množství lidí, z nichž mnoho nemá podobné věci, jako vy. Vy máte váš počítač, a nějaké fonty, které jste si stáhli. Na internetové stránce ovšem můžete používat pouze některá základní písma, u nichž je zaručeno, že je jiní lidé, kteří se na vaše stránky podívají, vlastní. Pokud to nebudete dělat, kodér (to je ta osoba, která vaši grafiku takříkajíc předělá do html) váš sežere. K tomu se vztahuje i další bod, kde tento problém rozvedu.

Základní přehled písem máte zde: http://pixy.cz/…/ukazka.html – je to opět pro kódování, ale každý font máte vypsaný, kódu si nevšímejte. Díky flashi či javascriptu můžete toto omezení obejít, ale jsou to jenom lacinné berličky, takže na to nespoléhejte! Není to rozumné řešení.

Zde příklad ve stylu 60. let.

Proto používejte normální, například 12 pixelů velké písmo a ne tyhle šaškárny. Ušetříte si ponížení.

4. Když se vaše grafika má použít v html

I když nejste kodéři a sami si váš design neumíte převést do html, měli byste mít alespoň základní povědomí o tom, co je v html možné a co ne. Ušetří vám to trable, pokud se bude kodér vztekat, že něco nemůže udělat tak, jak jste to navrhli, nebo že mu to ztěžuje práci. Následně může žádat víc peněz za práci, kterou jste mu přidělali vy. Stejně tak, pokud tomu aspoň trochu rozumíte a dokážete připravit design, který není těžké nakódovat, jistě s vámi člověk potom bude dál spolupracovat raději, než pokud kvůli vaší práci má on sám problémy. Pokud sami nekódujete, zeptejte se na radu někoho, kdo ano. Pokud vám řekne, že něco nejde, nedejte se odbýt a dostaňte z něj, proč to nejde. Je pravda, že v html některé věci zkrátka nejdou, ale máme i další technologie, jako flash, javascript a další.

Největší problémy mohou nastat, když máte dost komplexní pozadí, nebo jednotlivé prvky ruší samy sebe. Kodér nemá možnost vkládat jako vy jednu vrstvu na druhou (v jistém smyslu ano, ale protože potom by to byl spíš obrázek než stránka, dá se to používat jen někde), a musí vyřešit třeba věci s návazností pozadí. Vám pozadí končí na konci dokumentu, kodér musí plánovat, že přijdou lidé s různě velkými monitory a rozlišeními. Zároveň, ke kódování je v naprosté většině případů potřeba zdrojový soubor, třeba PSD. Kodér totiž většinou musí odstranit text z pozadí, a vůbec zneviditelnit různé vrstvy předtím, než bude design rozřezávat pro html. Pokud bude ve vašem zdrojovém souboru bordel, nebude vás mít rád (opět přiděláváte práci a snižujete možnost další spolupráce).

5. Spěch

Zpomalte. Stále jsme v nekomerční sféře a vy si teprve zkoušíte, co dokážete. Nikdo vás nehoní a tvorbou tří designů za jeden den obvykle nic nevylepšíte.

Zde máte ukázku opravdu špatných designů, které byly tvořeny jeden rychle po druhém. Problém je hlavně v tom, že nově nabyté vědomosti nestihnete zpracovat tak rychle. Je fajn, pokud máte zápal a nadšení, ale potom je lepší spíš zkoušet jednotlivé prvky, než pracovat na celém návrhu. Než zahazovat svůj čas tvořením stejně nekvalitních prací, zpomalte. Jděte ven, sejděte se s přáteli, pročistěte si hlavu, vyměňte si pár slov s přítelkyní. Potom se pořádně soustřeďte a pusťte se do návrhu rozvržení stránek. Raději, než tvořit zbytečnosti. Pokud máte problémy s tvorbou kvalitní grafiky, sledujte cizí designy – mohu doporučit svoji sbírku inspirace. Je dobré si obrázek v Photoshopu přiblížit, abyste pochopili, jak se co dělá. Mnoho technik ve webdesignu je neustále opakováno, a pokud vypadají trochu jinak, nemusí být na první pohled zřejmé, že tomu tak je.

6. Špatné odsazení, zarovnání a vzhled obsahu

Což znamená, že text v obsahu vypadá jako neuspořádaný shluk slov. Dá se udělat mnohem lépe, a téměř pravidlem začátečnických designů je příšerné zarovnání. V naprosté většině případů malé odsazení u textu není pěkné. Udělat o trochu větší mezeru obvykle není nijak na škodu. Na toto téma je zde celý článek, kupodivu ho zřejmě čte minimum lidí. Takže co takhle rozběhnout se proti zdi, pořádně si narazit hlavu a začít to používat? Využívejte odstavce, používejte větší odsazení, využívejte různě velké texty – mělo by být vidět, co je obsah, co je důležitá informace, co je odkaz, co je nadpis a tak dále.

A toto je jen jednoduchá ukázka, která není nijak podrobná a k její tvorbě stačí jedna minuta! Z nějakého důvodu však lidé tohle vždy přehlížejí, a potom to dopadá špatně. Odkazuje sem i problém 1., kdy člověk má špatné povědomí o tom, co chce mít na stránce. Proto piplejte vzhled písma, pokud neděláte stránky, kde nebude nic napsáno. A dodržujte zavedené standardy – třeba podtržený text obvykle znamená odkaz, což má navádět lidi v případě, že to není úplně zřejmé, takže to tak nechte.

Čeho já jsem si také příliš nevšímal je vertikální zarovnání – jde o to, že prvky, které jsou nad sebou, by také měly být alespoň částečně zarovnány, vypadá to lépe. Není to něco, co bude každý zkoumat, popravdě si toho lidé zřejmě ani nevšimnou, ale dodá to větší ucelenosti. Na obrázku výše jsou všechny velikosti odsazení stejné, takže i když texty nejsou dokonale nad sebou, jsou dobře sladěné.

7. Barvy

Začali jste se bát? Ne, nemluvím o barevném výběru, budeme mluvit o něčem úplně jiném! Výběr barev lze těžko nějak doporučit, zde rozhoduje váš osobní vkus/nevkus, který se časem vyvíjí. Stránky typu colourlovers.com vám nedoporučím, protože je nepoužívám, a když jsem to jednou zkusil, všichni říkali, že barvy jsou odporné (možná se pletu a prostě jsem tomu nepřišel na chuť, takže vás od toho neodrazuji).

My budeme mluvit o použití barev na zviditelnění důležitých částí stránek. Barvy jsou věc, která je velmi podceňována, přestože se může stát vaší nejlepší zbraní. Snažte se spíš než jednu barvu použít více různých odstínů. Živější barvy jsou dobré, ale je lepší je používat méně a decentní použít na plochy, ze kterých se má číst. Toto je věc, která se odvíjí od 1. – pokud víte, které prvky navigace by návštěvník podle vás určitě neměl minout, použijte agresivní barvu. Pokud jich není moc, řekněme 3–4, je to velmi dobrý způsob, jak přitáhnout pozornost bez toho, že by návštěvník přišel o zrak.

Růžový blemcajz

Pro příklad zde máte jedno úchylné a opravdu špatné řešení. Růžová je opravdu nepřehlédnutelná, ale pouze ruší a nemá žádný smysl, kromě poutání pozornosti (a s tím, jak na stránce trávíte více času, také otravnosti).

Nedostatečné

Jinak elegantní portfolio nemá dostatečně výrazné barvy – autor si netroufl použít něco skutečně odlišného, chladná barva nemá dost síly, aby upoutala.

Správně

A zde je to použito tak, jak by mělo být. Autor správně vybral jenom 3 věci, protože jak jsem upozorňoval, při větším množství ztrácí toto vyznačování svůj smysl. Další na radě je věc, která s barvami obvykle hodně souvisí.

8. Kontrast

Mizerný kontrast písma a pozadí bývá ve většině případů tím největším ničitelem designu. Je to také jedna z věcí, které jsem nikdy nepochopil – třeba mi někdo v komentářích vůbec moci říct, proč tomu tak je, zda jsou ti lidé prostě slepí, nebo šílení. Faktem je, že pokud se jim povede opravdu úspěšná věc, nejde to normálně číst. Úplně nejlepší je použít tmavé pozadí a černý text.

Jakákoliv výraznější barva na pozadí je riziko – jak kvůli tomu, že z ní budou bolet oči, tak kvůli tomu, že se vám snižují možnosti barvy, kterou použijete pro text. Čím silnější barva, tím marnější vaše snaha – ať uděláte cokoliv, text bude slábnout a slábnout. Sice vlastním CRT, ale i vám s přesvětlenými LCD snad musí některý z případů níže připadat minimálně na hlavu padlý.

Ano, ještě to jde přečíst. Nejsem slepý. Jenže podle designů je vidět, že tito lidé zrovna začátečníci nejsou, tak proč dělají takové prasárny? Proč si záměrně vybírají barvu, jejíž opak by byl více kontrastní a bylo by to sakra vidět? Po těchto zrůdnostech tedy ukážeme něco, kde je kontrast využit dobře, přesně tak, jak by to mělo být.

Přestože jde opět o klanovku, tato se mi líbí, protože autor dokázal dobře odhadnout rozdíly mezi barvami písma. Kdyby bylo vše jednou barva, působilo by to příliš jednotvárně a opět bychom měli něco jako bílou vlnu. Tím, že se určité texty ztmaví, obsah lépe vynikne a vše je daleko příjemnější na pohled. A tady to dobře vypadá, takže to používejte.

Teď by se hodil nějaký nesmysl, který by ukazoval špatný příklad z bodů 7. a 8. Máte to mít, ale nebojte se.

Něco je špatně

První věc je právě kontrast písma – kdyby autor použil to, co jsem právě zmínil, vše by byl příjemnější. Takhle máme prostě kupku textu. To horší ale zjistíte, když si projdete položky – co dělá main navigation tak zahrabaná? Navíc v podobě, kdy to vypadá jako nějaký žebříček, tedy podružná věc? Login navigation je zase výstřelek impotentního designéra, který netuší, čím by zaplácl místo. Barevná hra také žádná, pouze jedovaná a nevýrazná zelená v aktivní položce menu. Přitom se vsadím, že červená by tomu skvěle slušela.

Obětoval jsem se, někdo napsat článek na silvestra musel. Proto neručím za to, že je tu ještě něco, o čem jsem určitě chtěl psát a zapoměl jsem to. Pokud na nějaký bod později přijdu, nebo ho někdo zmíní, rád ho přidám. Jak už jsem říkal, tento článek má vydržet a nemá být pouze na jedno přečtení. A doufám, že to tak bude. PF! :)

Petr Široký Profil na fóru / Osobní stránky / Twitter Webdesignér povoláním, kritik přesvědčením, šašek duší, to vše zde najdete. Tutoriarts jsou poslední 3 roky můj největší osobní projekt. Kromě toho se zkouším věnovat jiným menším webovým projektům, živím se jako nezávislý webový designér a snažím se více hledět do budoucnosti, aby tyto stránky vzkvétaly.

Zdrojový soubor : Není k dispozici

Komentáře k článku

Nejste přihlášeni - před odesláním příspěvku vyplňte protispamovou kontrolu níže - váš komentář bude viditelný až po schválení správcem. Pro okamžité schválení se přihlašte, nebo registrujte. Registrace nezabere déle než minutu.

  • :-D
  • 8-|
  • :-/
  • 8-)
  • :-(
  • :-O
  • =(
  • =D
  • :-)
  • <3
  • ;-)

* Povinné položky

  • #17
  • Neregistrovaný kolemjdoucí
  • 26. November 2013 | 17:23
  • Skupina: Neregistrovaní

Panebože ty jsi strašnej ocas stejně hloupý a ortodoxní jako naše byvalá učitelka...pravidla a zákony jsou od toho aby se porušovali a to platí i v grafice, jinak nový a pěkný design ani nevytvoříš. ;) Viděl jsem tvoje práce a nic moc...

  • #16
  • Jimako
  • 9. November 2012 | 12:13
  • Skupina: Neregistrovaní

Parádny článok, díky moc:-D :-D :-D

  • #15
  • nikdož
  • 30. May 2012 | 16:21
  • Skupina: Neregistrovaní

Moc hezky a hlavně srozumitelně napsaný článek. Díky moc za to 8-) :-D ;-)

  • #14
  • lefiath
  • 5. July 2011 | 11:59
  • Skupina: Správci

Článek je hodně starý a jak to bude možné, nahradím ho seriálem, kde tohle rozhodně chybět nebude :)

  • #13
  • heleho
  • 4. July 2011 | 22:53
  • Skupina: Registrovaní Uživatelé

Jen bych doplnil velice častou chybu začátečníků. Nepoužívají Lorem Ipsum, ale napíšou třeba jen Text článku a CTRL C... :) Myslím, že toto by v jinak kvalitním článku nemělo chybět.

  • #12
  • Royal Crown
  • 25. June 2011 | 11:36
  • Skupina: Registrovaní Uživatelé

Nikdy jsem nebyl na psaní komentářů, ale Lefi si to zaslouží... Vynikající článek.

  • #11
  • Svagis
  • 6. April 2011 | 19:18
  • Skupina: Neregistrovaní

Pěkný, sám jsem se v tom našel :-D

  • #10
  • the-amian
  • 14. March 2011 | 18:54
  • Skupina: Neregistrovaní

Ako obdivujem toho teepka. Fakt toto so potreboval počuť skvelo pripravený článok. tento článok by si mali prečítať tý čo sa hrajú na webdesignéroch alebo grafikoch.

  • #9
  • Omni94
  • 14. March 2011 | 16:35
  • Skupina: Registrovaní Uživatelé

oh tak něco takovýho jsem potřeboval, dík moc :)

  • #8
  • Fonio
  • 23. February 2011 | 22:31
  • Skupina: Registrovaní Uživatelé

Hej, a oprav link pod 6. Špatné odsazení, zarovnání a vzhled obsahu "Na toto téma je zde celý článek" :)

  • #7
  • Fonio
  • 23. February 2011 | 22:30
  • Skupina: Registrovaní Uživatelé

Lefiath, veľmi pekne napísané, dosť mi to pomohlo, keďže som začinajúci webdizajner, www.vastudio.sk, bol by som rád keby si mi niečo ohodnotil, ďakujem :)

  • #6
  • Shareaza
  • 17. February 2011 | 17:42
  • Skupina: Registrovaní Uživatelé

Jako teda ... :D co k tomu říci. Kdybych se na to dobrovolně nedala, těchto osm bodů by mě asi určitě donutilo toho raději nechat. Vlastně jsem ráda, že se tady dozvím to, co potřebuji a snažit se to dodržovat. S pravým
web-designem začínám vlastně až teď na škole a určitě to bude několikaletá práce. A snad fakt, že sem ženská a občas na to jako ženská koukám, nebude nijak rušit mé ryze mužské ambice :D
Díky za tutoriarts.cz a díky za takovéhle články.

  • #5
  • Neregistrovaný kolemjdoucí
  • 16. February 2011 | 23:14
  • Skupina: Neregistrovaní

Díky za rady! ;-)

  • #4
  • elvis.costa
  • 14. February 2011 | 12:37
  • Skupina: Registrovaní Uživatelé

Veľmi dobrý článok, určite sa k nemu neskôr vrátim .

Vďaka :)

  • #3
  • skapeR
  • 13. February 2011 | 14:31
  • Skupina: Neregistrovaní

Zaujímavé

  • #2
  • uNo
  • 6. February 2011 | 13:39
  • Skupina: Registrovaní Uživatelé

Veľmi poučný článok! Dík Lefiath ;)

  • #1
  • JS
  • 1. February 2011 | 14:09
  • Skupina: Neregistrovaní

Pěkně!

Nahoru

Autoři: Jakub Houdek, Jakub Šimůnek, Petr Široký a příležitostní sebevrazi