Nav Icon

Projects

< Back to Projects

Olympic National Park Camping Showcase

Intro

Highlighting the many camping opportunities offered by Olympic National Park, this showcase shows visitors where and how they can stay in the park to experience the pristine northwest wilderness.

Tools & Techniques

  • Design Tools
    • Sketch,
    • Illustrator
  • Design Techniques
    • Logo Creation,
    • Responsive Web Design
  • Front End
    • HTML,
    • CSS,
    • JavaScript,
    • jQuery
  • Back End
    • Gulp,
    • Sass,
    • Jade

Details

Background

This was a sample project in my Bloc UX Design course. I was asked to select a product to showcase in a single page site. I selected Olympic National Park because I believed it was a real product with a lot to offer, a large collection of royalty-free images to draw from, and no chance that I'd step on the toes of an established brand. After some more research, I narrowed the focus down further to just camping at Olympic National Park.

Design

The final design is a simple, retro style. Taking the elements surrounding camping literally by painting the page in earth tones like a strong dark green and light tan. Almost every color on the page is a variation on those two base colors. For highlights, especially in the CTA sections, a bright burnt orange is used to draw the user's attention.

The entire page was designed to be responsive. Most sections rely on a two-column layout, which is presented in desktop and tablet widths. For mobile widths, the two columns are stacked vertically into a single column. The exception to this two-column layout is the campgrounds section, which employs a card layout. Each campground within the park is represented by its own card, showing a picture of the campground and select campground details and amenities. Those cards are presented in rows of 3 for desktop widths, 2 for tablet widths, and 1 for mobile widths.

Development

This was the first time I'd been able to use Gulp, Jade, and Sass for anything larger than small toy projects. Using the three together, along with browser-sync, created an impressively efficient developer workflow.

For the front end, I built a very simple responsive grid system from scratch. I felt like building my own grid framework would give me better insights into responsive web development than relying upon an established system like Bootstrap or Foundation. My implementation started life as a copy of Chris Coyier's Don't Overthink It Grids, which I then expanded to include some Bootstrap-like functionality.

In-page navigation is provided with a very simple fixed nav header. Following conventional design patterns, that nav header collapses into a hamburger menu for mobile widths.

Say Hello