Onderwerp: Multimedia Vormgeving, Web Design
Stage bedrijf: Visual-DS
Naam praktijkbegeleider: John Mulder
Naam BPV-docent: Huib Kemmink
Periode waarover het verslag geschreven is: Orientatie Periode, Januari - Juni 2008

Inleiding...

De reden dat ik voor dit bedrijf als stage bedrijf heb gekozen is omdat het bedrijf meer grafisch gericht is dan multimedia. Het bedrijf is meer een studio en het soort werk is daar heel breed.
Drukwerk zoals folders, (visite) kaarten, enveloppen, stickers, auto bestickering, flyers, fotografie noem maar op.
Multimedia presentaties zowel video gemaakt in director en/of flash, als power point presentaties verder nog websites, illustraties, 3D renders en animaties dat allemaal als de hoofd categorieën.
Het mooie daaraan is dat al die dingen mij erg interesseren en het voor mooi veel afwisseling zorgt.

Tijdens mijn stage heb ik dan ook veel van die dingen mogen doen.
Ik heb gewerkt aan multimedia presentaties, websites, (visite)kaartjes, flyers en meerdere drukwerk producten in het algemeen.

Bedrijfsorganisatie...

Het bedrijf is gestart in 1995 toen er van computers nog weinig tot niet gebruik werd gemaakt in het creatie/productie proces.
Dit bedrijf heeft de groei van de hardware en de software meegemaakt en heeft bijna elke versie van de programma's van bijvoorbeeld Adobe, Corel en Macromedia die er tot aan de dag van vandaag nog steeds gebruikt worden wel in huis.
Daarnaast heeft het de verschillende computersystemen en hardware ook wel achter de rug en wordt er vooral gewerkt met teken tablets in plaats van de muis.
Tegenwoordig wordt in het bedrijf bijna niet anders als op de computer gewerkt zowel op een Windows 2000/XP systeem als op een Mac Pro met Mac OSX Tiger.
Opzetjes worden als PDF-jes via email verstuurd, wanneer de klant er is wordt er een uitdraai gemaakt of het wordt op de computer getoond.
Na in de complete geschiedenis van het bedrijf drie keer verhuisd te zijn zit het nu op een redelijk druk punt aan het kanaal de Puntkolk in Vroomshoop, waardoor het met de voorgevel al goede reclame maakt.

Binnen speelt het bedrijf zich eigenlijk af in 1 kamer, daar is de werkplek en daar worden ook de gesprekken gehouden, daarnaast is er nog natuurlijk de keuken en het toilet.
Het is een eenmans bedrijf dus ander personeel dan de baas loopt er niet rondt, dit is per se zo gehouden zodat hij de bedrijfsrelatie's goed kan onderhouden.
Het bedrijf heeft vaste klanten zoals Eastborn, doet liefdadigheids dingen zoals de website voor het 4 mei comité van Vroomshoop en meer, daarnaast zijn er ook nog véél meer gewone klanten zoals: ColPro, Morsshinkoff en bijvoorbeeld de dorps muziekkant Gezinus Veldman en ook de gemeente is een klant.
Zoals al gezegd is het een heel breed bedrijf een studio waar van alles gemaakt wordt illustraties, 3d renders / animatie, huisstijlen, multimedia presentaties, websites en meer.

Ook dit bedrijf heeft het al een keer vernomen dat een ontwerp gewoon millimeter voor millimeter gekopieerd was.

Werkzaamheden...

Zoals ik hoopte lagen mijn werkzaamheden heel breed, ik heb veel verschillende dingen gedaan maar voor het meeste toch wel webdesign.
Van bijna alle soorten producten die er gemaakt worden heb ik er zelf wel één gemaakt of er aan meegeholpen.
Heel veel dingen waren dan ook klein en vaak was een schets of iets dergelijks niet eens nodig.
Opzetjes worden allemaal op de computer gemaakt.

