PROJEKTARBETE | FORMGIVNING AV WEBBSIDA

Idag tänkte jag visa upp en webbsida som jag kodade i förra kursen. Det känns lite läskigt att visa detta eftersom jag verkligen inte är något proffs och detta är den första sidan jag gjort själv från grunden. Kursen fokus var på formgivning och responsiv design (anpassningsbar till olika skärmstorlekar). 
 
Projektarbetet var uppdelat i två delar. 
Del 1: Kom på en fiktivt uppdragsgivare för webbsidan. Jag valde  ett hunddagis som jag kallade ljuvliga hundar. Med företaget som utgångpunkt skulle vi arbeta fram målgrupp, persona, kravspecifikation och moodboard. Vi skulle också skriva en rapport där vi presenterade uppdragsgivaren, arbetsprocessen samt motiverade designval m.m. 
 
Del 2: Koda en responsiv webbsida med hjälp av HTML (byggstenarna för webbsidan) och CSS (utseende). Vi fick också använda JavaScript (interaktivitet) om vi ville men eftersom JavaScript är för mig vad Voldemort är för Harry Potter så använde jag det endast till en liten fuktion på webbsidan. 
 
Om det fiktiva hunddagiset Ljuvliga hundar:
Ljuvliga hundar är ett hunddagis beläget i Kungälv drygt två mil utanför Göteborg. Företaget grundades 2009 av Liv Hansson som idag driver det tillsammans med två andra heltidsanställda. Verksamheten har kapacitet för 30 hundar på heltid och tar även emot enstaka hundar bara för dagen. Hundarna är stationerade i mysigt inredda boxar i grupper om fem hundar per grupp, detta för att skapa en så lugn och harmonisk miljö som möjligt. Alla i personalen har relevant utbildning och stor kunskap och erfarenhet av hundar.  Ledorden är: balans, harmoni och glädje.  
 
Bilderna jag använt till hemsidan är från en bildbank som tillhandahåller creatie common zero (CC0) licensierade bilder vilket betyder att det är fria att använda för vem som helst. 
 
Här nedan kommer ett gäng skärmdumpar på hur webbsidan ser ut:
 
 
 
 
Överst på webbsidan ser vi en enkelt header som jag gjorde i Illustrator. Under finns en menyrad där användaren enkelt kan klicka sig runt på webbsidan. 
 
 
 
 
 
Startsidan för visning på datorskärm. Menyn är placerad högst upp och det finns också en sidmeny till höger med information om öppettider m.m. 
 
 
 
 
 
 
 
 
Till den mobila designen valde jag att göra navigeringen (menyn) till en dropdown. När användaren klickar på menyknappen så rullas menyn ner. Detta är vanligt förekommande i design för mindre skärmstorlekar som smartphones till exempel. Sidmenyn hamnar istället centrerat under det andra innehållet. 
 
 
 
 
Hoppas ni tyckte det var kul att se lite vad jag pysslar med om dagarna. Ställ frågor om det är något ni undrar över och kolla gärna in min klasskompis Nastasjas inlägg om hennes responsiva webbsida. 
1 Bokstund:

skriven

Vilken kul uppgift, och vilken fin sida du gjorde! 😊

Svar: Tack så mycket :D
JENNY PETTERSSON

Kommentera här: