Monday, 30 December 2013

OUGD504: Design for print and web/ Studio brief 3 - Concept.

Today I began working on the concept of my typography theme restaurant. I drew up a spirder diagram in which I wrote down every word I could think of to do with typography. 

The phrase I found that stood out and inspired me the most was 'full stop' To mean the end of a sentence in the english language I thought that the phrase also played reference to the idea of feeling 'full' from food and 'stopping' off for something to eat. Therefore it would be a restaurant where you would simply stop and get full.

I then began to think about who the customers of this restaurant could be? I had considered making an eating place that could be seen as a deli where students could go for lunches, however after thinking a bit further I came up with the idea of a restaurant in an airport. It further played on the idea of stopping off somewhere, much like airports are often a stop off location on many peoples travels. 

Inspired by the concept of travel I started to consider the type of menu I could have availiable for the customers. I decided to create a menu that would incorporate food from a variety of places in the world; England, Mexico, Germany, Spain and Italy, thinking of both small dishes for people with little time/hunger to eat and larger meals for those with longer time to eat. 

Below is the menu I came up with: 

English food:

- Leek and potato soup. (v)
- Beef, yorkshire pudding and gravy wrap. 
- Fish and chip butty topped with a zingy tartar sauce. 
- Ploughmans sandwhich.
- Vegetable stew with herb dumplings (v)

Mexican food: 

- Nachos with cheese, salsa, guacamole and sour cream dip. (v)
- Chicken burrito.
- The torta sandwhich.
- Roast vegetable empanadas.

Italian food:

- Cheesy garlic bread.
- Calzone. 
- Italian sub. 
- Chicken, pesto, tomato pasta. 
- Goats cheese and honey and rocket pizza bread (v)

German food:

- German sausage with a cheese centre in a white toasted baguette.
- Doner kebab.
- Spicy pork and sauerkraut sandwhich.
- Kasespatzle - noodles ellemental with cheese and fried onions. (v)

Spanish food:

- Chicken and chorizo paella. 
- Spanish tortilla. (v)
- Cidre soaked chorizo and manchego cheese baguette. 
- Toasted halved tomato and olive baguette. (v)

Puddings/ Pastries:

- Jam and clotted cream scone. 
- Churros and chocolate dip. 
- Strawberry macaroons. 
- Apple Strudel. 
- Orange and almond cake.  






Once I had come up with a menu I started to think of the setup of my restaurant/deli. I wanted the food to seem quite quickly prepared and distributed, not particularly like fast food but like that of street food, which you would pick up from a number of market stalls, in boxes and take away bags. Thinking about this I began to sketch up a number of possible ideas:

The ideas that I thought of played with both my themes of typography and travel, one idea I thought of was how to design the sticky labels for any food that I would be distributing. The kind of information that I wanted to display on these was details such as; the name of the food, what country out of the 5 I had selected it had come from, the price, the best before date (relevant for foods such as sandwhiches/wraps) etc. The design that I came up with for this information, was like a replica of a small flight ticket.

The next idea I thought of was to take brown paper bags, which any food ordered would be placed into, and stamp these bags, much like peoples passports are stamped at an airport when travelling passed borders, with the country that their food is from, fabricating the idea that they have travelled before they have even stepped foot onto the plane. 

I also came up with an idea that concerned manipulating typography to create images. Below I thought about creating a print which I could put across packaging, inspired by the patterns I had previously seen in my deli research (context blog). The print is made up of a number of images of food all constructed from pieces of type or puncutation etc.

Before I went any further with design I made a list of what printed material I wanted to produce:

-Business card. 
-Menu.
- Packaging:
  Food boxes.
  Sandwhich/wrap wrappers.
  Cups (hot and cold drinks).
  Sticker labels.
- Apron. 
- Napkins.
- Super impose rest of uniforms.
- Propose sinagage. 
- Propose intertior design. 


Concept:

Full stop. 
International canteen.

An international Canteen in which people travelling through U.K airports can visit and enjoy eating filling food, from a range of countries in a casual dining experience. 

Travellers can enjoy both hold and cold, starters (small plates), main courses, and desserts from England, Germany, Mexico, Spain and Italy. Like other food establishments such as Nando's users of the restaurant are able to come in and sit at benches (casual dining) look at menus and then visit the till point where they both order and pay for their food at this point. (Airport eateries often get very busy and so this is the most efficient way to police payment). Customers only have to wait a short amount of time before they are served there food due to a select range of hot dishes, and a number of cold which would be pre made. 

Staff then deliver food to the tables in insulated boxes/wrappers/brown bags to that the customer can enjoy their food inside the canteen at the benches, or if they have ordered food which they would like to take elsewhere such as a sandwhich and pastry, can easily be transported.

Next I will move on to coming up with a logo design.   

     


Thursday, 12 December 2013

OUGD504: Studio brief 3/ Print and web - Dissecting the brief.

Today we did a class that allowed us to break our briefs down so that we could really understand the ins and outs of the Brief we had chosen. 

We narrowed our brief choice down from 3, which we had initially picked based upon interest. However we noticed that once we looked more closely at the briefs, that some were written in a very vague way. Therefore I chose my final brief as it was more specific than the other briefs I had chosen.

Initial 3 briefs:
-The train standing at platform two.
- On yer bike.
- 73rpm - mp3.

The final brief that I chose to work with was On yer bike, I found that this brief was specific enough to give me some structure, but also gave me enough free reign to be creative. Below is the brief I chose:

5 problems the brief proposes:
- There is not a system for cyclists to easily navigate around cities.
- Cyclists are not able to read maps whilst cycling. 
- Current street signs only cater to people driving motor vehicles. 
- There are no electronic devices to satisfy the needs of the city cyclist. 
- There is no way to tell what is an interesting, safe and short route.

Why do you want to solve these problems?
- Easier navigation makes for a more enjoyable and efficient journey. 
- Correct navigation proves for safer roads. 
- More people may be swayed to travel their own streets through cycling, which will decrease our carbon footprint. 
- Get people back in touch with their surroundings as we spend so much time rushing to get to places in cars and trains.

5 Facts about your subject and content:
-Renting bicycles is becoming a more popular travel option for people moving around the city. 
- Using a bike is cheaper than taxis/metro. 
- Riding a bike means unlimited mileage. 
- No carbon footprint from using bikes. 
- The outcome needs to be a wayfinding system.
- Needs to be appropriate for both residents and visitors.
- Need to find out about how visitors travel around cities. 
- Needs to be information materials and promotion.

5 facts about the audience:
- They live in cities.
- They are visiting cities. 
- They already cycle. 
- They are looking to travel around the city via bicycle.
- They have spare time to travel via a slower option. 
- They live a green lifestyle or want to pursue one. 
- They want to see the city on their travels and enjoy the journey not just reach the destination. 
- They need a navigation system that improves city travel.
- People who have less money to dispose on travel than others.

5 Things you want to communicate:
- How to get around the city on a bike. 
- Enjoy the city you live in. 
- Short routes, time scales. 
- Cost of cycling .vs. driving. 
- Effect of cycling on the environment. 

5 things I don't know about this brief:
- What city is this taking place in. 
- What language do these people speak if the outcome has to be essentially typographic. 
-  Is it supposed to be an international project to fit into any culture/language. 
- What is the appropraite media? Electronic/paper based. 
- Residents and visitors are two totally different audiences with opposing priorities when travelling within the city. 
- How do you make this system appropriate for a wide appropriate for any age. 

However, after doing this workshop, I came to realise that doing a wayfinding system would be way outside of my comfort zone. Nor, did I know anything about cycling, and so instead of making it difficult for myself, doing a brief that I wasn't even a little comfortable with. I decided now would be a good time to go back to the selection of briefs, and choose one where I could develop in an area of graphic design that I was interested in. 

New brief selection:

The Brief that I have chosen to work with instead is the 'Mutton quad' brief, After reading the briefs I picked this one because, I have often found branding quite difficult, as it needs a great deal of understanding of the company, to create something appropriate. This is something I would like to practice and improve at, and so branding a restaurant for my brief would be a great solution for this. I have also had an interest in packaging design which I have not had the possibility to do yet, this could also arise in this brief.

The brief:

With this new brief selection I decided to go ahead and re-answer all the current questions according to this brief. 







OUGD504: Design for web/ Studio brief 2 - Contact us page.

Today I coded the final page on my website which is the Contact us page. 
On this page I had a lot of great ideas that I wanted to do including:
- A search form to find your closest fruit store. 
- A scrolling box with the results of the search underneath. 
- To the right a map that shows the location of the store in context to its surrounding location. 

As I am not sure how I would go about inserting these objects, This page will be mostly proposed, and images placed where certain elements would go. 


In illustrator I created the following image:


The image, which I will embed as the background image into the page container, displays where the position of the search box would be, the scroll list and the map. I have however left the search box/buttons unlabelled as I am able to do this by overlaying text, a space to the right of the box for a small amount of text, and a space underneath everything to insert a form, as an easy contact point for customers. 


Notice this background image has around a 170px top margin before the page design actually starts, this is due to the fact that the nav bar will lay over this section of the design.



In dreamweaver I styled the text that would over lay the search box on my page. 

This would be inserted inside the contact us box, which holds the whole background image seen above. 

I created a tag called find a store as shown below:

#findastore {
width: 400px;
height: 50px;
margin-left:100px;
margin-top:205px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#FFF;
position:relative;
float:left;
z-index:10;
}

HTML coding for this section:

<div id="findastore">
            Find a store:
                <br>
                <br>
                City:
                <br>
                <br>
                <br>
                <br>
                Postcode:
            </div>

I then went through the same process as I have with many other simple text tools and used the inspect element tool to specify where the text should be placed, and put this into my final code. I used line breaks just to specify the space in-between both pieces of text. 

Next I moved onto the text that I wanted to place in the right hand column. 

I came up with some dummy text, just so that I could practice positioning for now, and gave it some simple styling on my style sheet. 

            <div id="contactrighttext">
                                frurt frurt frurt frurt frurt frurt frurt frurt frurt frurt frurt frurtfrurt frurt frurtfrurt frurt frurtfrurt frurt frurtfrurt frurt frurtfrurt frurt frurtfrurt frurt frurtfrurt frurt frurtfrurt frurt frurtfrurt frurt frurtfrurt frurt frurtfrurt frurt frurtfrurt frurt frurtfrurt.
                                </div>

#contactrighttext {
width: 440px;
height: 40px;
position: relative;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000;
}

I then used the inspect element tool tool to position the text where I wanted it on the page, according to padding and margins:


I got to work on the last section of this page, the small form that would sit under all the other content to ensure that users could contact/ send a message to the company about any matter that they would wish. 

To do this I followed the same framework that I did for my previous forms:
First I went into the HTML code and type up the frame work following the one I had done previously as a reference:

        <div id="webform3"> <form>
    First Name: <input id="first name" type="text" name="firstname">
     
     
    Surname: <input id="surname" type="text" name="surname">
     
     
    Address: <input id="address" type="text" name="address">
<br>   
<label>  
Your message
<textarea id="yourmessage" name="yourmessage"></textarea>

<input type="submit2" name="submit2" value="Send" id="submit2" />

</label>

</form></div>

and Styling in the style sheet:

/* Styling the form as a block/*
#webform3 {
float: left;
width: 320px;
font-family: Arial, Helvetica, sans-serif;
display: block;
background-color: #e5348a;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
margin-top: 450px;
margin-left: 64px;
color: white;
padding: 20px;
margin-bottom: 20px;
}

Styling the submit button:

#submit2 {
margin-left: auto;
margin-right:auto;
margin-top: 10px;
color: #fff;
width: 135px;
height: 30px;
background-color: #f19ac0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
}

The final form in place:










OUGD504: Design for web/ studio brief 2 - Menu.

My menu page has been the easiest to do so far, it follows the same set up in terms of image boxes as my previous two pages (about us and health benefits):

The first two sections have no overlaid text and are solely 2 images inputted into the background which I designed in illustrator, to insert these into the website. The third section is of the same set up however it has some simple overlaid text. 

I did this easily in the style sheet by creating the following three tags, as I had for the previous 2 pages, creating my first section to be the longest at 680px and the following 530px.
Below are the styles for each section,  that compromises, the width, height, a background colour similar to that of the image, for preload, and a background image as well as the small margin of 10x underneath.

#menu-red {
width:1024px;
height:680px;
background-color:#ed1c24;
margin-bottom:10px;
background-image:url(menu/images/images/menu-red.png);
}

#menu-blue {
width:1024px;
height:530px;
background-color:#79c9da;
margin-bottom:10px;
background-image:url(menu/images/images/menu-blue.png);
}

#menu-pink {
width:1024px
height:530px;
background-color:#f19ac0;
background-image:url(menu/images/images/menu-pink.png);
}

Below is these styles called into the HTML source code, and then live in google chrome, with both the header and footer pasted in as before. 

<div id="menu-red">

</div>
<div id="menu-blue">

</div>
<div id="menu-pink">

</div>



For this page all I wanted was 4 simple pieces of text on the last section (pink section) underneath the  4 illustrations. 

I created a div tag and a div class for the text:

#menu-pink .titles {
margin:0 auto;
width:700px;
}


#menu-pink p {
display:inline-block;
width:170px;
height:70px;
color:#ffffff;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
}

Whilst the div class 'titles' specified how wide the text should be as a whole, where as the div tag specifies the width and height for each individual title, white in colour and centre aligned. I then  used the inspect element tool to test how large the top margin should be so that the text sits comfortably below the illustrations. 




I found that the most appropriate top margin was 405px and so I pasted this into my code to finish the page off.

#menu-pink p {
margin:405px 0 0 0;
display:inline-block;
width:170px;
height:70px;
color:#ffffff;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
}







OUGD504: Design for web/studio brief 2 - Final Crit for web.

Today we had our final crits for the web session, and although I had not completely finished my website, the only page I had left to code was the contact us page, therefore I was hoping to get some quite good feedback.

We were asked to leave some questions with our work about things we wanted feedback on:

I left the following questions/ subject matter regarding feedback:

1. Who do you think the website is aimed at?

2. As the website is promotional do you think photographs need to be used, or are the illustrations enough on their own?

3. Is it easy to navigate around?

4. Would you want to go their with your friends?


The feedback I received:

Contact page could do with more info.
Menu combinations chart is very nice however there are no prices for specials.

_______________________________________________________________

1) Women who want a healthy and tasty treat.

2) I think the illustrations are a nice touch and are not cliche compared to companies similar to this.

3) Slider works well. 

4) Easy to navigate around although not sure what the point of the contact page is, maybe make it an ordering page?

5) Yes, sounds tasty. 

_______________________________________________________________

1) I think the site works well as a promotional tool, I like the fixed menu at the top, site navigation is pretty easy.

2) Although it is not necessary and hard to do, an interactive element with the menu would be a good feature where you could design and pick your own flavours. 

_______________________________________________________________

1) Aimed at people watching their weight. 

2) Photographs would show what the yoghurt looks like and this is needed to sell the product. Although the illustrations work really well on their own.  Maybe consider putting a photograph on just one of the pages, with a blank white background. 

3) Simple and easy to navigate around, this works well, change the images on the slider as the first and third are the same. 

4) Maybe the contact us page should have a form, where people can contact the store, as at the moment it has no information on it. 

_________________________________________________________________________________

I was very impressed with the range of feedback that I got from my peers, most of the feedback I found was about the lack of information on the contact us page, however this is because I hadn't had enough time to design it before the crit. 
I will however as one of my peers suggested, be putting a contact form on this page, as well as a map, a search and scroll menu, with details such as phone numbers, addresses and opening times. 

Another piece of feedback that was also valuable to me was who they thought the audience was, my target audience was, students, the health conscious, with a emphasis on women because they are into health food more than men. However neither of the people who commented on my audience question thought that students were also an audience. To combat this I designed an image to put into my slider what would attract younger people to visit Frurt with friends. I also realise that healthier foods are normally more expensive and this would cause students to stay away, however I decided to incorporate the idea of reducing the price, and visiting the store with friends into the slider image. 



I also designed the contact us page since the crit, and this can now be seen below:


I have also now made sure that all 3 of my homepage slider images are different. 

Although an interactive element to the site could be very innovative, I do not have the capacity of knowledge to do such a thing. Also, I think including this tool, so that users would have the ability to make combinations of froyo, wouldn't be appropriate for the user of my audience and would make the website seem younger than it is. This is unless, people would be able to tally up how much they would spend on their favourite combination, or how many calories it would include. However I would have no clue where to start with an element so complex.





OUGD504: Design for web/ Studio brief 2 - Health benefits page.

Today I also worked on the heath benefits page:
The health benefits page follows the same arrangement as my other 3 section pages - About us and menu. 

Therefore I wrote up the style sheet for the 3 main sections as I had done for the previous page.


#healthbenefits-pink{

width:1024px;
height:680px;
background-color:#F09;
margin-bottom:10px;
background-image:url(images/healthbenefitspink.png)
}

#healthbenefits-blue {
width:1024px;
height:530px;
background-color:#CFF;
margin-bottom:10px;
background-image:url(images/healthbenefitsblue.png)
}

#healthbenefits-green {
width:1024px;
height:530px;
background-color:#6C3;
margin-bottom:10px;
background-image:url(images/healthbenefitsgreen.png)
}

I only had one piece of text to overlay ontop of the pink section which was very easy to do.

I styled this in terms of colour and size in the style sheet, called the div tag to the html, then positioned it on the page using the inspect element tool.

Text style:


#healthbenefitspink-text {

display: inline-block;
width: 400px;
height: 70px;
color: #ffffff;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: 100;
}


In HTML:


 <div id="healthbenefitspink-text">

            Know what's in your yoghurt.
            </div>







Next I moved onto the bottom section (green section) where I simply wanted to list some information in two columns underneath the left and right illustrations. 




In order to do this I styled what I wanted my text and text boxes to look like on my web page, using my wireframes for measurement reference:


Left column:


#healthbenefits-green_textleft {

float: left;
margin: 220px 0 0 0;
width: 240px;
height: 170px;
color:#6C3;
background-color:#FFF;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
margin-left: 30px;
font-size: 14px;
padding-right:20px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

Right column:


#healthbenefits-green_textright {

float: right;
margin: 220px 0 0 0;
width: 240px;
height: 165px;
color:#6C3;
background-color:#FFF;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
margin-right: 30px;
font-size: 14px;
padding-right:20px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

The text is styled to adhere to the rest of he website, and is coloured to match that of the background colours. I have again used to border radius edit to control the sharpness on the edges of the boxes I have included. 


I then called these div tags into my html code and created an unordered list, so that each set of sentences I wrote would be formatted in bullet points, an ordered list would mean that each of my points would be numbered which is not what I wanted. 


          <div id="healthbenefits-green">

            <div id="healthbenefits-green_textleft">
            <ul>
<li>%100, all natural, freshly made on site daily.</li>
<li>Fat free and around 60 calories.</li>
<li>No artificial sweetners and no added sugar.</li>
<li>Gluten free.</li>
<li>Vegan dairy free option availible.</li>
</ul> </div>
            <div id="healthbenefits-green_textright"><ul>
<li>No artificial ingredients or ready made mix.</li>
<li>No calories from fat or high sugar content.</li>
<li>Doesn't only have a dairy option.</li>
<li>No high refined sugar.</li>
<li>No modified food starch.</li>
</ul></div> 

Below is the result of these columns:





Creating the table overlay for my middle section (blue):





Unsure how to go about creating a table I asked a friend who walked me through and taught me the process:

First I had to go to the table menu and select to make a table:




I put in the values according to my wireframe and selected the amount of columns and rows I needed which inserted this piece of code into my html:

<table width="460" border="0">
  <tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

I used design view to alter the table in terms of column width and height, For example this is how a table appears once made from the menu, in design view. 
I then started to plug in the content for the table and resize the width of the columns so that they were appropriate the the content. 



Once I had done this in design view It had automatically changed my source code to this:

<table width="460" height="138" border="0" align="center" cellspacing="0">
  <tr>
    <th width="83" scope="row">100ml</th>
    <th width="92">Frurt dairy</th>
    <th width="120">Frurt non dairy</th>
    <th width="148">Regular Ice cream</th>
  </tr>
  <tr>
    <th scope="row">Kcal</th>
    <td>60 Kcl</td>
    <td>50 Kcl</td>
    <td>155 Kcl</td>
  </tr>
  <tr>
    <th scope="row">Fat</th>
    <td>0g</td>
    <td>0.1g</td>
    <td>7.9g</td>
  </tr>
  <tr>
    <th scope="row">Carbs</th>
    <td>12g</td>
    <td>8.42g</td>
    <td>5g</td>
  </tr>
  <tr>
    <th scope="row">OWS</th>
    <td>8g</td>
    <td>6g</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th height="30" scope="row">Protein</th>
    <td>3.4g</td>
    <td>3.4g</td>
    <td>2.7g</td>
  </tr>
</table>

Now that I had the frame work for my table down I went into css to design the aesthetics of the table:

#healthbenefitstable {
float: left;
width: 440px;
height: 130px;
color: #36C; 
background-color: #FFF;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
margin-left: 40px;
font-size: 14px;
padding-right: 20px;
padding-bottom: 20px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
margin-top: 240px;
margin-right: 0;
margin-bottom: 0;
padding-top: 15px;
padding-bottom: 15px;
font-weight: normal;
}

Once I had got my table how I wanted it by playing around with values such as the margins and padding etc, I got the result below: