Tuesday, 24 December 2013

OUGD504: STUDIO BRIEF 3 - Design for Print & Web // Logo Development

I want to communicate the connection between the typographic anatomic element, the bowl, and the bowl which you eat soup from, in the logo. 

In typography, the curved part of the character that encloses the circular or curved parts (counter) of some letters such as d, b, o, D, and B is the bowl. Some sources call any parts of a letter enclosing a space a bowl, including both parts of a double-storey g and the straight stemon a D or B. The curved strokes of a C are sometimes also referred to as bowls although they aren't closed.

I began to experiment and play with the anatomy of those selected letters. Cutting the letterform down, to create a second meaning for the letterform whilst still maintaining it's original characteristics to make them identifiable as the original letterforms. 

Using the letter O, I tired to highlight the bowl, and tried to make the O look like a bowl, so, dissecting the stroke. Cutting it in half horizontally gave me the look of a bowl, and thickening the inside stroke highlighted the bowl. However, I had to put a top on the letterform, or the bowl doesn't become a bowl.

I mocked up the Bowl-Bowl in Illustrator, the fonts and colour are all yet to be finalised, it'll look a little different to this, If I go with this design. I spoke with Adam for a second opinion, He advised I increase the thickness of the strokes, slightly, just so when scaled down the strokes don't look like a hair on the page. Above you're seeing the modified version. 

I wasn't entirely happy with how the bowl-bowl looked. So I sketched out some ideas with a different letterform. The lowercase b works well as a point to move from, b is the beginning of the word bowl; instant symbolism. I then began to pick apart the letterform, I applied the same ideas to the bowl of b, as I did to the bowl of O. I then decided to make the highlight in the bowl look more like soup, so I applied some motion on the top. This kind of makes the logo look a little like a ladle, adding another connotation to the bowl linking to soup. 

I went and digitised the b-bowls in Illustrator, I also modified the end of the stroke which was dissected. I think the sharper ending works better than the softer ending, it looks more like the letterform has been dissected. Whereas the rounded end looks more like it should be like that, and you stop thinking the letterform looks like a b.

Saturday, 14 December 2013

OUGD504: STUDIO BRIEF 3 - Design for Print & Web // Rewritten Brief

Following the small critique I took part in on friday, I've come away with some more ideas I can use when rebranding the Mutton Quad. I've refined by brief even further, having a much clearer idea of what I wish to create, and a better idea of my audience. Thanks to the other members in my group will helped me define what i needed to do.

The original idea was to make a high-up-market restaurant, called 'The Bowl', which played with typographic anatomy, as the bowl is the centre of a letter form, like the space in the letter 'O'. However, it had to relevance to the food I was serving. So, during the critique, we discussed the idea that the name could directly relate to the food we would be serving. So we thought about what is served in a bowl - eventually ending on Soup. This gave me a product, which I could base the rest of the branding upon. We also talked about the audience, busy people on lunch breaks who grab soup on the go, and then head back to their offices, as the primary audience, however, some people do have some extra time and like to eat in. I went away and rewrote the original brief for additional time.

Thursday, 12 December 2013

OUGD504: STUDIO BRIEF 2 - Design for Web // Coding The Slider

In my website, I wanted to have a sliding banner. I didn't quite expect this to be as difficult as I thought it turned out to be. However, I managed. I had to find some recourses online to make it work. 

I managed to find a jquery.js online, which most developers use to code with. The jquery is incredibly complex, something which I could never every be able to code on my own. As you can see above, it's about 20 full screens worth of java script. 

I then looked at some web tutorials and coded the slider.js Adjusting the number in red, controls the time per slide. 

The styles.css sheet is being used across all my pages, to avoid this, I created an addition .css to link only with my index.html  I created the properties for the slider in this .css 

I linked it to the page, using the same method as I would with any other css.js page, I also linked the jquery.js and slider.js pages to the index page. So they would all work together.

I created a list item, which would contain the images I would place in my slider. I experimented by using an overlay, which had an image title and some descriptive text, however, I didn't think this was necessary, so I turned the opacity to 0% in the slider.css

Tuesday, 10 December 2013

OUGD504: STUDIO BRIEF 2 - Design for Web // Final Crit Feedback

