Sprocket & Chain

Motorcycle Blog Website

I designed a two-page website for motorcycle enthusiasts: specifically, riders of Harley-Davidson bobbers and choppers. The site combined editorial content (blog posts and gear reviews) with a custom icon set and a visual identity built around a limited image count.

Research

I reviewed existing motorcycle blogs and found that few focused specifically on bobber and chopper culture. Most general motorcycle sites covered a broad range of styles and brands. I gathered a few articles that resonated with the target audience and used them as the basis for the site’s content.

Ideation and Sketches

I sketched a layout for the main page that would work with just three images: the project’s constraint. The idea was that the layout and color palette would carry visual interest even with limited photography. I also designed two options for a secondary page, testing different content arrangements. Based on instructor and peer feedback, I moved into wireframes to establish the size and proportions of each section before the coding phase.

Digital Concepts

The visual identity centered on a custom icon set built around a motorcycle theme: wrenches, gears, chains, used for navigation and section breaks. I developed several logo iterations and settled on a simplified, modular approach after receiving feedback from the class.

For the photography, I initially used my own shots. As the design evolved, I replaced them with royalty-free stock images that better matched the banner’s visual direction.

Revisions

I finalized the icon set and navigation, then simplified the logo one more time. The next step was refining the page layout and ensuring the code was clean and organized, particularly for the secondary page’s flexbox structure.

Final Design

The two-page site was completed with minor adjustments to both the layout and the underlying code. The project reinforced the relationship between design and implementation; a well-considered visual system makes the coding phase more straightforward, and clean code preserves the integrity of the design.