RDAM Event Space
Figma Prototype & Splash Screen Animatie
Embedded Files
Introductie
Introductie
WAT GA JE MAKEN?
WAT GA JE MAKEN?
Je hebt al een hoop materiaal gemaakt. Maar nu ga je ook nog de ontwerpen die je hebt gemaakt in Adobe Illustrator uitwerken in Figma zodat er een serieus prototype gaat ontstaan. De pagina's worden aan elkaar gelinkt en je zal de app gaan voorzien van een geanimeerd Splash screen. Het is zo tof om te zien hoe alles samenkomt in Figma en gaat werken. Net echt!
TIJDSDUUR:
TIJDSDUUR:
Deze periode is 9 weken. In de laatste week heb je een toets en een eindopdracht.
Insta Carousel [Ps] - 2 lessen
Leerdoelen
Leerdoelen
Je kunt je ontwerpen in Figma importeren.
Je kunt met interactie de frames aan elkaar koppelen.
Je kunt met animatie de frames in beweging zetten.
Materialen/Benodigdheden
Materialen/Benodigdheden
Jouw ontworpen artboards
Figma, of Adobe XD
Werkvorm
Werkvorm
De theorie wordt door je docent klassikaal uitgelegd.
Je gaat deze opdracht individueel uitvoeren.
Disclaimer
Disclaimer
Let op: In deze opdracht werken we met Figma, maar je kunt alles wat we doen ook gewoon in Adobe XD doen, dat lijkt heel erg op Figma. Voor XD hoef je geen account aan te maken, en je gegevens worden nergens opgeslagen. Als je dat fijner vindt, kun je de stappen dus ook in XD volgen. Zie het gebruik van Figma meer als een tip, niet als verplichting.
Theorie
Theorie
Hoe je in Figma een prototype maakt:
Eerder hebben je schermen ontworpen van de app voor Event Space Rotterdam gemaakt. Laten we nu alles bij elkaar zetten in een interactief prototype.
Wat is een prototype in Figma? Een prototype is een testversie van je app. Hiermee kun je visualiseren hoe de uiteindelijke app eruit gaat zien. Je kunt er paden mee instellen, interacties uitproberen en ideeën testen. Handig, want dan weet je precies wat je wilt voordat je echt gaat bouwen!
Je kunt in één bestand meerdere prototypes maken en die op verschillende pagina’s organiseren. Begin met een kopie van je bestaande ontwerp-pagina om je prototype op te bouwen.
Importeren van Adobe Illustrator Artboards
Importeren van Adobe Illustrator Artboards
In Illustrator kies je voor File, Export, Export for Screens. Bij de bestandstypes kan je aangeven dat je SVG wilt hebben. Dit zijn Scalable Vectgor Graphics, een bestand wat Figma heel prettig vindt. Nice.
Zorg dat je alle Artboards apart exporteert.
Log in bij Figma en kies vanuit het Figma menu voor File, en Place Image. Selecteer een Artboard en plaats deze door te klikken in het canvas.
Prototypes maken
Prototypes maken
Ga naar de Prototype-tab - Rechts in je scherm zie je de 'Prototype'-tab. Klik daarop om over te schakelen naar de prototype-modus.
Maak verbindingen tussen schermen - Hiermee kunnen gebruikers door je prototype navigeren, net zoals in een echte app. Een prototypeverbinding bestaat uit drie onderdelen:
Hotspot - waar de verbinding start.
Verbinding - de route en interactie-instellingen.
Bestemming - het scherm waar de verbinding naar leidt.
Verbindingsopties en interacties
Verbindingsopties en interacties
We willen bijvoorbeeld van het sign in knopje naar de reserveer pagina. Selecteer het icoon door erop te dubbelklikken, en trek vervolgens een pijltje naar de bestemming (de reserveer pagina). Klik en sleep om de verbinding te maken.
Nu kun je de details van je interactie aanpassen: kies triggers zoals “klik” of “hover”, en voeg een animatie toe om de overgang te verbeteren.
Geanimeerd Splash Screen
Geanimeerd Splash Screen
Als iets beweegt, wordt het meteen leuker, toch? Dat zie je tegenwoordig overal terug. Als je een app maakt die opstart op een mobiel, is het normaal dat je eerst een coole animatie ziet voordat je in de app zelf terechtkomt.
Nu kun je in Figma geen echte animaties maken, maar je kunt het wel zo laten lijken in je prototype! Het begint allemaal met een goed plan. Denk van tevoren goed na over wat je wilt laten zien en maak een (digitaal) storyboard om je ideeën uit te werken. Zorg ook dat je de juiste assets klaar hebt staan.
Daarna kun je met de Auto Animate-optie overgangen toevoegen tussen je schermen. Het lijkt dan net alsof je een animatie hebt gemaakt. Supertof en het maakt je prototype echt een stuk dynamischer!
Deel je prototype
Deel je prototype
Klaar met bouwen? Deel je prototype met je team door een link te genereren onder “Delen”. Selecteer dat iedereen met de link het bestand kan zien.
Opdrachtomschrijving
Opdrachtomschrijving
Maak een volwaardig prototype en deel deze met je docent
Maak een volwaardig prototype en deel deze met je docent
Voor jouw gekozen onderdeel van Event Space Rotterdam maak je de optie om te reserveren. Hiervoor moet je minimaal kunnen inloggen, een boeking maken en een scherm te krijgen met een bevestiging.
De navigatie moet goed verlopen, logisch werken. Niet alleen voor jou maar ook voor de gebruiker. Juist voor de gebruiker.
Je hebt hier in totaal 2 lessen voor. Probeer zelf in te plannen hoe je het aanpakt.
Tips/Bronnen
Tips/Bronnen
Page updated
Google Sites
Report abuse