#DailyUI
(3 minute read)
Through a mentor, I was introduced to #DailyUI, a series of daily design challenges &
design inspirations over 100 days. Each day a prompt was sent out with a challenge to help improve design skills.
As someone who was looking for ways to get more hands-on experience in UI, I found this to be a very rewarding experience that pushed me to think outside the box and experiment as a designer. Below is a compilation of some highlights from my journey.
To see more UI related projects, you can check out my Launcher App Prototype, or the team project I helped with for the Adobe Creative Jam.
PROGRAMS USED
-
Sketch
-
Invision Studio
-
Adobe XD
-
Adobe Illustrator
-
Photoshop
#001- Sign Up: "Odyssey" (Travel App)
I wanted to create something that related back to my previous field (Hospitality & Tourism), so I built a mockup for an app that would help for planning travel itinerary. I decided on the name Odyssey because of its relation to journeys and travel.
My prototype consisted of a full loading screen, as well as the options for users to Log-In, Sign-Up, and find out their password if they had forgotten it.
All icons, as well as the Earth graphic were created in Adobe Illustrator, while the buttons, each individual screen, and prototype were created in Adobe XD.
After the loading screen, users are greeted with a home page, consisting of "Sign Up" and "Log In" options, with a rotating Earth graphic in the background.
When first opening the app (after logging out, or for the first time ever), a loading screen appears with icons that summarize what you can use the app for (ex. flights, restaurant).
Mockups of the different confirmation screens: Log In, Sign Up, and Password Change
After the loading screen, users are greeted with a home page, consisting of "Sign Up" and "Log In" options, with a rotating Earth graphic in the background.
You can check out a video demonstration of the prototype below.
#002- Credit Card Checkout & #017- Email Receipt: "The Store"
I'd noticed early on that some of the Daily UI prompts were quite close or related in terms of theme. It didn't appear that there were any rules in what I could and couldn't do for design, so I decided to combine a couple prompts for some mockups (this one was created in Sketch); this is the first of two that I'll present here.
I kept this one straight-forward, as I wanted to take a step back from the animation and flashiness of prototyping and focus more on placement of assets and colour accessibility.
This is two screens: one that recaps the items in your cart and prompts for credit card information, the other is the confirmation screens that appears once information is confirmed. In theory, an identical copy would be emailed to you.
Items in the cart are displayed here, as well as credit card checkout information prompts
Checkout confirmation displays cost breakdown. This would be exactly what would be sent as an email receipt.
The original layout for the receipt/checkout page.
Items in the cart are displayed here, as well as credit card checkout information prompts
#009- Music Player & #041- Workout Tracker: "Trek"
Like the previous mockup, this prototype was inspired by two Daily UI prompts. There are some workout apps that incorporate a music player (or provide easy connection/access to a music player), and I decided to merge the two together here.
I used to run frequently back in the day, and was inspired to build the app around that theme. I chose the name "Trek" as it felt fitting for longer runs. The app tracks your run times, and estimates distance from your start to end point, so you know how long you'll take to get there.
Additionally, the music player option is there so you can access your tunes from one place, rather than switch apps.
This is the entry screen for the app, after a colour transition, this will appear and prompt you to enter the app.
This is the screen you will see when first entering the app. Latest run time and distance are focused on here to give a reminder of your progress.
When setting up a route for your run, the app will give an approximate time and distance for reference.
This is the entry screen for the app, after a colour transition, this will appear and prompt you to enter the app.
You can check out a video demonstration of the prototype below.