# data[].attributes.body
Jag vill arbeta med att framställa en logga för ett veterinärföretag och sedan utifrån loggan jobba med att skapa en layout för en hemsida. När jag skapade min logga hämtatde jag inspiration från följande bilder:

# data[].attributes.body
Jag är väldigt intresserad av fotografering och bildmanipulering, min tanke är att jag ska kunna använda strukturen av min portfolio för denna uppgiften och sedan programmera en ordentlig webbplats. Den webbplatsen är tänkt att främst rikta in sig på mina bilder. Med andra ord ska det vara en portfolio med alla min foton.

# data[].attributes.body
Efter att ha skapat förjanjde 4 varianter av min logotyp valde jag till sist den övertsa till vänster.

# data[].attributes.body
När jag letade efter en passande färgkombination letade jag efetr en som både innehäl vrama och kalla färger. Till slut hitta jag en som innehäll färger som dessutom passade med färgerna jag redan valt för min logotyp.

Länken nedan går till en sida där 100 tals olika färgkombinationer finns, och specifikt till den jag valde.
https://color.adobe.com/sv/COLORES-MIGRACIONES-color-theme-10606592/

# data[].attributes.body
Den ljusblåa färgen har jag använt som bas på alla vyer, den ligger som bakgrund färg och ger hemsidan en varm känsla.  De blåa färgerna har jag använt på menyn och knapparna och även ikonerna. På detta viset kan man lätt skilj de olika elementen åt utan att något skär sig eller försvinner in i vartannat.

# data[].attributes.body
När jag designa men hemsida hämtade jag insperation från framförlat följande två länkar:

Evidensia
https://evidensia.se/klinik/evidensia-djurkliniken-kristianstad/
Anicura
https://www.anicura.se/vara-tjanster/hembesok/

Insperation för min footter är från Anicura, jag gillade stukeet de hade men valde att gasta om elemeneten lite och göra dte till mitt eget

Min header har jag designat efter att ha studerta Evidensias hemsida.  Jag gillade iden med att lägga logotypen på en stor bild, men även har har jag kastat om elementen en aning för att göra det mer personligt.

Jag har även studerat förande hemidor och försökt vardera positiva och negativa saker med dem och sedan designat min utifrån det.

https://www.svd.se/
http://www.lundsdjursjukhus.se/
https://www.hkr.se/

# data[].attributes.body
För att lättare kunna se hur elementen jag ville ha med i min layout skulle samspela med varandra skissade jag med penna och papper och testade mig fram. Jag kom fram till följande skisser och har sedan arbetat vidare med att bygga upp dem i  illustrator.

# data[].attributes.body
Start och logga in

# data[].attributes.body
Boka tid

# data[].attributes.body
Bekräftar bokning

# data[].attributes.body
Hem

# data[].attributes.body
Följande bilder är tidiga prototyper på alla mina vyer. Jag har lagt in placeholders för de olika elementen jag vill ha in på vyerna. Headern och footern är ex lika på alla vyer medans rutorna (placeholders) i mitten av vyn varierar.

För den slutgiltiga prototypen har jag gjort lite små justeringar på var till exempel hedern är placerad på vy 2, men generellt så ligger alla element i de placeholders jag skapat i denna prototypen.

# data[].attributes.body
Jag valde att kopiera följande länk: https://www.svd.se/
när jag kopierade en nyhetshemsida.

Jag tycker att hemsidan är relativt strukturerad och därför inte allt för svår att kopiera, dock är där fortfarande en del detaljer att ta hänsyn till.

Jag tog screenshots på headern och footern den 3/4 och har sedan jobbat i Illustrator med att göra så lika kopior som möjligt.

# data[].attributes.body
Jag gjorde 4 varianter på vy 3 men detta är basen för allihopa!

# data[].attributes.body
Nedan är en bild på de ikoner jag tagit fram för att använda på min hemsida. Jag valde att göra 3 ikoner för socialamedir och dessa är Faceboock, twitter och instagram, de ikonerna placerade jag i footerna på hemsidan. I footern finns även en Plats ikon och under den ar jag plaseart en länk som hänvisar till google maps. Där finsn också en telefon ikon som ska vara en symbol för kontakter. I övrigt gjorde jag ett förstoringsglas som är en ikon för "sök" och en gubbe som jag använt i samband   med "logga ut".  När jag tillämat ikonerna på hemsidan har jga valt att lägga en cirkel bakom följande ikoner för att de ska sticka ut extra mycket men också knnas samhöriga:
Facebook
twitter
instagram
Gubben/logga ut

