Screen printing

'Screen printing is a stencil method of print making in which a design is imposed on a screen of polyester or other fine mesh, with blank areas coated with an impermeable substance. Ink is forced into the mesh openings by the fill blade or squeegee and onto the printing surface during the squeegee stroke.'

Below shows my experiments with screen printing, I created a simple 2 layer design so that I could experiment with laying up 2 prints on top of each other. The process itself is quite straightforward due to the clear trace you initially print on to align both designs. 

First of all I printed the base design which would form my background image, the decision for choosing a geometric pattern like that is because I intend to apply folding techniques . Not only will the pattern aid me in the folding process but I'm also hoping once folded it'll create a weird disfigured geometric pattern. 

 I then mixed black acrylic to the binder to create my black ink and repeated the whole process again but this time having to lay up each print to print the text perfectly central. As well as using the clear trace I also used masking tape to mark out on the print bed where my paper should go each time. However this fails quite often because I cut down my own stock and each one is never the same size and never perfectly A4, therefore when printing properly it's better to line up each individual print or by pre cut stock.

Below is the end result, because the toner in the printer is a bit dodgy where I printed off my design to be exposed there is blotches and patches in both the text and the orange background. This can be easily rectified by printing off in the mac suite as opposed to the studio because the printer in the mac suite is a laser printer, meaning it's a much cleaner more black print off.

Flocking and foiling process

This is just a quick visual process of foiling and flocking. First of all I exposed my image onto a fabric screen;

Once all the glue binder has been pulled through the screen on to desired stock and chosen flock or foil has been placed on top of the tacky adhesive, it's time to go over to the heat presses where we set them to be 160 in temperature and set the timer to 12 seconds.

 heating up

We are now ready to use the heat press, first of all put a few sheets of newsprint above and below the item going into the press to avoid direct heat and melting the foil.

 laying down the newsprint

 clamping down the press until it beeps

Then what comes out of the press is something similar to the image below, it illustrates well the different between the stuck down parts from the heat and glue and how the foil with no glue has remained the same. You have to leave it like this to cool down before peeling off the foil.

Below is just a pile of peeled off waste negatives that required an 'arty shot'

Foiling and flocking

Flocking

'Flocking is the process of depositing many small fibre particles (called flock) onto a surface. It can also refer to the texture produced by the process, or to any material used primarily for its flocked surface. Flocking of an article can be performed for the purpose of increasing its value in terms of the tactile sensation, aesthetics, colour and appearance. It can also be performed for functional reasons including insulation, slip-or-grip friction, and low reflectivity'

To flock you first have to expose your image on to a fabric screen as opposed to a paper screen because there is a higher mesh count which enables you to print the glue binder needed to perform both flocking and foiling. The next step is exactly the same as screen printing but instead of screen printing ink you pull a glue binder, once this glue has become slightly tacky you stick the flock sheet face down. All that is needed from here is to put the whole thing under the heat press for 12 seconds at 160 degrees which binds the flock and adhesive together. Then all that is left to do is to peel the flock sheet from the paper, below is the outcome;

navy flock

navy flock

negative navy flock

white flock

I'm unsure about flocking, I don't particularly like the aesthetics of the final print but I think that is more down to my design choice, I think flocking could be more suited to smaller, finer details as opposed to a larger bold design. It has a some what tacky, nasty feel to it similar to when it's used on t-shirts but again I feel this is down to my choice of design but also the colour of flock. More experimentation is definitely needed to nail it but the overall 3 dimensional element is something that is successful and can definitely be utilised in the future.

Foiling

silver on antique

Simple, understated example of foiling. The dull matte tones of the stock work well against the high gloss silver. To be honest I initially thought this would look tacky or the complete opposite, elegant because of seeing other examples of silver foiling. But I think it's all down to the design and stock choice.  

black on black

The high glossy black foiling works so well against the dull matte tones of the stock. Because the black tones are so similar it gives of an effect of spot varnishing. This is by far one of my favourite examples of foiling I have done whilst experimenting, due to the simplicity and how it's not bold, brash in your face. It's a subtle finish that catches the eye when the tiniest bit of light shines on it. With further development with black on black I believe it could be a process I use for future designs.

clear on red