Er wordt natuurlijk wel rekening gehouden met bepaalde eisen als bijvoorbeeld een klant als eis stelt dat het bedrijf de website zelf wil kunnen onderhouden dat er een derde partij bij moet komen die dan het technische gedeelte voor achter de schermen erin zet zodat het mogelijk is.
Deze kennis gaat namelijk te ver voor de studio.
Op een paar klanten na die alles het liefst er zo simpel mogelijk eruit hadden zien wordt er voor gezorgd dat elk product allemaal stuk voor stuk grafische hoogstandjes zijn.

Het allereerste waar ik mee mocht beginnen was het maken van een stempelkaart in InDesign deze was voor tuincentrum Twenterand.
Ook mocht ik al in de eerste week een klanten gesprek bijwonen, dit ging over een website voor Drywood een bedrijf dat verf verkoopt.
De website moest een CMS systeem bevatten daarvoor was er een derde partij bij.
CMS staat voor Content Management System en valt onder OS commercie, dit is een klantvriendelijk gedeelte van de website met login systeem waarmee de klant zelf de website kan onderhouden.

Daarna heb ik gewerkt aan een multimedia presentatie voor Morssinkhof die in een loopje afgespeeld werd tijdens een beurs, mijn taak was om een de presentatie te exporteren uit het inmiddels verouderde programma Director van Macromedia (inmiddels overgenomen door Adobe) naar een gangbaar efficiënt bestand.
Met het exporteren bleven er elke keer artifacts meekomen die ervoor zorgde dat op bepaalde tijden plekken in het beeld niet meer meespeelde dus er gaten ontstonden.
Daar ben ik een hele middag mee bezig geweest, toen zijn we naar een video montage bedrijf Klomp video producties gegaan in Den Ham de mensen daar konden het probleem ook niet oplossen na drie keer geprobeerd te hebben.
Later heb ik zelf het probleem alsnog opgelost door een ander programma te gebruiken voor het exporteren, hoewel er al verschillende programma's gebruikt waren waaronder Adobe Premiere en op verschillende systemen werkte het programma wat ik zelf thuis gebruik wel, namelijk Sony Vegas.
Door dit gedaan te hebben heb ik heel wat meer geleerd over codecs, dit staat voor coders/decoders stukjes software voor de computer die een bepaald type media kunnen afspelen of opnemen.
Er zijn namelijk heel veel varianten allemaal voor verschillende doel einden waarvan veel bekent en heel veel onbekend als internetter moet wel van Quicktime, RealTime, FlashVideo, MPEG(2), DivX noem maar op gehoord hebben dat is echter maar een handjevol van de zovele.
Hiervan zijn ook allemaal nog verschillende versies voor updates of verschillende voor fast motion of slow motion daarnaast is er ook nog onderscheid in codecs voor animaties of echte video.

Daarna kwam de eerste grote klus al de website voor het 4 mei comité.
Onderdoor kreeg ik de opdracht om van een collage opzetje voor DSC ferrari verhuur een visitekaartje te maken.

Toen de 4 mei site bijna klaar was heb ik de opdracht gekregen om te onderzoeken hoe duur starters pakketten waren.
Deze pakketen variëren wel maar bestaan meestal uit een website van gemiddeld 5 pagina's, briefpapier, enveloppen en visitekaartjes.
Dit was natuurlijk handig om te weten voor het bedrijf waar ik stage liep maar ook voor mezelf om eens te weten hoeveel dat nou kost en wat ook opvallend is dat per regio de prijs anders is, hoe meer naar het westen hoe duurder vaak.

Starterspakketen onderzoek:

Plaats	Briefpapier	Visite kaartjes	Enveloppen	Kleur	Ontwerp	Website	Prijs €
Noord-Holland, Heerhugowaard	100	100	100	Full-Color	Logo	3 knoppen/pagina's, 1 reactie formulier	850,-
Noord-Holland, Nieuw Vennep	1000	250	500	2 PMS Kleuren	Huisstijl	Geen extra info.	650,-
Hilversum	2500	250	500	Full-Color	Huisstijl	incl. domein, response pagina	999,-
Overijssel, Holten	250	250	250	Niet vermeld	Huisstijl	GEEN website, wel bij groter pakket	600,-
Gelderland, Ede	500	250	500	2 Kleuren	Huisstijl	GEEN website, wel bij groter pakket	1.300,-
Niet vermeld	500	500	500	Niet vermeld	Huisstijl	GEEN website, wel bij groter pakket	995,-
Groningen	2000	500	1500	Full-Color	Logo	GEEN website, wel bij groter pakket	395,-

Daarna kon ik aan mijn tweede grote opdracht beginnen de website van Wierda en Partners
Ondertussen heb ik nog het visitekaartje en het A4 papier van de Banden Concurent moeten namaken en onderzoek moeten doen naar een gratis mail dump server zodat ik aan de slag kon met een mailingformulier voor de website van het 4 mei comité en wierda en partners.

Nadat te hebben afgerond, bijna aan het eind van de stage periode moest er een opzetje komen voor de website van H. Oelen een schilders bedrijf met winkel.
Eigenlijk is het een redesign, de webdesigner was gaan lopen en de website is in een nogal treurige staat achtergelaten.
Ik heb gekeken naar de oude site, en naar het logo.
Toen ben ik begonnen in Photoshop met een ontwerp en daar is het volgende uitgekomen.
Mijn praktijkbegeleider is er ook mee bezig geweest en heeft een ontwerp gemaakt in InDesign.
Beide ontwerpen zijn opgestuurd naar de klant, er is op moment van typen helaas nog niet op terug gekomen dus een uiteindelijk keuze kan ik niet vermelden.

Ik heb nog wel meer gedaan dan dit maar die dingen waren vaak zo klein dat ik ze hier niet neer zet.

4 Mei Comité Website...

Dit was mijn eerste grote klus, er moest een re-design komen voor de website van het 4 mei comité van Vroomshoop.
De vorige website was vormgegeven en onderhouden door iemand uit het comité zelf met Microsoft Frontpage.
De site had overal een oranje achtergrond met dan de kleuren rood, wit en blauw, plaatjes fungeerde niet naar behoren de site was dus nodig toe aan een upgrade.

Met dat ik stage ben gaan lopen bij het bedrijf is mijn praktijkbegeleider bij het Vroomshoopse 4 mei comité gegaan, zodoende dat de opdracht bij het bedrijf uit kwam.
Nadat ik naar de oude site gekeken had en met de praktijkbegeleider over de site gepraat heb ben ik meteen met het design begonnen in Photoshop.
Mijn idee was de site te centreren, werken met schaduw randen witte achtergrond.
Hoofdkleuren waren besloten oranjes, rood, wit en blauw, een goed te lezen font en rollover knoppen.
Ik heb rekening gehouden met goede leesbaarheid omdat ouderen ook de site gaan bezoeken.
Het moet niet te moeilijk worden om te maken, er moet veel data in kunnen en het moet te bezichtigen zijn binnen de standaard resoluties passen van 1024x768 en 800x600 pixels.
Later zijn afbeeldingen toegevoegd om de site interessanter te maken en is meer contrast aangebracht (zie bijvoorbeeld de achtergrond) wat resulteerde in deze opzet.


De design punten die later tegen gekomen zijn zoals afbeeldingen in de pagina, links, de kaart en dergelijke heb ik gedaan.
Het opzetje is wel voordat het in gebruik genomen werd voorgelegd aan het comité tijdens een vergadering en is zonder commentaar doorgekomen, ook voordat er aan het design begonnen was is er een vergadering over de site geweest.

Tijdens het bouwen van de site heb ik in hoofd gehouden de site zo klein mogelijk te houden in bestandsgrote en makkelijk aanpasbaar te maken met CSS (Cascading Style Sheets).
In het CSS bestand staat de opmaak van tekst, plaatjes, tabellen en dergelijk allemaal in één bestand bijvoorbeeld "main.css".
Alle pagina's met de data (de html pagina's) verwijzen naar het css bestand.

In het "main.css" bestand staat bijvoorbeeld aangegeven dat elk "p" element (p wil zeggen paragraph, alinea op zijn Nederlands) bijvoorbeeld een font als Arial moet hebben en een font grote van 12 punten.
Wanneer dat dan in het centrale CSS bestand wordt aangepast verandert het op elke data pagina.

Wat niet vaak voorkomt is dat zelfs de rollover/menu knoppen met CSS aanpasbaar zijn.

