#011 - Flash Message

Originally posted on Instagram on September 20th, 2018

I had this great idea to create a success/error message for a steps recording app. It was the first idea that I had out of the gate and I ran with it.

2018-09-20 - Flow - #dailyui - #03. Please ignore my horrible Pen Tool skills.

2018-09-20 - Flow - #dailyui - #03. Please ignore my horrible Pen Tool skills.

2018-09-20 - Flow - #dailyui - #04

2018-09-20 - Flow - #dailyui - #04

2018-09-20 - Flow - #dailyui - #07

2018-09-20 - Flow - #dailyui - #07

2018-09-20 - Flow - #dailyui - #10. Why the dark BG?

2018-09-20 - Flow - #dailyui - #10. Why the dark BG?

I didn’t like how it was turning out. In fact, I hated it. It seemed like I couldn’t get it close to the vision I had in my head of what it should look like so I decided to turn it into a “connected/not connected to wifi” success/error message.

2018-09-20 - Flow - #dailyui - #12

2018-09-20 - Flow - #dailyui - #12

2018-09-20 - Flow - #dailyui - #14

2018-09-20 - Flow - #dailyui - #14

At first I stuck with 100% red and green, but found it was too harsh against the white background. I adjusted the opacity on both of the rectangles that the text was on but kept the circles that overlap the wifi icon at 100%. Lastly, I moved the circles from the bottom right corner of the wifi icon to the top right.

2018-09-20 - Flow - #dailyui - #15

2018-09-20 - Flow - #dailyui - #15

FINAL.

FINAL.