Mijn werk

Over mij

Contact

Oog voor Web

Ik heb meegewerkt aan het ontwerp van Oogvoorweb.nl door een deel van de website (home & pakketten) en een illustratieset te ontwerpen.
Op die website staat ook een uitleganimatie. Hiervoor heb ik het storyboard geschetst, het character ontworpen, alle scenes geïllustreerd en de illustraties animatieklaar gemaakt, zodat ze meteen konden worden gebruikt door de animator.

Ik heb meegewerkt aan het ontwerp van Oogvoorweb.nl door een deel van de website (home & pakketten) en een illustratieset te ontwerpen. Op die website staat ook een uitleganimatie. Hiervoor heb ik het storyboard geschetst, het character ontworpen, alle scenes geïllustreerd en de illustraties animatieklaar gemaakt, zodat ze meteen konden worden gebruikt door de animator.

Oog voor Web is er om ondernemers een professionele website te geven zonder dat zij er zelf heel veel tijd in hoeven te stoppen. Een eigen plekje op het web terwijl hun eigen focus kan blijven bij hun onderneming, compleet met domeinnaam en hosting.

Website design

Naast al het illustratiewerk heb ik ook meegewerkt aan de website van Oog voor Web. Dit was een samenwerking met andere ontwerpers bij Digitale Bazen. Ik was verantwoordelijk voor de homepagina; deze moest eruit springen en meteen een goede eerste indruk achterlaten.

Illustratieset

Ter verduidelijking van de content op hun website wilde de opdrachtgever graag een aantal illustraties hebben. Om ze ‘ECHT Oog voor Web’ te maken heb ik het brilletje vanuit het logo terug laten komen in de illustraties.

Storyboard voor animatie

Er werd met het character een animatie gemaakt om het concept van Oog voor Web uit te leggen. Hiervoor heb ik, op basis van een script, een storyboard geschetst (en later gedigitaliseerd). Dit storyboard heeft de animator als uitgangspunt genomen voor de daadwerkelijke animatie. De plaatjes in het digitale storyboard zijn in heel veel lagen opgebouwd zodat de animator er meteen mee uit te voeten kon.  

SCENE 1

Ondernemer zoekt een manier om zijn bedrijf zichtbaar te maken op het internet.

SCENE 2

Hij denkt heel hard na hoe hij dat nou zou
moeten aanpakken...

SCENE 3

Hij heeft een idee! Een Oog voor Web gloeilamp verchijnt en licht de donkere ruimte op.

SCENE 4

De ondernemer valt en komt bij 

Oog voor Web terecht. 

SCENE 5

Hij landt op een grote 'Dit Wil Ik!' knop.

SCENE 6

Bij indrukken van de knop komt de URL van zijn bedrijf tevoorschijn.

SCENE 7

Er wordt ingezoomd en twee pijlen verschijnen.

SCENE 8

De ondernemer drukt een pijl in en verandert in
een bakker...

SCENE 9

... in een bouwvakker ...

SCENE 10

... en een hovenier! Want Oog voor Web is voor
alle ondernemers.

SCENE 11

Hij loopt en komt bij een kleurenkiezer. Hier kiest hij de kleuren van zijn website.

SCENE 12

Hij loopt verder en ziet verschillende fonts waar hij uit kan kiezen.

SCENE 13

Hij heeft er een gevonden die hij mooi vindt voor zijn website en drukt op de knop.

SCENE 14

Oog voor Web maakt zijn website klaar op basis
van zijn stijlkeuzes.

SCENE 15

Er komt een OVW-telefoon in beeld met de
website erop getoond...

SCENE 16

… Die telefoon transformeert in een tablet …

SCENE 17

… En uiteindelijk ook in een laptop. Want de websites van Oog voor Web zijn responsive.

SCENE 18

Er wordt ingezoomd op het scherm: de ondernemer bekijkt zijn website eens van dichtbij.

SCENE 19

Hij zet zijn eigen content erin door op het scherm te tikken.

SCENE 20

Vervolgens loopt hij verder en komt een grote rode knop tegen.

SCENE 21

Als hij erop drukt verandert de knop in een Oog voor Web knop.

SCENE 22

De knop heeft een raketlancering in gang gezet!
In de raket zit de website (=website launch).

SCENE 23

De raket vliegt door de lucht naar het Wereld Wijde Web.

SCENE 24

De ondernemer is weer terug op het internet en vindt dit keer zijn eigen website!

SCENE 25

Er wordt nog 1 keer uitgezoomd: er zijn nog veel meer OVW-websites op het web.

Character design

Oog voor Web moest worden vertegenwoordigd door een character voor o.a. in een animatie. Dit character heb ik ontworpen. Hierbij gold dat het geen standaard poppetje moest worden, hij moest ‘net even anders’ zijn zodat hij zou opvallen. Met dat gegeven in mijn achterhoofd ben ik gaan ontwerpen.

Storyboard voor animatie

Storyboard voor
animatie

Er werd met het character een animatie gemaakt om het concept van Oog voor Web uit te leggen. Hiervoor heb ik, op basis van een script, een storyboard geschetst (en later gedigitaliseerd). Dit storyboard heeft de animator als uitgangspunt genomen voor de daadwerkelijke animatie. De plaatjes in het digitale storyboard zijn in heel veel lagen opgebouwd zodat de animator er meteen mee uit te voeten kon.  

