Week 7 – Quick Prototyping, P2 Check In and Coding From Life
Prototyping in Figma
Prototypes can be helpful to make sure your navigation is clear and to share a website design before it gets programmed. We’re going to create a very basic prototype in Figma.
Have your design ready, every page of your site should be finished and labeled. Make sure your pages are labelled appropriately.
Select the actionable item (example: a link, a button) and select “Prototype” on the right. Then select “On click” under interaction and then select your targeted artboard. Do not use any animations, simply maintain “instant” under animation.
If your navigation is the same throughout all your pages, create an instant out of it by grouping the items together, right clicking it and selecting “Create Component.” This is a symbol that can be reused throughout. If you need to change it, you can edit it once and it will get updated throughout your whole design.
Task 1 – Complete by 11am
Create a clickable prototype of your current design, making sure that your navigation is addressed. It’s OK if you don’t have all the pages finished yet.
Working in small groups, share your project prototype and have a discussion about your work. To help kick you off, go through these questions for each person.
Group 1: Pauline, Kyndall, Kyle
Group 2: Alex, Conor, Byron
Group 3: Kevin, Fred, Ed, Matt
Kick Off Questions
- What is the concept of the website?