#006 - User Profile

Originally posted on IG Stories on September 7th, 2018.

I set a goal a few months ago to step out of my comfort zone and try to design something for the iPhone X instead the 5, 6, and 7 that I had previously done. When this project landed in my inbox, I thought it was now or never and so I set out to complete it.

2018-08-30 - Flow - #dailyui - 02

2018-08-30 - Flow - #dailyui - 02

This is what I started with on August 30, 2018. I worked at my job throughout the weekend and while I did work a little bit on this on September 1st, I was also VERY tired and had a minimum of 3 hours of sleep/day that entire weekend.

2018-09-01 - Flow - #dailyui - 08

2018-09-01 - Flow - #dailyui - 08

It got to this point on September 1st that I didn’t even know what I was doing with the layout. Even looking back at it now, I still don’t even know how I arrived at the screenshot above. Probably just by putting random things together to see if they stuck. Let this be a lesson: don’t decide to tackle things when you’re sleep deprived. Haha.

2018-09-07 - Flow - #dailyui - 16

2018-09-07 - Flow - #dailyui - 16

I decided that it would be a good idea to revisit this in a few days once I actually had slept a decent amount. By September 7th I finally managed to get to this point which was a HUGE improvement over the previous versions I had done before. I ditched the orange, went with a lighter shade of blue, and spread everything out more instead of keeping them so close together.

To remind myself of where the notch was and where I needed to keep my design, I used a free iPhone X overlay that I found on sketchappsources.com. Honestly, it was a lifesaver considering that this was my first time designing something for the iPhone X. While reading and pinning articles about what to do and not to do did help, I found this overlay was the best resource. Plus I learned that Sketch newer files can be imported into Adobe XD and then converted into an Adobe XD document for further use.

It was a good experience in the end!

#006 - User Profile - FInal Mockup

#006 - User Profile - FInal Mockup