SAFA HASSAN
GET IN TOUCH

ITERATIVE DESIGN

>
Interactive media Development Professional standard Personal leadership Project x

SOUNDLAB BRANDING

Voorwoord

Voor het project moeten we een nieuw branding en logo maken voor het Soundlab in R10, dat deel uitmaakt van de medialabs in het gebouw, samen met de pixelplayground (het video/virtuele productielab). Denk na over wie de doelgroep is, wat het lab precies doet en hoe je een aantrekkelijk ontwerp kunt maken.

Oriënteren

Voorafgaand aan het project hebben we uitgebreid overleg gevoerd met onzestakeholder om zijn wensen en voorkeuren te begrijpen. Dit omvatte discussies over stijlen, kleuren en specifieke ontwerpen die hij wel en niet wilde zien. We stelden vragen over zijn kleurvoorkeuren, gewenste stijlen, en specifieke doelen voor het SoundLab-project. De antwoorden omvatten het vermijden van kinderlijke kleuren en ouderwetse lettertypen, terwijl de voorkeur werd gegeven aan professionele en Synthwave-esthetiek. Schaalbaarheid van ontwerpen werd benadrukt, en de doelgroep werd vastgesteld als studenten van semester 2 en 3 media.

Het proces begon met het verkennen van inspiratiebronnen om de stijl en het thema te vinden die passen bij een sound lab. We begonnen met een bezoek aan Soundlab om de faciliteiten en mogelijkheden te verkennen. Daarna heb ik een stylescape gemaakt opfigma. Ik heb specifiek gefocust op een synthwave-stijl, die in lijn lag met de voorkeuren van onze cliënt. Om de visuele richting van het project te bepalen, heb ik een stylescape gemaakt waarin ik de essentie van deze stijl vastlegde. Voor het kleurenpalet heb ik gekozen voor paars en blauw, omdat deze kleuren niet alleen goed passen bij de gekozen stijl, maar ook een neon-achtige uitstraling geven die kenmerkend is voor synthwave. Ik heb diverse afbeeldingen toegevoegd om een duidelijker beeld te geven van de gewenste esthetiek en sfeer. Wat betreft typografie, heb ik twee verschillende lettertypen geselecteerd. Voor de grotere titels heb ik gekozen voor Inria Serif vanwege zijn scherpe uiteinden en passende uitstraling binnen de stijl. Voor de kleinere teksten heb ik gekozen voor Avenir, een duidelijk en simpel lettertype dat zorgt voor leesbaarheid en harmonie binnen het ontwerp.

Versie 1

Versie 2

De docent merkte op dat de tinten in mijn stylescape te gedempt waren en adviseerde om helderdere tonen toe te voegen. Hij benadrukte dat de compositie meer vloeiendheid nodig had en suggereerde het gebruik van kleurverlopen en een glanzende afwerking om de visuele aantrekkingskracht te vergroten. Bovendien wees hij op het belang van muziek voor beweging in design. Hij verwees me naar een website voor verdere inspiratie en moedigde aan om de Synthwave-geïnspireerde esthetiek te verkennen met levendige kleuren, dynamische elementen en verfijnde typografie.

Ik heb de ontvangen feedback geïntegreerd en toegepast in mijn stylescape. De kleuren zijn levendiger gemaakt om meer impact te hebben, en ik heb synthwave-elementen gebruikt om een gevoel van beweging te creëren. Daarnaast heb ik kleurovergangen toegepast voor een meer dynamisch effect. De nieuwe aanpassingen werden positief ontvangen: de heldere kleuren geven de stylescape een betere uitstraling, de kleurovergangen voegen persoonlijkheid toe, en de synthwave-elementen representeren de bijbehorende muziek.

Ik heb een kort enquête samengesteld samen met Sumaya voor studenten van semester 2 en 3 om te bepalen welke stylescape het beste past bij het SoundLab. Optie 3 werd het vaakst gekozen. De studenten gaven aan dat ze de naam "Soundspace" pakkend, leuk en uniek vonden. Ze vonden ook dat de stylescape van Jasmin het beste bij het SoundLab van Fontys paste vanwege de rustige kleuren die Jasmin had gekozen.

Op basis van de resultaten en onze eigen mening erin hebben we uiteindelijk voor destylescape van Jasmingekozen met de space thema

Wij hebben vervolgens gekeken wat er allemaal gedaan moet worden voor de brandguide en alle taken verdeeld. Voor samenwerking, ga naarleeruitkomst 4.

Ik heb deelgenomen in het maken van de kleurenpalet, geïnspireerd door de kosmos, omvat diepe tinten van gasreuzen, serene blauwtonen en levendige geeltinten. Deze kleuren belichamen de schoonheid en het mysterie van het universum, waardoor ze onze merkidentiteit op een krachtige manier weerspiegelen.

Na zorgvuldige overweging hebben we besloten om Plus Jakarta Sans te kiezen als het meest geschikte lettertype voor SoundSpace. Dit moderne en leesbare lettertype draagt bij aan een duidelijke overdracht van de boodschap van het platform naar het publiek. Met zijn eigentijdse stijl voegt Plus Jakarta Sans een perfecte touch toe aan de visuele esthetiek van SoundSpace, waardoor een coherent en overtuigend merkimago wordt gecreëerd.

Nadat het kleurenpalet en lettertype waren vastgesteld, heb ik tone-of-visuals en tone-of-voice toegevoegd om de stijl van SoundSpace te verfijnen. Dit omvatte het bedenken van slogans, het ontwerpen van studioconcepten en het maken van voorbeelden van social media-posts. Zo werd niet alleen de visuele identiteit van SoundSpace versterkt, maar ook een consistente en aantrekkelijke communicatiestijl gecreëerd om de boodschap van het platform effectief over te brengen.

Tijdens een feedbacksessie met destakeholder hebben we onze voortgang van de afgelopen week besproken. De klant was over het algemeen positief en waardeerde onze inspanningen, maar benadrukte dat we ons te veel hadden gericht op het uitbreiden van ons idee en dat we beter een stapje terug konden doen. Hij merkte op dat de brandguide niet speels genoeg was en dat bepaalde voorgestelde tone en visuele aspecten niet haalbaar waren vanwege ruimtebeperkingen, wat ons aanzet om de aanpak te vereenvoudigen en meer haalbare oplossingen te vinden.

We hebben de feedback zorgvuldig overwogen en geïmplementeerd in onze brandguide. Om een speelser karakter uit te stralen, hebben we ons lettertype gewijzigd naar Mokupoku. Wat betreft het visuele aspect hebben we realistischere ideeën ontwikkeld en een haalbaarder tone-of-visual samengesteld. We hebben deze aanpassingen vervolgens aan onze stakeholder gepresenteerd, die hij positief heeft ontvangen.

De stakeholder suggereerde een poster te hangen op de deur of in de oil om studenten aan te trekken dat er een nieuw soundlab was. Hiervoor

Op basis van mijn onderzoek ben ik begonnen met het ontwerpen van een poster. Voor dit ontwerp heb ik het kleurenpalet en de visuele stijl gebruikt die ik samen met mijn groepje heb opgesteld. Deze aanpak zorgt ervoor dat de poster aansluit bij onze gezamenlijke visie en effectief onze beoogde boodschap communiceert.

Soundspace poster

Voor mijn iteratieve designproject heb ik een poster gemaakt. Ik begon met het identificeren van de belangrijkste elementen die op de poster moesten staan: de locatie van het soundlab, het logo, een pakkende slogan om mensen aan te trekken, en de thema's geluid en ruimte moesten duidelijk naar voren komen.

Allereerst heb ik gekeken naar de achtergrond van de poster. Aangezien het thema "ruimte" is, heb ik dit element toegevoegd om de sfeer te versterken. Vervolgens plaatste ik het logo in een hoek en voegde ik een pakkende slogan toe, namelijk "Capture your sound". Daarnaast zorgde ik ervoor dat de locatie duidelijk zichtbaar was op de poster. Dit alles heb ik ontworpen met behulp van Adobe.

