Before getting started with UI design, I started from brand guidelines. They were currently using all different styles for everything, including logo, colours and typeface. They knew their brand colour was red, they didn't have specific red that they used.
They had three different logos and they were all quite overly decorative. They needed a logo that is more simple and more readable.
Brand colours need to be set as well. Instead of making it colourful, they wanted to keep red and they wanted users to instantly recognise that red is their brand colour. So I kept brand colours quite simple by just having red, black and white.
There was no clear typeface that they were using so I started to look for typefaces. They wanted the design to be modern and classic so I looked for serif for title and san serif for paragraph texts. For serif, I tried to find a typeface that is the most resemble musical notes.
The client wanted a modern, classic, clean, and minimalistic design that would prominently feature their brand colour, red. To kick off the design process, I began with homepage for a concept, which was later approved by the client before moving on to the other pages and breakpoints.
Consistency and ease of management were the main considerations during the UI phase. The previous website lacked rules or guidelines for media assets, resulting in varied orientations and image types, causing significant inconsistency. Additionally, the use of low-quality images adversely impacted the overall website experience. To address these issues, I implemented guidelines for media assets, ensuring they are always in the correct format to maintain consistency.
After completing the website development, my final responsibility was to guide the client in learning how to use the platform. Given that ease of management was a big part of design consideration, I designed templates that allowed clients to focus solely on the CMS editor for uploading new projects, eliminating the need to navigate other sections. In addition to a short course provided by Webflow, I conducted a demonstration with the clients to showcase the steps required for uploading or editing projects and provided them with a PDF containing simple instructions.
