Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

Návrh a tvorba WWW Přednáška 9 Web design. Základy webové typografie Ascender (horní dotah): Je to výška nejvyššího znaku v písmu. Obvykle je to písmeno.

Podobné prezentace


Prezentace na téma: "Návrh a tvorba WWW Přednáška 9 Web design. Základy webové typografie Ascender (horní dotah): Je to výška nejvyššího znaku v písmu. Obvykle je to písmeno."— Transkript prezentace:

1 Návrh a tvorba WWW Přednáška 9 Web design

2 Základy webové typografie Ascender (horní dotah): Je to výška nejvyššího znaku v písmu. Obvykle je to písmeno f, h nebo ozdobný prvek, pokud ho dané písmo obsahuje. Baseline (účaří): Pomyslná čára, na které by měly ležet všechny znaky. Cap Height (výška velkého písmene): Jedná se o výšku velkého písmene v písmu. Není stejná jako výška znaku. A ani to nemusí být nutně výška všech znaků. Descender (spodní dotah): Jedná se o nejnižší část znaku. Obvykle g nebo y, s výjimkou toho, když má písmo ozdobné prvky. Kerning (kerningové páry): Definování minimální mezery mezi znaky. Leading (řádkový proklad): Velikost mezery mezi dvěma řádky v sekci. Optimálně se volí velikost polovina velikosti fontu. Letter Spacing (prostrkání písmen ): Zvětšování mezery mezi písmeny (ve zlomcích em nebo v procentech). X-Height (střední výška písma): Výška malého písmene obvykle měřená podle písmene x v příslušném písmu.

3

4 Velikost fontu Velikost fontu je nezbytně nutná k vytvoření správné hierarchie textu. Je vhodné volit relativní velikosti fontu ve vztahu k základní velikosti fontu stránky. Níže je uveden příklad, kdy základní velikost fontu stránky je 12px, velikost fontu paragrafu bude ve výsledku 15px. body {font-size: 12px;} p {font-size: 1.25em;}

5 Vertikální rytmus Vertikální rytmus zlepšuje čitelnost obsahu a pozitivně působí na estetiku stránky. K dosažení vertikálního rytmu postačuje každému paragrafu definovat margin nebo padding rovnu základní velikosti řádku. body {font-size: 12px; line-height: 15px;} p {margin-bottom: 15px;}

6

7 Délka řádky Dlouhé řádky se stávají pro čtenáře špatně nečitelné, protože čtenář stráví dlouhou dobu při navazování textu (delší doba při lokaci začátku toho správného řádku).Optimální délka řádku je mezi 40 až 80 znaky včetně mezer. Vhodnou délku řádku lze jednoduše dopočítat prostřednictvím pravidla x30. Když máme velikost písma 10px a vynásobením 30ti, dostaneme velikost řádku obsahující přibližně 65 znaků. p { font-size: 10px; max-width: 300px;}

8 Typografická mřížka Typografická mřížka pomocný rastr skládající se z řady stejných obdélníků nebo čtverců, vzniklých rozdělením stránky na několik stejných vodorovných pruhů. Do této mřížky umisťujeme veškeré texty i obrázky. Typografická mřížka podporují konzistenci všech stránek webu.

9 Font Font je definován jako kompletní sada znaků abecedy jedné velikosti a jednotného stylu. FontDefinice Arialfont-family: sans-serif; Courierfont-family: monospace; Georgiafont-family: Georgia, "New York CE", utopia, sans-serif; Lucida Consolefont-family: "Lucida Console", "Monaco CE", fixed, monospace; Palatino Linotypefont-family: "Palatino Linotype", "New York CE", utopia, serif; Tahomafont-family: Tahoma, "Lucida Grande CE", lucida, sans-serif; Timesfont-family: serif; Trebuchet MSfont-family: "Trebuchet MS", "Geneva CE", lucida, sans-serif; Verdanafont-family: Verdana, "Geneva CE", lucida, sans-serif; p { font-family: "Trebuchet MS", Tahoma, "Geneva CE", lucida, sans-serif; } Používání různých fontů v jednom dokumentu unavuje oči, kazí estetický dojem, narušuje orientační soustavu na stránce. Optimálně je možné použít max. 2 až 3 fonty.

10 Repozitáře fontů a font API …

11 Google font API body { font-family: 'Tangerine', serif; font-size: 48px; } Making the Web Beautiful! Více viz

12 Odpovědný design Odpovědný design je termín, kterým je nazýván postup tvorby webových stránek, které respektují specifika různých výstupních zařízení. Při tvorbě se nejčastěji aplikují následující návrhové vzory: –Mostly –Column Drop –Layout Shifter –Tiny Tweaks –Off CanvasSketchFlow

13 Mostly Fluid Nejpoužívanější vzor, který je založen na vícesloupcovém rozložení stránky. Sloupce jsou vytvořeny už s ohledem na různá výstupní zařízení a při zobrazovaní na menších displejích se řadí pod sebe.

