WEBSITE REGGAE

To create my reggae website I took a slightly different approach to what we learnt in class. Using the Illustrator I designed all the necessary pages. With alternate Rollover versions. Once I had created all the relevant parts I opened them up in Photoshop. It was then possible to split the image up into 9 Separate Jpegs

Sections of Web Page 

Sizes of Panels (pixels)

1 - 255px x 129px

2 - 517px x 129px

3 - 242px x 129px

4 - 255px x 511px

5 - 517px x 511px

6 - 252px x 511px

7 - 517px x128px

8 - 517px x 128px

9 - 252px x 128px

Here are the necessary Images needed to Create the site 

including the roll over images. I kept everything in the root folder.

In order to put the site together I coded in each pannel. I started with the Index page Obviously.

 I inserted all the correct values into the code so that all the jpegs sat in the 1024 x 768 container 

CSS File I made sure that all the rollover functions worked

For the other pages I just re-saved the index file into the necessary pages.


LEGENDS PAGE

The middle panels - as the middle pannel needed to change on all of the pages it wasn't too difficult to go into the pages and change the Image for each however for the Legends page it was a bit more difficult. To do this researched into adding extra buttons which would allow the middle image to change on just that page.

To do this I had to activate the J query Library, this allowed me to create 3 extra buttons, that allowed me to switch through the middle panels.

You have to load the jquery library before any scripts that need it so best practice is to always put it first

J query short code 

J quiry Library In Dreamweaver

References for J query

http://api.jquery.com/hide/
http://api.jquery.com/show/
http://www.w3schools.com/css/css_display_visibility.asp

The buttons were made in illustrator then saved as 
.png files to allow for transparency

Here you can see the 3 center panels in the div class = images legend 5

this allows the buttons to call these different functions 

Links don't have to go to another page, if you use JavaScript: it just does that on click

JavaScript: aFunction();

And functions always have a () after, inside which you can send variables and parameters to the function but that's not needed here

Eg aFunction($aVariable);

 J query coding for extra buttons

CSS Buttons were placed in 40px x 40px squares

CSS leg buttons 

 When you click a button it links to "JavaScript: buttonOne();" which is a function defined in the script. When you execute a function you say you "called" that function

The script then hides the other 2 images if they are up and shows the one you clicked

CSS middle pannel code

Music

The music was quite difficult. Originally I was gonna have that page linking to a music player but this ended up going horribly wrong. So in order to get the music working I hooked up the button to a youtube video that  is inside a div that is 1px by 1px with overflow:hidden. Unfortunately it does not work as a play or pause button nd there is only one song. But this isnt bad to start with.

I edited the code I found online on jsfiddle and inserted onto every page.

References

http://stackoverflow.com/questions/11651454/play-youtube-video-on-click-custom-button

http://jsfiddle.net/g6P5H/

REGGAE WEBSITE CONCEPT BOARDS

Here are the concept boards for my Roots Reggae Website.


I think I have successfully created a well designed and eye catching web site, that captures the essence of reggae. The problem I found with reggae websites, was that they were all poorly designed. They had probably been made my training web design fans just like me really but they had no sense of colour schemes or layout. i think I have communicated well covering a various avenues. If I had more time I would include allot more content but for the mean time the concept is down. The website is aimed at reggae fans, and people that might be interested in it. I have tried to capture the attention of the viewer by using a simple but colourful design, with easy to use navigation. Overall I think I have done a much better job designing a website than the existing ones I feel. It is simple yet eye catching and definitely captures that reggae roots feel. The natural colour scheme ties in with the song themes.

Improvements

If I were to improve the site I would sort out the buttons on the legends page as they seem a bit pixelate round the edges. I am unsure why this is so as I saved them as .png files which should support transparency.

Fonts used

Tiza - Rough and Natural, Similar to some Reggae Artists.
Chalkboard - kind of hand written more natural 

Colour Scheme

I used the obvious red 'gold' and green, and then decided to use browns to keep with the natural theme.

ISTD FINAL BOARDS FOR PRESENTATION

Here are my final presentation boards for my ISTD brief.

In order to make the restaurant appeal to everyone I thought about how I could make the restaurant an exciting environment to be in. I thought about Anamorphic typography and how this could be used around the restaurant. I feel it would be nice to have the restaurant like a converted letterpress workshop, this would give the customers a feel of what it would be like to be in a design studio.

I thought it would be a nice touch to have typography furnishings to its extents. They are a nice touch I feel. Staying with the light hearted feel to the restaurant I thought it would be funny to have urinals with the most hated typefaces on so you can show your appreciation. For the web side of things I mocked up a website to show how it would work across different media. This allows the customers to look at the menu and the restaurant. It also has information on the where abouts and also the history of the restaurant.

Final Products

HISTORY OF REGGAE - PAGES UPDATE

After getting my home page sorted I worked on the other sub pages. I created each seperate page on Illustrator to start with them brought them into Photshop in order to cut them up into 9 seperate jpegs.

By splitting the image up into these separate files I can build the website from these boxes

This will allow each box to act as a button the four corners will have a roll over feature

linking to the correct page.

Roll Over Feature

Legends Links

Toots and the Maytals

Bob Marley and The Wailers

Lee Scratch Perry

History of Reggae

Events Page

MUTTON QUAD - RE-DESIGN

After the crit the other day it was made apparent that my branding needed a tweak. Although everybody really loved the concept and branding they thought it should just be 2 colours rather than three. It was also mentioned that It would be nice to screen print the products as this would be much more relevant to the nature of print, and also give it that personal touch that a printer cannot do.

So after the crit I went away and I looked at changing the colour scheme. I got rid of the orangey yellow and just went for the dark red and white. This was a bit of an issue as I had to change my logo completely it would not work with just red ad white the way it was. Here is what I came up with.

     AFTER                                  BEFORE 

I Changed the Steak House style typeface as this was sending out the wrong impression

I decided to Just stick with Rockwell. To solve the colour overlap problem I decided to put

the Title in a banner underneath this Looks much better now and I think the reduced colour

scheme definitely helps to give a classier image.

Menu Outside and In - 1 Colour Print Much easier to Read

Represents the restaurant perfectly.

Type Terminology Menu Outside and In

Place Mats / Cutting Mats

Beer mats - 2 Sans Serif, 2 Serif

If I had the time I would produce a larger set of beer mats with different fonts. 

Front

In order to screen print all my products I have prepared the images in illustrator ready to be

exposed. Once this is done I will carefully try and double side print my products.

Back

PRODUCT MOCK UPS

For my branding I wanted to create a letter press style identity box for mutton quad.

This is a mock up drawer I made on the laser cutter with some 3mm MDF. If I had more money and time I would probably use better quality wood and actually make it like a real letter press draw with the metal pin fasteners on the insed and thicker more authentic Wood.

I engraved the logo onto the Lid. Ideally I would of liked to of burnt the image onto

the surface with a rastered effect but unfortunately I was having trouble with the laser cutter.

Set of Products - Menu, type journal, place mats, business cards and beer mats.

Business Cards - Various Colours and styles.

Beer mats - Informative

Beer mats

Menu and Type Terminology

Inside of Menu and Type Jornal

Selection of Products Room for one More?

I was going to include cutlery.

ISTD MUTTON QUAD LOGO DEVELOPMENT

After thinking about how I wanted the restaurant to look and operate I turned my focus onto the branding of the restaurant itself. I decided to keep the name Mutton Quad as I had based my whole menu on food/type puns. So I started sketching a few ideas down. 

 I decided on this style in the end. I liked the idea of using negative space.

It makes you look twice at the logo I feel.

It also popped into my head that all the branded products should come in a

 letter press draw with each product in a different section. I think this will make a nice

touch to the branding as a whole, Hopefully it will tie in with the whole theme

I am going for. I will use the laser cutter to produce the box.

I decided to come up with some different place mates fot Mutton Quad
I think I like the cutting mat design best. This keeps with the theme the most
I feel and also is a nice touch to restaurant. Practical in both ways.

I also thought about how I could get information out during the meal and
thought the best way to do this would be to use beer mats, everyone picks them
up and reads them so In order to teach the customers about type I wanted to produce
a series of beer mats that have a selection of serif and sans serif fonts on.

I looked into designing some business cards too for the branding and came up
with several different designs experimenting with type and image.

Too Boring, doesn't comunicate the restaurant 

I decided I liked my negative space idea best

I think it looks fun and quite smart. 

I wanted to make the menu a bit like a letter press drawer too to keep the theme running.

I thought this would be a nice touch however I didn't like the brown natural colour scheme

very much.

 I took inspiration from this Restaurant logo I liked. I liked the colour scheme so 

decided to use it. The colours stimulate hunger.

Here are a few of the logos I came up with.

Although I like the white ones I just didn't think they stood out enough.

I decided to go with the top right which uses a combination of the Haymaker type

and also Rockwell. I also kept with the quad theme and used a square.

I tried to find different ways of making the type stand out with the colour scheme.

Here you can see the white backgrounds make it more legible.

Although I really liked this style after re-assessing I have decided it looks far too garish and

makes it hard to read the dishes.

Here is the front and back of the menu on the left and the menu on the right

 Here is the type reference book I have made to go with the menu

 Alternate back...decided against this. Too big

want it to be subtle from outside.

I have decided to go with this menu. Its much easier to read

and is simple and more stylish I feel. I still kept the feel

of the Letter press drawer too I hope. 

 I also came up with a range of business cards to go with the branding

I would use spot colours if printing proffesionaly to save on ink.

I would also emboss them to give a classy impression. The quality

of the printing has to represent the food.

I designed informational beer mats with different typefaces on

displaying the date they were created, who made them, and the type.

I also decided to make placemats that are cutting mats to keep with the 
Design studio theme,

If I had enough time I would set up a website for Mutton quad.

This is how I would want it too look. I kept it simple to give it that designer

feel to it. I would keep the website fairly simple with a section about the history

of the restaurant. I have gone with the theme that the restaurant was previously a type/design

studio. The site would also include helpful information on typography with also

pictures of the creative interior and also the menu itself.

The products on a whole.