KUNDE: www.kahlerdesign.dk Case: Redesign www Grafisk Design Opgaven: - Lav designoplæg på en ny forside - Lav designoplæg på en ny shop side - Lav designoplæg på ny poduktoversigt - Lav designoplæg på ny produktside - Lav dokumentation Logo + billeder: press/kahlerdesign.com Skærmstørrelse: 1024px x 768px, design til: 960px x 590px Programmer: Photoshop Illustator Farverum: RGB Løsning: Landingpage er det første som man møder, hvis url-adressen trykkes ind korrekt. Gastronomi og webshop er dermed opdelt. Nyt layout af forsiden, mere synligt at det er en webshop. Nyt layout af produktoversigt og køb.
Målgruppen: - Kvinder 35+ - Vilde med design - Kvalitetsbevidste - Har økonomisk råderum - Visuelt orienteret - Vant til at shoppe online - Segment: ????? KOnkurrenter Online: Der er en del butikker og online shops der sælger Kähler produkter. Men i og med at det her er Kählers egen webshop, så er der nok en del der kigger på denne hjemmeside først. Og de fleste søger nok videre på andre online shops for at finde et billigere sted. Her i blandt: Imerco.dk, royaldesign.dk, coolshop.dk, luxoliving.dk. De 4 S’er: Substans: Ved at købe hos Kählers webshop, så er kunden sikker på at det er ægte. Synlighed: Kähler promoveres i diverse butikker og reklamer. Mere på facebook. Sympati: Lægger vægt på godt dansk gammelt håndværk, som følger tiden. Synergi: Håndværket skal være i fokus og at det er dansk. Det enkle design skal gå igen på onlineshoppen, så produkterne kommer frem på bedst mulig måde. De 4 P’er: Produkt: sælger Kähler produkter online Pris: Priserne ligger i den høje ende. Men pris og kvaliteten hører her stærkt sammen. Kähler design er gammelt håndværk som er blevet lavet gennem mange år. Promotion: I øjeblikket er Kähler meget promoveret. Alle kender kähler design og mange danskere har efterhånden noget Kähler i deres hjem. Især ved Kählers 50 år jubilæm blev Kähler design for alvor kendt pga. jubilæums vasen. Flere reklamerer og cookies på f.eks. Facebook ville være en god ide ellers. Position: Kähler har både butik og webshop. Og Kähler kan købes i mange butikker. Men for at online shoppen kan køre, så skal Kähler købe sig til at ligge øverst når man på google søger Kähler, keramik, mm.. Hvad er Kähler: - Design/produkter: Kähler er smukke og tidsvarende designprodukter med rødder i en unik designfortælling om kunsthåndværk, som tager sin begyndelse allerede i 1839. - Madoplevelser: kähler design er en oplevelse, der skal smages og mærkes. Bedømt på om jeg kan: - Fastlægge grafiske elementer (logo, farver, billedstil, typografi, mm?) - Desgigne landingpage, forside, underside (shop), produktoversigt og produktvisning. - Lav dokumentation, og sælg din løsning. - Vis din evne til at tænke “den gode opbygning“ af www. - Vis din evne til at tænke og eksekvere webdesign. - Vis din evne til at få “solgt“ din løsning (herunder også dokumentation).
Kähler www (2014)
Flot menu, den fungerer. Men forside presse og B2B kan placeres anderledes. Flotte feminine fonte som er lækkere og lette. Håndskriften giver et hjemmelavet udtryk. Kasserne ville være pænere uden stroke/ ramme rundt om billederne = let og lækkert. Men kasser er vi vant til fra fb, pinterst og instagram - så det fungerer. Roddet med webshop og madoplever på samme side - skal deles op.
Brug ikoner i stedet for tekst det er mere let og enkelt. Brugervenlighed. Denne kolonne er forstyrende og unødvendig. Men god ide med at sætte rubrikkerne i sorte kasser som passer til logo. Fragt og kundeservice kan placeres anderledes. Konkurrencer skal være mere tydelige. Søge feltet skal være mere tilgængligt og typeligt. Hvis køber ikke finder hvad han/ hun søger hurtigt nok, klikker de væk fra siden igen.
Kähler www (2014)
Denne solide kasse som fungerer som en under menu , er for stor og ikke så lækker. Dette kan gøre mere enkelt og lækkert.
Sorter efter skal gøres mere overskueligt og tilgængligt. Sorteringen er vigtig i forhold til brugervenligheden og søge optimeringen. Hvis kunden ikke let og hurtigt finder hvad han/ hun søger, så lukker de ned. Godt med de inspirerende billeder som giver en lyst til at trykke videre ind for at se produkterne.
Dejligt at man let kan se hvor man er henne med du er her. Overskuelig produktoversigt, men den kan stadig gøres mere enkel og let.
Kähler www (2014)
Super at man kan se produktet i andre sammenhænge. Godt at online shopperen kan blive fristet af andre varer.
Let at se om varen er på lager. Let at bestemme hvad man vil med det valgte produkt. Og køb knappen er tydelig. Det er smart at man kan dele på facebook og pinterest o at man kan tippe en ven.
34
FLOWCHART Landingpage / INDEX
produkter
Designere
OM Kähler
NYHEDER
kollektion
kategori
læs om
læs om
læs om
valgt produkt
valgt produkt
tilmeld nyhedsbrev
farver og fonte R: 170 G: 170
#aaa
B: 170
R: 210 #d2d2d2
G: 210 B: 210
C: 35
C: 0
M: 28
M: 0
Y: 28
Y: 0
K: 0
K: 100
C: 17
C: 52
M: 13
M: 43
Y: 13
Y: 43
K: 0
K: 7
R: 0 G: 0
#000
B: 0
R: 130 G: 130
#828282
B: 130
Jeg har valgt at bruge 100% black til alle mouseover og active links. Jeg har valgt den mørke grå til at være diverse rubrikker og brødtekster. Jeg har valgt denne, da grå er mere behagelig at læse på skærmen. De andre farver som jeg har valgt er meget tone i tone. De er feminine og passer til Kählers glasur som er på deres keramik. Det er varme og støvede farver.
abcdefghijklmnopqrstuvxyzæøå
abcdefghijklmnopqrstuvxyzæøå
abcdefghijklmnopqrstuvxyzæøå
abcdefghijklmnopqrstuvxyzæøå
abcdefghijklmnopqrstuvxyzæøå
abcdefghijklmnopqrstuvxyzæøå
abcdefghijklmnopqrstuvxyzæøå
abcdefghijklmnopqrstuvxyzæøå
Savoye LET - regular, italic Jeg har valgt Savoye LET, da det er den næsten er den samme som den Kähler har på deres nuværende hjemmeside. Fonten er tynd og feminin. Den har bløde former og ligner en håndskift. Håndskriften giver et håndarbejdet udtryk. Denne dekorations font er lettere læslig end den de har nu. Denne font bruges til små noter som ikke er vigtige, men som er med til at gøre det mere personligt.
Apex New - regular, italic Jeg har valgt Apex New, da det er den samme som Kähler har på deres nuværende hjemmeside. Fonten er tynd og feminin. Den har bløde former som passer godt til Kählers design. Tallene i denne font er proportional Oldstyle. Fonten er grotesk og med den høje x-højde så er den let at læse på skærme. Fonten bruges til alle rubrikker, brødtekst mm.. Meget moderne og stilren font.
WEBSHOP
Mobile first: Enheder smelter sammen. Stort set alle brugere af internettet er online via deres mobil. Det er ofest her i støder på nye spændende ting. En webshop er tit en som man opdager på ens smartphone, men mange foretrækekr at shoppe online via en PC, da skærmen er størrer og der tit er flere valg muligheder. Det er her det er vigtigt at have en god www på smartphone, så interessen og lysten til at vide mere gemmes helt indtil kunden får tændt en PC. Når man skal have ens www til at fungere på mange stationer (smartphone, tablet, bærbar og stationær) så er det vigtigt at ens www design kan holdes bedst muligt så den rødetråd ikke mistes. Derfor er det tit bedst at starte med at designe www til smartphone. Dermed har man fra start af udvagt de vigtigste ting og lagt en stil for www. Det er altid lettere at tilføje lidt ekstra billeder, teskter og grafik til når der skal designes www til PC.
SKITSER: Det er vigtigt for mig at det er en let og enkel hjemmeside. Kählers design er også meget enkelt, så det skal passe sammen.
Nelly.com: Jeg kan godt lide menu systement på denne hjemmeside. Der er 3 menuer foroven. De er delt op så det er let og overskueligt. Og de indeholder de vigtigste ting som man hurtigt har brug for på en webshop. Jeg kan godt lide ideen med at man kan “hjerte“ nogle produkter, så man kan gemme dem til en anden gang, hvis man ikke lige nu og her vil købe produktet.
Brugervenlighed: Ikoner og overskrifter gør søgningen hurtigere. Weberslov: “Et element skal have en bestemt styrke i forhold til andre elementer for at man kan adskille dem fra hinanden”.
kähler.dk: Jeg kan godt lide Kählers nuværende menu. Den kan gøres mere enkel. Men at logoet er i midten er meget elegant. Jeg kan godt lide de sorte kasser ved fri fragt og hjælp. Skrifttyperne er flotte og Opdelingen i kasser er god, så den også let fungere på smartphone og tablet.
Andre regler: Nærhed: Det der står sammen, hører sammen. Lighed: Alr man kan trykke på bliver sort ved mouseover. Alle call-to-action-knapper er sorte. Ved at trykke på logoet kommer man til forsiden på webshoppen. Lukkethed: hver menu og hvert emne er i hver deres kasse. Forbundethed: alt indenfor hver kasse er forbundet med hinanden. Blikfang: På forsiden skal der være noget blikfang som skal virke som appetitvækker, så man enten klikker på pågældene eller at man får lyst til at kigge videre på siden/siderne. Menu: Menuen og bunden skal være ens på alle sider. Det er sjældent at man lander direkte ind på forsiden. Som ofte søger online shoppere på google eller andet, og kommer derfor man ikke nødvendigvis direkte ind på forsiden. Genkendelighed, lighed og nærhed på alle sider.
pinterest.com: Jeg kan godt lide strukturen på pinterest. Denne opsætning minder også meget om andre salgssider. Til min forside kunne jeg godt tænke mig at have samme struktur - bare på siden.
ØVERSTE MENU: Kundeservice øverst giver en tryghedsfornemmelse. Det er vigtigt når man shopper online. Sporg er let tilgængeligt. Presse og B2B kunne sagtens også være i bunden - der er ikke mange som bruger det. De flerste som besøger siden vil shoppe. MELLEM MENU: Denne menu bruges ofte. Her logger man ind/ ny bruger. Man kan se hvor mange produkter man har givet hjerte og se hvor mange produkter der er i indkøbskurven, samt pris. En vigitig ting er også søgefeltet. Hvis online shopperne ikke let og hurtigt finder det som de søger, så klikker de væk til en anden hjemmeside. Det er vigtigt at søge funktionen virker, ellers mister Kähler kunder. Man kan nemlig godt købe Kähler andre steder end her (f.eks. Imerco) Noget andet vigtigt er at man skilter med fragten. Hvis man eneten har frifragt og retur, eller som her har fri fragt ved købt for over 499kr. Dette gør at kunderne måske vil købe mere end planlagt. HOVED MENU: Denne menu er mere tydelig. Dette er den menu alle besøgende vil bruge, om de er bruger eller ej. Menuen er næsten den samme og det kan give en genkendelighed hvis man er fast Kähler shopper. SLIDESHOW: Den består af 4 billeder af nyheder, tilbud eller andet, som skifter med 4 sekunders mellemrum. Ved at tage musen over slideshowet viser der sig nogle pile som du kan bladre med. Prikkerne viser hvilket slide du er på. For at se mere om produktet klikker du på det pågælende slide. Dette slideshow virker som en appetitvækker. MENU i BILLEDER: Kasserne nendenfor er både nyheder, aktuelle ting og menuen bare i billeder. En hovedmenu er ikke så spændende i sig selv, men med billeder på forsiden kan måske lettere få online shopperne til at klikke ind og læse om f.eks. designerene. Tilmeldning af nyhedsbrevet er Kähler meget interessrede i at online shopperne bliver. For en gang om måneden vil de få en mail med nyheder og gode tilbud og dermed trække dem tilbage i shoppen for at handle mere. BUNDEN: Det giver en tryghed når både mail og tlf er synliggjort. Det giver en tryghed når man let kan finde og læse om forhandleren, se spørgsmål og svar, se betingelserne osv. Følg os her‘s ikoner er nogle som vi gerne vil have at online shopperne trykker på, så de også gennem der kan få nyheder og blive fristet til køb.
mouseover / dropdown MENU
INSPIRATION: Jeg er blevet inspireret af ASOS.com’s dropdown menu. Menuen kommer frem blot man fører musen over Women. Dropdown menuen er enkel. Delt op i kollonner. Og som det første står der New in og Outlet. Efterfølgende er alle kategorierne og i en anden kollonne kan man så vælge produkterne med andre filtere.
Ved at føre musen over produkter, så kommer denne dropdown menu frem. Menuen er inddelt i to: Kategori og kollektioner. Dette er med til at gøre søgningen lettere. Hvis man ikke ved hvad man vil have, så kan man trykke på alle produkter, og du kan få inspiration der igennem til den videre søgning.
Alle produkter, New in, 25% tilbud og Outlet er med andre farver, så de skiller sig ud, og bliver nogle links som der appelerer til at blive trykket på. Tilbud og Outlet har farverne rød og gul som signalerer billigt og prisnedsættelse. SKITSE:
Ved mouseover på kategorierne og kollektionerne bliver linksene med sort font. Produkter står også med sort font, da den nu er aktiv, fordi vi kigger på dropdown menuen. Under kategori er der endnu nogle kategorier: jul, påske og valentine. Dette er en hjælp til hvis man ikke lige har nogle ideer selv.
PRODUKToversigt
SKITSER: Produktoversigten skal passe til forsiden og til Kählers enkle design. Derfor beholder jeg opdelingen i kasserne og meget luft.
Nelly.com: Jeg kan godt lide ideen med at man kan “hjerte“ nogle produkter, så man kan gemme dem til en anden gang, hvis man ikke lige nu og her vil købe produktet. Opsætning af beskrivelse og pris er meget lækkert.
Brugervenlighed: Ikoner og overskrifter gør søgningen hurtigere. Weberslov: “Et element skal have en bestemt styrke i forhold til andre elementer for at man kan adskille dem fra hinanden”. Bubbleroom.dk: Jeg kan godt lide ideen med at når man holder musen over et produkt, så kommer der billeder frem af produktet fra flere vinkler. Det gør min søgning hurtigere, så jeg sparer klik og side uploads som tit er langsomme. Og når jeg så har været inde på et produkt, så er det ofte noget bøvl at finde tilbage igen.
Andre regler: Nærhed: Det der står sammen, hører sammen. Lighed: Alle kasser med produktbillede og tilhørende tekst er ens. Lukkethed: hvert produkt er i hver deres kasse med masser af luft omkring, så man kan se hvad der hører sammen. Forbundethed: alt indenfor hver kasse er forbundet med hinanden. Blikfang: Er alle produkterne. Og ved at have sorter kollonnen til venstre, gør at online shopperen også hurtigt ser denne. Menu: Menuen og bunden skal være ens på alle sider. Det er sjældent at man lander direkte ind på forsiden. Som ofte søger online shoppere på google eller andet, og kommer derfor man ikke nødvendigvis direkte ind på forsiden. Genkendelighed, lighed og nærhed på alle sider.
Nelly.com: Jeg synes det er flot med meget luft imellem produkterne. Gerne mere end der er her. Det er overskueligt når der ikke er mere end 4 produkter pr. række. Det er en god ting ikke at have flere varer pr. række. Det er bevist at man kigger mere på tingene til venstre end til højre. Og ved at have få ting pr. række, så vil online shoppere få mere med og føle at der er et godt overblik.
Imerco.dk: På denne webshop kan man let sortere de varer som man gerne vil kigge på. Især den måde hvor på man bestemmer hvilken pris klasse som man vil kigge efter kan jeg godt lide.
MENUer: De tre menuer er de samme som på forsiden = genkendelighed. For for ikke at fare vild på siderne så har jeg også indfør Du er her, som hjælper med at få orienteringen hvis mister den, eller hvis man er kommet direkte ind på denne side fra google. Sorter efter: Man kan sortere efter følgende ting inde under kategori: Farver, designere, pris og kollektion. Hvis vi havde været inde under kollektion, så havde man i stedet for sortering efter kollektion, kunne have gjort det efter kategori. Pilene ved hver sorterings mulighed, kan trykkes på så man ikke kan se sorterings valgmulighederne. Pilen vil dermed i stedet for vende mod højre og listen under stregen forsvinder og resten af tingene i kollonnen rykkes op til. Det er til hvis online shopperen synes at de forstyrer. Og ved at trykke på se flere, så bliver listen længere samme sted. VASER: Alle produkter har et stort produkt billede. Man vil helst ikke købe noget, hvis man ikke kan se det. Nedenunder er der navn på produktet og en lille beskrivelse på størrelsen og farve, samt prisen. Ved hvert produkt er også et hjerte, så man kan “hjerte“ de produkter som man vil kigge på igen senere, men som man måske ikke vil købe lige nu. Hele feltet med billede og tilhørende tekst er et stort link som fører videre til køb af produkt og flere informationer omkring produktet. Online shoppere er vant til dette fra diverse andre webshops. Jeg har valgt at der ikke er en indkøbskurv ved hvert produkt, fordi jeg gerne vil have online shopperen ind på min produktside, for at vælge antal med det samme og de kan let blive lokket til flere køb der igennem, fordi jeg har andre har også kigget på. Vis flere varer: Ved at trykke her kommer der rækker af flere produkter frem under de øverste. Og bunden flyttes blot længere ned, så bunden altid er nederst. Alle varer forbliver derved på den samme side. Og siden blivere længere og længere for hver gang du trykker vis flere varer. Dette kan fortsættes til der ikke er flere varer. Dette fungerer på sådan en webshop da der ikke er 1000 varer pr. kategori. BUNDEN: Det giver en genkedelighed og trykhed at den samme bund er på alle sider på webshoppen.
Når musen føres over (mouseover) en af produkterne kommer der billede kasse frem ved siden af det pågælende produkt. Dette er en kvikvisning af produktet fra enten andre virkler eller i andre sammenhænge. Dette er med til at sælge vare bedre og det gør at online shopperen hurtigere finder hvad han/ hun søger. Ellers skulle man trykke ind på hver enkelt produkt for at kunne se mere til produktet, men her sparer man klik og upload af ny side. Ved at føre musen over (mouseover) på en af billederne bliver billedet vist i stor, lige der hvor produktet ellers var vist alene.
Lige så snart at du scroller ned ad indenunder produkter kommer dette ikon frem på siden. Ved at trykke på den kommer man op til toppen igen. Dette er en smart funktion, når jeg kører med en side som fortsætter ned ad indtil der ikke ere flere varer på siden. Så kan online shopperen hurtigt komme til tops hvor menuerne er.
PRODUKTSIDE
SKITSER: Produktsiden skal passe til forsiden og produktoversigten. Derfor beholder jeg opdelingen i kasserne og meget luft. Brugervenlighed: Ikoner og overskrifter gør søgningen hurtigere. Weberslov: “Et element skal have en bestemt styrke i forhold til andre elementer for at man kan adskille dem fra hinanden”.
NELLY.com: Jeg kan godt lige opsætningen her. Prisen placering er jeg ikke helt enig i dog. Jeg kan godt lide det store billede og man kan se flere billeder af produktet. Jeg kan let vælge antal, om den skal i indkøbskurven eller om den skal tilføjes til farvoritter (hjerte). I mit tilfælde skal man også kunne vælge farve på produktet, da f.eks. vaser og kopper findes i mange farver. Shop hele looket og andre har også købt er meget lokkende og giver gode ideer til onlineshopperen, så de køber mere. Kundeanmeldelser og at man kan dele produktet på diverse sociale medier er godt. Det gør at vi kan få skjult reklame ud.
Andre regler: Nærhed: Det der står sammen, hører sammen. Lighed: Alle kasser med produktbillede og tilhørende tekst er ens. Lukkethed: hvert produkt er i hver deres kasse med masser af luft omkring, så man kan se hvad der hører sammen. Forbundethed: alt indenfor hver kasse er forbundet med hinanden. Blikfang: Det valgte produkt er det første man ser og derefter køb knappen. Det er vigtigt at køb knappen er tydelig. Menu: Menuen og bunden skal være ens på alle sider. Det er sjældent at man lander direkte ind på forsiden. Som ofte søger online shoppere på google eller andet, og kommer derfor man ikke nødvendigvis direkte ind på forsiden. Genkendelighed, lighed og nærhed på alle sider. Call-to-action: Det er køb knappen og send. Det er en knap som er i en sort kasse som logoet, for at skabe en lighed mellem links. Jeg har valgt den sorte farve for ikke at gå på kompromis med det stilrene design på hjemmesiden. Der er meget luft omkring knappen så det let kan ses.
MENUer: De tre menuer er de samme som på forsiden = genkendelighed. For for ikke at fare vild på siderne så har jeg også indfør Du er her, som hjælper med at få orienteringen hvis mister den, eller hvis man er kommet direkte ind på denne side fra google. KØB: Man kan se ens valgte produkt i et stort billede og så kan man se produktet i andre sammenhænge. Mn kan nemt og hurtigt se om varen er på lager, bestemme antal og farve. Du kan også se hvem der har designet vasen og hvor stor den er.
Køb knappen og tilføj til favoritter er tydelige og store knapper med tilhørende ikoner for igen at gøre brugervenligheden større. Tilføj til favoritter er ikke med en fyld farve, da vi hellere vil have at de trykker på køb. Man kan også dele med vennerne på de socialemedier og det giver Kähler gratis PR. KØB MERE: Når en kunde har valgt et produkt, er vi interesserede i at hjælpe kunden med at finde flere varer. Derfor kan man se de andre vaser i kollektionen og se hvilke varer andre besøgende også har kigget på. BEDØM VAREN: At kunne skrive og læse bedømmelser kan give en tryghed omkring købet. Man kan se anbefalinger. Og især hvis man som producent er sikker på ens produkters kvalitet, så kan dette aldrig gå helt galt med bedømmelserne. BUNDEN: Det giver en genkedelighed og trykhed at den samme bund er på alle sider på webshoppen.