OUGD404 Design Principles Visual Literacy- The language of Graphic Design

Visual Literacy- The Language of Graphic Design

Multitude of lines makes it harder to read, especially at distances

Serif font works better at a smaller scale, however when scaling up lower the amount of words.

Larger scale makes it illegible, the counters get smaller.

Distance is key when creating type. Characteristics, readability, legibility changes.

Black bold font at a 12pt doesn't work at all, there are no counters as it deconstructs when at a smaller scale.

Visual Literacy

The Solution to a problem of communication through design.

"Type is speech made Visible'

Semiotics

Sign 

Symbol

Signifier

OUGD504 Creative Suite Session 4

Five Ink Job
9 Errors
INDESIGN- Applying our knowledge to check documents

Errors
First things first we noticed that the fact that the documents colour set up would of needed 6 plates when the agreed amount was a 5 ink job this means that one of the spot colours shouldn't be in the menu. We were taught that it was good house keeping to delete all unused spot colours, to avoid extra cost.

The next mistake we found was one of the images has been output as a jpeg rather than a tif or an Ai file. This means the image has been compressed and the quality wont match the rest of the document.
If you right click an image and go to Edit with then you can re-open the the image within Photoshop which should be the default setting. (hold alt and double click the image) The image will re open immediately to enable you to edit. 

The next mistake we saw was the fact the images have been re-sized on Indesign rather than the source file itself. This will make the document unnecessarily big which could lead to problems in processing the print job or compressing the file. 'Effective PPI:129' which is too small so open it back up in Photoshop and go to image size. Ask the client to higher the resolution to rectify as the res will still be quite low can use more pixels

Some images have been saved with the RGB mode.

Some images have a lower resolution than 300dpi.

Some images have drastically high resolution which could create problems in processing later.

One of the colour swatches has been set as RGB to fix this the swatch was changed in the right colour mode and adjusted to the right tint.
It is an issue if this swatch is in actual fact being used, there is a danger that this is an outer gamma colour. Could come back from the printers not what you had expected. By double clicking on the swatch you can edit the swatch from RGB to CMYK and it will change it automatically.

Something else we found was one the images didn't bleed off the page this could have caused problems in the cropping process.

The website at the bottom of the design is set to be in Registration colour which is something from crop marks, fold marks etc: therefore it will appear on every plate which results in a lot of ink being used and it will come out unclear and the clarity wont be very god- To solve this we simply need to change the type from registration colour to black.


Grey scale image which has had a spot colour applied to it with a spot colour. This is OK to do in Indesign. If was a greyscale tiff file ypu can create a duo tone image by changing the colours by just clicking and using the swatches. (disregard the spelling mistake)

Quick way to check the document go to file then package, makes a copy of the Indesign file this will then allow you to gather everything and make one folder so you can pass everything on to the printer. Before it packages it gives you a summery of the document which shows you all the above issues and more. Will tell you if any links or fonts missing, but also if there are any RGB issues, how many colours and inks we are using.

 To save as a PDF if that what you prefer, go to File, Adobe PDF Presets then go to Press Quality which is for the very best print out. High quality print would be suitable for the printers within College. If you were to make a PDF for email or on Issuu (just for computer purposes) then you use the PDF which has the smallest file size. The great thing about the PDF is that it contains everything, Fonts, images etc. So you only have one file.

OUGD504- Creative suite session 3

File
   New
      Document
Page Size- Depends on what your designing
finished printed trimmed size
If your designing a postcard then needs to be postcard size
Use width and height options
Columns and Margins
Dont have to use them, however will help for layout purposes, if you are working to a certain grid. If you don't ned them, don't use them.
Margins give you the white space around the edges throughout
More options bleed 3mm compensates for any inaccuracy's of the final print. Standard amount. Info you get from the printer
Slug: Specify the area for custom marks or job information.
Crop marks or any additional info that will get cut off when printed
Specify pages: Booklet layout saddle stitch binding example need to be multiples of 4. Consider the binding.
Facing pages- 2 pages will face each other next to each other. Magazines books, editorial etc.
Primary text frame- Multiple pages mainly with text, will put a text box on all your pages.
When you press ok and if you have set out the document wrong go to file, document, set up.

The importance of working with swatch palettes in Indesign
Window
      Colour
          Swatches (simplified palette)
               CMYK, RGB
Gives you the ink mixtures, square that give you more information.
Colour is applied to an object on the Page
                                               Fill or Stroke

The box and the T symbol allows you to fill the Text Box around

Menu

-New colour Swatch

Spot colour library by going into colour mode

CMYK Swatch Maker

Grey square next to the colours in the swatch layout, means global colour. Will change automatically by clicking the globally. If working with multiple pages, will change all there were that colour,

If working with a limited colour palette, can make tint swatches

Options

Select the swatch that you want tints of, adjust the bar at the bottom. IF you change the original colour swatch, it will automatically change the tint swatch as well.

Photoshop considerations

Colour-Before saving switch to cmyk

Image size- Work to actual size, shouldn't enlarge or reduce the image in Indesign

Smaller- Will make problems when process

Bigger-Loose quality

Dpi300 Resolution

File size-tiff or photoshop files PSD

not Jpeg increase the processes when printing, looses quality

Choose PSD files to keep lyres, allows transparency, tiff files doesn't allow it.

Illustrator Considerations

Colour mode- CMYK, specifically the colours that have been made for the document. Colour that have been applied

Save as. Ai can copy and paste vector artwork (never do it in Photoshop)

Indesign Considerations

File and place, Duo tone image

The spot colours from photoshop would be brought into Indesign

Works the same with illustrator swell images will b e low resolution the linked folder for the images can be changed in photoshop and illustrator will be updated automatically

What happens to indesign files when it is ready to print

Window

-Output

-Separation preview

-View separations quality will become higher

Isolate individual inks

bottom three haven't been used

Can check that they are in fact spot colours as you turn individual ones on you can see them as they layer up

Principle of commercial is the same for screen print.

Good practise to delete the spot colours that you do not use to save on expense

File

Print

Output

Can see how it my work, option. 

If you know some arnt being used, press the print icon and turn off

Frequency and angle are to do with half tones

determines the courseness or the opposite

fine grid of dots determine how fine the mage is.

Angle working with mulitople inks. CMYK orinting on top of the each other screen is angles so i doesnt interfere with the other dots. Rotated through angles moiré- to get accents hold down alt press e twice 

View 

Overprint preview

Activate overprint previw box to do with decisions indesign uses to make the plates

overlapping colours when you turn the top one off it will leave a space. Knocking out the yellow has been knocked out of the cyan. So the yellw prints as a yellow and doesn't come out any other colour

Black will always overprint by default 

-Window

-Output

-Attributes

-Overprint fill

they mix the colours, so you can work with more colours by mixing them to keep costs down

 

moiré

 Knocking out

 Overprint

OUGD504 Design for web- Dreamweaver- Session 3

Move root folder into uder work
Open dreamweaver and click manage sites, locate the root folder and it will open
Make the final three buttons in illustrator, make sure you save it as png-24 and illustrator file.
<div id="button"
</div>
Make sure that the buttons are all the same size in illustrator, avoid moving them around the page so that when it is in Dreamweaver it is all alined

 Creating th epages linking all the buttons to the correct pages
<a href=     <----code telling you where it is going
if they are going no where add in #
<a href= "index.html"
add in the different pages such as work. html, about. html, contact.html Resave the pages as save as
then preview and it should have worked

 

This is the webpage

Adding content

With CSS you work with the box model made out of 4 different areas:

Style sheet and add in these measurements:

 

adding imagery

OUGD503 Studio Brief 1 Responsive Concept Statement

Concept Statement
Rationale:
What are you going to do ?
1.Research into eco-friendly design products, that are already being used.
2.Research into the different materials that would be classed as eco-friendlt and how they can be appropriate to my final resolution
3. Create and come up with a concept that follows the brief for a range of packaged products

Why are you going to do it ?
1. To ahve a better knowledge of eco-friendly design, also a better understanding will also hope to give me further inspiration
2. Once i know what i can use then i will be able to start designing, so that it fits the brief
3. To create a eco-friendlt design that will be successful and hopefully will win the competition (wishful thinking)

Who are you doing it for ?
1. Waitrose. As the brief is for packaging for wait rose as a brand then it would be for them
2. The customers of wait rose but hopefully  can give them an incentive for new customers
3. The planet, will create less waste and harmful emissions with in production. Have a knock on effect for the community

How are you going to do it?
1. Research, Primary, secondary etc. Visit the stores, looking at other supermarkets packaging and other companies who ethos is eco-friendly
2. Make prototypes, experiment and develop ideas
3. Make surveys into what people would want, would take place in my research section
4. Speak to eco-friendly companies that have environmental procedure in place
5. Design the packaging

What do you aim to produce?
1. A eco-friendly packaging for a range of packaging that can be re-used/recycled
2. Perhaps P.O.S (point of sales) expelling how it works
3. A variety of different packages with similar themes but for different items to sell.
4. If the packaging was to be re-used/sent back to the shop then an area in which it would be collected
5. An incentive that is low cost to encourage the customers to re-use/recycle the packaging.

OUGD503 Studio Brief 1 Responsive

Identify 5 most important words:
-Re-design
-Packaging
-Environmental Impact
-Branding
-Bio-degradable

5 things you need to con side
-What i am going to package
-Materials that can be recycled or re-used
-The Packaging (Essential Requirements) Regulations 2003 (PERR)
-Cost
-Lifecycle of packaging and its contents

5 Design products related to your brief
-Packaging
-Containers
-Bags
-P.O.S (point of sales) Advertisements
-Posters/Signs

5 Places related to your brief
-Waitrose Supermarket
-Recycling plants
-
-
-

Who is your audience ?
-Middle aged people who are willing to spend a lot of money in Waitrose

Who should your audience be?
-Eco-friendly people
-People who shop at Waitrose
-People with money

Who could the audience be?
-Homeowners
-18 years and above
-People enjoy good quality products
-Eco-friendly
-Green people

What do 'they' do ?
-Go shopping
-Buy the products
-Recycle
-Work at high paying places

Where do 'they' go ?
-Waitrose
-Recycling plants
-Work
-Shopping

What do they buy?
-Food of good quality
-Items that cost a lot of money

Who do they live with?
-Partner
-Pet
-Children

What can you do ?
Create a unique eco-friendly packaging
Create point of sales items advertising the new packaging
Make the packaging

What are you going to do ?
Research into Waitrose
Visit the store
Research into already eco friendly packaging
Research into materials

Why are you going to do it ?
To get a wider knowledge about eco-friendly design to make the piece successful, and to fit the brief.

What could you do ?
Create the packaging, Invent a new eco friendly material, that doesn't affect anything either in production or after it has been used. This material would keep food fresh if it was packaging for food.

OUGD503 Studio Brief 1 Responsive

Questions in Relation to the brief
RSA The whole Package
1.Why have you chosen ?
I have an interest in packaging and looking at how things work. I also aspire to be an eco-friendly designer, therefore this brief would be perfect for me as it is asking for an eco friendly packaging.
2. What do you want ?
To explore in to eco friendly design
3.What do you want to do/make/purpose?
Perhaps made out of material that could be re-used and kept.
4.What do you need to do ?
Do a full exploration into eco friendly design, decide what i am going to package- Create 4 A3 pdfs describing research, proposals, 1 A4 PDF/word document describing the idea. 5 scanned pages of sketchbook
5. What is the problem?
To come up with a new eco-friendly design for packaging
6.What is it asking you to do ?
Design eco-friendly packaging, not actually make it but give them ideas
7. What is it trying to achieve?
Push a campaign to re-use/recycle
8.Benefit who ?
Waitrose, Will be seen as a care for the environment brand. Will also help them cut costs. Will also beneficial the customers who shop at Waitrose. If it is successful will benefit the planet
9.What is the message?
That they want a re-design of their packaging to show they care for the environment
10. Who is the audience?
People with a lot of money, high end supermarket.
How will the message be delivered?
In drawings for the packaging, considering materials
Problems with the brief?
There are so many regulations that need to be followed also to come up with a unique idea. When there is a lot of eco-friendly stuff out there already

OUGD503 Studio Brief 1 Responsive The Brief

