Stalo se vám někdy, že jste si prohlíželi nějaký web a říkali si , že je na něm něco nepopsatelného, skrytě krásného, co zpříjemňuje váš pobyt v jeho prostředí? Je docela možné, že to kouzelné v pozadí byl grid. Povíme si, jak takový grid funguje, odkud se vzal a jak si ho sestavit pro váš příští webový projekt.

1. GRIDY VE
WEBDESIGNU
Ondřej Machart, 4. 10. 2011, Čtvrtkon#2

2. 1 AHOJ, JÁ JSEM GRID.
SEZNAMOVACÍ RYCHLOKURZ

3. 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.

4. 1.1 EH. COŽE?
Je to mřížka, podle které se
zarovnávají bloky informací
(textu, grafiky).

5. 1.2 K ČEMU JE GRID DOBRÝ?
Vnáší pořádek do chaosu v
designu.
Vytváří přirozený
rytmus v organizaci obsahu.
"Grid čistí design."

6. 1.3 ODKUD SE VZAL?
Grid se jako mnoho
dalších prvků do
webdesignu propadl ze
světa tiskovin.

7. 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)

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

9. WEBOVÝ GRID V PRAXI 1

10. WEBOVÝ GRID V PRAXI 2

11. 1.5 HORIZONTÁLNÍ GRID
Horizontální grid řídí rytmus v
typografii a odpovídá výšce řádku
základního textu.
Je to v podstatě webový šmírák.

12. 1.6 VERTIKÁLNÍ GRID
Vertiká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í.

13. 1.7 HOTOVÁ ŘEŠENÍ
= existující implementace web gridu
960.gs / 978.gs
semantic.gs
Golden Grid System
Twitter Bootstrap
... a další

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

15. 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

16. 1.9 NEVÝHODY HOTOVÝCH ŘEŠENÍ
- nutí přizpůsobovat obsah formě
- nerespektují potřeby klienta
- postupně zastarávají

17. 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

18. 2 JAK NA VLASTNÍ GRID
A NEPŘEDŘÍT SE U TOHO

19. K ČEMU SE CHCEME DOSTAT?

20. 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ý

21. 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

22. 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

23. 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

24. 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

25. 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)

26. 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ů)

27. 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

28. 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)

29. KONSTRUKCE GRIDU

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

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

32. 3 TĚŽKÝ ŽIVOT GRIDU
PRO A PROTI

33. 3.1 PROČ HO NĚKDO NEMÁ RÁD
- obecně omezení pro designery
- stanovuje hranice kreativitě
- časově náročnější rozjezd projektu

34. 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

35. 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."

36. 3.4 PŘIDANÁ HODNOTA
Nebojte 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).

37. Sledujte
Ctvrtkon.cz
Děkuji za pozornost :)