GRAPHIC DESIGNER& WEB DEVELOPER
hey, mijn naam is jonas en dit is mijn portfolio!
↓
Hoppin
"Een effectieve mobiliteitsapp verandert de manier waarop we reizen, door naadloze verbindingen en realtime informatie te bieden die onze dagelijkse verplaatsingen efficiënter en duurzamer maken."
Project Overzicht:
Doel: Het verbeteren van de gebruiksvriendelijkheid (UX) en de gebruikersinterface (UI) van de bestaande Hoppin-app, een overheidsproject, door het toevoegen van nieuwe features en optimalisatie van bestaande functies. Ben je geïnteresseerd in de vernieuwde app? Klik dan op de onderstaande link om meer te ontdekken.
Hoppin
Project Beschrijving:
Het doel van dit project was om de Hoppin-app, een initiatief van de overheid, te verbeteren door de gebruikerservaring (UX) en de gebruikersinterface (UI) aanzienlijk te optimaliseren. De oorspronkelijke app had een ondermaatse UI/UX, wat leidde tot een verminderde gebruiksvriendelijkheid en gebruikersbetrokkenheid. Door het invoeren van nieuwe functies en het verbeteren van de interface, streefde dit project ernaar om de app aantrekkelijker en gebruiksvriendelijker te maken voor de eindgebruikers.
Technologieën:
Voor dit project heb ik de volgende technologieën en tools gebruikt:
- Figma: Voor het ontwerpen, stylen en interactief maken van de app.
- Illustrator: Voor het maken van iconen en bepaalde gedeeltes te designen.
Reflectie:
Het verbeteren van de Hoppin-app was een waardevolle ervaring die mij veel heeft geleerd over UX/UI-ontwerp, tijdbeheer en gebruikersgericht werken. De positieve reacties op de nieuwe functies en het verbeterde ontwerp waren zeer bevredigend en motiveren mij om mijn vaardigheden verder te ontwikkelen en toe te passen in toekomstige projecten.
The useless web
"De 'useless website' is als een digitale speeltuin waar je de nutteloosheid viert en jezelf verliest in het absurde en onverwachte."
Project overzicht:
In dit project hebben we onze eigen versie gemaakt van Tim Holman's "The Useless Web". Ons doel was om een reeks nutteloze, maar vermakelijke webervaringen te creëren, geïnspireerd door het originele concept van Holman. We hebben zowel individueel als in groepen gewerkt om een verzameling van onzinnige webpagina's te maken die samenkomen op onze eigen "The Useless Web" website.
Project Beschrijving:
Elke webpagina biedt een unieke en bizarre ervaring voor de gebruiker zoals interactieve animaties. Het ontwerp van elke pagina is geoptimaliseerd om de nutteloosheid te accentueren en de gebruiker te verrassen met een combinatie van humor en absurditeit. (Mijn eigen useless website is de bubbel pop)
Technologieën:
Voor dit project hebben we een verscheidenheid aan webtechnologieën gebruikt, waaronder maar niet beperkt tot:
- HTML, CSS en JavaScript: Voor het ontwerpen, stylen en interactief maken van de nutteloze webpagina's.
- Responsiviteit: Alle webpagina's zijn ontwikkeld met een focus op responsief design, waardoor ze goed werken op verschillende apparaten en schermformaten.
Reflectie:
Het creëren van onze eigen versie van "The Useless Web" was een creatief en plezierig project dat ons in staat stelde om buiten de traditionele grenzen van webontwikkeling te denken. Door ons te richten op het concept van nutteloosheid, werden we aangemoedigd om conventionele ideeën over functionaliteit en bruikbaarheid los te laten, wat resulteerde in een reeks van hilarische en eigenaardige webervaringen.
Dynamic typography
"Dynamische typografie geeft tekst een levendig karakter, waarbij elke letter en elk woord tot leven komt om de boodschap op een visueel indrukwekkende en meeslepende manier over te brengen."
Project Overzicht:
Voor dit project heb ik individueel een woordlogo ontworpen voor het woord Persona's. Het doel was om de betekenis van het woord visueel te versterken door kleine manipulaties aan een bestaand font en het toevoegen van beweging. Dit project werd ook in groep uitgevoerd. In groep hebben we drie woorden (Mouse, Angel, radio) ontworpen en uitgewerkt.
Project Beschrijving:
Mijn woordlogo bevat een visuele verwijzing naar de betekenis van het gekozen woord door middel van subtiele manipulaties aan een bestaand lettertype. De statische versie van het logo werd eerst uitgewerkt in Adobe Illustrator, waarbij kleurkeuzes van de webpagina werden bepaald. Daarna maakte ik een story board en zette ik het logo om in HTML en CSS om het tot leven te brengen op een webpagina.
Technologieën:
Voor dit project heb ik de volgende technologieën en tools gebruikt:
- Adobe Illustrator: Voor het ontwerpen en manipuleren van het woordlogo.
- HTML: Voor het structureren van de webpagina.
- CSS: Voor de styling van het logo en het toevoegen van animaties.
Reflectie:
Dit project heeft me veel geleerd over het combineren van typografie en visuele communicatie. Door te werken met een bestaand font en subtiele manipulaties door te voeren, kon ik de betekenis van het woord op een creatieve manier versterken. Het proces van het maken van een storyboard hielp me om de animatie van het logo beter te plannen en te visualiseren. Het omzetten van het statische ontwerp naar een dynamisch logo met HTML en CSS was een uitdagende maar leerzame ervaring. Ik heb geleerd hoe ik beweging kan toevoegen aan een logo om het aantrekkelijker en betekenisvoller te maken. Dit project heeft mijn vaardigheden in grafisch ontwerp en front-end ontwikkeling aanzienlijk verbeterd.
Dynamic Poster
"Een dynamische poster trekt de aandacht met levendige beelden en beweging, waarbij het verhaal van het ontwerp krachtig en boeiend tot leven komt."
Project Overzicht:
Voor dit project heb ik een dynamische poster ontworpen voor de film Fast and Furious van regisseur Gary Scott Thompson. Na het bekijken van de film en het doen van research naar zowel de film als naar Gary Scott Thompson, heb ik een origineel idee bedacht om het affiche vorm te geven. Het doel was om de sfeer en essentie van de film op een creatieve en dynamische manier over te brengen naar het affiche.
Project Beschrijving:
Het filmaffiche bevat de belangrijkste informatie zoals de titel van de film, de naam van de regisseur (Gary Scott Thompson) en de belangrijkste acteurs/actrices. Het idee komt voor uit de kern van de film. In de film gaan ze vaak racen met getuned auto's, daarom heb ik ervoor gekozen om in mijn animatie 2 auto's te laten racen tegen elkaar.
Technologieën:
Voor dit project heb ik de volgende technologieën en tools gebruikt:
- HTML en CSS: Voor het ontwerpen en ontwikkelen van het bewegende filmaffiche. Alle grafische elementen werden gemaakt met CSS en SVG, zonder gebruik van pixelafbeeldingen.
- Responsiviteit: De HTML-pagina is volledig responsive, zodat het filmaffiche goed wordt weergegeven op verschillende schermformaten.
- Animaties in CSS: Alle bewegingen en overgangen werden gerealiseerd met behulp van CSS-animaties, conform de minimumvereisten van het project.
Reflectie:
Dit project bood een creatieve uitdaging om de essentie van de film en de stijl van Gary Scott Thompson op een unieke manier weer te geven in een bewegend filmaffiche. Het proces van onderzoek, ideeontwikkeling, en ontwerp hielp me om mijn designvaardigheden verder te ontwikkelen en meer inzicht te krijgen in het gebruik van animaties in webdesign. Het storyboard was een waardevol instrument om de animaties te plannen en te visualiseren voordat ik ze in code implementeerde. Het omzetten van het ontwerp naar HTML en CSS was een uitdagende maar leerzame ervaring, waarbij ik mijn kennis van front-end ontwikkeling kon toepassen om een dynamisch en aantrekkelijk filmaffiche te creëren.
CSS Zengarden
"Met alleen CSS heb ik dit project volledig getransformeerd, waarbij ik de kracht van stijlen heb benut om een visueel verbluffende en functioneel dynamische ervaring te creëren."
Project Overzicht:
Voor dit project heb ik deelgenomen aan de CSS Zen Garden challenge, waarbij ik de startpagina van de CSS Zen Garden website heb herontworpen. Mijn thema was Art Deco. Het doel was om een totaal ander ontwerp te creëren door alleen aanpassingen te doen in de CSS, terwijl de HTML-code onveranderd bleef. Het project omvatte onderzoek naar het toegewezen thema, het ontwerpen van wireframes en het technisch uitwerken van het redesign.
Project Beschrijving:
Ik ben begonnen met een uitgebreid onderzoek naar mijn toegewezen thema, waarbij ik inspiratie opdeed en een moodboard opstelde om verschillende visuele elementen te verkennen die ik kon integreren in mijn ontwerp voor de CSS Zen Garden startpagina. Na het verzamelen van ideeën heb ik drie verschillende designs geschetst in wireframes, waarbij ik alle content uit de HTML heb gebruikt. Daarna heb ik één voorstel gekozen dat ik verder ben gaan uitwerken. Ik heb keuzes gemaakt in typografie en kleur, waarbij ik geen gebruik heb gemaakt van afbeeldingen van het web. Vervolgens heb ik prototype van mijn redesign gemaakt, waarbij ik rekening heb gehouden met de richtlijnen in de HTML van de pagina.
Technologieën:
Voor dit project heb ik de volgende technologieën en tools gebruikt:
- CSS: Voor de styling van het logo en het toevoegen van animaties.
- Responsiviteit: De HTML-pagina is volledig responsive, zodat dewebpagina goed wordt weergegeven op verschillende schermformaten.
- Animaties in CSS: Alle bewegingen en overgangen werden gerealiseerd met behulp van CSS-animaties, conform de minimumvereisten van het project.
Reflectie:
Dit project bood een geweldige kans om mijn vaardigheden op het gebied van webdesign en CSS te verbeteren. Door deel te nemen aan de CSS Zen Garden challenge kon ik creatief omgaan met bestaande HTML-structuur en een geheel nieuw visueel concept creëren met alleen CSS-aanpassingen. Het proces van onderzoek, ontwerp en technische uitvoering heeft mij geholpen om meer inzicht te krijgen in geavanceerde CSS-technieken en om mijn ontwerpvaardigheden verder te ontwikkelen.
Google Doodle
"De Google Doodle vangt de geest van creativiteit en innovatie, door dagelijks een stukje kunst en cultuur in onze zoekervaring te brengen."
Project Overzicht:
Ik heb een interactieve Google Doodle gemaakt om de verjaardag van keith haring te vieren. Keith Haring was een invloedrijke Amerikaanse kunstenaar en activist, geboren op 4 mei 1958 en overleden op 16 februari 1990. Hij werd bekend in de jaren 1980 met zijn kenmerkende graffiti-achtige tekeningen die vaak felgekleurde, speelse en toch krachtige figuren en symbolen bevatten.
Project Beschrijving:
Mijn Doodle bevat de google letters in de stijl van Keith Haring. Elke letter bevat een andere leuke gepaste animatie. Ik ben van start gegaan met het maken van illustraties die daarna werden gebruikt in HTML en CSS code. Tot slot zijn de animaties toegevoegd.
Technologieën:
Voor dit project heb ik de volgende technologieën en tools gebruikt:
- Adobe Illustrator: Voor het ontwerpen van de letters.
- HTML: Voor het structureren van de webpagina.
- CSS: Voor de styling van de letters en het toevoegen van animaties.
Reflectie:
Dit project heeft me vooral veel geleerd over het creëren van CSS-animaties en -transities. Het was fascinerend om te ontdekken hoe ik met CSS bewegingen kon toevoegen aan mijn ontwerp, waardoor de Doodle echt tot leven kwam. Door te experimenteren en te oefenen met verschillende technieken heb ik een dieper inzicht gekregen in de mogelijkheden van CSS voor het animeren van webpagina’s.