Wednesday 30 October 2013

OUGD503: Responsive

Brief

Using the list of websites provided below, identify and respond to a range of competition briefs that reflect your emergingcreative interestsand professional ambitions within Graphic Design. You will need to select one main brief that will become the focus of the taught sessions and studio workshops for the duration of this brief.In addition to this you will need to select a number of smaller/quicker briefs that will allow you to demonstrate your ability to develop effective responses within professionally realistic deadlines.

Background / Considerations
When selecting and responding to briefs you will need to consider the following:
How do you balance what you want to do, design or produce with what the brief requires?

Do the briefs offer enough breadth and scope for the development of a range of responses whila at the same time allowing you to focus your practice?

What are the realistic timescales for completing the brief? Are you working to these?

Have you clearly identified what the problem is before you start?

Where is the challenge in the brief and what will you get out of doing it?

What do you need to present and how wil you preesent it?

These questions should underpin the decisions that you make and will form the basis of the studio workshops



Webs I visited:
www.penguin.co.uk


My chosen brief: Penguin


Design a Penguin Adult or Puffin Children’s cover and you could be in with a chance to win a work placement within the Penguin or Puffin design studio as well as £1,000 in prize money.

The Penguin Design Award is an opportunity for students on an Art or Design course at HND or degree level to engage in design for publishing during their studies and to experience real jacket-design briefs first-hand.

Students may enter one design in either or both categories.

To make the process even more similar to the way a jacket designer works, once the judges have selected the shortlist, the Penguin/Puffin Art Directors will give the shortlisted entrants feedback and further art direction on their cover submissions. Shortlisted entrants will then be invited to resubmit their work, taking all the comments on board, before the final round of judging.

The closing date for entries is 12 noon (B.S.T.) on Wednesday 2 April 2014.

The shortlisted entrants will be announced on this website by Thursday 1 May 2014.

The shortlisted entrants will be contacted by Friday 2 May 2014 with feedback and further art direction on their covers, and the closing date for resubmission of their work is Monday 19 May 2014.
The small print

The 2014 Award is open to all students on an Art or Design course at HND or degree level. It is also open to MA students. The award is not open to students on an Art Foundation course.

We advise entrants that ideally they should have a reasonable standard of English so that, if they win the first prize, they are able to get the most out of their work placement.

There is no fee for entry.

All entries must be supplied digitally via the Submissions Site. Entries submitted in any other way, including by email or hard-copy, will not be accepted.



_____________

Penguin Adult Prize Brief

What A Carve Up! by Jonathan Coe

A brilliant noir farce, a dystopian vision of Britain, a family history and the story of an obsession.

Michael is a lonely, rather pathetic writer, obsessed by the film ‘What A Carve Up!’ in which a mad knifeman cuts his way through the inhabitants of a decrepit stately pile as the thunder rages. Inexplicably he is commissioned to write the family history of the Winshaws, an upper class Yorkshire clan whose members have a finger in every establishment pie, from arms dealing to art dealing, from politics to banking to the popular press and factory farming. During his researches Michael realizes that the Winshaws have cast a blight on his life, as they have on Britain. His confidence, his sexual and personal identity begin to reform. In a climax set in the Winshaws’ family seat the novel turns into the film ‘What A Carve Up!’ as a murderous maniac stalks the family and Michael discovers the significance of Shirley Eaton’s lingerie.

‘Big, hilarious, intricate, furious, moving’ Guardian

‘Probably the best English novelist of his generation’ Nick Hornby

‘Everything a novel ought to be: courageous, challenging, funny, sad – and peopled with a fine troupe of characters’ The Times

‘A sustained feat of humour, suspense and polemic, full of twists and ironies’ Hilary Mantel, Sunday Times
The Brief

Your cover design should reflect the richness of Jonathan Coe’s writing to appeal to a contemporary, discerning, literary readership. There are many layers and themes within the book. Read it and discover what the book means to you.

