GRAFICKÝ NÁVRH WEBOVÉ STRÁNKY Lenka Bednaříková
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í
KOMPOZICE WEBOVÉ STRÁNKY Logo Navigace Obsah Kontejner Patička
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
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
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 420 1024 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 600 1280 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
STATISTIKA NASTAVENÍ ROZLIŠENÍ OBRAZOVKY Higher 1024x768 800x600 100% 90% 80% 70% 60% 50% 40% 30% 20% 10% 2007 2008 2009 2010 2011 2012 0% 2013 Zdroj dat: http://www.w3schools.com/browsers/browsers_display.asp
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í
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
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
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í http://www.grsites.com/archive/textures/
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
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 www.sxc.hu www.pixmac.cz www.publicdomainpictures.net Obrázky nabízené za paušální poplatek (roalty-free) Za vybraný obrázek se platí jen jednou www.istockphoto.com nákup obrázků formou kreditů www.shutterstock.com 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ů http://www.zive.cz/clanky/kde-na-internetu-najit-kvalitni-obrazky-zdarma/sc-3-a-158028
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
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
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 http://sablony.webcesky.cz/ http://www.free-template.eu/ http://www.templates.cz/ http://www.webove-sablony.com/sablony.aspx http://www.sablony.org/
ÚKOL NA ZÁVĚR Podle předlohy vytvořte návrh webové stránky Postup video
DĚKUJI ZA POZORNOST