Week 8: Visual Design

This week, I met with one of my tutors to present my prototype and gather feedback. Throughout, I found myself explaining various sections and how they worked. This highlighted to me that there were areas needing work due to the very fact that I had to explain them. Nielson (2020) states that the best designs carefully prevent problems from occurring in the first place, and this was my key takeaway from the meeting.

We went on to speak about making buttons look more clickable, which led me to explore the use of shadows and containers to improve the appearance of clickable elements. I’m amazed by how much this improves the buttons’ appearances and makes them stand out while adopting a more polished look (see below).

I’ve also spent a lot of time considering possible navigation options; however, this has been a work in progress through designing each screen. I’d initially planned to have back buttons on each page as required; however, feedback from the meeting suggested that the user’s journey may be longer and more convoluted. Therefore, I’m now going to explore the possibility of adding a navigation bar to improve the user flow.

Before the meeting, I felt worried that my designs weren’t sufficient and that I wouldn't have enough time to act upon the vast amounts of feedback I expected to get. I wasn't sure what I wanted feedback on in presenting my work and felt quite lost. In retrospect, it would have been helpful to work out what I needed input on beforehand to better prepare for the meeting. After discussing my designs, I felt infinitely better and can now admit that I had a prior fear of rejection. The feedback received was constructive and helped evolve my creations; however, I aim to embrace situations like this with more preparation and confidence going forward.

The 6 Principles of Design

I assessed my interface against the six principles of design and found this helpful in considering various aspects of my creation. I discovered that I have a good eye for layouts, visual hierarchy and unification, although I found room for improvement with scale, proportion and emphasis (see the comparative screenshots below). In some places, my designs were already conforming to the principles, yet, I found it beneficial to practice this type of review to ensure I stayed on track and considered every aspect. In the future, I plan to audit my designs in this fashion to develop my style and aid with my creative choices.

Typeface

I knew that my typeface and colour choices would need to represent a feeling of calm, trust and ease to fulfil the overall aims of the experience. I used Fontpair (2022) to look at various typeface options and found this an extremely useful tool. Having reviewed many combinations, I chose Quicksand as it was available in multiple weights and had been paired with itself. As I’m just getting started in the realms of design, this felt like a good choice and would allow me to gain experience in using weights in a hierarchical sense to differentiate various elements (Earls 2002). Quicksand’s x-height offered sufficient legibility, meaning users would have no trouble reading content (Material Design 2022). Furthermore, its rounded edges convey a less severe tone while remaining visually appealing and readable.

Colours

After some initial research into colour theory, I set about looking for a palette representative of the app's stress-free, calm, and dependable attributes. I experimented with Adobe Color (2022) and opted for a triadic combination. First, I chose mustard as the primary colour in line with the intended user experience, mainly used in headers to lighten the user’s mood and foster positivity. Next, I chose Teal as the secondary colour to highlight specific titles and completed actions due to its calm and stable nature. Finally, Purple Iris is used as the accent colour due to its correlations to power and deepness, rendering it useful where emphasis is required. Below is the app’s style tile:

---

References

ADOBE COLOR. 2022. ‘Color Wheel, a Color Palette Generator | Adobe Color’. [online]. Available at: https://color.adobe.com/create/color-wheel [accessed 17 May 2022].

EARLS, David (ed.). 2002. Designing Typefaces. Mies: RotoVision.

FONTPAIR. 2022. ‘Fontpair - Free Typography for Your next Design Project (Google Fonts, Fontshare, Fontesk, Font Squirrel, and More) - Fontpair’. [online]. Available at: https://www.fontpair.co/ [accessed 17 May 2022].

MATERIAL DESIGN. 2022. ‘Material Design’. Material Design [online]. Available at: https://material.io/design/typography/understanding-typography.html#type-properties [accessed 17 May 2022].

NIELSON, Jakob. 2020. ‘10 Usability Heuristics for User Interface Design’. Nielsen Norman Group [online]. Available at: https://www.nngroup.com/articles/ten-usability-heuristics/ [accessed 17 May 2022].

UNSPLASH. 2019. Plants in Front of Computer Screen Showing Visual Design Elements. Available at: http://localhost:3000/photos/_x335IZXxfc [accessed 16 May 2022].