The final crit is an opportunity to show the work we've done at this point in time. I presented the current state of my website, my coding and my design boards. It was done in a similar format to the previous crit, divided into two groups, one group lays out their work and leaves the room, whilst the other group anonymously crits the work - which allows for more honest feedback. Following which, the original group returns to receive their feedback. Then the second group lays out their work, and so on. 

Before I left the room, I left some questions, questions which I would've liked to be answered, which will help me progress in the right direction.
  1. Do you want to stay on the website when you use it?
  2. Is the minimalist theme appropriate?
  3. Does the timeline communicate the order of bond actors correctly?
The first sheet of feedback I received said the following;
  • Considering the visuals of James Bond films the site is a little tame by comparison - homepage visuals are effective but need to command more of the page. 
  • Can keep minimalist to stay with classy theme but need to bulk it up a bit.
  • Timeline is effectively communicative - may require more info (could roll over to present info box)
I felt these comments were fair, although I feel the homepage is fair adequate, I could always try to increase the resolution. Although the current resolution has been informed by my research, and fits a more minimalist style - it's definitely something to consider, though. It might be too late in the game to change this, so I could propose it. I could also add some more content to the homepage, although I don't really want to overwhelm it, I feel the essentials is all it needs. I thought about doing something similar to the timeline page, but I couldn't quite figure it out, I'm definitely going to try and code it over Christmas, but if i can't I'll propose it. 

Second Sheet of feedback:
  • Logo at the top - though it was 510 Bond, at first
  • Any more content?
  • Refreshing central content could link to (or be more relevant to) other pages
These comments were rather short, vague but I got the idea. I'm going to edit the logo, as a number of sheets said the same thing, it's a quick job, so it's no problem doing it. Any more content? This website is work in progress, so yes, there will be. This comment was rather vague. And the central content does link to the other pages. 

The third sheet 
  • Good that it's responsive - looks more professional
  • Could be a little more eye-catching (first page) 
  • Maybe colour accent taken from the images
  • Rollovers may need to be slightly more obvious that they are actually buttons
  • Timeline is great - like the use of something different - circles/zig-zags. This is more eye-catching than the first page. Could be used to make people stay on the website
  • I would work on the timeline layout (as in use it as a running theme throughout)
I agree the first page could be a-little more eye-catching, this seems to be an reoccurring theme across the feedback sheets, so I'm tempted to add more appealing content. The colour accent is a good idea, although taking colours from all the images would take aways from the minimalist style. I could try making a static image and taking a colour accent from that, a static image which would appear on all of the pages, perhaps. I disagree with the rollovers needing to be more obvious, firstly because they're not made from images, they're made from 'a href' texts, in using classes from the different states, so they're not actually buttons, they're text links, also, I think having more vibrant and obvious links take alway from the subtle minimalist theme with the website, although I could adjust the colours slightly to make it marginally more obvious. I'm wanting to use the timeline circle/zig-zag style across more pages, as it seems to have gone down well. 

The fourth sheet of feedback
  • The website is nicely designed. It uses a very clear and structured layout which makes it very easy to use
  • The minimalist approach looks sophisticated but could be modified to resemble the action packed themes of the Bond films? Possibly more colour?
  • The scrolling images work well, although they could be slightly more relevant to the content/pages used on your website - this would give users a better understanding of what your website intends to explain to the users.
  • The timeline looks great - it is a creative and clear way of showing each Bond actor - it might be useful to include a brief intro something on the page, to summarise what you're showing.
  • On the homepage, maybe place the '51' closer together so it is more readable - at first it looks more like 5 and 1 are separate. 
The slider images actually link to pages in the website, although at this point they are redundant, they will be used soon, once I have more content on the pages. As I have said I am planning to sort the 51 out on the logo, it is too far apart, this feedback sheet isn't the first to tell me this. I don't think I need to make the website more action packed, when you're thinking of Bond, half of the character is the action packed spy, but the other half is the sophisticated 'gentlemen', which is what i wish to capture in the website. 

Saturday, 7 December 2013

OUGD504: STUDIO BRIEF 2 - Design for Web // Final Website Layouts

Following making my scamps. I finalised the designs for my website's pages. It's based on the rule of thirds, when split down into 'the rule of ninths'. So the design is more aesthetically pleasing. 

Above is the layout of the Timeline page. It will feature images of all the bond actors. 

Wednesday, 4 December 2013

OUGD504: STUDIO BRIEF 1 - Design for Print // Creative Suite Session 4

During this session, we had to the find the 9 mistakes in this inDesign document, which are listed below. To find the mistakes, we had to utilise the skills learnt in previous sessions. 

  1. No Bleed, image on the bottom left, extended the image to the bleed.
  2. Text colour has been set to registration, rather than black on the bottom right text.
  3. Image of 'top 10' has been resized, in Photoshop the image should be 100% size.
  4. Image is in RGB format, they need to be CMYK to print correctly
  5. Pantone 363 is not needed, having it will create an additional plate when printing, costing more money. Remove the colour, to reduce the cost - as nothing is using it
  6. Strolling Logo is 599 DPI, it only needs to be 300DPI, edit the DPI in photoshop.
  7. Heifer water image is a JPEG format - should be PSD,
  8. Girl with the cow's image is a low DPI. Low resolution, shouldn't be used.
  9. Picture of cow has been scaled down, should be 100% size.

Wednesday, 27 November 2013

OUGD504: STUDIO BRIEF 3 - Design for Print & Web // ISTD Brief Analysis

We begun highlighting particular words from the briefs which spoke to us. Words which were the reason we chose the briefs, reasons why we selected them.  

When going through a brief, you have to avoid certain words, a few examples of ‘good-bad-words’ are
  • Connects
  • Metaphorical Journey
  • Broadcast
  • Fascinating
  • Phoney
  • Interesting
Following this, we were asked to narrow down the briefs to just one, I chose the brief ‘Imbalance’, as I felt it had a lot to it, compared to my other briefs, I thought that I would have a lot of content to work with. It thought it was quite defined, making it easier for myself. - Then, I asked myself the following questions below, regarding the Imbalance brief. 

5 Problems you want to solve & why?
  • To communicate the imbalance through type
  • The brief is extremely broad, I need to refine it so I can progress to delivering an outcome
  • The brief says imbalance is bad, but it also says that I can interpret it as good - I need to solve this so I can create an outcome
  • It says current affairs, when Imbalance throughout society has been happening for centuries, I need to find out if it’s worth talking about it through history
  • It doesn’t specify the audience, I need it so I know who to design for
  • Doesn’t specify the delivery method, so I don’t know what do design
5 Facts about the Subject & Content
  • There’s an imbalance in the ay we live
  • Imbalance can relate to injustice 
  • The brief is pushing for equality rather than inequality
  • It’s quite boring and obvious
5 Facts About the intended Audience
  • There is no defined audience
  • People who are interested in current affairs across the media
  • Audience open for interpretation 
  • Political Fanatics
  • Late teens and up, typically average intelligence
  • Charitable activists interested in equality
5 Things which you want to communicate
  • There’s imbalance in various areas of life
  • What these imbalances are
  • Why there are important
  • Who is affected
  • Propose how it could be rectified 
5 things you didn’t know about this brief
  • I don’t know the statistics involved in this subject
  • I don’t know the specific audience
  • I don’t know the method of delivery
  • I don’t know how to appeal to the audience
  • I don’t know which media would be appropriate
  • I don’t know what would be deemed feasible by publishers/broadcasters
  • I don’t know if the brief wants me to communicate things positively or negatively.
However - I don’t think I particularly want to work from this brief following this task. It’s quite empty and uninteresting, not as much content or refinement as I originally thought there would be. It’s open for interoperation, but I’m not sure that’s what I want to work from. I’d prefer a brief with some specifics, some refinement, some pre made decisions to build from rather than it being ultra-broad. After looking through the briefs from ISTD, once again, I’ve decided to work from the brief ‘Mutton Quad’. 

5 Problems you want to solve & why?
  • Create a concept or interior and exterior branding for the typographic themed restaurant ‘Mutton Quad’, as it says so in the brief
  • How deep does the branding need to go? Does it need a few logos dotted on items, or do we need the branding elegantly engraved into the silverware? 
  • What is the target audience of the restaurant? Who does it cater to? What style of food/serving is it?
  • What’s the budget of the project? How much money is there to spend, how extravagant can I make the designs?
  • How could it be promoted?
5 Facts about the Subject & Content
  • Branding for a restaurant
  • It has to be typographic themed
  • We can travel the world of eating 24 hours a day
  • The type of restaurant offers the appropriate environment , food, and drinks that will make the occasion successful.  
