Content Based Website

The Sprocket and Chain

The objective of this project was to create an informative hobby-based website which I chose to do on motorcycle and motorcycle gear blog and reviews. I thought it would be ideal for providing relevant content to Harley Davidson bobber/chopper style bikes riders. There are very few blogs that cover this type of bike specifically and do it excitingly. This project proved to be a challenging one since we are limited to only using three images, so the layout and color palette would have to be able to capture the visitor's attention.


During my research, I found that there are just a handful of websites that were well designed and presented this information in a clear way to the target audience. I was able to gather a few articles that caught my attention and used that as copy.

The Process

Ideation And Sketches

I had a pretty good idea in which direction to take as far as the layout of the main page was concerned, but presented two options for the secondary page. Based on the instructor and peer feedback, I started creating the wireframes to get a better idea of size and proportions as it was required to use flexbox during the coding phase.

The other aspect I considered critical was looking for the right images since the project had a limitation of only three pictures. The right size and placement would make or break the visual interest aspect of the webpages to be designed.

Digital Concepts

In this phase of the design, I was concerned primarily with creating an icon set that would fit the motorcycle theme I had in mind. In addition to that, I had a few iterations of the logo and wanted to create a unified look to the entire build. After the instructor and peer critique, I decided on a simplified and modular approach to the logo implementation for this webpage.

I had initially used my photography, but as the development of the page continued, found a couple of royalty free stock images that fit the top banner in a better way.


I had finalized the icon set and for the navigation and simplified the logo one more time, so the next step was working on fine-tuning the page and focus on the coding portion of this project.

Final Design

There were some minor changes and adjustments made to the final version of the two pages and some of the code to make it work with the secondary page.

Overall it was a very challenging project that helped me better understand both aspects of design and clean and organized code to create a visually pleasing webpage.