OUGD503: Responsive Design Process - Studio Workshop 1

Studio Workshop 1

The aim of our first session for the OUGD503: Responsive module, was to introduce us to the module, it's aims and to start us thinking about how we select briefs by analysing and dissecting them.

• In order to fulfil the brief, you need to apply for a minimum of five substantial briefs

What you want to get out of the module (as an individual):

• How to work in a professional workflow
• Produce design work which is of industry standard
• Recognition of my work in the industry
• Better understanding of the design process
• To be experimental with ideas and concepts
• Ro be able to design for a 'live' audience, not just for myself
• To discover which aspect of industry I am interested in

What you want to get out of the module (as a class):

• Time management and discipline, brief management 
• Understanding realistic time scales
• Effective professional communication 
• An award
• How not to get exploited, getting paid etc.
• Work on a variety of different briefs
• Identify individual practice
• Brief analysis 
• Creative compromise
• Exposure
• Portfolio development
• Building contacts and opportunities

Why will live and competition briefs be useful (as an individual)

• Get me used to working in a professional manner
• Help to improve time management due to working to set deadlines
• Get out of the habit of designing for myself, wider audience 
• Increase awareness of me in the industry 
• Encourage me to work to a professional standard
• Improve communication

Why will live and competition briefs be useful (as an class)

• Improve professional design skills
• The challenge of a professional brief
• Commitment to being more than a student
• Developing clearer / more effective working practices
• Real world benchmarking
• Professional responsibility 
• Gain confidence
• Gaining contacts
• Professional feedback 
• Professional feedback

Why we have chosen our five competition briefs (as an individual) 

Penguin Design Award 2014

• Well known international company
• opportunity to be experimental / creative with concepts
• Reading is a particular interest of mine
• I admire previous Penguin book designs, Romek Marber etc.

ISTD Admission Brief

• Highly selective organisation 
• One of the websites we were asked to join as part of the module 

unREPORTED Free The Arctic 30 

• Scope to be as creative as possible
• Open brief
• Important social issue

Love Your Body Brief 

• Raise awareness of an important issue which I believe strongly in

GALINA London Logo Brief 

• Opportunity to experiment with ideas and concepts

Design the Talenthouse T-shirt

• Medium I've never worked with before
• Existing imagery
• Opportunity to experiment 

Why we have chosen our five competition briefs (as an class)

• Look straight forward
• They are short and simple
• Try new things, outside of our comfort zone
• They are free to enter
• An interest or familiarity with the content
• Ethically motivated design 
• The prize
• Best that were available
• Creative scope / freedom
• Range of problems

YCN Past Brief: Fedrigoni Paper

• Lots of information
• Very specific 
• 'BIG' client

What is the problem?

Fedrigoni believe Italian paper companies are perceived as expensive and 'stuffy' which is not how they want to be perceived in the industry.

What is the brief asking you to do about it?

Produce a campaign which changes the way they are perceived by potential consumers

What is the brief trying to achieve?

A new identity for the company which represents them as a less expensive / stuffy company therefore transforming there identity.

Who will benefit?

The client believe the audience will benefit as the company is generally avoided because of the wrong impression they have been given. However it is actually the company themselves who will benefit as they will get more consumers.

What is the message?

They are a 'fun' organisation which sells a range of paper.

Who is the audience?

Printers across the UK.

How will the message be delivered?

Through a fun, 'tongue and cheek' campaign.

Can you foresee any problems with this?

• Vague about whether they want, a design or a proposal?
• Vague about what it is they want
• What they want from the campaign, what medium?

Task:

• Select one brief which  has substantial scope and is something you are interested in, you also need to be able to spent time on it, so not a 'quick' brief.
• Preferably a competition brief
• Using the set questions, analyse and dissect the brief
• Begin initial research, ideas and concepts for the brief you have chosen

OUGD504: Design Production - What Is Design For Print? Creative Suite Workshop: Photoshop

Colour Modes

• Can be altered when creating a new Photoshop document

• When you take a photo on a digital camera the colour mode is RGB
• When you scan in something the colour mode is RGB
• The default colour mode for Photoshop documents is RGB

• When you alter the colour mode from RGB to CMYK in photoshop some of the filters become unavailable as RGB is Photoshops preferred colour mode

• The range of colours you can make with RGB light is much greater than the range of colours you can make with CMYK inks.
• Many colours the RGB colours sit outside the CMYK gamut

•  Original image

• View > Gamut Warning - shows the colours which fall outside CYMK gamut

•  Image > Adjustments > Hue/ saturation - a possible technique if you have colours outside the CMYK colour gamut

• Image > Mode > CYMK - however this is not as effective as altering the image yourself

• View > Proof Colours - Working in RGB however on screen shows the image in CMYK
• Recommended work flow is to work in RGB and then convert to CMYK later

• Like last week on Illustrator we deleted the default swatch palette

• As it would not be effective to delete the default swatches everytime we saved our swatch palette

• Triangle with exclamation mark inside it means the colour I have selected is outside the CMYK colour gamut, clicking on this warning will give us the closest colour in the CMYK colour gamut.

Spot Colour in Photoshop

• Colour Picker > Colour Libraries > Pantone Uncoated

• By applying this colour to the photograph we have lost the potential the spot colour would have given us
• Need use specific techniques in order to use spot colour in Photoshop

Working with Spot colour 1

• Original image
• We can work with spot colour by creating a Duotone image which is only available on a greyscale image

• To do with the inks which will be used

• Now instead of black the spot colour we have chosen will be used when the image is sent to print

• By selecting the Duetone option we are able to used two inks which will be overlayed when sent to print

• By using the Duotone curve we can alter the tone of the image

• Inverting the colour of the image

• In order to print this image we would then take it into Indesign, therefore we need t save this image as a Photoshop file for next weeks session

Working with Spot colour 2

• Another way to work with spot colour is to work with the 'channels'
• The CMYK channels give us a better idea of how the prinitng process would work

• As our image is greyscale we only have one channel

• We can insert a new channel by selceting the channel menu > New spot channel

• New spot channel with our chosen colour from the spot colour libraries

• Using the paint brush the spot colour mimics ink, it overlays the image

• By selecting grey we are able to work with a tint of the colour

• By making a selection with the Magic Wand tool and creating a new spot channel that spot channel will be applied to that selection.

• Changing the solidity mimics the transparency of the the ink on the Photoshop image

OUGD504: Design Production - Studio Brief 2: Design For Web Studio Session 3

Studio Session 3

We began our third studio session for the Design for Web brief by discussing and considering the content for our websites. Using the research in which we have gathered for our Summer Research Brief as a starting point we were asked to produce a simple diagram - keeping it to a four page website for now - which demonstrated the content for our site.

Things to Consider:

• Who is the target audience?
• How will the target audience interact with the site? Contact page?
• Possibilities for extension? Downloadable PDFs? Series of leaflets?
• Contextualise content, make it more specific

Once we had decided upon the content for our website we were then asked to produce a possible design for the homepage of website taking consideration into how the end user would navigate around this content.

We then laid these designs and our list of content for the website onto the table in order to receive feedback from the group in relation to the effectiveness of the design and the content we propose to include.

My Feedback

• Good inclusion of 'what not to do' 
• Is the site informative or promotional? (of your own design)
• Design is simple, but due to the actual topic being so vague, a slightly more developed design would work better as it's all too simple
• Simplistic, easy to navigate website
• Will imagery be included?
• Very simple design - maybe too simple?
• Looks slightly like a folder (paper filing)
• New concept I haven't seen before in regards to the menu working like a diary / planner divider
• How would the pages move as they were selected? And where would the other pages go after one was selected?
• The tabs look good and very interesting, but how would they each be distinguished from one another?

Overall I found the feedback I received very helpful in terms of the development of the design further. I believe the piece of feedback 'how would the pages move as they were selected? And where would the other pages go after one was selected?' is the most helpful in terms of the functionality of the site as this is something I had not put too much thought into beforehand, therefore a sketched out a site map of how this could work.

OUGD504: Design Production - Studio Brief 2: Design For Web Workshop 2

Workshop 2

We began our second web workshop for studio brief two by displaying the three scamps for our website which we were asked to produce in last weeks session in order to receive feedback on our initial ideas

My Feedback:

• Bottom right - interesting concept for navigation
• Good concept, the contents page will work well
• I like the 3rd one the best - the tabs

This feedback was particularly useful as we were able to receive the feedback at an initial stage which gave us a better idea of the conventions we need to consider when designing for web.

• Should be able to get to get to any page from any page, ideally.
• Navigation should be constantly visible
• Need to create something which is aesthetically pleasing whilst also keeping functionality and structure

By the end of this workshop our aim is to have a functioning four page website which we will create as a class. Therefore we began by making some basic decisions for the wire frame.

• Size: 1024 x 768 - Fixed size, works on 94 % of devices
• Headings: Helvetica
• Body Copy: Georgia
• Logo size: 200 x 200
• Button size: 200 x 100
• Navibar size: 200 x 600

Making a container 

To begin we needed to create a 'div' in the stylesheet.css which we named using the '#' symbol. We were then able to to type in the fixed size we had decided upon for the site.

In order to place the container from the stylesheet.css into the source code we used the '<' '>' brackets to open and close the 'div'.

To text whether these new changes had worked, we opened the website in a web browser, however as this is just a container with no border etc. it was not visible.

Therefore, we were able to edit the 'div' we made earlier in the style sheet to add a background colour.

Upon opening the webpage in a web browser we can se that these changes we have made have been applied.

• Fixed positioning
• Relative positioning

Fixed positioning

By changing the value of 'top' and 'left' to zero we were able to get rid of the white border which surrounded our container.

As a group we decided we wanted to centre the container of our screens and therefore we changed the value of 'left' to '512' which is half of the width.

However this technique was not effective as it would only work on the screen size we were working to

• We therefore changed the the value of the 'margin left' to '-512' 

• The container now appears in the centre of the browser

• We then made a navigation bar for the website using the same technique as the container 

• Again this coding from the style sheet was inserted in to the source code using the 'div'

• Final website with navigation bar

• To create the logo for the website we went into illustrator, ensuring that the profile was set to 'for web' and the size was correct.

• My logo for the website 

• In order to ensure the image was high resolution we selected 'PNG-24' and checked transparency which would ensure there would be no white background 

• We then inserted this logo into the style sheet by using the same techniques as before but ading a 'background image' option and inserting ht URL for our image.

• Again we used the 'div' coding to insert this into the source code

Final website with logo on it

• As our coding was starting to get complicated, Simon showed us a technique in which he used the return key to line up each of the separate 'div' codes making it clearer

• As with the logo, we created the buttons for our website in Illustrator

• again this was inserted into the style sheet using the same technique as before we positions the button where we want it to go on the site.

• For our buttons we wanted a rollover image, so the button will changes the cursor scrolls over it, however the coding for this is quite complex therefore we used an option in Dreamweaver to to do this.

• We began by placing the first state of our button which we created in Illustrator into the subject field 'original image' and the second state of our button into the subject field 'rollover image'.

• In doing this Dreamweaver then inserted a very complex code into our source code

• Final website which shows the fully functioning rollover button