Mikki Dall logo

Tlf. 31 43 07 41 - mail@mikkidall.dk

aktivside markør
Mikki Dall portræt

Teeshirt webshop

Grafisk design

Overblik over opgaven

Indenfor kernefaget Grafisk Design har jeg lavet et webdesign i Photoshop, som derefter kan programmeres til en fungerende webshop i eksempelvis PHP. Navnet er teeshirt.dk, som er en fiktiv webshop, som sælger t-shirt til den unge mandlige målgruppe.

Design, farver og layout

Webshoppen domineres af lyse/mørke grå farver samt den friske, kølige blå farve på udvalgte elementer. Derudover bruges en varm orange farve som kontrast til den blå, dog i sparsomme mængder for maksimal effekt. Webshoppen har desuden dæmpede grafiske mønstre, som simulerer strukturen i tøjet, i baggrundselementerne, ligesom der er syninger i kanterne for at bruge designelementer fra T-shirtene der sælges i webshoppen.

Øverst har siden en global navigation med menupunkter som kan hjælpe kunden med deres spørgsmål, nedenfor findes en søgeboks, som ved brug løbende foreslår resultater. På linjen med søgeboksen er der desuden en statustekst som kommer frem når man lægger varer i kurven. Her kan man se antallet af varer samt prisen, ligesom man kan få vist indkøbskurven eller gå til kassen. Dermed har kunden hele tiden en hurtig adgang til disse vigtige funktioner.

Tilpasning af produktvisningen efter brugeren

Siden domineres af en oversigt over t-shirts, som kan sorteres efter behov. Til venstre i sidebaren er sidens store styrke; et Smart Filter hvor kunden kan tilpasse søgningen til sit eget behov. Mulighederne for filtrere resultaterne er listet efter vigtigheden, og indeholder størrelse, pris (min. og max.), farve og mærke. Det er muligt at vælge f.eks. flere farver på samme tid.

Webshoppen er som sagt ikke færdig programmeret, men tanken er at der bruges AJAX eller lignende, så f.eks. valg af størrelser opdaterer resultaterne uden at genindlæse hele siden. Det vil desuden være en fordel at shoppen kan huske hvilke størrelse man har valgt i søgningen, så den ikke skal vælges igen når produktet købes.

Når et produkt vælges kommer brugeren til produktvisningen, hvor det enkelte produkt er i fokus med et stort billede, samt en kort tekst, pris og lagerbeholdning. Nederst kan størrelsen vælges, ligesom der er en stor Call-to-Action knap, der lægger varen i kurven. Sidebaren til venstre er nu udfyldt med praktisk information, såsom levering og vaskeanvisninger som giver kunden svar på mange spørgsmål vedrørende produktet. Der er desuden en tydelig markering af gratis fragt ved køb over 300,- for at skabe mersalg, ligesom der vises relaterede produkter nederst.

Let og overskuelig betalingsprocess

Betalingsprocessen startes ved at kunden lægger produktet i kurven, hvor der vil fremkomme en lightbox som bekræfter dette og leder kunden videre. I indkøbskurven kan produkter slettes eller ændres i antallet. Gennem hele betalingen er det muligt at gå tilbage, men via farvemarkeringen af udvalgte knapper guides brugeren videre i processen.

Sidebaren fra tidligere er fjernet, så der ikke er forstyrrende elementer, nu hvor kunden har besluttet sig for at gennemføre købet. Dermed minimeres ”efterladte indkøbskurve” hvor kunden ombestemmer sig i løbet af betalingen. I den forbindelse bruges også en tydelig markering af hvor langt kunden er og hvor mange skridt der er tilbage, ligesom kunden får en oversigt over bestillingen og de indtaste oplysninger inden betalingen foregår. Efter selve betalingen takkes for købet og kunden guides til næste skridt såsom Post Danmarks track n’ trace nummer samt en besked om at en kvittering er på vej pr. mail.

PSD ikon

Download .psd fil (15,6 mb)