GRAFICKÝ NÁVRH WEBOVÉ STRÁNKY. Lenka Bednaříková

Transkript

1 GRAFICKÝ NÁVRH WEBOVÉ STRÁNKY Lenka Bednaříková

2 DŮLEŽITÉ OTÁZKY PŘED ZAČÁTKEM TVORBY Co je cílem webu Pravidelně o něčem informovat Něco prodávat Zviditelnit se Kdo budou uživatelé stránek (cílová skupina) Demografické znaky (pohlaví, věk, povolání ) Životní styl Počítačová vyspělost Jaké informace by měl web obsahovat Jaké podmínky musí splňovat grafický design Logo, barvy, emocionální ladění

3 KOMPOZICE WEBOVÉ STRÁNKY Logo Navigace Obsah Kontejner Patička

4 KOMPONENTY WEBOVÉ STRÁNKY Kontejner Místo na stránce, kam vkládáme obsah stránky Šířka může být buď proměnlivá nebo pevná Blok identity - logo Měl by být umístěn u horního okraje každé stránky, dává uživatelům na vědomí, že prohlížené stránky jsou součástí jednoho webu Navigace Musí být snadno objevitelný a použitelný u horního okraje stránky Obsah Ústřední bod celého návrhu, aby uživatelé nemuseli informace hledat Patička Umístěna u spodního okraje, obsahuje copyright, kontaktní údaje

5 PROMĚNLIVÁ VERSUS PEVNÁ ŠÍŘKA KONTEJNERU Výhody Pevná šířka Návrhář může lépe stanovit, jak bude vypadat obrázek plovoucí v obsahu Užší textové bloky zlepšují čitelnost Nevýhody Ve velkých rozlišeních může stránka vypadat nepříjemně zakrsle Uživatel nemůže upravovat šířku obsahu Proměnlivá šířka Snadná přizpůsobitelnost různým rozlišením obrazovek a zařízení Snižuje nutnost posouvání obsahu stránky Text v příliš širokých sloupcích se hůře čte Obtížnější realizace

6 ROZLIŠENÍ MONITORŮ 640 x 480 Používalo se na 14 monitorech, které již patří minulosti 800 x 600 Určeno pro 15 monitory, někteří uživatelé ještě používají Stránky optimalizované pro toto rozlišení by měli mít velikost 760 x x 768 Nejvhodnější a nejběžnější rozlišení pro 17 monitory Stránky optimalizované pro toto rozlišení by měli mít velikost 955 x x 1024 Doporučované rozlišení pro 19 a 21 monitory, zvládají i 17 monitory 1600 x 1200 Určené pro poloprofesionální a profesionální práci s CAD

7 STATISTIKA NASTAVENÍ ROZLIŠENÍ OBRAZOVKY Higher 1024x x % 90% 80% 70% 60% 50% 40% 30% 20% 10% % 2013 Zdroj dat:

8 BARVA = mocný komunikační nástroj, dokáže navodil silné a specifické emoce Teplé barvy Vyvolávají aktivitu, vystupují do popředí Červená zvyšuje hladinu adrenalinu, chuť k jídlu, barva vášně Oranžová velmi aktivní a energeticky vydatná barva Žlutá dobře viditelná, pocit štěstí a energie, barva smajlíků Studené barvy Uklidňují, vyvolávají dojem větší vzdálenosti Modrá symbolizuje otevřenost, inteligenci a víru, stabilitu Zelená symbolizuje růst, svěžest, naději, spojení s přírodou Fialová asociována s královskou hodností a mocí

9 BAREVNÉ SCHÉMA = základní vzorec pro vytváření harmonických kombinací barev Monochromatické Složeno z jedné základní barvy různé sytosti a světlosti Analogické Složeno z barev, které spolu na barevném kole sousedí Komplementární (doplňkové) Složeno z barev umístěných na opačných stranách Měkce kontrastní Dvě barvy které sousedí s doplňkem barvy základní Triáda Tři použité barvy mají mezi sebou stejný rozestup Tetráda Doplňkové schéma kombinováno s jiným doplňkovým schématem

10 GENERÁTOR BAREVNÝCH SCHÉMAT Výběr barevného schématu nám usnadní generátor Lze použít např. Color Scheme Generator

11 TEXTURA Dokáže zprostředkovat nebo navodit představu hmatového vjemu, který by vznikl při dotyku s povrchem Texturu můžeme pomocí některého grafického editoru vytvořit, nebo použít již hotovou Stránky obsahující textury volně ke stažení

12 PÍSMO Jediný druh písma Vyvolává harmonický dojem, ale zároveň monotónnost, jednotvárnost, usedlost, nudu Více druhů písma, které jsou si v určitých rysech podobná Vyvolávají nežádoucí a rušivý dojem Více druhů písma, které jsou zcela odlišná Výsledný design je příjemný, přitažlivý, živý, kontrastní, důrazný Slova napsaná všemi písmeny velkými jsou hůře čitelná Pro text dokumentů můžeme použít pouze ta písma, jejichž font má čtenář nainstalovaný na svém počítači tj. Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Monotype, Times New Roman, Trebuchet MS, Verdana, Webdings

13 OBRÁZKY MOŽNOSTI POŘÍZENÍ Vlastní pořízení Fotobanky Bezplatné obrázky Vždy si přečtěte licenční podmínky, jak můžete daný obrázek použít Obrázky nabízené za paušální poplatek (roalty-free) Za vybraný obrázek se platí jen jednou nákup obrázků formou kreditů měsíční předplatné Obrázky s řízenými právy Mají špičkovou kvalitu, platí se v závislosti na velikosti firmy, počtu uživatelů

14 ROZŘEZÁNÍ HOTOVÉHO GRAFICKÉHO NÁVRHU Hotový grafický návrh rozřežeme na jednotlivé části obrázku pomocí nástroje Řezání obrázků Panel vlastností Nápověda Svislý řez Automatický řez Vymazat řez Výběr řezu Vodorovný řez Stejný řez Vymazat všechny řezy Ukotvitelný panel Rozdělení obrázku na řezy Slouží k zadání vlastností vybraného řezu a umožňuje náhled v prohlížeči na webovou stránku

15 ULOŽENÍ HOTOVÉHO NÁVRHU Pomocí nabídky Soubor Exportovat pro síť WWW Název složky Název souboru Název složky s obrázky Důležité zaškrtnout tuto volbu

16 ZAJÍMAVÉ WEBOVÉ STRÁNKY Webové stránky pro inspiraci CSS Zen Garden CSS Beauty Webové stránky s hotovými grafickými návrhy

17 ÚKOL NA ZÁVĚR Podle předlohy vytvořte návrh webové stránky Postup video

18 DĚKUJI ZA POZORNOST