# data[].attributes.body
Alla bilder som använts i mina vyer har jag tagit själv. De 3 som ligger långt ner på Vy 5 under "Hem" knappen har jag har arbetat en aning med i dem photoshop för att ge dem mer skärpa och fokus. Då de är relativt små ville jaga att motivet skulle vara tydligt. Jag har även dragit lite i färgerna i bilderna så att de skulle sticka ut från den bega bakgrunden samtidigt som jag ville behålla den varma känslan så att de inte kändes felplacerade. Bilden jag har i min header har jag arbetat mycket med. Jag har klippt och klistrat för att bilden skulle få den längd den har. Jag valde även att lägga hunden åt höger (det intressanta i bilden) och ha mycket "tomt" utrymme åt vänster så att jag där sedan kunde lägga på min logotyp. På så vis sticker loggan ut från bilden men tillsammans väger du upp varandra bra.

# data[].attributes.body
Då jag inte vill påstå att jag skapat några "knappar" till mina vyer utan istället valt att lägga en enkel ruta med text på och använt det som knapp, har jag inga knappar att presentera i här på min padlet. Ett par av de ikoner jag presenterat ovan är klickbara och fungerar på så vis som knappar. Bland annat är gubben som använd för att logga ut klickbar och även sociala medie ikonerna är klickbara.

# data[].attributes.body
När jag designade min logotyp för min portfolio ville jag använda mitt fullständiga namn. Jag gillar mitt namn, det är unikt och jag anser att det har en fin klang, därav det beslutet.

Det första steg jag gjorde i processen för att designa min logotyp var att välja ett typsnitt för mitt namn. Jag skrev mitt namn i olika typsnitt för att sedan jämföra alla dess mot varandra inna jag kom fram till det jag vill använda.

Som jag nämnt i tidigare inlägg ville jag använda min struktur och logotyp för att sedan kunna programmera en digital portfolio, därför valde jag att även ha med “fotograf” eller “photographer” som det står i min gamla logotyp.

Precis som med mitt namn skrev jag “fotograf” i en mängd olika typsnitt inna jag valde ut ett av dem.

Den första logotypen jag skapade såg ut som på bilden nedan, men efter att ha diskuterat den med Pia på en handledning, möblerade jag om den en aning och kom istället fram till ett annat slutresultat, se bild nedan.

# data[].attributes.body
Mitt första intryck av hemsidan var att den var rörig, det var mycket att ta in. Det fanns en struktur men den var inte särskilt genomtänkt. Spaltbredden varierade, sättet att presentera titlarna på varierade och så vidare. Jag gjorde en liten lista på saker som jag hade velat ändra på i hemsidan för att göra den mer användarvänlig:

Samma spaltbredd med tydliga marginaler

Samma presentation av titlar

Mer strukturerad header

Tydligare footer med ikoner

Mer användning av deras grafiska element.

# data[].attributes.body
Innan jag började skissa på min mobilanpassad version av svalövs hemsida så tittarade jag på andra kommuners webbplaatser:

https://www.landskrona.se/

http://www.eslov.se/

https://helsingborg.se/

https://www.kristianstad.se/sv/uppleva-och-gora/

https://www.lund.se/

Alla dessa webbplatser tycker jag har bra egenskaper som gör den användarvänliga.  Alla dessa kommuner hade även en mobilanpassas version av hemsidan så jag tittade mycket på dem och jämförde dem mot varandra. Hur hade de fördelat informationen? Var hamnade menyn? Hur såg footern ut? Har de tagit bort något?

Jag fastnade mycket för Landskronas mobil version och designa min egen version av svalövs hemsida efter den.

Nedan är en tidig skiss jag gjorde för att visualisera hur jag ville att min nya mobilanpassade hemsida skulle se ut:

# data[].attributes.body
Header:

# data[].attributes.body
Meny:

# data[].attributes.body
Footer

# data[].attributes.body
Dessa två bilderna använde jag som inspiration när jag skapade det grafiska element och även svalan som finns med i logotypen.

# data[].attributes.body
Nedan är slutressultatet för min mobilanpassning för svalövs hemsida.

# data[].attributes.body
Detta är en bild på hur det ser ut när man klickar på meny knappen:

# data[].attributes.body
Nedan är övriga grafiska delar jag skapat för denna uppfiften

# data[].attributes.body
kolla över en sista gång

ändra i "om mig och min portfolio"

lägg till insperationsbild om hedern

byt ut slutgiltiga loggan

