This website was designed for Spokes and Saddles, to bring customers back to the high street, increasing the awareness and improving trade. The task was to design a website that contains all the information a potential customer might need and to develop a brand identity that attracts customers.
Before diving into the design process and development for the website, I had an interview with the owner Akio Rider, to gain an insight of Spokes and Saddles.
Below you can see a pdf of some of the notes I had taken down during the interview.
COLOUR
Firstly, I created a mood board, which I then extracted a colour scheme from. Out of which I focused on the prominent colours that stood out and represented Spokes and Saddles the way Akio had described it. I also wanted to make sure the colours resembled the environment and the passion of cycling. I had chosen 5 colours; a deep orange (#B35927), a dusty navy blue (#395974), a light muted beige (#E2DBD2), a deep earthy olive green (#586E39) and white (#FFFFFF). Out of which the #395974 would be used for the main text on the #E2DBD2 background, and the #B35927, and #586E39 was used as accent colours.



TYPOGRAPHY
As for the typography, I chose to go with Georgia. It has good readability. It is a Serif font, and from what I have read, they aid in guiding the reader’s eye along the text. For Spokes and Saddles this is beneficial, as they can use it for the detailed product descriptions, blog posts or articles on the website. It has a professional and classic appearance, conveys trust and reliability – customers can be comfortable to seek expertise and quality products, services and information from Spokes and Saddles. Georgia is a web-safe font, meaning it is likely to be installed on a wide range of devices and browsers. This ensures a consistent appearance for users across different platforms.

LOGO/IMAGES
As for the logo, I wanted the name to be incorporated into any visual aspect that was going to be included in it apart from the words themselves. Thus, I though of using a bike chain as part of the logo because it plays a vital role in the mechanical functionality of a cycle; which is to make it move forward by transferring power from the pedalling to the wheels. At first I had positioned it on the top left but then repositioned it to the middle to keep the brand in focus whilst customers were browsing the page, engraving itself in the customer’s mind.

I used resources such as Freepik, Unsplash, Pixabay, for images to be used in this project. They are really great with a variety of images for what is being searched and really gives you all potential images linked to what you have searched for. It was super easy for me to use, find images and download them. Which I then cropped and resized on Adobe Photoshop to ensure it fits the page and decreases the image file size.
RESPONSIVENESS
I made this website responsive, as it aids user experience. Many people use their phones to browse, and I wanted the website functions to be seamless on any device it is accessed from. It increases accessibility, as different people use different devices whether they use one or a collection of devices. It also promotes consistent branding as Spokes and Saddles website will be maintained across devices, building trust amongst their audience. Plus, to ensure Spokes and Saddles are able to bring in more customers and increase trade, staying competitive in the digital landscape is crucial. It addresses the diverse ways people access information online and contributes to the overall success and effectiveness of the website.
However, during this project, I did struggle with the website responsiveness. I initiated to make the website responsive by starting off of the other end of the scale rather than doing the ‘mobile approach’ first. At first, I was having a mental breakdown as to why I couldn’t get the outcome I wanted, but I then realised that I should start from ‘mobile’ first and then build my way back up and in the end I did get there. There was the challenge of content relevance, which content to display or hide for the different screen sizes as I didn’t want anything to impact the user experience. The website responsiveness was much harder for this project, compared to the typesetting project I did, as that only contained typefaces and no visual aspects such as images or icons, and I used MDN Webdocs to guide me and further ease my understanding of media queries. With more practice, I believe I can get the hang of it.

