Tijdens mijn project werd er een responsieve front-end gerealiseerd voor het Website Management System van Ultra Design Hero’s. Dit project werd uitgevoerd op het kantoor van Ultra Design Hero’s. Met mijn stage wilde ik mij verdiepen en specialiseren in het vakgebied van front-end design en wil ik bewijzen dat ik daarmee de competenties ontwerpen en realiseren bezit.

Om dit te kunnen bewijzen, heb ik tijdens mijn stage de opdracht ‘Het maken van een responsieve design voor het nieuwe CMS van Ultra Design Hero’s’ uitgevoerd. Het bedrijf had als doelstelling om met het project een responsieve CMS te ontwikkelen, waarmee de klanten van het bedrijf hun website op de tablet, smartphone, desktop en laptop aan kunnen passen. Wat er tijdens het project bereikt moest worden, was het opleveren van een intuïtieve en gebruiksvriendelijke responsieve front-end gemaakt in Bootstrap door middel van HTML en CCS voor het nieuwe CMS van ULTRA DESIGN HERO’S.

Om het project duidelijkheid te geven, is er begonnen met het maken van een opdrachtomschrijving. Deze opdrachtomschrijving is door ULTRA DESIGN HERO’S en de HOGE SCHOOL VAN HOLLAND goedgekeurd, waardoor er zekerheid ontstond over het project. Er kon vervolgens echt begonnen worden met het project.

Aangezien het project nog in kinderschoenen stond, werd er een plan van aanpak gemaakt. Het Plan van Aanpak gaf duidelijkheid over wat er precies gemaakt ging worden en hoe dit binnen de betreffende tijd gerealiseerd kon worden. Het Plan van Aanpak zou ook vervolgens houvast geven tijdens het project.

Na het opstellen van het Plan van Aanpak kon er worden begonnen met ontwerpen. Aangezien de navigatie één van de belangrijkste elementen in het CMS zou worden, is ervoor gekozen om hiermee te beginnen. Er werd in het kader van usability besloten om de menustructuur zoveel mogelijk te beperken tot twee ‘clicks’. Ook werd er goed nagedacht over hoe de navigatie eruit zou moeten gaan zien. Het belangrijkste besluit hierin was dat de navigatie te allen tijde weg geklikt moest kunnen worden, zodat de gebruiker optimaal gebruik kan maken van de content op zijn beeldscherm. Ook moest de navigatie zich aanpassen aan de grote van het apparaat waarop het CMS bekeken werd. Zo wordt de navigatie kleiner, zodra je over stapt op een tablet of smartphone.

Toen het ontwerp voor de navigatie eenmaal vast stond, werd er gekeken naar het algemene ontwerp van de website. Dit had vooral betrekking op de kleuren, het lettertype, de knoppen en het logo wat gebruikt ging worden. Hiervoor werd grotendeels een styleguide ontwikkeld, die later in het project gebruikt werd tijdens de realisatie.

Toen de belangrijkste elementen van het algemene ontwerp vast stonden, zijn er wireframes ontwikkeld voor het CMS. Deze wireframes lieten zien hoe een pagina van het CMS er mogelijk uit zou komen te zien. Aangezien het ontwerp op responsive design gebaseerd was (en dus niet in exacte maten) is er voor gekozen om de wireframes op een bootstrap raster uit te tekenen. Deze wireframes zijn met Balsamiq Mockups uitgetekend, omdat Balsamiq Mockups meerdere bootstrap rasters ondersteunde waarop getekend kon worden. Omdat het responsive systeem van Bootstrap standaard vier soorten rasters (waartussen geschakeld kan worden) ondersteund, is ervoor gekozen om dezelfde pagina op deze verschillende rasters uit te tekenen.

Deze rasters ondersteunen schermen voor desktops, laptops, tablets en smartphones. Nadat de wireframes waren getekend, werd er aan de Hoge School van Holland van deze wireframes concept beelden opgezet. De pagina’s die ontworpen moesten worden, konden in drie categorieën ingedeeld worden. 1. Verkenner, 2. Categorieën, 3. Bewerken / Toevoegen. De pagina’s die niet binnen de bovenste categorieën vielen, kregen een eigen ontwerp dat alsnog gebaseerd was op één van de drie bovenstaande categorieën. En om het ontwerpdocument compleet te maken, werden er nog twee laatste impressiebeelden samengesteld.

Voordat er gerealiseerd werd, werd er een MoSCoW lijst opgesteld. Aan de Hoge School van Holland van deze lijst werd er begonnen met de realisatie van de navigatie. Het realisatieproces verliep hierna erg snel en er stond al gauw een vaste basis. Echter begon toen ook de periode van ziekte. Tijdens het realisatie proces zijn er twintig dagen geweest waarop er niets kon gebeuren vanwege problemen met mijn maag. De stagebegeleider vanuit de HOGE SCHOOL VAN HOLLAND en vanuit het bedrijf zijn hier beide tijdig over ingelicht. Er volgde een gesprek met mijn stagebegeleider. In dit gesprek kwam naar voren dat ze tevreden waren over de tot dan toe geleverde kwaliteit van het product. Ook vonden ze dat ik communicatief sterk was, door frequent te mailen over de voortgang van de problemen met mijn maag. Wel gaven ze aan dat ik het probleem met de koffie over de macbook op moest lossen en de macbook laten repareren hiervoor, aangezien moederbord waarschijnlijk defect was.

Er werd uit voorzorgsmaatregelen een nieuwe planning gemaakt. Toen het grootste gedeelte van het CMS gerealiseerd was, is er een demonstratie geweest voor de werknemers van ULTRA DESIGN HERO’S. Na deze demonstratie is er een document opgesteld, zodat iedereen feedback kon geven op het gerealiseerde materiaal. Hierna volgde een periode van het verwerken van feedback.

Tijdens deze periode, was er opnieuw sprake van ziekte en hierdoor afwezigheid. Om deze achterstand te overbruggen is er besloten om tijdens de controlefase door te gaan met realiseren en de oplevering op te schuiven naar de laatste dag. Door deze overbrugging kon er snel geschakeld worden en is er tot de één a laatste week doorgewerkt aan de realisatie, terwijl er regelmatig gecontroleerd werd of alles nog goed ging.

De controlefase was deels een verlening van de realisatiefase. De grootste veranderingen vonden plaats in de tabellen. De tabellen werden zo aangepast, dat er meer inhoud geplaatst kon worden zonder ruimte te verliezen. Ook werd het ontwerp aangepakt, zodat die beter bij de rest van het CMS paste. De laatste grote verandering in het CMS was het nieuwe optiemenu.

Dit optiemenu was na het herontwerp in tegenstelling tot zijn voorganger altijd consistent aanwezig en veranderde mee met zijn omgeving. Ook is er in deze periode gewerkt aan de lay-outbuilder. Deze lay-outbuilder stelt de gebruiker in staat zelf de lay-out te kiezen van zijn of haar website. De opties komen alleen tevoorschijn wanneer de gebruiker ze nodig heeft, waardoor de lay-outbuilder een groot gebruiksvriendelijks gehalte heeft.

Ook zorgen de minimale opties in het zicht van de gebruiker voor een rustige gebruikerservaring. Ook werd er een oplossing bedacht waarmee de gebruiker categorieën kon selecteren, door deze in een apart venster in beeld te krijgen. Ook werd werken met PHP als methode toegevoegd, om veranderingen in het CMS sneller door te kunnen voeren.

De grootste tegenwerker naast de ziekte was Javascript. Om dit struikelblok aan te pakken heb ik om hulp van mijn collega’s gevraagd en ze vroegtijdig ingelicht over mijn behoefte aan ondersteuning hierin. Als laatste werd er in deze periode nog de nodige aandacht besteed aan User Interfase Design, Look and feel, Usability en Interaction Design. De laatste sprint werd vooral besteed aan de documentatie en aan het afronden van het op te leveren product. Met het uitvoeren van dit project heb ik mijn opdracht voltooid door de doelstelling “het maken van een intuïtieve en gebruiksvriendelijke responsive front-end voor het nieuwe CMS van ULTRA DESIGN HERO’S” te behalen.

Tijdens mijn project liep ik stage bij Ultra Design Hero’s in Holland. Als verantwoording voor de stage en de daarbij horende activiteiten lever ik dit eindverslag op. Met mijn stage wilde ik mij verdiepen en specialiseren in het vakgebied van front-end design en wil ik bewijzen dat ik daarmee de competenties ontwerpen en realiseren bezit.

Om dit te kunnen bewijzen, heb ik tijdens mijn stage de opdracht “het maken van een intuïtieve en gebruiksvriendelijke responsive front-end voor het nieuwe CMS van ULTRA DESIGN HERO’S” uitgevoerd. Mijn doel was om aan het einde van het project een intuïtieve en gebruiksvriendelijke responsive front-end voor het nieuwe CMS van ULTRA DESIGN HERO’S op te leveren. Dit front-end werd tijdens het project gerealiseerd door middel van HTML en CSS in het Bootstrap framework. Met het uitvoeren van dit project heb ik mijn stageopdracht voltooid door de doelstelling “het maken van een intuïtieve en gebruiksvriendelijke responsive front-end voor het nieuwe CMS van ULTRA DESIGN HERO’S” te behalen.

In de volgende hoofdstukken zal de opdracht die ik heb uitgevoerd nader toegelicht worden en vervolgens dieper worden ingegaan op hoe ik het project heb aangepakt.

Ultra Design Hero’s is een internetbureau gevestigd in Holland. Het team van ULTRA DESIGN HERO’S bestaat uit 34 mensen, waaronder 6 stagiairs. ULTRA DESIGN HERO’S noemt zichzelf een service bureau, omdat ULTRA DESIGN HERO’S altijd maatwerk biedt aan zijn klanten.

Klanten kunnen bij ULTRA DESIGN HERO’S terecht voor het ontwerpen, ontwikkelen en het beheren van websites. ULTRA DESIGN HERO’S maakt daarbij gebruik van eigen internetapplicaties. Het CMS dat ULTRA DESIGN HERO’S heeft ontwikkeld, is hiervan een goed voorbeeld. Het CMS stelt klanten in staat zelf hun website te onderhouden. Deze applicatie laat hun klanten tekst, foto’s en video’s toevoegen en bewerken op hun eigen websites. Het CMS is gebaseerd op het woord CMS (Content Management Systeem), maar het CMS van ULTRA DESIGN HERO’S bevat veel meer opties dan alleen content aanpassen. Vandaar de term CMS.

Aangezien de huidige markt zich steeds meer op tablets en smartphones richt, moet ULTRA DESIGN HERO’S mee gaan met de tijd en hun CMS schaalbaar maken voor meerdere apparaten. Daarnaast is het huidige CMS waarmee gewerkt wordt 10 jaar oud en is er de wens om de ‘motor’ van het CMS op de achtergrond compleet te vernieuwen om het CMS soepeler te laten lopen.

Zo kan het CMS zich meten aan hedendaagse content management systemen, door snel te reageren en te functioneren. Nu er aan de achterkant gewerkt wordt, is er meteen het plan ontstaan om ook aan de voorkant te gaan werken. Door in Bootstrap met behulp van HTML en CSS een responsieve front-end te maken, zal het beeld mee schalen met het apparaat waarop de gebruiker het CMS gebruikt. Hiermee kan het bedrijf ook aan zijn klanten laten zien dat het zich kan meten aan de nieuwe (schaalbare) standaarden van het huidige web.

De opdrachtgever wil met het project een responsieve CMS ontwikkelen, waarmee de klanten van het bedrijf hun website op de tablet, smartphone, desktop en laptop aan kunnen passen. Hiermee kan het bedrijf laten zien dat het niet stil staat en mee gaat met de tijd. Ook hebben klanten meer vrijheid om hun website te onderhouden, door zelf te kiezen op welk apparaat de klant dit wil doen. Wat er tijdens het project bereikt moet worden, is het opleveren van een intuïtieve en gebruiksvriendelijke responsive front-end voor het nieuwe CMS van ULTRA DESIGN HERO’S.

Het project is voor de opdrachtgever een succes, als er aan het einde van het project een responsive front-end voor het nieuwe CMS van Ultra Design Hero’s BV staat en voldoet aan onderstaande criteria. Uiteraard is het de bedoeling om dit project met een goed eindresultaat af te ronden. Daarom is het ook belangrijk om diverse methoden en technieken te kiezen om mee te werken en me hier gedurende het project aan te houden.

Als hoofd projectmanagementmethode is er voor SCRUM gekozen. De hoofdreden hiervoor is dat SCRUM een flexibele en transparante methode is om mee te werken, zodat er flexibel gewerkt kan worden tijdens het project en het overzicht behouden blijft. Aangezien er één persoon aan dit project werkt zal de SCRUM methode iets aangepast worden, zodat het dan ook geschikt is voor één persoon. Meer hierover kunt u terug lezen in het Plan van Aanpak.

Er wordt tijdens het project een scrumboard bijgehouden. Op dit scrumboard staan de taken voor de betreffende iteratie. Het scrumboard wordt bijgehouden op Trello. Trello is een online softwaretool waarmee je scrumboards kan bijhouden en opzetten. Per iteratie komt er een nieuw scrumboard. Deze online scrumboards werken net zoals echte scrumboards en bevatten de volgende lijsten. To do: Hier staan taken in die nog uitgevoerd moeten worden. Doing: De taken waar momenteel aan gewerkt wordt. Verify: Taken die nagekeken moeten worden door mijzelf of door een begeleider. Done: Taken die afgerond en gecontroleerd zijn.

Tijdens het project wordt er gebruik gemaakt van verschillende technieken. Deze technieken kunnen weer onderverdeeld worden in verschillende onderwerpen. De verslagen die tijdens het project opgeleverd worden, worden in Microsoft Word uitgewerkt vanwege mijn ervaring met deze software. Ook is er de mogelijkheid om vanuit Word pagina’s naar PDF te converteren, zodat mijn verslagen voor de docent op elk apparaat leesbaar zijn. De presentatie wordt in Microsoft PowerPoint gemaakt. PowerPoint is ook bruikbaar op andere systemen, zoals een Apple Macbook. Mocht er hardware matig iets mis gaan tijdens de presentatie, dan is er de mogelijkheid om de presentatie op een ander apparaat af te spelen.

Voor de projectmanagement methode wordt er SCRUM gebruikt, omdat hier steeds meer ontwikkelingen in zijn. Softwarebedrijven gaan over op SCRUM of AGILE en zien het nut in van teams met verschillende gedisciplineerde leden. Ook is dit de methode waarmee op de HOGE SCHOOL VAN HOLLAND is gewerkt, dus is het een bekende methode.

Voor het ontwerpen zal er gebruik gemaakt worden van ‘ouderwetse’ potloden en papier, om te kunnen schetsen. Daarnaast zullen de ontwerpen gedetailleerder uitgewerkt worden in Adobe Photoshop. Voor afbeeldingen kan er Adobe Illustrator gebruikt worden. Met Adobe Kuler is er de mogelijkheid om de kleuren te bekijken, uit te zoeken, testen en samenstellen in een kleurenpalet. Met de Google Chrome Extentie Eye Dropper is er de mogelijkheid om kleuren van het web verzamelen en op te slaan.

Aan het door mij gemaakte ontwerp gaat er een front-end gerealiseerd worden. Dit front-end wordt gemaakt in Bootstrap door middel van HTML en CSS. Het bewerken van HTML en CSS zal gebeuren in Notepad++ aangezien het bedrijf hier zelf ook mee werkt. Hierdoor blijft de mogelijkheid van assistentie van mijn begeleider aanwezig. De testopstelling van bootstrap wordt vooral lokaal gedraaid, maar voor de momenten waarop er gehost moet worden (om de opstelling bijvoorbeeld te testen op een smartphone of tablet) zal er gebruik gemaakt worden van XAMPP. Meer informatie over de technieken kunt u terug lezen in het Plan van Aanpak.