Dit is een techniek genaamd de "slidingdoor" techniek.
Het is 1 plaatje zoals links te zien valt waarvan je standaard maar één deel ziet net zoals op deze site ik de techniek gebruikt heb zie je normaal alleen de bovenste helft.
Zodra je er overheen gaat met de cursor gaat het plaatje in de "rollover" of "high light" stand staan dit wordt technisch de "hover" stand genoemd waardoor het plaatje naar boven schuift waardoor in dit geval het plaatje een stuk lichter wordt, dit is een vrij geavanceerde techniek.
Mede doordat het één plaatje is is het niet nodig met allerlei scripts het highlight plaatje te preloaden in dit geval zit dat namelijk al in het plaatje wat al ingeladen is.
Normaal gesproken laad een browser alleen wat er op het eerste opzicht te zien valt, als de slidingdoor techniek niet gebruikt zou worden zou het plaatje dus pas geladen worden wanneer het nodig is als iemand met de cursor over een knop gaat.
Dit zorgt ervoor dat de knop kort flikkert bij een snelle internet verbinding of het gewoon langer duurt voordat de knop te zien valt.
Deze techniek is dus multifunctioneel en een stuk netter sinds het niet een hele meuk scripts nodig is.

Zie als voorbeeld deze webpagina zonder kompleet zonder CSS.

Met zwaar CSS gebruik kom je al snel fouten tegen, en vaak zijn er dat ook veel.
Deze moet je allemaal traceren en oplossen in elk browser ziet de site er vaak anders uit.
Daar heeft deze site veel last van Internet Explorer 6 heeft de traditie om bij elke site wel iets fout weer te geven blijkbaar zoals ook bij deze.
Om dat op te lossen heb ik eerst van zogenaamde browser hacks gebruik gemaakt deze zijn zo geschreven dat vaak maar 1 browser zoals Internet Explorer 6 (die het vaakst hacks nodig is) het herkent en verwerkt.
Deze methode is echter gevaarlijk als het browser geupdate wordt en de dingen toch weer anders weergeeft heb je een gebroken website waar je dan weer tijd in moet steken, daar heb ik van af gezien.
Ik heb een legale manier gebruikt waarmee je met commentaar aan kan geven welke Internet Explorer welk gedeelte moet uitvoeren.
Zo heb ik bij deze website gezorgt dat de elementen die niet goed weergegeven werden uit een ander CSS bestand gehaald werden waar de elementen andere waarden hadden zodat het eindresultaat toch het zelfde was.

Natuurlijk moest alle oude tekst en foto's op de nieuwe site komen maar ook bijvoorbeeld een boekje met een monumenten route en een kaart dit boekje werd namelijk niet meer gedrukt.
Het boekje bestaat uit 65 pagina's en alle tekst en foto's daaruit heb ik allemaal over getypt en gescand om ze in de digitale web vorm te krijgen.
Op de kaart stonden 20 punten die in het boekje beschreven stonden.

Ik heb de kaart in 6 delen gescand, in Photoshop rechtgetrokken en aan elkaar gezet, tot 1 afbeelding verwerkt en deze zo geoptimaliseerd dat hij goed af te lezen valt en dat de bestands grote zo klein mogelijk was deze grote afbeelding was uiteindelijk rondt de 1.5 MB.
Met CSS heb ik de punten 1 tot en met 20 op de kaart gezet, wanneer iemand er met de cursor overheen gaat komt er een kleine voorbeeldtekst in een transparant venstertje naast het punt hier kan dan op geklikt worden en dan wordt de bezoeker naar die pagina heen genomen.

Achter de schermen staan alle 20 venstertjes links buiten beeld verstopt en worden geherpositioneerd en zichtbaar wanneer iemand met de cursor over een punt beweegt.

Voor toch wel de meeste afbeeldingen is een script gebruikt die ze soepel vergroot in het zelfde venster wanneer er op geklikt word, dit script heb ik op internet opgezocht en dus niet zelf geschreven dat is een onderdeel waar ik zelf wel tijdens mijn stage periode aan begonnen ben.
Ik heb zelf opgezocht of dit script ook gebruikt mocht worden op deze site en gezien het script gebruikt wordt kon dit.

