Roll for UI

Inspired by Adventures in Aardia (Roll for Sandwich), welcome to roll for UI! This exercise is for any designer, developer, researcher, or writer looking to practice more visual skills, test yourself on constraints and time, or to find more visual inspiration. Feel free to replace any category, die, company, etc. to your liking and ability.

This exercise is for you if:

You are eager for a different way to gain inspiration
Want to get familiar with using Figma and different component libraries and UI kits
You're looking for an alternative to Figma courses
Want a challenge in visual constraints and time
Looking to refine your design process and thoughts
Gain more confidence in your design decision making
Create your own mini case studies to practice writing
Watch yourself improve every week!

How it Works:

Step 1.

Orientation - D6

Orientation is the format and size of your frame. Taken from Figma frame formats.

Step 2.

Roll the number from your orientation roll listed below.

For example, if you rolled a 1, you will now roll D8 for iPhone.

1. iPhone - D8

1. iPhone 14 & 15 Pro Max

2. iPhone 14 & 15 Pro

3. iPhone 13 & 14

4. iPhone 14 Plus

5. iPhone 13 mini

6. iPhone SE

7. iPhone 8 plus

8. iPhone 8

2. Android - Coin flip!

Android Small

Tails

Android Large

Heads

3. Tablet - D4

1. Surface Pro 8

2. iPad mini 8.3

3. iPad Pro 11"

4. iPad Pro 12.9"

4. Desktop - D6

1. MacBook Air

2. MacBook Pro 14"

3. MacBook Pro 16"

4. Desktop

5. Wireframe

6. TV

5. Watch - D4

1. Apple Watch 40mm

2. Apple Watch 41mm

3. Apple Watch 44mm

4. Apple Watch 45mm

6. Archive - D12

1. iPhone 13 Pro Max

2. iPhone 13 / 13 Pro

3. iPhone 11 Pro Max

4. iPhone 11 Pro / X

5. Google Pixel 2

6. Google Pixel 2 XL

7. iPad mini 5

8. Surface Pro 4

9. MacBook

10. MacBook Pro

11. iMac

12. Macintosh 128k

Step 3.

Style - D10

Current, old, trendy, styles through the ages! Find component libraries or UI kits on Figma for faster iteration.

Style - D10

1. Y2K

2. Skeuomorphism

3. Neobrutalist

4. Minimalism

5. Flat design

6. Bauhaus

7. Neumorphism

8. Glassmorphism

9. Retro Futurism

10. Human interface guidelines 1987

Step 4.

Company - D20

Homepage of company rolled.

Company - D20

1. LinkedIn

2. DoorDash

3. Uber

4. Starbucks

5. Internet Explorer

6. AOL

7. Facebook

8. YouTube

9. Tik Tok

10. Instagram

11. Spotify

12. Reddit

13. Slack

14. Venmo

15. Notion

16. Amazon

17. Mail

18. Netflix

19. ParkMobile

20. Venmo

Read the Roll for UI Case Stud!

Weekly Sprints

File organization

Monday - Inspiration finding
Tuesday - Sketches/low fidelity
Wednesday - ideas should be forming for your direction
Thursday - Test out your favorite ideas in whatever format of fidelity you're comfortable with at this point
Friday - By now you should have some mid-fidelity frames forming
Saturday - Pick your best iteration and polish it up!
Sunday - Final touches and share! Or don't, live your life

Online RPG D20 dice roll resources

Feel free to use your own dice tower, DnD tools, or any online resource!

Common Questions

Why weekly sprints?

Sprints are commonly used professionally, as well as you get into your own rhythm working in these constraints.

Do I have to do the same roll?

No, you can do this exercise in as long of time, or short of time as you like. You can also work in your own roll.

Why do I have to write a mini case study?

This will help you reflect on your choices, and be a written log of how much you've grown!