Paper User Interface Models
Posted
Waze physical paper model
Shazam physical paper model
Dualingo physical paper model
Shazam physical paper model
Waze physical paper model
| Educator/s: | Guy Haviv |
|---|---|
| Institution: | Bezalel Academy of Art + Design |
| Level: | Undergraduate |
| Duration: | 1 week |
| Category: | Design Methods, Experience Design, Graphic Design, Interaction Design, Motion, Typography, User Experience, User Interface, Visual Communication, Web Design |
| Filed Under: | 3-D, BA Program, Digital, Form-making, Four-year Program, Handmade, Human-Computer Interaction, Mobile Application, Process |
| Bookmark Project | |
Project Brief
Choose a well know mainstream mobile app, look through it thoroughly and identify & choose a user flow (a series of screens that add up to 1 meaningful action).
Recreate the chosen set of screens as physical models of height A3. Manually draw / cut & paste all icons, visuals, typography and other interface elements.
Look closely at each element on screen. What is its role? How is it structured? Which elements are contained within it? What’s above or below? Look closely at animating elements: do they help clarify some answers to the questions above? Why is each screen designed as it is?
Pay special attention to recreating the screen hierarchy: if a panel is above another panel, recreate that physically with a board over another board.
Learning Objectives
- Looking closely at user interfaces we interact with every day.
- Gaining a \'higher resolution experience\' when looking at interfaces. Being able to identify & appreciate different hierarchies, layouts, use of elements
- Gain a sense of hierarchy & motion as a foundation for future work on screen
- Provide a modern-day complementary exercise to traditional typography & formal paper paste-up projects
Deliverables
1. A series of 4-5 A3-height boards, sliced horizontally to an exact proportion of the chosen screens. Each additional layer or panel pasted above as a separate board.
2. An additional board with print-outs of the chosen screens.
Readings/Resources
See these projects for inspiration
Material Design
As part of the process of creating Google’s design language, the team at Google Design created a series of research physical models of icons, interface elements and screens. Their process is document in the video below.
https://youtu.be/rrT6v5sOwJg?t=43
Photoshop: as real as it gets
In 2008, Indonesian ad agency Bates141 Jakarta was asked to design an Adobe Photoshop print advertisement for the new (at the time) CS4 software. This is what they came up with:
https://blog.ormsdirect.co.za/adobe-photoshops-interface-in-real-life/
Reflections
The group of 25 students responded well with beautifully created physical models. It was a pleasure seeing the set on the class\' walls. A point for future improvement is to provide more structure to the discussion. We found it a bit tricky to critique in class as we mostly discussed the original screens hierarchy, whether it was understood and properly reproduced in 3d.
Additional useful activity in class would be to watch a complementary video or a longer form film such as the one provided with the book \'designing interactions\', or a set of short videos about digital product design.