5 Facts About the intended Audience
  • There’s no specific defined audience
  • People who’re interested in type
  • People who’re interested in food
  • 16+, as those younger can’t really afford to eat out, of course, there are exceptions
  • Unisex
 5 Things which you want to communicate
  • I want to communicate the typo graphicness of the restaurant
  • I want to communicate the quality of food in the restaurant
  • I want to communicate that’s it’s actually a restaurant, and not a type-class
  • I want to communicate the price range
  • I want to communicate the type of food sold
5 things you didn’t know about this brief
  • I don’t know who the target audience is
  • I don’t know what kind of food this restaurant serves
  • I don’t know the budget
  • I don’t know how last the scale of the restaurant is
  •  I don’t know the quality of the foods

Tuesday, 26 November 2013

OUGD504: STUDIO BRIEF 3 - Design for Print & Web // Selecting Briefs from ISTD 2009/10/11

During the module briefing, for the new Studio Brief, Studio Brief 3 - Design for Print & Web, we were asked to select three briefs from past ISTD competitions, from 2009, 2010 and, 2011. Which I will bring to a session tomorrow, where we will dissect the briefs, and narrow them down to just one brief, which I will work on for the remainder of this module.

Brief 1

Brief 2

Brief 3

Wednesday, 20 November 2013

OUGD504: STUDY TASK 1 - Design For Print // Creative Suite Session - inDesign

Print dialogue box is used to control the settings of your page before you print.

  • You can use the Start page no icon to chose the page will be number 1 in your document, if you were using the pages for binding, for example. 

The swatches panel in inDesign is much simpler than Photoshop and Illustrator. There are only 7 colours initially.

  • You can then create swatches using the create new swatch button, which gives you a dialogue box, similar to illustrators'.
  • You can also create tints, like you can in Illustrator. 
These are adjustable, then you  alter the global swatches' colour balance, it will change the tints.

You can also work with spot colours, you can chose from these in a drop down menu when you create a new swatch, or create a new spot colour.

  • You can find the swatches in pantone referencing or using the value code.
  • Tints can be created in exactly the same way as before - using the opacity changer slider in the menu.

Working with duotone images.
  • When you copy a duotone image into inDesign, it will add the two swatches to the swatches menu.

This also works with spot colours, from Photoshop and Illustrator documents.

Things to consider when creating something for commercial print process

  • Colour mode, assure it's CMYK. Remember to check the gamut warning and the colour chart.
  • Actual size documents, too small you will lower the print quality. Too large, you will be working with unnecessarily large files. 
  • Image resolution, make sure it's at least 300DIP. 
  • Save either as a TIFF or a PSD file format. 
  • Work with CMYK or Spot Colours
  • Save as .AI files
  • You can copy and paste between inDesign. 
  • If you go to window > output > Separations Preview you can view all the inks featured in the design.
  • You can separately view the inks like you can with channels in Photoshop.

Sunday, 17 November 2013

OUGD504: STUDIO BRIEF 2 - Design for Web // Web Design Layouts

I created some layouts for my website. I need to know what goes on which page, how I want it to look initially. Of course, these will be refined to the final layout before I digitise them. 

The homepage will have a side-scrolling banner, and some welcome text. 

You can see above and below, several variations of the home page design. 

I looked at multiple ways of arranging the type on the page. Using a fairly complex grid system. Sort of the rule of thirds, taken to the extreme. 

I also mocked up a website map. To show how the website would navigate. 

I thought about adding a footer to the website, I need to consider what is relevant. As there's no point adding social media links if it doesn't fit the audience. 

I thought how the footer would fit into the design, and how the navigation bar might look. 

I also mocked up how some other pages would look. Above and below are the timeline pages, the production history page, the origins page and the trivia page. 

Thursday, 14 November 2013

OUGD503: STUDIO BRIEF 1 - Individual Practice // Studio Session

5 Most important words:

  • Campaign,
  • Effect,
  • Stimulation,
  • Students,
  • Drink
5 Most Important Consideration
  • effect has a unique recipe with taurine, caffeine and five B vitamins • to stimulate mind, mood and memory
  • focuses on mental rather than physical energy
  • In fact 40% of energy consumers are female and 75% are over 20 years old.
  • Loved by fellow students
  • effect comes in stylish 330ml cans which don’t conform to energy • drink norms.
