Modulární mřížky pro rozvržení. Použití mřížky k vytvoření rozvržení návrhu. Proč je potřeba mřížka a jaké úkoly plní?

Vše, co nás obklopuje, má své vlastní proporce. Už jako dítě nás kreslený film „38 papoušků“ učil, že vše lze rozdělit na části, které si navzájem rovny (délka hroznýše se skládala z 38 papoušků). Všichni také víme, že výška člověka se rovná sedmi jeho hlavám, centimetr se skládá z deseti milimetrů, metr se skládá ze sta centimetrů a tak dále. Moduly jsou tedy kreslený papoušek, lidská hlava, milimetr a centimetr.

Z toho všeho můžeme pochopit, že modul je konvenční jednotka, krok v rytmu mřížky. A samotná mřížka je systém proporcí.

Jak nám tato modulární mřížka pomůže? Za prvé to urychlí práci, protože nebudeme muset trávit spoustu času snahou o harmonické uspořádání všech prvků. Za druhé, s pomocí mřížky můžeme pochopit, který bod musíme použít a jakou velikost by měl mít každý blok. Obecně platí, že modulární mřížka je rámec, který výrazně usnadňuje stavbu webu.

Podívejme se, co jsou to sítě.

1. Nejjednodušším typem je bloková mřížka. To znamená, že dělá hrubé značky a rozděluje oblast na bloky.

Bloková mřížka

3. Modulární rastr má nejen vertikální dělení, ale i horizontální dělení. To, co se tedy získá na průsečících čar, je modul.

4. Existuje také hierarchická mřížka, jejíž bloky jsou umístěny intuitivně a nesledují žádné vzory.

Jak tedy vytvořit modulární mřížku.

1. Nejprve musíme pochopit, jakou funkci bude mít náš web, určíme jeho strukturu a složení stránek. Poté určíme, které stránky budou nejdůležitější, a začne se s nimi pracovat. Pro ně vytvoříme seznam funkcí a seřadíme ho podle priority.

Musíme popsat každý blok funkčnosti a detailně jej popsat do nejmenších detailů. Výsledkem by měl být seznam, ve kterém jsou bloky a jejich prvky seřazeny podle úrovně. Tím pádem máme puzzle vysypané z krabice a stačí je poskládat do uceleného obrazu.

3. Začneme konstrukci mřížky určením rozměrů pracovní plochy. Dále musíme vytvořit mřížku písem. Chcete-li to provést, vyberte výšku čáry, která by měla být stejná pro celé rozvržení. V prvcích, které mají velikost písma odlišnou od velikosti písma hlavního textu, musí být řádková mezera násobkem naší výšky řádku.

Tak získáme základ naší budoucí sítě. Na tomto základě bude stát celý text.

4. Nyní se musíme rozhodnout, jak široký bude náš modul. Zde můžeme vycházet ze šířky libovolného trvalého prvku. Pokud máte za úkol nějaké umístit identické prvky, pak se vše ještě zjednoduší, protože už znáte jeho rozměry.

Pro pohodlí musíme určit, jaká bude vzdálenost mezi moduly. Musí se rovnat alespoň jedné výšce řádku z předchozího odstavce.

Je tu jedno upozornění – je třeba zvolit správné velikosti modulů, protože pokud jsou příliš velké, zmizí flexibilita sítě, a pokud jsou malé, síť se prostě ztratí.

5. Horizontální dělení je poměrně jednoduché. Jeho výška musí být násobkem výšky naší linie. A kolik čar vložíte do jednoho rozdělení závisí na vaší skice.

Od autora: bohužel mnoho módních a spektakulárních webdesignérů často zapomíná, že výsledkem jejich činnosti by měl být uživatelsky přívětivý web, nikoli krásný snímek obrazovky, vhodné pouze pro portfolio. V tomto článku jsem formuloval požadavky, které je potřeba zohlednit v procesu návrhu a návrhu webového rozhraní.

Modulární mřížka ve webdesignu je zásadní řešení, které nejen zlepší použitelnost webu, ale také výrazně zjednoduší život vývojářům.

Co je modulární mřížka?

Vysvětlím to na příkladu, který je vám známý. Otevřete jakoukoli papírovou knihu. Vidíte text přes celou šířku stránky, kromě okrajů? Zde tedy máte typické jednosloupcové rozvržení. Nyní se podívejte do časopisu nebo novin. V časopise jsou informace tradičně rozděleny do dvou sloupců a v novinách - do tří nebo čtyř nebo dokonce více.

Obecně platí, že webový design zdědil několik různých „triků“. tiskový design. Patří mezi ně principy práce s fonty, pravidla kompozice a moduly. Weby s vizitkami a prezentační stránky se mohou spokojit s jednosloupcovou strukturou, domovské stránky - dvousloupcové, složitější informační projekty měly by proto mít složitější a promyšlenější uspořádání.

Modulární mřížka ve webovém designu je jednotné rozložení všech prvků a bloků webu. Tento drátěný model běží na všech webových stránkách a pomáhá vytvářet vizuální pořádek na webu.

Mřížky mohou být jednoduché nebo složité, pevné nebo dynamické, ale na tom vlastně nezáleží. Pokud jste si v procesu tvorby webdesignu nastavili určitou modulární strukturu, držte se jí prosím od prvního do poslední strana místo.

Co dělat, když během kreslení vnitřní stránky Máte bloky nebo prvky, které se nehodí k vašemu rámu? Nerad vám to lámu, ale je to známka toho, že vaše mřížka není dobrá a že jste její navrhování nestrávili dost času.

Jaké typy sítí existují?

Podívejme se na typy mřížek pro webdesign.

1. Bloková mřížka - hrubé označení plochy do bloků.

2. Sloupový - má ve své struktuře sloupce.

3. Modulární – skládající se z protínajících se čar, které tvoří moduly.

4. Hierarchický - mřížka s intuitivním umístěním bloků, bez jakýchkoliv logická struktura.

Na rozdíl od tiskového designu může být mřížka ve webdesignu nejen pevná, ale také dynamická. Můžete například vytvořit jeden nebo více sloupců rozvržení roztažitelných, gumových, nastavením jejich šířky v procentech a opravit velikost zbývajících sloupců.

Moderní tendence a přístupy ve vývoji webu

Naučte se algoritmus pro rychlý růst od nuly při vytváření webových stránek

Web design grid 960 Grid System (http://960.gs) splňuje koncept „statického“ rozvržení a pro vytvoření „plynulého“ rozvržení můžete věnovat pozornost gridu Bootstrap framework(http://getbootstrap.com/css/#grid). Modulární rám 960 GS rozděluje webovou stránku na 12, 16 a 24 sloupců.

Při navrhování „gumové“ konstrukce nezapomeňte na maximální šířku obrazovky. Obvykle je omezena na 1280 pixelů. Pokud neberete v úvahu maximální hodnota na šířku, pak o velké monitory obsah webu se značně roztáhne, což negativně ovlivní jeho vnímání.

Nejpopulárnější a nejsnáze implementovatelná je dvousloupcová modulární mřížka, jejíž proporce se vypočítávají s přihlédnutím k následujícím předpokladům:

nejběžnější rozlišení obrazovky je 1024x768;

šířka rozložení by neměla přesáhnout 770 pixelů, aby se na obrazovce s rozlišením 800x600 ve spodní části neobjevil posuvník;

sloupec, který plní funkce informační modul, musí mít větší šířku než sloupec, který je definován jako navigační modul (nabídka).

Na základě toho vypadá poměr takto: 200 pixelů. + 550 px. nebo 150 px. + 620 px.

Větší sloupec má obsahovat navigační nabídku a menší sloupec má obsahovat katalog nebo obsah.

Vezměme si jako příklad mřížku webdesignu slavné webové stránky. Všechny weby BBC používají univerzální sloupcové rozložení 61 x 16 pixelů, což odpovídá standardní fotografie a video značky.

Jak můžete vidět na obrázku, mřížka BBC je poměrně flexibilní a umožňuje umístit jakékoli informace: od seriózních analýz po zábavné zprávy. Tato modulární mřížka je vizitka společnosti, jak je standardem pro všechny její weby. Mimochodem, tato věc je součástí směrnice „Global Experience Language“, pokud by to někoho zajímalo.

Vývojáři BBC rádi poradí při navrhování modulárních mřížek ve webovém designu. Samozřejmě to kolo nevymysleli pro nás, ale myslím, že to bude zajímavé pro ty, kdo v kariéře webdesignéra začínají.

1. Proces začíná určením umístění pro bloky nejvyšší hierarchie. Představujeme si sebe jako svého druhu Sherlocka Holmese – mistry dedukce a řídíme se pravidlem „Od obecného ke konkrétnímu, od největšího k nejmenšímu“.

2. Přejdeme na další úroveň a do hierarchie umístíme bloky, které následují. Zároveň vycházíme z priorit obsahu, abychom určili, která očekávání uživatelů analyzujeme a identifikujeme svá vlastní soutěžní výhody.

3. Nejprve tedy vypracujeme celkovou kompozici a největší prvky. Poté vyjasníme, doladíme a upřesníme. K tomu budeme muset nakreslit řadu hrubých náčrtů. Teprve po detailním rozpracování myšlenky webu pomocí tužky a papíru konečně usedáme k počítači.

4. Distribuujeme informace do bloků a skupinového obsahu. Například na webu BBC má téměř každá obsahová skupina svůj název, což se odráží v kategoriích navigační nabídky. Názvy bloků slouží jako vizuální kotvy, které vám umožní rychle prohledat webovou stránku a také vám pomohou pochopit, do jaké kategorie materiálu konkrétní zpráva patří.

Tento přístup je široce používán jak začátečníky, tak odborníky na webdesign. Umožňuje nejen ušetřit spoustu času, ale také najít originální řešení složité úkoly.

V našem dnešním kurzu pro mladého webdesignéra jsme se tedy podívali na koncept modulární mřížky a vlastnosti její aplikace. V podstatě se jedná o jakousi vizuální abstrakci, s jejíž pomocí umisťujeme všechny prvky a bloky obsahu v přijatelné vzdálenosti od sebe a na uživatelsky přívětivé úrovni. Modulární síť můžete vizualizovat pomocí samostatné vrstvy s obrázkem vodítek.

Na závěr bych chtěl připomenout, že webdesign je tvorba nejen krásných, ale i praktických, pohodlný systém. Proto by každý webdesignér, který si váží sebe sama, měl být schopen navrhnout modulární navigační systém, strukturovat informace a rozdělit je do bloků. Díky tomu bude uživatel rád „surfovat“ na vašem webu a snadno vnímat jeho obsah.

Přihlaste se k odběru aktualizací našeho blogu a sdílejte cenné informace se svými přáteli. Šťastné modulární sítě všem a uvidíme se příště!

Moderní trendy a přístupy ve vývoji webu

Naučte se algoritmus pro rychlý růst od nuly při vytváření webových stránek

V rámci své práce se často setkávám se zdrojovými kódy od jiných designérů. Hodný a nezkušený, pečlivý a ne tak pečlivý. A Hádej co? Mnoho z nich má jeden velký problém – prvky v rozvrženích přeskakují ze strany na stranu. Proto si dnes povíme, co je modulární mřížka, kde ji stáhnout a jak ji používat.

Věřím, že jednou z nejdůležitějších dovedností každého designéra nebo designéra, který se považuje za dobrého, je správně zarovnat prvky na stránce vůči sobě navzájem.

To je důvod, proč existuje modulární mřížka. Pomáhá předcházet elementárnímu chaosu. Proto, když chybí, nebo je taková...

... webové stránce vládne libovůle a zmatek. Seznamy, tlačítka, bloky a nabídky jsou roztroušeny náhodně. Uspořádání je stále hloupé a nepřehledné. A to není dobrá zpráva.

Co je modulární mřížka?

Kit vodorovné čáry, ke kterému jsou připojeny téměř všechny prvky umístěné na stránce.

V naprosté většině případů se vyskytuje ve 12, 16 a 24 sloupcích. Pokud vytváříte web zdarma s velké množství„vzduch“ mezi prvky, vyplatí se použít mřížku s 12 sloupci. Pokud by však mělo být na čtvereční pixel příliš mnoho informací (ahoj forex), měli byste použít mřížku s 24 sloupci.

Kde získat modulární síť

jsou 2 legálními způsoby získat doma:

1. Kreslit.

Je to dlouhé, drahé (pokud vezmete v úvahu člověka/hodiny, za které jste placeni) a ne vždy skvělé (v závislosti na zkušenostech designéra v této věci). Nikdy jsem to nedělal. Podle mě je to zbytečná a hloupá práce.

Je potřeba počítat procento sloupce a odsazení, nastavit vodítka. Brr. Obecně bych tuto metodu nedoporučoval.

2. Stáhnout

Proč kreslit, když si můžete vzít něco již připraveného? A ne krást, ale stahovat zdarma. V tomto případě tento princip funguje na 100%. Existuje obrovské množství jak hotových mřížek, tak všemožných generátorů.

Pojďme se na některé z nich podívat:

Samozřejmě. Tyto stránky zná snad každý designér. Zde si můžete zdarma stáhnout mřížku 960 px pro téměř všechny možné editory (Photoshop, Illustrator, Corel...)

Dost zajímavá služba, který umožňuje vytvářet mřížky pro libovolné rozlišení obrazovky, dokonce i 2500px. Ideální pro responzivní design.

Velmi jednoduchá a efektivní kalkulačka, která vám umožní pracovat s ní na intuitivní úrovni. Stačí posunout posuvníky a užít si výsledek.

Jedno z nejoblíbenějších rozšíření. Zcela zdarma (ale můžete darovat). Doporučení k instalaci (v angličtině) si můžete přečíst. Stručně a v ruštině: nainstalujte Adobe Extensios Manager (zdarma), nainstalujte rozšíření, přejděte na Window > Extensions > GuideGuide, užívat si.

Ve vazbě

Nezanedbávejte budování dispozice pomocí modulární mřížky. To usnadní život vašim kolegům designérům a vašim kolegům designérům rozvržení. Pokud máte nějaké dotazy, neváhejte je komentovat.

V této lekci se připravíme na rozvržení webu pomocí rozvržení PSD, pouze za použití Grid System z rámce Bootstrap 4. Když se naučíte tuto metodu rozložení, ušetříte se možné problémy díky přizpůsobivosti webu je to zvláště dobré pro začátečníky.

Adaptabilita webu při rozložení pomocí mřížky Bootstrap je zajištěna systémy flexbox, které podporují všechny hlavní prohlížeče a dokonce i Internet Explorer, počínaje IE9+. Více dřívější verze než IE 9, připojujeme skripty, které pomáhají správně zobrazit naše rozložení.

A co je nejdůležitější, rozložení PSD musí být zpočátku nakresleno s ohledem na následné rozložení Bootstrap. A tak neexistují žádné další důvody, proč neuplatňovat rozložení pomocí bootstrap mřížky, a to jak ve vašich projektech, tak na zakázku. Pokusím se dát méně teorie, žádnou vodu a více praxe.

Příprava na rozvržení

Otevřete rozvržení ve Photoshopu a ujistěte se, že má rozvržení s 12 sloupci podél vodítek a že všechny prvky návrhu jsou zarovnány s vodítky. Vzdálenost mezi vnějšími vodítky je obvykle 1170 pixelů.

Stáhnout na webu https://getbootstrap.com/ kompilované CSS a JS pro snadnou integraci do vašeho projektu.

Kopírovat ze sekce Úvod / Startovací šablona- šablonu úvodní stránky a vložte ji do indexového HTML souboru vašeho projektu. Vytvořili jsme šablonu pro budoucí HTML dokument.

Mám si stáhnout bootstrap.min.css nebo použít odkaz na něj?

Předpokládá se, že soubor bootstrap.min.css se bude načítat rychleji, protože je umístěn na několika serverech a ne na vašem jednom serveru. To znamená, že se stránka bude otevírat rychleji. Pokud se přesto rozhodnete stáhnout si tento soubor pro sebe, uveďte správná cesta do složky se soubory Bootstrap. V každém případě si musíte vytvořit prázdný CSS soubor, kam budete psát své styly.

Důležité! Váš soubor CSS v indexový soubor, musí být připojen níže než bootstrap.min.css .

Spojujeme fonty. Je vidět, jaká písma a ikony návrhář v rozvržení používá Program Photoshop nebo v rozšíření pro Prohlížeč Chrome– WhatFont.

Proč jsou potřeba dva soubory CSS?

CSS soubor bootstrap.min.css je knihovna, do které ani nemusíte chodit. Pracujeme pouze s jedním souborem - main.css, ale musíme se ujistit, že názvy nových tříd pro váš soubor CSS se náhodně neshodují s tou „knihovnou“.

V souboru bootstrap.min.css jsou již vytvořeny styly pro mřížku flexboxu a napsány dotazy na média, jen musíme zaregistrovat příslušné třídy v požadované bloky na stránce HTML. Názvy tříd najdete na stránce frameworku v sekci Mřížka. Zkušení návrháři rozložení pro rozložení Bootstrap připojují pluginy (Bootstrap 4 Autocomplete, Bootstrap 4 Snippets) k editoru kódu Sublime Text.

Rozdělení rozložení PSD do bloků

Vidíme, že web se skládá z 8 bloků: záhlaví s navigační nabídkou (nav), 6 sekcí (sekce) a zápatí.

V sekcích (sekce: #services, #portfolio) se objeví sloupce, které rozložíme na základě hlavní komponenty Bootstrap - mřížky.

Nejprve uděláme HTML označení hlavní struktury, detaily budeme přidávat v průběhu rozvržení.

V příštím díle se pustíme do rozložení, ale ne celého rozložení, ale jeho jednotlivých bloků. Protože účelem těchto lekcí je ukázat začátečníkům, jak úspěšně kombinovat konvenční rozložení rozložení s rozložením mřížky Bootstrap.

Představte si, že k vám přicházejí hosté a věci jsou rozházené po vašem bytě. Jak si myslíte, že můžete rychle „uklidit“, když nemáte čas na úklid? Odpověď je jednoduchá: musíte věci uspořádat na malé hromádky. Okamžitě tak vznikne pocit pořádku, byt bude působit uklizeně.

Podobně funguje modulární mřížka, což je sada vodítek. Vodítka (obvykle vertikální a horizontální) tvoří jakýsi rám. Řekněme toto:

Ano, neexistují žádná pravidla, ale existuje zdravý rozum. Jinými slovy, nejprve si musíte promyslet, k čemu mřížka slouží, a teprve potom ji postavit. Například výše nakreslený snímek může sloužit jako vynikající pole pro hraní piškvorek;)

Mimochodem, výsledkem použití mřížky může být... ​​mřížka samotná. Příkladem jsou obrazy Pieta Mondriana, který stavěl kompozice založené na volně konstruovaném prostorovém rastru, který vyplňoval plátno.

Nápadný příklad mezilehlé možnosti, kdy je mřížka současně součástí návrhu a rozhoduje konkrétní úkol, slouží jako rozhraní pro mobilní operační systém Systémy Windows Telefon.

Na co se tedy můžete a měli byste při vytváření modulární mřížky spolehnout?

Budování modulární sítě

Poměrně často se v článcích o modulárních mřížkách můžete setkat s větou, která zní takto:

Nevkládejte návrh do mřížky, místo toho vytvořte mřížku, která se hodí k návrhu.

Na první pohled se zdá být vše v pořádku: mřížka je především pracovní nástroj, který nemá smysl bez návodu k použití, který popisuje uspořádání hlavních prvků (text, obrázky atd.).

Jak však ukazuje praxe, obě možnosti jsou možné a probíhají:

• Design zapadá do mřížky;
• Mřížka je vytvořena podle návrhu.

Zvažme každou z nich zvlášť.

Příklad jedna: potřebujete vytvořit design webových stránek pro vědecký časopis. Klient zároveň chce, aby časopis byl „tváří“ webu a žádá ho umístit na hlavní stránku. Obálka nevypadá moc dobře, mírně řečeno:

Uměleckou hodnotu tohoto obalu nebudeme rozebírat. Zaměřme se raději na provedení – jednoznačně kulhá:

• Existuje pocit, že prvky byly do roviny stránky „načrtnuty“ narychlo, jejich pozice nejsou nijak zdůvodněny;
• Rozměry v rozložení jsou nesouměřitelné a nepřiměřené, není jasné, co určuje tu či onu velikost;
• Nejsou zde žádné akcenty, okraje jsou úzké, předměty spolu kolidují, oko bloudí po obalu;
• Negramotná práce s textem, jak po stránce písma (autor jich napočítal minimálně 5), tak po typografické stránce (mezi jednotlivými položkami v seznamu klíčových článků jsou „díry“);
• "špinavé" barvy.

Očividně, bez ohledu na to, co dobrý design Web jsme nevymysleli, taková obálka by to nepřinesla. Je třeba si to připomenout a mřížka nám s tím pomůže. Vezměme si výšku vínového pruhu (7 mm) jako základ a nakreslete mřížku s podobným vertikálním a horizontálním krokem. Mimochodem, horní a spodní pásy do něj zázračně „spadnou“.

Mřížka jasně ukazuje politováníhodnou povahu situace: objekty nejsou vzájemně zarovnány, mají nepochopitelné velikosti, obecně „některé jsou v lese, některé jsou na palivové dříví“.

Chcete-li obnovit pořádek, přizpůsobme design do mřížky, vezměte v úvahu jednu malou nuanci. Jednotlivé prvky (název časopisu, logo APEL, číslo) jsou předimenzované, takže obal působí těžkopádně. Snižme rozteč mřížky o 1 mm, což nám nakonec poskytne design, který je lehký a bezproblémový při vnímání:

Kryt s nebo bez mřížky

• Prvky jsou uspořádány na mřížce a jsou vzájemně proporcionální, objevily se dobré široké okraje;
• Hlavní důraz je kladen na název časopisu;
• Byly opraveny fonty a typografie, což nám spolu s mřížkou dává kompletní řešení.

V důsledku toho získáme tak nádherný obrázek domovská stránka webová stránka:

Pokračujme. V jednom z předchozích článků autor podrobně rozebral fáze tvorby vizitkového webu. Přečtěte si jej, pokud jste to ještě neudělali, a věnujte pozornost tomu, jak je návrh konstruován: objekty na stránce jsou umístěny postupně – od obecných ke konkrétním, od hlavních prvků k vedlejším.

S tímto přístupem, když je rozložení určeno úkolem, jsou prvky obvykle umístěny na stránce „od oka“, i když ne příliš, „tančí“ vůči sobě. Opět není jasné, na co se zaměřit při výběru velikosti obrázků, textových bloků apod. V takové situaci nám opět pomůže osazení návrhu do mřížky.