Toen de site bijna klaar was kwam er van het comité de vraag of er nog een mail formulier in kon en een poll, dit heb ik ook opgezocht aangepast en geïntrigeerd maar jammer genoeg niet kompleet zelf geschreven, ook met dit ben ik tijdens de stage periode wel begonnen.
Het mail formulier was voor sponsorwerving voor het comité, bij de poll wordt op het moment de vraag gesteld of er ook namen van alle gesneuvelden vermeldt moeten worden bij het V-Monument.
Het poll script heeft zijn eigen admin sectie op de site zodat hij makkelijk aan te passen valt.
Met deze site heb ik CSS en HTML4 geleerd, voorheen had ik al wel wat kennis maar lang niet volledig.

Voordat de site de lucht in gegaan is heb ik hem samen met Hans Nieboer de onderhouder van de vorige site en schrijver van alle tekst op de site en die van de monumentenroute nog een keer helemaal doorgelopen.
Voor deze site is niks betaalt neem ik aan sinds het eerder liefdadigheids werk was en omdat de baas zelf ook in het comité zit.
Achteraf heb ik de site inmiddels al een paar keer geupdate en is er 8 weken aan gewerkt waarvan 2 weken volop en het naar het einde van die periode steeds meer af nam.

Met de lancering van de website heeft het ook in de krant gestaan en is er een tentoonstelling geweest over 4 mei in de lokale bibliotheek.

Wierda & Partners Website...

De tweede grote klus voor mij, dit keer moest er kompleet nieuwe website komen voor Wierda en Partners een vermogensbedrijf.
De klant had een voorbeeld site meegestuurd namelijk www.noordamvb.nl

Ik ben begonnen met het ontwerp door eerste te kijken naar de voorbeeldsite de ze gaven.
Kijken naar hoe die site in elkaar zit en hoe het achter de schermen werkt.
Ook natuurlijk vanuit gaande dat de site in de standaard resoluties moet passen en dat de bestandsgrote zo klein mogelijk blijft.
Omdat het logo en het briefpapier al gemaakt was door Visual-DS heb ik eerst makkelijk naar het logo en het briefpapier kunnen kijken.

Daarna ben ik met een opzetje begonnen in Photoshop.
Ik heb de kleuren van het logo gebruikt, en ik wou het effect van het transparante menu wat met het scherm mee gaat er graag in houden dit idee is later toch gesneuveld.
Dit was mijn eerste opzetje voordat ik tips en de kritiek in verwerkt had.


Nadat mijn praktijk begeleider met mij naar het ontwerp gekeken heeft is er aan de hand van de tips deze en deze uitgekomen, deze tips hebben mij de ogen wel wat verder los gedaan op het gebied van grafisch vormgeven ik bleef eerst veels te gelimiteerd denken.
Ik heb hier dingen zoals transparanties van de hoofdkleuren en rondingen toegevoegd.


Daarna is ook mijn praktijkbegeleider er mee bezig gegaan in InDesign, daar kwam dit uit.
Beide ontwerpen plus verschillende van de praktijkbegeleider zijn opgestuurd als PDF-jes naar Wierda en toen is uiteindelijk dit ontwerp van mijn praktijk begeleider gekozen.


Toen heb ik vanuit die opzet de hele site gebouwd in XHTML en CSS2.1.
De website van het 4 mei comite is geschreven in het eigenlijk verouderde HTML4 en CSS1.
CSS2.1 is een uitbreiding op de normale CSS en XHTML is wel een stap verder als HTML4 alleen is het ook een fusie van HTML en XML, XML is eigenlijk alleen maar voor data opslag waarvan ik geen functies gebruikt heb (XML staat voor "Extensible Markup Language").

HTML (Hyper Text Markup Language) is eigenlijk de basis opmaak van een website waar je mee aangeeft wat een kop is wat een alinea is, waar een plaatje komt te staan hoe groot die moet worden of een tabel en hoeveel rijen en kolommen die bevat.
CSS is daar een laag overheen waarmee je alles nog verder opmaakt en zoals al eerder vermeld alles maar 1 keer aangegeven hoeft te worden.

