Det finns alltid det ögonblicket i början av ett webbdesignprojekt där du tänker? Var börjar jag ?? Du kommer att kämpa längtan efter att skapa något helt annat och nytt mot något testat och pålitligt.
Realistiskt finns det några layouter som aldrig blir gamla. Dessa mönster är allmänt accepterade av användarna, lätt att förstå och ger en solid ram för ganska mycket design och innehållstyp. Här ser vi på dessa fem? Tidlösa? webbsidor och hur du får ut det mesta av dem till ditt nästa projekt.
1. Hero Image Stacked på Simple Grid
Oavsett skärmstorlek, ger detta format användaren något att titta på, bläddra igenom och smälta. Medan de faktiska specifikationerna för denna form kan ändras baserat på enhetstyp eller om du föredrar en fullbredd eller grundbild, är skissen ungefär densamma.
- Navigering
- Hjältebild med textöverlägg
- 2 till 4 kolumner med små informationselement med eller utan ikoner
- Huvudkroppsområdet
- sidfot
Designen är ren, ger en stark visuell närvaro och tenderar att fungera bra med responsiva ramar oavsett brytpunkt. Några alternativa tillämpningar av detta format är att byta en statisk hjältehuvud för en skjutreglage eller videohuvud.
Varför det fungerar: Varje element har en plats och det finns ett logiskt flöde för att följa innehållet. Huvudbilden är det första intrycket som borde dra användare in i designen och sekundära element ska göra att användarna vill klicka runt.
Införliva en trend: Lägg till ljusfärgade ikoner eller lådor till de kolonnbaserade informationselementen, eller använd en platt stil för användargränssnittet i hela designen.
2. En sida, en kolumn
En sidlayout är en av de bästa lösningarna för webbplatser med minimalt innehåll och ett enda fokus eller meddelande. När meddelandet är enkelt, behöver du inte bli galen med formens utformning heller. En layout med en kolumn kan vara den perfekta lösningen.
- Navigering
- Huvudkroppsområde med bilder och text
- sidfot
När du använder detta designmönster är rummet ett viktigt designelement. Se till att elementen har gott om utrymme mellan dem och överväga att använda överdriven mellanrum på utsidan av designen. Risken med en sidasidan är att den kan känna trånga eller oorganiserade om avståndet är oklart.
Varför det fungerar: Formeln för en sida är bäst lämpad för små webbplatser. Det kan göra bristen på innehåll på en introduktionssida eller en enkel portfölj känns tyngre än den är. Formatet fungerar också bra för enkla bloggar eller innehållsplaner som håller sig till ett enda format.
Införliva en trend: Lägg till parallell rullning för att få sidan att känna sig mer engagerande när användarna bläddrar. Dessa enkla effekter kan göra en enkel ensidig design känsla djupare och mer robust (och som att den faktiskt har flera sidor med varje flick av musen).
3. Definierat rutnät
Nätt staplade rader och kolumner av innehåll går aldrig i stil. Oavsett om gallret är byggt med massor av små bitar eller bara en fyra-fyra-ordning, berättar ett rent nät om din användare något om dig från början. Detta innehåll är organiserat, hanterat bra och beställt för dig.
Grids är oerhört populära bland designers för sina egna portfölj webbplatser. Vad som är trevligt med ett bildgalleri är att du kan visa upp mycket visuellt innehåll utan att se skrämmande. Denna gallerieffekt kan vara ganska effektfull.
Galler kan också komma i form av färgade lådor eller behållare för att organisera text. Rutnät kan vara synliga eller osynliga. Det finns så många alternativ att välja mellan. Kom bara ihåg att vara särskilt försiktig med bredden och djupet på kolumnerna och raderna och avståndet mellan varandra. Dessa små detaljer kan göra eller bryta hela designen.
Varför det fungerar: Den organisation som ett nät skapar är svårt att slå. Ett bra rutnät gör det enkelt för användare att hitta och interagera med innehåll samtidigt som man skapar synlig harmoni.
Införliva en trend: Använd enkla bitar av animering för ett kaklat galler så att en svängare av klick? Flips? ett rutblock för att visa ytterligare information. Vill du ha ett annat alternativ? Överväg att vrida gallret i ett kortdäck, med en materialdesignstil.
4. Klassisk F-Mönster
Forskning om hur människor tittar på webbplatser avslöjade ett visst flöde som kallas F-Pattern. Läsmönstret visade att användarna startade på toppen av en webbplats och läste från vänster till höger över skärmen. Sedan rör de sig ner och läser över igen. Slutligen skummar de bara längst ner på sidan i en rak linje.
Att utforma innehållet i detta F-mönster är ett sätt att hjälpa till att sätta innehållet som är mest viktigt just när användarna letar. Detta begrepp är en gemensam designplan.
- Rubrik och navigering
- Bred vänster kolumn som huvudinnehållsområde
- Tunn högra kolumnen (sidobar) för länkar och relaterad information som inte går längst ned på sidan
- sidfot
Varför det fungerar: Människor är vana varelser, och detta är ett testat mönster som visar hur människor tänker, titta på och läsa webbplatser. Det är bekvämt och vanligt, vilket gör det enkelt för användarna att förstå och interagera med.
Införliva en trend: Vrid platsen på sidofältet eller vrid sidofältet i navigeringsområdet, eller använd en hjältebild ovanpå det F-formade mönstret.
5. Minimal Layering
Det handlar bara om en stor minimal design. Det öppna utrymmet gör att användaren kan känna sig trygg med ett riktat fokus. Då finns juxtapositionen av lager i det rummet, vilket är mer komplext och detaljerat.
Det är den kombinationen av enkel och intresse som gör denna designstil användbar och formbar för ett antal projekttyper. Det är också något som användarna är vana vid tack vare vanlig användning av Apple på deras hemsida.
Varför det fungerar: Layering kan dra ögat till exakt den plats där det är viktigast i designen. Särskilt i samklang med en enkel övergripande design är detta det element som ber användarna att märka. Layering på en minimal kontur är ett bra sätt att visa upp eller markera en viss del av innehållet eller handlingen.
Införliva en trend: Använd subtila gradienter eller skuggor för att definiera element i olika lager. Medan dessa designtekniker föll i ett tag, skapar knappt-där differentiering gör en stor återkommande tack vare Material Design och en fokusering på att skapa något taktilt i det tvådimensionella rummet.
Slutsats
När du är i tvivel med någon form av design, går det bra att gå tillbaka till designteorins rötter. Använd klassiska idéer och principer för att styra ditt beslutsfattande.
I de flesta fall kommer detta att resultera i något som är rent, lättläst och följer konventionell stil. När du har den grundläggande ramen klar kan du lägga till ett trendigt element för att hålla layouten frisk. Med hjälp av den här layouten kommer filosofin att hjälpa dig att skapa en webbplats som tål testet av tiden bättre utan att se daterat ut. (Nu när du tänker på det, börjar du förmodligen se hur många webbplatser som faktiskt använder ett av dessa begrepp.)