Layout kan båda vara en av de enklaste och en av de svåraste aspekterna av webbdesign. Ibland kan en formgivare bota en fantastisk layout på några minuter och ibland kan samma designer kämpa för den bättre delen av dagen med samma uppgift.
Varje projekt är unikt och kräver en unik lösning, men jag har funnit det bra att hålla några steniga och otroligt mångsidiga inställningar med tanke på att jag kan byta ut när jag fastnar. De tio layouterna nedan borde räcka för att ta dig igenom även de värsta fallen av designers block när du inte kan räkna ut det bästa sättet att ordna innehållet på din sida.
Hålla det enkelt
Sidlayout är lika delar konst och vetenskap. Att skapa något som är visuellt attraktivt och unikt tar konstnärens öga. Det finns emellertid flera väldigt lätt att följa riktlinjer som du kan använda för att skapa fasta layouter som fungerar för ett antal fall. Dessa principer innefattar att välja och hålla fast vid en anpassning, strukturera din whitespace ordentligt och markera viktiga element genom storlek, positionering etc.
Designers stressar ofta alltför mycket på layoutprocessen. Vi har en tendens att närma oss ett projekt samtidigt som vi tänker på att det måste vara helt unikt i alla avseenden för att vara värt vår tid och kundens pengar. Men om du ser bra ut på webben ser du att det inte nödvändigtvis är fallet. Snygga webbplatser använder ofta layouter som är ganska enkla och inte minst unika. Det är sant att de sidor vi designers undrar mest är ofta från de märkliga webbplatser som bryter formen, men din genomsnittliga kund vill bara ha något användbart, rent och professionellt.
I den här artikeln ska vi titta på tio mycket vanliga layouter som du kan hitta på otaliga webbplatser över hela webben. Observera att sättet att utforma dessa sidor, vilket betyder färger, grafik och teckensnitt, är unikt, men de grundläggande strukturerna på webbplatserna är baserade på beprövade metoder för att lägga ut en webbsida. Vi kommer att understryka detta genom att först visa dig en enkel silhuett av layouten så att du kan projicera dina egna tankar och mönster på den, så följer vi upp det med ett eller två exempel på riktiga webbplatser som använder layouten.
Om du är webbdesigner, bokmärke den här sidan och kom tillbaka nästa gång du fastnar och lägger ut en sida. Tänk på att alla följande layouter är ett grundläggande förslag för att du ska kunna mögla och ändra. Jag uppmuntrar dig att inte använda dem som det är men sätta din egen spinn på dem baserat på behoven hos ditt projekt.
Tre lådor
Det här är förmodligen den enklaste layouten på listan. Faktum är att du blir frestad att tro att det är alltför enkelt att någonsin passa dina egna behov. Om så är fallet blir du förvånad om du verkligen tänker på hur mångsidigt arrangemanget verkligen är.
De tre lådans layout har ett huvud grafiskt område följt av två mindre lådor under. Var och en av dessa kan fyllas med en grafik, ett textblock eller en blandning av båda. Huvudrutan i denna layout är ofta en jQuery-reglage, som kan visa upp så mycket innehåll som du vill!
De silhuettformade formerna längst upp är områden som kan användas för logotyper, företagsnamn, navigering, sökfält och annat informativt och funktionellt innehåll, vanligen på en webbplats.
Denna design är idealisk för en portföljsida eller något som behöver visa upp några exempelgrafik. Var och en av bilderna kan vara en länk som leder till en större, mer komplex gallerisida. Senare i artikeln ser vi hur man blandar upp denna idé ytterligare.
I det vilda
Nedan ser vi en vacker implementering av de tre lådan i Peter Verkuilens portfölj. Som föreslagits ovan roterar den primära grafiken och visar ett antal P Peters senaste projekt. Genom att klicka på en av rutorna kommer du till projektets dedikerade sida där du kan läsa mer information.
Enkelt, effektivt och attraktivt. Du kan förmodligen dra av en fullständig, levande webbsida med denna layout på under en timme!
Ta en mall
Ett snabbt sätt att börja med denna typ av layout är med en HTML-mall. Genius är en minimal, fullt lyhörd affärsmall för företag, byråer, frilansare och individer. Det är väldigt enkelt att anpassa och dokumentera, och det är enkelt att ordna det i vilken typ av nät som helst!
3D-skärmdumpar
Eftersom utvecklare fortsätter att skapa en oändlig samling av webbapps, blir 3D-skärmbildslayouten som ses nedan, eller någon variant av den, alltmer populär. Grundsidan är att toppa din sida med en rubrik och sedan kasta i några stiliserade förhandsgranskningar av din ansökan. Dessa kommer ofta med reflektioner, tunga skuggor, stor bakgrundsgrafik eller till och med komplexa prydnader som vinstockar kryper över skärmbilderna, men kärnidén är alltid väldigt enkel.
En annan plats jag ser detta trick används mycket är i förbyggda teman. I dessa fall säljer en designer en lagerlayout och behöver verkligen sin platshållare grafik att skina, och ingenting säger coolt och modernt som några fina 3D-effekter!
I det vilda
Pixelworkshop använder den här tekniken, inte som ett lagertema, utan att faktiskt visa aktietema! Här byter 3D skärmdumpar ut i ett bildspel och kommer upp i ett antal olika arrangemang. Sluta med och ta en titt för att se alla olika sätt som designern presenterar bilderna.
Avancerat rutnät
Många av de layouter som du ser i den här artikeln följer en ganska strikt nätverksjustering. Men för det mesta föreslår de inte bara en sida full av likformiga miniatyrbilder. Till exempel blandar layouten nedan storleken på bilderna för att undvika redundans.
Precis som i de tre rutorna, finns det en primär grafisk rubrik upp på sidan. Detta följs av en enkel twist på tanken på ett likformigt galler av miniatyrbilder.Utrymmet skulle möjliggöra ett spann av fyra rutor horisontellt, men i stället har vi kombinerat de två första områdena så att den vänstra halvan av sidan skiljer sig från höger.
Som vi nämnde med den första layouten behöver blocken inte vara bilder. Du kan till exempel föreställa dig det här som block av text på vänster flankering av kvadratiska bilder till höger.
I det vilda
I det underbara exemplet nedan används denna layout för en barnkläderwebbplats. Lägg märke till att nära botten av inriktningen har de ändrat sakerna ännu längre så att vänster sida har en nästan konstigt stor bild följt av ett stycke, och ingen av dessa passar perfekt med innehållet på höger sida.
Återigen, när du väl har din grundläggande layout i åtanke, kan du göra subtila förändringar så här samtidigt som du behåller integriteten för den underliggande strukturen. Ett annat intressant knep de använde var att dela upp huvudbilden i två områden. Det är faktiskt alla en JPG, men det har delats in i två bilder för att visa upp ännu mer innehåll.
Ta en mall
Ett snabbt sätt att börja med denna typ av layout är med en HTML-mall. GoodFood är en mall som passar det här temat perfekt - det använda exemplet är för en mat och dryck webbplats, men det skulle vara bra för någon typ av webbplats tema!
Utvalda grafiska
Ibland har du inte tillräckligt med innehåll för en sida full av bilder. Så vad gör du om du vill visa upp en ikon, ett foto eller kanske en symbol som en ampersand? Layouten nedan är en super lätt lösning som är ganska populär och läser mycket bra på grund av bristen på distraheringar.
Resultatet är en sida som är fet, men ändå minimal och ren. Det uttalande det gör är starkt och omöjligt att missa, bara se till att din grafik är tillräckligt bra för att presenteras så framträdande!
I det vilda
Hur vanligt är denna layout? Mycket mer än du kanske tror! Med minimal ansträngning kunde jag omedelbart komma med två platser som använder någon nära variant av denna teknik. Observera att du har alternativ för hur du vill formatera texten och även där du vill placera navigeringen. Den andra platsen omarrangerar de sekundära elementen ganska lite men det är genast igenkännligt som samma grundläggande layout.
Ta en mall
Ett snabbt sätt att börja med denna typ av layout är med en HTML-mall. Motiv är en minimalistisk portfölj HTML-mall perfekt för byråer eller personliga webbplatser. Denna mall har en fullständig portföljavdelning med filter och portföljdetaljer. Inkluderat i mallen är också en sida och bloggavsnitt som gör att mallen kan användas för en blogg istället för en portfölj. Massor av anpassning ingår tillsammans med fullständig dokumentation för att hjälpa till.
Fem lådor
Layouten i fem lådor är helt enkelt en utveckling av de tre lådans layout. Alla samma logik gäller, det har just ändrats för att hålla ännu mer innehåll. Det kan också vara fyra rutor, det beror bara på vad du vill visa upp. Det gör det också att du ser lite mer in i designen!
Självklart, när du lägger till layouten blir de sekundära objekten mindre och mindre. För de flesta användningarna kommer fem lådor antagligen att närma sig gränsen.
Precis som med de tre lådlayouten är den så mångsidig att den bokstavligen kan användas på nästan vilken typ av webbplats som helst. Idéer för att byta upp det är att lägga till en stor bakgrundsgrafik, avrunda hörnen, lägga till skuggor och / eller reflektioner, eller kanske till och med lägga till ett interaktivt element på de mindre miniatyrerna. Du kan enkelt lägga till knappar som får dem att rulla horisontellt.
I det vilda
Här har vi två exempel på att denna layout används på lite olika sätt. Det stora att märka här är att trots att de hade liknande layouter, kunde de båda sidorna nästan inte vara mer annorlunda än varandra om de försökte. Man använder en handritad illustrationstil, de andra fotografierna och gradienterna. Den första använder dämpade färger och skript teckensnitt, de andra ljusa färgerna och moderna teckensnitt.
Detta driver hem argumentet att att använda en av layouterna i den här artikeln inte kommer att döda din kreativitet. När du har ordnat innehållet är det fortfarande mycket att göra inom estetikområdet. Det här är vad som verkligen kommer att definiera webbplatsens personlighet och gör ofta eller bryter ett klientförslag.
Ta en mall
Ett snabbt sätt att börja med denna typ av layout är med en HTML-mall. Phoebe är en ren, minimal Blogger-mall som är fylld med massor av funktioner som ett automatiskt utvalt inläggsreglage och Promo-område (båda är valfria). 4 hemsidestilar att välja mellan (skjutreglage + promo-område, endast skjutreglage, endast promo-område eller klassisk layout).
Fast sidofält
Hittills har alla webbplatser som vi sett sett haft en övergripande horisontell navigering. Det andra populära alternativet är naturligtvis en vertikal navigering, som gör det möjligt att skapa en stark vertikal kolumn på vänster sida av sidan. Det här är ofta ett fast element som stannar var det är medan resten av sidan rullar. Anledningen till detta är att navigationen kan vara lätt tillgänglig från vilken punkt som helst på platsen.
Resten av innehållet kan låna från en av de andra layouterna på den här listan. Observera att jag på nytt har ändrat de tre rutan layout, den här gången i en fyra boxarrangemang. När du är färdig med att läsa den här artikeln, titta på alla layouterna igen och fundera på hur du kan mixa och matcha idéerna för att skapa nya layouter.
I det vilda
Som med föregående exempel ser de två sidorna nedan mycket annorlunda ut, även ur en layoutsynpunkt. Men om du tittar igen märker du att de båda använder en vertikal sidobalk på vänster sida och den fyra rutans layout.Det andra exemplet har helt enkelt flyttat de mindre rutorna till toppen av sidan! Ännu en intressant idé som du bör tänka på när du skapar en webbplats baserad på dessa exempel.
Ta en mall
Ett snabbt sätt att börja med denna typ av layout är med en HTML-mall. Pebbles är en unik portföljbloggblogg, fokuserad på minimalism, elegans och enkelhet. Det är skapat kring ett modulärt koncept och ett fantastiskt masonry-portföljenät. Paket med många fantastiska funktioner, erbjuder denna mall den bästa lösningen för alla nischer.
Rubrik och galleri
Alla älskar en bra galleri sida. Ur ett layoutperspektiv, vad kan det vara enklare? Allt du behöver är ett solidt, jämnt galler av bilder och lite utrymme för en rubrik med ett valfritt underhuvud. Nyckeln här är att göra rubriken stor och djärv. Använd det här som en punkt av kreativitet och inkludera ett skript eller något galet typsnitt.
I det här exemplet används squished rektanglar för att spegla den verkliga platsen nedan, men det här kan och bör ändras så att det passar vad du än visar. Poängen här är att få dig att tänka utanför lådan och inte vara standard på en fyrkant, kanske du kan använda vertikala rektanglar eller till och med cirklar i ditt eget galleri!
I det vilda
Utvecklaren nedan använde denna design för att skapa ett galleri av logotyperna för kunder som han har arbetat med. Observera att han inte föreslår att han skapade logotyperna, men visar helt enkelt bort sin kundbas på ett mycket visuellt sätt. Detta visar att även om du inte är en designer, kan ett miniatyrgalleri vara ett bra sätt att visa upp en annars vanlig och tråkig lista över objekt.
Ta en mall
Ett snabbt sätt att börja med denna typ av layout är med en HTML-mall. Proton är kreativt tema av hög kvalitet med unik stil och ren kod. Proton kan användas för många ändamål från minimala portföljer, byråer, frilansare och mycket mer. Mall skapas och testas i alla enheter och fungerar perfekt utan ett enda problem.
Utvalda foton
Layouten nedan är extremt vanlig, särskilt bland fotograferingsgemenskapen. Grundidén är att ha en stor bild som visar antingen din design eller fotografi (något som helst), åtföljd av en vertikal vertikalnavigering på vänster sida.
Navigationen kan vara den starkaste i vänsterjustering, men gärna experimentera med ett center eller till och med rätt inriktning för att komplimera den raka kanten på fotot.
I det vilda
Webbplatsen nedan gör det mesta av denna layout genom att vrida den ena bilden i en horisontell reglage. En bild presenteras i taget men du kan se nästa som toppar på höger sida av sidan. När du svävar över det här visas en pil som låter dig skjuta igenom bilderna.
Som ett alternativ, varför försök inte att skapa en webbplats som använder samma layout men med ett vertikalt glidande bildgalleri? Utrymmet ser nästan ut som mer lämpat för detta, eftersom du inte behöver ta med ett obekvämt cutoff-område för att skydda navigeringen.
Kraftnät
Strömnätet är den mest komplexa layouten i den här artikeln, men det är en av de mest effektiva layouterna jag har sett för sidor som måste innehålla alla typer av relaterat innehåll. Från bilder och musikspelare till text och videoklipp kan du stämma överallt i denna layout och den blir stark.
Nyckeln ligger i den nedre halvan av förhandsvisningen ovan. Observera att det faktiskt finns en stor behållare som innehåller en serie rektanglar. Denna behållare ger dig gränserna för ditt utrymme, och allt innehåll du placerar inuti ska formateras i ett starkt men varierat rutnät, inte till skillnad från den avancerade rutnätlayouten nära början av denna artikel.
I det vilda
Det här kan vara väldigt svårt att bryta sig om tills du ser några levande exempel. Den första är en utställning av konst och kultur. Den beskrivningen ensam berättar att innehållet kommer att vara över hela linjen, och vi ser faktiskt att sidan är fylld med Twitter-flöden, foton, listor, bilder och mer.
Det passar dock alla tätt inuti det galler som designern har etablerat. Denna layout är lätt utbyggbar så att det oavsett hur mycket du slänger på det ska det övergripande utseendet förbli ganska logiskt och strikt så länge du formaterar och ordnar ditt innehåll korrekt.
Denna layout påminde mig ovanligt om en handledning som jag skrivit ett tag tillbaka på att designa en webbplats för ett rockband. Här har vi en väldigt annorlunda sida, men en nästan identisk arrangemang av innehåll, särskilt i nedre halvan. Det verkliga tricket för att dra denna layout av rätt är att börja med några riktigt stora lådor, som sedan bryts upp i mindre innehållsområden efter behov.
Om du fortfarande känner dig vilse, kolla in hela handledningen, som går igenom varje steg i processen.
Ta en mall
Ett snabbt sätt att börja med denna typ av layout är med en HTML-mall. PunicPress är en fullständigt mottaglig HTML5 och CSS3 mall som är riktigt bra för planering för att starta en online-nyhetswebbplats eller tidskrift.
Fullskärmsfoto
Den slutliga layouten på listan är en annan som är idealisk för fotografer, men kommer att fungera på vilken webbplats som helst med en stor, attraktiv bakgrunds grafik att visa och en begränsad mängd innehåll.
Det kan vara mycket svårt att läsa innehållet när det läggs över en bakgrundsbild, så grundidén är här att skapa en ogenomskinlig (eller nästan opak) horisontell stapel som sitter ovanpå bilden och fungerar som en behållare för länkar, kopiera , logotyper och annat innehåll.
Snarare än att använda baren som ett riktigt stort innehållsområde, försök att dela upp det i några olika sektioner. Detta kan göras genom att ändra bakgrundsfärgen, lägga till några subtila vertikala linjer som delare eller till och med faktiskt bryta den stora rutan i mindre bortkopplade lådor som jag har gjort ovan.
I det vilda
Denna layout kan känna sig oerhört restriktiv, men nedan får vi en inblick i hur mycket den kan hålla. Denna fotograferingsplats fyller stapeln med navigering, en? Om? textblock, några senaste foton med beskrivningar och en stor logotyp! Inte illa för ett så litet utrymme, och det drar allt detta på ett mycket rent och oklart sätt.
Ta en mall
Ett snabbt sätt att börja med denna typ av layout är med en HTML-mall. Denna enhetsmall är utmärkt för portfölj- eller fotografibaserade webbplatser. Sektioner som ingår i mallen inkluderar om oss, tjänster som erbjuds, senaste arbeten, testimonials, en fungerande kontaktformulär, en enda portföljsida, olika nyhetssidestilar och mycket mer.
Slutsats
Det fanns några viktiga punkter som lagts fram ovanför som jag vill upprepa när jag avslutar. För det första, även om sidlayout definitivt inte nödvändigtvis är en? En storlek passar alla? öva, det finns en vetenskap till den som snabbt och enkelt kan tillämpas i ett otroligt stort antal omständigheter.
Därefter behöver de uppställningsidéer som presenteras ovan inte resultera i kaktsnittswebbplatser som alla liknar varandra, utan istället ger dig en grundläggande duk för att bygga en särskilt unik färdig design.
Slutligen är nyckeln till att framgångsrikt implementera dessa idéer att komma ihåg att de inte är i sten. Var och en bör ändras för att passa ditt specifika projekt och kan till och med blandas och matchas för att skapa nya idéer!
Lämna en kommentar nedan och låt oss veta vad du tycker om layouterna ovan. Finns det något som inte nämns ovan som du är van vid när du har problem? Lämna en länk till ett exempel.