OUGD504 - Design Production: Design For Print and Web Crit

This morning we had a crit with either Phil or Lorraine in small groups. I was in a group with Phil as well as Adam, Lizzy, Abi, Amy and Anna. We were at the start of the day and had one hour to get through everyone and give everyone some constructive feedback. I went first and discussed both my ideas for web as well as print.

I started off explaining my concept for web and how I am going to base it around the concept of sugar cane. Using my three scamps I explained which had stood out to be the most successful in Simon's web design session. I would have liked some feedback on the content of my website at this point but nobody really responded to what I had to say. Phil said I should decide on my content myself and narrow it down so that I didn't have too much to work with, I felt as though this was a fair point and I am going to strongly consider my content now that I have had this crit. 

The feedback I was given for my web ideas are as follows:

•  Phil liked the idea of creating a sustainable future and involved the audience by asking them to create something out of recycled material and sharing it with the world essentially.
• Phil also mentioned that when he was listening to my idea he instantly thought that it could be an educational resource and said that I should consider whether it could maybe be for schools, businesses or commercial use.
• The idea of looking at current brands who have used sugar cane within their packaging also seemed to appear to be a strong idea, this is something I need to consider.
• Overall I was therefore told to really look at my audience and focus it down, when doing this it will help me to decide on my content as well.

I have therefore decided to carry out some primary research and get some feedback from people in my year group to see which they think would be the most beneficial website to produce. I think this will help me immensely and it is important that I gather this primary research to know that I am creating something worthwhile that would be used.

I then spoke about my print brief. I had spent quite a lot of time explaining it yesterday to the group I was in and so I didn't want to take up too much time today concentrating on it. I therefore tried to summarise all of my ideas, however this was hard as I have currently got so many. My main concern at the moment is my target audience, as I really need to nail this down before continuing any further with design ideas as such. 

The feedback I was given for my print ideas are as follows:

• As soon as I had explained how I would be creating this pack based on the idea of 'turning over a new leaf' or even 'take a leaf out of my book', as well as mentioning about how I would have seeds at the end of the book and things to push out and create bookmarks, Phil came back to me and responded by saying that he instantly thought it would be perfect for the use of families. This is something I hadn't previously considered because obviously my underlying concept it all about being eco friendly with design. Beth then asked Phil about the content of my print information pack and suggested that children wouldn't be able to necessarily fulfill the process. Phil then said it would therefore be more of a challenge for me, something I would greatly benefit from, because I would have to consider how to approach it in terms of tone of voice. I could write it so that the adults could understand it and teach their children, and at the same time would be encouraged to consider what materials to use when playing with their children or even teaching them. I also think this gives me more scope to include a wider variety of things in my pack. I had already considered including the wooden stamps that I use to create the pack, so that the children could then use the ink they make with their seeds, and then use the wood blocks to print. This could easily be extended by creating more 'props' for them to use for a variety of processes.
• Due to not having to include everything within my pack (as long as it is shown on my blog that I have researched it) it allows me to be more selective about the information. Phil suggested that I could perhaps provide the parents/adults with a separate glossary with all of the other processes if I felt it was necessary.
• Last night I carried out some further research after my crit, and I found some resusable white boards as well as clear sticky boards. This would most certainly appeal more to children. I do however think that I need to aim it at children who have already been in education for a good amount of time, because they will need to be able to read and respect the pack in terms of keeping it in good quality.

I felt as though this crit was beneficial in terms of the feedback that I received, however I also felt as though I was slightly rushed and was unable to get across all of the points that I was hoping to make. This is because I was aware that we only had one hour to get through everyone. I do think however, that next week's crit with Lorraine and Phil will help me a lot more and put me in the right direction, and at the moment I can concentrate on responding to the feedback I have been given over the past two days.

OUGD504 - Design Production: Designing For Web Scamp Feedback (Workshop 2)

At the start of the session today we were asked to place all of our work out in front of us and then asked to walk around the class and crit everyone's scamp designs. I think some people had managed to spend more time on the scamps than others. We weren't given that much time to do this, but I still found it beneficial to me to be able to look at what other people had thought of. When I came and sat back down to read my feedback I was really pleased with how constructive it was:

• Scamp no 1 - very clean and easy to navigate
• Scamp no 3 - looks the most interesting, you could make the earth rotate to make it more interactive
• Scamp no 3 - seems the most interesting, and also the most engaging and interactive
• Scamp no 3 - the most effective because of the interaction with the globe
• All scamps are effective
• Scamp no 2 - the clearest and will be the easiest to make as well as use. Because of its simplicity I can see it being easy to make in to a mobile website or app.

OUGD504 - Design Production: Designing For Web (Workshop 1)

We need to understand:

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

Web Standards

Acronyms, Abbreviations and stuff...

HTML is the basic coding language of the internet.

Hyper Text Markup Language

More graphic based websites

WYSIWYG: What you see is what you get

What you see on the program is what you are going to get when it is on the internet

Adobe Dreamweaver is one of these programs

In theory it works but in practice it is not that great

SEO: Search Engine Optimisation

Need to do this to get your website to show up on Google or a search engine

We will be looking at basic SEO

To get to the top of Google we have to pay money

FTP: File Transfer Protocol

Transfer from computer to web

XML and PHP: Linking a website to a database

Seeing what stock is available

UI, UX, WWW: User Interface designers (UI) this means that you design for an iPhone etc

User experience (UX) reacting to a website, this is the first stage of user experience

When designing a website we have to consider the user experience a lot it is really important

Limitations

Designing for the lowest common denominator

Colour

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

Colour on web is made out of red green and blue light.

Red 256 x Green 256 x Blue 256 = 16, 777, 216

This is how many different colours there are available with RGB.

CSS allows us to work with the full RGB colour range.

The 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)

You can show only web safe colours as well on some software.

The problem with CSS is that it isn't consistent. You may choose beige for your website, and it may look right on a mac but then different on a PC at home. They use different RGB colour modes. Different monitors are capable of producing different colours modes. It is therefore not a consistent representation of colour. You would therefore only work with the web safe colours to make it consistent. CSS is capable of being produced but isn't a web safe colour. Therefore whenever you break a rule then it is generally not going to work the same across all devices.

A lot of the websites on awwwards.com look great on a mac but not on a PC. For those websites to have those animations they are breaking the standards and rules of web design. It is going to be different but it isn't going to be consistent.

When designing a website it should be designed for a target audience with macs.

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 instead.

The website must only use fonts which are available on the machine you are viewing it on. It is not on the website itself. If Helvetica was used, however someone had lost this font, it would display the text using Times Roman as this is the default font used on websites.

The fallback options - Use Helvetica but if that isn't there, use Arial, if both of them aren't there then use a sans serif font. If not then it would always default back to Times New Roman.

Some common font families:

Serif Fonts

Georgia, serif

"Palatino Linotype", "Book Antiqua", Palatino, serif

"Times New Roman", Times, Serif

It is important to use the speech marks at the start and end for it to understand. 

Sans Serif Fonts

Arial, Helvetica, sans-serif

Tahoma, Geneva, sans-serif

"Trebuchet MS", Helvetica, sans-serif

Verdana, Geneva, sans-serif

Again, you can break the rules and do something different. Simon created a website where they wanted a specific typeface which they said they couldn't get from standard fonts. He did this by installing a font to a website. The problem with this is that it breaks all of the copyright laws of fonts. If you wanted to use Futura and you installed in to your website, you are in fact distributing the font around the world. 

Even free fonts if you distribute it, then you have to pay for it. The license fee totally depends on the usage of the font.

If you use a free font from DaFont you are breaking the license so you would get a massive charge. All fonts that are free are only free to use for personal usage. 

YOU MUST PAY TO USE A FREE FONT COMMERCIALLY IF IT IS DISTRIBUTED.

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 if system.

However using font-face breaches copyright laws.

www.fontsquirrel.com - Quite a good website because they are generally good fonts. Whereas DaFont isn't as good. They are designed by typographic designers on font squirrel. If it says web font kit then I can download it to actually use on a website. If it isn't there then I would be breaching the license.

Size, dimension, pixel resolution

640 x 480

800 x 600

1024 x 768

1920 x 1080

2880 x 1800 (220ppi) This would be 50MG in terms of file size. Some people's data allowance would be used up by accessing this website, using up too much data. If you internet speed wasn't that high it would take 10 minutes trying to get this website up. 

This is a huge problem for us as graphic designers. For years people have said we should design for the lowest common denominator. But if we design at the size and use a large monitor then it wouldn't look right. However on the other hand if you design something too big for a smaller screen size then that wouldn't work either. There are ways around this however as we will be discussing over the next few weeks.

Responsive web design
READ UP ON RESPONSIVE WEB DESIGN

File Formats

PNG
GIF
PDF
JPEG

We have to work with Lossy file formats.

Working with print - LOSSLESS file formats
Working with web - LOSSY file formats (compress the images)

The second thing we can do to change the file size is change the resolution (72ppi)
This is actually a problem through, do we still work with 72 or work with 96?
Most people still work at 72 because there isn't that much different visually.

Part 2 - Using DreamWeaver

We need to click on design to view what it would look like on web. Open the file using HTML initially when setting up the document.

Coding

The top line here is actually not needed for the website to actually work, however we need to keep it there.

Line 1: <html> 

Line 2: <head>

Line 3: <title>

Line 4: <meta...> (search engine optimisation - key words)

Line 5: </head> (something that isn't actually visible but this is how to make the website function. For example if we wanted to use a different coding language we would specify this within the head tag)

Line 6: <body>

Line 7: </body> (anything that is going to be visible in the actual website)

Line 8: </html> (this means close html. Everything has to be opened and closed)

Icon next to the website on the tab is called a favicon. Not all websites have a favicon.

Need to manage our files in a similar way to how we do on InDesign. On this program we can package it all together, however DreamWeaver doesn't have this option.

Before we create the website we have the create the folder. If working at college we have to make sure that we create it in user work.

Everything is always backed up somewhere in the world. This is something we need to get used to. When relating back to placement over Summer we had to always save the work to the server.

Folder shouldn't have uppercase, any more than 8 characters with no spaces. This is important otherwise it won't be functional. 

First of all we create a root folder in user work and then inside this folder we have a sub folder called images which is where all of the media goes.

We then need to create a new site.

When we click this option this box comes up. We need to give the site a name. This isn't overly important. We can have spaces and uppercase etc. I am going to call it root, in the same way that I called the folder that too. 

We then had to select the correct folder in which we can find the relevant information and then this part of the set up process is done. When DreamWeaver suddenly shuts down in the middle of setting up a document it is because there isn't space in the home folder.

We then need to save it now. So when we click file and save as this is what comes up. When saving on this we cannot delete the file name at all, we may perhaps do this on illustrator and delete the .ie. This is extremely back practice and we should never do this. At the moment we are creating the homepage. We don't however call it this, but instead we use 'index' as this is a universal word to use. All of the other pages can be called whatever we want it is just that the first page needs to be called index for it to work.

We can then preview the page on the internet and choose which to open it in. Every time a change has been made it is worthwhile to refresh the page and review the site to see if it has worked, then we only have to undo one thing if it hasn't worked.

When making a change and haven't saved there will be an Asterix next to the name at the top and this has been successful!

For Next Week - Come up with the layout of what the website is going to look like.

• Colour?
• Fonts?
• 3 separate designs
• This is something we would do professionally too, it is important to do 3 designs.
• There isn't much point in designing at this stage digitally as it could be perceived as a waste of time.
• Scamp is a rough design of how a website/magazine layout is going to look and work.
• Annotate.
• The scamp should be almost identical to your final design.
• We will be having a crit next session.
• You will not necessarily like the design if you don't enjoy the subject
• Also for each one show a site map
• Example - gripittool.co.uk
• All of the decisions are made before getting to the computer
• Images?
• Video?
• Audio?
• Animations?
• What size the website is going to be?

OUGD504 - Design Production: Designing For Web (Workshop 2)

• Apply what we are learning to our own bespoke websites.
• We then went round the group and left feedback on everyone's scamps. Simon noticed that a lot of people had gone against web standards which isn't necessarily a bad thing. However this session will help us learn more about what we can and can't do.
• When we open up DreamWeaver it will come up with an error box and we need to click manage sites.
• Then click on the pencil so that we can edit it.
• index.html is always the name of the home page.
• Today we will be using html alongside CSS.
• The stylesheet we create will be linked to every single page.

Start of session

We were told to create a new document by doing the following:

Below is the code which comes up when you set up a new document. If you ever want to write a note to yourself you just do /* and write message then */ to close it. This will not interfere with your work.

Every time we write something we need to close it. To close it you need a semi colon.

This is what it looks like when it is closed.

We now need to link our stylesheet to the html page. We need to click on the link at the side.

This should have changed the actual web page font.

When designing a website it can be a fixed size or responsive. We are going to start off by looking at fixed sizes. The size we are going to work with is 1024 x 768. We are going to create a rectangle which is going to contain the website. We are going to create this in CSS.  We need to create a div ID. The first name suggested is a container. The other word which is sometimes used is wrapper. To create a div ID we use hashtag and then container { 

# container {

When laying the CSS out you can have it in line however it is easier if it is set out like this. This is easier to then go back and made changes to your work.

We then had to type in between the body to get the coloured box.

We now need to give it a position and get rid of the border.

We then want to centrally align the box. We have to work with percentages to centrally align something. This is a complicated process. First of all rather than left being 0 we change it to 50% however this doesn't make it central straight away. 

Always move it half of the width backwards so if it was 800px it would be -400px.

After the break we were shown how to create a navigation bar. 

First of all we have to create the bar using the pixel size. 

Using Illustrator we created a logo for our website in two minutes. When doing this we don't need a coloured background. Because we didn't have very long to create this I decided to design mine so that it resembles the earth with a piece of sugar cane overlapping it.

To get the logo on to our website we then had to insert more code.

We then used Illustrator to create our own buttons. We had to save each button individually.

To then set the button up we had to do the following:

This is why we need to save the images as 1 and 2 so that we can select the correct information.

Below is what my button looks like before and after.

Now that we have been taught we can put it in to practice and try designing our own website. It would be best to do this after having a crit though.

OUGD504 - Design Production: Design For Print and Web Crit

This morning we had a briefing with Phil when he told us all about what we will be doing this morning. We then went in to the studio to discuss our work. 

We got in to our own groups, ours had seven people in it. I felt as though this was a good amount to start with, however at the end we ran out of time which could perhaps imply that we were either spending too much time on one person's ideas, or that we could have done with having smaller groups to work in. This is something I can suggest next time.

Whilst we were talking through our ideas, Lorraine came over and started talking to us about audience. She had heard us talking about audience and how a lot of us were designing for 'graphic designers' or 'first year graphic designers' and she suggested that this was perhaps a bit too broad and that we needed to consider WHO exactly we were talking to and aiming it at. She then asked us who:

• Boys and girls
• Background can differ
• Have an education whether they come from A level, foundation or work etc
• Lorraine suggested that we should take away the label and ask WHO?
• May have to look at statistics
• Who else could it benefit?
• Why would they be interested?

When Jamie was discussing his idea he mentioned the book he had used 'Print and Finish' by Ambrose/Harris. This is something I am going to look at and perhaps buy to help me as it looked like a strongly designed book.

The feedback I received was:

• Make paper out of leaves - paper can be created by using leaves
• When embossing, reverse the letters so that it is the opposite that sticks out
• Create a tree which can be used to hang the leaves from - this would have two purposes and could be used afterwards for a plant to grow around and planed in a pot of soil
• Melissa mentioned that on the website, not on the high street there are plant seeds with words on so this is something I am going to look in to

Whilst we were discussing my idea I also thought about the possibility of me being able to package my books which could then be torn off and the inside of the packaging could then have a template of something which you could make - perhaps a bag which the pack could be stored inside.

I have decided that I am going to create some prototypes of some of my ideas for tomorrow's crit as I think this would be beneficial to me when explaining my concept.

I found this crit quite useful as I had some constructive feedback which I will be able to apply to my work. However, I think more feedback tomorrow will allow me to be sure about some of the things I am currently unsure about when relating to the actual design.

OUGD504 - Design Production: Design For Print (Experimentation 2)

Initially I was going to experiment further with the idea of using leaves to create ink and having done some primary research and discovered that by using binder I can thicken the ink, I have decided not to go ahead with it. I don't think it is a practical idea to pursue and think it would be really hard to mass produce if used in a live brief situation.

OUGD504 - Design Production: Design For Print (Primary Research)

After a discussion that I had with John this morning, it influenced me to be proactive and take the advice that was given to me. I had mentioned how I am interested in creating work which is eco friendly and sustainable, and how I am in the middle of trying to create my own ink which I can use on my information pack. John suggested that I should contact an ink manufacturer and inquire. He said this was another form of collaboration which would be beneficial to me. I therefore did a search and found the following website.

'For the growing number of printers who are interested in environmental care, Cranfield were amongst the first ink makers in the UK to achieve ISO14000. Being ahead of the game, Cranfield achieved the accolade of Welsh Environmental Company of the Year in 2001, long before ‘Green credentials’ became an essential requirement for business survival.'

Source

I therefore decided to send them an email immediately and hope for a quick response. I am hoping that I will hear back from them soon, however if I don't I will continue to contact other people and ask down in the print room at college. This is another way for me to form more contacts and keep in touch with relevant and important people in the industry. 

It is now the 12th November and they still haven't replied to me, however I have already been and inquired at college and asked one of the tutors in the print room who said I should use binder and that should work.