Daily UI Challenge: Days 6–10
To hone my UI Design skills and practice rapid prototyping, I’ve taken on the Daily UI Challenge. Every day I am presented with something new to design, such as an app, icon, or interaction. While doing these designs I also like to give myself constraints or additional challenges to develop my skills further.
This is an ongoing project and will be updated regularly.
Day 6
Task: Design a Profile Page
Daily UI 006 actually helped inspire my idea to design the FreeHand Volunteer App for my final project at Brainstation. The Film & Media industry in Toronto lacks good dedicated platforms for freelancers and volunteers, so it was interesting to imagine what something like that would look like.
Designing the UI involved considering what information would be relevant to employers, as well as freelancers. Because the app is designed for creatives, the highlight should be on the work. The main profile has plenty of room for freelancers to quickly share visuals from projects they’ve worked on, broken down by category. The main CTA for employers would be to hire the freelancer, so I’ve ensured this is the only button on the page with the primary styling.
Day 7
Task: Design a Settings Menu
Like many people, I’ve spent a ludicrous amount of time during quarantine working on my island in Animal Crossing for the Nintendo Switch. The ability to customize and design the entire island to your liking is extremely appealing to me. Interestingly, the game doesn’t feature an options menu of any kind. I assume this was done to tailor the gameplay for a very specific experience.
As a thought experiment, I decided to explore what an options menu might look like in the game. I wanted the menu to look like it would match the style of Animal Crossing seamlessly, which challenged me to create assets that closely resembled the existing design system. This included illustrating new icons, as well as designing backdrops and interactions that look like they could exist in-game.
As mentioned in my previous post, I was fairly new to illustration at this point. Designing the menu icons, while also replicating the Animal Crossing aesthetic, was far more difficult than I initially expected. The icons had to be intuitive, but also cute and colorful. I found the best method was to start with universally recognized symbols (such as the language bubbles) and incorporate the cute elements afterward, including cartoon characters or vibrant colours. Despite the challenge, this is still one of my favourite projects so far, and someday I’d love to come back and continue fleshing out these menus.
Day 8
Task: Create a 404 Error Page
Continuing with the video game theme, I decided to re-design the Pokemon website’s 404 page. The existing page is very functional, so this isn’t a necessary re-design. My design was more a conceptual experiment, and a chance to play with iconography and reference.
I wanted the design to harken back to the original Pokemon Red & Blue games for the Gameboy. The 404 font and menu box are both pulled directly from those games. The Pokeball used in the 404 comes from later games and is used to add some colour to the page. In the background, I’ve layered some Psyduck’s- a cheeky nod to the confusion the 404 page tends to imply.
I decided to leave the menu text in a simpler Roboto typeface- ensuring the options are very legible for users.
Day 9
Task: Design a Music Player
For the 9th day of the challenge, I wanted to practice working under tighter deadlines. I gave myself a time limit of 1-hour, which would force me to focus on what elements were most important and managing my time.
I first decided I wanted to keep the design simple- clear, universally recognized icons and layouts that users expect from other applications. For the background, I copy the album artwork to the background, then add a blur effect and a dark overlay to allow the buttons to pop.
Day 10
Task: Design a Social Share Menu
I felt designing the social share menu was a great opportunity to practice simple animations and collapsable elements. The concept was a social share for an online publication.
Thank you for reading! To see more, including my UX/Product design work, visit my Product Design portfolio here.
Also see: Daily UI Challenge Days 1–5
