YEAR
TECHNOLOGIES
- HTML
- CSS
TOOLSET
- AdobeXD
- VSCode
- Git
- Github
Root
Vertical rhythm and clever use of whitespace with a focus on functionality resulted in this Proof-of-Concept design for the initial stages of a fitness app's development stage.
VIEW CODE
Functional and Accessible
Function over form was prioritized without sacrificing fundamental design principles and respect for usability. The most important code here is clearly the CSS which is well annotated and written in a consistent, predictable manner allowing for easier collaboration with fellow developers. Clean, semantic HTML compliments a practical design which does it's part in making the web more accessible.
Skills Utilized
Vertical Rhythm
Consistent spacing is key to achieving a harmonius design. Here I used a vertical rhythm based on a 8pt 'beat'. As a result, the spacing design was implemented quickly and predictably.
Layout
A map, graph, and controller modal all on one screen could have been quite cramped. But a clever use of space and visual hierarchy meant all of the elements fit in one viewport without sacrificing an aesthetically pleasing result.
Accessibility
This is an absolute requirement in any project I build. Here I achieved a UI that would be accessible by all users regardless of visual acuity by focusing on larger interaction areas, a clear hierarchy with variable font-weights and white space, semantic HTML, and strong colour contrasts.