Brief
Re-design consumer product packaging to minimise waste and environmental impact.
Challenge and scope
Consumer packaging fulfils some very useful functions, most notably the physical protection of goods; brand identity and promotion; storage; display and advertising at the point of sale; provision of product information; and even social ritual (eg giving wrapped or packaged gifts). Despite all of these attributes, however, consumer packaging is, for the most part, designed to be thrown away once the product it contains is removed.
This brief therefore asks you to consider the packaging of any retail consumer product of your choice (possibly selecting a particular product or product group that you consider to be particularly over-packaged) and re-design it with the specific intention of minimising
its environmental impact and meeting the requirements of The Packaging (Essential Requirements) Regulations 2003 (PERR). You may also want to consider the possibility of encouraging packaging re-use as a means of reducing waste.
You should undertake significant research
in order to develop design-led solutions that represent both innovative and valid responses to the demands of PERR. As part of your work, you should ensure that you:
— explore your chosen product packaging within the wider context of patterns of use, production, distribution, sale, consumption, lifecycle and lifestyle
— think about the lifecycle of packaging and its contents
RSA STUDENT DESIGN AWARDS
CALL FOR ENTRIES 2013/14 www.thersa.org/sda sdaenquiries@rsa.org.uk
Page 15/22

— develop proposals based on real environmental improvements that also increase awareness among the customer base rather than being superficial ‘green’ marketing, and
— are aware of the central role local authorities play in this whole area – not least the role of their Trading Standards Officers in enforcing the packaging regulations
Please keep in mind that your submission should detail the packaging design, including:
— overall branding and positioning of the company
— material production and specification
— photographs or renderings of models and
prototypes
— an indication of cost
For the purposes of illustration only, you may want to re-design packaging that:
— promotes re-use so that it is retained and not thrown away
— uses less material and/or reduces energy consumption in the production process
— is bio-degradable
— can be easily returned to the product
manufacturer for recycling or re-use
— does not need to be purchased again and
again, but allows the consumer to purchase only ‘top-ups’ or fillers
... and many others are possible.

Tomorrow’s Mental health

work in the small but highly productive graphic

Workplace

design studio at the business headquarters in Bracknell, Berkshire. The placement will provide real working experience and the student can expect to complete more than one piece of published work. This will involve taking the

brief, presenting their own creative work
and managing production, which will include commissioning and art directing photography, illustration and artwork. The scope is varied and covers own label packaging, promotional brochures, magazines, corporate identity
and more.
Please note that the judging panel may decide

Sustainable

How this brief will be judged

Water

on more than one winner. In addition, the judging panel may award commendations.

Innovativr

1 Environmental and social benefit 20% 2 Execution 25%
3 Research 5%
4 Design thinking 20%
5 Commercial awareness 20% 
6 Magic 10% 

Judging criteria
There are six judging criteria that your entry be measured against.
1 Environmental and social benefit
— How does your design benefit society?
2 Research
— Where did you go to research this issue? Who did you speak with or interview? What questions did you ask? What did you learn? 3 Design thinking

will

Submission requirements
All entries must be submitted through our online entry system. If you are unable to submit online, please contact us.
Entries should comprise the following:
— 4 x A3 PDFs (portrait or landscape), describing your proposal, your insights and research, the benefits you believe it will create, and possibilities of implementation and scalability
—1xA4PDForWorddocumentofnomore 250 words describing your ‘Big Idea’
— 5 x scanned pages of your sketchbook or computer modelling/sketches (if applicable) illustrating your development process
Optional
— films or animations or other moving image media to further support your proposal
Please note: your submissions must not
have your name, university/college or other identifying marks on them to ensure that work is judged fairly. If any entries do contain entrant, university/college or tutor names, we will contact you and ask you to re-submit your work without these, or remove them ourselves.
Key dates
2 September 2013
Briefs launch and pre-registration opens
6 January 2014
Registration and submission window opens
10 March 2014 - Deadline for online registration and submission
17 March 2014
Judging begins
15 May 2014
Winners announced
THE WHOLE PACKAGE
Brief devised in collaboration with Nat Hunter and Sophie Thomas, Co-Directors of Design at the RSA and Project Directors for The Great Recovery.

