Som webbdesigners måste vi ta mycket hänsyn till när vi påbörjar ett projekt. Ett av de största segmenten som arbetar med layouter och system för att beställa avstånd. Vanligtvis kommer designers att arbeta med ett CSS-bibliotek med nätverksavstånd, men det finns många sätt att implementera kreativa layouter.
Idag går vi över Golden Ratio och hur du kan tillämpa enkla lektioner i ditt designarbete. De flesta av de diskuterade teknikerna gäller för ett brett spektrum av konster och design, men vi kommer att fokusera på den digitala aspekten. Tillsammans med Golden Ratio överväga några andra användbara verktyg som kan bidra till utvecklingen av platslayouter.
Den gudomliga proportionen
Den gudomliga andelen är också känd som Golden Ratio. Det är en matematisk konstant som är nära lika med 1.618 som används för att beskriva förhållandet mellan två element. Detta förhållande har använts sedan den tidiga renässansperioden när nya koncept för ålders konst exploderade på scenen.
Konstnärer under denna tidsperiod ansåg förhållandet att vara magiskt och hålla mystiska gudomliga befogenheter när de integrerades i designarbetet. Hundratals år sedan tillämpade detta mest på saker som arkitektur, skulpturer och målningar, men idag kan vi använda samma tekniker i vår digitala konst.
Förhållandet beskrivs bäst matematiskt. Det är lite förvirrande att förstå först men vi kan ersätta varje variabel som används i ekvationen med faktiska siffror, bara så börjar sakerna förstå lite mer. Vi arbetar bara med 2 variabler - låt oss ringa dem en och b. Element arbetar inom ett guldförhållande när a + b / a är ekvivalent med a / b.
Du kan testa detta med några värden för båda variablerna för att se vad du får. I slutändan vill du sluta med 1.61803398 (eller bara 1.618) som ditt svar. Eftersom proportionerna vi arbetar med inte är inställda på ett specifikt värde kan vi anta att ett antal värden är lika med en lika stor andel. Detta gör att vår design fungerar flexibel och i förhållande till storlek snarare än att sitta inom en domän med absoluta tal.
Matematiska funktioner inom förhållandet
Ett intressant trick bildas genom att arbeta med just själva förhållandet och variablerna ur vårt totala system. Ta till exempel 960-nätsystemet delat i 2 kolumner. Vi vet inte hur stort det är för varje kolumn att hålla vår layout inom de gudomliga proportionerna, men vi har tillräckligt många siffror för att räkna ut det.
960 (representerad i enheter av pixlar) har vårt värde av a + b. Så vi kan dela 960 till 1.618 för att få värdet av vår längre sida, som representeras av vår variabel a. I detta fall 960 / 1.618 kommer ut till 593px.
Med hjälp av denna nya information kan vi subtrahera 593 från 960 för att få bredden på vår sidokolumn - 367. Om vi vill kontrollera vårt svar kan vi ta 593 + 367 (960) och dela upp det med vårt större sidovärde 593. Baserat på min beräkningar bör du få ett avkastningsvärde på ~ 1.618, exakt lika med vårt gyllene förhållande. Ta-da!
Denna teknik är viktig när det gäller att utveckla vätskeformat för dynamiska webbplatser. Den gudomliga proportionen bidrar till att hålla orden på det organiska, naturliga sättet. Du kan vidare organisera din design i 3 eller 4 kolumnlayouter om du vill. Med det här alternativet måste du testa ut hur exakt utseendet du ska och vad den totala storleken på din layout kommer att vara.
Om du fastnar på att bestämma en fast andel för din webbplats, svettas inte de små grejerna. Det gudomliga förhållandet är endast avsett att vägleda dig som designer, för att inte tvinga idéer ner i halsen i att använda exakta numeriska värden överallt. Så länge din design kan hålla sin egen vikt och håller en jämn känsla hela sidan borde du vara okej.
Som en allmän tumregel kan du använda förhållandet 5: 3 på plats - även om det inte är lika med det gyllene förhållandet, ska det ge resultat tillräckligt nära för att ta hänsyn till fel.
Redogörelse för tredjedelsregeln
När du optimerar din webbplatslayout kanske saker inte alltid kommer ut perfekt. Det här är vägen för webbdesign och det finns verkligen ingen anledning att följa exakta riktlinjer här. Tredje regeln är nästan en förenklad lata man? sätt att tillämpa en gyllene andel.
Det kommer inte att ge dig dåliga resultat eller misshapen webbplatser, långt ifrån det. Men det är en avslappnad inställning till konstruktionsförhållanden, som många kommer att hitta överlägsen exakta beräkningar.
Regeln säger att du kan dela upp mockup eller konstverk i nio lika kvadrater. Detta uppnås genom att placera 2 vertikala och 2 horisontella linjer lika inskilda i hela bilden. De fyra punkterna i bilden där dina linjer möts är "hot spots"? för din webbplats. Eller i generella termer bör dessa områden innehålla det viktigaste användarstyrda innehållet.
En intressant inställning till detta problem löser upp att dela upp varje kolumn i halvor igen. Detta ger dig ett nät jämnt fördelat på din webbplats med proportioner som ställs över hela linjen. På så sätt kommer din högra vänstra rutan att innehålla det mesta av din webbplats branding (logotyp, navigering, rubrikområde?). Alternativt kan din högra högra fyrkant innehålla mindre viktig information splittring gå ner din webbplats vertikalt.
Att fokusera på varje inre punkt i webbplatsdesignen kan hjälpa dig att ta reda på var du ska behålla rubriker, knappar, länkar etc. För att omformulera är det inte en strikt regel som alla designers måste följa för att hålla sina layouter i kontroll. Detta är bara en ideologi som har tillämpats på otaliga designprinciper och visat sig fungera med komplexa webbsidor. Detta är ännu enklare att arbeta med, eftersom Adobe-designprogrammet levereras med verktyg för att möjliggöra grids i dina filer. Hur mycket lättare kan saker få?
Den gyllene rektangeln
Som namnet antyder är det möjligt att skapa en gyllene rektangel genom att tillämpa samma förhållande som vi diskuterat geometriskt. Den längre sidan av din rektangel ska hålla ditt längre värde eller variabel en, medan den kortare sidan skulle representera din variabel b värde. Denna form kan också tillämpas kraftigt i designlayouter och andra grafikkort inklusive logotyper och mindre ikoner.
Dessa speciella geometriska delar kan vägleda dig för att räkna ut nästan alla layoutproblem eller element som du kan vara intresserad av. Mer specifikt kan du skissera lagerbilder eller snygga Flash-skärmar som placeras i webbplatsens innehåll på din webbplats. Dessa rektanglar kan också användas i dina sidfot eller sidobalkområden för att avmarkera enskilda element eller widgets.
Naturligtvis är den mest framträdande användningen för detta i dynamiskt innehåll. När du placerar fotogallerier eller arbetar i en portfölj bör du överväga gyllene rektanglar som din avgränsare. E-handelswebbplatser kan göra mycket bättre med detta förhållande i takt genom att visa produkter i inte bara rader utan innehållsrika kolumner jämnt fördelade inom gyllene rektanglar.
Jag är inte här för att föreslå att varje element på din sida ska vara asfalterad av gyllene rektanglar. Faktum är att det finns många överväganden när det gäller anpassning och rutnät för att hålla dig medveten om eventuella konstruktionsfel du kan skapa. Detta är bara ett annat verktyg förutom de otaliga andra som brukade skapa en vacker layout.
Slutsats
Vi har repat lite djupare ner över ytan av Golden Ratio för att räkna ut hur det kan implementeras i moderna designarbeten. Ristsystem kan vara finiga och arbetar inom gudomliga proportioner gör att både fasta och elastiska layouter kan andas och falla på plats. Du borde inte basera hela din layout på dessa matematiska konstanter. Men du kan få en stor fördel genom att börja med i denna sektor och överväga din webbplatss nätutförande.
Det finns några fantastiska gratis gallermallar tillgängliga för nedladdning till aide under denna process. Det här är bra om du inte är säker på att hoppa först i designproportioner och vill arbeta på en del solid mark först.
Försök att tillämpa dessa idéer i din nästa design och se hur sakerna syns. Organiska layouter och strukturer i kombination med naturligt kraftfull matematik kan göra för en häpnadsväckande webbdesign.