From my foundations of interactive design course held in 2024.
Objectives / Goals: Create a high quality portfolio ready interactive digital mock up of your app design.
Now its time to up the ante! In this module we’ll be finalizing our app designs by making high fidelity interactive prototypes in Figma. These should be refined to the point that you’d be proud to include them in your design portfolio and happy to show them to a potential employer during an interview. Its a lot of work, but there’s good news, too: You only have transfer one of your paper prototypes to Figma, and you’ve got more time for this assignment.
Keep in mind these requirements:
- Create a new Figma design file, not a figjam. Your HiFi prototype must be submitted with Figma. Work made using other tools will not be graded.
- App needs 10+ unique frame layouts.
- Avoid spending too much time on sign up / log in pages, as these are obvious and do not contribute to the uniqueness of your app design. These sign up / log in pages are not necessary, and don’t count towards your 10, though depending on your app a singular user profile may be necessary and does count as 1.
- Also note, a frame in this assignment and rubric means a full page view. In Figma, somewhat confusingly, a page is an entirely different spread and a frame is just a content box. We are looking for 10+ ‘master’ frames that take up the entire devices screen (and which may well include several other smaller frames).
- Link all the frames of your Figma Design using the prototyping tools so that buttons in your UI click through to new app views. The guest lecture moves through this process rather quickly, so you may find this additional prototyping tutorial helpful.
- You’ll need some kind of global navigation – typically found at the top or bottom of the page. While this navigation may be visible on all pages, there are circumstances where it may not be practical on some views. You may find you actually need two nav bars, one top and one bottom, but then both may not be necessary, depends on your design and app complexity.
- Navigation should work forwards and backwards on every page – the user should never get stuck in a ‘dead end’ on your UI. Consider having a back and / or home button in your global navigation.
- App should be designed for Apple iPhone 14 & 15 (use the template frame) and include at a minimum the top status bar from iOS 17 (search for iOS 17 UI kit in the community section).
- App should be a realistic representation of how you envision it – do not use placeholder content or proxies for anything. Design all necessary symbols / icons / logos. You can do this within Figma or Illustrator if you have that proficiency already.
- Do not use photo place holders, find appropriate photos. DO NOT USE COPYRIGHTED CONTENT. Either take your own pictures or search for images that are creative commons / licensed for reuse. Flickr is a good place for this and also has licensing filters.
- Do not use text place holders. Write meaningful demo text. For instance, do not use “Lorum ipsum dolor sit amet!” for the opening line of a social media post, but something relevant to your app like, “Join us on Zoom next time!”
- App should successfully implement visual style.
- App should successfully implement the principles of interaction design.
l33t mode (optional):
- Include scrollable content – great for layouts displaying lengthy text, lists of posts, image galleries, etc. Here’s how to set up up a frame to scroll
- Use overlays to show alerts, onscreen keyboards, expanding menus, etc. Here’s how to use overlays
Additionally, when you are finished with the prototype, make a 2-3min walk through video of your app. Narrate how you envision a user using your app and include what inspired your design decisions. You can use any screen capture software (I recommend quicktime player on Mac or the Vimeo plugin for Figma), just make sure the mic is enabled. More info on screen recording on the Essential Tutorials page. You can edit your video with whatever software you are comfortable with (Final Cut, Premiere, iMovie, etc) – if you’ve taken, or are taking, DIG2030 this should be a breeze. If you’ve never done video editing before, I recommend this quick 1.5 hour course on Adobe Premiere. Name this video hifiLastname.mp4 and upload it here.