Newsletter Subscription Design Challenge — A UI case study

This is the third design challenge of Adobe XD Daily Challenge. My second design challenge is here.

Challenge Description

Design & prototype a newsletter subscription experience for a website. Using the artboards below; add a logo, color, stock imagery. Then prototype the newsletter subscription user flow adding transitions.

Design template

My Design

Breaking down the challenge into pieces, here are what I need to do:

1. Add contents, including: Logo, navigation menu, Images, subscription text
2. Add colors
3. Add transitions

To summarize, I will mainly focus on two visual elements: color and type.

Step 1 — Get the feeling of this page

It is going to be a fashion site news page. Before starting, I need to have myself overall feeling on how a fashion site would be like.

1. To look through some other fashion sites to gain some inspirations, what’s to put in navigation menu and subscription popup.
2. To collect some fashion images to feel the color.

Images from google

Step 2 — Design logo and type for this page

I simply branded it ‘vanilla’ and used it as logo. Then for typeface, I finally chose Didot-italic because of its thin and varying strokes, and lowercase strengthens this feature. Didot-italic also makes the first letter ‘v’ beautiful that ‘v’ looks like a petal, which is a good response to the meaning of this word, I think.

Brand logo

Once I have had my logo, I quickly found out a typeface which could pair to my logo for menu and subscription texts.

I decided to stick to the template from challenge as they are good enough for my purpose :) .

Step 3 — Design the color

I pick up my color theme inspired by pictures in step 1.

Color theme

Finished Page

Without popup

With popup

Takeaway

• Before doing anything, collect some sources to get the mood of your design, quickly and roughly.
• Be sure typography matches your theme.
• Consider color as visual elements while also consider color as functional elements, buttons use a specific color, for instance.

Tools

Adobe XD, for design and prototype.

Adobe Color CC, for creating color theme.

Typewolf, for typeface. I like this site because I can find a story about each typeface.