Automatizujte proces návrhu mřížky pomocí programu GridGuide
Prvním významným krokem jakéhokoliv designu webových stránek je vybírání mřížky. To obvykle definuje maximální šířku stránky spolu s počtem vnitřních sloupů a okapů, které budou použity k rozdělení rozvržení.
Můžete si vyzkoušet vlastní, ale nejlepší nástroj pro tuto práci je GridGuide. Je to zcela zdarma webapp, který plně automatizuje generování sítě pro všechny webové stránky bez ohledu na velikost.
Stačí zadat požadovanou maximální šířku následovanou počtem sloupců, které chcete. Typicky by tato dvě čísla měla být dělitelná, takže je dobré se vyvarovat prvočísel. Zde jsou některé běžné maximální šířky webových stránek:
- 1100px po 12 sloupcích
- 1200px 8/12 sloupců
- 1240px podle 8/12 sloupců
- 1440px do 8/10/12 sloupců
- 1600px do 8/10/12 sloupců
Zde není absolutně žádná špatná odpověď. Můžeš vyberte libovolnou šířku a pokud je rovnoměrně dělitelná počtem sloupců pak je dobré jít.
GridGuide je elegantní webapp, takže po zadání hodnoty do vstupního pole se automaticky aktualizuje. Takže když nastavíte čísla nahoře, všimnete si náhledy mřížky se automaticky změní.
Na tuto práci jsem se spoléhal na Photoshop a to mě vedlo k tomu, že jsem se s ním setkal. Upřímné vytváření mřížky je jedním z nejvíce frustrujících kroků při navrhování nové webové stránky a získání číselných parametrů může být rozzlobené.
Systém GridGuide je však zcela automatizovaný a nabízí mnoho různých možností mřížky na základě různých velikostí sloupů a šířek okapů.
Můžete dokonce stáhnout plnou PNG obrázek mřížky, kterou se rozhodnete importovat do Photoshopu. Tohle bude ušetřit spoustu času takže nemusíte znovu vytvářet mřížky s tvarovými nástroji od nuly.
A pokud se vám líbí určitý styl mřížky, můžete vytvořit odkaz pro sdílení na záložku pro pozdější nebo sdílet s ostatními na webu.
Pro nástroj, který je zcela zdarma a snadno použitelný, musí být moje nejlepší doporučení pro každého webového designéra. Pokud se potýkáte s mřížkami a nenávidíte navrhování své vlastní, pak je GridGuide zdrojem, který musíte mít ve svém panelu nástrojů.
