Grafisk design

25
Grafisk design 2014 / Maria Terpager Nielsen Portfolio

description

 

Transcript of Grafisk design

Page 1: Grafisk design

2014 / Maria Terpager Nielsen Grafisk design2014 / Maria Terpager Nielsen

Portfolio

Page 2: Grafisk design

2 / Grafisk design

Eva SoloEva Solo skaber boligtilbehør og køkkengrej i et eksklusivt dansk design, der kombinerer æstetik, funktionalitet og høj kvalitet.

Virksomhedens historie går helt tilbage til 1913, og Eva-mærket slog for alvor igennem i 1952 med en brød- og pålægsmaskine, der skulle gå hen og blive en designklassiker.Den første af mange.

SegmenteringEva Solos målgruppe er hverken opdelt eft er køn, stilling eller alder, men beskrævet såle-des: Mennesker, der defi nerer og profi lerer sig via deres hjem, med produkter indeholdende Eva Solos DNA.

Page 3: Grafisk design
Page 4: Grafisk design

4 / Grafisk design

OpgavenMagnetix fi k til opgave at redesigne Eva Solos website med det formål at skabe et digitalt showroom. En æstetisk brugeroplevelse, med produktet i fokus. Planen er, at der i fase 2, skal bygges en webshop på.

Teamet startede med at afholde en works-hop med Eva Solos marketing team, hvor vi gennemgik segmentering, guidelines for designet samt visoner for projektet. Vi talte i særdeleshed rundt om 4 trends fra 2013:

• Enkelt,- ”No-design”• Produkt i fokus• Lange sider – scroll• Boards - kollager

UdfordringerVi valgte fra start, at sitet skulle være respon-sivt, da vi på ingen måde ville gå på kompro-mis med brugeroplevelsen –uanset device eller platform.

Ydermere, skal alt indhold eft erfølgende kunne redigeres og udskift es af Eva Solo selv. Dette vil ske i CMS-systemet Episerver. Dette gjorde, at vi fra start skulle tage højde for, at designet ville kunne fungere optimalt, uanset fremtidigt valg indhold.

Page 5: Grafisk design

Vision

At være den digitale inkarnation af Eva Solo som et profilerende, nyskabende, enkelt

og ansvarsbevidst designbrand.

Brandets værdier skal udtrykkes i et overbevisende, visuelt univers på alle digitale

platforme.

Målet er at skabe en bemærkelsesværdig kunde-oplevelse, som også gør det nemt at købe Eva

Solo produkter. I sig selv er købet dog blot første skridt i en langvarig og frugtbar rela-

tion mellem Eva Solo og forbrugeren.

Page 6: Grafisk design

6 / Grafisk design

Det gamle evasolo.com

Page 7: Grafisk design
Page 8: Grafisk design

Inspiration Da Eva Solo er et skandinavisk brand, har det været vigtigt for os, at holde fast i den ”skandinaviske minimalisme og æstetik”,

Vi søgte inspiration med udgangspunkt i Eva Solos egen designfi losofi , nemlig ”JA´-men”. Dvs. blandt nytænkende og innova-tive websites, med fokus på funktionalitet, intuitivt brugerfl ade og simpel ,men inspireren-de æstetik.

8 / Grafisk design

Page 9: Grafisk design

�JA´men�Eva Solo har en ordlyd, som er et gennemgående

must, i alt hvad de designer, nemlig ordet ”JA´men”

“Nok skal glasset være smukt, men det skal også have en ekstra funktion, som fx at være lavet i hærdet glas. El.

Grydens design skal være fl ot, men samtidig kan du stille låget på kanten.

Denne tankegang, har vi i høj grad prøvet at tæn-ke ind i vores løsninger sådan, at oplevelsen på

websitet også får et ekstra ”JA´men”.

Page 10: Grafisk design

GridVi valgte at køre med et 960 grid system.Dette grid tager højde for brugere på mindre skærme, og er det optimale værktøj både for designer og frontendudvikler.

Vores grid kører over 12 kolloner, hvilket er nemt at arbejde med når man laver respon-sivt design.

10 / Grafisk design

Page 11: Grafisk design

BreakpointsDa vi står midt i et paradigmeskift ift. hvordan brugere benytter et website, var det fra start af vigtig at vi tog stilling til hvordan sitet skulle opføre sig, på diverse forskellige devices.

Vi tog udgangspunkt i brug af breakpoints, hvilket vil sige at man enhedsorienterer designet til at ”breake” når et givent device registreres.

Vores 4 breakpoints blev defineret således:

Page 12: Grafisk design

12 / Grafisk design

FarvevalgFor at understøtte den ønskede minimalisme, blev hvid og sort de to kontraster vi har valgt som de primære ”farver”.

Vores sekundære farver er ikke fast defineret, men skifter afhængig af produkt eller kam-pagne.