lägg in nya bilder på startsidan

# data[].attributes.body
Här är även en skissa jag gjorde av för själva web hemsidan.

# data[].attributes.body
Jag måste erkänna att jag gillar Svalövs nuvarande logotyp, det är en snygg typografi och de har varit kreativa med Ö:et och även använt det som ett grafiskt element på hemsidan.

Men när jag designa den nya loggan var jag först inne på att den också skulle vara grön och/eller innehålla ett löv av något slag. Men efter en del om och men så beslöt jag mig för att slopa iden om ett löv och valde istället att ha en dykande svala med i logotypen.

Det blev så här:

# data[].attributes.body
Som sagt så inspirerades jag mycket av Landskronas mobilanpassade-/hemsida och gillade konceptet med ett svagt synligt grafiskt element i headern och footern. Eftersom jag hade gått ifrån iden om ett löv i logotypen tyckte jag det passade att istället göra ett grafiskt element bestående av grenar och löv.

Resultatet blev så här:

# data[].attributes.body
För den nya färgskalan ville jag använda jordnära klara färger. Det blev därför följande kombination som syns nedan:

De 6 färger som överlappar varandra används för att färgsätta hemsidan, och den ensamma blåa ingår endast i logotypen.

De två gröna färgerna används för att färgsätta headern och footern, den lite mer blåa används till menyn (hemsida) och bakgrund för rubriker (mobilanpassning). Den grå används för att skilja knappar och brödtext åt (mobilanpassning)

Svart och vitt används för att färgsätta ikoner och knappar.

# data[].attributes.body
Ikoner jag använt mig av för detta delprovet är följande nedan:

Ikonerna för sociala medier och “sök”, “hitta oss” och även  “kontakta oss” är ikoner som jag skapat för delprov 1 men även använt mig av för detta delprovet. Övriga ikoner skapade jag specifikt för detta delprovet då jag kände ett behov av dem. När en ikon befinner sig bredvid en rubrik är den ikonen dessutom designad för att beskriva rubriken bildligt.

# data[].attributes.body
Typografin jag valt för det nya grafiska utseendet är två olika sanserifer. Jag valde just sanserifer för att det är den typen av bokstäver som lämpar sig bäst för webben

Ett typsnitt för rubriker och ett för knappar och löpande text  med två olika skärningar.

Jag valde dessa typsnittet för att de fungerar bra tillsammans och för att man enkelt kan skilja dem åt.

# data[].attributes.body
Jag skapade även ett förslag på hur hemsidan skulle kunna se ut med det nya grafiska utseendet. Det blev såhär:

# data[].attributes.body
Gammal version av loggan

# data[].attributes.body
Ny version av loggan

I portfolion appliceras loggan med indenterade färger!

# data[].attributes.body
Arbetsprocess under framtagandet av loggan

# data[].attributes.body
Innan jag började skissa på upplägget för min portfolio tittade jag mycket på hur andra fotografer designat sina digitala portfolios. Dessa är några av de jag titta på:
https://elenashumilova.smugmug.com/

https://www.visualsofjulius.com/

https://elenashumilova.smugmug.com/

http://www.jessicakobeissi.com/one/

https://scott-kelby-ru99.squarespace.com/trav/igg2poferw09kbipwjlk10x8s7n9wt

De två hemsidor som jag mest gått efter när jag designade min var:
https://elenashumilova.smugmug.com/

https://elenashumilova.smugmug.com/

Upplägget på de andra föll mig inte riktigt lika bra i smaken som dessa två. Precis som dessa två fotografer valde jag också att ha en startsida som fungerar som ett omslag för hela portfolion, på den startsidan (min “hem” knapp) finns en en bakgrundsbild, min logotyp och 3 knappar.

Inspirationskällan för min gamla logga var en bild på en tatuering jag snubblade över. Jag blev förtjust i att den var lekfull och spretig samtidigt som den var helt geometrik.

# data[].attributes.body
Inspiration för hur jag ville att min header och meny skulle se ut

# data[].attributes.body
Nedan finns 3 handritade skisser på den webbaserade portfolion

# data[].attributes.body
Detta är en bild på ett tidigt stadie när jag jobbade i illustrator. Här har jag placerat ut placeholders som är grunden för strukturen som följer på nästan alla andra knappar.

# data[].attributes.body
Nedan är 2 handritade skisser på den mobilanpasade portfolion

# data[].attributes.body
Start/hem för webbsidan + Mina verk kanpp

# data[].attributes.body
Start/hem för mobilanpassning + Mina verk kanpp