UX Prototyping
design principles

Mick McQuaid

2023-08-29

Week TWO

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
2. Material Design from Google
3. Fluent Design from Microsoft
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.

‹pause to view design principles›

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.

‹Figma tutorial›

The goal of this tutorial is to create a simple prototype to put into the Framer website.

END

Colophon

This slideshow was produced using quarto

Fonts are League Gothic and Lato