Your cover design needs to include all the cover copy as supplied and be designed to the specified design template (B format, 198mm high x 129mm wide, spine 31mm wide).
What the judges are looking for:

We are looking for a striking cover design that is well executed, has an imaginative concept and clearly places the book for its market. While all elements of the jacket need to work together as a cohesive whole, remember that the front cover must be effective on its own and be eye-catching within a crowded bookshop setting.

The winning design will need to:

  • have an imaginative concept and original interpretation of the brief
  • be competently executed with strong use of typography
  • appeal to a contemporary readership
  • show a good understanding of the marketplace
  • have a point of difference from the many other book covers it is competing against



_________

Puffin Childrens Prize

The Outsiders by S.E. Hinton

The original teenage rebel story . . .

The Socs' idea of having a good time is beating up Greasers like Ponyboy. Ponyboy knows what to expect and knows he can count on his brothers and friends — until the night someone takes things too far.

S.E. Hinton was only seventeen when she wrote The Outsiders. Told in a direct, first-person voice, it is a miracle of honesty with immediate appeal and is still every bit as powerful now as when it was first published in 1967.

Students are invited to design a whole new cover look for The Outsiders, in order to bring this classic to a new generation of readers, ensuring that this timeless story remains an integral part of every teenager's bookshelf.

Your cover design needs to include all the cover copy as supplied and be designed to the specified design template (B format, 198mm high x 129mm wide, spine 17mm wide).
What the judges are looking for:

We are looking for a striking cover design that is well executed, has an imaginative concept and clearly places the book for its market of both teenagers, to pick up and buy for themselves, and adults to buy for them. While all elements of the jacket need to work together as a cohesive whole, remember that the front cover needs to be able to work on its own and be eye-catching within a crowded bookshop setting as well as on screen at a reduced size for digital retailers.

The winning design will need to:

  • have an imaginative concept and original interpretation of the brief
  • be competently executed with strong use of typography
  • appeal to the broadest possible audience for the book
  • show a good understanding of the marketplace
  • have a point of difference from the many other book covers it is competing against
  • be able to sit on the shelves of a supermarket or ebook store as easily as it sits on those of more traditional bookshops

I have chosen the Puffins Children Prize


______________

Why have you chosen this?
I focused my final Context of Practice brief on Penguin book covers last year. I became very fond of the design processes and specific requirements outlined to form their unique and well-recognised style. Penguin is also a well-respected and professional publishers; someone I'd be really interested in working for.

What do you want to get out of it?
The opportunity to design something Ive not attempted before. To push my design practice further through a professional and innovative work ethic.

What do you want to produce?
A modern, unique and visually engaging book jacket design.

What do you need to produce?
A book-jacket which is effective as a whole in correspondence with the story itself, but also as an individual design. It needs to be a refreshing and eye-catching design in order to attract both teenagers who will be reading it and also parents buying for their children.

What is the problem?
The current book cover for this story has become outdated. Penguin are looking for a new design approach to attract modern day teenagers in the same manner it has in the past.

What is the brief asking you to do?
design a whole new cover look for The Outsiders, in order to bring this classic to a new generation of readers, ensuring that this timeless story remains an integral part of every teenager's bookshelf.

What is the brief trying to achieve?
Generate a response/reaction from teenagers and parents interested in reading. In this particular case they want to sell more copies of The Outsiders by S.E. Hinton.

Who will benefit?
Teenagers, Parents buying for teenagers, and also Penguin

What is the message?
The Outsiders by S.E. Hinton is a good read for teenagers. It is a timeless classic.

Who is the audience?
Teenagers and their parents

How will the message be delivered?
The books will be placed on bookshelves in various bookshops.

Can you force any problems with this?

OUGD504 Creative Suite Session


The two main colour modes:
RGB - for screen
CMYK - for print -- also known as subtractive colour system.

Various different percentages of each c/y/m/k are mixed to produce the colours we intend to print.

