Daily UI Challenge
I started the Daily UI Challenge to try to refine my design skills. The way it works is you are emailed 100 design prompts, one a day, that you can take in whatever direction you want. It encourages you to step outside your comfort zone and design things you haven't spent much time on. You can sign up for the mailing list here. I'll be updating this page with my daily UI designs as I go along.
006: User profile
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?
I decided to design the user profile for my imaginary app from 001, Inspirit, a political activation and social media app. It gave me a good basis to pull assets, colors, and fonts from 001 so I could focus on the placement of profile items. I imagine that Inspirit has all your typical social media functionality - following, followers, adding as a friend, and their personal posts, as well as location and a short bio. Location is needed for the app to populate your feed with people near you - and you can add friends from other places, too, for a private friends feed. You could optionally hide your location from anyone not in your neighborhood. Both of these mockups are from the same screen - the second one is your posts if you scroll down on your profile.
005: App icon
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?
This was definitely a challenge picking what I wanted to do. I finally settled on an app icon for the Final Fantasy series of games, so I could practice some illustration. I sketched out a few thumbnails first. I played around with a few characters and styles, including using a poloroid frame on the icon (cameras are important in the most recent game). Finally I settled on a chocobo, a large yellow bird from the series.
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?
This was the hardest Daily UI so far! When I first saw "design a calculator" I thought, this will be so easy, it will only take an hour or two. Boy, was I wrong! All calculators are definitely not created equal, and there are so many functions - scientific calculators feel too much for small calculatins, but regular calculators feel too weak to do anything more than simple arithmetic. I researched dozens of calculators (it feels like every version of Android has a slightly different calculator!) The biggest problems I encountered were what to include in my calculator - did I need an equals sign? Did I need a +/- or can I just use the subtraction sign as a negative symbol also? What about using a slash versus using the sign for division? How about moving your cursor right or left? Parentheses? They were all questions that, if I were doing this for real, I would absolutely do a ton of quick and easy user testing around.
I added a currency converter just for fun. I thought it would be really useful to have a little calculator app where you can calculate tips or stock prices and convert into whatever currency you want!
003: Landing page
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 immediately knew I wanted to do an album for a made up electronica/industrial band. I did a ton of research into band websites, including VNV Nation, David Matthews Band, Covenant, Taylor Swift, Beyonce, Boy/Cut, and more. I also used an EBM band name generator to come up with my fake band name, Hyper Trance Zero.
EBM bands usually attract people who wear all black and squint at sunny days, so I designed my landing page to reflect the dark and gothy aesthetic of their audience. I also designed a fake album cover for the landing page.
002: Credit Card Checkout
Hint: Design a credit card checkout form or page. Don't forget the important elements such as the numbers, dates, security numbers, etc. (It's up to you!)
For this, I went simple. I did research on checkout forms - aside from choosing the credit card type, you can also choose what type of payment - credit card, PayPal, Apple Pay, and more. I decided to create a swipeable payment type chooser between credit card, PayPal, and Apple Pay. You can swipe between them, and as you do, the list will rotate, along with the options below the purple header, which will show you the credit card form or the appropriate logins for each service. I also opted to detect the credit card service as you type.
I designed all the icons (aside from the PayPal and Apple logo of course!).
001: Sign up
Hint: Design a sign up page, modal, form, app screen, etc. (It's up to you!)
For this, I decided to design a sign up form for a political action and social media app. This is an app I'd love to build - the idea is that you can connect with your local community with social media features, as well as be informed of local rallies, events, and political action initiatives. You can also post your own! This would be a great way to connect people to our political system and get them engaged with minimal effort. Right now, most rallies/events use Facebook to organize, which is fine, but you have to know the right people. This would centralize and create a one-stop shop.
Here are my brainstorming notes. I didn't want to spend a ton of time on it, as you're supposed to do each design in a day. So I quickly brainstormed the name of the app and logo ideas and icons, and then quickly got to work. The only thing I didn't design was the photo for the background, which came from Unsplash.