Xoda » Design

Gyllene snittet och andra designformler

Mattias Wirf — Mon, 11 Jul 2011 13:48:41 +0000

Gyllene snittet

(en. golden ratio, latin. sectio aurea, symboliseras av grekiska bokstaven φ) är ett förhållande mellan former som anses vara en fullkomlig harmoni, “ett gudomligt förhållande”. Renässansens konstnärer använde gyllene snittet flitigt. Det upptäcktes av Pythagoras och teorierna har sedan dess varit många.

Gyllene snittet kan lätt appliceras på design. Grundformeln är enkel, multiplicera med 1,618 eller 0,618 för att få en större/mindre yta i förhållade till den du har. Den mest uppenbara användningen är kolumner men kan även appliceras på marginaler, bildförhållanden med mera.

Länkar:

Fibonaccital

Fibonacci-tal. Låter det avancerat? ;) Det är egentligen ett enkelt förhållande, som är släkt med gyllene snittet. Det är en rad tal. Varje tal är summan av de två tidigare talen. Så du behöver alltså bara kunna använda plus för att räkna ut dem. Men du behöver inte räkna ut dem, för du kan göra en stor skylt med talen och sätta upp på din vägg:

Hur använda dem i webbdesign? Det behöver inte följas slaviskt, har du ett avstånd som är 13px testa med 21px i nästa. Har du en stor rubrik? Använd avståndet 20px till innehållet den hör till och 50px till annat innehåll. Med rätt typsnitt kan 13 vara en bra storlek på brödtext, 21 och 34 rubriker och 34 och 55 marginal.

Prova dig fram. Design är trots allt lite känsla och inte bara regler.

Läs om Fibonacci-tal:

Engelska WikiPedia
Svenska WikiPedia
Mathworld (om du är intresserad av matematiken)

Många har idéer om var man kan finna Fibanocci-tal och gyllene snittet, det är egentligen intressant för webbdesign om det stämmer eller ej, det viktiga är att de fungerar på en hemsida. Här hittar du en presentation med kritik om mystierie-tänkandet kring dessa ”magiska tal”:

Zinn-X

Tredjedelsregeln

Tedjedelsregeln är en slags förenkling av gyllene snittet. En bild med motivet centrerat blir inte spiecellt spännande. Delar du upp kompositionen i tredjedelar och placerar huvuddelarna av motivet längs med dessa delar så får bilden mer spänning. Det känns som det händer mer i bilden. Kikar du genom en kamera med sökare brukar det finnas mönster, till exempel uppdelat i tredjedelar. Exempel saknas inte om du gör en Googling:

Läs mer om tredjedelsreglen

Rabatment of the rectangle

Jag är inte säker på översättningen av “rabatment”, men tekniken går ut på att du gör en kvadrat i rektangeln som är lika bred som kortsidan. Du välter alltså kortsidan och får ett nytt avstånd.

Mer läsning:

Verktyg för en webbdesigner

Det finns färdiga verktyg för att använda regler när du skapar hemsidor. Flera utveckare har skapat rutnätsystem, mallar som du kan använd att bygga på. Här hittar du några (tips gärna i kommentarerna om du har fler):

Ny företagssida på gång

Sara — Mon, 31 Aug 2009 12:13:18 +0000

Nu börjar vår nya företagssida ta form. Den här sidan kommer finnas kvar, men i fortsättning kommer www.designbilder.se vara vårat ansikte utåt.

Den nya sidan bidrar till att det blir lättare för dig som kund att beställa och se var vi kan erbjuda.

Designbilder.se

Nytt sidhuvud på Xoda

Mattias — Fri, 20 Feb 2009 09:21:17 +0000

Återkommande besökare kanske noterar har vi bytt sidhuvud, som bättre reflekterar årstiden ;) Bilden är från Hultasjön ovanför Garphyttan. Överhuvudtaget pågår lite renovering av blogg och butik. Inom en snar framtid kommer utbudet i vår webbutik öka.

Snö vid Hultasjön

Läs även andra bloggares åsikter om vinterfoto, webbdesign, wordpress, bloggtema

Genomför ditt eget webbprojekt på en kurs

Mattias — Thu, 29 May 2008 16:29:22 +0000

MKFC Stockholms Folkhögskola har en distanskurs som heter Praktiskt Webbprojekt. Där kan man lära sig webbutveckling samtidigt som man genomför sitt webbprojekt. I höst kommer det få en ny skjuts då en hel del video kommer finnas, jag (som är handledare) har börjat spela in nu :) När kursen är slut har man sin färdiga produkt.

Det finns platser kvar – så sök gärna!

Kursinformation Praktiskt Webbprojekt ht08

Bildgalleri för fotografen Tommy Hansen

Mattias — Thu, 03 Jan 2008 19:33:42 +0000

Under december och mellandagar har Xoda producerat ett webbgalleri åt Tommy Hansen. Vi har skapat ett gränssnitt enligt Tommys egen ursprungliga skiss, där han kan skapa sidor och ladda upp bilder. Tack vare erfarenhet från till exempel Xoda Gallery kan vi relativt snabbt skapa skräddarsydda lösningar för fotografer.

På äventyr med nysläppta WordPress 2.3

Mattias — Wed, 26 Sep 2007 05:17:05 +0000

Jag har idag testat WordPress 2.3 som precis släppts i skarp version. Jag uppdaterade vår sida www.kurswebben.se till den nya WordPressversionen. Uppdateringen gick inte helt utan problem…

Plugins
Flertalet plugins fungerade inte, bland annat Similar posts och Simple tagging. Detta beror på att WordPress databas byggts om litegrann, till exempel så har kategori-tabellen bytts ut (tabellerna post2cat, link2cat och categories finns inte mer).

Taggar
Att Simple tagging inte fungerar kanske nu inte gör så mycket. WordPress 2.3 innehåller nämligen sin egen tagg-funktion och kan importera taggar från en rad plugins (öppna bara /wp-admin/import.php). Du behöver dock anpassa temat till att visa taggarna med template-koden the_tags(). Det finns också en taggmolns-widget som du drar till sidokolumnen och sparar.

Lycka till, själv ska jag fortsätta uppdatera bloggar…

Logotype till Kurswebben

Mattias — Tue, 04 Sep 2007 08:50:03 +0000

Jag har fixat en logotyp till Kurswebben (vår kommande webbtjänst för den som vill hålla kurser).

Måste säga att jag tycker den blev ok, även om jag fortfarande ser detaljer att finslipa. Ugglan är den gamla symbolen för kunskap och studier, globen för den globala (digitala) världen.

Korkskruven – webbplats för vinintresserade i ny kostym

Mattias — Thu, 19 Apr 2007 13:39:26 +0000

På webbplatsen Korkskruven.se kan du sätta dina betyg på viner. Korkskruven har fått nytt utseendet och vi har också påbörjat en renovering som kommer göra det lättare att söka och hitta viner, betyg och annan information.

Korkskruven kan bli din satsning på webben!
Korkskruvens utvecklingen bromsas något av att projektet inte har någon uppdragsgivare. Arbetar ditt företag inom vinbranschen är kanske en webbtjänst för besökares vinbetyg ett bra sätt att skapa mervärde för besökaren – då får du gärna vara med och satsa på Korkskruven.se och bli vår samarbetspartner. Med rätt förutsättningar kan vi skapa något riktigt bra tillsammans! Hör av dig :)

Andra bloggar om: vin, vinprovning, betyg, vinbransch, systembolaget, vintips, druvor, korkskruven, öl, alkohol

Ett CSS-exempel

Mattias — Wed, 14 Mar 2007 08:29:44 +0000

Jag gjorde ett CSS-exempel som jag tänkte dela med mig av. Det är inget för den avancerade, utan ett försök att visa för den som börjar lära sig CSS, ett vanligt upplägg med HTML kod och CSS.

Ladda hem filen exempel.zip

Passar på att tipsa om en annan sida för CSS-inspiration. På http://www.nuff-respec.com/technology/css-gallery-roundup kan man hitta en massa länkar till gallerier för CSS-inspiration. Dessutom är den här layouten i sig snygg tycker jag, men kommentarerna vid sidan av posten och menyn på sniskan:

Andra bloggar om: css, design, tips, exempel, layout, inspiration

Länktips: sidor som hjälper dig med CSS

Mattias — Fri, 19 Jan 2007 10:28:17 +0000

Det är vanligt att elever vi arbetar med vill lära sig mer CSS. Här är några länkar som i kombination ger dig stora möjligheter:

Andra bloggar om: css, design, länkar, tips, how-to