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.
Step 2
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.
Step 3
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.
Activity
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.
Task 2
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.
Prototyping in Figma
Activity
Task 1 – Complete by 11am
Task 2