First colour to be applied is usually cyan or yellow. This is because they are the lighter colours.
Next colour to be applied is magenta. Once this is included, the image is almost at its final outcome.
K (black) is the last colour to be applied. This is necessary to emphasise shadows / light & dark element.

When creating a new document in Illustrator, the first time we see a colour mode option is when creating a new document. This is shown in the advanced menu option.

Applying colour to a shape in Illustrator
-Top left corner
-Swatches Palette
-Bottom left (fill/no fill) boxes
-Colour Pallete
The swatch palette makes the process of working with colours quick and easy, providing specific colours to work with.

Working with swatches

In order to create our own swatch palette, we need to select all of the existing swatches and delete them.


The palette

It is also easier to change the thumbnail view to a list option.

Creating a new swatch using colour sliders.

In order to tweak the colour when applying it to an image/text without changing the swatch colour, the colour palette must be selected and the colour can be changed to suit the specifically selected object.

Adding swatches.
In order to add every colour select 'add used colours'. 
This should add all of these colours to the swatch palette. The new colours are different as they have small triangles in the bottom right hand corners. 

Global Swatches. 
The reason for the triangles is to show that these are 'global swatches'. Global swatches allow for specific colours to be modified at the same time. For example, when working on a large scale, if many elements are using the same colour which needs to be changed, the global option allows for multiple colour editing at one time.

Creating CMYK percentages:


_______

Part Two

CMYK are the processing colours

Spot Colours
A colour that is produced without using CMYK. It is its own individual ink. This is useful when working on a lower budget. For example you may be required to work in a two-colour printing process. This therefore would not need to be produced using all four cyan, magenta, yellow and black. This can also have the potential to increase the cost. If CMYK is already being used, then spot colours are added on top of this, the price can increase a considerable amount. 

Finding specific swatch palettes

Pantone Solid Uncoated swatch palette

Change the view option to small list view

spot colour search: find 165

Saving the Swatch as a swatch library

Choosing the saved swatches when creating a new document.
-Select swatches
-Open swatch library
-User defined
-Choose preferred swatch library

These swatches will be accessible in other programmes such as Photoshop & InDesign if saved correctly.

Tuesday 29 October 2013

OUGD504: Design For Web Studio Session

For this task we were asked to bring in 5 examples of websites with a variety of layouts and types of navigation. We were then asked to divide these into grids in order to visualise a clear structure of how they had been created.







As a group we then discussed both the common and uncommon features/functions of website navigation:

Common:
  • scroll bar
  • hyperlinks
  • map
  • click arrow
  • read more' button
  • side bar
  • type colour change
  • back to the top'
  • page numbers
  • play button
  • thumbnails for images
Uncommon:
  • scroll bar on right
  • navigation bar at bottom out of site
  • linear navigation 
  • landing page

We found it more difficult to define the uncommon features as these were less familiar to us.

In addition, Lorraine gave us a demonstration on the difficulties that people may face if a website uses a linear navigation. This is due to them having trouble finding a specific page without having to browse for ages. It also

OUGD504 Design Production Studio Brief 2: Designing for Web

Workshop 01.

-Web standards and limitations
-Layout
-Setup
-Basic Coding
____

Web standards: Acronyms, Abbreviations and more.

HTML: The basic coding language of every website.
XHTML: Hyper Text Markup Language
CSS: More graphic-based websites
WYSIWYG: What You See Is What You Get -- Ability to create websites visually. E.g. What you see on Dreamweaver is what you will see on the published website.
SEO: Search Engine Optimisation -- Get your website to show up on Google / other search engines. The more you pay, the more visible you become on Google - Capitalist system.
FTP: File Transfer Protocol
URL:
XML & PHP: Type in 'wheelbarrow' to Amazon. This communicates and responds with a list of all the wheelbarrows on sale.
WWW: World Wide Web.
UI: User Interface
UX: User Experience -- E.g what is the user's first impressions when visiting the website.
____

Limitations // Designing for the lowest common denominator.
-Need to take all users into consideration. Ensure your website will be effective / useable on as many screens as possible.

