calculator
About
This project was a Frontend Mentor challenge which required creating a fully functional Calculator app with three themes and the ability to toggle between them from a brief and style guide. The following changes were subsequently made to improve the aesthetics, accessibility and UX of the app:
- A redesigned UI complete with a light, dark and blue monochromatic theme and modern typeface
- ChakraUI to handle the accessibility and styling of components (Chakra UI has been used to style the components, with custom component variants used to couple the styling with the JSX markup and theme extensions)
- The ability to see the previous operands, as well as the current
Design Decisions
The decision was made to change the original design brief to reflect something more contemporary. The Inter typeface was chosen (weights 400, 500, 700) for a clear, clean, modern and affirmed typography with accentuated x-heights for improved readability with mixed-case and lower-case text. The three themes therefore chosen instead also aligned with modern-day styling: a conventional light (white) version, dark (black) version and blue version, each following a monochromatic-set of shades for visual consistency. Blue was chosen as the third and final theme for its medium between the two, harmonious and muted.
Typeface
- 04 Regular
- 05 Medium
- 07 Bold
Screens
Available for agency and freelance work