MidWave - Page Banner.png

MidWave Magazine

Overview

MidWave Magazine is a digital magazine that celebrates the beauty and irony of contemporary culture, offering both reflective and satirical takes on popular media, politics, social movements, me-culture, and more. 

The content featured on MidWave comes from regular and guest contributors. Anyone is welcome to share their creative works via any format, including personal essays, podcasts, blog posts, art showcases, reviews, and film reels. 

Lead UI/UX designer

My Role

Adobe XD

Co-Editors in Chief, Co-Art Directors, Webmaster, Marketing Lead

Primary Tool

Team

Person icon.png
pencil icon.png
Team icon.png

Purpose

MidWave Magazine started as a summer quarantine project, as many college students were forced to stay apart during the COVID-19 pandemic. Artists were especially impacted. The magazine was created to serve as a collective for student artists to continue sharing their works and engage with real-world events and people through a flexible digital medium.

The Goal

  1. To offer a space for student artists to share their creative works in a digitized format.
     

  2. To create a fully immersive experience as an art-centered magazine.
     

  3. To design a website that optimizes a wide myriad of content types, from written works to visual showcases.

Organizing Content

Because MidWave hosts various formats for mixed media, special attention had to be placed on the information architecture of the magazine. The homepage and landing page displays were first considered, followed by ways in which similar content types could be grouped in consistent article layouts.

MW Card Architecture.png

Inspiration & Research Summary

MidWave's design was inspired by several digital magazines and blogs that embrace lifestyle and pop culture trends. As a whole, we wanted MidWave to reflect the vapor-wave aesthetic that was all the rage in the early 2000s. It seemed fitting for the oftentimes nihilistic and sarcastic tones our articles would take on. At the same time, we wanted MidWave to be a wholly immersive experience that would pull readers into mixed media art. 

VISUAL EXPERIENCE

  • Horizontal, animated scroll

  • Immersive fullscreen images

  • Bold accent bars around key images and text blocks

  • Few (~2) articles on homepage headers

  • Infinite scroll for article listings

  • Fullscreen article headers

LIFESTYLE CONTENT

MEDIA BLOGS

  • Bright neon colors, early-2000s

  • Automatic homepage header scroll

  • Alternating featured and related articles

  • Stylized block quotes

LITERARY JOURNAL

  • Newspaper-themed layout: central column with side columns for featured & trending

  • Blocked text, limited visual media 

User Flow

To ensure that contributors have full flexibility in submitting their creative works (e.g. written, video, showcase), the magazine would be comprised of multiple 'channels' based on its theme:

  • Pop culture and media commentary/critique

  • Political and socio-economic topics (long-term and current events)

  • Celebration of self; me-culture; fashion, beauty, and lifestyle trends 

MidWave - User Flow.png

Wireframes - First Iteration

LV1 Homepage.png
LV1 Bisexual Lighting Landing.png
LV1 Article (Written).png
LV1 Conscience Landing.png
LV1 Article (Static Art - Landscape).png
LV1 Article (Podcast).png
LV1 Yay Me! Landing.png
LV1 Article (Static Art - Portrait).png
LV1 Article (Video).png

Key Concerns

  1. How can we distinguish types of written articles (e.g. original creative works like poetry and short stories from reviews/general articles)?
     

  2. How can we optimize article page types and still give artists multiple page types to feature landscape vs. portrait-styled images? 

Wireframes - Second Iteration

The second set of wireframes were adjusted to:

  1. Incorporate more mixed media on the headers of landing pages

  2. Enable header slideshows for articles dedicated to art showcases

LV2 Homepage.png
LV2 Article (Static Art - Landscape).png
LV2 Bisexual Lighting Landing.png
LV2 Article (Static Art - Portrait).png
LV2 Conscience Landing.png
LV2 Yay Me! Landing.png

Mockups

Homepage & Channel Landing Pages

Homepage - 1600px.png
Bisexual Lighting Landing.png
Conscience Landing.png
Yay Me! Landing.png

Article Layouts - All Channels

BL Article Page #1.png
 BL Article Page #2.png
BL Article Page #3.png
BL Article (Video).png
BL Article (Podcast).png
C Article Page #1.png
C Article Page #2.png
C Article Page #3.png
C Article (Video) Page.png
C Article (Podcast).png
YM Article Page #1.png
YM Article Page #2.png
YM Article Page #3.png
YM Article (Video).png
YM Article (Podcast.png

Final Website

Launched November 2020

MidWave Live Site Preview.png

Reflection

Designing with a team has been such a rewarding and insightful experience. My biggest takeaway from this project was mediating multiple design opinions and perspectives while staying true to the magazine’s identity and simplifying user experience. Art is multifaceted, and we wanted to retain the identity via the channels by adhering to thematic sub-color palettes. At the same time, it was crucial to maintain some kind of through line so as to establish a singular MidWave identity; I tried to achieve that by consolidating consistent layouts. 

My biggest challenge was accommodating as many multi-purpose layouts as possible. This was especially the case with written articles and art showcases. For written articles, we wanted a visual marker for articles vs. original creative work. For showcases, we wanted to give artists the option to decide whether or not they wanted a full-screen gallery, an inline gallery, a portrait slideshow, and/or a landscape slideshow. The creation of three article page layouts (featured above) was an effective solution for optimizing these choices, along with the addition of an inline slideshow component that allowed for mixed dimensions. While it took a lot of brainstorming to come up with solutions that would be efficient for the web developers to create, arriving at these final layouts and supporting creative expression were definitely worth it.