Web safe colours. 216 colours.
Colours were/are selected/identified/reproduced consistently across the web using HTML, using a six or where possible three digit hexadecimal code.

RED
FF0000
FF0

RGB colour mode is cabable of reproducing 16 million different colours.
The combination of red, green and blue values from 0 to 255 (256 unique shades for each value).

Red 256 x green 256 x blue 256 =

These can now be produced using CSS:
e.g Red = rgb (255, 0, 0)
This is not a consistent display of colour across all screens, new and old. Its capable of being reused but not 'safe' to use across all devices. Hence the original (and still existing) 'Web Safe Colours'
____

Web Safe Fonts.
The website uses the fonts that are installed on the user's computer. Therefore the font must be a standard font in order to be consistently displayed across all devices. E.g Helvetica is a standard font. However if for whatever reason this was deleted on users comp, the font would automatically be changed to Times New Roman.
To help to prevent this, its important to consider 'fallback' font options.
E.g: Georgia (serif font) if this is unavailable use "Palatino Linotype", "Book Antigua" -- It is important to remember to place quotation marks around the font names.

Common font families:
Arial, Helvetica, sans serif
Tahoma, Geneva, sans serif
"Trebuchet MS", Helvetica, sans serif
Verdana, Geneva, sans serif

Free fonts are for personal usage. Not for commercial use. In order to use these, a licence fee must be payed.

CSS can be used to install fonts. @font-face allows you to install fonts onto a website meaning the font remains consistent regardless of the browser or the system.
www.fontsquirrel.com
Install 'Webfont kit'
____

Size, dimension & pixel resolution.
640 x 480
800 x 600
1024 x 768
1920 x 1080
2880 x 1800 (220ppi) -- New macs in present day.
This makes it difficult to decide which size to choose to design/display your website. Its hard to accommodate for both old, and new browsers and systems.
____

File Formats
PNG
GIF
PDF
JPEG
-
72ppi?
GRB
-
Lossy
Compressed
____



Part Two: Using Dreamweaver

 Adobe Dreamweaver welcome screen

Choose HTML.
'Design' option = What you see is what you get

Working in code
The first line you get is not needed for the website to work.
line 2: 'html' <html> = open html -- </html> = close html (line 6) 
line 3: <head> every function of the website must be included within the 'head'
line 4: <meta> 
line 5: <title> every page can have its own title. The title is shown in the tab alongside an icon (called a favicon). This is found at the top of the web browser.
line 8&9: <body> </body> everything you want to display on the website. 
line 10: </html>








Open User Work
create a folder where everything for our website will be saved together.
-Create a root folder.
-within this folder create a sub-folder called images.

Informing Dreamweaver where this root folder exists
Site -- new site


name your website & set the local site file

bottom right corner should now show your root folder and sub folder

As the local site folder has now been set up, whenever you click 'save as', Dreamweaver will automatically know to save into the root folder.
The Homepage should be saved as 'index' in lower-case. This will show up as the first page. It does't matter what the other pages are called.

In order to view your website online, click the globe icon and preview in web server of your choice. 

cmnd + tab = easy alternating between website & Dreamweaver.


___________

Task: Design the layout, colours, fonts of how you want your website to look/function. Generate 3 different designs. This will then be presented to the rest of the group in a mini crit to receive constructive feedback on the most appropriate / successful ideas. Rough designs to be recreated digitally to see the development process.

Remember that designing a website for someone else is not necessarily about your personal taste. All the design elements should be generated to satisfy the client and how they would like their website to look. Website development should be improved to the client's needs as opposed to your own.

Wednesday 23 October 2013

OUGD504: Designing for Web: Web Workshop

Brief:

Based on your research into 'A brief history of....' design a multi-page website that effectively informs a user about the interesting and informative facts, figures, observations and visual content that you have descovered. In selecting, organising and presenting your source material, you should consider the following:

What are you trying to communicate? An idea, a concept, a message a lifestyle......?
Who are you trying to communicate to? Why and what do you want to achieve?
How will you use the creative potential of interactive technology to effectively deliver your content?
what is the most appropriate/effective form of content? Text, Image, Facts, Statistics etc.?
What is already out there and how can you adapt, modify, reuse or respond to it?
_______________

We were asked to focus this brief the subject we chose over summer. Therefore my website was concentrating on the key aspects of Islamic Art. As this is a very broad subject, I thought it was essential to start thinking about how to divide my website into different categories or maybe focus on one specific element such as calligraphy for example.


Initially I began addressing each of the questions listed above to form a greater idea of the context of my website. I thought it would be interesting to aim my website towards people aged 16-25. The reason for this is because many people in this age bracket seem to like the art, but aren't necessarily aware of the deeper meanings and religious elements behind it. Many people tend to travel in their 20s and feel inclined to buy souvenirs to remind them of their experiences. During my visit to Morocco this summer, I was engaged by the intricate and unique handmade designs being sold (mainly to tourists). In the markets it can get very busy and stressful and I noticed many Moroccan's did not speak English. This made it difficult to ask questions on how the items were made and what the designs represented.

My initial responses to the key questions were:

What are you communicating? Information and celebration of Islamic art.
Who is your audience? Young adults with a passion for art, culture and travel.
How will you use creative potential to deliver your content? Through structured and relevant design. Everything will be justified by an element of the art themes in some manner. One example could be the emphasis of geometric layouts, mirroring the symmetrical and continuous patterns practiced in Islamic art culture.
What is the most appropriate form of content? Visually pleasing, engaging and vibrant. predominantly image based in parts, but always supported by relevant and interesting information to support this. The textual element will contain facts, statistics, opinions and possibly an additional blog/forum. I would love for this website to be as interactive as possible.
What is already out there? how can you modify/ adapt/ respond to it? Using existing websites and resources, I would like to create something which focuses on what would be interesting to a more specific generation. The information would cover as many aspects as possible, without boring the target audience.
__________

Following up from the first session, we were asked to begin thinking about how our websites would function. As a class we discussed the key elements needed for a successful website. We formed a list including:

-Homepage - indicative of content - including a short introduction
-Contact - Enquiry form, social media links, telephone, address, e-mail
-Information/About Page - including an ethical statement, facts
-Gallery / Portfolio
-Forums / blogs / user posts

It is also important to ensure page headings are labelled clearly and appropriately for the target audience. This saves people time and difficulty when browsing the site.

Sub-categorising is only necessary if there is a vast amount of varied information. Be aware of under-categorisation/over-categorisation.

Always take your own experiences of using web into account. What is appreciated? What is distracting/ off-putting?

As a task we were asked to begin visualising our website Homepage. As I had a few different ideas, I decided to begin with a few thumbnail layouts and from this choose a favourite. 


Once we had completed this task, we all swapped tables and had to give both positive and negative feedback to another groups individual Homepage designs. This was a fair and constructive process as it was anonymous feedback. This made it easier to focus completely on the design work itself. Constructing helpful and relevant advice for other people also helped to define what was positive and negative in my own idea. 

My feedback:
-Is it an information site or is the intention to sell? Don't know when looking at it.
-Navigation bar might look better/ be easier to use if it is concentrated into one place.
-Nice layout of Homepage. Centre piece draws eye in and intrigues. Could include different categories of Islamic Art e.g. Islamic Arabesque, Geometric, Iznik Tiles, Calligraphy -- These could be used as possible sub-categories
-Maybe a little one or two lines of info under the title to indicate the nature of the site? Shapes of the buttons look a bit random - maybe incorporate them into one design?
-Interesting Concept. Maybe look into colour schemes of the art to include. Are all the buttons geometric? Why would someone contact?
-Large image on Homepage makes instant impact. This is visually interesting.
-The image is relevant to content which should help the audience understand the purpose.
-Maybe use a clearer navigation system e.g. bar, buttons (think you may have considered this but its not shown).
-Use of grid would be a good idea to make sure it doesn't look like its floating anywhere. Consider a clear navigation bar & focal point. Are you going to have a footer?

