1 WEEK REDESIGN: BEautiful Subscription Page

Redesigned Subscription Page

12/4/2022: One-Week Redesign

It's been a week since I first designed the Subscription page for the female empowerment, beauty, and wellness brand, BEautiful. The original version is at the bottom of the case study. Below is a reflection on what I learned during the week between these two versions of the same webpage.

Last week I started to:

  • use alignment grids effectively

  • "break" the rules by using a 16-column grid to design instead of the traditional 12-column grid

  • create my own design system with guidelines for everything from choosing header, subheader, and body font sizes to treating the space between elements like elements of their own

Key Learnings:

White space can be given a uniform height and width just like font sizing.

  • This is one of the first rules of my own design system: "For forms, the height of the input field should be double the height of the font. Ex: 16px font size = 32px height of input field

  • This realization made me start thinking about design differently. Instead of arranging just text and images, I started arranging the white space too.

Do not include content for the sake of content.

  • There was no reason for there to be a paragraph under the images on the right. In fact, I filled that box with Lorem Ipsum instead of making it up because I didn't know what more information was needed.

The fewer the elements, the easier it is to guide the user's eyes to key information.

  • The initial design had about 7 elements total (counting all items in the navbar as one group).

  • The new design has only 5 elements, shortening the amount of time it takes the user to understand the information on the page.

  • The elements in the new design are laid out in a symmetrical fashion to give the design a sense of harmony.

This week I hope to:

  • Receive an invitation to interview with a company or agency. (Check me out at dominique.squarespace.com)

  • Learn how to incorporate the Rhythm, Continuity, and Closure Gestalts more effectively in my designs.

  • Dive into animation for UI designers.

The original web design layout.

More by Dominique Terry

View profile