Meebio Blog - webdesign, html, css, javascript, jquery, ajax, gtd

Úvod do grid systémů

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

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.

Ukázky mobilních e-shopů

Mobilní e-komerce se začíná čím dál tím víc prosazovat, čím více používáme chytré telefony. Nestačí jen optimalizovat internetový obchod, aby se dobře zobrazil v prohlížeči mobilního telefonu, ale musíme pro mobilní telefony nabídnout zcela nové rozhraní přímo pro podmínky telefonů a hlavně zjednodušit jej odstraněním zbytečných funkcí.

Kvalita se nepozná tak, že již nemáme co přidat, ale naopak, že už nemáme co odebrat. U webových stránek pro mobilní zařízení a hlavně u internetových obchodů to platí dvojnásob. Mobilní verze webů, potažmo e-shopů jsou doménou hlavně větších firem, které mají finance na investice do mobilních verzí svých služeb, ale ani menší firmy by mobilní zařízení neměly ignorovat. Máte přehled, kolik lidí navštěvuje váš web z mobilního zařízení?

Investice to mnohdy nebývá nejmenší, ale v konečném důsledku se vyplatí. Ukázky rozhraní upravených přímo pro potřeby mobilních telefonů posbíral server Webdesigner Depot, prohlédněte si je níže.

Malý dotaz na závěr: uvažujete o mobilní verzi vašeho webu nebo e-shopu? A jaký na to máte názor? Těšíme se na vaše komentáře :)

Meeb 3 se blíží, co vás čeká?

30.4.2011 uvedeme novou verzi redakčního systému, ktery je u našich zákazníků velmi oblíben. Po dvou letech vývoje přichází jeho třetí verze a vy se můžete těšit na spoustu novinek, vylepšení a několik nových funkcí.

E-shop

Největší novinkou nové verze je rozšíření o internetové obchody (e-shopy). Díky Meeb tak nyní můžete provozovat tké e-shop, vkládat produkty, volit dopravy a možnosti plateb. Díky intuitivnímu objednávkovému systému máte přehled o všech objednávkách, systém automaticky zákazníka informuje o stavu objednávky a umožňuje zákazníkovi sledovat zásilku a to ani zdaleka není vše.

U produktů můžete vkládat fotogalerie, akce a spoustu dalších možností. DPH se automaticky dopočítává, podle toho, jestli jste nebo nejste plátce (můžete si nastavit). Je možno také volit limit pro dopravu zdarma. Samozřejmostí je napojení na zboží.cz a heureka.cz.

Zásuvné moduly

Jednotlivé doplňkové funkce systému byly odděleny a přidávají se nyní dle potřeby jako zásuvné moduly. Můžeme Vám tak v případě potřeby doprogramovat zásuvný modul na míru nebo Vám poskládat funkce přesně podle toho, co od redakčního systému očekáváte.

Rozšíření fotogalerie

Fotogalerie můžete na Váš web přidávat jednoduše, stačí přetáhnout fotky myší do okna administrace a všechny se hromadně upraví a nahrají. Nyní můžete ke každé fotografii jediným kliknutím přidat také popisek.

Je toho opravdu spousta, vylepšení se dočkala téměř každá čast redakčního systému a vyjímkou nebylo ani uživatelské rozhraní, které je nyní ještě více intuitivnější. Nebudeme už dále více prozrazovat, 30.4.2011 sledujte náš firemní web.

O projektu Grafikanaprodej.cz

O čem přesně tento projekt bude? Co bude jeho náplní a jak bude fungovat? Co bude nabízet a v čem bude skvělý? Tak to jsou informace, které vám prozatím neprozradíme :-) Odpovíme ale na některé množící se dotazy a poodhalíme něco málo ze zákulisí tohoto startupu.

Grafikanaprodej.cz se bude zabývat čistě webovou grafikou. Bude fungovat formou pozvánek a pokud chcete pozvánku získat, již dnes si o ni můžete zažádat na adrese http://www.grafikanaprodej.cz, kde stačí vyplnit váš e-mail (však víte, jak je těžké získat pozvánku později). Na tento e-mail vám zároveň jako prvnímu dorazí informace, kdy se služba spustí. Pro žádné jiné účely již nebude Váš e-mail sloužit.

Kdy se to spustí?

Průběh vývoje projektu můžete taktéž sledovat na adrese http://www.grafikanaprodej.cz Termín spuštění je naplánován na konec první poloviny příštího roku.

Proč by mě to mělo zajímat?

Pokud jste webdesigner na volné noze, může být Grafikanaprodej.cz odbytiště pro vaše grafické návrhy. Pokud jste malý vývojový tým a chybí Vám grafik, i pro vás je tato služba určena a v neposlední řadě pokud jste zákazník a nechcete objednávat “zajíce v pytli”, můžete pro vaše webové stránky koupit grafiku, která se vám bude líbit a nemusíte na ni čekat.