Visual identity sprint
As a brand designer in my day-to-day job, creating a brand identity is something I enjoy. Capturing the personality of a project and tailoring the aesthetics to the intended audience is always a fun challenge. Working collaboratively with stakeholders and engaging in industry research is key to creating a long-lasting, strategicly placed brand. However with this project I had a short time scale, and I wanted to dedicate more time to the technical design and testing the functionalities. So I set myself the challenge to create a visual identity as a rapid ideation completed over 2 days. With my intended audience in mind, I gathered references from around the web and went about building a mini brand identity guide. Which will then be built out into a UI design guide later on.
The design is likely to evolve as high-fidelity testing takes place, as the student’s views will be considered. I also designed a responsive landing page to explain the app which Alex can use to seek funding. It’s currently a prototype and will be built in Webflow.
Applying the design to the interface
As I began applying the visual design to the wireframes, the Wastevine app started to come to life! I reached out to my peers for feedback with the initial screen and they pointed out that I should check my font sizes and colour contrast for accessibility. Accessibility of my design is of upmost importance. According to the WCAG, the contrast ratio between text and the text’s background should be at least 4.5 to 1, yet when the text gets smaller the minimum drops to 3 to 1 (W3 2019). Since I’m using an off-white background I need my small text to be as dark as possible. I used Colourable to test the contrast of all the colours in my palette, the combinations in the guide are those which passed the visibility test, yet the dark brown on gray or white is the only contrast which works for text smaller than 19pt.
I will keep developing the design guide as I apply it to the app and the landing page.
‘Understanding Success Criterion 1.4.3’. 2022. [online]. Available at: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html [accessed 13 Apr 2022].