Sponsor information
Waitrose values the role of good design when communicating with its customers. Waitrose is the food retailing arm of the John Lewis Partnership, and has over 170 branches throughout England, Scotland, and Wales.

— We want to know about your thought processes and insights. Your insights might research-based or intuitive, or a combination
of both, but the judges want to see you relate the final concept clearly to these insights. What journey did you go through to get to the final result?
4 Commercial awareness
— Does your design make sense from a financial point of view?
5 Execution
— We are looking for a design that is pleasing and looks and feels well-resolved
6 Magic
— We are looking for a bit of ‘magic’ – a surprising or lateral design solution that delights
Waitrose will be looking, in particular, for well- executed design responses that demonstrate careful understanding of brand positioning and communication. The graphic design of
the solution will be a key factor when reviewing the entries. 

OUGD504 Design for web- Dreamweaver- Session 2

Because we use a server, with loads of other users and computers to open dreamweaver with the work we had done in previous sessions, we need to move the root root folder from the desktop to the userwork. Then go to manage sites then choose the location for the appropriate website. If it has been done successfully, everything you had done should be in the the files panal. Never use options in the welcome page. Always open in the files panel. To open up the code page, click index.html
cmd N
-blank page
  -css
    -create
css can only see the code, not the design

css coding advantages over html, custom fonts, colours advanced layout. Won't need to hand design the coding for all the pages. Links all the pages to keep the design thropughout the website the same.

The way to tell is that it only allows you to view in code.
-Grey text means that it is a note to the designer doesnt actually show up.
/*note here*/   <---- example of how to write a note.
@charset "utf-8";
/*css document*/
DIV ID
Generic CSS code
Font
adding code

4.body{        (the squiggly bracket will open up a drop down menu full of options)
   (press return)
       font family
       font-family:
             Verdana, Geneva, Sans-serif; (gives options incase one isn't available)
} -to close
File then save- Remember no capitals
     CSS styles
        Properties
            chain link
                find the stylesheet to the page

1.<html/>
2.<head>
3.<title> Sophie Abell </title>
4.<link href = "stylesheet.css" rel= "stylesheet" type "text/css">
5.</head>
6.
7.<body>
8. Hello
9. </body>
10. </html>

Going to work with a fixed size
Dimensions 1024x768
Creating the code for the box
Naming Container/Wrapper
#container
width:1024px
height:768px

Every different setting leave a space for easy reading
8. #container{
9.                  width:1024px;
10.                 height:768px;
11.                 background-colour: #6CF
12. }
cmd and S to save
close the stylesheet

7.<body>
8. <div id= "container">
9. Hello
10. </div

Save then check

To position the box/container, underneath background colour (by moving the container it gets rid of the white boarder around)

Position: fixed;       (get a drop down box of absolute, fixed,inherit,relative,static)
top:0;
left:0;

Design decisions
Centre- Nav Top
to align the container to the centre
left:50%;   - still not going to work as it is bang in the middle. Just doesn't work

Make the container back to the left half of its width
Move the container back to the left by- 512px
#container{
                 width:1024px;
                 height:768px;
                 background-colour: #6CF;
                 Position: fixed;
                 top:0;
                 left:50%;
                 margin-left:-512px;

}

#top{
        width:1024px;
         height:150px;
         background-colour:#ccc;
}

Go back to the index page
<body>
<div id= "container">
<div id= "top'>/div>

When adding your designed logo on illustrator, make sure when you open make sure the profile is for web.
When saving click save for web.
PNG-24 (transparent background)
uncheck hide extension
     logo.png
          click save
Go back to dreamweaver
#logo{
          width:150px;
           height:150px;
          positon:relative;
          float:left;
          background-image:url (images/logo.png);
}

Navigation area
create button in illustrator
Once created duplicate layer
In the duplicated layer make a change, for example change to italic, or add a line through
save for web each layer separately
home1.png
home2.png

#button{
width:218px;
height:150px;
position:relative;
float:left;
Insert- image objects- rollover images
Fill in the tabs click ok.
Then you get loads of code already generated (below)

Remember when saving move the root folder back to the desktop out of the user work and click replace.