UX Prototyping
design principles

Mick McQuaid

2025-01-21

Week TWO

Review Design thinking

• a lot of really good work
• please export HEIC files to png or jpg so Canvas understands them
• please export pdfs in such a way that Canvas displays them properly
• terrific sketching—keep it up—sketching is so important
• mostly well organized presentations
• a lot of good app ideas
• one person included follow-up thoughts, which was great and so important!

Groups

I’d like one person from UXerrrs or Software Designers to switch to Pink Pony Club, which currently has only two people. There’s too much work in the projects for two people. It would actually be ideal if one person from each of those two groups would switch. That way, we would have almost all groups of four, which is the ideal size. (Sometimes groups of five have communication problems.)

If no one switches before milestone 1 is due, I’ll randomly choose people to assign! Be warned!

design principles

I want you to familiarize yourselves with four sets of design principles to keep in mind during the milestones.

1. Apple’s Human Interface Guidelines (HIG)
2. Material Design from Google (currently Material 3)
3. Fluent Design from Microsoft (currently Fluent 2)
4. Inclusive Design from Microsoft

Use any one or any combination of these guidelines in developing your prototypes. Let’s look at their websites, which are always changing so I don’t want to make slides out of them. Instead, google the above names.

While examining the sites

1. Look for things like Foundations, Principles, and Getting Started on the first three sites (the inclusive design site is organized differently)
2. Look for differences in emphasis and word choice between the three companies (Apple, Google, and Microsoft)
3. Reflect on why they may differ
4. Pick two things, such as accessbility and typography, that are represented on every site and see how their presentations differ

File submission

• Create a website that will be used for the entire semester. You can use Framer to do so, or Github pages, or any other system
• Add seven pages to the website, one for each milestone (just the first one is needed now)
• The page for milestone 1 should contain your report or a link to it

‹Framer tutorial›

I’m high on Framer because of its excellent JavaScript output, which cuts down on cycle time. You will often hear me say that cutting down cycle time is a high priority in rapid prototyping. Framer easily beats Figma in this regard, but Framer only recently acquired a free tier, so Figma has captured most of the mindshare. I want to expose you to Framer as well. The goal of this tutorial is to create a Framer website.

Framer’s own fundamentals course

• Visit framer.com and navigate to Resources > Academy > Framer Fundamentals
• The direct URL is https://www.framer.com/academy/courses/fundamentals
• The first few screencasts should be sufficient
• The course is not yet complete, but you just need a framer website as a container for Figma prototypes and pdfs
• (You’re also free to use a different website builder)

‹Figma tutorial›

Figma tutorial

• Visit help.figma.com and navigate to Figma for Beginners (near the bottom of the page)
• There are four beginner lessons—try to do all four
• Even if you’re advanced in Figma, it may help to skim these lessons to pick up things you may have missed or forgotten

‹Figjam tutorial›

FigJam tutorial

• Visit help.figma.com and, from the top menu, navigate to Product documentation > FigJam > Tour the interface > Guide to FigJam
• You can use FigJam to collaborate with your team
• Try to do as much as you can on the Guide to FigJam page
• How much you do will determine how extensively you can use FigJam to collaborate

END

Colophon

This slideshow was produced using quarto

Fonts are League Gothic and Lato