Bootstrap is een framework dat opgebouwd is uit HTML, CSS en Javascript. Bootstrap stelt ontwerpers en programmeurs in staat om snel een website op te bouwen of uit te breiden door bestaande classes te gebruiken en bovenop het bestaande framework te bouwen. Ook heeft bootstrap ondersteuning voor responsieve design, door gebruik te maken van kolommen en rijen waarin elementen geplaatst worden. Bootstrap is echter volledig bewerkbaar en dit houdt in dat het hele framework compleet aangepast kan worden naar de wensen van de gebruiker.

De reden dat ULTRA DESIGN HERO’S koos voor Bootstrap is om na mijn stage gemakkelijk elementen toe te kunnen voegen en niet compleet afhankelijk te zijn van de code die ik ontwikkel. Tijdens het project zijn er verschillende fases. Elke fase bevat meerdere sprints, waarin deelproducten worden gemaakt. Hieronder ziet u de fases en wat deze fases inhouden.

Een project begint altijd met een initiatiefase. In deze fase wordt in mijn geval de hoofdopdracht gedefinieerd. De initiatiefase begint vaak vanaf het moment dat de opdrachtgever het idee krijgt om een iets te maken of een project te starten. In deze fase wordt dus meestal het idee bedacht.

Na de initiatiefase volgt de definitiefase. In deze fase wordt het idee omgezet naar een opdracht en een project. Er wordt gewerkt aan een Plan van Aanpak om concreet vast te stellen wat er gemaakt gaat worden en voor wanneer het af moet.

In deze fase wordt er een ontwerp gemaakt waarmee men denkt het projectresultaat te behalen. Dit ontwerp wordt uitgebreid gedocumenteerd in een ontwerpdocument. Het ontwerpdocument zal de basis vormen voor de realisatiefase.

In de realisatiefase wordt er een daadwerkelijk product gemaakt. Het realiseren van het product wordt in deze fase dus ook afgerond. De controlefase is ervoor bedoeld om eventuele problemen en fouten met het uiteindelijke product op te lossen. Er wordt dus ook ruimte gecreëerd voor testen en hierna volgt het opleveren van het product. Aangezien er in de controlefase ook een deel van nazorg zit verwerkt, zal deze fase in het teken staan van reflecteren en het opleveren van documenten. Er zal ook ruimte zijn voor eventuele ondersteuning voor het opgeleverde product. En uiteindelijk zal hier het afscheid plaatsvinden met het bedrijf.

De initiatiefase speelde zich af ver voor de daadwerkelijke stage. In deze fase werd het plan opgesteld om een nieuw ontwerp te maken voor het nieuwe CMS wat in de maak was. ULTRA DESIGN HERO’S heeft hierbij een vacature open gesteld om een student de kans aan te bieden een front-end te gaan ontwerpen in samenwerking met de ontwerper van ULTRA DESIGN HERO’S zelf.

Er werd in de definitiefase een opdrachtomschrijving samengesteld, waarin beschreven werd wat de opdracht binnen het bedrijf was. Deze opdrachtomschrijving werd door mijn begeleider vanuit de HOGE SCHOOL VAN HOLLAND gebruikt om mijn stageopdracht op kwaliteit te beoordelen. Ook werd in dit document de projectachtergrond, de aanleiding, de doelstelling en het op te leveren resultaat van de opdracht omschreven. Na controle werd de opdracht goedgekeurd en werden er een paar kleine aandachtpuntjes geconstateerd. Deze feedback is later verwerkt.

Na goedkeuring van de opdrachtomschrijving werd er gewerkt aan het Plan van Aanpak. Dit document gaf hoofdzakelijk aan hoe het project hoogstwaarschijnlijk zou gaan verlopen en hoe er met bepaalde problematiek omgegaan zou kunnen worden. Ook werd hierin de globale projectaanpak, de voorlopige planning en de methoden van het project beschreven. Dit document zou later in het project veel houvast gaan geven. Het document is vervolgens opgestuurd naar mijn begeleider voor goedkeuring.

Aangezien het Plan van Aanpak nog nagekeken werd door mijn begeleider, is de feedback hiervan verwerkt. Na het verwerken van de nodige feedback is er een uiteindelijke versie opgesteld. Na het opstellen van het Plan van Aanpak kon er worden begonnen met ontwerpen. Aangezien de navigatie één van de belangrijkste elementen in het CMS zou worden, is ervoor gekozen om hiermee te beginnen.

Er werd in het kader van usability besloten om de menustructuur zoveel mogelijk te beperken tot twee ‘clicks’. Dit houdt in dat er maar twee keer geklikt hoeft te worden (met de muis of de vinger), voordat de gebruiker zijn doel bereikt heeft. Ook werden er bepaalde knoppen weggelaten, omdat ze geen functie vervulden in het nieuwe CMS.

De navigatie is één van de belangrijkste aspecten van een website. Daarom is er goed over nagedacht over hoe de navigatie er uit moest komen te zien. Het belangrijkste besluit hierin was dat de navigatie ten allen tijde weg geklikt moest kunnen worden, zodat de gebruiker optimaal gebruik kan maken van beschikbare ruimte. Ook moest de navigatie zich aanpassen aan de grote van het apparaat waarop het CMS bekeken werd. Zo wordt de navigatie kleiner, zodra je over stapt op een tablet of smartphone.

