Web se během posledního desetiletí hodně změnil a zároveň se vůbec nezměnil. Pokud se podíváme zpět na 10 let, zjistíme, že web měl velmi častý vzorec při práci v celé oblasti. Tento vzorek sestával ze záhlaví, zápatí, postranního panelu a oblasti obsahu. Bylo to očekávané uspořádání pro web. Současně jsme měli vzestup Macromedia Flash, který ustoupil do doby střídavého rozvržení. Rozvržení, které se nedržely tohoto přísného vzorce. A samozřejmě díky imploze Flashu tento přístup trochu zmizel ... trochu to říkám, protože je zpět s pomstou.

Pokud se podíváte na jednu z mnoha populárních galerií zobrazujících aktuální webový design, nepochybně si všimnete, že základní struktura webových stránek není nic jiného než pevná. Může se ohnout a změnit na něco, co potřebuje. To je podle mého názoru jedním z nejlepších nežádoucích účinků reagujících web designu. Novou normou je, že se zdá, že neexistuje žádný pevný vzorec vůbec.

To vše říkáme, že můžeme sledovat několik trendů na vysoké úrovni v uspořádání, které představují to, co považuji za neobvyklé rozvržení. Neobvyklé, protože nesledují přísný vzorec nebo předdefinovaný systém. Jsou však trendy v tom, že mohu poskytnout desítky, ne-li stovky příkladů vyplňujících každou z těchto kategorií.

To, co najdete zde, je zajímavá směsice trendů a neobvyklých rozvržení, které vás naděje inspirají k posouzení základních struktur, které aplikujete na webový design. Pojďme se podívat a podívejme se ...

Rozdělené obrazovky

V této kategorii naleznete výběr stránek, které rozdělují obrazovku pomocí vertikální dělení. Existuje možná mnoho důvodů k tomu, a při průzkumu mnoha vzorků tohoto typu jsem našel dva hlavní důvody.

Prvním je, že někdy může design mít dvě primární prvky stejně důležité. Společným přístupem k tvorbě webových stránek je hodnocit věci v pořadí významu. Tento význam se pak odráží v hierarchii a struktuře návrhu. Ale co když máte ve skutečnosti dvě věci na podporu? Tento přístup vám umožní vyzdvihnout oba a dovolit uživateli rychle vybrat mezi nimi.

Druhý důvod, proč jsem pro tento přístup našel, je, že někdy musíte vysvětlit důležitou dualitu. Zvažte například webové stránky Osmé a čtyři. Zde chtějí zprostředkovat, že jejich hlavní silné stránky jsou jejich digitální kořeny a talentovaní zaměstnanci. Toto párování je to, co je definuje. Dělená obrazovka je krásný způsob, jak to prezentovat. A zvláště miluji, jak ampersand sjednocuje obě strany.

16
01
03
07
18

Žádný chrom!

Jeden z hlavních prvků používaných v návrhu webových stránek obsahuje prvky: boxy, hranice, tvary a kontejnery všech typů, které slouží k rozdělení obsahu stránky na sebe. Zvažte stereotypní záhlaví, kde jsou prvky úhledně obsaženy a odděleny od obsahu. Společným trendem je nyní odstranit všechny tyto extra chromy.

Jedná se o minimalistický přístup, ale jde o krok dál a má nějaké zajímavé zvraty.

02

V tomto příkladu vyloučili pojem záhlaví a zápatí všechny dohromady. Cíti se spíše jako interaktivní kiosk. Hierarchie obsahu je primárně provedena prostřednictvím organizace zleva doprava, což pomáhá rozvržení velmi intuitivní. A chrom pro oddělení navigace od obsahu prostě není potřeba. Místo toho překrásné výrobky prožijí.

13

Zde zjistíme, že obsah je velmi zdůrazněn odstraněním jakéhokoli smyslu záhlaví nebo zápatí. Místo přečtení záhlaví nejprve si přečtete název společnosti a jasné prohlášení o tom, co dělají (a kde to dělají). Následuje hlavní navigace. Jaký skvělý způsob, jak zdůraznit značku, než se člověk dostane k navigaci. Vytváří elegantní tok. Zajímavé je, že při procházení stránky získáte hlavičku a chrome. Krásné a efektivní uspořádání, které používá vzorek inspirativním způsobem.

15
20
17

Modulární nebo založené na mřížce

Dále máme rozvržení postavené na modulových nebo mřížkových strukturách. V těchto provedeních je každý modul určen k ohýbání na základě velikosti obrazovky. Nejedná se o zcela nový přístup, ale zavedení citlivého webového designu to ještě učinilo. To naznačuje typ přizpůsobivých rozvržení, které lze vytvořit pomocí pluginů, jako je Masonry.

04

Tento příklad dokonale ukazuje myšlenku. Návrh je zcela citlivý. Při změně velikosti obrazovky se každý modul přizpůsobí a velikosti přizpůsobí prostor. Rovnoměrným rozdělením prostoru je snazší přizpůsobit design. Získávají bonusové body pro zavedení prvku (u větších velikostí obrazovky), který přerušuje tuhé bariéry mezi moduly.

19

Tento příklad je poněkud intenzivní verze vzoru. Samozřejmostí je modulární přístup, který jim umožní snadno přesunout obsah podle potřeby. Existuje však zde důležitý konstrukční prvek, který v předchozím příkladu chyběl. Velikost modulů se liší v závislosti na pořadí významu a na jeho místě v hierarchii. Riziko tohoto modulárního přístupu dělá vše, co má stejnou velikost, což znamená, že na něco nic neřeknete. Naproti tomu tento příklad jasně dává význam primárnímu prvku.

08
05
06

Naplnění jedné obrazovky

Konečně máme stránky s využitím přístupu, kdy se návrh přizpůsobuje úplnému naplnění obrazovky. Jedná se o podmnožinu citlivé konstrukce v tom, že se přizpůsobuje velikosti obrazovky. V tomto výklenku se však vzory přizpůsobují tak, aby úplně vyplňovaly obrazovku a nevytvářely posuvníky. Tento nedostatek posouvání znamená, že obsah musí být extrémně zaměřen a jasně stanovena hierarchie obsahu. Myslím, že zaměření a jasnost těchto stránek je osvěžující.

09
10
11
12
14

Závěr

Zatímco jsem tyto jednotlivé trendy rozdělila izolovaně, skutečností je, že představují stavební bloky. A tyto stavební kameny mohou být sestaveny mnoha různými způsoby. Ve skutečnosti se mnoho zde prezentovaných vzorků mohlo přesunout do mnoha kategorií, o kterých jsme se zabývali. Rozmanitost rozvržení na moderním webu a skutečnost, že jsou použitelné, činí web zajímavým médiem, s nímž můžete pracovat.