BBQ Night Korean Restaurant Style Guide

Overview

Site Purpose

This website will be for my favorite Korean BBQ restaurant, BBQ Night which is located in Hawaiian Gardens, CA. They currently do not have their own website so I thought it would be fun to create a website that would have their hours, location, contact information and menu. For their menu, it will have information about their different menu items and pictures of the different meats, soups and side dishes.

Target Audience

My target audience is people living in the Cerritos, Lakewood, Hawaiian Gardens, Cypress, Long Beach area who are interested in eating Korean BBQ. Those coming to the restaurant will be from all age ranges but I suspect those coming to the website for information are those familiar with using the internet. More users will be coming to the website via mobile devices when they are looking for restaurant hours on the go.

Layout

Sitemap

BBQ Night Korean Restaurant Sitemap image

Wireframes

BBQ Night Korean Restaurant Wireframe 1 image BBQ Night Korean Restaurant Wireframe 2 image

Photoshop Design

Download the BBQ Night Korean Restaurant Photoshop design file

Branding

Website Logo

BBQ Night Korean Restaurant Logo image

I successfully digitized the logo that is on their sign outside the restaurant

Color Palette

I based my color palette off of the restaurant's existing logo as well as traditional Korean colors. On the South Korean flag there is a symbol in the center called the Taeguek which symbolizes the universe. There are also other traditional depictions of the same symbol using red, yellow and blue called the Samsaeg-ui Taegeuk with each color representing humanity, heaven and earth. Since the logo already had yellow and red, I thought the addition of blue would be appropriate and would remind people of the South Korean flag.

Flag of South Korea
South Korean flag
Samsaeg-ui Taeguek symbol
Samsaeg-ui Taeguek symbol

Gold

#EDC51D
rgb(237, 197, 29)

Red

#EF1B1B
rgb(239, 27, 27)

Blue

#020D9B
rgb(2,13,155)

Black

#040500
rgb(4,5,0)

Typography

For my body font I wanted to use a serif font to improve readability and for the headings I decided to use a sans-serif font to contrast the serif body text.

Heading Font

ABCDEFGHIJKLMNOPQRSTUVWXYZ<br/> abcdefghijklmnopqrstuvwxyz<br/> 1234567890!@#$%^&*()_+

Sample Heading

Body Copy Font

ABCDEFGHIJKLMNOPQRSTUVWXYZ<br/> abcdefghijklmnopqrstuvwxyz<br/> 1234567890!@#$%^&*()_+

Lorem ipsum nonsed eicillabore essum fugit lantisit, si nis eictia num fugiam et quatquis resto eossitem quunt quae sit dolupis maio omnimo il id maio bea ipid que conseque volorem. Et facidebit vel ma doluptasitis num, ullandebit hicto beaquos tiumquis postrum cori odit eosam quiatur? Volo quid minvel earuptatem quiatur?

Mod qui quunturiam idenderro ma et ex ex ex exerum faci repel molut evelign amenduciis moloreperum qui nullupt ustrumet, sequi a pre non net is dia comnimusant isque voleseque eatur simpori beruptae quam fugit eostios quasi nulpa quatur molorero quam eventio ma venis quideri atiaturione volupiscia sime denestis et hil magnatem aliquundella cusanihit fuga. Pienia dolo tem voluptassi volor as voluptae nulla sed maximincium sapelen tiatqui busapernatus aspis as aborioreic tet recta volessu ndelit hil is explame niminve ratur? Mus andebis si adipsamus ad moluptiae cum este verupid es sequam veri tem sequi re volum doluptatque veriorepudis et, tetum as porem et que sim natiis doluptatures et, sam rehent alicipis suntio conestio ipsandam que prem idi quiasped mod maximod iatium ex et quassimin nonempo reperisci te nonsedit ut auta volorisque paribus.

Navigation

Main Navigation

Secondary Navigation

HTML Elements

Headings

h1

h2

h3

h4

h5
h6

Lists

Unordered List

Ordered List

  1. Item 1
  2. Item 2
  3. Item 3

Links

Link style 1
Link style 2

Paragraphs

Lia sitio blabore ruptatium, to dolorum erum siniscia cor serum sinum solupti aecepe dolupta quiaturion exerum quasi ut et eatemolorem fugit, adistis ab in et dolectem venda custisint occabor esequas core mod est, anditium everes as idundae rferferferi qui re dit eaquo veliquia qui totatiam denis iniscii squatur?

Ant aliquias alis es ma proribus. Solest, officiendic tem eatibeatium re voluptas es diae eate a eostrume nis il erum facit et ex est, ipsae cum simodi tet quos ma volupta aut latur, et quamus nobis netur seritius excero voloratuscia essequaspis sequo cus, everum nissit et fugiaeperor acepedit quatiam et eum volo dicaeribus dest lab illiqua temporrum, que quam que perovidus, voluptatur, officto doluptata nempore icipsapid eatas es eum quiaspis earum que offic tem fugita voluptatinis quis as audigen derferf erition sectasitia solupta nam net quatur andis del ium re enihit aut apelist et es milit quaes ulles expliquunt volorum eictium quia iur, nis dit asped estiatem.

Figure & Figcaption

This is the figcaption
Figure image

References

Links to Web Design Examples

Links to images, textures, or other borrowed assets

All images used on my website were taken by me. I sacrificed my body and ate all the Korean BBQ for this project