Är du trött på att skapa byggwebbplatser med samma gamla rutnätbaserade layouter för varje projekt? Har du klåda för att bryta sig bort från normen och försöka något lite mer organiskt?
Idag tar vi en titt på några webbplatser som har gjort just det för att se vad vi kan lära oss om alternativa layoutmetoder och hur de kan genomföras framgångsrikt.
Grid Layouts
Grid-baserad layout är en hörnsten i modern webbdesign. I en tid där rena, minimalistiska mönster hålls uppe som det ultimata idealet (ett direkt svar på de röriga designstilarna på 80- och 90-talen), själva definitionen av "bra design? kommer utan tvekan att inkludera enkla och solida inriktningar.
I slutändan är det här en bra sak. Gridbaserade layouter ger oöverträffad struktur, balans och organisation. De ger en förutsägbar rytm och en känsla av förtrogenhet för designen och låter innehållet sticka ut på egen hand.
Grid layouter är otroligt användarvänliga. Vi läser instinktivt en sida från vänster till höger, från topp till botten, och gallret tenderar att förstärka i stället för att trotsa denna tendens. Med en nätbaserad design är innehållet exakt där tittaren förväntar sig att det inte krävs någon extraordinär insats.
Vi har hela design gallerier, som den som visas ovan, dedikerad till nätbaserade mönster. Det finns otaliga CSS-ramar och Photoshop-mallar som är avsedda att hjälpa oss att uppnå snabba rutinlayouter med minimal ansträngning. Om designen är en religion är grids det heliga skriften som vi tillskriver sanning på.
Om vi kör med denna övergripande metafor ännu längre, är dagens ämne inget mindre än? Blasfemi.? Låt oss undersöka hur vi kan introducera lite mer variation i våra layouter genom att överge gallret, åtminstone delvis, till fördel för fler organiska layouter och grafik. Det visar sig att det finns flera sätt att strukturera information, bara berätta inte för designgudarna.
Hitta andra sätt att rikta uppmärksamhet
Vårt första exempel på en alternativ layout kommer från We Are Empire, en digital designbyrå. Här är en skärmdump av hemsidan för deras hemsida.
Som du kan se representerar det definitivt inte din typiska webbsidayta. Det finns flera saker att notera här. Först är de främsta objekten på sidan cirklar. Någon vanlig, nätbaserad webbplats är vanligtvis består huvudsakligen av rektangulära föremål. Grids består av rektanglar så föremål med fyra kanter och åtminstone minimalt svåra hörn fungerar ganska bra.
Däremot kommer nästan alla organiska layouter du stöter på att använda cirklar kraftigt. Cirklarna känns mer organiska och tycks passa bättre på denna layoutstil. Vidare presenterar de upproriska designers med ännu ett sätt att avvika från normen.
Ännu viktigare än föremålens former är sättet att de är anslutna. Återigen kan gallerinställningar läsas väldigt naturligt, men organiska layouter lämnar ögat att vandra i förvirring på jakt efter vad man ska se på nästa.
Genom att skapa en rudimentär väg har designern här skapat ett tydligt informationsflöde för dig att följa. Titta på den här sidan kan du nästan inte låta bli att följa vägen med dina ögon. ett enkelt och extremt effektivt knep för att styra användarupplevelsen.
Färre objekt
Stigen hjälper, men är inte en komplett nödvändighet. Detta gäller särskilt när det finns några saker i layouten. Till exempel kolla in Michael Wongs sida nedan, vilken använder en liknande layout.
Wongs hemsida använder en annan populär teknik för dessa typer av layouter: musstyrd animering. När du flyttar musen runt på skärmen flyttar objekten i layouten runt i en parallell effekt som simulerar ett 3D-gränssnitt.
Strukturen är fortfarande närvarande
En mycket viktig sak att komma ihåg när du avviker från nätbaserade layouter är att du inte nödvändigtvis måste överge strukturen helt och hållet. Som Melonfree-layouten nedan illustrerar kan din design fortfarande vara mycket logisk.
Här, till förmån för ett enkelt nät, finner vi ett stort utnyttjande av avrundad symmetri. Designen är ganska attraktiv och välbalanserad. Att läsa i en cirkel är definitivt inte det enklaste i världen men slutresultatet är uppfriskande annorlunda.
Kontaktpunkter
När du arbetar med en alternativ layout, försök alltid att hålla dig väl medveten om var du skapar kontaktpunkter. Layouten ovan har med avsikt en tung dragning mot mitten där du hittar en stor grafik av en melon, som representerar företagets namn.
Använd storlek, färg och placering av objekt i dina layouter för att skapa specifika kontaktpunkter och analysera hur bra de fungerar med den visuella sökvägen du försöker skapa (ovanifrån).
Bygg en scen
En helt annan men ändå ganska populär alternativ layoutmetod är att skapa en scen som fungerar som gränssnitt för din webbplats. Jag varnar normalt för detta eftersom det oftast hamnar i riktning mot en dålig, Flash-driven snabbmatstyp där du inte kan hitta en enda sak.
Denna metod kan dock även leda till några attraktiva, väl utformade webbplatser. Tänk på iCodeLabs webbplats nedan, som använder en riktigt bra illustrerad scen som kan navigeras av, du gissade den, flyttar musen runt.
En viktig funktion här är att iCode-webbplatsen behåller den explorativa scenen som ett valfritt roligt element på webbplatsen. Den primära navigeringen är ett mer välkänt bargränssnitt längst ner på sidan. Ingen jakt på länkar här!
Grids: Dold men sällan borta
Den stora hemligheten till all denna diskussion om att överge gridbaserade layouter är att de sällan är helt frånvarande från en viss webbdesign. Faktum är att om du besöker sidorna ovan kan du se att det fortfarande finns en övergripande rutnätstruktur på många sidor.Alternativa layoutmetoder finns inom områden inom den större strukturen.
Läran här är att du inte behöver, och vill ofta inte, helt överge säkerheten i klara, enkla och logiska layouter för att uppnå något som ser ut och känns unikt.
Tilted Grids
Ett smart sätt att dölja din rutnätbaserade layout är att göra stark användning av diagonala linjer istället för vertikala och / eller horisontella linjer. Samma exakta konventioner som används i normala rutor kan appliceras, resultatet blir helt enkelt kantigare.
Som du kan se har Estilo DLT utseende av en organisk layout, men i verkligheten överensstämmer den med några mycket strikta layoutprinciper.
Slutsats
Att bryta sig bort från normen kan vara ett anmärkningsvärt uppfriskande experiment. Det hjälper dig att tänka annorlunda och se design på sätt som du aldrig har haft tidigare. Att utforska alternativa layoutidéer är ett utmärkt sätt att få dina fötter våta i den här arenan. Använd exemplen och informationen ovan för att komma igång i rätt riktning.
Kom ihåg att rutnätlayouter ofta bryts men sällan överges helt och att även om du inte använder ett nät kan det fortfarande vara en väldigt logisk struktur för din layout. Lämna en kommentar nedan med en länk till några otraditionella layouter du har stött på. Låt oss också veta om du är en stickler för nät eller är benägen att våga utanför boxen med dina layouter.