Share
Math är vacker. Låter det lite konstigt? Det trodde jag säkert när jag började designa. Matematiken är så stel och ofta tråkig, eller så tänkte jag. Du skulle bli förvånad över att de flesta estetiskt tilltalande mönster, konstverk, föremål och till och med människor har matematik gemensamt. Speciellt Guldförhållandet, även känt som den gudomliga andelen, som betecknas med det grekiska brevet Φ (phi). Denna handledning kommer att täcka anatomi och layout på en webbplats och hur Golden Ratio relaterar.
Elementen på en webbsida är som organ; De är viktiga för en välfungerande och estetiskt tilltalande webbsida.
Dessa är huvudelementen i en webbsida. Det finns många olika sätt att organisera dem, men det här är kanske den vanligaste grundläggande layouten som används online.
Alla webbsidor använder en behållare och till samma syfte; att innehålla sidelement, men hur det är utfört varierar. Till exempel används kroppstaggen eller en div oftast. Tidigare har även ett bord använts (använd inte ett bord som din sidbehållare, det är en avskrivning metod). Tänk på behållaren som husets ytterväggar, där dina sovrum, kök, vardagsrum mm placeras.
Typ av behållare:
Sidhuvudet är inte riktigt ett specifikt element, även om vissa kanske anser att det är. Det används mer allmänt för att referera till den övre delen av din webbsida där din logotyp, navigering, tagline etc. finns. Många föredrar att behålla dessa element i en div för enklare sidstyling, elementseparation och / eller elementindeslutning. Rubriken skulle anses vara en behållare, så det skulle ha två typer att välja mellan: flytande eller fast som nämnts ovan.
Din logotyp är din identitet och varumärke. Den vanligaste placeringen för logotypen ligger inom rubriken, justerad till vänster. Vi läser från vänster till höger, uppifrån och ned, så din logotyp kommer sannolikt att vara det första elementet som dina besökare tittar på.
Sidnavigering är en av de viktigaste elementen; dina besökare behöver det för att använda din webbplats. Det ska vara lätt att hitta och använda, varför det nästan alltid ligger inom rubriken eller åtminstone nära toppen av sidan. Ibland används båda typerna av navigering för webbplatser med hög innehåll.
Typer av navigering:
Som alla vet (eller borde) är innehållet kung! När folk besöker din webbplats är detta det element de kommer att leta efter främst. Det borde vara den viktigaste kontaktpunkten för en webbsida så att besökarna hittar vad de letar efter snabbt.
Sidofältet är elementet med ditt sekundära innehåll som reklam, webbplatssökning, prenumerationslänkar (RSS, Twitter, e-post, etc.), kontaktmetoder etc. Det här elementet är inte nödvändigt även om många webbplatser använder det. Det är oftast rätt inriktat men kan lämnas i linje eller båda (två sidofält) så länge det inte stör huvudinnehållet. För webbplatser som använder horisontell och vertikal navigering, ersätts sidofältet ofta med det vertikala navigeringselementet.
I slutet av en webbsida bör du alltid använda en sidfot för att låta dina besökare veta att de har nått slutförandet av din webbsida. Som sidhuvudet är sidfoten inte egentligen ett specifikt element utan mer av en innehållande sektion. Inom din sidfot kommer upphovsrätt, juridisk information och kontaktinformation primärt. Det är en bra idé att inkludera några länkar till de viktigaste delarna av din webbplats, till exempel början av sidan, hemsidan, kontakt sidan etc. Vissa webbplatser använder detta område som ett tillfälle att nämna relaterat material eller annan viktig information.
Det här är något område på webbsidan som inte omfattas av typografi eller annat innehåll. Du kan känna den starka strängen att fylla så mycket tomt utrymme som möjligt, men gör det inte! Tomt utrymme är lika viktigt för en bra webbdesign som innehållet som ska användas. Du kan se hur NetTuts webbplats använder tomt utrymme väldigt effektivt för att hjälpa besökare genom innehåll, skapa sidbalans och ge en god känsla för innehållsskillnad.
Så det täcker anatomin på en webbsida. Nu kan vi titta på hur guldförhållandet hänför sig till dessa element.
Kom ihåg tidigare när jag sa att matte var vacker? Vi uppfattar visuell appellation baserat på förhållandet (dvs The Golden Ratio). I tusentals år har konstnärer, designers, arkitekter, etc. antingen avsiktligt eller oavsiktligt använt ett gemensamt förhållande i sitt arbete som är estetiskt tilltalande. Vad är det magiska numret? 1,62 (faktiskt 1,618 ...) Jag kommer inte att komma in i ursprunget till det här numret men jag kommer att berätta för dig hur du använder det.
Att använda det gyllene förhållandet är mycket enkelt. Låt oss säga att du vill hitta bredden på kolumnerna Huvudinnehåll och Sidofält. Du skulle ta den totala bredden på ditt innehållsområde (vi använder 900px för det här exemplet) och dela upp det med 1,62. Som visas i exemplet ovan delar vi 900px med 1,62 och får 555,55px. Vi behöver inte vara exakta så vi kommer att runda det till 555px. Nu vet du att ditt huvudinnehållselement kommer att vara 555px bredt och ditt sidfält blir 345px! Hur lätt är det?!
Men vänta! Det roliga slutar inte där. Du kan också tillämpa Golden Ratio på andra elementets bredd i förhållande till dess höjd eller vice versa. Detta ger estetiskt tilltalande element med proportionerna Golden Ratio.
Om du är som de flesta, kommer du inte vilja dra ut en räknare varje gång du vill använda detta förhållande. För att förenkla processen kan vi använda ett enkelt rutnät. Allt du gör är att dela din bredd och / eller höjd av tredje part.
Varje division kan reduceras ytterligare ytterligare av tredje part, vilket ger ett mer detaljerat rutnät. Om du läser föregående artikel "En nära titt på CSS Framework" ser du att CSS-ramverket använder ett detaljerat rutnät. Gridet gör inte bara designen enklare och snabbare, utan skapar också en estetiskt tilltalande layout! Om du inte redan använder ett nät när du utformar kan det vara en bra tid att prova. Du kan ladda ner en gallermall för fyrverkerier, photoshop och mer från http://960.gs, vilket är en annan fantastisk CSS-ram som använder nät.
Som du kan se, Tuts + följer Golden Ratio ganska bra. Den översta tredjedelen av sidan är uppdelad igen i tredjedelar för att visa hur jämnt rubrikavsnittet bryts ner i mindre inkrementer av tredjedelar, mycket nära Golden Ratio. Inte undra varför NetTuts design är så tilltalande!
Om du är ny att utforma uppmanar jag dig starkt att hitta några populära webbplatser, utvärdera deras elementlayout och hur det följer med Golden Ratio och grids. Ta sedan tid att träna med Golden Ratio med dina element och placera dem i din layout med hjälp av ett rutnät.
Accentsconagua