Welkom

Dit is het portfolio van Steve Zonneveld. Hieronder is een greep uit het werk wat ik de afgelopen jaren op het HvA (Hogeschool van Amsterdam), Communicatie & Multimedia Design en in eigen tijd gerealiseerd heb.

Visual Design

Barst Repair

Barst Repair is een kleine onderneming. Zij zijn gespecialiseerd in het repareren van iPhones en iPads. Het is een alsmaar groeiend bedrijf. Dat is te merken aan hun reparatieaanbod maar ook aan hoe zij zich willen positioneren op de markt.

Voor Barst Repair heb ik de vormgeving en de realisatie van de website gedaan. Hieronder valt eveneens het ontwerp van de huisstijl. Naast de website zijn er printuitingen gemaakt zoals een flyer en visitekaartje. Om het bedrijf steeds meer naamsbekendheid te geven zijn er Facebook acties ontwikkelt en vormgegeven.

De ontwikkeling staat niet stil. De website is momenteel in bèta vanwege de realisatie van nieuwe onderdelen.

Project tags

  • #webdesign
  • #huisstijl
  • #print
  • #photoshop
  • #illustrator
  • #jquery
  • #html
  • #css
  • #visualdesign
  • #frontend
  • #uxd
  • #eigentijd
  • #hva
  • #w.i.p.
  • #schetsen

De Zevenhoeven

De Zevenhoeven is een openbare basisschool gevestigd in Heemskerk. De school zit sinds een aantal jaar in een nieuw gebouw. Hierbij hebben zij een nieuwe huisstijl gekregen.

Voor de Zevenhoeven heb ik de vormgeving de website gedaan. De school had al een website maar in het oude design. De structuur van de oude website is meegenomen naar het nieuwe. Het logo had ik aangeleverd gekregen en daar omheen heb ik een nieuwe uitstraling neergezet.

De techniek achter de site is door een andere partij gerealiseerd. Zij hebben het nieuwe design van een CMS-systeem voorzien. Met de oude website was het lastig om de content aan te passen en dat is nu een stuk eenvoudiger geworden.

Project tags

  • #webdesign
  • #photoshop
  • #illustrator
  • #visualdesign
  • #eigentijd
  • #redesign

Visual Interface Design

Voor het vak Visual Interface Design ben ik voor meerdere resoluties schermontwerpen (responsive design) wezen maken. Voordat ik hier aan begon kreeg ik kaartjes toegewezen. Op deze kaartjes stonden het onderwerp, het doel en de doelgroep.

Hiermee ben ik aan de slag gegaan. Ik begon met het functioneel ontwerp om vervolgens het uiteindelijke ontwerp te kunnen maken. Een extra eis was om een beeldmerk te creëren. Het was de bedoeling dat jezelf een foto of creatie ging maken. Het is uiteindelijk het grote beeldmerk (de foto) bovenaan de site geworden.

Project tags

  • #webdesign
  • #photoshop
  • #illustrator
  • #visualdesign
  • #uxd
  • #hva
  • #responsive
  • #fotografie
  • #wireframe
  • #functioneelontwerp
  • #schetsen

Front-end

StarBikes Rental

StarBikes Rental Amsterdam is een kleine onderneming. Je kunt bij het bedrijf fietsen huren maar ook lekker lunchen en leuke souvenirs vinden. Het bestaat al een geruime tijd. Het bevindt zich naast het Centraal Station van Amsterdam.

In de tijd dat het bedrijf bestaat zijn er meerdere website designs geweest. Ik heb één van de laatste vormgegeven. De uitstraling van dit ontwerp leidt af van de fietsenwinkel. In StarBikes Rental Amsterdam hangt een warme en gezellige sfeer.

Ik heb van de website eerst verschillende ontwerpen gemaakt en het vervolgens in HTML/CSS en jQuery uitgewerkt. De website die inmiddels wordt gebruikt is door een andere partij aangepast.

Project tags

  • #webdesign
  • #huisstijl
  • #photoshop
  • #jquery
  • #html
  • #css
  • #visualdesign
  • #frontend
  • #uxd
  • #eigentijd
  • #redesign
  • #schetsen

User Experience Design

Teachr