Friday 18 October 2013

Concept Workshop

Concept Definition:
1. an abstract idea.
2. A plan or intention
3. An idea or intention to help sell or publicise a commodity

After a short introduction to 'what is a concept' we were put into groups and and asked to choose four words at random from a jar. One of these words was a place such as bar or hotel. This would determine the place we would form our concept around. The following three words were nouns or objects.

Our key word was hotel.
Our three words were match, staple and cloud.

We then generated three brainstorms: one for each word.




Once we felt we had covered all of the different associations of each word, we needed to choose one of the three to stick with. As a group we agreed that cloud was the most appropriate word to use alongside hotel. The initial reasons for this seemed obvious; an extremely comfortable hotel. We also liked the idea of using play on words for known phrases such as 'every cloud has a silver lining'. This was a useful positive metaphor which could also be incorporated into our design colour scheme. For example, adding a hint of silver to all of our promotional media and also hotel interior.

The key terms we came up with for cloud were: purity, comfort, dreams, sky and floating. These words all came together to form our initial concept of how our hotel would function. This also helped to form the basis of our target audience, the purpose our our hotel and the approach we wanted to take in creating the design and ethos.

We then continued to brainstorm potential guests/clients to consider as our target audience. The list consisted of:
-Arena Goers
-Celebrities
-Royals
-Rich people
-Weddings
-Religious Functions
-General Travel - backpackers
-People who are lost
-Weekend Shoppers
-Business Men
-Concert/Gig Goers
-Birthday/Hen/Stag Celebrations
-Tourists - international/national
-Football/Rugby fans
-Families - Kids at uni

From the list shown above we agreed it would be most appropriate to aim our concept towards Celebrities, Business Professionals, Rich People, Weddings and Business Men. This began to form a stronger sense of identity for the hotel. We agreed it would be a high-end, modern and luxury space for wealthy people.

Referring back to our key terms, we began thinking about our colour scheme. In order to ensure a minimalistic, sophisticated and modern identity we agreed we only needed a maximum of four colours. To focus on the colours of clouds, sky and vapour we decided it was most appropriate to work with white, ice/very pale blue, grey, with a small element of silver to represent 'silver lining'.


As we were becoming more confident about our audience and identity we began thinking about how we wanted our hotel to function. We created a new brainstorm of the facilities we wanted to include in our hotel:

-Silver service (in relation to the 'silver lining' concept)
-Gym offering Personal Trainers
-Pool (cloud shaped)
-Classy Bar
-Balcony / observation area with telescope
-O2 Bar 
-Relaxed atmousphere
-Politeness/ manners
-Elegance
-Quality
-High Security
-Comfort -- memory foam beds, comfy slippers and robes
-Luxury
-Clouded glass floors
-Spa offering Turkish cloud massages
-Personal jacuzzi baths
-Fine dining
-Egyptian Cotton

We carried out some image research in order to grasp a better idea of how our hotel would look.


Next task was to come up with an ideal name for our hotel. We wanted to use something with reference to clouds without being to obvious. We thought of a range such as 'Silver Lining Hotel, Hotel Shade, Cloud 9 Hotel, Atmosphere hotel and Hotel Stratus. Our final choice was to stick with Hotel Stratus. The name stratus came from the Stratus Cloud. An example of a stratus cloud is shown below. We thought this sounded professional, memorable and sophisticated but also used the reference to clouds that we were hoping for.

Image: Status clouds over a bridge

We continued to experiment with different logo ideas. Eventually we agreed the most appropriate was a combination of Roxie and Danielles designs. We liked the fact that the Capital S could also be seen as a Capital H when rotated slightly clockwise. This was ideal as it worked as a name but also a logo on its own standing for Hotel Stratus. Roxie created a digital version of the logo in Illustrator shown below.