Door de ervaring die ik opgedaan heb bij de 4 mei website had ik niet zoveel moeite om deze site om te zetten van ontwerp naar werkende website.
Met 2 dagen had ik de website omgezet en zag die er in FireFox en Internet Explorer 7 goed uit.
Echter toen de site getest werd in Internet Explorer 6 leek het totaal niet op het ontwerp.
Alle schaduw patronen stonden verkeerd, plaatjes zoals de afronding onder rechts stond veel te ver naar onder het contact gedeelte stond in het content gebied noem maar op.
Ik ben nog eens 2 dagen bezig geweest deze site Internet Explorer 6 compatible te krijgen door andere opties en waarden te gebruiken het is me uiteindelijk gelukt zonder extra CSS bestand voor Internet Explorer 6 alleen.
Alle browsers gebruiken nu exact dezelfde bestanden en in elk browser die we getest hebben ziet het er tot aan de pixel precies het zelfde uit als het ontwerp.
Deze site is uiteindelijk ~1.5 MB groot geworden.

Eigen ervaring...

Ik vindt zelf dat ik veel geleerd heb, gewoon door logo's, visitekaartjes en dergelijke waarvan klanten vaak de bestanden van verloren waren of als klanten kwamen met hun eigen schetsen of collages dingen (na) te maken in InDesign het programma leren kennen.
Ook had ik de vrijheid om tutorials te doen en de tijd om boeken door te lezen over grafische vormgeving wat ook wel handig was.
Op de stage plek waren twee dezelfde boeken als wat ik thuis had wat ik van plan was door te lezen en de opdrachten er in te maken voor de studie dat was mooi meegenomen.

En tijdens het maken van de websites heb ik mezelf CSS2.1 en XHTML aangeleerd en de mogelijkheden ervan inzien.
Daarnaast soms over de schouder mee kijken bij de praktijkbegeleider hoe hij de dingen oplost, zelf met dingen komt te zitten omdat hij het maar niet krijgt zoals hij het in gedachten had of de handige shortcuts van hem leren.
Of gewoon van de gesprekken in de pauzes wat wel eens over de geschiedenis van het vak en dergelijke ging.

Ook naar het op zoeken van programma's als een mail dump server of om tooltjes waarmee er geautomatiseerd bestandsnamen kan aangepast worden of complete plakken tekst in één in hoofdletters om te zetten heeft mij wat opgeleverd.

De communicatie tijdens de stage periode verliep naar mijn mening perfect, het ging één keer fout waardoor ik een flyer van 3 delen over 3 A4-tjes maakte terwijl het 4 verschillende A4-tjes had moeten zijn dat heb ik uiteindelijk dan maar gemaakt zoals het moest.

Conclusie...

Als doel had ik mij voorgenomen om vooral meer te leren van vormgeving door daar bijvoorbeeld ook thuis er aan te werken, nu was het mooi meegenomen er op mijn stage plek precies dezelfde boeken lagen waar ik me had voorgenomen uit te gaan werken.
Zo kon ik mooi continu verder met dezelfde stof zonder dat het ook maar iets afzwakte.

Ook wilde ik al een poosje serieus bezig met script/programmeer talen zoals XHTML, CSS2, Javascript en PHP in mijn vrije tijd.
Daar heb ik een mooi begin mee kunnen maken thuis en tijdens de stage, ik was het ook nog eens nodig bij bepaalde opdrachten.
CSS en HTML heb ik helemaal onder de knie gekregen wat de basis kennis is voor PHP en Javascript
Net zoals dat wilde ik ook InDesign induiken wat ik dus zelfs moest, ook daar een mooi begin mee gemaakt.

Ik vindt dat de opdrachten die ik heb mogen maken alleen maar mooi waren om te doen en dat ik van veel heel wat geleerd heb.
Met name de grotere opdrachten zoals de websites van het 4 mei comité van Vroomshoop en Wierda en Partners.

Bijlage...

Vaardigheden Oriënthatieperiode:

Briefing en instructie
Conceptontwikkeling
Conceptuitwerking
Vormgeven en visualiseren
Presenteren