Jak využít gridy ve webdesignu na maximum

GRIDY VE

WEBDESIGNUOndřej Machart, 4. 10. 2011, Čtvrtkon#2

1 AHOJ, JÁ JSEM GRID.SEZNAMOVACÍ RYCHLOKURZ

1.1 CO TO JE GRID?Ve své podstatě se jedná o soubor

protínajících se horizontálních a

vertikálních přímek s pravidelnými

rozestupy.

1.1 EH. COŽE?Je to mřížka, podle které se

zarovnávají bloky informací

(textu, grafiky).

1.2 K ČEMU JE GRID DOBRÝ?Vnáší pořádek do chaosu v

designu.

Vytváří přirozený

rytmus v organizaci obsahu.

"Grid čistí design."

1.3 ODKUD SE VZAL?Grid se jako mnoho

dalších prvků do

webdesignu propadl ze

světa tiskovin.

1.4 JAK GRID VYPADÁ?To záleží na tom, zda se jedná o

grid tiskový či webový. Oba však

staví na stejných principech.

(viz další slide)

TISKOVÝ & WEBOVÝ GRID...a jejich názvosloví

WEBOVÝ GRID V PRAXI 1

WEBOVÝ GRID V PRAXI 2

1.5 HORIZONTÁLNÍ GRIDHorizontální grid řídí rytmus v

typografii a odpovídá výšce řádku

základního textu.

Je to v podstatě webový šmírák.

1.6 VERTIKÁLNÍ GRIDVertikální grid je tvořen sloupci

určité šířky a mezerami mezi nimi.

Existují již hotové grid systémy, ale

je možné navrhnout své vlastní.

1.7 HOTOVÁ ŘEŠENÍ= existující implementace web gridu

960.gs / 978.gs

semantic.gs

Golden Grid System

Twitter Bootstrap

... a další

UKÁZKA POUŽITÍ 978.GS 12 sloupců (54px široké, 30px mezery) + responsive změny

1.8 VÝHODY HOTOVÝCH ŘEŠENÍ- dobře se na nich učí dělat s gridem

- PSD šablony k dispozici

- hotové řešení i v CSS a Html

- většinou jsou již responsive

1.9 NEVÝHODY HOTOVÝCH ŘEŠENÍ- nutí přizpůsobovat obsah formě

- nerespektují potřeby klienta

- postupně zastarávají

1.10 VYPLATÍ SE TVOŘIT VLASTNÍ?- ano!

- nezabere to příliš času (0.5 - 1 hod)

- stačí základní matematika

- existují pluginy do Photoshopu

2 JAK NA VLASTNÍ GRIDA NEPŘEDŘÍT SE U TOHO

K ČEMU SE CHCEME DOSTAT?

2.1 URČETE SVÁ OMEZENÍLayout (wireframe)

- co když je např. 5-ti sloupcový?

Reklamní bannery

- jejich šířka je daná, nelze ji měnit!

Viewport

- základní maximálně 1002px široký

2.2 STŘELTE OD BOKU- je třeba někde začít, i když špatně

1. navrhněte počet sloupců

2. navrhněte šířku sloupců

3. navrhněte šířku mezer

4. vypočtěte celkovou šířku gridu

2.3 VÝPOČET ŠÍŘKY GRIDU

šířka gridu = n * šs + (n-1) * šm

n = počet sloupců

šs = šířka sloupce

šm = šířka mezery

př. 12*60 + 11*20 = 960

2.4 POZOR NA ŠÍŘKU GRIDU- šířka safe viewportu = 1002px

- je nutné odečíst okraje (20-100px)

- na grid tedy zbývá max. 980px

- pokud spočítaná šířka gridu

překračuje viewport, je třeba vše

přepočítat

2.5 METODA POKUS OMYL- výpočet opakujte s různými čísly

- když váháte, grid otestujte v PS

- počítejte s omyly

- nespokojte se s polovičním řešením

2.6 JAKÝ GRID VYBRAT?- který respektuje všechna omezení

(viz 2.1 Určete svá omezení)

- který poskytuje prostor kreativitě

(nepřidává nadbytečná omezení)

- který jste schopni dodržet napříč

(porovnejte s wireframy webu)

2.7 A CO HORIZONTÁLNÍ GRID?- zvolte si velikost zákl. písma (16px)

- zvolte výšku řádku

- vhodný poměr např. 1.5 nebo 1.618

- pozor na češtinu, má diakritiku! Proto

není vhodné volit výšku v poměru 1.2

apod. (jen u nadpisů)

2.8 KONSTRUKCE GRIDU- ve Photoshopu

- jednoduše pomocí vodítek a tvarů

- snížená opacita pro překrytí designu

- horizontální grid pouze vodítky

2.9 SPECIALITY- plugin GuideGuide pro PS

- využití proporcí zlatého řezu

- responsive thinking (téma na jindy)

- pozor na vícesloupcové texty

(neexistuje ideální řešení)

- pravidlo 50M (max. počet znaků jedné

řádky pro pohodlné čtení obsahu)

KONSTRUKCE GRIDU

PLUGIN GUIDEGUIDE PRO PS Pozn.: Tvoří vodítka, nikoli tvary.

REDESIGN TWITTERU DLE ZLATÉHO ŘEZU Odkaz Leonarda da Vinciho v podobě přirozených proporcí

3 TĚŽKÝ ŽIVOT GRIDUPRO A PROTI

3.1 PROČ HO NĚKDO NEMÁ RÁD- obecně omezení pro designery

- stanovuje hranice kreativitě

- časově náročnější rozjezd projektu

3.2 PROČ HO ALE MILUJEME- skvělý vliv na čistotu designu

- usnadňuje přechod grafika-kódování

- ve skutečnosti zrychluje

a ulehčuje následný návrh grafiky

3.3 JAK NA GRIDY VYZRÁT?- nebrat je jako dogma, ale pomůcku

- pochopte pravidla hry a naučíte se

je i správně porušovat (např. pokud

nějaký prvek z gridu vystrčíte,

upoutáte tím na něj pozornost.)

"Grid není vaším pánem - vy jste

pánem gridu."

3.4 PŘIDANÁ HODNOTANebojte se ukázat navržený grid

klientovi. Možná tomu nebude

rozumět, ale pochopí, že své řemeslo

ovládáte (a že nejste moula, co si v

práci celý den maluje).

Sledujte Ctvrtkon.czDěkuji za pozornost :)