Wednesday 30 October 2013

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

This session is mainly focused on Illustrator.

In CMYK each colour is applied in turn, the inks start to mix together, and we start to form our image. K being the key colour which blends together the cyan, magenta and yellow inks. 



In Illustrator, using the swatch palette, you can consistently use the same colour throughout.



You can also delete swatches from the palette, to simplify your workspace.  



You can set a new swatch by clicking the new swatch button. - Lots of different ways to do the same things, selecting colour, all of which are relevant. 

When applying colour without using the swatch palette, perhaps reverse engineering a piece of work, you can select the add used colours in the drop down menu, which adds all the colours in the document. If you select specific items in the document you can add them, only. 



These colour swatches will have a white corner on icon, this means the swatch is global. 

When global is selected, the colours to which the swatch is applied to will change if you were to edit the swatch, it will update in real time. 


Global allows you to work with tints of that colour. You can then create tint swatches. 


If you then edit the 100% swatch, all the tints created from that swatch will update. 


Process Inks refers to CMYK

Spot Colours

Spot colour is it's own individual ink, it's not created using CMYK. A spot color is a specially mixed ink using in printing. Spot color inks come in a rainbow of colors, including some specialty inks such as metallic and fluorescent.

Unlike CMYK or process colour which creates colours by laying down layers of just 4 specific inks, spot colours are pre-mixed and you use one ink for each colour in the publication. You can also use tints of a spot colour to get the appearance that you're using more colours without the expense of additional inks. For example, if you needed a specific colour for a brand, you would get a spot colour - if you were to work for EE you would get the turquoise used across the brand. You can choose these with Pantone Swatches. 


















Tuesday 29 October 2013

OUGD504: STUDIO BRIEF 2 - Design for Web // Grids Workshop

As part of this session, we were asked to select 5 web sites, which you can see here in my design context post. We then found the existing guides from the websites. This task really helped my develop my designs, previously, in my initial home page design, which I created in a session. I now have a much more advanced idea of what to create in terms of grids when designing. Which, you will see in my future designs. Below are the grids marked out ontop of the websites.






OUGD504: Studio Brief 2 - Design for Web // Workshop 01

Web standards and limitations
Layout
Setup
Basic coding

Web Standards (Acronyms, Abbreviations & Stuff)

HTML - Hyper Text markup language
XHTML - Extended Hyper Text Markup Language
CSS - Cascading style sheets
WYSIWYG - What you see is what you get
SEO - Search Engine Optimisation
FTP - File Transfer Protocol
URL - Uniform resource locator
XML/PPP
UI - User Interface
UX - User Experience
WWW - World Wide Web

Limitations (or, Designing for the lowest common denominator)

Web safe colours - 216 colours
When colour first arrived on the web computers could only support a maximum of 256 colours on their 8-bit monitors. A list of 216 “Web Safe Colours” were identified.
These colours were/are reproduced consistently across the web using HTML, specifically a six or where possible a three digit hexadecimal code.
Red
#FF0000
#FF0
White
#FFFFFFF
#FFF
Black
#0000000
#000
The RGB colour mode is capable of reproducing 16 million different colours, significantly more than HEX 216 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 = 16,777,216
This wider range of colours can now be reproduced using CSS rather than HTML. These colours are identified using the same principles and Photoshop and Illustrator, by specifying the percentage of 255 per RGB.
For example 100% Red would be: RGB(255, 0, 0)
Web Safe Fonts - For a chosen font to display consistently across different computers a standard font must be used.
Further to this a font-family is chosen giving several “fallback” options to ensure maximum compatibility between browsers and systems. For example is the browser/system does not support the first font it tries the next one listed.
Some common font families:
Serif Fonts
Georgia, serif
“Palatino Linotype”, “Book Antiqua”, Palatino, serif
“Times New Roman”, Times, Serif
Sans-Serif Fonts
Arial, Helvetica, sans-serif
Tahoma, Geneva, sans-serif
“Trebuchet MS”, Helvetica, sans-serif
Verdana, Geneva, sans-serif
CSS font-face - The CSS compatible @font-face allows you to install fonts to a website, meaning the font choice remains consistent regardless of the browser or system.
However using font-face breaches licensing and copyright laws related to specific font foundries.
There are many free font websites which include free licenses' usage for @font-face kits including Font Squirrel.
Size, dimension, pixel resolution (not to be confused with DPI or PPI)
640 x 480
800 x 600
1024 x 768
1920 x 1080
2880 x 1800 (220ppi)
File Formats
PNG
GIF
PDF
JPEG
~
72ppi? (SInce 1995 they've been 96ppi and now, with retina display, displays are 220)
RGB
~
Lossy
Compressed




For next week, create 3 separate designs, which you would like your wbesite to look like. With fonts, etc.


Wednesday 23 October 2013

OUGD504: Design Production - Design for Web // Website Development Workshop

As part of this session, we were asked to think about 5 pages which our website would contain. The point of this task was to give us some idea of what we would want in our website, the amount of pages and content will always have a huge impact on the site. You can see below, in the image, the pages I have chosen to create. You can click to zoom in, of course.


Following the development on the content of the website, we were then asked to quickly sketch up a rough design for the website’s home/index page. (This is in no way the final design.)



You can also see the feedback I received in post-it notes around the design. The general feel from the feedback was that I had to reduce the amount of content which I suggested with the design. As they all mentioned a Bond themed website should really have a minimalistic, sophisticated look to it - to which I agree. So, as part of my design development, which will definitely be informed from this, I will try for a very clean design style. 

Tuesday 22 October 2013

OUGD504: Design Production - Design For Web // Studio Workshop

As part of this session, we were to branch out on our subject matters, I've chosen to work with Adam and Grace. 

The point of this sessions was to expand and help ourselves develop the purpose and the function to which our site will be. We fleshed out the ideas, where we can take our initial research projects, creating something much more refined. We first focused on Grace’s work, and we created this mind map below. 



We also expanded on Adam’s subject too. 



Finally, below, you can see mine. Obviously, I have a lot more to say here about my own, than Adam and Grace’s work. I’ve managed to branch out and really think about who my site would be targeted to. You can see below the extent of my exploration. 


The fact we were working in groups was extremely useful, I was able to broaden my view, for example, I was initially going to target my website at 30+ males, but upon further discuss, we determined that the audience was much broader than initially intended. This also lead to a change in design ideas. I now know that I need to create something which captures the essence of Bond, but also be appealing, unisex, so that all who wish to view the website will feel comfortable viewing site. To do this, I feel a sophisticated, minimal website is necessary. The feeling of sophistication I feel captures the class associated with the character that is Bond. 

Something which was also suggested to was perhaps add some theatrical elements into the website, in some way. We spoke about the introduction to Casino Royale, the introduction uses silhouettes, animated. I know I would be able to create something similar to this in After Effects. As seen below. 



Wednesday 9 October 2013

OUGD504: Design for Print Workshop

Find out more information about a specific logo in the group. Find out why, dissect it. Put it on the DP blog. Write down my thoughts, then compare them to the designers intentions. 

During the session, we discussed various logos, their origins and their functions. I presented banding for the following companies
  • Five & Dime
  • Starbucks
  • Pepsi
  • Virgin 
  • Mission Workshop.
You can see in the photo below the images I presented for this exercise. 


I spoke about the Five & Dime branding. They are a eastern restaurant based in Singapore. They have a broad range of branding, more than I would create for a business such as this. They design looks very stylish, however this is the problem, I believe. I think It may go out of style in the future. They use a circle in their logo, this represents a plate, as they are in the food industry  They're trying to create a very sophisticated feel to their logo, they use mainly black and white in their branding to suggest this. 

I then spoke about Virgin's branding. Virgin is a huge mega-brand, they range from the health industry to travel. They logo is a script-handwritten font, which could be handwritten by Richard Branson, the CEO, a sort of signature that it's his company. The red is bold powerful colour, strong - which is used across the brand. The logo is also slightly slanted, which suggests it's quite fast, which Virgin is known for. 

Another logo I spoke in depth about Starbucks, a large coffee chain. We discussed the colour schemes how the green is more organic and wholesome looking, but also, before coffee is roasted it is green. We then spoke about the subject of the logo, a mermaid. The origin comes from the story, Moby Dick. One of the sailors in the story really liked his coffee, called Starbucks, and a siren who are known for attracting sailors with their looks or their singing, however this one attracted Starbuck with coffee. Thus the legend is born. 

We then entered a discussion about another logo brought by another member of the group.

Find out more information about a specific logo in the group. Find out why, dissect it. Put it on the DP blog. Write down my thoughts, then compare them to the designers intentions. 



The logo above is from the Union of Moscow Architects. This logo is extremely different from the stereotypical Russia, this logo is very clean, minimal and diverse, as apposed to the very grand, loud image which is associated with Russia. The logo itself is a pen, which you can instantly link to the practice which it's representing, architecture. On the top of the pen, you can see the star, the star is a symbol from the Naval ensign of the Soviet Union. Another aspect of the logo is a paperclip. Paperclips are used to hold documents together, unite them, almost like a union. This goes with the name Union of Moscow Architects. The colour of the pen, the strong red, used internationally in Russia, on the flag, the red star. The walls of the Moscow Kremlin are also red, it's a colour associated with power, strength, all which Russia stands for, or even setting them apart from another Architects company. 

OUGD504: STUDIO BRIEF 1 - Design for Print // Concept

For this studio brief, I need to create an informative pack, all about print. So, I sat down and drew out some mind maps, so flesh out my ideas, and decide what I need and want to create. 


I had an idea to create a print project pack, which included examples of a few of the processes and colour modes I would be describing in the book. I wanted to target it at students who didn't know how to print, and perhaps would need to use a high-quality printing studio for perhaps a final major project. This could apply to illustrators, animators, fashion students, fine art students. People, unlike myself, who don't spend half their time obsessing about print. 


I want to bind my book using perfect bound methods. I've not perfect bound before, there's alot more that can go wrong, compared to saddle stitch, my go to method. Experimentation, and I really like how perfect bound books look, and open. I want to use Helvetica Neue, a modern legible, readable typeface, often associated with formality, and factual information used in learning, which my publication will be about. 


I drew up what my publication might look like. I'd really like to tile a pattern on the cover, something different from what I usually create. I also want to use mount board, to add some structure and thickness to my publication. 


I'll be digitally printing the inners of my book, to save on cost. However, to include none CMYK colours, I need to use alternative methods of printing, as Digital Print in College doesn't stock fluorescent and metallic inks. So I'll be screen printing onto some of the page inners. 


Tuesday 8 October 2013

OUGD504: Study Task 1 - Workshop



Following a set task, We each brought in five or more items of print, and categorised them into their respective formats, on the table. Which you can see below in the panorama. 




We then separated the objects into the order of colour. Which you can see in the panorama below.




We also seperated the objects to determine if they were mass produced or not. 


Follow this, we separated the items into production categories, which you can see in the panorama below. 








Branding and Identity 

Packaging and Promotion

Publishing and Editorial

Information and Wayfinding

This I didn't know, but I found out today;
There are similarities between multiple categories, for example promotion and packaging could also cross over with some aspects from branding and identity, or information and way finding. 
Production, Process and Finishing are the same thing. They cross over in a sense. As some methods of 'finishing' could also be classed as a process, or a production - they work together.
 Products can fit several roles, to be used for promotion, packaging or even information and way finding. 
I'm not able to define quicker and more effectively the main objective of a product. It's purpose, it's reason, why it exists. 
I'm also able to define cost, I noticed a general correlation between the mass production and the cost, typically, mass produced products are cheaper, whereas products which are produced in low quantities, or a one off are fairly expensive to produce, as you have to manufacture the means to create the product in addition to the product itself. For example in screen printing, you need to create the screen itself. 
How to print onto 3D objects 
How to foil more effectively 
Research this! (To Do List)

Print 5 examples of logos and or branding - we will present these to a group

OUGD504: Studio Brief 1 - Design For Print (Group Work)

Colour: 
  • There are two colour modes RGB and CMYK,
  • Colour is applied to a product using the method known as printing, which takes various forms. 
Format 
  • Format if the scale of the product, appropriate and relative to it's application, for example a business card is credit card size so It can fit into a wallet. 
  • An additional example would be posters, which are A-Sizes, A3 and Up, usually. Large, to attract attention and sell the product. 
Production
  • The Process of making the product, for example cutting, printing. You could also relate this to it's digital application.

Process
  • The method used in the manufacture of your product. For example, linocutting is a type of process. You remove excess lino from a sheet of lino to create a print. Another example of process would be screen printing. 
Finishing
  • Finishing would be an extra added detail which is added to the product following production. An example of a finishing would be spot varnishing. 
Stock

  • Stock is the item to which you print on. Typically, stock is associated with paper, however, stock can be almost anything. 

OUGD504: Studio Brief 1 - Design For Print - Module Briefing

Form//Function//Production

Focus: 
//Appropriateness of response
//Quality of resolution 
//Meeting the Deadline


Appropriateness of Response
What is the problem 
Who is the audience
What is the context 
What is the method of delivery
Rationale
Concepts
Idea
Research
Audience
Context 
Media 
Creative
Ethical 
Commercial 
Handmade
Digital
Lens based

Is it the media or the message? 

Tone of Voice

Try it
Test it
Continually make it better

Publishing and Editorial
Branding and Identity
Packaging and promotion
Information and way finding 

Wednesday 2 October 2013

OUGD504: STUDIO BRIEF 1 - Design for Print // What is Design for Print?

Session

Design for Print:
Use correct colour mode; CMYK
Tangible design,
Consider printing options and preferences, such as bleed and prating guides
Consider Stock
Digital/Traditional Print
Consider the scale/format
Resolution (300DPI for Print)
Consider the finish
Consider cost,
Consider audience,
Consider the time scale,
Refer to the pantone referencing system,

When designing for print, as apposed to Web you would need to take into consideration various differences in the process of production. You're creating the physical, something which, hypothetically, and be felt. To design for print; you are preparing for the physical. To add something to a stock, typically ink onto a type of paper. Whereas Laser Cutting is the removal of elements of the stock. 

Categories to look into:
Format,
Colour,
Production,
Processes,
Finishing,
Stock
When designing for a website, the information in there can be dynamic, whereas when you design something which is physically printed, tangible, it's final. You can't change it. 

Processes You use in Print:
Screen-printing,
Embossing,
Letterpress, 
Woodblock,
Linocutting,
Cholograph,
Mono-printing, 
Digital Printing,
3D Printing, 
Etching, 
Spot-varnishing, 
Laser printing,
Debossing,
Processes I would like to learn/improve on this year:
Letterpress,
Embossing,
Screen-printing.

For each of the categories, listed above, find two formats, examples. (Blog) | Bring in 5 examples, or more, of print. Different things, different finishes, different formats. (Physical)

Format:



The poster above is from the film drive. The poster follows an A-Format, such as A3 and A2. This is typical of Posters. However, Posters do not need to follow this format. 


Above is a business card. Business cards are typically 85x55mm in size. This format allows the essential information to be placed within this small space. The size is also similar to a credit card, so they fit in a wallet. 

Colour:


Above is the colour mode CMYK. (Cyan, Magenta, Yellow and Key), CMYK is a subjective colour mode. As a subjective mode, this means the three colours mixed together in equal quantities will create black. As you can see in the image above. CYMK is also the colour mode which is used in printing. 


Above is the colour mode RGB. (Red, Green and Blue). RGB is an additive colour mode, this means that the three colours mixed together will create white - the opposite of a subjective colour mode. RGB is mainly used for Web and digital application. 

Production


Above is an example of printing in production. The bottles shown above have been printed onto, directly, during their production. The printing on these bottles also help with the commercial aspects of the product. From left to right, the bottle has been printing entirely in white, with the product name on the side, the standard product. As we move more to the right, the full-coverage printing disappears, leaving a unprinted bottle, apart from the product name. This works in harmony with the product as from left to right the product becomes more filtered, cleaner, more refined. 


Above is another example of print being used in production. You can see milk bottles which have been printed around leaving the negative space of the milk bottles. The pure white is instantly associated with the product. 


Processes 


Above is an example of a process, screen printing. This process involved pressing ink through a screen onto stock to create an image. You get a wonderful traditional effect and feel to screen printed work. You can print in any colour onto almost any stock. Whereas you may have an issue printing on super-thin stock when printing with an ink jet or laser printer.


Above is an example of Linocutting. Linocutting involves creating a negative, carving away excess lino, to create an image. This is then covered in ink and pressed onto stock. this is an example of a traditional process, as apposed to a modern one. Linocutting has a very qwerky effect, you can create designs of various details.

Finishing


This technique is called spot varnishing. Spot varnishing creates a highlight effect on stock. You can highlight the copy or a graphic. It creates, in my opinion, a professional look. 





Above is an example of embossing. which is created by pressing into the paper to create a pattern, image or type. 

Stock



An example of a type of stock would be wood. You can see in the example above of a type of printing onto wood. Using wood you can create a very old looking effect, it can also look very professional and modern, depending on the design.


Above is another example of stock. Newsprint is very thin stock, which newspapers are printed on. Their light weight, thin and low cost qualities are perfectly suited for printing in large quantities.