Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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
...
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í des...
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 ...
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ě...
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,...
1.7 HOTOVÁ ŘEŠENÍ
= existující implementace web gridu
960.gs / 978.gs
semantic.gs
Golden Grid System
Twitter Bootstrap
......
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
...
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í plug...
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á, nelz...
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ě...
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...
2.4 POZOR NA ŠÍŘKU GRIDU
- šířka safe viewportu = 1002px
- je nutné odečíst okraje (20-100px)
- na grid tedy zbývá max. 98...
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
- nespokoj...
2.6 JAKÝ GRID VYBRAT?
- který respektuje všechna omezení
(viz 2.1 Určete svá omezení)
- který poskytuje prostor kreativitě...
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.6...
2.8 KONSTRUKCE GRIDU
- ve Photoshopu
- jednoduše pomocí vodítek a tvarů
- snížená opacita pro překrytí designu
- horizontá...
2.9 SPECIALITY
- plugin GuideGuide pro PS
- využití proporcí zlatého řezu
- responsive thinking (téma na jindy)
- pozor na...
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 proje...
3.2 PROČ HO ALE MILUJEME
- skvělý vliv na čistotu designu
- usnadňuje přechod grafika-kódování
- ve skutečnosti zrychluje
...
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 (...
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á...
Sledujte
Ctvrtkon.cz
Děkuji za pozornost :)
Prochain SlideShare
Chargement dans…5
×
Prochain SlideShare
Vertical Rhythm and Modular Scale: Typesettings
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

Partager

Jak využít gridy ve webdesignu na maximum

Télécharger pour lire hors ligne

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.

  • Soyez le premier à aimer ceci

Jak využít gridy ve webdesignu na maximum

  1. 1. GRIDY VE WEBDESIGNU Ondřej Machart, 4. 10. 2011, Čtvrtkon#2
  2. 2. 1 AHOJ, JÁ JSEM GRID. SEZNAMOVACÍ RYCHLOKURZ
  3. 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. 4. 1.1 EH. COŽE? Je to mřížka, podle které se zarovnávají bloky informací (textu, grafiky).
  5. 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. 6. 1.3 ODKUD SE VZAL? Grid se jako mnoho dalších prvků do webdesignu propadl ze světa tiskovin.
  7. 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. 8. TISKOVÝ & WEBOVÝ GRID ...a jejich názvosloví
  9. 9. WEBOVÝ GRID V PRAXI 1
  10. 10. WEBOVÝ GRID V PRAXI 2
  11. 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. 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. 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. 14. UKÁZKA POUŽITÍ 978.GS 12 sloupců (54px široké, 30px mezery) + responsive změny
  15. 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. 16. 1.9 NEVÝHODY HOTOVÝCH ŘEŠENÍ - nutí přizpůsobovat obsah formě - nerespektují potřeby klienta - postupně zastarávají
  17. 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. 18. 2 JAK NA VLASTNÍ GRID A NEPŘEDŘÍT SE U TOHO
  19. 19. K ČEMU SE CHCEME DOSTAT?
  20. 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. 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. 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. 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. 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. 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. 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. 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. 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. 29. KONSTRUKCE GRIDU
  30. 30. PLUGIN GUIDEGUIDE PRO PS Pozn.: Tvoří vodítka, nikoli tvary.
  31. 31. REDESIGN TWITTERU DLE ZLATÉHO ŘEZU Odkaz Leonarda da Vinciho v podobě přirozených proporcí
  32. 32. 3 TĚŽKÝ ŽIVOT GRIDU PRO A PROTI
  33. 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. 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. 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. 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. 37. Sledujte Ctvrtkon.cz Děkuji za pozornost :)

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.

Vues

Nombre de vues

609

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

10

Actions

Téléchargements

2

Partages

0

Commentaires

0

Mentions J'aime

0

×