Dit maakt de navigatie van het CMS uniek, aangezien er twee soorten navigatie zijn die vanzelf geactiveerd worden, maar ze ook allebei altijd uit het beeld gehaald kunnen worden. Toen het ontwerp voor de navigatie eenmaal vast stond, werd er gekeken naar het algemene ontwerp van de website. Dit had vooral betrekking op de kleuren, het lettertype, de knoppen en het logo wat gebruikt ging worden. Het lettertype waar uiteindelijk voor gekozen is, is Open Sans.

Dit had als reden dat het lettertype duidelijk leesbaar is en modern oogt. Daarnaast wordt het lettertype door Google ondersteunt en mag het gratis gebruikt worden. Doordat het lettertype door Google ondersteund wordt, biedt het lettertype meteen uitstekende browserondersteuning. Meer ontwerpkeuzes betreffende het font leest u in het ontwerpdocument.

ULTRA DESIGN HERO’S wou graag het originele logo terug zien in het CMS, daarom is er voor gekozen deze klein links bovenin te plaatsen. Er is daarna een witte versie van het logo gemaakt, zodat er een duidelijk verschil is tussen het logo in de ‘normale’ stand en het logo in ‘mouseover’ stand. In de laatste stand gaat de muis over het logo heen. Aangezien de achtergrondkleur donker is, is de ‘mouse-over’ versie wit gemaakt. Dit geeft een duidelijk contrast tussen de ‘normale’ en ‘mouse-over’ stand en zorgt ervoor dat het logo alsnog goed zichtbaar blijft.

Om het algemene ontwerp compleet te maken moest er nagedacht worden over de knoppen op de website. Er werden vier soorten knoppen ontworpen voor verschillende soorten acties. De kleuren die uitgekozen waren in de styleguide kwamen nu weer terug. Het belangrijkste besluit wat hierbij genomen werd, ging over de radius van de hoeken van de knoppen. Door de knoppen een ronde hoek mee te geven, konden we de knoppen uit het vierkante design uit laten springen. Zo kon er een duidelijk zichtbaar verschil gecreëerd worden tussen knoppen en content. Meer informatie over de knoppen vindt u in het ontwerpdocument.

Nadat de belangrijkste punten van het algemene ontwerp behandeld waren, werd er gewerkt aan de wireframes van het front-end. Aangezien er al conceptbeelden waren voor het front-end hebben we deze als basis genomen voor de wireframes. Vaak worden wireframes in exacte maten getekend. Aangezien het ontwerp op responsive design gebaseerd was heb ik ervoor gekozen om de wireframes op een bootstrap raster uit te tekenen.

Al gauw werd er besloten om met Balsamiq Mockups te gaan werken, omdat Balsamiq Mockups een bootstrap raster ondersteunde waarop getekend kon worden. Het responsive systeem van bootstap ondersteund standaard vier soorten rasters waar geschakeld tussen kan worden op het moment dat de breedte van de resolutie van een apparaat kleiner of groter wordt. Met deze vier soorten rasters konden we een front-end voor desktop, tablet en mobiel gaan ontwerpen.

Nadat de wireframes waren getekend, werden er aan de hand van deze wireframes concept beelden opgezet. Na een vergelijking te hebben gemaakt met het oude CMS en het huidige CMS, werd het duidelijk dat de pagina’s die ontworpen moesten worden in drie categorieën ingedeeld konden worden. Er zijn namelijk veel pagina’s in het CMS die een andere functie hebben, maar wel hetzelfde ontwerp delen.

De pagina’s die niet binnen de bovenste categorieën vielen, kregen een eigen ontwerp dat alsnog gebaseerd was op één van de drie bovenstaande categorieën. Om het ontwerpdocument compleet te maken, werden er nog twee laatste impressiebeelden samengesteld. Dit keer werd de homepagina met Latijnse tekst ingevuld, zodat de werknemers bij ULTRA DESIGN HERO’S een beeld kregen van hoe de homepagina met content eruit zou gaan zien.

De realisatie van het front-end begon al deels tijdens de ontwerpfase, aangezien de conceptbeelden op de pagina hiervoor grotendeels in HTML en CSS waren gemaakt. Ook werd mij geleerd dat ik zoveel mogelijk tijd aan realiseren moest besteden, aangezien er ook ontworpen wordt tijdens het realiseren. Om duidelijkheid te scheppen over wat er nu wel of niet gerealiseerd moest worden, is er overleg geweest met de programmeurs.

Het werd tijd om prioriteiten te stellen met behulp van een MoSCoW lijst. Must: Zaken die afgerond moeten worden om het project te laten slagen. Prioriteit nummer één. Should: Zaken die eigenlijk afgerond zouden moeten worden, maar niet noodzakelijk zijn om het project te laten slagen. Prioriteit nummer twee. Could: Zaken die eventueel afgerond zouden kunnen worden, indien er tijd over is. Won’t: Zaken die niet uitgevoerd en afgerond worden tijdens het project. In mijn geval ging de MoSCoW lijst vooral over de pagina’s die gerealiseerd moesten worden. Ik heb vervolgens een voorstel gemaakt voor de MoSCoW lijst en na feedback weer aangepast.

