Emilie Ackerman

When it comes to designing anything, especially newsletters and websites, it is important to plan it out before actually creating it. Planning helps you visualize where elements will go and ensures that the final design is easy for users to navigate. The first step in this process is creating wireframes, which are basic visual guides that outline the structure of a webpage. Wireframes help designers focus on layout and functionality rather than visuals. After wireframes, designers create comps, which are polished mockups that show what the final website will look like before it is developed or coded.

When planning the newsletter and website pages for Pop Scene Media, I found this process extremely helpful compared to jumping straight into design. It allowed me to think more carefully about layout decisions and user experience before focusing on visuals.

Creating Wireframes:

When creating wireframes for each page, I first considered all the essential elements needed for the website. I included the Pop Scene Media logo, a navigation bar, a newsletter sign-up button, and a featured headline section to highlight the most important entertainment news. For the homepage, I also designed a carousel section to display the newest headlines, ensuring it would immediately capture the viewer’s attention.

Hierarchy and scale played an important role in my wireframes. I made sure that key headlines were larger and more visually dominant so users would naturally be drawn to them as they scroll. This helped me think more intentionally about how users interact with content and how visual weight affects attention.

Here is a wireframe I made for the Pop Scene Media desktop homepage:

Making the Comps:

When moving into the comp stage, I focused on translating my wireframes into a fully designed website using consistent branding elements. One of the most important aspects was typography. For Pop Scene Media, I used Inclusive Sans SemiBold for subheadings, Adelle Sans Heavy Italic for the logo, and Poppins for body text. Using consistent fonts is important because it helps establish brand identity and makes the website more recognizable.

I also paid close attention to color consistency. Pop Scene Media uses a bright pink, yellow, and white color palette. Keeping these colors consistent across all pages helped strengthen the brand identity and create a cohesive visual experience.

Here is the comp I made for the Pop Scene Media desktop homepage:

Designing The Mobile Page: (Wireframe and Comp):

When planning the mobile wireframe and comp, I followed the same overall design approach but focused on how to optimize the layout for easier navigation and readability on smaller screens, especially on mobile devices.

Here is the mobile design wireframe:

When designing the mobile homepage wireframe, I considered how navigation would need to change from desktop to mobile. Since a standard top navigation bar would not be practical on a smaller screen, I designed a hamburger menu that users can tap to access all sections of the site. This improves usability and makes the layout more efficient for mobile users.

I kept the carousel section consistent with the desktop version because it still functions well on mobile and remains easy to interact with. However, I redesigned the “Trending Summer Pieces” section to improve readability. Instead of separating articles with thin pink lines, I grouped content into boxed article previews arranged in two columns. This makes the layout clearer and easier to scan on a smaller screen.

I also added an interaction state where, when a user clicks on an article, it changes from light pink to hot pink. This provides visual feedback and helps indicate which content has been selected.

Here is the mobile design comp:

The mobile comp reflects these wireframe decisions with added visual design elements such as color, typography, and branding. The goal was to maintain Pop Scene Media’s identity while ensuring the layout remains clean, readable, and user-friendly on smaller devices.