Teachr was het eindonderdeel van mijn minor UxD. Het doel van de opdracht was om VMBO leerlingen op een nieuwe en leuke manier in aanraking met kunst te laten komen. Dit zou gebeuren door middel van educatieve rondleidingen door het Stedelijk Museum Amsterdam.

Vanuit de opdracht werd de mogelijkheid geboden om de educatieve iPad app voor de leerling te maken of de webapp voor de docent of de webapp voor de educatieve dienst van het Stedelijk Museum. Ik heb voor de docenten webapp gekozen en zo is mede de benaming "Teachr" ontstaan.

De (fictieve) opdracht bestond uit een ontwerp maken en deze vervolgens werkend als een demo te maken. De webapp zou de VMBO CKV leraren gaan helpen bij het kiezen van een passende rondleiding voor zijn leerlingen. De content (zoals de rondleidingen) zou geleverd worden door het Stedelijk Museum. Ook was er een mogelijkheid om de docenten content te laten maken.

Ik heb een v1 en v2 ontwerp gemaakt. De v1 is vrij uitgebreid en dat heb ik in de v2 proberen te reduceren. Het idee achter de v2 was om de leraar vanuit één pagina te laten werken. Zij konden op deze pagina de rondleiding kiezen en het proces doorlopen om een afspraak te maken bij het museum.

Project tags

  • #webapp
  • #axure
  • #photoshop
  • #uxd
  • #interactiondesign
  • #hva
  • #minor
  • #flow
  • #prototype
  • #transities
  • #wireframe
  • #schetsen

Favoroute

Het vak Small Screen Design was eveneens een onderdeel van mijn minor. Als eindopdracht van het vak heb ik een app ontwerp (wireframes) voor Favoroute gemaakt. Het was de bedoeling dat deze wireframes uiteindelijk in een prototype werden uitgewerkt.

Bij het realiseren van het prototype werd er ook gekeken naar de transities. Deze geven een duidelijke indicatie van hoe de app zou gaan werken. Tijdens het ontwerpen van de schermen ben ik vanuit de schermgrootte gaan denken. Zo heb ik gekeken waar het beste de knopen geplaatst konden worden. Het app ontwerp is gebaseerd op de bestaande website.

Project tags

  • #app
  • #photoshop
  • #uxd
  • #hva
  • #minor
  • #flow
  • #prototype
  • #transities
  • #wireframe
  • #schetsen
  • #interactiondesign

Vakantiehuis Amsterdam Zuid

Een ander onderdeel van de minor UxD was het vak HCI Mastery. Met dit vak heb ik wireframes voor de (fictieve) opdracht Vakantiehuis Amsterdam Zuid gemaakt. Met het realiseren van de wireframes heb ik nagedacht over de hiërarchieën, animaties, foutmeldingen en flows. Deze zijn verwerkt in een sitemap.

De webapp dient als tool voor de eigenaar van Vakantiehuis Amsterdam Zuid. Hij kan inloggen om vervolgens de reserveringen te verwerken voor het vakantiehuis. Dit kan snel vanuit het "Dashboard" gebeuren. Daar zijn de beschikbare maanden te vinden, reserveringsverzoeken en reservering statussen te bekijken.

Project tags

  • #webapp
  • #axure
  • #photoshop
  • #uxd
  • #hva
  • #minor
  • #sitemap
  • #flow
  • #wireframe
  • #schetsen
  • #interactiondesign

Plaatsvinder

De realisatie van de schermontwerpen zijn voor het vak Social Search & Findability. Bij de Plaatsvinder app gaat het er om hoe een gebruiker door een fotocollectie navigeert. In mijn ontwerp kan de gebruiker op meerdere manieren door de collectie navigeren.

De gebruiker kan plaatsen gaan ontdekken door middel van "populaire plaatsen", "nieuwe plaatsen", de zoekfunctie op het hoofdscherm, de filters en/of het afbakenen van de content. Het is ook mogelijk om als gebruiker content toe te voegen. Door zelf een foto van een plaats te maken/ uploaden met bijbehorende tags.

Het zoeken kan op basis van tags die door de gebruiker zelf of andere gebruikers zijn aangemaakt. Vandaar het vak Social Search & Findability.

Project tags

  • #app
  • #photoshop
  • #visualdesign
  • #uxd
  • #hva
  • #schetsen
  • #interactiondesign