The aim of this magazine ad is for the audience to get a taste of the website and be taught how to make a cocktail. I chose video as a format for this advertisement as I believe it is the best way to teach someone.

First I shot the video below with one camera camera angle. I kept the angle the same so that I could line the video up with a photo n the advertisement.

Below is the image I used on my magazine advert.

And here is how the video will line up with the advertisement photo with the help of a QR code and a phone.

The image on the advert has been edited in a watercolour to fit in with the same style as the website. Below is how the ad should look when being used by the audience.

The ad has been designed very simple. I wanted to inform the audience of a variety of cocktails of cocktail names. This should get the audience think and hopefully intrigue them into using the QR code. I wanted the QR code to be the focus of the design.

Building off of my original prototypes I set out to make an interactive business card sized advert which with the pull of a tab would make a cocktail down or fill up. The Gif below shows how the 3 layers of the design work and how the finished design should look.

As I wanted to great a series of designs for this ad I thought it would be nice to use a diferent glass per design. Below are some of the diferent variations of the design keeping the background and size of glass consistent throughout.

Zombie:

Long Island Iced Tea:

Purple Rain:

Because of how the design functions I am not sure whether the the Purple Rain will work because of how short the glass is. There may be a way round it.

The wireframes for my designs are below. Some parts of the outside of the wireframe need to be cut out. Hopefully this goes well when printing. 

http://www.yamaha.com/about_yamaha/corporate/brand/tuning_fork_mark/index.html

Here are the corporate philosophical beliefs of Yamaha which go into more detail to their belief in Kando.

Kando is a Japanese word for the simultaneous feelings of deep satisfaction and intense excitement that we experience when we encounter something of exceptional value.

Yamaha Motor strives to realize peoples' dreams with ingenuity and passion, and to always be a company people look to for the next exciting product or concept that provides exceptional value and deep satisfaction.

Kandō in translation describes the sensation of profound excitement and gratification derived from experiencing supreme quality and performance.

My own interpretation of Kando from the diferent definitions out there is that it is the emotion brought up between a person and something else they are using. In this circumstance, the customer and their motorbike or piano.

I plan to use this theme of two things coming together within my designs as it is the key concept within kendo. This could easily be symbolised simply with shapes overlapping to create another shape.

My initial ideas are to have a certain amount of interactivity with the paper in a leaflet or flyer design. My first thought was to create a series of business card sized flyers as seen below that look although the liquid inside the glass is going down when the audience interacts with it.

I like the interactivity with this design but may have to change it so that the drink fills up when they pull the paper out. This fits with the theme of cocktail making, rather than cocktail drinking better.

The content on the inside is undecided. I may create a series of design for diferent cocktails with the recipe for each on the inside. The challenge with this idea is getting the designs to fit with the design of my watercolour styled website.

A similar idea was a leaflet which used a similar layered aesthetic to create a glass filled with a liquid.

When opened up the cuts would then fit with the inside illustration.

I began by sketching out designs small as I want to keep the design simplistic and able to work at any size. The symbols I began drawing were based around the original love heart symbol. One of the issues with this is that the love heart actually represents two anatomical hearts together, whereas Kando is less about two hearts and more about one heart and its connection with a something else. 

Most of my sketches are based around two simplistic shapes crossing over, much like a venn diagram, and creating a third section. This represents the interaction between the person and (in Yamaha's case) a motorcycle or instrument to create the Kando.

Some sketches are more curved and look a lot more friendly and peaceful whereas the the designs with corners tended to look more powerful.

I then mocked up multiple designs in illustrator to get a clearer idea of how they would look.

 The design below is one of my favourites because of its simplicity, although I can't help thinking that it has been done before.

I asked people in the studio and they said it looked similar to the air b&b logo. It is similar but differs in a lot of ways and overall.

It also resembles the album artwork of Odyssey by Fischerspooner but is still a bit diferent.

I decided to experiment with the shapes more to become slightly more abstract and unique in appearance.

Feedback showed that the emblem below was the most pleasant looking.

Mo suggested that I should consider more abstract solutions. The love heart symbol is quite obvious. he suggested continuing my research into the philosophy of Kando to give a more informed design rationale. An example he used was the Mitsubishi Logo which is a mixture of family crests and elemental emblems.

I wanted to incorporate the imagery of fingerprints to show the interaction of the customer with their product which produces Kando. 

The Yamaha brief can be found here.

The Graphic Design Award by Yamaha (GDAY) is a global award that looks for new designs of marques, symbols, and pictograms that, in a universal way, promote our 2014 theme of Kando in the truest sense of the word."Graphic design is global visual voice"by Neville Brody

PHILOSOPHY
Whilst each of our Yamaha corporations, Yamaha Music and Yamaha Motor Co., exists in different global markets, we share the same passion: to be thought provoking.Whether through motorbikes or musical instruments, Yamaha produces the tools that maximise human possibility, revitalising the spirit and bringing joy to life.We believe inthe power of design.We value new talentwhich is creatingthe next generation of design.

Why graphic design ?

We believe graphic design has the intuitive power to communicate with people all over the world. This power is captivating and lifts the heart. The media of graphic design reflects the spirit of the now.

Why competition ?

Yamaha has supported various competitions relating to music and motorcycle culture. Now we feel the time is right for us to support the global communication culture of graphic design, helping to discover and identify the next generation of creators through awards and promotion.

THEMECreate a Graphic Form ofKANDOThe Japanese

This project has been interesting. Although I would like to have learnt more about coding, I have learnt a lot more than I thought I would, mainly on my own using books. If I had more time I would like to have coded my website. I designed my website in a way that I don't think It would have been too hard to do. I am glad that during this project I have created work that didn't use vector based designs as I often do. The success of the watercolour photo editing has taught me that I should try other things before vectors. Skeuomorphism is something that I have not experimented with much, and this project has showed me that it can be used really effectively if done for the right reasons.

The knowledge of web safe fonts and colours will help me in future when designing for web. I found that a lot of people were designing their websites in illustrator of indesign. I initially started designing in Photoshop due to the capabilities of photoshop allowing me to edit my images to the Skeuomorphic style, but I found that I will design in photoshop for web in future as it allowed me to design at the correct PPI and the functionality of layers helped organise the way that my website worked.

The skeuomorphic design of the website is inspired by the book that I used  during summer to document and record my research. The research has been recorded during my time working in a bar and is written in quite a formal manor. The watercolour styled photos were a way that I could keep the overall look of the website looking handrendered and slightly messy. The websites homepage is a full windowed image of a messy bartop with the book in centre. This sets the tone of the website instantly. The Homepage image stays static throughout the rest of the website with scrollable watercolour paper textured layer which my content rests ontop of. The navigation bar is designed to look like the tabs of a book to keep the skeuomorphic design consistent.

The website is seperated into 5 sections: Glasses, Equipment, Techniques, Garnishes and Cocktails. The websites is aimed at a wide audience range so has a simple layout, making it easy to navigate. 

The navigation is made even easier with the consistency of content. Once the user has visited one page, they know to expect a title, short explination and then multiple examples with apropriate images to support them to the side. The homepage has is minimal with just an ‘enter’ button that is underlined when a mouse hovers over it. This hoverover will also apply to the tabs at the top of the website. The ‘Bartending 101’ title in the top left of the page also acts as a homebutton if needed.

Homepage

The homepage is a simple still of the book with an enter button.

The video below shows how the website would look and function in a web browser.

Here are some mock-up images of how my website would look inside a browser on a macbook pro.

As you can see the Homepage above stays static throughout the website as a background with a scrollable watercolour textured surface for the content to sit on.

Basic Tags

<html></html> Creates an HTML document

<head></head> Sets off the title and other information that isn’t displayed on the web page itself

<body></body> Sets off the visible portion of the document

Body Attributes

<body bgcolor="pink"> Sets the background color, using name or hex value

<body text="black"> Sets the text color, using name or hex value

<body link="blue"> Sets the color of links, using name or hex value

<body vlink="#ff0000"> Sets the color of followed links, using name or hex value

<body alink="#00ff00"> Sets the color of links on click

<body ondragstart="return false" onselectstart="return false"> Disallows text selection with the mouse and keyboard

Text Tags

<pre></pre> Creates preformatted text

<hl></hl> Creates the largest headline

<h6></h6> Creates the smallest headline

<b></b> Creates bold text

<i></i> Creates italic text

<tt></tt> Creates teletype, or typewriter-style text

<cite></cite> Creates a citation, usually italic

<em></em> Emphasizes a word (with italic or bold)

<strong></strong> Emphasizes a word (with italic or bold)

<font size="3"></font> Sets size of font, from 1 to 7

<font color="green"></font> Sets font color, using name or hex value

Links

<a href="URL"></a> Creates a hyperlink

<a href="mailto:EMAIL"></a> Creates a mailto link

<a href="URL"><img src="URL"> </a> Creates an image/link

<a name="NAME"></a> Creates a target location within a document

<a href="#NAME"></a> Links to that target location from elsewhere in the document

Formatting

<p></p> Creates a new paragraph

<p align="left"> Aligns a paragraph to the left (default), right, or center.

<br> Inserts a line break

<blockquote></blockquote> Indents text from both sides

<dl></dl> Creates a definition list

<dt> Precedes each definition term

<dd> Precedes each definition

<ol></ol> Creates a numbered list

<ul></ul> Creates a bulleted list

<li></li> Precedes each list item, and adds a number or symbol depending upon the type of list selected

<div align="left"> A generic tag used to format large blocks of HTML, also used for stylesheets

<img src="name"> Adds an image

<img src="name" align="left"> Aligns an image: left, right, center; bottom, top, middle

<img src="name" border="1"> Sets size of border around an image

<hr /> Inserts a horizontal rule

<hr size="3" /> Sets size (height) of rule

<hr width="80%" /> Sets width of rule, in percentage or absolute value

<hr noshade /> Creates a rule without a shadow

Tables

<table></table> Creates a table

<tr></tr> Sets off each row in a table

<td></td> Sets off each cell in a row

<th></th> Sets off the table header (a normal cell with bold, centered text)

Table Attributes

<table border="1"> Sets width of border around table cells

<table cellspacing="1"> Sets amount of space between table cells

<table cellpadding="1"> Sets amount of space between a cell’s border and its contents

<table width="500" or "80%"> Sets width of table, in pixels or as a percentage of document width

<tr align="left"> or <td align="left"> Sets alignment for cell(s) (left, center, or right)

<tr valign="top"> or <td valign="top"> Sets vertical alignment for cell(s) (top, middle, or bottom)

<td colspan="2"> Sets number of columns a cell should span (default=1)

<td rowspan="4"> Sets number of rows a cell should span (default=1)

<td nowrap> Prevents the lines within a cell from being broken to fit

Frames

<frameset></frameset> Replaces the <body> tag in a frames document; can also be nested in other framesets

<frameset rows="value,value"> Defines the rows within a frameset, using number in pixels, or percentage of width

<frameset cols="value,value"> Defines the columns within a frameset, using number in pixels, or percentage of width

<frame> Defines a single frame — or region — within a frameset

<noframes></noframes> Defines what will appear on browsers that don’t support frames

Frames Attributes

<frame src="URL"> Specifies which HTML document should be displayed

<frame name="name"> Names the frame, or region, so it may be targeted by other frames

<frame marginwidth="value"> Defines the left and right margins for the frame; must be equal to or greater than 1

<frame marginheight="value"> Defines the top and bottom margins for the frame; must be equal to or greater than 1

<frame scrolling="value"> Sets whether the frame has a scrollbar; value may equal “yes,” “no,” or “auto.” The default, as in ordinary documents, is auto.

<frame noresize="noresize"> Prevents the user from resizing a frame

Forms

For functional forms, you’ll have to run a script. The HTML just creates the appearance of a form.

<form></form> Creates all forms

<select multiple name="NAME" size=?></select> Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll.

<option> Sets off each menu item

<select name="NAME"></select> Creates a pulldown menu

<option> Sets off each menu item

<textarea name="NAME" cols=40 rows=8></textarea name> Creates a text box area. Columns set the width; rows set the height.

<input type="checkbox" name="NAME"> Creates a checkbox. Text follows tag.

<input type="radio" name="NAME" value="x"> Creates a radio button. Text follows tag

<input type="text" name="NAME" size=20> Creates a one-line text area. Size sets length, in characters.

<input type="submit" value="NAME"> Creates a Submit button

<button type="submit">Submit</button> Creates an actual button that is clicked

<input type="image" border=0 name="NAME" src="name.gif"> Creates a Submit button using an image

<input type="reset"> Creates a Reset button

What is SEO?

Search engines use algorithms to assess the suitability and ranking of websites based on search items. Algorithms are diferent for each search engine and are frequently updated to have new and improved results.

Search engine optimisation is the way that we can use what we know about search engines to make our website more likely to show up to the correct audience, using keywords and phrases. There are many ways to improve the SEO of a website.


The video below is a great explanation of SEO

How to improve my websites SEO

Use key words:

Cocktail

Drink

Recipe

etc...

Use headers and Sub Headers

Optimise the website for mobile

Make the website load quickly

Make sure the content is of a high quality

Now that I have decided the overall theme and concept of my website I can begin designing. As the overall look of the website has to keep in tone with the informal content I have chosen to edit all my photos into a style which resembles watercolours. I believe this style keeps in tone with the theme of liquid and has a messy yet nice look. 

I have used this photoshop technique to edit my original research photos into watercolour illustrations that would be seen in a notebook. By not continuing the effect all the way to the boarder of the photo it increases the skuemorphic qualities.

My intentions for the website are to make everything on the website look hand rendered.

Halfway through designing my website I opened the file up as a jpeg in safari to get a sense of how it would look. I soon realised that I had not considered the scale that the website should be seen at. I started from scratch, using photoshop to keep the 72PPI consistent and then changed the scale to one that read and worked better with the navigation.

Before:

After: