Date post: | 08-Jul-2015 |
Category: |
Design |
Upload: | ondrej-machart |
View: | 207 times |
Download: | 1 times |
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).