ASSIGNMENT #1: WAYNE THIEBAUD
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.
02: BASIC ITERATIONS
Following Nina's requests, I came up with 4 different desktop skeletons as well as 2 mobile ones.
- 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
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.