Úvod do grid systémů
2011
Při navrhování webů existuje několik věcí, kterých se designér snaží dosáhnout. Pokud se soustředíme čistě na design, jedná se především o přehlednost a čitelnost. Návštěvník se musí rychle zorientovat a najít, co hledá. Grid systémy jsou pro to skvělou pomůckou. V mém posledním článku jsem toto téma zmínil, ale myslím, že si zaslouží více pozornosti, proto mu věnuji samostatný článek.
Grid systémy můžete vnímat jako jakési vodítko při navrhování. Jedná se v zásadě o hrubou strukturu, podle které jsou do návrhu umisťovány a pozicovány jednotlivé prvky. Dávají návrhu řád a pomáhají docílit již zmíněné přehlednosti a čitelnosti, ať už díky tomu, že se díky nim snáze udržuje rovnoměrný spacing mezi prvky, anebo díky přesnějším a “hezčím” rozměrům, kterých se s grid systémem lépe dosahuje.
Pokud si jako příklad vezmeme 960 grid systém, tak zjistíme, že se skládá z 12 sloupců (ale samozřejmě je i variant s více sloupci) po 60 pixelech s 20 pixelovými mezerami mezi nimi. To jsou pěkná zaokrouhlená čísla a ty budou mít i prvky tvořené podle gridu. Minimálně kodér vám za ně bude vděčný.
Na druhé straně ale občas není na škodu z gridu vybočit, což může daný prvek vizuálně vyzdvihnout. Grid systém rozhodně není žádné dogma, kterého je třeba se křečovitě držet u každého prvku. Jeho používání je ale nepochybně vhodné a práce s ním je efektivnější.
Za zmínku v souvislosti s grid systémy rozhodně stojí i téma šířky webu. Pojem responsive design určitě mnohým z vás zní minimálně povědomě a podíl mobilních zařízení používaných k prohlížení webových stránek nelze ignorovat. To by měla reflektovat i práce s gridem a je to zároveň i důvod, proč jako vzorový grid systém doporučuji 978.gs. Základní verze tohoto systému pracuje s šířkou 978 px, do které se vejde 12 sloupců (či více, pokud si jej přizpůsobíte). 978 není tak pěkné číslo jako v případě 960.gs, nicméně výhodou 978.gs je to, že vedle základní verze najdeme ke stažení i několik dalších variant tohoto systému, které se hodí pro použití při navrhování pro různé šířky viewportu a to od 300 px až po 1378px.
Komu by nevyhovoval ani jeden z dvou zmíněných grid systémů, může si vytvořit svůj vlastní. Generátorů se na internetu najde spousta, zmínit mohu například: http:// www.gridsystemgenerator.com/ , kde si navolíte požadovanou šířku celého gridu, počet sloupců a jejich šířku. Stránka vám vygeneruje grid, který si můžete navíc stáhnout v HTML/CSS a jako obrázek v .png.
Tím tedy dnešní článek uzavřu, ale již brzy se můžete těšit na pokračování, kde se budu věnovat používání grid systémů v praxi při navrhování. Já se mezitím budu těšit na vaše komentáře :-)
Závěrem několik ukázkových příkladů stránek využívajících grid systém.
 |  |  |
Užitečné pomůcky pro webdesignéry
2011
Chci se v tomto článku podělit o tipy na několik pomůcek, které rád využívám při navrhování webů a které považuji za zajímavé a užitečné.
Mřížka - grid systém
Mnozí z vás možná mřížku při navrhování webů už používáte, ale stejně mi to nedá a musím ji zmínit, protože je to esenciální věc, bez které si práci již nedovedu představit.
Pomáhá mi při volbě rozměrů prvků, aby byly na pixel přesné, udržuje rovnoměrný spacing mezi nimi a celkově by se dalo říci, že dává designu jakýsi řád. Naopak vybočením z mřížky se dá docílit zvýraznění prvku.
Photoshop i Fireworks disponují vlastní základní mřížkou, kterou používám jako doplněk také. Za sebe však doporučuji tuto mřížku resp. grid systém:978.gs/downloads. Grid systémů existuje hned několik, mají různé šířky a varianty, které se hodí pro různá použití a každý si určitě najde ten, který mu bude vyhovovat nejlépe. Na grid systémy se určitě podíváme někdy příště.
Subtlepatterns.com
Stránka subtlepatterns.com je výborný zdroj jemných vzorků pro vaši tvorbu, které dokáží skvěle oživit (nejen) pozadí webu.
Každý týden se objevují nové a komu se nechce je stahovat po jednom, pro toho připravili autoři webu šikovné tlačítko, kterým stáhnete všechny vzorky do jednoho .pat souboru.
CloudApp
Neocenitelná pomůcka getcloudapp.com pro sdílení souborů a obrázků. Lze ji použít i jako zkracovač odkazů. Funguje na jednoduchém principu drag&drop, podporuje i automatické uploadování screenshotů. Ve verzi zdarma máte k dispozici 10 uploadů za den při maximální velikosti 25 MB na soubor. Komu by toto nestačilo, je zde i varianta PRO, která vám umožní uploadovat neomezené množství souborů s maximalní velikostí 250 MB. Účet PRO stojí $45 na rok.
Tento nástroj oceňuji hlavně při sdílení náhledů s klienty nebo pokud potřebuji někomu rychle něco ukázat pomocí screenshotu.
CloudApp je určena primárně pro Mac, ale díky fluffyapp.com ji lze vesele používat i na Windows.
ColorSchemer
Nástrojů pro tvorbu barevných palet je na internetu mnoho. Velmi známý je například Kuler od Adobe. Já bych však chtěl zmínit aplikaci pro iPhone od autorů webu ColourLovers.com a tou je ColorSchemer. Samotný web umí samozřejmě to stejné, co aplikace. Na aplikaci je ale skvělé to, že vám umožňuje tvorbu barevných palet kdekoliv jste, tudíž můžete těžit z momentálních inspirací.
Nástrojů na tvorbu samotné palety je uvnitř aplikace několik, tím nejzajímavějším je podle mě výběr barev z fotografie. Stačí vyfotit novou anebo vzít starší z alba a můžete ihned vybírat pomocí kapátka jednotlivé barvy. Pokud jste někdy litovali, že si nedokážete zapsat viděnou barvu v hexadecimálním tvaru, je toto vaše spása.
Aplikace je dostupná zcela zdarma na App Store
Viewlike.us
Jako webdesignéři potřebujeme čas od času (nebo často) vidět náš návrh či nakódovaný web v různých rozlišeních. Nástroj viewlike.us se taky výborně hodí v případě tzv. responsive webdesign (o tom někdy příště).
Tip: zadávejte adresy stránek bez “http://” - v opačném případě vrací web chybové hlášení.
Blabot.net
O vhodnosti používání dummy textů by se z hlediska content strategy dalo úspěšně pochybovat, ale i přesto se tento nástroj často hodí.
Lorem Ipsum hezky česky aneb Blabot.net pro vás vygeneruje náhodný český text, který, stejně jako lorem ipsum, nedává smysl a skvěle se tak hodí jako výplň do návrhů v momentě, kdy nemáte k dispozici finální texty.
Copypastecharacter.com
Pokud si jako já nepamatujete zdaleka všechny klávesové zkratky pro znaky, které během navrhování občas potřebujete, budete milovat copypastecharacter.com.
Jednoduchým kliknutím na daný znak jej zkopírujete a můžete dle libosti vkládat, kam potřebujete, což dokáže ušetřit spoustu času.
Vaše tipy
Ponechám počet mých tipů na 7, protože nechci, aby byl článek tak dlouhý, že ho nikdo nebude chtít číst :). Dám prostor vám, čtenářům, pro sdílení vlastních tipů na užitečné nástroje a pomůcky, rád se o nich dozvím.
Pokud jste dočetli až sem, děkuji, a těším se na vaše komentáře.