< Zpět na články

Porotcem za design – WebTop100

Jan PatkaJan Patka
10. prosince 2018

Tento rok jsem měl možnost být součástí poroty designu v soutěži WebTop100 a rád bych se nyní podělil o nově získané zkušenosti a také o to, jaké byly nejčastější chyby v designech a co se mi naopak líbilo.

Časová náročnost

Překvapilo mě, kolik času zabere hodnocení tolika projektů. Celkem jsem hodnotil tři kategorie — B2B, agenturní weby a e-shopy. Dohromady se jednalo cca o 45 webů a čas ubíhal nekompromisně.

Než jsem se s projektem seznámil, uběhlo 15 minut. Poté jsem se detailně zaměřil na branding, vizuální styl, typografii a případně kreativu a vše si sepsal. To zabralo zhruba 30–45 minut. Nakonec jsem svůj feedback musel dát do ucelené formy, abych jen nechrlil myšlenky, ale aby obsah byl srozumitelný a přínosný. Suma sumárum, na jednom webu jsem strávil plus mínus hodinu. A najít v měsíci 50 volných hodin už není taková sranda.

předávání ocenění na WebTop100
Předávám ocenění na WebTop100 v jedné z Design kategorií

Feedback

Napsat konstruktivní feedback samo o sobě není těžké. Dobrá řešení jsem pochválil a na špatná upozornil, odůvodnil a navrhl možná zlepšení. Problém byl ale opět ve velkém počtu projektů, které jsem musel hodnotit. Každý web je sice unikátní, ale obsahuje většinou podobné problémy a mně přišlo, že často používám ty samé výrazy dokola. Svůj feedback jsem často upravoval tak, aby byl osobní, srozumitelný a seděl k danému webu. Bohužel jsem se nevyhnul použití některých otřepaných frází.

O to vtipnější bylo, když se během slavnostního vyhlášení vítězů objevil úryvek mého hodnocení: “Velice pěkné moderní řešení, kterému nelze moc vytknout. Na první pohled působí web důvěryhodně a profesionálně.” 

Základní chyby v návrzích

  1. Práce s prázdným prostorem
  2. Kontrast
  3. Typografie
  4. Nekonzistence
  5. Layout

Důležité ale je, jak se tyto chyby vzájemně doplňují a jak dohromady snižují celkový dojem. Scénář byl většinou následovný:

Stránka s nedostatkem volného místa okolo jednotlivých elementů i celých sekcí se špatně skenovala a díky malému kontrastu nebylo jasné, na co se má uživatel zaměřit. Čitelnost dále snižovala špatná práce s typografií, kde opět hrál roli slabý kontrast a nedostatek prostoru. Design často obsahoval mnoho nesourodých vizuálních prvků — od barev, ikon, animací, ilustrací až po fotky. A nakonec layout stránek nebyl vyvážený. Homepage sice mohla zaujmout, ale ostatní stránky už působily nedotaženě a nudně.

Jaké weby mě zaujaly?

Dobrý design se samozřejmě vyvaroval výše popsaných chyb, ale ty nejlepší designy měly společných několik vlastností, které nemusí být viditelné ihned, ale mají výrazný podíl na tom, jak firmu skrze web vnímám a jak se odlišuje od konkurence.

1. Práce s brandem

Weby, které v designu pracovaly s prvky brandu nebo jinak odrážely myšlenky, na kterých je brand postavený, ve mně zanechaly mnohem lepší pocit i přes to, že často nebyly z UI pohledu bez chyb. Použitím brandových prvků se stává váš web originální a lépe odlišitelný od konkurence.

příklad hodnoceného webu

  • Bistro (původní): Originálně spojení vizuálů, copy a hodnot agentury

Jeden z příkladů hodnocených webů

  • Blueghost: Vizuálně není řešení moc propracované, ale myšlenka tu je

Hodnocený web jako příklad

  • ElNino: Zajímavě pracují s kruhovým motivem z loga

2. Detaily

Precizní práce s detaily dokáže z průměrného šablonovitého webu udělat zajímavé dílo. Na první pohled si jich ani nevšimnete a právě v tom je jejich kouzlo. Jde hlavně o drobné animace, ikony, patterny a další drobné prvky, které design oživují.

Příklad správně využitých detailů

Příklad práce s detaily

Vhodné využití detailů

3. Ať je to osobní

Bojíme se neznámého a držíme se toho, co známe. Ukažte kdo jste, jak to u vás vypadá nebo čím jste si prošli. Čím více se toho o vás návštěvník dozví, tím větší ve vás získá důvěru a bude ochotnější nakoupit. Velmi dobrý dojem na mě udělaly firemní stránky, které se nebály prezentovat své zaměstnance, ukázat svoje kanceláře nebo popsat příběh své značky. Důležitou roli samozřejmě hraje samotné zpracování —musí to být tak akorát.

Příklad jak udělat vizuál osobní

Jeden z hodnocených webů

Příklad osobního copy

Jak udělat web víc osobní?

Pomocí copy jde udělat brand osobní

4. Důkladnost

Poslední bod se týká toho, jak pečlivě a důkladně je propracovaný design napříč celým webem. U těch nejhezčích projektů byly vymazlené i ty nejmenší detaily, a to i v případě, kdy byl web velmi rozsáhlý. Navrhnout dobrý vzhled není jednoduché, ale udržet kvalitu při vývoji až do konce, to je teprve umění.

Závěrem

Hodnocení mi vzalo poměrně dost volného času a málem mi odumřely ruce. Jen pro představu, celkem jsem při hodnocení naťukal přes 13 000 slov. Celkově jsem ale rád, že jsem nabídku přijal — stálo to za to. Zdokonalil jsem se ve svém feedbacku a vím zase o něco lépe, na co se při návrhu či kontrole designu zaměřit. Zažil jsem si i svoji minutku slávy při předávání cen a to se taky počítá :)

Jan Patka
Jan Patka

Máte zájem o spolupráci? Pojďme to probrat osobně!