The photograph doesn't really do this clear foil any justice, it comes out looking similar to spot varnish, it looks amazing when the sunlight hits it because all of the detail is then revealed. But in a normal dull room it kind of lacks that full on glossy finish that comes with spot varnishing. The clarity of the foiling is also held back by the quality of my screen due to the toner in the print room running low the screen is patchy in places. But I now know for next time that even the simplest of marks or dullness can affect the print in the long run. 

black on yellow

The yellow and black has come out exactly how I expected because of the colour sessions last year. Yellow is an amazing contrasting colour to black, but this makes the errors in my screen more noticeable so the patchiness of my foiling is easy to see on the yellow background. But all this can easily be rectified when it comes to doing this seriously, these are just simple experiments.

black on red with clear outer

black on red with clear outer

With this example I experimented with mixing two types of foil, the black gloss and the clear foil. I chose to do the 'it's just fucking expensive' in clear because it's kind of a small print dig at the cost of print and how it's exclusive to those who can afford to do it or dedicate their lives to it. The outcome isn't as good as I expected because it's lacking that impact due to the poor foiling of the clear letters. I think this is more due down to the stock choice, if I had chosen to do black on black with the main text and border being white, it would have been a lot more clearer.

After foiling quite a substantial amount of black I decided to revisit the print room and experiment with more colours. Quite a lot of the colours available are garish and disgusting so I've been keeping my colour selection simple and quite safe so I stuck to this and experimented with white and pewter.

The white looked absolutely amazing on all the stock I used, it provided such a strong juxtaposition which in turn gave the print such clarity and clean lines. The strong bold lines and shapes complimented the white to create a stronger contrast. I feel the white worked out a lot better than the black (apart from black on black) because of how well it worked with the colours of stock.

 negative white foil

 white on yellow

white on antique

white on red 

This image of pewter on black does not do the print justice, the colour absolutely pops off of the dull matte tones of the black stock, then the light catches the metallic tones of the pewter and glimmers beautifully. I was sceptical of using metallic foils because they're generally associated with elegant, classy type of design. But the bold lines seemed to have worked well with the metallic qualities of the foil. 

pewter on black

Design for web- web session 1

Todays outcomes

• Web standards and limitations 
• Layout
• Setup
• Basic coding

Web standards

Acronyms, abbreviations etc... For example; HTML, XHTML, CSS, API, WYSIWYG, MIME, SQL, MYSQL, SEO, FTP, URL, XML, PHP, ASP, JSP, CGI, AJAX, ASCII, DNS, GIF, HTTP. HTTPS. UI, UX, WWW. All of these are languages used in design for web, it is a language that needs to be formatted correctly to work across all systems, it needs to be a standardised language.  

There are loads of limitation in designing for web, you have to design for the lowest common denominator. Some limitations are;

• Size-  file size of the website
• Colour- Web safe colours (216 available)
• Fonts- Can only work with web safe fonts
• Size/dimension- 640x480, 800x600, 1024x768, 1920x1080, 2880x1800 (220ppi)

Size/file formats

PNG, GIF, PDF, JPEG are all types of lossy files, this means the file format can be compressed. Images should be 72ppi even though all monitors are at  least 96ppi


Dreamweaver
When opening dreamweaver select open HTML, this opens a page the exact same to the image below. In the top left hand corner you can flick between 3 options; Code, Split and Design. These options are pretty much what it says on the tin, so flicking to either split or code will get us to our next step.

So below is a screenshot of what the split screen looks like, on the left is the coding for the website and on the right is the actual design, what you'll see on the internet. However as time goes on and you use more elaborate codes what you see isn't actually what you get anymore.

Below is a zoomed in screenshot of the coding that appears when you open a new HTML. this is already a website it's just blank. So the first line just declares what the document is. <html> is telling the computer what language we're working in, this will change if we're using CSS. Line 10 there is </html>, this is a close tag, if we use <html> we must always close it. <head> contains something that isn't visible on the website but something that helps the website function such as operations. There was also <meta> in there before we deleted it and this is a search engine optimiser (SEO), it's where key phrases can be added. <title> this also increases the SEO, but it is what appears in the tab in the web browser, a 'favicon' can be added to this title which is basically a little icon or logo that can also appear next to your title. Whatever you want to be visible on your website must be put between the two <body> tabs. 

In order for Dreamweaver to run to its full potential, as with any other software, you need to be working from the user work folder on the hard drive. Also, you cannot package when using Dreamweaver and so when you start you need to create a 'root' folder. Everything that you are using within Dreamweaver must be inside this folder in order for it to work; if this were not the case, you would end up with broken links. When naming the root folder, the convention is to never use upper case or spacing.

Once the 'root' folder has been created, you need to create a sub folder within it. Some servers look for a sub folder named 'images', in which should be all of the media files. (must be called images) The rest of the content and information is fine to be left loose within the 'root' folder.

Once you are ready to save, you need to create a site in the root folder in order for Dreamweaver to know where this folder is. To do so, you need to go to the top where it says 'Site' and click 'New Site'.

From here, you can name it whatever you want. The most effective and common thing to call it would be whatever the website was called. You then click on the small folder icon to the right and find the root folder that should be inside the user work folder. Once on the root folder, click 'OK' and then save.

Then you are ready to save. When saving, you need to make sure that you leave the file extension on so that the internet can understand what type of file it is. As this would be the hope page of our website, we need to ensure that we name it correctly so that when online, the internet will know which page to open first. To do so, we have to follow certain conventions. The name of the file needs to be universal and understandable by everyone and so the file must be called 'index.html'. Once saved, you can view how the website will look by clicking on the small globe icon and choosing a search engine.

And this is the website I created previewed on the the internet. To add text simply type in between the 2 body tags and it'll appear on this site once saved.

Design for web- Getting started

For todays session the objective is to delve deeper into our web subject matter and find a concept worth developing. The session requires us to ask questions about our subject matter and constantly question why. We were asked to identify the following;

What is your subject matter?

What are you trying to communicate?

Who will be / could be your audience or 'end user'?

What will be the most appropriate / effective form of content?

What is the function and purpose?

I've been struggling a lot with this brief because what I want to create is already out there in the form of quite a few websites. Therefore to start out I created a mind map basically of everything that springs to mind when I think of Dieter Rams.

This process didn't really get me anywhere, I found myself stuck in the exact same situation as when I started. It really started to annoy me so I had a chat with the tutor and basically came up with a set of questions to ask myself to give me a foundation and some form of direction.

What is the problem, why am I stuck?

Lack of creative subject and ideas, I feel like I'm regurgitating information that is already out there in the form of websites just in a different aesthetic or style.

And why is this a problem?

There are websites already out there doing similar jobs, there is plenty of information on these sites that is easily accessible and tells you al you need to know about him.

Why is this a problem?

This is blocking my creative thoughts because I feel whatever I produce will be very similar to pre existing sites. I look at them and can't seem to move away from that exact same idea or something very similar concept wise.

Why? 

I can't get away from similar concepts because these websites are already successful at reaching their target audiences and delivering their message be it to educate or to inform, they do their job very well.

What's the message these websites offer?

The message is to tell the audience / viewers of the website about his design, his background, his influences on design nowadays and his legacy.

What's the point in this message?

To influence, inspire but also provide contextual research.

At this point we had a bit of a chat and discovered his design principles influence me just as much as his design and could prove to be a stronger foundation / starting block. 

Why are the 10 design principles important?

The provide a foundation to create design considered to be 'good' They've not dated since they were created and can be applied across multiple disciplines.

Why would anyone care about the principles?

They provide a basic understanding of design, a foundation for those who aren't necesarily within the design world or take a huge interest in the subject.

We then had another discussion and decided that this type of person wouldn't really go out of their way to find and look at this website, it'd be more for young students like myself.

Who are the people who would be interested?

Well educated, young students, studing designers, someone who has an outside interest in design, someone who know's of them but wants their memory refreshing and someone who is looking for contextual influence.

How would the 10 principles be communicated?

Through the medium of a website, informing, text & image based, visual examples interacting and engaging the viewer.

Creative suite workshop session 1

For this session we are focussing solely on working with colour in illustrator

When first opening the document consider the 2 different colour modes; CMYK and RGB

CMYK for print, the inks are transparent so multiple tones can be created by layering different tints of the colours. The key (K) consolidates the combination of CMY. Whereas RGB is for screen.

Focusing on the swatch palette, swatches allow us to add the exact same colour to any object. 

Colour spectrum allows us to select colour offering us another option to select colour without using the slider options.

To add a new swatch go to the swatch menu in the top right and select new swatch, alternatively you can select the piece of folded paper next to the bin symbol.

This is what appears when creating a new swatch, there is also a preview option if you have something selected which enables you to see what the colour s going to look like, the name of the swatch is also theCMYK code.

When you select a colour from the spectrum it isn't automatically added to your swatch menu so to add it to the swatch menu you must drag the square over on the left onto the swatch palette. Or alternatively you can use the colour selection tool as opposed to selecting the shape. Once the colour has been added to your swatch menu it'll look something like the image below, it'll have a small corner missing out of it. This means it is a global colour, global colours mean you can make changes in the swatch menu and it'll change all the things that are that colour without selecting the objects. 

Global colours enables us to create tints which isn't possible with normal colours.

Whenever you change colour all the tints change that are associated with this colour change as well because it's global.

Spot colours

This is a solid colour meaning it hasn't been printed using a mixture of CMYK, it's a colour printed using its own ink. It is chosen over CMYK because it can be cheaper to print as you only need a single plate per colour, whereas a single colour in CMYK could use up to four plates. Spot colours allow consistency, for example major corporate branding such as sainsbury's always have the same orange so spot colours mean the colour will always be consistent. Spot colours also enable you to print colours that aren't available in CMYK such as metallic or fluorescent.

Pantone is an example of spot ink, each colour has its own unique reference number allowing you to consistently match up. To access these;

Change the pantone swatch menu into a list like we did previously to make easier to navigate, at the top of the menu there is a search bar that allows us to search for a reference without spending time manually searching. 

whenever you click on a pantone colour it is automatically added to the swatch palette. Do not change the name because when printing commercially the printer will not know the reference number and won't be able to print the exact colour for you. Because it's a global colour you are still able to set up tints with pantone colours. 

Halftone is used to print tints with a single plate spot colour.

When we open a new illustrator document the swatches reset because the swatches are unique to the document they're used in. To save swatches so that they can be used in other documents go to go to swatch menu and 'save swatch library as AI' this means they can be opened in multiple documents through the swatch library and user swatches.

ASE (adobe swatch exchange) allows us to export our swatches so that they can also be used in photoshop and indesign.

Design for web- introduction to web

In todays session we briefly looked at the background of web and the basic terminology used.

History
In 1991  Sir Tim Berners-Lee, a british scientist working at CERN in Switzerland, created the internet to 'link and access information of various kinds as a web of nodes in which the user can browse at will' The internet was initially a response to a problem of sharing work and information across a large lab. Steve Jobs created the worlds first web server at CERN (a NeXT computer that served as host)

In 1992 the first ever image was uploaded to the internet, the image was of a CERN all lady pop group

Terminology

• Browser is the software that formats the code
• URL uniform resource locater (web adress)
• HTTP hyper text transfer protocol
• HTML hyper text markup language
• CSS cascading style sheets
• FTP files transfer protocol
• CMS content management system

We then looked at a couple of important terminologies in more depth including skeuomorphism, this is a word used for a piece of design that is made to look like an imitation of something that it isn't. For example when turning a page on an iBook, instead of going straight to the next page it virtually imitates the turning of a page.

We also discussed what responsive design was, responsive design can also be referred to as 'reactive design', it responds to a variety of media, screens of different sizes by reshuffling automatically. This concept was created by Ethan Marcotte.

Before designing a website one should always ask 'what's the point'

• what is the purpose of the website?
• who are the target audience?
• What does the target audience need from the website?

Books:

• HTML & CSS, Design and Build Websites
• Design for Non-Profit Organisations - Massimo Vignelli
• Scratching The Surface - Erik Spiekermann

Websites:

• www.awwwards.com
• www.piccsy.com/everything-design
• www.aisleone.com
• www.fivesimplesteps.com

As a group we then discussed the first thing that came into our head when we showed a website homepage as it takes around 2.5 seconds for our minds to decided on a website after initially seeing it.

Apple

Reactions - Slick, Clean, Expensive, Modern, Bright, Simple

LCA website

Reactions - Thin, Boring, Busy, Cluttered

My Own Bike

Reactions - Minimalist, Modern, Clean, Shiny

Slavery Footprint

Reactions - Colourful, Engaging, Confusing, 'What?'

Lings Cars

Reactions - "Urgh", Cluttered, Teletext, Cheap

Evangel Cathedral

Reactions - Game show, American

No Limit Arcades

Reactions - Crazy, Confusing, Cluttered, Busy

Ideas By Music

Reactions - Innovative, Clever, Appropriate, Insightful, Modern

BBC

Reactions - Busy, Cluttered, White