Ontwerpen - mcphendriks/Profile-card-Michelle GitHub Wiki

Visitekaartje Ontwerpen

In de ontwerpfase neem ik ontwerp beslissingen en zorg ervoor dat ik precies weet wat ik moet gaan bouwen. Voordat ik begon te schetsen, ben ik eerst begonnen met het analyseren. Ik gekeken welke uitgangspunten belangrijk zijn voor het ontwerpen van mijn Visite kaartjes.

Wordweb Ik heb gebruik gemaakt van een wordweb om iets over mijzelf te vertellen

Sketch #1

In de ontwerpfase ben ik gestart met de onderstaande schets. Als achtergrond heb ik gebruikt gemaakt van een "bust in silhouette", dit hoort een abstracte oneline sketch van mijn gezicht te worden. Bovendien dient dit ook als klik-functie, na de klik komen de card in een pop-up naar voren. Deze cards lopen als automatische carrousel naar links. Wie ben ik story komt in de linker card in het midden, card schrijf ik een stukje over mijn ambitie en rechts komt de contactinformatie.

Sketch #2 ✏️

In mijn 2e sketch heb ik 4 zwevende kaarten op elkaar getekend met een flip-animatie-effect. In de kaarten wordt veel CSS toegepast, verschillende kleuren, een licht satijnen tintje dat ze een gevoel van diepte en een ruimtelijke uitstraling geeft,

Sketch #3 ✏️

In de derde sketch zie je een liggend/platte kaart, die vervolgens doormiddel van een hover-effect naar de voorgrond komt. De visuele kaart van een glas/3D-effect en wil daarnaast gebruik maken van lichte kleuren en soft tones, zodat de huisstyl kenmerkend is die ik toepas. In de linker folder komt "Who Is Michelle?" te staan, hierin vertel ik over wie ik ben en wat ik doe, rechts worden mijn dromen, ambities uitgeschreven, er wordt een click knop in verwerkt, waardoor de kaart 180deg flipt. Op de achterkant staan contact gegevens.

Eindontwerp 🔚 Tijdens de testfase heb ik feedback gevraagd van mijn medestudenten, vrijwel iedereen was enthousiast. Wel werd er geadviseerd om meer kleur te gebruiken. De lichte kleuren passen bij mijn huisstijl en het maakt mijn visitekaartje kenmerkend. Mijn kaartje heeft een hover effect ease in ease out en een rgba class effect, zodat de achtergrond zichtbaar is. Linksonder staat het woord "contact" dit woord bezit in click /flip function. Op de achterkant van de kaart staan contactgegevens.

Visuele hiërachie

Vanuit de workshop Visual Interface Design heb ik mijzelf de vraag gesteld "wat wil ik als eerste aan mensen laten zien". Deze aspecten heb ik genummerd. Onderstaand staat de schets weergeven met toelichting.

Een visitekaartje is een directe manier om mijn contactgegeven/informatie te verspreiden en een Ideaal middel om te netwerken. Daarom is belangrijk dat ze als eerste te weten komen wie ik ben. "WHO IS MICHELLE" als belangrijkste genummerd. Deze zin wordt nogmaals benadrukt, doormiddel van een CSS- self-typing text animation toe te passen. "WHO IS MICHELLE" wordt vervolgens herleid naar "about informatie " en "background informatie" 2e nr). Mocht deze informatie aantrekkelijk genoeg zijn kan de klant snel bij mijn contactgegevens komen op de rechterzijde van mijn visitekaartje. (3e nr) en (4e nr)

Variaties Schetsen Onderstaand heb ik 6 verschillende schetsen toegelicht, hierin heb ik visuele hiërarchie aangebracht doormiddel van groote, kleur/contract en witruimte.

1e schets: In schets 1 heb ik visuele hiërarchie aangebracht door middel van grote. De zin "" WHO IS MICHELLE" herleidt direct naar wie ben ik. De achtergrond krijgt een kleur waardoor de kaart zelf naar voren wordt gebracht. Doormiddel van een mouse-hover effect wordt de about story weergegeven.

2e schets: In schets 2 heb ik visuele hiërarchie aangebracht door middel van vorm en kleur contract.

3e schets: In schets 3 heb ik ervoor gekozen om de 1e (bovenliggende kaart) als eerste te voorzien van "wie ben ik". Doormiddel van en klik verschuift die weg uit het beeld. De 2e card is voorzien van "about" page en de 3 is voorzien van de contactpagina. In de bovenstaande kaart heb ik gebruikt gemaakte van contrast en grote.

1e schets: In schets 1 heb ik rondje geschets, deze rondje verspringen van belangrijk naar minder belangrijk informatie. Als eerste is maar 1 rondje in zicht. Ik heb visuele hiërarchie toegepast door middel contrast en grote.

2e schets: In schets 2 heb ik gebruikt gemaakt van visuele hierarchie doormiddel van grote, kleur en beeld contrast. De profielfoto trekt meteen aandacht, door middel van een click kom je meteen uit bij de contactgegevens.

3e schets: In schets 3 heb ik hiërarchie toegepast door middel van een hovereffect. Mijn naam (Hi, my name is Michelle) verschijnt als 1e in beeld, vervolgens wordt de muis gehoverd over de kaart en verschijnt er meer persoonlijke informatie in beeld.

FEEDBACK VISUELE HIËRARCHIE Vanuit squat C werd er feedback gegeven op het door mij aangepast visuele hiërarchie visitekaartjes. De collega's vonden vooral de vormgeving creatief en origineel bedacht. Daarnaast geven ze wel aan dat ik meer lettergrootse en kleur mag toepassen, zodat belangrijkste aspecten nog beter naar voren komen.