Stan Mikita's Donuts

Desktop computer, tablet, and mobile phone displaying the Stan Mikita's website.

Web Design • Web Development

Skills Used: Content Writing, CSS3, Editing, HTML5, Illustrator, Photoshop, Responsive Design, Visual Design

Overview

This is Stan Mikita's Donuts. Excellent munchmos.

— Wayne Campbell, Wayne's World

If you are familiar with the movie, “Wayne’s World”, then you know Stan Mikita’s Donuts is the popular coffee shop in the film.

For this project, I was tasked with building a responsive website for a fictional restaurant from a movie or TV show.

The site was to include:

  • Contact information
  • Location(s)
  • Hours of operation
  • Menu
  • Photos of the restaurant and food
  • Upcoming events
  • Ongoing promotions
  • Gift card information

Final Designs

Layout

Due to the fact this was not going to be an overly detailed website, I chose to go with a one-page layout. The one-page scrolling format makes it easy to navigate between the sections.

For an easier way to get back to a specific section, I utilized a sticky navigation menu at the top of the site. This also eliminated the need for a “back-to-top”-style button, which can often clutter the screen and overlay important information, leading to frustration for the user.

Design

History

Stan Mikita is best known for his long and successful career with the Chicago Blackhawks in the National Hockey League (NHL). He played his entire 22-season NHL career with the Blackhawks from 1958 to 1980.

Colors

Colors used on the Chicago Blackhawks jersey include red, white, and black. While I wanted to use colors and patterns that would bring recognition to the team, I chose to use brown instead of black as it resembles the color of coffee and chocolate donuts.

Patterns & Textures

I used a couple different patterns and textures to help tie the hockey theme in to the website. The striped pattern was meant to resemble the stripes on the Blackhawks jersey, while the light-colored wood texture resembles that of a hockey stick.

Look & Feel

As the Style Tile image shows, I wanted the website to have a relaxed and nostalgic feel, while also maintaining a classic, simple look. The Rounds Black font used for the headlines and navigation along with Franklin Gothic Book used for other content on the website aren’t overly stylized, but still offer a bit of visual interest with a clean design.

Responsive

In creating a responsive website, I start with a mobile-first approach. This allows me to see a very simplified layout of the content, which helps when designing the layout for larger screens.

I do not reduce or eliminate functionality or content on a mobile-sized site compared to what is available on the larger screens, as that can lead to a poor experience for mobile users.

I instead approach it by ensuring that each screen size has a thoughtful layout of the content, and the functionality available makes sense for the screen/device it is being used on.

Mobile
Tablet
Desktop