Aangezien er tijdens het ontwerpproces ook begonnen was met de navigatie, besloot ik dat nu weer te doen. Tijdens het realiseren van de navigatie, kwam de begeleiding tussentijds regelmatig langs om te kijken of het de goede kant op ging. Het realisatieproces verliep hierna erg snel, omdat er al met HTML geëxperimenteerd was tijdens de ontwerpperiode. Echter begon toen ook de periode van ziekte. Tijdens het realisatie proces zijn er twintig dagen geweest waarop ik niets kon doen vanwege problemen met mijn maag. De stagebegeleider vanuit de HOGE SCHOOL VAN HOLLAND en vanuit het bedrijf zijn hier beide tijdig over ingelicht.

Ondanks de ziekte is er in deze periode nog een hoop werk verzet. Echter werden de dagen waarop er communicatie was tussen de stagebegeleider en mij minder, omdat we elkaar misliepen. Sander werkte vooral op de vroege morgen en ik was ’s morgens vaak afwezig. Op de dagen dat ik wel aanwezig was, waren er vaak overlegmomenten, die mij de nodige ondersteuning kon geven over technische en ontwerp aspecten. Door de weinige contact dagen, waren de voortgangsverslagen er bij in geschoten.

Toen kwam het gesprek met mijn stagebegeleider. In dit gesprek kwam naar voren dat ze tevreden waren over de tot dan toe geleverde kwaliteit van het product. Ook vonden ze dat ik communicatief sterk was, door frequent te mailen over de voortgang van de problemen met mijn maag. Echter waren ze wel bang dat het project niet op tijd af zou komen, indien ik in de toekomst nog meer dagen afwezig zou zijn. Er is toen afgesproken dat ik vooral de avond uren zou besteden aan verslaglegging, zodat ik overdag meer tijd zou hebben voor de realisatie zelf. Ook werd de nieuwe planning goedgekeurd.

Daarna is er een demonstratie gegeven over het CMS front-end. Hierbij was iedereen van ULTRA DESIGN HERO’S aanwezig. Tijdens de presentatie was er een korte feedback mogelijkheid voor alle betrokkenen, maar is er niet inhoudelijk ingegaan op verbeterpunten. We hebben toen afgesproken om een document op te stellen waar iedereen online bij kon, zodat iedereen zijn verbeterpunten hierin kon plaatsen.

Iedereen heeft toen dezelfde dag nog feedback punten uitgewerkt in het document met daarachter de prioriteit van elk feedbackpunt. Hierna volgde een periode van het verwerken van feedback. Tijdens het verwerken van de feedbackpunten kwamen er dingen naar boven die eerder nog niet gezien waren. Tijdens deze periode volgde er ook weer een periode van ziekte. Door de maagproblemen had ik dagen gemist, waardoor er opnieuw vertraging werd opgelopen in het project.

Om deze achterstand te overbruggen is er besloten om tijdens de controlefase door te gaan met realiseren en de oplevering op te schuiven naar de laatste dag. Door deze overbrugging kon er snel geschakeld worden en is er tot de één a laatste week doorgewerkt aan de realisatie, terwijl er regelmatig gecontroleerd werd of alles nog goed ging. Ook was er in de controlefase de nodige ondersteuning met javascript, aangezien dit een struikelblok was. De Controlefase was een verlenging van de realisatiefase, maar werden er in deze fase alsnog laatste de dingen gecontroleerd en besloten. Om een goed beeld te geven van de controle fase, worden hieronder de grootste veranderingen opgesomd.

Een grote verandering vond plaats in de tabellen die op de verkenner pagina’s zichtbaar zijn. In het oorspronkelijke ontwerp was de zoekbalk binnenin de tabel vrij groot in de hoogte en het vlak erg groot in de breedte. In het nieuwe ontwerp van deze balk is de algemene hoogte ingekort, waardoor er meer ruimte over blijft op de pagina voor content. Ook is de kolom in de breedte ingekort, waardoor er meer ruimte over blijft voor de titel. De checkbox van elke rij in de tabel is nu samengevoegd in één kolom, om ruimte te besparen. De checkbox heeft immers geen eigen zoekfunctie boven zich nodig.

De velden waarin gezocht of geselecteerd kan worden zijn smaller en daarnaast is de radius op nul gezet, om de velden beter bij het flat design van het algemene ontwerp te laten passen. De uitgeschreven talen zijn vervangen voor vlaggen, om zo ruimte te besparen. De bewerken en verwijderen knop zijn uitgelijnd naar rechts en hebben nu dezelfde kleur als de tekst en de rest van de iconen. Ook is de ‘search’ knop aangepast en past nu beter bij het huidige ontwerp. Tot slot is de grijze kleur van de zoekbalk vervangen door wit, om zo de zoekbalk meer weg te laten vallen in de tabel.

Nog een erg grote verandering in het ontwerp was de extra navigatie balk met daarin opties. Deze balk is tot leven geroepen na de demonstratie, omdat er veel feedbackpunten waren waarin er werd gezegd dat de opties op een pagina op een vaste plek zouden moeten komen.

