# data[].attributes.body
Nedan är mitt färdiga resultat för uppgift 1A. En kopia på startsidan (header och footer) av DN.se.

# data[].attributes.body
Som inspiration för min egendesignade hemsida har jag valt bilden nedan. Jag vill skapa en minimalistisk och snygg design vars manér passar bra ihop med en tilltänkt arkitektbyrå. Jag vill använda mig av stora illustrationer i kombination med kvadratiska informationsrutor över olika projekt eller dylikt. Min tanke är att menyn placeras under logotypen och sträcker sig vågrätt över hela layouten. Ikoner och knappar kommer att placeras ut på layouten beroende på vad för sorts funktion dessa fyller.

# data[].attributes.body
För logotypen vill jag skapa någonting enligt nedan. En bokstavskombination/lek av något slag med ett A - som står för Arkitekt och någon annan bokstav - som ska symbolisera namnet på ägaren av byrån. Under logotypen vill jag skriva ut "Arkitekt (Namn)" med ett script-typsnitt.

# data[].attributes.body
Nedan ikoner har jag skissat fram. Jag har genomgående använt mig av Pen Tool (P), Rectangle Tool (M) och Ellipse Tool (L) då jag anser dessa är perfekta för skapandet av små, detaljrika ikoner. Jag känner mig nöjd med funktionerna men inte riktigt med utformningen. Tror att jag ska behålla funktionerna, då de är relevanta, men arbeta mer med utformningen. Punktstorleken måste även anpassas för att smälta in på ett fint sätt i helheten för layouten senare.

# data[].attributes.body
Nedan är en skiss på layouten av hemsidan i grova drag. Jag har valt att placera logotyp överst, följt av en meny, ett tilltänkt bildspel med tillhörande citatruta och nederst kvadratiska informationsrutor där man kan klicka sig vidare till "Bostäder", "Stadsutveckling" och "Utbildning". Jag ska arbeta mer med placeringen av logotyp få in ikoner och knappar på ett snyggt sätt. Jag ska även lägga in egna bilder för att man ska kunna visualisera hur sidan skulle kunna att se ut online. Jag ska även arbeta mer med färgskalan och typsnitten. Gällande typsnittet vill jag få in en stilrent och minimalistisk font för meny och informationsrutor som samtidigt är läsbara för sitt format.

# data[].attributes.body
PDF-presentation av logotyp, meny med interaktion, knappar och ikoner.

# data[].attributes.body
PDF över hemsidans layout med meny-interaktion.

Detta är det färdiga materialet av hemsidans layout. Telefon-, chatt- och mailikonen är placerad uppe i vänstra hörnet och sökikonen i det högra för att besökaren ska se dessa ikoner och dess funktionen redan vid första anblick. Logotypen är centralt placerad längst upp i layouten och under den ligger menyn och dess olika kategorier. På så sätt får besökaren en inblick i vilket företag det är och vilka olika funktioner som finns att tillgå. Under menyn är en slidshow med bilder med tillhörande citatrutor. Meningen är att dessa slides ska vara klickbara och att besökaren genom citaten ska intressera sig och klicka sig vidare för mer information. Bilderna på slidshowen tar upp mycket utrymme i layouten och tanken är att det ska vara grafiskt tilltalande bilder så att företaget direkt kopplas ihop med design och utveckling av fina, moderna bostäder. Under slidshowen ligger tre illustrationer med tillhörande bilder och knappar. Via dessa knappar kan man sedan klicka sig vidare till respektive knapp-rubrik man känner ligger i sitt intresse. Typsnittet "Champagne & Limousines" används för meny, knappar, rubrik och bildtext för att få ett fint helhetsintryck och för att passa den minimalistiska och stilrena designen. Typsnittet "Nixie One" är valt till citaten i slidshowen och alternativen under "TILL SALU"-sidan för att skapa kontraster. Dessa två typsnitt skiljer sig även väldigt mycket från typsnittet i logotypen vilket bidrar till att logotypen känns mer unik.

Reflektion:
Sammanfattningsvis är hemsidans layout designad utifrån en minimalistisk deisgn som är anpassad för en arkitektbyrå och dess maner och bransch med färgsättning enligt en av färgskalan för uppgiften. Jag hade kunnat arbeta mer med färgskalan för att på ett tydligare sätt få in denna och även kunnat arbeta än mer med typsnitten för att få ihop arbetet mer enhetligt. Men överlag är jag nöjd med mitt arbete och det var en riktigt rolig uppgift att jobba med och lära sig mer om hur man designar för bästa sätt för webben.

# data[].attributes.headline
1B - Slutresultat knappar med interaktion

# data[].attributes.subject
1B - Slutresultat knappar med interaktion

# data[].attributes.body
Detta blev slutresultatet på mina knappar med dess tre interaktionslägen. Knapparna är gjorda med Rectangle Tool och med tillhörande typsnitt "Champagne & Limousines". Ett enkelt och stilrent typsnitt i versaler som underlättar läsbarheten för användaren. Knapparna har tre interaktionslägen - inaktiv, mus över knapp och musklick på knapp och för att illustrera detta har jag valt att använda mig av de två färger från den angivna färgskalan för att besökaren ska kunna se förändringen och även genom en illustration i form av ett vågrätt streck under respektive ord på musklick på knapp-läget för att besökaren ska se att interaktionen är gjord. Knappen försvinner sedan och besökaren hamnar på tillhörande sida för respektive knapp, därav saknas interaktionsläget för "Aktiv".

# data[].attributes.body
Nedan är slutresultatet för mina fyra ikoner. Dessa är skapade med Pen Tool, Line Segment Tool och Ellipse Tool för att få fram de former jag eftersträvade. Samtliga är enkelt. stilrent och minimalistiskt utformade för att passa in i min design och företagets manér. Ikonerna symboliserar på ett bra och bildligt sätt vad funktionerna fyller för funktion.

Symbolerna som skapats är:
Telefon, chattbubbla, ett mail som skickats iväg och en sökikon och ska fylla sin funktion för att ringa, chatta, maila och söka.

# data[].attributes.body
Slutresultatet av logotypen blev en lekfull sammansättning av bokstäverna A och M där A står för "Arkitekt" och M står för "Magnusson". Detta kombinerat med företagets namn "Arkitekt Magnusson" utskivet i script-tysnittet "Signerica Thin" ger en logotypen en personlig touch som passar bra med företagets design och manér. Kanske skulle jag valt ett annat script-typsnitt som var mer läsbart men jag tycker ändå att detta fungerade i sitt sammanhand. Logotypen är gjord med Pen Tool.