BillederVi har taget udgangspunkt i Eva Solos nuvæ-rende billedmateriale, da det i forvejen var enkelt, lækkert og uden overflødig staffage.

Page 13: Grafisk design
Page 14: Grafisk design

TypografiEva Solo bruger skrift en MaxLF og da den ud-gør en stor del af Eva Solos brand og identitet, var den selvfølgelig vigtig at beholde.

Da MaxLF ikke fi ndes som webfont, blev alter-nativet at bruge MaxCompPro Light webfont, som er et andet snit af samme font.

Knapper og ikonerMed udgangspunkt førnævnte designguides, designede jeg disse knapper, grafi kker links og ikoner.

14 / Grafisk design

Page 15: Grafisk design
Page 16: Grafisk design

16 / Grafisk design

ForsideForsiden er en vigtig indgang til Eva Solos univers. Her skal vi fange brugerens opmærk-somhed og inspirere til ”mere”.

Forsiden består af viewports, som skift evis består af miljøbilleder og information. Vi har brugt parallax scroll, for at tilføre det lille ”JA´-men”

Vi har et fl uid setup hvor båndende er: 100% width x 46% height, med en max bredde på 1920px.

Billederne er lavet i 1920px x 1760px for at kun-ne fungere i største viewport (dog max 1920px width) Vi sørger dog for at content holder sig indenfor vores 960 grid.

JA´men

Page 17: Grafisk design
Page 18: Grafisk design

MenuMenuen bor i logoet og folder sig ud ved mouseover og åbner ved klik. Menuen består af en række af ikoner, som forklares, når mu-sen føres over. Menuen er sticky, hvilket gør at den kan åbnes, uanset hvor på sitet du er.

På tablet og smartphone (breakpoint 2,3 0g 4), er der fra start tilføjet en titel til ikonet, da der på touch-devices ikke gøres brug af mouseover.

SøgningVi har lavet en søgemaskine, som via check-bokse og/el. farvehjul hurtigt peger dig ind på dét du søger. Hvis du vil søge på et specifi kt produkt, folder et søgefelt ud, når du klikker på lup-ikonet, hvor søgningen nu kan skrives.

18 / Grafisk design

Page 19: Grafisk design
Page 20: Grafisk design

BoardsProduktoversigter kan hurtigt blive uoversku-elige, da der uundgåeligt skal være meget information på lidt plads.

Vi har valgt at lave oversigten som et ”inspira-tions board”, hvor hvert produkt bliver vist i sin reneste form og info kommer frem ved mou-seover. Vi har gjort brug af lazy-load, så vi ikke går på kompromis med performance.

For at understøtte kollage-formen, er der mellem produkteren placeret miljøbilleder, forskellige infobokse og Socialfunktioner.”Follow us” fl ipper ved mouseover.

På kampagne-boardet med serien ”gravity”, har vi lavet en slider, hvor man ved at hive ”Drag” knappen frem og tilbage, kan se de to farver serien fi ndes i. –endnu et JA´men!

JA´men

20 / Grafisk design

JA´men

Page 21: Grafisk design

JA´menJA´menJA´menJA´men

Page 22: Grafisk design

ProduktvisningFor igen at give produkterne fuld fokus, kører alle billeder max bredde og de nødvendi-ge informationer, ligger på en transparant faktaboks. Når du holder cursoren på ”se fl ere”(thumbnails), forsvinder faktaboksen og kommer frem igen når du slipper. Dette giver et fuldskærmsvisning, uden brug af lightbox.

Længere nede på siden, vil resten af detal-jerne være vist på viewports. Her vil være forskellig udskift elig staff age og information, for at give brugeren en alsidig og individuel oplevelse på tværs af produkter.

JA´men

22 / Grafisk design

Page 23: Grafisk design

JA´men

Page 24: Grafisk design

FØLG OSLOREM IPSUM FIND FORHANDLER

Forhandler liste

Tilmeld

Find nærmeste

Lorem ipsum

Lorem ipsum

Lorem ipsum

TILMELD NYHEDSBREV

Handels- og leveringsbetingelser Cookies på Evasolo.com

Se Fødevarestyrelsens smiley-rapporter 

Navn

E-mail

1913 MAKING HOUSEWORK MORE

ENJOYABLE SINCE 1913

FØLG OSLOREM IPSUM FIND FORHANDLER

Forhandler liste

Tilmeld

Find nærmeste

Lorem ipsum

Lorem ipsum

Lorem ipsum

TILMELD NYHEDSBREV

Handels- og leveringsbetingelser Cookies på Evasolo.com

Se Fødevarestyrelsens smiley-rapporter 

Navn

E-mail

T H E B A S I C S .

I M P R O V E D .

At Eva Solo we make everyday life a little better. Every day.

SEE FOR YOURSELF

EVEN THE THORO U G H L Y T R I E D

C A N B E C O M E N E W

THE SIGN OF AN ICONIC DESIGN –

EVEN 25 YEARS AFTER IT WAS CREATED,

