DEV Community

Cover image for Daily UI Design Challenge: Day 4 – Elevate Your UI Design Skills
Johnny Santamaria
Johnny Santamaria

Posted on

Daily UI Design Challenge: Day 4 – Elevate Your UI Design Skills

#ux #ui #design #webdev

From:
Daily UI

--

Embarking on the Daily UI 100-Day Design Challenge is an exciting way to sharpen UI/UX design skills and build an impressive portfolio. Now on Day 4, the focus intensifies on creating a calculation UI/element that captivates users and improves their experience with a purpose.

Description:

Design a calculation element or interface. Is it a standard calculator, a scientific one, or specialty calculator for something such as a home mortgage or auto loan? Is it to forecast a calculation such as for a credit score? Is it for a phone, a tablet, a web app?

--

The design:

Daily UI day 4 design

Color palette: #CEC656 | #FFFFF | #212121

Fonts: Roboto | Montesserat

This is a calculation element where time between days is calculated, it is meant to be a short and simple widget

CTA: Start Date | End Date | Select which days | # Days | Note

What dictated my design choices:

  1. Visual Hierarchy: The layout highlights the key components (Start Date, End Date, Days Calculation) in a clear and organized manner, guiding users to interact intuitively with the interface. Important elements are emphasized with size and color contrast.

  2. Simplicity and Clarity: The design keeps everything minimal and easy to use, which is essential for quick, efficient calculations. This simplicity ensures users don’t feel overwhelmed and can complete their task swiftly.

  3. Functional Layout: By placing the CTA button (“# Days”) prominently and grouping relevant input fields logically, the design helps users focus on the essential aspects of the tool, ensuring a smooth and engaging user experience.

  4. User-Focused Experience: The inclusion of options like “Select which days” and “Note” makes the tool flexible and adaptable to a range of use cases, whether it's for business, planning, or personal projects. It allows users to customize their input according to their needs.

  5. Mobile-Friendly: The design can be easily scaled for mobile devices, ensuring users can access and use the tool conveniently on different screens, making it practical for use on-the-go.

Conclusion

This calculation element design brings together simplicity, functionality, and usability. By focusing on clear visual hierarchy and providing a straightforward approach to day calculations, it offers users an effective, streamlined tool for managing time-related tasks, all within a clean and responsive layout. Whether for a mobile app, web app, or tablet, this design can easily be adapted to fit various platforms and enhance the user experience.

Top comments (0)