5 Related Products
  • Relentless
  • Red Bull
  • Rockstar,
  • Monster,
  • Powerade,    
5 Related Places
  • Universities,
  • Workplaces,
  • Fitness Locations
  • Driving Related Locations
  • At home
Adam’s 5 Things

5 Most important words:
  • Helvetica
  • Student
  • MEN
5 Most important considerations
  • For students, student life, how can that be involved
  • Small cans, but a lot of room to play with
  • Grabs attention
  • Be creative, don’t use green, becuase green is not a creative colour.
  • Looks like a energy drink.
5 related Products
  • Monster
  • Red bull
  • Store brand
  • Rockstar
  • Vitamin water
5 Related Places
  • Cafe
  • Super markets
  • Corner shops
  • University shops
  • Tesco small shops
Who is the audience?
  • The audience is students, aged from 16-25. Mainly women, as they, statistically, consume more energy drinks than men, 75% of which are over the age of 20.
Who, in your view, should the audience be?
  • I feel that the audience should be 18-25, students who live an active healthy lifestyle, who are over worked and tired, probably from staying up late to finish of an assignment as they’re super dedicated and need something to give them a boost.
Who could the audience be?
  • The audience could just be fitness students, who need to replace energy and electrolytes which are lost during exercise. 
  • The brief is asking for the campaign to begin with students, so it has to be around that age group. Students are often tired from work or partying, so they need something to replenish their energy in the healthiest way possible. 
What do they do?
  • Students, who will spend the majority of time studying ideally, perhaps with occasional nights out thrown in, or even a part time job to help with finance issues, or to get out of their overdraft
Where do they go?
  • Most students attend university multiple times per week, they will probably also go to the shopping area in their spare time, clubs, pubs and other recreational locations
What do they buy?
  • Food, clothes and alcohol.
Who do they want to be?
  • They will want do become professionals within their chosen profession which they’re studying at University. 

For the next session
Concept statement, 
Re-written brief (e-Studio or handout)
Initial Development - Sheets 4 contextual references
5 reasons why your response will WIN.

Sunday, 10 November 2013

OUGD504: STUDIO BRIEF 1 - Design for Print // Box Making Mock Up

To contain the collateral for my print, I need to make a small box, which will hold the book and anything else with it. The box is also there to protect the book, and it's vital to demonstrate some additional print processes and binding methods. 

I used a net for the box, using the mock up book I previously made as the placeholder for the box. I cut out the sides I would need out of mount board, due to it's thickness and durability as apposed to cardboard and card. 

I assembled the box, trying to be careful not to mess up the sides or cover the whole thing in glue. I kind of made a hash of it, once I got glue on my fingers I started to pull everything apart by accident. In future, for the real box, I'm going to have to take my time. 

The book fits well in the lower half of the box. The edges of the box are a little rough. I could benefit from sanding them down, for a better finish. For when I apply the bookrum around the edges, and make the top half of the box. 

Friday, 8 November 2013

OUGD504: STUDIO BRIEF 1 - Design for Print // Book Binding

I spent the afternoon learning the process of book binding. Turns out, it's a pain in the ass, but, the end result is extremely satisfying! I'm glad I've learnt the process for myself, so If I were to ever bind a book, I feel fairly confident I could do it myself, rather than forking out a large amount, to send it off to a printing company. Below, you will see a step by step process, of how to book bind. 

Get 3 leaves and fold them.

Use bone-things to smooth them down, giving a much better fold.

Repeat this process 3 times.

On another folded leaf, mark out the trim marks and the puncture marks.

Puncture the paper with a sharp needle.

Run through the punctures with a needle and thread, this will hold the pages together, initially.

Go through the over 3 sections, looping the thread through the previous loops.

Clamp the pages together in a bench press.

Thoroughly apply two coats of glue. 

Fold two pieces of paper, any colour, and stick them to the outside of the leaves, leaving a 1-2mm gap from the spine. 

Cut out two card faces, with a 2mm gap around the edges of the leaves, and the spine, which should be the thickness of the end pieces and the leaves.

Stick the card down to the cover.

It comes in all the colours which you can see above.

Trim and fold back, so the excess in stick down to the inside of the book. 

Fold over and use the bone-tool to indent the sides of the spine.

Stick the leaves inside - this is not as simple as it sounds.