It’s been a while since I did anything related to Satchel Stone, so I thought that creating an email subscription pop up would be a terrific idea. Malia and Lauren have been missed!

Yes, I have chosen names for the sisters. I figured it might be wise to think of their needs in terms of any other potential Satchel Stone related things coming up.

The basics. Shout out to the Content Generator plugin from Adobe XD.

I wanted to show what happens after a user has clicked the Call-To-Action (CTA) button, so I created two screens: one for the initial sign up (the artboard on the left) and another for the confirmation screen (the artboard directly below it). The artboard on the right is where I wanted to create the actual design of the sign up screen.

The screen is starting to come together, minus my sparse copy. Haha.

I started to read up on accessibility practices for design as I know very little about it. When I took the Intro to UI/UX course, my teacher spoke a bit on how accessibility is important but said that she tends to go into detail about it more in the Intermediate UI/UX course. Since I was curious and knew that it would be very useful to learn when creating user experiences, I began my search.

The screenshot above is from the website random a11y. It’s an app that provides random colour palettes and allows you to upvote or downvote the combinations. As a plus, it also gives you an accessibility rating. I wanted the colours to be bold and catch the user’s attention, but also provide the right amount of contrast.

I found this cool, stylish yet bold typeface called IvyMode that I found though Adobe Fonts. After playing around with it a bit, I used IvyMode Bold for the heading, IvyMode Light for the message below, and IvyMode Regular for both the email address shown and the button text.

One of the other tools I used was Accessible Colors. The website seems to be down at the moment, but there are other websites similar to it that you can use as well. You put in the hex code and size of the font you’ll be using along with the hex code of the background and it gives you a rating. Based on that rating, it will tell you if it’s considered accessible or not.

As for the background, it looks better the way it is cropped on Instagram versus the full size version. I switched the button colour from Robin Egg Blue to Purple Heart and decided to make the group of circles behind the card Robin Egg Blue. I felt that leaving the colour out would have been a problem, but I wanted to incorporate it.

It’s funny how devices will make colours look different. As of right now, I’m looking at it on a laptop and Robin Egg Blue is indeed blue. However, when I view it in the Squarespace app on my iPhone, it looks more green than blue. I wouldn’t normally use these colours together, but it was a nice step out of my comfort zone!