Design

Sketches
Vores første tanker ang hvordan websitet skal bygges op (sitemap) og hvad hvilken elementer den skal indeholde

Her kan i se den første tegning af websitet udseende. Det er faktisk den første wireframe vi lavede.



Preliminary sitemap
Første version of et sitemap for websitet. Her kan i se de fire sider man kan gå ind på fra forsiden og hvad nogle siderne indeholder. Her kan man også se at ideen er at man kan design sin egen stofpose og gemme designet i design ideas bagefter hvis man ønsker det.


Revised sitemap
Dette er en revideret sitemap for vores website. Her kan i se at vi har tilføjet en admin login funktion hvor man kan se bag stock og customer list. Vi har også fjernet forbindelsen meller checkout og design ideas, da man behøver ikke at design en pose til at se design ideas. Men selvfølgelige kan man stadig uploade/gemme sit design i vores database hvis man ønsker det, også bliver det vist i design ideas.


Wireframes
Wireframe vs. 2. Det her er den anden version af wireframes. Først så havde vi en sketch på wireframes og så lidt opdateret version.

Moodboard
Dette er et moodboard. Et moodboard viser "the look and feel" af websitet, hvordan vi ønsker at afbilder websitet. Som i kan se er den farverig med nogle naturlige elementer og en bæredygtighed feel. Det er i hvert faldt det vi prøver at vise.





Mockup 
Dette er første mock up draft. Som i kan se er den baseret på vores wireframes og moodboard. Dette mock up viser design modulet.



Design overvejelser
Vores nye mockup er en del anderledes end den vi lavede i første omgang, men den nye version er stadig inspireret af den oprindelige:

Det nye design


Den første var meget grå og minimalistisk. Næsten for minimalistiskt, da vi fik noget kritik for det til diskussion på plenum. Efter mange overvejelser har vi landet på ovenstående design. Vi synes den er sjov og farverig, men stadig ren og minimalistisk. Baggrunden er nok det mest framtrædende element på siden, med stærke farver og triangle mønster. Vi synes triangler (og andre geometriske former) har været meget på mode de sidste måneder, og vi ser dem blandt andet indenfor tøj, tilbehør, tryk, grafisk design og tekstiler.

Eksempler af triangler

Derfor har vi valgt denne baggrund, da den er meget moderne nu, og vi synes passer til vores målgruppe som er med på hvad er "in" i dag: Unge, moderne, dynamiske mennesker der er oppe på beatet. De er hyppige computer brugere og evt. miljøbevidste. Alder: 18 - 40 år.
Vi holder os stadigvæk til grå og hvid til resten af siden, da det er rigeligt med farver i forvejen på baggruden, og vores indhold skal være klart og tydeligt i forhold til kontrast.


Den skrifttype vi har valgt til vores side er en Arial, som er en klassisk sans-serif webfont. Den er neutral og letlæselig. Vores logotype, som er lavet is skrifttypen Alte Haas Grotesk Bold, har fået lov til at stå og dominere øverst på siden, uden en decideret header. Da baggrunden er multifarvet, kan det være svært at se en tydelig kontrast, og det har vi kompenseret for med at gøre logoet større. Det er en webdesign konvention at ens logo står øverst til venste. Det skaber lethed at bogstaverne flyder frit og man kan se baggrunden igennem. Det samme kan siges om de overflader der skaber vores side, de svæver og der er luft imellem elementerne. Da vi syntes de stærke farver virkede lidt for fremtrædende imellem elementerne, har vi valgt at lave en lille smule opacity under. Man kan næsten ikke se det, men det giver lidt ro i øjet.


Vores global navigation ligger horizontalt øverst på siden som også er en website konvention. Den er klart afgrænset indenfor en grå banner med rundede hjørner. Grunden til vi bruger runde hjørner er at det giver lidt blødere udtryk, som kontrast overfor den skarpe baggrund.


Vores footer er ret stor, det har vi set som et trend på nettet de sidste år. Det giver plads til at få skrevet sit tagline, kontakt info samt en kontakt form, som ellers ville kræve sin egen underside. 


Tagline
Vi har integreret to taglines på vores website. En hoved tageline og en sekunder tagline. Vores hoved tagline ligger i footeren/bunden af websitet og ser sådan her ud:

Vores tagline

Fokusen med denne tagline er globally og locally. Det betyder at hvis du støtter et lokalt firma og designer din egen genanvendelig stofpose, at du hjælper verden på en global måde. Det betyder at hvis en person gør noget lokalt at det har en effekt på det hele, på det globale. 
 
Vi har også integreret en sekunder tagline i vores forside billede. Dette billede kunne også være et slideshow hvor billedet skifter og viser forskellige pose designs samt glade mennesker.

Billede på forsiden, kunne evt være et slideshow

Vi ville lege med ordet "sustainable" for at understrege at hvis man bruger en bærepose i bomuld eller kanvas er man med til reducere brugen af plastic og dermed arbejde mod en mere bæredygtig verden. For at give harmoni ville vi bruge andre ord som starter med S. Ordet "smart" henviser til at det er klogt at bruge genanvendelige poser. Du sparer penge på det og tænker på miljøet samtidigt. Du kan være "stylish" med din nye BAGit pose. Genanvendelige poser med Super Brugsens logo på er måske ikke så lækre. Men hvis du får lov til at designe din egen pose kan du lave den i din egen stil som du godt kan lide.