4 viktiga layouttrender för 2015
Webben har förändrats mycket under det senaste decenniet, och samtidigt har det inte förändrats alls. Om vi tittar tillbaka 10 år kommer vi att upptäcka att webben hade ett mycket vanligt layoutmönster på jobbet över huvuddelen av webbplatser. Detta go-to-mönster bestod av en sidhuvud, sidfot, sidobar och innehållsområde. Det var den förväntade layouten för webben. Samtidigt hade vi uppstått av Macromedia Flash vilket gav vägen till en era med alternativa layouter. Layouts som inte klarade sig på denna strikta formel. Och självklart med implosionen av Flash visade detta tillvägagångssätt lite ... Jag säger lite, för det är tillbaka med en hämnd.
Om du undersöker en av de många populära gallerierna som visar aktuell webbdesign kommer du säkert att märka att den grundläggande strukturen för webbsidor är allt annat än fast. Det kan flex och byta till nästan allt som behöver vara. Detta enligt min åsikt är en av de bästa biverkningarna som den webbdesign har skapat. Den nya normen som den var, är att det inte förekommer någon fast formel alls.
Allt detta sagt kan vi observera flera högnivå trender i layout design som representerar vad jag anser vara ovanliga layouter. Ovanligt eftersom de inte följer en strikt formel eller fördefinierat system. Men de är trender i att jag kan ge dussintals, om inte hundratals exempel som fyller på var och en av dessa kategorier.
Vad du hittar här är en intressant blandning av trender och ovanliga layouter som förhoppningsvis kommer att inspirera dig att bedöma de grundläggande strukturerna du tillämpar på webbdesign. Låt oss dyka in och ta en titt ...
Split skärmar
I denna kategori hittar vi ett urval av webbplatser som alla delar upp skärmen med en vertikal uppdelning. Det finns kanske många anledningar att göra detta, och i kartläggning av många prov av denna typ har jag funnit två huvudorsaker.
Den första är att ibland kan en design verkligen ha två huvudelement av lika stor betydelse. Ett gemensamt tillvägagångssätt för webbdesign är att rangordna saker i storleksordning. Denna betydelse återspeglas sedan i hierarkin och strukturen i designen. Men vad händer om du faktiskt har två saker att marknadsföra? Med detta tillvägagångssätt kan du ge dem en framträdande roll och tillåta användaren att snabbt välja mellan dem.
Den andra anledningen till att jag har hittat för detta tillvägagångssätt är att ibland måste du förmedla en viktig dualitet. Tänk på exempelvis åtta och fyra webbplatser. Här vill de förmedla det faktum att deras kärnstyrkor är deras digitala rötter och deras begåvade personal. Denna parning är vad som definierar dem. Uppdelningsskärmen är ett härligt sätt att presentera detta. Och jag älskar särskilt hur ampersand förenar de två sidorna.
Ingen krom!
Ett av huvudelementen som används i webbdesign innehåller element: lådor, gränser, former och behållare av alla typer som används för att dela innehållet på en sida från varandra. Tänk på en stereotyp header där elementen är snyggt innehållna och separerade från innehållet. En vanlig trend är att ta bort allt detta extra krom.
Detta är en minimalistisk inställning, men det går ett steg längre och har några intressanta vändningar under vägen.
I det här exemplet har de eliminerat uppfattningen av en rubrik och sidfot. Det känns mer som en interaktiv kiosk istället. Innehållshierarkin görs huvudsakligen genom en vänster till höger organisation, vilket gör layoutet väldigt intuitivt. Och krom för att skilja navigering från innehåll behövs helt enkelt inte. Istället skiner de vackra produkterna igenom.
Här finner vi att innehållet är starkt betonat genom att ta bort känslan av en rubrik eller sidfot. Istället för att läsa en rubrik först läser du företagets namn och ett tydligt uttalande om vad de gör (och var de gör det). Följd av huvudnavigering. Vilket bra sätt att betona varumärket innan man får folk att navigera. Det ger ett elegant flöde. Intressant när du rullar på sidan får du en rubrik och en touch av krom. En vacker och effektiv layout som använder mönstret på ett inspirerande sätt.
Modulärt eller nätbaserat
Därefter har vi layouter byggda på modulära eller gallerliknande strukturer. I dessa mönster är varje modul avsedd att flexa baserat på skärmstorleken. Detta är inte exakt ett nytt tillvägagångssätt, men införandet av lyhörd webbdesign har gjort det ännu mer användbart. Det här tipset på den typ av anpassningsbara layouter man kan skapa med plugins som Masonry.
Detta exempel demonstrerar perfekt idén. Designen är fullständigt lyhörd. När skärmstorleken ändras anpassas varje modul och storlekar för att passa utrymmet. Genom att dividera utrymmet jämnt är det lättare att anpassa designen. Och de får bonuspoäng för att införa ett element (vid större skärmstorlekar) som bryter mot de styva hindren mellan modulerna.
Detta exempel är en ganska intensiv version av mönstret. Det omfattar självklart det modulära tillvägagångssättet, vilket gör det möjligt för dem att enkelt skifta innehåll in och ut efter behov. Men det finns ett viktigt designelement på jobbet här, vilket det föregående exemplet saknade. Modulernas storlek varierar för att återspegla ordningen av betydelse och dess plats i hierarkin. En risk för detta modulära tillvägagångssätt gör allt i samma storlek, vilket innebär att du inte riktigt betonar någonting. I motsats härtill ger detta exempel tydligt betydelse för det primära elementet.
Fylla i en enda skärm
Slutligen har vi webbplatser som använder ett tillvägagångssätt där designen anpassar sig för att helt fylla skärmen. Detta är en delmängd av lyhörd design genom att den anpassar sig till skärmstorleken. Men i denna nisch anpassar mönstren på ett sådant sätt att de helt fyller skärmen och inte producerar rullningsfält. Denna brist på rullning innebär att innehållet måste vara extremt fokuserat och innehållets hierarki klart fastställd. Jag tycker att dessa webbplatser är fokuserade och tydliga att vara uppfriskande.
Slutsats
Medan jag har dissekerat var och en av dessa trender här isolerat är verkligheten att de representerar byggstenar. Och dessa byggstenar kan monteras på många olika sätt. Faktum är att många av de prover som presenteras här kan flyttas till många av de kategorier som vi har diskuterat. Mångfalden av layouter på den moderna webben och det faktum att de är användbara gör nätet ett spännande medium att arbeta med.