I'm following the Daily UI Design Challenge, which is a series of daily Design Challenge prompts, delivered via e-mail. The goal is to improve skills and build a UI portfolio.
So far, I've developed all my project with a single client in mind: Paws'R'Us, the pretend company I've been doing all the pieces for. They are an online based pet store that focuses on pawy animals.
For expediency sake, I used the Pawtastic UI Kit provided with the design hint for day 1. I'm also thinking that I'll develop all - or most of - the prompts based on this "compawny".I have no intention of keeping up with daily practice, because I understand that kind of commitment is beyond my time availability at the moment. The main goal here is to actually complete all the challenges, improve my UI and Adobe XD skills and build up my UI portfolio. And that is a lot considering my overloaded plate right now.
I am sharing the results on my Dribbble.com account, as instructed on the sign up information. As my account is a basic one, I can only share 1 shot at a time, so I am recording the whole process here and the single shot there.
This is a diary of the process.
#1.Sign Up
Design Hint...
Create a sign up page, modal, form, or app screen related to signing up for something. It could be for a volunteer event, contest registration, a giveaway, or anything you can imagine.
For this ideation, I changed the colors on the original Pawtastic UI Kit, and started changing the writing to reflect my penchant for humor.
#2.Credit Card Checkout
Design Hint...
Design a credit card checkout form or page. Don't forget the important elements such as the numbers, dates, security numbers, etc.
#3.Landing Page
Design Hint...
What's the main focus? Is it for a book, an album, a mobile app, a product? Consider important landing page elements (call-to-actions, clarity, etc.)
I chose to build Paws'R'Us' website landing page, with photos of both cats and dogs and CTAs in every section. Emphasizing that both animals are welcome. The landing page also gives a preview of the services available.
#4.Calculator
Design Hint...
Design a calculator. Standard, scientific, or specialty calculator for something such as a mortgage? Is it for a phone, a tablet, a web app?
Design a calculator. Standard, scientific, or specialty calculator for something such as a mortgage? Is it for a phone, a tablet, a web app?
I chose to do a thematic calculator app, replacing the equal button with the Paws'R'Us logo and using the brand colors. I also started presenting the results in a mockup format on my Dribble.com account.
#5.App Icon
Design Hint...
Design an app icon. What best represents the brand or product? Or is it incredibly unique? Does it look great at a distance and does it stand out when put on your home screen alongside other apps?
Design an app icon. What best represents the brand or product? Or is it incredibly unique? Does it look great at a distance and does it stand out when put on your home screen alongside other apps?
For this I did a basic icon using the logo and a white background, which stands out because of its simplicity.
#6.User Profile
Design Hint...
Design a user profile and be mindful of the most important data, names, imagery, placement, etc. Is it for a serious profile? A social profile? (It's up to you!)
Design a user profile and be mindful of the most important data, names, imagery, placement, etc. Is it for a serious profile? A social profile? (It's up to you!)
For this hint I chose to do the sign-up user flow for the Paws'R'Us website. It is a little complex as we are dealing with 2 or multiple users: the hooman and the pawy (or pawies). And considering the pets, we need to deal with other sets of information, such as characteristics, breed, weight, and vet info. PS. the model is my doggo Astro Naute Silveira Luft ;)
#7.Settings
Design Hint...
Design settings for something. Is it for security or privacy settings? Game settings? What is it and what's important? (It's up to you!)
For this hint I chose to follow along the path set out for the Paws'R'Us website. This flow has 2 stages, the profile and the payment method.
#8.404 page
Design hint...
Design a 404 page. Does it suit the brand's style? Is it user-friendly? It might sound mundane, but not evertyhing can be flash or glamorous. Every day millions of people will be landing on 404 pages. You have an opportunity to help them in a way that's useful and asthetically pleasing.(It's up to you!)
For this page I followed the home page aesthetic, with logo, nav bar and message. For the background, a photo of a shamed dog hiding behind his paws, in line with the text that insinuates the dog is responsible for the missing files.
#9.Music player
Design hint...
Design a music player. Consider the controls, placements, imagery such as the artist or album cover, etc. Also, consider the device type that's playing the music. A dashboard in a tourbus, a smartwatch, or via a web browser. Each deveice type will have different requirements, features, and restrictions to consider.
For this hint I chose to do a web music player attached to the Paws'R'Us website. It is very simple, connected to a Spotify playlist of songs for dogs. The goal is to increase website engagement through the use of the player.
#10.Social share
Design hint...
Design a social share button/icon and be mindful of the size, imagery, placement, and purpose for sharing.
For this I decided to add a social share to the end of the sign up success message.
Continued at Daily UI design challenge diary (#11-#20)
