Ollie's Skate Shop - Concept Design

About

Concept design for a fictional, local skate shop run by a couple who have a design background and are or were non-professional skaters. Staff are community members who skate and have some experience with design, music, art, writing, etc. They sell only a select set brands that fit their philosophical outlook and is a mix of longboards, surfskates, and modern decks. They sell completes, components, t-shirts, sweatshirts, etc.

Visual Direction

Inspired by the 90's and some of the softer palettes of modern design. Veer away from the stark visual treatment of online and larger retailers. It is a community skate shop and is staffed by fun, happy people. The layout should break up the hard edges of rectangular, modern design. Use the circle as a focal point and creatively suggest “skateboarding” through the typeface and shapes on the web page. Adapt the layout for mobile on up to desktop.

Color Scheme

Make use of the current trend towards pastel palettes to soften up the hard edged layout of modern web design. Soft blue with a punch of yellow and black. Purple and yellow color opposites for the hero gradient. A little hard gray for the navigational elements, but lighten it up and use it with the board marks as a background statement. Tie the category headings back to the banner by using the soft blue.

  • #7f47dd
  • #f0be00
  • #0071bc
  • #29abe2
  • #000000
  • #666666
  • #999999

Identity

The logo is a riff on the skate wheel and skate tools used in the sport. Adding the opposing “horns” suggests the rotating comma of Eastern philosophy and the motion of skateboarding. It can be used to have that minimal amount of edge to balance the soft color palette.

Typeface

Variex is used for the banner, hero image header, and category headers. Typeface hints at the environmental aspects of skateboarding–whether street or ramp. Super round letter “o” and the undulating letter “s” are clear symbols for wheel and ramp. The rigid letter “L” is like a wall. Stair and ramp shapes from the letters “k” and “h” come later.

Fira Sans is used for the body copy, navigational elements, and footer text. It’s an open source typeface and a digital native. It’s made for legibility of all sizes in our digital world.

Photo Credits

All photos were purchased as part of a standard license plan.