Exercise 1
BUSINESS OBJECTIVES
Our business objectives are to develop productive co-working habits within physical and virtual small groups, get familiar with Miro, a virtual collaboration platform, and take notes and develop imagery for a group presentation at the end of class. This presentation will be a culmination of our work, where we will showcase our understanding of the assignment and our ability to meet the deadline.
CREATIVE OBJECTIVES
Become better acquainted with optimal site design and think critically about it. Work meta-cognitively (thinking about why you think something works or doesn’t) to explain your solutions. Consider user experience and standard site anatomy through an exercise.
PROCESS
We were gathered into a group of 3 to decompose a web page. Based on the lecture, we highlighted its anatomy and indicated what makes the site successful or unsuccessful. From there, we assigned roles for our team: a lead archivist, a lead presenter, and a lead designer to create and upload visual assets to our Miro board by the deadline. We then began our research of good and bad examples of a homepage, researching both desktop and mobile displays. Working directly on our Miro board, we then dissected our screenshots of good and bad design, highlighting the anatomy. Documenting along the way and finally presenting to the class 30 minutes later.
Exercise 2
BUSINESS OBJECTIVES
Businesses lose out if users cannot find critical information or perform essential tasks. IA is crucial in developing productive co-working habits within physical and virtual small groups. Get familiar with Miro, a virtual collaboration platform. Take notes and produce imagery for a group presentation at the end of class. Follow the assignment and meet the deadline.
CREATIVE OBJECTIVES
Consider user experience and fundamental site structure. Work collaboratively. Take notes and develop an understanding of the site map framework used in the foundation of every website. Become better acquainted with optimal site design and think critically about it.
PROCESS
We gathered into a group of 3 to develop the information architecture through a site map for an existing website below. We built a site map using Miro. From there, we assigned roles for our team: a lead archivist, a lead presenter, and a lead designer to create and upload visual assets to our Miro board by the deadline. We then began our research by scouring our chosen website—noting the links, pages, and content. We made sure to account for as much as possible in the time given for this exercise, which was 15 minutes. We collaboratively mapped out the site together on Miro. We documented our team's work along with the outcome. We then presented our findings to the class.
Exercise 3
BUSINESS OUTCOMES
Follow creative brief and meet deadlines. Adopt naming and organizing layers on a native file for use as if handing off or collaborating in an agile environment. Deliver wireframe with the final prototype. Indicate the purpose of the site within the first seconds of viewing. Employ variable fonts and consider their use as a standard practice for design on screen and on the web.
CREATIVE OUTCOMES
Consider how to convey tone through color, imagery, typography, and layout for mobile. Consider UX and fundamental UI while wireframing to sketch ideas and flow. Refine optimal site design and think critically about it while in practice. Use “creative constraints” to develop work with a fresh perspective.
CONSTRAINTS
Timeframe: 1 day. Task design and prototype a single-page mobile site in Figma with minimal navigation. Display 3 works by a randomly assigned designer, which you will be randomly assigned. Design a single-page site with five sections, viewable as you scroll, and a menu: header with hero image/text and menu, work 1, work 2, work 3, a footer (ex: additional links, socials). The design will be for a mobile-size iPhone 13 Pro. Cite all sources of content in the footer or captions.
PROCESS & DELIVERY
The process began with researching the assigned artist and turning to quickly sketching a wireframe to upload with your design. I incorporated standard mobile anatomy into the single scrolling site + menu with optimal interface and user considerations, including a header, body area, body text, captions, footer, hamburger navigation, grid, bread crumbs, and a hero image.
Wireframes
Components and Styles