Versie 1

Poster Versie 1

Ik heb feedback gevraagd aan mijn doelgroep. Ze merkten op dat het thema ruimte goed tot uiting kwam, maar dat het element geluid niet duidelijk zichtbaar was en dat de poster nogal leeg aanvoelde. Daarom vond ze het een goed idee om meer inhoud toe te voegen.

Daarnaast gaven ze aan dat de poster momenteel iets afwijkt van het kleurpalet dat in het logo wordt gebruikt. Het toevoegen van wat blauwe tinten zou kunnen helpen om de poster beter in lijn te brengen met de rest van de branding. Dit zou bijdragen aan een betere samenhang en consistentie.

Na het ontvangen van feedback van mijn groepsgenoten, heb ik nog enkele aanpassingen gemaakt aan de poster. Om het element geluid duidelijker te maken, heb ik een microfoon toegevoegd. Bovendien heb ik de blauwe tint van het logo geïntegreerd in de poster om de consistentie met de branding te verbeteren.

Versie 2

Poster Versie 2

Adobe photoshop

Als groep hebben we meerdere posters gemaakt en deze gepresenteerd aan onze belanghebbende. Na zorgvuldige evaluatie en feedback gaf de belanghebbende de voorkeur aan één specifieke poster, die uiteindelijk werd gekozen om verder te gaan. De belanghebbende wenste dat de posters op een prominente plaats in de olielaboratoria of op de deur van het soundlab zouden worden geplaatst om de boodschap effectief over te brengen.

Om een ​​duidelijk visueel beeld te geven van hoe de uiteindelijke poster er op de deur van het soundlab uit zou zien, heb ik gebruikgemaakt van Photoshop. Door deze software te gebruiken, kon ik een realistische weergave creëren van hoe de gekozen poster eruit zou zien wanneer deze op de deur van het soundlab zou worden geplaatst, zoals voorgesteld door onze belanghebbende. Dit stelde ons in staat om een helder en visueel aantrekkelijk voorbeeld te presenteren aan onze belanghebbende, waardoor het gemakkelijker werd om consensus te bereiken over het uiteindelijke ontwerp en de plaatsing van de poster.

PORTFOLIO WEBSITE

Voorwoord

Voor deze opdracht moeten we een portfolio website desigen waar we ons werk en alle leeruitkomsten kunnen tonen. De website mag je naar eigen stijl ontwerpen. Het is een plek waar mensen meer over jou en je werk kunnen ontdekken.

Oriënteren

Voor mijn portfolio heb ik uitgebreidonderzoekgedaan. Ik heb verschillende elementen bekeken, zoals het maken van een stylescape, het bezoeken van websites, het kiezen van een kleurenpalet en lettertype, en het ontwerpen van een logo.

Iterative proces

Vervolgens heb ik de lay-out van mijn portfolio bestudeerd. Ik heb meerdere schetsen en wireframes gemaakt om de structuur te bepalen. Uiteindelijk heb ik een definitieve schets voor de voorpagina gemaakt die mijn ideeën het beste weergeeft.

Enquete

Wireframe

Foto van mijn beginontwerp

Beginontwerp versie 1

Drie foto's op elkaar gestapeld als polaroids

Na het onderzoek ben ik begonnen met het ontwerpen van mijn portfolio. Op de homepage heb ik vakjes geplaatst voor elke leeruitkomst. Vervolgens kreeg ik het idee om drie van mijn foto's op elkaar te stapelen en voegde dit toe. Om het geheel een speelsere uitstraling te geven, besloot ik de foto's als polaroids weer te geven.

 Toen ik de foto's had omgezet in polaroids, merkte ik dat ze niet goed zichtbaar waren tegen de witte achtergrond. De witte achtergrond zorgde ervoor dat de polaroids wegvielen. Daarom veranderde ik de achtergrondkleur naar grijs, maar ik vond dat dit een saaie uitstraling gaf aan mijn portfolio en de visuele aantrekkingskracht verminderde. Hierdoor bleef ik zoeken naar een betere oplossing om zowel de polaroids zichtbaar te maken als een aantrekkelijke achtergrondkleur te kiezen.

versie 2

versie 3

versie 4

versie 5

Daarom heb ik geëxperimenteerd met kleuren en uiteindelijk gekozen voor een subtiele gradiënt die een overgang van wit naar grijs creëerde. Hierdoor werden de polaroids toch zichtbaar en kreeg mijn portfolio een frissere en dynamischere uitstraling.

Voor mijn introductie op de homepage kreeg ik het idee om een fotocollage te maken. Ik heb een aantal foto’s van mezelf en mijn omgeving bij elkaar gezet en dit toegevoegd aan mijn homepage. Daarnaast heb ik ook de vakjes voor de leeruitkomsten nog aangepast voor een betere visuele balans.

Feedback

Ik heb feedback ontvangen van Paul, Dennis en Stan over mijn design. Ze vonden het idee om polaroids toe te voegen interessant en creatief. Echter, ze hebben opgemerkt dat de grijze achtergrond en de gradiënt de leesbaarheid en duidelijkheid van de tekst belemmerden, vooral van een afstand. Daarnaast merkten ze op dat de vakjes voor de leeruitkomsten steeds minder consistent waren en dat de tussenruimte niet goed in balans was. Hierdoor werd het geheel wat rommelig en minder overzichtelijk.

Na het ontvangen van feedback heb ik enkele aanpassingen doorgevoerd in mijn portfolio ontwerp. Allereerst heb ik de grijze gradiënt achtergrond volledig verwijderd en gekozen voor een strakke witte achtergrond. Om toch de polaroids te laten opvallen, heb ik ze voorzien van een subtiele schaduw, wat hun zichtbaarheid verbetert zonder afbreuk te doen aan het minimalistische ontwerp.

Een andere belangrijke beslissing was het verwijderen van de fotocollage van mijn homepage. Hoewel deze collage eerder creatief was, merkte ik en ook mijn feedbackgevers op dat het de pagina te druk maakte en afleidde van de belangrijkste inhoud. In plaats daarvan overweeg ik nu om deze collage op een meer gepaste wijze te integreren in mijn 'about me' sectie, waar het beter tot zijn recht kan komen en de context kan versterken.

versie 6

Na deze revisies heb ik opnieuw feedback gevraagd aan Dennis, wat resulteerde in enkele kleine aanpassingen. Daarna kreeg ik waardevolle feedback van mijn docent, die aangaf dat het ontwerp nu verbeterd is. Hij vond het ontwerp nu veel overzichtelijker, met tekst die goed leesbaar was en een strakke uitstraling. Ook benadrukte hij hoe belangrijk het is om de afstanden tussen de vakjes consistent te houden, zodat alles mooi in balans is.

Mijn volgende stap in dit ontwerpproces is het definiëren van de interactie wanneer gebruikers op een leeruitkomst klikken, en welke specifieke informatie op dat moment wordt gepresenteerd. Dit omvat niet alleen het visuele ontwerp van deze weergave, maar ook de functionele interacties die de gebruiksvriendelijkheid optimaliseren. Ik moet nog nadenken over de beste manier om de leeruitkomsten te organiseren - misschien per project, of in specifieke secties die relevant zijn voor mijn professionele ontwikkeling. Dit vraagt nog om mijn verdere aandacht.

Ik heb eerst overwogen om de leeruitkomsten te organiseren per opdracht. Dus wanneer je op een leeruitkomst klikt, zie je eerst aan welke opdrachten ik heb gewerkt, zoals Introweek, Branding, en Mediacampagne. Vervolgens, als je bijvoorbeeld op Mediacampagne klikt, zie je een interactief product dat ik heb ontwikkeld voor die opdracht. Ik heb hiervoor een wireframe gemaakt en verder uitgewerkt, en dit vervolgens op mijn website gepresenteerd.

