Week 8 - Visual Design

“In creating a style guide, UX designers are basically documenting their own thought process as they design a Web site, application, or system.” (Sharma, 2019)

I felt it was a good moment to start to build a style sheet. This would allow me to keep a level of consistency throughout my app, as well as making it easier to implement style changes at a later iteration.

“Consistency allows your product to appear more professional and reliable” (Bhujbal, 2020)

It also defines standards and usage - important for delivering a coherent user journey.

I refined my choice of green shades, and also opted for a gradient which would add some depth to the overall aesthetic. I chose two typefaces, Roboto for headings and Nunito for body text. I felt these worked really well together as they were both really clean sans serif fonts that would display well on the screen.

For the logo, I used a handwritten font, to evoke a sense of movement. I felt this was appropriate for the logo, but did not need to be used elsewhere in the app. I also began to look at the aesthetic of the icons that would be used. I wanted these to remain one colour to be be quite simplistic in their styling.

I began to work on button and card design, using drop shadows and overlays to add depth, and to show inactive/active status.

Fig 1. Style Sheet for Walkease prototype.

References

Bhujbal, A (2020).A guide for creating a Style-guide and UI library [online]. Available at: https://uxdesign.cc/making-a-style-guide-%EF%B8%8F-33939edd83ea [Accessed 14th April 2022]

Sharma, V.R (2019). Creating a UX Design Style. [online]. Available at: https://www.uxmatters.com/mt/archives/2019/11/creating-a-ux-design-style-guide.php#:~:text=A%20style%20guide%20is%20a%20a,documenting%20their%20own%20thought%20process%E2%80%A6. [Accessed 14th April 2022]