ݺߣ

ݺߣShare a Scribd company logo

Jak využít gridy ve webdesignu na maximum

•Download as PPTX, PDF•
•
Ondřej Machart
Ondřej Machart

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 of 37
Download to read offline
GRIDY VE WEBDESIGNU Ondř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Í 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.
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í.
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Í GRID A 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 GRIDU PRO 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Á 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).
Sledujte Ctvrtkon.cz Děkuji za pozornost :)

More Related Content

Jak využít gridy ve webdesignu na maximum

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