GUIs Through Art History

💬 Description

In this class, we’ll explore new styles of graphical user interfaces (GUIs) inspired by art history movements. Each student will choose and research a movement in art history: rococo, surrealism, and impressionism. What makes each movements unique? How might we bring those styles or impressions into GUIs? Based on that research, we will design interfaces for common products inspired by that movement. With each exploration, we’ll workshop them together to define a modernized version.

🔎 I hope to explore the following questions in this class...

• Why and how do trends resurface and develop?
• How is good taste defined in each movement? Who defines good taste?
• How can we push the boundaries of modern interfaces?

🏆 Objectives

• Explore alternative visual forms of graphical user interfaces.
• Develop an understanding for how trends evolve

🤔 Who is this class for?

Designers or developers who want to push the boundaries of user interfaces.

👀 What can you expect?

Here's a peek at what you can expect from the class! This is recording of a class exploring the surrealism and rococo movements.

🏗️ Structure

• 6-8 students
• 1.5 hour sessions for 5 weeks
• ~1 hour of work outside weekly class

🛠️ Tools

• Figma
• Laptop

🗓️ Schedule

Lesson 1: Introduction

• 30m: We'll research the history of graphical user interfaces together and create a collective timeline in Figma.
• 30m: We'll collect exemplary pieces from three art movements in history: rococo, cubism, and surrealism. After we collect enough pieces, we'll define the major themes in each art movement. - (15m) Reflect on what we observe. What patterns do you observe across each movement? Why and how do trends resurface and develop?
• (15m) Decide what movement you want to research further during the week.

During the week: Do additional research about your movement. Create a moodboard of inspiration. Continue to collect themes and trends from that movement.

Lesson 2: Exploration

• 20m: Quick popcorn around the room to share what we learned during the week.
• 60m: Explore the visual style of a "button" in different art movements. We'll work through everyone's movements and iterate on ideas together.
• 10m: Reflect on themes we notice. Do these visual styles affect the affordance of the button?

During the week: Explore 5 additional UI components using your chosen movement.

Lesson 3: Composition

• 30m: Everyone shares their UI components from the week and we do a quick critique!
• 50m: Everyone selects a product idea from a random selection of products. The selection will mostly be default apps that are on your phone! We'll get into groups and each group will draw at least 4 explorations of the UI using a selected art movement. The explorations should range from dated → contemporary.
• 10m: Share the explorations. Each group will share their explorations with the class!

During the week: Design a product using your selected art movement. Create at least 3 visual explorations for the product. Don't worry about edge cases. For each exploration, write a blurb about your thought process.

Lesson 4: Iteration

• 60m: Everyone will share their 3 visual explorations. How did your art movement inspire each iteration? We'll critique each one with the group and give recommendations for which direction to explore further.
• 30m: We'll all iterate on everyone's visual explorations together and help each other build the ideas to be stronger.

During the week: Based on the design critique, choose 1 visual exploration to explore. Continue to explore and refine that idea.

Lesson 5: Refinement

• 60m: Everyone will share their final exploration along with their journey. We'll also critique every concept and provide ideas for how to make it stronger!
• 30m: Reflect on what we all learned during this class. How do we define good taste? What elements from our explorations could we see in modern UI?

📚 Readings

I plan to find a collection of readings to complement each lesson.