Använda landmärken gör sidlayout enkelt
En design kan ha påverkan. Det kan ha stil. Men att ha dessa är inte tillräckligt.
För att fungera bra måste en design ha element som spelar av varandra styrkor. Lyckligtvis har varje del innehåll inneboende riktlinjer.
Layout eller arrangemang av innehåll på en webbsida är avgörande för en designs framgång. Layouten prioriterar bland annat innehåll som leder människor från ett element till ett annat.
Om det görs rätt, kommer folk att vara så intresserade av innehållet att de inte kommer märka något annat.
Läs vidare för mer information och tips för att skapa layouter som fungerar i dina mönster.
Med exemplet nedan kommer de flesta att märka antingen fotot eller rubriken först, sedan texten och slutligen länkarna.
De får inte märka att rubriken, texten och modellens ansikte är inställda på en tredjedel och två tredjedelar i sidan (heder tredje parts regler) eller att rubriken och länkarna är skrivna i färger som samplas från modellens läppar eller att Kurv på hennes axel leder ögat mot uppmaningarna till handling.
Text, foto och rubrik utgör en komposition. Om en faller ur sin plats, misslyckas hela stycket.
Arrangemang baserad på ömsesidigt respekt
Var sätter vi saker? Låt dem berätta för oss. Kännetecknen för grafik, bilder och bitar av text blir tydliga när de träffas på en sida. Vissa arbetar bättre tillsammans med andra, och vissa arbetar bara när de placeras på ett visst sätt. Till exempel fungerar vår layout tekniskt på två sätt:
Figur 1 visar den layout som används i vårt exempel ovan. Gråa block representerar rubrik, foto och text.
Figur 2 visar hur samma principer skulle gälla för inversionen: ett stort element balanserat av två mindre element. Det här fotot ser bättre ut till höger, dock.
Vår modell ser till vänster. I figur 1 tittar hon på texten. I figur 2 tittar hon bort från texten. Det kunde ha fungerat om hon tittade på kameran, men för att hon tittar bort, förlorar den viss inverkan. Inte mycket, men tillräckligt för att betyda.
Modellen visar växelvis intresse för texten och, när den är inverterad, ignorerar den. Ordningen av element etablerar antingen en positiv eller negativ attityd.
Anpassning baserad på landmärken
Ibland ger den sak som gör element på ett visst sätt också ledtrådar om utrymme och anpassning. Vi noterade hur modellens ögon pekar mot vänster, men bilden och texten innehåller andra visuella signaler.
Implicerade linjer mellan landmärken i typografi och bilden överflödar i denna komposition:
- Modellens öga och läppar och näsens kant möter kanten på den högra kolumnen av text.
- Den vänstra kolumnen av text möter den vänstra kanten av rubriken. Den når nästan kanten av modellens hår men faller för att hålla sig i högra kolumnen.
- Modells ansikte (särskilt ögon och mun) definierar rubrikens vertikala utrymme.
- Fotens botten markerar den nedre delen av kompositionen (i tredjedelsregeln).
- Modellens ögon är en tredjedel från toppen av kompositionen.
- Mitten av modellens ansikte och den högra kanten på rubriken möts vid en tredjedel och två tredjedelar av kompositionens bredd.
Vissa landmärken har mer makt än andra. Designers och fotografer kan exempelvis debattera om modellens ögon är mer inflytelserika än hennes siluett. Men en layout baserad på alla landmärken är bättre än en layout som ignorerar dem.
Använda funktioner för att skapa harmoni
Icke-designers som prövar sin hand i layouter arrangerar ibland element som är baserade på hur de passar in på sidan. Rymden bör respekteras, men det leder inte alltid till den bästa designen.
Figur 5 anpassar elementen till sidans utrymme och baserar allt på kanvasens gränser.
Figur 6 baserar dock sin layout på kontaktpunkter i bilden. Resultatet är ett mer strömlinjeformat utseende.
Figur 5 är ineffektiv eftersom tittarna springer runt mellan fokuspunkterna: till rubriken, ned till ansiktet, upp till texten. Den enklaste raden är rak. Således leder figur 6 tittarens blick lätt från vänster till höger, från ett element till ett annat. Kärnpunkten i den andra layouten är ett smalt band som löper längs uppriktning av rubrik-ansikte-text.
I dessa bilder dras läsare till modellens ansikte, rubriken och texten - vanligtvis i den ordningen. Det är tre olika områden att titta på. Justering av dem ger layouten fokus.
Det rätta svaret
Alla tre layouterna nedan använder samma rubrik, foto och textelement:
Den första layouten har det mest "andningsrummet". Den andra respekterar texten. Den tredje layouten använder negativt utrymme för att uppnå balans. Alla tre använder landmärken men på olika sätt. Är det bäst?
Jakt på svar kan blinda oss till det självklara: att flera lösningar kan vara lika giltiga när elementen fungerar tillsammans. Visuella landmärken är möjligheter, inte regler. Ta en titt på den första designen.
Ju mer elementen överensstämmer med underförstådda linjer, desto mer kommer ett icke-överensstämmande element att sticka ut. Här bryter formgivaren ordet "Landmärken" från den andra textens vertikala inriktning, vilket underlättar sökordet.
Det är ingen tvekan om vad sidan främjar. Framgång mäts inte av hur strikta element överensstämmer med principerna för design men hur väl sidan meddelar sitt meddelande.
Skriven uteslutande för Webdesigner Depot av Ben Gremillion. Ben är en frilansskribent och designer vem löser kommunikationsproblem med bättre design.
Hur följer du landmärken på dina mönster? Vad fungerar bäst för dig och vad gör det inte?