DISSECT
SINGLE
WEB PAGE
Learning to Become Familiar with Website Anatomy
To highlight the anatomy of a single page of a website and indicate what makes it successful.
Share 4 screenshots: Poor example of single page site design, desktop + mobile; Good example of single page site design, desktop + mobile.
Dissect a good example for desktop + mobile.
Present by simply clicking on the presentation mode icon at the top right of the screen on Miro. Use the cursor to go back and forth between boards a-d.
DIRECTIONS:
For the Interaction Design course, this exercise aims to help students develop productive co-working habits within physical and virtual small groups. It is also designed to familiarize them with a collaborative online platform called Miro. The exercise required students to take notes and create visual content for group discussions and presentations related to their assignments.
The creative objectives included improving students’ ability to think critically about optimal site design and engaging in meta-cognitive reflection—considering why certain solutions work or do not work. Additionally, this exercise encouraged students to consider user experience and standard site anatomy as a whole.
OBJECTIVE
The process of dissecting a single page of a website began with assigning students to different groups. One of the groups included Carly McCormick, Myles Harris, and Kathyvan Do. Roles were assigned as follows: Kathy became the lead archivist, Myles took on the role of lead designer, and Carly was designated as the lead presenter. Together, the group collaborated to create and upload the visual assets to the Miro board before the deadline.
PROCESS
The professor uploaded one good and one bad example to the Miro board for each group to save time on the research process. From that point on, each group was responsible for finding one example of a well-designed homepage and one example of a poorly designed homepage. This exercise requires both desktop and mobile examples.
In the initial examples, the group analyzed HoodAMath.com, focusing on navigation, calls to action, featured images, body text, and using a single-column layout. One notable observation was that the poor example featured ads linking to other math websites, which directed users away from the site and toward its competitors.
PROCESS — BAD DESKTOP EXAMPLE
After examining the desktop version, the group moved on to analyze the mobile version of the site according to the instructions in the exercise brief. Similar to the poorly designed desktop example, the mobile webpage for HoodAMath.com has almost the exact same layout. This suggests that the website initially had a mobile design that was not modified to better accommodate desktop users, indicating that the mobile app is the only format currently available for this website. While there is still a call to action, a featured image, and body text, the additional navigation sections that link to different websites are missing, unlike on the desktop version.
PROCESS — BAD MOBILE EXAMPLE
PROCESS — GOOD DESKTOP & MOBILE EXAMPLE
The group analyzed the Museum of Contemporary Art Chicago’s website, focusing on its effective design for both desktop and mobile users. The homepage showcases a variety of essential website features. Both versions include a clear navigation bar that directs users to different sections of the site, such as visiting information, the About section, exhibits, events, and current collections.
At the top of the page is a prominent call to action, encouraging users to purchase tickets or support the museum. Additionally, there is another navigation bar for easy access. The site features a clear hero image and header area, which serves as a news section and highlights current events. The mobile version mirrors the desktop layout, but the website is specifically designed to fit smaller screens.
REFLECTION - Better Understanding User Navigation
The exercise of dissecting a single page of a website was informative, as it encouraged us to consider web design from a constructive perspective. This activity helped students understand how users navigate websites differently on desktop and mobile devices, leading to a better comprehension of user flow. It also highlighted what works and what doesn’t in creating a user-friendly experience.
