Project 10: Wireframe & Mockup

logo brown.png

For this assignment, we took a favorite restaurant and created a website wireframe and mockup for the home page of the site. I chose a local cafe of my hometown called Beanster’s Espresso. Although I am not much of a coffee drinker, I appreciate that Beanster’s have the small town cafe feel unlike other places around here. They have a nice lounge with a fireplace to relax or work on things and a drive-thru for the more get it and go types.

My two largest struggles for this assignment were that Beanster’s does not have a website at all, so I had to improvise elements and what to include in a navigation menu. Second was I couldn’t even get a logo to use, so I had to create one as close as I possibly could based on certain character elements.


I started by creating the wireframe shown above. My decisions started with a color scheme I wanted to use, which I call Coffee and Cream. Using the gray areas to be the coffee colored sections and white areas as cream, I made this divided design. I wanted a fairly large focal point on the page, with featured imagery. The large box on top is meant to be a slideshow style, where multiple images with different purposes and info scroll by. The scroller features the most important information, which is why it’s largely visual and above the fold.

This assignment noted three featured areas, which I placed on the lower half of the page, which is potentially below the fold. With the focal point being an image and a larger sized subhead compared to the body copy, the sections still grab attention once users scroll. This is more static information that doesn’t change as frequently as the slider would.

I put the navigation on the left in the dark section for contrast. The logo can also be found on the top of this section, and the contact information on the bottom left. In terms of responsiveness, this section can collapse down on mobile and be opened hamburger style, so it doesn’t take away from the main imagery and focal points. The social media icons are found on the upper left corner or the page to be more subtle compared to other page elements.

Beansters Coffee Mockup 1

For the mockup, I added the colors I mentioned above of coffee and cream. I focused heavily on finding good images that fit well with the color scheme, which is generally warmer than a traditional black and white. All of the images are from Death to Stock Photo and  Pexels. I created two of these mockups as a demonstration of the slider changing to different images and information.

Beansters Coffee Mockup 2

For the content in the three featured areas, I wanted to highlight some specific things I appreciate about this business: The lounge area, selling more than just coffee, and to-go features. I did remove the button design in the actual design because it was becoming too cluttered so the images themselves will become links to more information on the topics.

The subheader and navigation menu fonts match the logos with the word Espresso. I found a sans serif font (which is easier to read on screens) for the body copy and smaller elements like the contact info.

To reference back to mentioning responsive design, I created a (very rough) mockup of the mobile design.

Beansters Mobile Mockup.jpg

And now for a mockup of the mockup!

Mockup mockup

My design is for educational purposes only and that I am not affiliated with the business.

See other projects for this course on the Graduate Projects page.