Stan Mikita's Donuts
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.