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.