SCENE 1

Ondernemer zoekt een manier om zijn bedrijf zichtbaar te maken op het internet.

SCENE 2

Hij denkt heel hard na hoe hij dat nou zou
moeten aanpakken...

SCENE 3

Hij heeft een idee! Een Oog voor Web gloeilamp verchijnt en licht de donkere ruimte op.

SCENE 4

De ondernemer valt en komt bij 

Oog voor Web terecht. 

SCENE 5

Hij landt op een grote 'Dit Wil Ik!' knop.

SCENE 6

Bij indrukken van de knop komt de URL van zijn bedrijf tevoorschijn.

Bij indrukken van de knop komt de URL
van zijn bedrijf tevoorschijn.

Bij indrukken van de knop komt de URL
van zijn bedrijf tevoorschijn.

SCENE 7

Er wordt ingezoomd en twee pijlen verschijnen.

Er wordt ingezoomd en twee pijlen
verschijnen.

Er wordt ingezoomd en twee
pijlen verschijnen.

SCENE 8

De ondernemer drukt een pijl in en verandert in
een bakker...

De ondernemer drukt een pijl in en
verandert in een bakker...

De ondernemer drukt een pijl in en
verandert in een bakker...

SCENE 9

... in een bouwvakker ...

SCENE 10

... en een hovenier! Want Oog voor Web is voor
alle ondernemers.

... en een hovenier! Want Oog voor Web
is voor alle ondernemers.

... en een hovenier! Want Oog voor Web is
voor alle ondernemers.

SCENE 11

Hij loopt en komt bij een kleurenkiezer. Hier kiest hij de kleuren van zijn website.

Hij loopt en komt bij een kleurenkiezer.
Hier kiest hij de kleuren van zijn website.

Hij loopt en komt bij een kleurenkiezer. Hier
kiest hij de kleuren van zijn website.

SCENE 12

Hij loopt verder en ziet verschillende fonts waar hij uit kan kiezen.

Hij loopt verder en ziet verschillende
fonts waar hij uit kan kiezen.

Hij loopt verder en ziet verschillende fonts
waar hij uit kan kiezen.

SCENE 13

Hij heeft er een gevonden die hij mooi vindt voor zijn website en drukt op de knop.

Hij heeft er een gevonden die hij mooi vindt
voor zijn website en drukt op de knop.

Hij heeft er een gevonden die hij mooi vindt
voor zijn website en drukt op de knop.

SCENE 14

Oog voor Web maakt zijn website klaar op basis
van zijn stijlkeuzes.

Oog voor Web maakt zijn
website klaar o.b.v. zijn stijlkeuzes.

Oog voor Web maakt zijn website klaar
op basis van zijn stijlkeuzes.

SCENE 15

Er komt een OVW-telefoon in beeld met de
website erop getoond...

SCENE 16

… Die telefoon transformeert in een tablet …

… Die telefoon transformeert in
een tablet …

SCENE 17

… En uiteindelijk ook in een laptop. Want de websites van Oog voor Web zijn responsive.

… En uiteindelijk ook in een laptop.

SCENE 18

Er wordt ingezoomd op het scherm: de ondernemer bekijkt zijn website eens van dichtbij.

Er wordt ingezoomd op het scherm: de
ondernemer bekijkt zijn website van dichtbij.

SCENE 19

Hij zet zijn eigen content erin door op het scherm te tikken.

Hij zet zijn eigen content erin door op
het scherm te tikken.

Hij zet zijn eigen content erin door op
het scherm te tikken.

SCENE 20

Vervolgens loopt hij verder en komt een grote rode knop tegen.

Vervolgens loopt hij verder en komt
een grote rode knop tegen.

Vervolgens loopt hij verder en komt
een grote rode knop tegen.

SCENE 21

Als hij erop drukt verandert de knop in een Oog voor Web knop.

Als hij erop drukt verandert de knop
in een Oog voor Web knop.

Als hij erop drukt verandert de knop in
een Oog voor Web knop.

SCENE 22

De knop heeft een raketlancering in gang gezet!
In de raket zit de website (=website launch).

De knop heeft een raketlancering in
gang gezet! In de raket zit de website
(=website launch).

SCENE 23

De raket vliegt door de lucht naar het Wereld Wijde Web.

De raket vliegt door de lucht naar het
Wereld Wijde Web.

De raket vliegt door de lucht naar het
Wereld Wijde Web.

SCENE 24

De ondernemer is weer terug op het internet en vindt dit keer zijn eigen website!

De ondernemer is weer terug op het
internet en vindt dit keer zijn eigen website!

De ondernemer is weer terug op het
internet en vindt dit keer zijn eigen website!

SCENE 25

Er wordt nog 1 keer uitgezoomd: er zijn nog veel meer OVW-websites op het web.

Er wordt nog 1 keer uitgezoomd: er zijn
nog veel meer OVW-websites op het web.

Er wordt nog 1 keer uitgezoomd: er zijn
nog veel meer OVW-websites op het web.

Bekijk ook mijn andere projecten

BeleggerUitlegger

Branding | Grafisch Design | Webdesign | Illustratie

Klein Design

Grafisch design


Illustraties

Illustraties vanuit mijn persoonlijke archief

© 2023 Melissa Woelders | KVK: 83613420