IT STILL STANDS OUT

THE SIGN OF AN ICONIC DESIGN –

EVEN 50 YEAR AFTER IT WAS CREATED,

IT STILL STANDS OUT

There is only so much space on the table top.

We work to earn that space

SPACE

MORE ABOUT OUR DESIGNERS

”It may just be a pot � but you still want to show it off”�

It actually doesn´t drip.

SHOW IT OFF

PLAY

SKAL SKIFTES UD MED ANNONCE

FOR EVA VÆGT

20131965

1977 2012

++

We believe in beauty and pleasure in even the smallest

things. Everywhere life is lived, we aim to create a more

pleasurable experience – in the kitchen, the bathroom, the

living room or the garden.

BEAUTY AND PLEASURE

Ole Palsby, Designer Eva Trio

”Simple, delicate - and tempting”

FØLG OSLOREM IPSUM FIND FORHANDLER

Forhandler liste

Tilmeld

Find nærmeste

Lorem ipsum

Lorem ipsum

Lorem ipsum

TILMELD NYHEDSBREV

Handels- og leveringsbetingelser Cookies på Evasolo.com Se Fødevarestyrelsens smiley-rapporter 

Navn

E-mail

1913 MAKING HOUSEWORK MORE ENJOYABLE SINCE 1913

FØLG OSLOREM IPSUM FIND FORHANDLER

Forhandler liste

Tilmeld

Find nærmeste

Lorem ipsum

Lorem ipsum

Lorem ipsum

TILMELD NYHEDSBREV

Handels- og leveringsbetingelser Cookies på Evasolo.com Se Fødevarestyrelsens smiley-rapporter 

Navn

E-mail

T H E B A S I C S .

I M P R O V E D . At Eva Solo we make everyday life a little better. Every day.

SEE FOR YOURSELF

EVEN THE THORO U G H L Y T R I E D

C A N B E C O M E N E W

THE SIGN OF AN ICONIC DESIGN – EVEN 25 YEARS AFTER IT WAS CREATED,

IT STILL STANDS OUT

THE SIGN OF AN ICONIC DESIGN – EVEN 50 YEAR AFTER IT WAS CREATED,

IT STILL STANDS OUT

There is only so much space on the table top. We work to earn that space

SPACE

MORE ABOUT OUR DESIGNERS

”It may just be a pot � but you still want to show it off”�

It actually doesn´t drip.

SHOW IT OFF

PLAY

SKAL SKIFTES UD MED ANNONCE FOR EVA VÆGT

20131965

1977 2012

++

We believe in beauty and pleasure in even the smallest things. Everywhere life is lived, we aim to create a more pleasurable experience – in the kitchen, the bathroom, the living room or the garden.

BEAUTY AND PLEASURE

Ole Palsby, Designer Eva Trio

”Simple, delicate - and tempting”

24 / Grafisk design

Om Eva Solo

Page 25: Grafisk design

404404

FØLG OSLOREM IPSUM FIND FORHANDLER

Forhandler liste

Tilmeld

Find nærmeste

Lorem ipsum

Lorem ipsum

Lorem ipsum

TILMELD NYHEDSBREV

Handels- og leveringsbetingelser Cookies på Evasolo.com Se Fødevarestyrelsens smiley-rapporter 

Navn

E-mail

1913 MAKING HOUSEWORK MORE ENJOYABLE SINCE 1913

FØLG OSLOREM IPSUM FIND FORHANDLER

Forhandler liste

Tilmeld

Find nærmeste

Lorem ipsum

Lorem ipsum

Lorem ipsum

TILMELD NYHEDSBREV

Handels- og leveringsbetingelser Cookies på Evasolo.com Se Fødevarestyrelsens smiley-rapporter 

Navn

E-mail

T H E B A S I C S .

I M P R O V E D . At Eva Solo we make everyday life a little better. Every day.

SEE FOR YOURSELF

EVEN THE THORO U G H L Y T R I E D

C A N B E C O M E N E W

THE SIGN OF AN ICONIC DESIGN – EVEN 25 YEARS AFTER IT WAS CREATED,

IT STILL STANDS OUT

THE SIGN OF AN ICONIC DESIGN – EVEN 50 YEAR AFTER IT WAS CREATED,

IT STILL STANDS OUT

There is only so much space on the table top. We work to earn that space

SPACE

MORE ABOUT OUR DESIGNERS

”It may just be a pot � but you still want to show it off”�

It actually doesn´t drip.

SHOW IT OFF

PLAY

SKAL SKIFTES UD MED ANNONCE FOR EVA VÆGT

20131965

1977 2012

++

We believe in beauty and pleasure in even the smallest things. Everywhere life is lived, we aim to create a more pleasurable experience – in the kitchen, the bathroom, the living room or the garden.

BEAUTY AND PLEASURE

Ole Palsby, Designer Eva Trio

”Simple, delicate - and tempting”

JA´men