Het maken van een andere ‘balk’ onder de bestaande witte balk bovenin was een flinke uitdaging. Een dubbele balk zou tijdens het scrollen en op een mobiel scherm namelijk veel ruimte in gaan nemen en kon ook voor verwarring zorgen. Toen kwam het idee ter sprake om een balk te maken die in eerste instantie onder de bestaande witte balk bovenin kwam te staan, maar later overging naar de plek van de balk bovenaan. Zo zou de nieuwe balk niet veel ruimte in gaan nemen en konden beide ‘balken’ behouden blijven.

Om het zicht van de gebruiker niet te storen, is de ‘optiesbalk’ in eerste instantie transparant, maar wordt hij wit zodra je door de content heen scrolt. Zo kan de gebruiker overzichtelijk door de content heen scrollen en blijven de opties die de gebruiker nodig heeft altijd in beeld.

Gedurende het project heb ik samen met een andere stagiaire gewerkt aan een layoutbuilder. Deze lay-outbuilder stelt de gebruiker in staat zelf de lay-out te kiezen van zijn of haar website. De opdracht was om deze lay-outbuilder te programmeren en werkend te krijgen in het systeem van ULTRA DESIGN HERO’S. Mijn (zij)opdracht was het om een ontwerp neer te zetten voor de lay-outbuilder, omdat ULTRA DESIGN HERO’S deze ging gebruiken in het nieuwe CMS. De lay-outbuilder komt terug in het CMS en was daarom een belangrijk aspect.

Echter was dit nieuwe ontwerp toch nog niet helemaal af. Je kon namelijk weliswaar de indelingselementen kiezen, maar nog geen inhoud of media elementen. Ook was er feedback over de beweging van de elementen op het moment dat je er met de muis overheen ging. Daarom is er gekozen voor een ontwerp waarbij de opties van een element pas tevoorschijn komen op het moment dat je er met je muis overheen gaat. En tekst wordt bewerkt in een apart scherm die tevoorschijn komt op het moment dat je op een tekstblok klikt. Het nieuwe ontwerp zag er als volgt uit.

Dan ziet u een 1/3 indelingselement waar de muis op staat. Hierbij verschijnt de naam van het inhoudselement, in dit geval een tekst vak. Ook krijgt de gebruiker een optie in beeld om het tekst vak te verwijderen. Mocht de gebruiker de tekst aan willen passen, dan hoeft hij of zij er alleen maar op te klikken. Links bovenin ziet u ook de optie om het indelingselement groter of kleiner te maken. Zodra de gebruiker zijn muis van het indelingselement heeft verwijderd, zal het vlak eruit zien zoals het 2/3 indelingselement rechts hierboven. De opties komen alleen tevoorschijn wanneer de gebruiker ze nodig heeft, waardoor de lay-outbuilder een groot gebruiksvriendelijkheid gehalte heeft. Ook zorgen de minimale opties in het zicht van de gebruiker voor een rustige gebruikerservaring. Hieronder ziet u hoe het eruit ziet als een gebruiker een tekst vak aan klikt om die te bewerken.

Ook de knoppen van de lay-outbuilder zijn aangepast en gecategoriseerd met een verbeterde versie van de indelingselementen, inhoudselementen en media elementen. Elke categorie heeft zijn eigen tabblad waardoor niet alle knoppen direct in beeld komen.

Bij het kiezen van de indelingen in de lay-outbuilder hoort ook het kiezen van de categorieën waarin het gehele bericht moest komen. Hier was nog geen oplossing voor bedacht, dus is er een venster ontworpen, waarin categorieën gekozen kunnen worden. Het ontwerp is gebaseerd op de categorie verkenner, waar de gebruiker categorieën mee kan toevoegen en verwijderen. Echter is die functionaliteit er bij dit venster uit en is er enkel een checkbox waarmee de categorie geselecteerd kan worden.

Toen kwam het idee om er een zoekfunctie in te bouwen, dus is hier het uiterlijk ook alvast voor ontworpen. Op de volgende pagina ziet u hiervan het resultaat. De laatste belangrijke besluiten die genomen zijn gingen vooral over User Interface Design, Usability, Look and Feel en Interaction Design. We keken terug op de beslissingen die gemaakt waren en keken of er nog punten waren die opnieuw uitgedacht moesten worden.

De User Interfase Design was vooral gebaseerd op de interactie. De menu structuur was aangepast, aangezien ULTRA DESIGN HERO’S vond dat de nieuwsbriefmodule eruit mocht. Dit gaf mij de kans om het menu te herontwerpen en elke actie vanuit de navigatie te verkorten naar twee clicks. Ook hebben alle knoppen waarmee een actie verricht kan worden binnenin het CMS een ronde hoek van 5 pixels, zodat het verschil tussen content en een actie altijd zichtbaar is.

Het meest belangrijke besluit in de Look and feel gaat over het lettertype. We waren vanaf het begin al aan het experimenteren met verschillende groottes, maar zijn toen in de ontwerpfase bij 16 pixels gestopt. Echter kwam de grote van het lettertype steeds vaker ter sprake en heb ik een verandering van 16 naar 14 pixels voorgesteld. Het resultaat was dat de tekst alsnog prima leesbaar was en er veel minder ruimte nodig was voor dezelfde content. Hier zijn we dus uiteindelijk bij gebleven. Omdat veel oude klanten van ULTRA DESIGN HERO’S over zullen stappen op het nieuwe systeem, is de lay-out grotendeels gebaseerd op het oude CMS. Ook is er voor de navigatie gekozen voor dezelfde kleur, zodat dit een herkenbaar aspect is voor de oude gebruikers. Voor de rest heeft het CMS een vierkant en rustig ogend ontwerp, om de gebruiker minimaal tot last te zijn.

