UI/UX Curriculum: Assignment 1

ASSIGNMENT #1: WAYNE THIEBAUD

A1 - overview.jpg
 
 
A1 - process.jpg
 
 

01: PROMPT & RESEARCH

For Assignment 1, Nina wanted the students to build a page for the Wayne Thiebaud exhibit at the Manetti Shrem University Art Museum for the students to learn HTML, CSS and Flexbox, and media queries.

  • two layouts (desktop and mobile)
  • on desktop the pictures should show up either all six in a row, 4 on top and 2 on the bottom, 2 rows of 3, or 3 rows of 2
  • some kind of header and footer
  • pages should include pictures of the exhibit (shown here) 

I referenced many museum's websites to create the design, but mostly referenced SFMOMA's exhibition sites to come up with my final design.

A1 - prompt.jpg
A1 - research.jpg
 

02: BASIC ITERATIONS

Following Nina's requests, I came up with 4 different desktop skeletons as well as 2 mobile ones. 

FEEDBACK

  • Use real images instead of boxes with x's inside of them (Nina wasn't sure the students would understand they were supposed to represent images)
  • Add a background color
  • Add text about the exhibition at the top
  • Add footer information: opening hours, free to the public, exhibit is running through May 13
A1 - basic iterations.jpg
 

03: COLOR ITERATIONS

Using Nina's feedback, I elaborated on my previous iterations. 

MISCOMMUNICATION! & How it was Solved
So I had thought that Nina wanted different designs for the students to pick from, so I made 3 different designs that they could create. However, Nina only wanted one design with 3 different media queries, not 3 different iterations of the design. Taking this new information, I decided on my yellow iteration, made it pink, and created the 3 media queries for it. 

A1 - color iterations.jpg
 

04: FINAL PRODUCT

 
A1 - final product.jpg
 
 
 
A1 - final product (tablet + mobile).jpg