# data[].attributes.body
Jag gjorde enbart en mycket grov skiss för hand över hur jag tänkte mig mitt upplägg. Detta gjorde jag efter att ha tittat runt på olika hemsidor och valt ut tre stycken som på ett eller annat sätt inspirerat mig. Jag gör sällan skisser innan utan arbetar mer fram projektet genom att testa mig fram i Photoshop och lägga till och ta bort saker och känna mig fram längs vägen. Jag valde det rosa och blå färgtemat. Det påminde mig om art deco-husen i Florida där jag semestrat. Jag tänkte mig ett Miami-baserat arkitektkontor och letade fram en av mina semesterbilder som jag använde som bakgrund. Initialt använde jag en bild från pexels med en spiralformad trappa som jag tyckte kändes passande men efter att ha gått igenom instruktionerna igen förstod jag att jag skulle använda mig av en egentagen bild.

De tre arkitektsidor jag inspirerades av hade alla stora bilder (en del rörliga) som man möttes av direkt då man kom in på sidan. Jag tycker om att mötas av en större bild och att det initialt känns avskalat och lättöverskådligt.

Gällande loggan gjorde jag också några grova skisser för hand innan jag började arbeta i Photoshop. Jag hade en tanke om att min påhittade arkitektfirma har två ägare vars efternamn är Madison och Valerio och att första bokstaven i deras efternamn skulle vara med i symbolen i loggan. I slutresultatet ser det kanske mer ut som bara ett ”m” vilket kan ses som en svaghet men man kan även utläsa ett ”v”.

Helvetica är en Neoform, en avskalad ren typografisk form som passar bra i rubriker (Bergström, 2015). Jag tyckte att det teckensnittet passade bra för en arkitektfirmas webbsida och jag använde mig av det genomgående på sidan och i loggan.

Bordern längst ner har en slags pil i mitten som jag tycker tydligt markerar att det finns mer att upptäcka genom att skrolla nedåt.

Gällande de två knapparna jag valde tänkte jag att man som företag kan gynnas av att potentiella kunder lätt och snabbt kan navigera sig fram till hur man kommer i kontakt med företaget. Genom den stora knappen "contact us" har jag försökt göra det tydligt. Jag hade Krugs mening ”don´t make me think!” i åtanke (Krug, 2014). Inget viktigt ska vara mer än två klick bort och vad kan vara viktigare för ett företag än att kunden lätt ska kunna komma i kontakt med dem?

Den andra knappen som är en knapp där man kan ställa in språk på hemsidan inspirerades jag till genom hemsidan www.fosterandpartners.com.

På många ställen har jag dragit ner opacityn på färgen för att göra den mindre "skrikig" och mer behaglig att vila ögonen på.

Gällande menyn inspirerades jag av hemsidan bambas.se. Den del av hemsidan som är aktiv markeras genom ett färgblock. Om musen hovrar över det aktiva tänker jag mig att texten blir vit. Hovrar den över en inaktiv "flik" blir den blå som man ser på ordet ”expertise”.

Källor:

Bergström, Bo (2015) Effektiv visuell kommunikation,9e uppl. Stockholm: Carlsson Bokförlag

Krug, Steve (2014), Don‘t make me think, revisited : a common sense approach to web usability. 3 uppl. Berkeley, Calif. : New Riders. (200 s).

(En del av mina texter återkommer på olika ställen. Det är för att jag var lite osäker på vilka delar som skulle redovisas var. Hoppas detta är ok).

# data[].attributes.body
Jag valde Sydsvenskans hemsida för uppgift A. Jag hittade inte vad de hade för typsnitt i ordet ”Sydsvenskan” så jag letade fram ett liknande typsnitt som heter Patua One. I övrigt hittade jag vad de använder för typsnitt genom att gå in och leta i koden. Libre Franklin är vad som används i olika storlekar i övrigt på hemsidan. Det var lärorikt att kopiera av hemsidan och reflektera över placering och storlek på typsnitt. Jag tycker att sidan över lag känns ganska avskalad och lättöverskådlig. De arbetar med svart och rött mot en vit bakgrund. Hade de använt fler färger hade det nog blivit ett rörigare intryck. Det är lätt att se huvudnyheterna och på högersidan finns ”senaste nytt” som jag också tycker känns lättöverskådligt och strukturerat. De röda strecken mellan de olika nyheterna bidrar till den strukturerade känslan. Samma sak med de grå strecken som fungerar som avgränsningar mellan de större nyheterna. Jag ritade upp loggan bredvid ”Sydsvenskan” samt Facebook-loggan, Twitter-loggan och logga in-knappen. Jag hittade rätt färger genom att använda mig av eye dropper tool. Jag ritade även ikonerna som finns på footern. Jag gjorde gråa boxar där bilderna placerats.

# data[].attributes.body
Detta är den grova skiss jag gjorde för utformandet av loggan. Läs mer under reflekterande text.

# data[].attributes.body
Detta är den grova skiss jag gjorde för utformandet av webbsidan. Läs mer under reflekterande text.

# data[].attributes.body
De tre arkitektsidor jag inspirerades av hade alla stora bilder (en del rörliga) som man möttes av direkt då man kommer in på sidan. Jag tycker om att mötas av en större bild och att det initialt känns avskalat och lättöverskådligt. Fosterandpartners.com hade en knapp där man kan ställa in språk på hemsidan som jag inspirerades av.

# data[].attributes.body
Gällande menyn inspirerades jag av hemsidan bambas.se. Den del av hemsidan som är aktiv markeras genom ett färgblock. Om musen hovrar över det aktiva tänker jag mig att texten blir vit. Hovrar den över en inaktiv "flik" blir den blå som man ser på ordet ”expertise”.