ames
ndrew
mith

I am currently available for freelance bookings — drop me a line to say hello

Web Build

City Cycles

▶︎ jamesandrewsmith.github.io
City Cycles Logo

HTML5 — SCSS — Page Design — Responsive Design — Logo Design

01 / The Brief

Design of a homepage for City Cycles, a hypothetical start-up brand targeting an 18 to 35, "non-lycra-wearing" profile of urban cyclists.

City Cycles Responsive Monitor View
City Cycles Responsive Tablet View
City Cycles Responsive Mobile View

▲︎ Homepage: Cross-Device View

02 / Challenges

As well as succeeding on an aesthetic level, it was essential that the page design fulfil the practicalities of an e-commerce website, whilst establishing and retaining user orientation and engagement down the long scroll.

City Cycles Responsive Mobile View
City Cycles Responsive Monitor View

▲︎ Popular Products Section

03 / Design

I split the content in two broad categories, each with a distinctive tone: firstly, product sections linking to a ‘shop’ area of the website and, secondly, more editorially-toned sections linking to featured products and a blog area.

I opted for Avant Garde as the main typeface as its geometry and functional aesthetic echo that of the brand’s title product: bicycles. This idea is also reflected in its inclusion in my logo design for the brand.

City Cycles Responsive Monitor View
City Cycles Responsive Mobile View

▲︎ Featured Product Section

◀︎ back to top