Kvalitní a přitažlivý grafický design je nezbytnou součástí každého dobrého webu. Za designem se skrývá mnoho teorie, na kterou se ve zkratce podíváme v tomto blogu postu. Mnozí z nás umí používat Photoshop a vytvořit v něm design, který vypadá atraktivní a poměrně dobře. Za designem, který vytváříme, je obrovské množství teorie. Znalost této teorie je chybějící částí pro mnohé (talentované) designéry. V dalším textu ve zkratce probereme 5 základních oblastí, které by měl dobrý webdesignér ovládat.
Typografie
Typografie tvoří 80-90% z web stránky. Při množství informací a textů, které denně procházíme, je nutné udržet co nejjednodušší a nejrychlejší způsob, jak se dostat k informacím, které potřebujeme. Dobrá a přehledná prezentace obsahu na webu je stejně důležitá jako pěkná grafika a vymakaný copywriting. Typografie (na webu) není jen o výběru některého z fontů. Typografie na webu se skládá ze 4 základních elementů:
1. kontrast: texty na webu jsou k tomu, aby se četly. K tomu, aby se četli dobře, je vhodné použít správný kontrast barvy písma a pozadí. Pokud si nejste jisti, zda je kontrast dostatečný, udělejte si screenshot ze stránky, vložte jej do např. Photoshopu a změňte jej do grayscale.
2. velikost písma: příliš malé písmo je obtížněji čitelné a proto, pokud je to možné, nenastavte velikost písma v pod 10 nebo 12px.
3. hierarchie: měnit velikost písma je jednou z nejlepších možností, jak rozlišovat obsah. Další z možností je mixování různých stylů, například používat kapitálky nebo italic pro podnadpisy, nebo smíchat serif a sans serif.
4. místo (space): nebojte se nechat na vašem webu prázdná místa , tento negativní nebo bílý prostor napomůže k tomu, aby byla pozornost zaměřena na text - obsah. Dobří návrháři ve snaze o dosažení rovnováhy mezi barvou písma a bílými (nebo negativními) místy tráví nad svými návrhy poměrně mnoho času.
Teorie barev
Použité barvy a barevnost webu patří k jeho nejdůležitějším aspektům, neboť pomocí barev lze vyvolat v lidech emoce. Barvy dělíme na teplé a studené. Mezi teplé barvy řadíme např. červenou, oranžovou a žlutou. Modrá, fialová a zelená jsou studené barvy. Jako základ pro pochopení barev a vztahů mezi nimi slouží tvz. barevný kruh , který představuje rozdělení barev do tří skupin (primární, sekundární a terciární). Primární barvy jsou červená, zelená a modrá (RGB) a jejich kombinací dokážeme vytvořit všechny ostatní barvy. Sekundární barvy vznikají kombinací dvou primárních barev a terciární barvy vzniknou tehdy, když zkombinujeme jednu primární a jednu sekundární barvu. Barvy můžeme rozdělit na analogické a komplementární, čímž vyjadřujeme vztah mezi nimi.
Analogické barvy jsou umístěny vedle sebe a můžeme je tedy dobře kombinovat. Komplementární barvy jsou naopak na barevném kruhu umístěny naproti sobě a díky tomu dokážeme dosáhnout dostatečného kontrastu na našem webu. Kromě toho známe monochromatické či triadické barevné schémata.
Nejdůležitější věc, kterou byste měli mít na paměti, je že barvy ve vašich grafických návrzích by měly zlepšit zážitek ze čtení a ne odvádět od něj pozornost. Při výběru těch správných barev vám pomohou online nástroje, například. Adobe Color CC / Adobe Kuler (color.adobe.com).
Design založený na gridech
Když toho už víte hodně o typografii a barvách, je čas podívat se na grid systém ve vašem designu. Gridy umožňují designérovi vytvořit design, který je přehledný a čitelný. Grid systémy jsou skvělou pomůckou při umísťování jednotlivých prvků do designu. Jedním z příkladů grid systémů je 960gs, jehož základ tvoří sloupce o celkové šířce 960 pixelů, které jsou rozděleny na 12 a 16 sloupců. Systémy se tedy liší v šířce sloupců, 12 sloupcový má sloupce o šířce 60px a 16 sloupcový o šířce 40px. Každý sloupec navíc obsahuje 10pixelový margin vlevo a vpravo. 960 grid systém je vhodný pro rychlé prototypování, ale funguje dobře i v produkčním prostředí. Použitím tohoto systému lze rozdělit si jednotlivé části webu tak, aby vždy působily vyváženým dojmem. Grid systémů je samozřejmě více, každý si může zvolit takový, který mu více vyhovuje. Rozhodně je ale velkou výhodou grid používat.
Teorie designu
Design vaší webstránky je důležitý iz marketingového hlediska, bude na něm záviset prodej vašeho produktu. Proto je dobré držet se některých základních pravidel. Prvním z nich je vizuální hierarchie. Tímto pojmem se myslí uspořádání webu, v jakém jej vidí uživatel. Jelikož některé části vaší stránky jsou důležitější než ostatní (jde zejména o formuláře, call-to-action prvky, value propositions apod.) chcete, aby na ně návštěvníci klikali. Zlatý řez (řecké písmeno phi) je nejstarším a nejpoužívanějším kompozičním principem, který má své využití i ve web designu. Nebojte se bílého místa na webu. Bílý prostor (negativní prostor) je část stránky, která není použita. Neměla by však být považována za nevyužitou, je jedním z důležitých elementů ve web designu. Správně využitý bílý prostor podporuje vizuální hierarchii a zlepšuje přehlednost webu.
UI & použitelnost
Dobrá uživatelnost webu závisí na mnoha faktorech. Responzivní design a tedy dobré ovládání i na mobilech či tabletech je v současnosti trendovou a velmi potřebnou záležitostí. Kvalitní hosting a tedy rychlé načítání stránek a platné linky také napomáhají k dobré použitelnosti. Základním principem je přehlednost - uživatele je snadné "ztratit" rušivými prvky a pokud na vaší stránce nenajde co hledá, odejde. Úkolem dobře nadesignovaného webu je poskytnout uživateli jednoduchý, přehledný a user-friendly zážitek . s uvedením adresy a telefonního čísla.K dobré použitelnosti webu v neposlední řadě patří relevance.Musíte poskytovat obsah, který vaši návštěvníci hledají a váš design by jim měl pomoci najít to, co hledají.Dobrá použitelnost se dolaďuje delší dobu, vyžaduje uživatelský průzkum a neustálé testování.
Dobrý webdesignér by měl ovládat i tuto teorii a tudíž by měl umět nejen „jak“ to udělat, ale i „proč“ to tak udělat. Potom následuje tvrdá práce na sobě, neustálé vzdělávání se, sledování trendů a zkoušení. Pokud byste se chtěli dozvědět více, máte možnost zúčastnit se kurzu Visual Design , na kterém se během 6 týdnů naučíte základní designérské principy a techniky a vytvoříte logo, základní design manuál a design webu.
Mám na starosti marketing a operations v Skillmea | (spolu)organizujem programátorský workshop Rails Girls Bratislava | ambasádor EU Code Week na Slovensku