Week 3 Opdracht 1 Visual design website sportmerk Meile Houtsma

Maat: px

Weergave met pagina beginnen:

Download "Week 3 Opdracht 1 Visual design website sportmerk Meile Houtsma"

Esther Vink
7 jaren geleden
Aantal bezoeken:

1 Week 3 Opdracht 1 Visual design website sportmerk Meile Houtsma

Voor deze opdracht heb ik het merk Puma gekozen. Op basis van de hoofdkleuren van de website van Puma ben ik aan de slag gegaan. In alle ontwerpen heb ik het lettertype Ebrima gebruikt.

Onder al deze onderdelen een grijze balk, met daarin de knoppen naar de verschillende categorieën van de website. Rechts in deze balk bevindt zich een zoekbalk, ook Figuur 1.

2 Voor deze opdracht heb ik het merk Puma gekozen. Op basis van de hoofdkleuren van de website van Puma ben ik aan de slag gegaan. In alle ontwerpen heb ik het lettertype Ebrima gebruikt. logo heb ik bovenaan in het midden van de pagina geplaatst. Links hiervan het Forever Faster-logo van Puma, rechts hiervan drie knoppen. De iconen komen uit de Awesome Icons-collectie. Onder al deze onderdelen een grijze balk, met daarin de knoppen naar de verschillende categorieën van de website. Rechts in deze balk bevindt zich een zoekbalk, ook Figuur 1. de hoofdkleuren van de Puma-website. Grote schermen - ontwerp Ik ben begonnnen met de versie voor grote schermen. Het No 1.- Figuur 2. Puma s No 1.-logo. logo van Puma heb ik in Photoshop bewerkt, zodat alleen de letters, veranderd in rood, overbleven. Dit met een icoon uit de Awesome Icons-collectie. Vervolgens ben ik aan de slag gegaan met de foto s op de homepagina. Voor de eerste foto heb ik een foto van een hardloopschoen van Puma s website gebruikt, en na wat experimenteren, heb ik gekozen voor een lucht als achtergrond. Hier kwam ik op het idee om Ebrima te gebruiken, en heb de tekst Reach for the sky een licht schaduweffect gegeven. Voor de Figuur 3. De homepagina voor grote schermen.

tweede foto ging ik uit van een andere foto uit Puma s webshop, van een model in een t-shirt. Als achtergrond hiervoor ben ik uiteindelijk op het idee van een trap gekomen.

3 tweede foto ging ik uit van een andere foto uit Puma s webshop, van een model in een t-shirt. Als achtergrond hiervoor ben ik uiteindelijk op het idee van een trap gekomen. De tekst heb ik weer op dezelfde manier gemaakt. Voor het derde blok heb ik de rode en grijze Puma-kleuren gebruikt, met drie cirkels erin. Het grijs als achtergrond, en het rood voor de strepen, omdat het anders erg kaal was. In de cirkels heb ik weer foto s van Pumaproducten geplaatst. Ik heb de productpagina van de hardloopschoenen van de eerste foto op de homepagina uitgewerkt. Eerst heb ik de schoen in een wit vierkant geplaatst, met een zwarte omlijning. Rechts hiervan de naam van het product, een bestelknop met een opvallende prijs. Daaronder een maat- en een kleurenkiezer. Onder de productafbeelding staat een beschrijving. Boven de productfoto heb ik een breadcrumb geplaatst, aangezien het overzicht van de verschillende categorieën op de website snel kwijt is, en zodat de gebruiker altijd weet waar hij op de website is. Grote schermen - functionaliteit Het logo linkt op elke pagina naar de homepagina. De knoppen onder het logo linken naar de desbetreffende categorieën op de website. Rechts daarvan is een zoekbalk om naar producten te kunnen zoeken. Verder linken de knoppen rechts van het logo naar Figuur 4. De productpagina voor grote schermen.

de desbetreffende functies/pagina s. De eerste twee blokken met de foto s linken naar de productpagina s van de weergegeven producten. De cirkels in het onderste blok linken weer naar die producten.

Als er op de productafbeelding geklikt wordt, wordt deze groot weergegeven. Als er op de bestelknop geklikt wordt, wordt het product aan de winkelwagen toegevoegd.

4 de desbetreffende functies/pagina s. De eerste twee blokken met de foto s linken naar de productpagina s van de weergegeven producten. De cirkels in het onderste blok linken weer naar die producten. Het bovenste gedeelte werkt vanzelfsprekend hetzelfde als op de homepagina. Ook de werking van de breadcrumb is niet anders dan normaal. Als er op de productafbeelding geklikt wordt, wordt deze groot weergegeven. Als er op de bestelknop geklikt wordt, wordt het product aan de winkelwagen toegevoegd. Als er op de maatkiezer geklikt wordt, schuift er een menu uit waarin de maat gekozen kan worden. De kleurenkiezer werkt op dezelfde manier. Figuur 5. De homepagina voor kleine schermen. Kleine schermen - ontwerp Voor de versie voor kleine schermen heb ik hetzelfde logo linksboven geplaatst. Hiernaast heb ik dezelfde knoppen als in de versie voor grote schermen geplaatst, maar dan groter en zonder tekst, zodat het makkelijker tikbaar is, maar nog steeds past. Onder dit bovenste stuk heb ik nu de zoekbalk en knoppen onder elkaar gezet, in plaats van naast elkaar. Zo zijn die ook goed zicht- en tikbaar, en passen die ook goed op het kleinere scherm. Onder deze knoppen bevinden zich kleinere versies van de drie balken. Ze zijn echter groot genoeg om goed zicht- en tikbaar te zijn. Figuur 6. De productpagina voor kleine schermen.

5 De bovenste helft van het scherm blijft hier hetzelfde als op de homepagina. Ik heb hier, net als op de versie voor grote schermen, gekozen om de productafbeelding linksboven te plaatsen. Verder heb ik de bestelknop, de maat-, en de kleurenkiezer vergroot geklikt wordt, wordt deze groot weergegeven. Als er op de bestelknop getikt wordt, wordt het product aan de winkelwagen toegevoegd. Als er op de maatkiezer geklikt wordt, schuift er een picker van onderaan het scherm omhoog waarin de maat gekozen kan worden. De kleurenkiezer werkt op dezelfde manier. vanwege het kleinere scherm. Bij de maat- en de kleurenkiezer heb ik de tekst, net zoals bij de knoppen bovenaan de pagina, weggelaten. Gedeeltelijk vanwege de vergroting van deze kiezers, maar ook om dit gedeelte van de pagina niet te druk en onoverzichtelijk te maken. Onderaan deze pagina bevindt zich de beschrijving, aangepast aan de breedte van het scherm. Kleine schermen - functionaliteit Het logo linkt weer op elke pagina naar de homepagina. De knoppen rechts daarvan hebben ook dezelfde links als op de versie voor grote schermen, respectievelijk de contactpagina, de inlogfunctie en de winkelwagen. Met de zoekbalk kan weer naar producten gezocht worden. Verder linken de andere knoppen in het grijze gedeelte ook in de mobiele versie naar de desbetreffende categorieën op de website. Ten slotte linken de eerste twee blokken en de cirkels in het onderste blok weer naar de weergegeven producten. De bovenste helft werkt vanzelfsprekend hetzelfde als op de homepagina. Als er op de productafbeelding

Vergelijkbare documenten

Visual design. Naam: Rob Dekker. Studentnummer: Vak: MMIO

Visual design. Naam: Rob Dekker. Studentnummer: Vak: MMIO Visual design Naam: Rob Dekker Studentnummer: 11020067 Vak: MMIO Datum: 02-03-2016 Wireframes desktop Maak visual designs van een homepage en product pagina van een sportmerk. Werk deze uit voor gebruik