14 Column Drop Vzor vychází taktéž s vícesloupcového rozložení stránky. Sloupečky se řadí na menších displejích také pod sebe, ale na rozdíl od předchozího příkladu se šířka sloupce přizpůsobuje velikosti okna.

15 Layout Shifter Layout Shifter – Vzor, ve kterém vytváříme pro každou velikost výstupního zařízení různé rozložení stránky. Tento vzor je z pohledu času nejnáročnější, a proto je také nejméně populární.

16 Tiny Tweaks Vzor používaný u velice jednoduchých stránek, kde je možné zachovat stejné rozložení stránky na všech zařízení výstupních zařízení. Úprava se většinou týká pouze velikosti písma, velikosti obrázku a jejich umístění.

17 Off CanvasSketchFlow Poslední vzor na rozdíl od předchozích vychází z předpokladu, že vše co se nevejde na obrazovku, bude zachována ve výchozím rozložení a bude dostupné pomocí vertikálního posunu.

18 Příklad

19 Prototypování Prototypování je proces, při kterém se konstruuje model webové stránky či webové aplikace, z důvodu simulace výsledku. Umožňuje nám to v počáteční fázi experimentovat s rozložením prvků a simulovat chování výsledného systému. Prototypování typicky simuluje pouze některé aspekty budoucího systému a ve výsledku může být zcela odlišný od budoucí implementace. Přínosy –Zpětná vazba od uživatelů na začátku projektu (usability test) –Porovnání, zda web splňuje předem definované specifikace. –Včasné zachycení špatného chování systému. Příklady softwaru Pencil project, Axure, SketchFlow, Mockupbuilder, …

20 Nástroje pro prototypování Pencil project Plugin do Firefoxu. Nelze generovat specifikace a navrhovat interaktivní plány. Cena: zdarma Balsamiq Široká nabídka widgetů, možnost propojení stránek odkazy, export do PNG. Cena: cca $80 Axure Vysoká interaktivita, generování specifikací, export do HTML i PNG Cena: cca $600

21 Příklad drátěného modelu

22 Prototypování

23

24 CSS frameworks CSS frameworky si lze představit jako předpřipravené knihovny, které obsahují kolekce definic CSS stylů, které výrazným způsobem urychlují práci při tvorbě layoutu stránky. Hojně jsou například využívány styly pro reset předdefinovaných stylů ve webových prohlížečích, případně styly definující grid systém, nastavující typografii stránky, či upravující vzhled některých prvků. Mezi nejvýznamnější CSS frameworky se řadí: 960 CSS Framework, Blueprint CSS Framework, The jQuery UI CSS Framework, Twitter Bootstrap, Wirety, Elasticss...

25 CSS frameworks A další a daší a další a … Elements CSS Framework (http://elements.projectdesigns.org/) YAML: Yet Another Multicolumn Layout (http://www.yaml.de/en/) YUI Grids CSS (http://developer.yahoo.com/yui/grids/) Blueprint (http://www.blueprintcss.org/) Boilerplate (http://code.google.com/p/css-boilerplate/) Tripoli (http://devkick.com/lab/tripoli/) Content with Style (http://www.contentwithstyle.co.uk/content/a-css-framework) BlueTrip CSS Framework (http://bluetrip.org/) Elastic CSS (http://elasticss.com/) Typogridphy (http://csswizardry.com/typogridphy/) The Golden Grid (http://code.google.com/p/the-golden-grid/) Fluid 960 Grid System (http://www.designinfluences.com/fluid960gs/) …

26 960 Grid system 960 Grid system je css framework, který pracuje s oblastí 960pixelu, kterou dělí na 12, 16 nebo 24 sloupců. Je používán jak při návrh jak návrhu layoutu webu, tak pro následné rozřezání a kódování grafiky webu. Výhodou je existence mřížky, kterou si lze naimportovat do Photoshopu jako podporu při tvorbě designu stránek.

27 12ti sloupcový layout

28 16ti sloupcový layout

29 Příklad: 960 Grid system Příklad použití 960 grid system:

30 Twitter Bootstrap Twitter Bootstrap je framework, který ve svém základu disponuj pokročilým grid systémem a dále styly pro typografii, tabulky, formuláře, tlačítka a obrázky. Rozšíření obsahuje rozbalovací menu, skupiny tlačítek, navigační prvky, stránkování, titulky, náhledy, upozornění, indikátor průběhu. Twitter Bootstrap se neomezuje pouze na ccs, ale s přidání JavaScriptové knihovny lze pohodlně doplnit naformátované prvky o přechody, vytvářet modální okna, záložky, nápovědy či obsluhovat tlačítka. Příklad použití tlačítka: User Edit Delete Ban Make admin

31 Twitter Bootstrap


Stáhnout ppt "Návrh a tvorba WWW Přednáška 9 Web design. Základy webové typografie Ascender (horní dotah): Je to výška nejvyššího znaku v písmu. Obvykle je to písmeno."

Podobné prezentace


Reklamy Google