The prompt for Day 4 was “Calculator”. I decided to do a simple BMI calculator for this challenge. I have been on my own weight loss journey for a little over a year now, so BMI calculators are something that I have personally used a lot recently. There are many different ways to calculate BMI, but I decided to stick with the most basic formula, which is Weight(kg)/Height^2(cm).
From stage one of this design I envisioned creating the entire page including the graphics using pure CSS. In fact, the reason I am posting Day 4 so late is because I knew that I wanted to implement the design, so I waited until I had a chance to site down and code it.
The design I created in Adobe XD can be seen here:
And here is a GIF of the implemented design:
See the Pen BMI Calculator by Melissa Dagley (@mdagley) on CodePen.
Yesterday kind of got away from me, so day I am posting about days 2 and 3 for the Daily UI challenge. Day 2’s prompt was “Credit Card Checkout” and Day 3’s prompt was “Landing Page”.
For Day 2 I designed a payment flow that could work for web or mobile with some simple tweaks. The mock up I made is for web, but for mobile I would simply have a small tab for the cart in the corner of the screen.
The idea is that if the cart tab is pressed then the cart will slide open and take up the open area of the page. The input sections are all divided up and when one section is done it closes and the next one opens. This allows us to keep scrolling to a minimum. I like the look of other credit card payment screens where you fill in the information on a graphic credit card, see the examples below, but I feel like it’s a little overdone, so I opted to lay the fields out in a similar fashion to a credit card without actually drawing a credit card on the screen.
For Day 3 I decided to design a landing page for a fake bakery. I focused on finding a high quality background image and creating a simple typographic design. I chose to go with dark, warm colors to make the page feel cozy and home-y.
So far I am having a lot of fun with this UI challenge. It is a much different mindset focusing on design first. My approach for this project has been to keep things fun and laid back and not try to aim for perfection, so I have been trying to finish each design pretty quickly and not agonize too much over the details.
In order to get some creative juices flowing and practice more with designing I have decided to join the Daily UI 100 day challenge. Each week day there is a new prompt, which can be interpreted and executed in any way you see fit. So every day for 100 days I will be designing a new interface or interface component.
Day 1’s prompt is Sign Up. Since I joined late in the day I decided to keep things pretty simple, so I mocked up a mobile design for a sign up form using Adobe XD. I decided to go with a monochromatic color scheme.
I broke the form up into two sections, the first focuses on the user’s information, and the second section pertains what the user wants to receive from the site/service. This is a generic form for this concept, but it could be adjusted to fit different services. In practice I would probably put a little more space between the fields/buttons, but for the sake of fitting everything on one screen it is a little more compact for this rendering.
For future designs I would like to take some time to actually code the designs, even if I don’t get the full application fleshed out. Depending on how my time goes I may pick one or two designs each week or every other week to progress further over the weekend(s) when there are no prompts.
I hope this challenge will give me a chance to try out some different design styles and maybe design some UI elements that I have never created before. It’s easy to get caught up in coding and forget about design, but they both play important roles.