Mobile Experience: Michael Bierut

Building a mobile experience to showcase your design hero.

Link to full prototype (flow 3): https://www.figma.com/proto/TpKnZy8Zd9AUUbN7FmfunO/C-Lab-II-Website%2FMobile-Experience?page-id=0%3A1&node-id=31%3A302&viewport=243%2C48%2C0.23&scaling=scale-down&starting-point-node-id=31%3A136&show-proto-sidebar=1

Mobile Experience Initial Development:

Site Map

Left is Initial Site Map, while the right is refined and adjusted.

Wireframes:

Initial sketch

12 column grid system was created to help align content and create a cohesive experience across the board. On the left-hand side, I experimented with different layouts for the landing page. These initial wireframes helped lay the foundation of the user experience.

Interface Development:

Screens:

These visual interfaces help showcase Bierut’s work, his story, and the reason why he is my design hero. I used red, black, and white to create a sleek design that pays homage to his about page on the Pentagram Website.

Interactions: