Huong Huong Development Log Book @huonghuongdevelopment-blog - Tumblr Blog

CHOPSTICK - Engraving

First attempt:

We went to a random engraver at a shoe repairs. Only engraved in script so it is hard to see. Although, engraving shows better on darker wood chopstick rather than light.

Second attempt:

Using a stencil burner (DIY). Too rustic, and not commercial.

Third Attempt (FINAL):

An actual engravery. Sand blasted and filled with gold. Definitely more consistent and commercial. So we got 4 pairs done overall. Although, some sticks were faint as the quality of the wood on some were poorer than others.

THINGS TO DO (UPDATE)

WEB SITE - Touch ups on index page - Design Bookings, Reviews & Contact (Done in 1 Day) - Code pages - Incorporate filter system into live website - Implement Google maps (if time persists, route planner)

CHOPSTICKS + TEMPLATE - Finalise chopstick business card designs + templates - Find engraver of chopsticks - Find best printing place - Assemble packaging Engrave chopsticks - Finalise chopsticks + Template x 4

MENU REDESIGN - Design menu - Find alternatives of menu presentation - Print - Print x 4

BROCHURES / PAMPHLETS - Create Content - Design - Print - Print x 4

STYLE GUIDE - Start - Finish

CHOPSTICKS - Templates

After a load of different templates, colour variations, and papers...

Closest template to how I wanted it to turn out.

THOUGHTS:

- Window too small

- Paper used: 100 GSM, Standard finish

(ASSEMBLED IMG HERE)

PRINTS - Menu

This is the design of our menu to sit on the table.

PRINTS - Favourites Page

This is a favourites single page menu. This will sit on the table along with the menu.

PRINTS - Pamphlets

We summarised and compressed the menu into a simple take-home flyer. We tried a few sizes and prints.

#pamphlets

BLAH

FIRST PRINTS - Business Card

This is the first concept design of the business card. Not sure if we will use a business card of a new concept, possibly a product.

#business card

Psuedocode

I went through earlier documents and found this gem. It is our draft outline in plain text psuedocode...

When the menu page is loading there are three queries to the database:

- The first for getting the products and the corresponding dish and course for each product

- The second for getting all the dishes

- And the third for getting all the courses

The results of these three queries are encoded as JavaScript variables.

Then all the content (dishes, courses and products) of the page is dynamically generated based on those variables.

When you select/deselect one course/dish, the content of the listings section is regenerated based on the selected checkboxes. There are six cases for this operation:

1. If only courses are selected, the list of products is browsed and only the products that have the course selected are displayed, in this case the dish is disregarded

2. If only dishes are selected, the list of products is browsed and only the products that have the dish selected are displayed, in this case the course is disregarded

3. If both courses and dishes are selected, the list of products is browsed and the products that have both the course and the dish selected are displayed

4. If no course/dish is selected all the products are displayed

5. If a ‘special’ course is selected (in this case Drinks/Desert), all the other checkboxes are deselected (including other ‘special’ courses), the dishes section is disabled and only the products that belong to that special course are displayed

6. If a ‘special’ course is deselected, all checkboxes become available and unchecked and all the products are displayed

When deselecting a course/dish, if no other checkboxes are checked, the ‘Clear Filter/See All’ checkbox is selected and all the products are displayed.

When clicking the ‘Clear Filter/See All’ checkbox all the products are displayed and all the othercheckboxes are deselected.

All the actions are available by either clicking the checkbox or the associated text/image.

Brochure / pamphlet inspirations

Same concept: but repetition of noodle bowls

Red envelop: Chinese culture, and presented like an invitation

THINGS TO DO

(within 3 weeks)

WEB SITE - Touch ups on index page - Design Bookings, Reviews & Contact (Done in 1 Day) - Code pages - Incorporate filter system into live website - Implement Google maps (if time persists, route planner)

BUSINESS CARD - Finalise chopstick business card designs + templates - Find engraver of chopsticks - Find best printing place - Assemble packaging

MENU REDESIGN - Design menu - Find alternatives of menu presentation - Print

BROCHURES / PAMPHLETS - Create Content - Design - Print - Idea: Create it like an invitation eg. You are invited to join the Huong Huong dining/lunch experience

NEW Design (again)

Changed the nav - scroll more in theme with asian culture and less boxy.

Chopstick Packaging Inspirations

Concept: Instead of regular business cards we'll be putting restauraunt details on chopstick packagings and/or either engraving the chop sticks with 'huong huong' and the phone number.

Ideas:

I personally like the box designs. It feels a bit more personal - more like a present to customers and future customers.

Some more Coding..

How i got to this point?

I finally figured out how to do the two-lined nav with the vertical dividers.

1. Added a after the nav item, then put the second line into a . This is all within the <li> tag.

home

About Us

</a>

</li>

in css: in the li items i floated everything left, and styled the p class accordingly. This also shows how I added the the vertical divider by creating a left border towards each nav li item. and removing the left border on the 'Home' list item. by 'border-left: none;"

ul#nav li {

display: inline;

margin: 0px 20px 0px 0px; /* Spaces between nav items */

height: 60%; /*set height to 90% of the navigation div*/

border-left: 1px solid #4d463c; /*this is the divider*/

line-height: 70%; /*this will cause the text to be centered vertically, assuming there is only one line*/

padding: 7px 10px 0px 10px;

float: left;

}

ul#nav li p.bottom-line {

color: #e7e6e6;

text-transform: none;

font-size: 13px;

margin: 5px 0px;

font-weight: normal;

text-decoration: none;

font-family: arial;

width: 110px;

display: block;

}

Coding this:

New Website Design

Redesign Version 2.

Still Contemplating. Nothing final yet.

Redesign Version 3. Less boxy than the other vers.

Creating a Database Structure

Why are we creating a Database Structure?

Answer (soon)

1. Go to cPanel > phpMyAdmin

2. Using the login details we created when making the database 'jasonve1_menu' log into phpMyAdmin

3. Go to Databases

4. Go to 'jasonve1_menu'

Using this info to create the tables/structure of the database:

- Table: Product

o Columns:

§ product_id – int, not null, primary key, autoincrement

§ name – varchar(255), not null

- Table: Dish

o Columns:

§ dish_id – int, not null, primary key, autoincrement

§ name – varchar(255), not null

- Table: Course

o Columns:

§ course_id – int, not null, primary key, autoincrement

§ name – varchar(255), not null

- Table: products_dishes

o Columns:

§ products_dishes_id – int, not null, primary key, autoincrement

§ product_id - int, not null, foreign key (Product.product_id)

§ dish_id - int, not null, foreign key (Dish.dish_id)

- Table: products_courses

o Columns:

§ products_courses_id – int, not null, primary key, autoincrement

§ product_id - int, not null, foreign key (Product.product_id)

§ course_id - int, not null, foreign key (Course.course_id)

5. For the first the first table. Create a Table

6. Add in the details for the 2 columns ie.

§ product_id – int, not null, primary key, autoincrement

§ name – varchar(255), not null

6. Do the same for the following

7. For this table:

- Table: products_dishes

o Columns:

§ products_dishes_id – int, not null, primary key, autoincrement

§ product_id - int, not null, foreign key (Product.product_id)

§ dish_id - int, not null, foreign key (Dish.dish_id)

We have trouble creating a foreign key. So now what?

#database tables #databse structure #phpMyAdmin

Trending Blogs

Recently Viewed Blogs

Huong Huong Development Log Book