I sin bok Getting Real förespråkar folket på 37signals (de bakom t.ex. Basecamp och Backpack) att du ska strunta i detaljerna i början. Om du fokuserar på detaljer i ett för tidigt skede kommer du fastna i dem, menar de.
Detaljerna blir uppenbara när du använder det du bygger. Du kommer märka vad som behöver mer arbete. Du kommer känna vad som saknas. Du kommer veta vilka gropar som måste asfalteras över eftersom du hela tiden kommer köra i dem.
Ett område där jag tagit mig vatten över huvudet är webbdesign. Jag har en distanskurs i grafisk form bakom mig (förvisso aldrig fullbordad; Forsbergs, rekommenderas) och jag har gjort lite webbdesign, men jag kan inte säga att jag behärskar det. Min repertoar är väldigt begränsad och jag behöver låna en hel del från andra för att åstadkomma något.
Därför är det extra lätt att fastna i detaljerna och jag tycker det är särskilt viktigt att få dem ur vägen för att komma vidare.
Nu har jag inte läst hela 37signals bok, kanske säger de mer om detta, men råden i kapitlet jag citerar är nog inte så hjälpsamma för den som liksom jag inte är någon webbdesigner. ‘Jag har struntat i detaljerna, vad gör jag nu?’
Jag har tre tips som funkar för mig och som kanske kan hjälpa dig att komma vidare med detaljerna i webbdesignen utan att fastna i dem. Dessa rör sidans layout eller struktur, dess färg samt dess grafiska design.
Först: layouten eller sidans struktur. Jag har haft stor hjälp av Mark Boultons texter om rutnät, ‘grids’. I stället för att sitta och justera kolumnbredder – eller ännu värre: att sitta och bestämma storlek och position för varje litet element på hela sidan -, bestäm dig för ett rutsystem med två eller tre fasta kolumner som du positionerar ditt ‘innehåll’ i. För en bra illustration, se Khoi Vinhs inlägg om detta.
Denna blogg och vår hemsida har en gridd som är baserad på det gyllene snittet. Likaså Menumo, där jag kunde lägga bryderier om detaljer på hyllan och komma vidare med själva funktionaliteten.
Fördelen med rutsystem och att använda gyllene snittet är att du kan räkna ut proportionerna för sidans olika delar. Du utgår från en sidbredd som baserar sig på den skärmbredd du designar för (800 eller 1024 pixlar), sedan beräknar du bredden på huvudkolumnen genom att dela med Φ (fi, ca 1,618), återstoden blir sidokolumnen (vars bredd förhåller sig 1:1,618 till huvudkolumnen). Undrar du hur högt sidhuvudet ska vara? Låt det vara 1:1,618 till sidokolumnen. Enkla beslut.
Sidans färg då. Hur väljer man färger? Jag gillar idén att plocka färgerna ur ett fotografi. Ta ett fotografi du gillar känslan i och välj ett antal av dess dominerande färger.
Färgschemat vi använt till bloggen och hemsidan är plockat huvudsakligen ur en bild av en Leica-kamera vi hittade på Flickr. Vi använde ytterligare en bild av en Leica som jag inte kan hitta (men denna bild påminner om den). Därefter har vi skapat ljusare och mörkare toner av de huvudfärger vi valde, så att vi har lite fler alternativ.
Liksom med rutsystemet handlar detta om att begränsa ens valmöjligheter, eller om att göra ett val och sedan härleda resten av valen ur detta. I förra exemplet i form av att du väljer en sidbredd och från denna beräknar alla proportioner. I fallet med färgschemat väljer du en bild du gillar och plockar färger ur denna, som du sedan justerar till en mörkare eller ljusare ton, eller till en mer eller mindre mättad. Detta görs genom att justera färgens HSB-värde snarare än RGB-värdet; S-värdet anger mättnad (saturation) och B-värdet ljushet (brightness).
Till sist: grafisk design. Med design syftar jag här på hur sidans element ser ut, förutom dess färg, storlek och position i förhållande till andra element. Här är jag inte kapabel till mer än att låna från andra – och jag har försökt göra det på ett sätt som inte är rent plagiat. Mitt tips här är att skapa ett moodboard. I praktiken betyder det att du klipper ut sånt du tycker är fint och samlar urklippen tillsammans.
Ur denna samling klipp kokar du sedan ihop den grafiska designen, genom att kombinera delar från flera av dina favoriter. Jag önskar jag kunde ge mer hjälp här. Du får helt enkelt prova dig fram. Testa att sno t.ex. en knapp rakt av, färga den annorlunda, ändra formen lite, kombinera med någon del från ett annat urklipp.
Moodboardet influerar förstås färgvalen, så klistra även dit det foto du valt att plocka färgschema ifrån.
Till vår hemsida och blogg använde vi inte något moodboard. Bilderna av Leica-kameror var vår främsta källa till inspiration. Typsnittet i logotypen (Bryant Condensed) valde vi för att efterlikna det på kameran och länge arbetade vi med en design som var baserad på kamerahuset och som visade sig hopplös men som gjorde att vi kunde komma vidare med arbetet.
Till Menumo har vi ett moodboard med främst urklipp från olika kokböcker.
Lycka till! Och glöm inte att se upp med detaljerna.
Mhm intressanta tips
Posted by: Viktor, oftast känd som Meffe | 2007.05.07 at 11:13
(Ber om ursäkt för det kommentarsspam som fanns här tidigare. Förhoppningsvis slipper vi det i fortsättningen.)
Posted by: Peter | 2007.05.07 at 11:13