Om Bottenhavet
Bottenhavet är ett artikelarkiv med texter om design och formgivning.
Så gör man en hemsida
Här tänkte jag gå igenom min arbetsmetodik då jag skapar en hemsida. Det finns många olika sätt att gå tillväga på. Min egen arbetsmetod är dock väl utprövad och framarbetad genom många års erfarenhet.
Idén bakom hemsidan
Det första, och ganska självklara, steget är att ha en idé kring din hemsida. Ett koncept kring vad den fyller för syfte där ute helt enkelt. Men det är ju inte absolut nödvändigt, ofta kan det vara väldigt stimulerande att bara skapa en sida, lägga upp den och låta den leva sitt lilla liv, utan att den är full av revolutionerande idéer.
Denna tankeprocess är det enda steget i utvecklingen då jag verkligen känner att det lönar sig att gå bort från datorn och skissa med blyerts på ett stort block. Koka en kopp kaffe och sätta sig i soffan. Låt sedan idéerna flöda fritt, skriv ned allt som har minsta möjlighet att hamna på den slutgiltiga sidan. Det är ofta man glömmer saker trots att man för stunden är övertygad om att dom sitter där för alltid!
Jag brukar först och främst skriva ned ungefär vilka undersidor som blir nödvändiga och vad dessa kommer innehålla. Detta ger en bra bild av hur omfattande hemsidans navigationssystem behöver vara. Jag brukar även börja skissa på en förstasida. Detta är i många fall hemsidans viktigaste sida, och det är otroligt viktigt att denna snabbt visar vad hemsidan handlar om. När jag skissar på förstasidan brukar de första tankarna kring layouten på själva hemsidan dyka upp också.
När du har en snygg lista på vad som absolut måste finnas med på din startsida är det dags att tänka över denna lista en och två gånger. Är den tydlig? Berättar den för användaren vad hemsidan handlar om? Något jag med tiden upplevt som viktigare och viktigare är just att snabbt och tydligt berätta för besökaren vad en hemsida handlar om. Detta kan visa sig i en extra tydlig box med en kort sammanfattning av hemsidans innehåll. Det kan t.ex. vara
”Bottenhavet är ett artikelarkiv med texter om design och formgivning.”
En sammanfattning som snabbt ger besökaren en uppfattning kring sidans innehåll.
Design av hemsidan
Nu när vi har en lista på hemsidans innehåll blir nästa steg att göra något av detta. Design av en hemsida handlar i mycket om att placera ut alla olika element på ett smart sätt. Här brukar åtminstonde min designprocess börja.
Sätt igång ditt favoritbildprogram (photoshop för mig) och luta dig tillbaka. Jag brukar sedan börja fundera på vilken typ av intryck hemsidan ska ge. Ska den vara liten och kompakt uppe i toppen av webbläsaren, eller ska den vara flytande och sträcka sig från kant till kant av webbläsarfönstret?
En annan fundering är om hemsidan ska så att säga flyta ut i den vita bakgrunden eller vara inkapslad. Ska text och bild ligga direkt på bakgrunden, eller skapar du någon slags box att placera din hemsida i, vilket ger en mer distinkt bakgrund för din hemsida?
Hur du väljer här blir väldigt avgörande för hur din hemsida uppfattas. En hemsida utan tydlig struktur som flyter ut i bakgrunden kan uppfattas som fri och luftig, på samma gång som den även kan upplevas som ostrukturerad och vag.
En inkapslad layout däremot kan uppfattas som tråkig och strikt, men är ofta ett säkrare kort om du inte designat många hemsidor tidigare. Denna hemsida är t.ex. inkapslad med en tydlig avskiljare mellan innehåll och bakgrund (till höger).
När jag bestämt mig för en typ av layout börjar jag placera ut de viktigaste komponenterna, logotyp och huvudmeny, kanske även en sökruta om det är aktuellt med en sådan.
Dessa komponenter är otroligt viktiga för din hemsida just eftersom de följer med på alla undersidor. Foten på din hemsida kommer förmodligen också följa med på alla undersidor, men det är sällan användare av din hemsida kommer lägga något större fokus på den.
När dessa komponenter är på plats är det dags att börja placera ut en huvudstruktur för själva innehållet. Jag brukar avdela ett område för innehåll, det blir det område som är unikt för varje undersida och layouten runt i kring detta område håller sig relativt lika mellan sidorna.
Var noga med att alla punkter på din lista över saker att presentera på din hemsidas förstasida verkligen får den uppmärksamhet du tänkt dig i din layout. Det är lätt hänt att något inte får plats, eller att man inte hittar någon naturlig plats för ett visst element. Det är dock för tidigt för att börja kompromissa, försök istället se till att det som är viktigt på förstasidan verkligen hamnar där.
Tänk här även på att det som syns ovan ”folden”, som är den höjd du har innan användaren av din hemsida måste scrolla, får otroligt mycket mer uppmärksamhet än det som är under. Så var noga med att placera din hemsidas viktigaste komponenter högt upp. På grund av detta är det även ofta olämpligt med ett allt för högt sidhuvud.
Färger till hemsidan
När alla boxar är utplacerade och jag vet om jag vill ha en strukturerad hemsidelayout, eller en mer flytande. Det är dags att börja jobba lite med kontrast och färger.
En teknik jag använder lite här är att sätta boxarna i lite olika grå nyanser för att få en uppfattning om hur kontrasterna ska förhålla sig.
På kuler.adobe.com får man galant hjälp att skapa ett färgschema till sin hemsida, för nybörjaren kan man direkt använda sig av ett färdigt färgtema här. Dom håller ofta mycket hög kvalitét!
Jag brukar själv försöka skapa ett tema med två ganska starkt kontrasterande färger. Detta gör att man kan ladda dessa färger med olika mening. Ofta låter jag den ena färgen vara ”call to action” vilket innebär att den sitter på alla länkar, knappar och andra områden som kräver någon form av interaktion från användaren. Sedan använder jag olika varianter av den andra färgen till själva grundstrukturen på sidan. Detta skapar en lättnavigerad och tydlig hemsida.
Hemsidan växer fram
Jag har nu en ganska tydlig bild av hur hemsidan kommer se ut. Det är dags att experimentera med lite olika uttryck för att se vad som kan passa in på just denna sida. Ett viktigt ställningstagande på en hemsida brukar vara ifall den ska ha djupkänsla eller inte. Djupkänsla skapar du genom att lägga en skugga bakom boxar, använda gradienter i bakgrunden, använda gradienter och ljusfläckar i knappar osv. Alternativet till detta är att göra en platt hemsida, men som absolut kan vara minst lika spännande för det.
Bottenhavet har en ganska platt profil. Den enda djupeffekten är egentligen skuggan på vänstermenyn. Detta skapar ett harmoniskt utseende och hemsidan skriker inte så mycket på uppmärksamhet som den skulle kunna gjort med ett mer tredimensionellt utseende.
Kodning av hemsidan
När jag har en färdig layout i photoshop är det dags att ta itu med själva kodandet av hemsidan. Här finns det många olika vägar att gå. Själv föredrar jag att koda för hand utan någon speciell programvara för att hjälpa mig.
Jag har sparat en grundmapp jag alltid utgår ifrån. I den har jag en färdig minisida med bara en logotyp i, en css-fil med alla grunder klara (som storlek och teckensnitt på de vanligaste elementen), samt en mapp för bildfiler.
Detta snabbar upp arbetet mycket då det är onödigt att varje gång man gör en hemsida skriva ned de rader som står högst upp i html-filen, här tar jag en gammal fil och ändrar bara i den så att den bättre passar den nya hemsidan.
Under kodandet tar jag konstant och klipper ut mindre delar av min photoshop-layout, sparar dem som egna bilder och skriver in dem i min kod. Så mycket som möjligt av layouten försöker jag återskapa med kodning istället för bilder då detta snabbar upp nedladdningen av hemsidan.
En färdig hemsida
Här har jag väldigt ytligt gått igenom principen för hur man kan jobba när man skapar en hemsida. Tänk på att varje steg i denna utvecklingsprocess kan ta lång tid och ofta kräver mycket funderande. Hoppas det är till någon hjälp i skapandet av din nästa hemsida! Var inte rädd att kommentera artikeln om du skulle vilja ha något förklarat i mer detalj eller liknande!
Länktips om hemsidedesign
Webdesign from scratch
Wikipedia om webbdesign
Webdesignskolan
hej jag skulle gärna vilja prata med dig. Jag ska göra en hemsida och vill ha mer tips från dig, från grunden allt det tekniska.
tack på förhand/Amit
Hej! Jag skulle villja göra en hemsida så behöver hjälp. Var vänligt hjälpa mig vid den. Tack
Mycket bra artikel, fick inspiration att bli lite noggrannare med mina layouter.
jag blev inspererad av att skapa en egen hemsida när jag läst detta. skulle vilja ha mer information om hur man gör och fixar saker till hemsidan tex som på www.burkar.nu
tackar!
Testar komentar alternativets kod
Hej
Jag undrar hur man gör skriver t.ex gästbok, bilder och sånt i vänster spalt och liknande…som en riktig webbsia som t.ex aftonbladet..hur och var skriver man det? på vilket sätt? kan man få hjälp? vill göra en riktig fin webbsida…:)
tack