versie 7

versie 8

Voor dit project heb ik opnieuw feedback verzameld en eenusertestuitgevoerd. Uit de test bleek dat de knoppen die ik had ontworpen voor de opdrachten (zoals Introweek, Branding, Mediacampagne) overbodig waren, omdat sommige van deze knoppen nergens naartoe leidden als er bijvoorbeeld geen interactief mediaproduct beschikbaar was voor die specifieke opdracht. Ook gaven de studenten aan dat ze moeite hadden om gemakkelijk naar andere leeruitkomsten te navigeren nadat ze op een specifieke leeruitkomst hadden geklikt.

Als aanpassingen heb ik daarom de overbodige knoppen verwijderd en alle informatie op één pagina geplaatst, georganiseerd onder kopjes voor een betere structuur en duidelijkheid. Daarnaast heb ik een dropdown menu toegevoegd om de gebruiksvriendelijkheid te verbeteren, zodat gebruikers gemakkelijk tussen verschillende leeruitkomsten kunnen navigeren.

Conclusie

Na het verzamelen van feedback en het uitvoeren van gebruikerstests voor mijn portfolio, heb ik een iteratief proces doorlopen om deze te verbeteren. Ik heb de grijze achtergrond en kleurovergangen verwijderd, overbodige knoppen weggehaald, alle informatie georganiseerd op één pagina met duidelijke sectiekopjes, en een dropdown menu toegevoegd om de navigatie tussen leeruitkomsten te verbeteren.

versie 9

OVP WEBSITE

Voorwoord

Voor deze opdracht kregen wij in een groepje de taak om de Fontys website te herontwerpen. Het doel was om meer studenten aan te trekken en hen langer op de website te laten blijven.

Oriënteren

Ik heb onze doelgroep onderzocht door middel van een enquête, waarbij ik de resultaten heb geanalyseerd. De meerderheid van de studenten gaf aan dat ze niet alle benodigde informatie duidelijk konden vinden op onze website. In reactie daarop heb ik een persona opgesteld om de doelgroep beter te begrijpen en een concurrentieanalyse uitgevoerd om de sterke en zwakke punten van andere hogescholen te identificeren.

Iteratief proces

Op basis van de design van een oude groepsgenoot heb ik deze website aangepast, ik heb een aantal iteraties doorlopen voor mijn design. Tijdens het iteratieve ontwerpproces voor de Fontys ICT Deeltijd website heb ik in drie fasen gewerkt om tot een aantrekkelijk eindproduct te komen

Eerste Ontwerp -

Het oorspronkelijke ontwerp, "Fontys ICT Deeltijd", werd door een oude groepsgenoot gemaakt. Dit ontwerp richtte zich op het creëren van een informatieve en dynamische website. De hero-sectie bevatte een prominente afbeelding met een call-to-action knop voor het inschrijven voor een open dag. Daarnaast was er een sectie waarin studenten hun eigen studieroutes konden samenstellen, en werd het onderwijs op het Innovatieve Strip-T benadrukt met visuals en tekst. Ook waren er testimonials van alumni geïntegreerd om geloofwaardigheid en ervaringen te delen. Hoewel dit ontwerp een solide basis bood, werd het ervaren als te druk in de hero-sectie en verwarrend qua navigatie.

Tweede Ontwerp -

Op basis van deze feedback ontwikkelde ik het tweede ontwerp. Dit ontwerp vereenvoudigde de hero-sectie met minder tekst en een duidelijkere call-to-action knop. Ik voegde een nieuwe sectie toe voor verschillende richtingen binnen de ICT-deeltijdstudie, zodat bezoekers makkelijker informatie konden vinden die specifiek relevant voor hen is. De doelgroep gaf echter aan dat er behoefte was aan meer contextuele informatie en snellere toegang tot specifieke inhoud. Om deze feedback te verwerken, heb ik de inhoud van de pagina’s uitgebreid en de navigatiestructuur verbeterd.

Derde Ontwerp -

Het derde ontwerp vond een betere balans tussen eenvoud en informatiedichtheid. De hero-sectie paste ik aan om zowel een call-to-action als essentiële informatie over de opleiding te bevatten. Ik verbeterde de navigatie verder met duidelijke secties en subsecties, en legde meer nadruk op testimonials van studenten en alumni. Gedurende dit proces ontving ik feedback van de doelgroep, die de informatieve en visuele elementen waardeerden.

Binnen ons groepje hebben we allemaal afzonderlijke design iteraties gemaakt. Hoewel mijn ontwerp niet werd gekozen als de uiteindelijke website, hebben we wel de beste elementen uit elk ontwerp samengevoegd. Zo zijn de secties over toelatingseisen, benodigde tijd en kosten uit mijn ontwerp overgenomen en geïntegreerd in het hoofddesign.

Conclusie

Het iteratieve proces resulteerde uiteindelijk in aanzienlijke verbeteringen in gebruiksvriendelijkheid, visuele aantrekkingskracht en informatiedichtheid van de Fontys ICT Deeltijd website. Door middel van constante feedback en aanpassingen heb ik een ontwerp gecreëerd dat zowel nieuwe studenten aanspreekt als bestaande studenten ondersteunt in hun studieproces.

BUSINESS CARD

Voorwoord

Voor deze opdracht moesten we een visitekaartje maken. Kies een functietitel die volgens jou past bij jouw interesses en (toekomstige) vaardigheden. Zet op de voorkant je persoonlijke informatie en op de achterkant je media-gerelateerde vaardigheden. Dit heb ik op Adobe gemaakt

Oriënteren

Ik ben eerst begonnen met een klein onderzoek. Hierbij heb ik gekeken naar andere business cards, voornamelijk op Pinterest en ook op: https://dribbble.com/search/business-card. Ik heb onderzocht wat belangrijk is op een visitekaartje en welke elementen ik zelf ook wilde toevoegen. Uiteindelijk heb ik gekozen voor een simpele look.

Belangrijke elementen op een business card zijn:

1. Naam: De naam van de persoon of het bedrijf moet duidelijk en prominent aanwezig zijn.

2. Functietitel: Dit geeft aan wat je rol is en helpt bij het herinneren van je vaardigheden en verantwoordelijkheden.

3. Contactinformatie: Inclusief telefoonnummer, e-mailadres en eventueel een fysiek adres.

4. Bedrijfslogo: Een herkenbaar logo helpt bij de branding en maakt je kaartje visueel aantrekkelijk.

5. Ontwerp:Het ontwerp moet consistent zijn met de branding van het bedrijf en professioneel ogen.

De naam van mijn business card is mijn eigen naam, dus leek het me leuk om met mijn naam te spelen voor het logo. Ik heb de eerste letters van mijn voor- en achternaam gepakt en mijn volledige naam ertussenin gezet. Dit concept had ik vaak gezien en het leek me wel passend.

Voor de binnenkant van de kaart had ik een ander creatief idee met mijn naam. Ik heb de S en de H samengevoegd, wat er volgens mij heel mooi uitzag. Daarnaast heb ik mijn telefoonnummer, e-mailadres en adres erbij geschreven.

Als feedback kreeg ik dat mijn logo te ingewikkeld was en onrust uitstraalde. Bovendien stond mijn informatie niet helemaal recht op de business card. Ik heb daarom de informatie recht uitgelijnd. Omdat ik het logo aan de binnenkant van de business card erg mooi vond, heb ik dit verder verwerkt en er een apart logo van gemaakt voor de buitenkant. Daarnaast heb ik aan de binnenkant van de business card wat meer ruimte gecreëerd.

Conclusie

Na onderzoek naar business cards, heb ik de belangrijkste elementen geïdentificeerd en gekozen voor een simpel ontwerp. Ik heb dit ontwerp gemaakt met Adobe, waarbij ik iteratief verbeteringen heb aangebracht op basis van feedback, resulterend in een professioneel en gebruiksvriendelijk visitekaartje.