Comfort Southern Style

Johnathon Staples

WDD 130-1001

Overview

Purpose

Hi I am Johnathon Staples I have noticed that Comfort Southern Style Restaurant does not have a website. I just started my career in web design. To help Comfort Southern Style in this Covid Pandemic. This website can function as an alternative menu. Also, it will open up business for Comfort Southern Style in pick-up orders. This will help give you more business in these slower times with limited seating.

Audience

This is for Comfort Southern Style and those planning on coming in to dine or those that are going to start taking out. We will have different Southern foods on this menu from breakfast lunch and dinner. Some of our favorites for breakfast will be biscuits and gravy, buttermilk pancakes, and steak and eggs.

Branding

Website Logo

Style Guide

Color Palette

Palette URL: target="_blank"https://coolors.co/004e64-93b1a7-8e5572-14080e

Primary Secondary Accent 1 Accent 2
#004e64 #93b1a7 #8e5572 #14080e

Typography

Heading Font: IM Fell French SC

This is what im using for now until i get the site up then start playing around.

Paragraph Font: Lato

This is what im usinh for nowuntil i get the site up then start playing around.

Normal paragraph example

oh yeah this is going to be fun creating a menu

Colored paragraph example

This is where it is at

Navigation

Site Map

Breakfast
Lunch & Dinner
Sides & Desserts
 
 
 

The Site Map of a site is just like it sounds…it is a map of the pages in a site and how they are related and linked together. From the map above we can see that we will eventually have the Home page and 2 sub or child pages.

The lines that connect them all together indicate that each page should be accessible from any other page, it is essentially showing us the global navigation for the site.

Wireframes

Wireframes are like blueprints for making webpages. They should show the major sections of content that will be on the page and the relative locations of each element. In the wireframe below you can see there will be 6 sections to our page:

  1. At the top we have a section with the logo (the box with the mountain means an image) and the navigation bar.
  2. Then there is a banner image that stretches all the way across the screen.
  3. Next we have some text and an image
  4. ...followed by another row made up of an image and some text.
  5. Then one more section of text with no image.
  6. Lastly, a footer containing a copyright/name line and 3 social media icons.