
Solid Wrench
A UI focused personal project.
To end my placement at Furthermore, I had just 2 weeks to create a website using Figma for a fake client. This was completed to show my ability to design UI elements completely from scratch.
The ‘client’ Solid Wrench was all about exercise, they claimed to be a big global seller of sports equipment and sportswear. Their main 2 rules were that the branding had to be green and the target audience was mainly men, but could include women.
From the limited guidelines I had, I set about looking at their competitors Sports Direct, Nike, Adidas, Under Armour and even Sweaty Betty were all websites that influenced my sketches of the wireframes. I had to design a full homepage, shop/ item listings page and item page, but I also added in the drop down menu in the navigation as a different state, to show I could do more than just make the pages.
​
The main green and accompanying colours came from an unlikely source, thanks to a colleague at Furthermore I found out that Starbucks promote how they compliment their iconic green colour with others through their ‘Starbucks Creative Expression’ website. A website that breaks down their branding from their photography to typography, to their logo and colours. It was a wonderful resource for me to use to learn and understand how each element is brought together to make a brand.
With green being the main colour I had to use, I decided to follow Starbucks and take their ‘Starbucks Green’, ‘Light Green’ and ‘House Green’ to use in my designs. I added an orange into the mix with black and white to complete the branding colours. All of these were checked each time a UI element (such as a button) was created, to make sure it passed AA accessibility or even AAA accessibility guidelines, this was done using the ‘Cluse’ plugin for Sketch.
See below snippets of the website I designed for this ‘client’ and see that I tried to create a brand as well as a website for it. Image 1 is the homepage, 2 is the navigation menu, 3 and 4 are the shop/item listings page and finally 5 is an item page.