Om de gebruiker zoveel mogelijk tegemoet te komen qua functionaliteit, is er nagedacht over waar de gebruikers het CMS het meeste voor gebruiken. Volgens ULTRA DESIGN HERO’S hielden de klanten zich het meest bezig met het beheren en bewerken van content berichten. Om de gebruikers van het CMS zich volledig op de content te kunnen laten richten, is er altijd de mogelijkheid om de navigatie uit beeld te halen. Zo blijft er meer ruimte over voor de beheerbare content en zal de gebruiker zelf kunnen kiezen of hij van deze functionaliteit gebruik maakt of niet.

Tijdens de controle fase kwam er veel javascript aan bod, aangezien er veranderingen plaatsvonden die niet alleen met HTML en CSS op te lossen waren. Neem bijvoorbeeld de ‘optiesbalk’ die de bovenste balk doet verdwijnen zodra de gebruiker scrolt. Dit was niet op te lossen zonder javascript. Hoewel javascript een struikelblok was, is het uiteindelijk goed gekomen door goed te communiceren over wat wel en niet lukte. Deze methode hielp tijdens het project om in te schatten of elementen met javascript haalbaar waren om te maken of niet.

Een laatste besluitmoment kwam naar voren toen de navigatie meerdere malen was aangepast. Aangezien er met HTML bestanden gewerkt werd, moesten er bij elke verandering 20 bestanden aangepast worden. Door deels met PHP te gaan werken, was er de mogelijkheid om van de navigatie een apart bestand te maken en deze als het waren te integreren in alle andere pagina’s. Hierdoor werden alle pagina’s meteen aangepast bij elke wijziging in de navigatie. Ook is deze methode later toegevoegd op de bovenkant van de pagina, de javascript en de onderkant van de pagina. Deze methode zorgde voor veel tijdwinst waar in de afrondingsfase duidelijk de resultaten van naar voren kwamen.

Aan het eind van het project had er oorspronkelijk nog een testmoment moeten zijn voor het uitgebreid testen van het CMS op mobiele apparaten. Vanwege de langdurige ziekte periodes is er in overleg voor gekozen om alleen de desktop versie te testen. Daar ligt de hoogste prioriteit.

De allerlaatste sprint werd vooral besteed aan de documentatie en aan het afronden van het op te leveren product. Echter werden er hierbij nog wel wat laatste puntjes op de i gezet. Zo werd er een categorie toegevoegd over kleine tietjes omdat dit een variant is op kleine tieten. Op de pagina ziet u wat er met de knoppen gebeurd op het moment dat de pagina onder de 900 pixels komt. Deze functie is erin gebouwd om te kunnen verzekeren dat er een derde tabblad geplaatst kan worden op een pagina.

Ook ziet u dat de knop waarmee het menu veranderd kan worden een andere stijl heeft gekregen. Het hamburger icoon is onder de gebruikers bekender dan het voorgaande teken, dus is er besloten voor het hamburger icoon te gaan. Ook de uitloggen knop heeft nu de naam van de gebruiker er in staan en heeft de mogelijkheid om kleiner te worden, zodra het scherm kleiner dan 900 pixels wordt. En als laatste is er in de afrondingsfase nog een extra functionaliteit ingebouwd die er voor zorgt dat pagina’s met tabbladen een andere ‘optiebalk’ krijgen dan die zonder tabbladen.

De ‘optiebalk’ met tabbladen heeft namelijk standaard te weinig ruimte voor de optie knoppen (zoals annuleren, verwijderen en toevoegen), hierdoor is dat probleem opgelost. Ook is er bewust over nagedacht om de tabbladen onder de optie knoppen te plaatsen, zodat de plek van de tabbladen consistent blijft.

Tijdens de stage bij Ultra Design Hero’s in Holland wilde ik mij verdiepen en specialiseren in het vakgebied van front-end design en wilde ik bewijzen dat ik daarmee de competenties ontwerpen en realiseren bezit. Om dit te bewijzen heb ik aan het begin van de stage het doel gesteld om aan het einde van het project een intuïtieve en gebruiksvriendelijke responsieve front-end voor het nieuwe CMS van ULTRA DESIGN HERO’S op te leveren.

Aan de hand van het product wat er binnen de stage ontworpen en gerealiseerd is, kan ik concluderen dat dit doel behaald is. Voordat het realisatieproces begonnen was, zijn er een paar eisen op tafel gekomen waaraan het front-end van het CMS moest voldoen om dit doel te behalen. Als we deze doelen vergelijken met het uiteindelijke product, voldoet het product aan de vooraf gestelde eisen.

Tijdens de stage werd in overleg met mijn stagebegeleider vanuit de HOGE SCHOOL VAN HOLLAND afgesproken dat het personeel van ULTRA DESIGN HERO’S genoeg ervaring heeft met haar klanten om te oordelen over de gebruiksvriendelijkheid, look and feel en dergelijke. Ik zou graag ULTRA DESIGN HERO’S aanbevelen om in de toekomst het CMS te testen op een groep mensen die in het dagelijks leven niet met computers werkt. Zo kan er getest worden of het CMS gebruiksvriendelijk genoeg is voor een groot scala aan klanten.