The Soup & Sandwich Shoppe Web Design

Nathan Labrecque Creative Web Icon Arrow

Project Description

This was a fun project for The Soup & Sandwich Shoppe, a small family run lunch spot here in Sherwood Park. While they did have a logo and Facebook page, that was about the extent of their branding and online presence. This new responsive, single-page smart site aims to bring in more traffic to the shoppe so they can dish out more delicious food!

Single-page designs work really well for these smaller, largely photo based websites which is ultimately why this direction was chosen in the design process. Anchor links provide smooth transitions to the various sections which can be easily accessed anywhere on the site through the fixed menu bar. Vibrant photography of the food and shoppe itself are displayed prominently and tastefully to provide users with such an immersive experience into the shoppe's unique atmosphere you can almost smell the homemade soup! The photos were taken by myself onsite to really help turn the design in my head into reality.

The colour scheme was carefully chosen to match the shoppe's cozy aesthetic appeal and tie in with the food they serve. Their full menu is available to browse through and download for user convenience as well as a full width photo gallery and google map integration.

Tools Used

Illustrator Icon Photoshop Icon Wordpress Icon HTML5 Icon CSS3 Icon Nikon Icon

There's No Progress Without Process

Nathan Labrecque Creative Process Image
This wireframe represents the initial layout idea for the homepage, which ended up being partially used in the final design of the site. This version was meant to be a traditional multi-page design.
Nathan Labrecque Creative Process Image
Here is the same Homepage layout transformed into a full colour mockup. Stylized icons are used to highlight the shoppe's unique features and the photography is used to its full potential.
Nathan Labrecque Creative Process Image
This is another preliminary wireframe layout for the Homepage. This was the single-page layout that ended up being used in the final design.
Nathan Labrecque Creative Process Image
This Homepage mockup ended up being very close to the final product. A few photos were swapped out and rearranged but for the most part it worked out very well!
Prev Button Next Button