OUGD504 Visiting Professional Evolution Print Talk

Today Jason from evolution print came in to talk about the world of commercial print and what we need to know to get our designs to look their best once we leave the safety of the college. 

Their main process id Litho printing. This means the use of etches aluminum plates that each take one colour; C,M,Y or K. The plates are coated and the machine that etches them burns away creating a printing surface (intaglio). The plates are very flexible and wrapped around rollers which are then coated in very thin layers of ink which the paper is then rolled over to transfer the ink.

They can do a huge variety of sizes, something that puts litho printing in front of digital printing in certain situations. 
Although they can print on a huge number of papers when requested they all boil down to: gloss, silk, matt and uncoated. 

People often get confused by the difference between uncoated stock and matt. Matt paper is a type of photographic paper and does have a coating that allows for crisp finish especially when images are concerned. Uncoated is precisely what it says on the tin, in fact the ink is absorbed much more readily with uncoated stock and the dots tend to bleed creating a less sharp look. Not that this is an undesirable look. They get around the problems of uncoated stock by printing a thin coat of finish over the printed surface to seal in the ink so that it doesn't rub off the surface or bleed too much.

The main difference between litho and digital print is that it is much cheaper to print larger numbers with litho than with digital. So, this is simply something to bear in mind when you consider a print job, sometimes digital is more feasible and more economic.

When it comes to booklet printing certain problems tend to arise. Self covers can cause less trouble than a cover that is a completely different paper, texture and weight, than the papes inside the booklet. The sections of the booklet (pagination) could sometimes be in different stock and this can really confuse how the book functions and opens. 

Litho printing is priced differently to digital. Where as you are charged for the surface area that is printed in digital (double sided is more expensive) litho has a base charge for the creation of the plates and then replication is basically simple. Hence the cheaper production of greater numbers. This means that if you have something double sided where you can use the same plates then there is very little extra charge.

Designers Often Get wrong:

-Always include a bleed of three mill and any crop marks.
- When sending a document to print, send both the original document and the pdf so if anything needs to be changed it is easy.
- When printing business cards don't set out the full page for print just send a page of the size you want printed with a single version of the card. Placement and gutters will be worked out by the printers.
- Always ask how they want the art work sent over- don't include spines or gutters
- all images should be 300dpi.

When it comes to proofs there are two ways that evolution do it. One is a hard copy proof that is digitally printed and then signed off by the customer and then there is the pdf proof. you choose which one you want dependent on the job.

OUGD504 Studio Brief 03 A Brief HIstory Of... Hand Drawn Type For Logo

In the previous post I did some sketches for the logo design and I realised I needed to refine what exactly I wanted to do with the type. So, I spent some time looking at type on pinterest and put together a board that I can use as inspiration when I am drawing out the type. I have decided on hand drawn type because it fits with the earthy nature of my subject matter and  captures the imperfect perfect of nature its self which is a selling point of getting out for a walk, which is the whole point of my website.

As you can see I have focussed on collecting italic and script fonts as well as softer serif fonts that use all caps. These are the two type of look that I played around with using in the earlier logo sketches, although they were very simplistic. Reason these two types appeal to me for this design is that the script style has an inherent suggestion of movement which works well with the content and the all caps serif has a traditionalness to it that has connotations of wholesomeness and old fashioned good fun that will also work to my advantage.

OUGD504 Studio Brief 03 A Brief History Of... First Logo Sketches and Peoples Responses

After deciding that I wanted a circular format for the logo I started to experiment with some sketches. I wrote down a few words that I wanted to communicate with this logo.

- Escapism

- Beauty of Nature

- Concept of walking

- Fresh light and open

The dotted line is something that I really want to use because of the way it suggests the path marked on a map.

I like this idea but I also feel that it is just far too detailed to be shrunk down and still communicate anything. Also the cross over of the two branches just feels a bit religious. 

Although at this stage the type is just a slight suggestion of what is to come, I really like the type in this; the fluidity of it helps suggest movement which works perfectly in the context  of a walk. However, I have reduced the amount of plants in this design but I am uncertain if it is too busy to work at smaller sizes. I think from here on out I will draw these mock ups smaller so that I can deduce the shrinking possibilities of the logo.

I also played with the possibility of adding salt crystals into the mix to make a literal imagery recreation of salt of the earth. In this logo I also looked at making the plants solid shapes rather than outlines in an attempt to make it look less busy. I think this is something I should try out more because it seems to work.

I tried implementing the idea of the plants growing from the salt crystals but I am uncertain about how effective this is.

I played around with moving the base line of some of the type and having the plants grow through the words but once again I just don't like it. It feels messy and scratchy and far too busy.

I then tried implementing the idea of the salt crystals as a texture in the background of the logo but again I think this isn't communicating anything and is far too texturally busy to shrink down well.

This is probably one of my favorites because the filling on of the plants makes them a lot more simple and the type aspect from the earlier logo sits well within this. When I asked around in the studio people definitely seemed to pick this logo out repeatedly. One person did say that perhaps the type should be higher up and to the left to balance out the weight of the plant silhouettes and this is something that I want to play around with once I have got the type designed.

This is another design that got a really positive response. When designing the type properly I will test out placing it in the border of the logo. I also like the way this logo could be divided up into the plants growing from the salt and the title frame, this could be useful when it comes to creating a sense of continuity in the website.

I quite like the juxtaposition that this logo provides with the soft plant shapes at the bottom of the frame and and the sharp edges of the salt crystals. However, in my enthusiasm I think I perhaps have over complicated the design again. I think it would be good to go back to this sketch and see if I could simplify it in some way to make it more effective.

OUGD503 Responsive Tackling Briefs

We started by looking at an old brief.
-Yahoo! is the original .com start up, it has everything you would need in your day to day life. 
-The brief is about re designing the home page in a fun and engaging ways for a target audience of 13-18.
This age group is already adept at filtering large amounts of information to find what they are looking for.

They wanted a digital campaign that makes new users want to set up an email account with yahoo and make it their home page.

What are yahoo's main problems?

-It is not google

It seems that the major problem is that yahoo is forever associated with the past and the web failure like my space and those web vanture that didn't quite make it. Or weren't quite google.

We started by looking at what was wrong with yahoo at the moment and how we could combat these problems with our own design.

We then looked at sketching some options of the website interface and how we could simplify it down to what the target audience needed to see on the very first page. We also started to think about the difference of the display when you are signed in or viewing the content from outside the system. There needed to be perks to being signed in and integrated with the yahoo system so we came up with two layouts one for when you are signed in. All of it was developed around the icons we created.

OUGD504 Studio Brief 03 A Brief History Of... Website Flow Chart Design Sketch

After re organising the information for my website I went back to redraw the website structure. In fact I found that it wasn't so much the structure as the way the information is presented about the walks that makes the difference. The iconography detailed in the last post has made all the difference when it comes to fitting in more information. However I will need to look into designing these in such a way that it hopefully doesn't need a key.

As you can see I am looking at creating a three column grid that stretches across the complete extended scroll format of the website. The icons will sit along the lines tat extend down this grid from the walk specific logo on the home page to the walk specific page. To negate the need for a cluttering title for each page I want to reduce the opacity of the other two walk logos when on a particular walk page. All logos will still take you to the corresponding page but just be slightly less noticeable. The photo for each walk sits in the third of the screen that the walk logo is allocated in the home screen. This means that the symbols need to work over the images. This is something that I need to consider and test when I am designing them.

OUGD504 Studio Brief 03 A Brief History of... Categorisation of walks Study Task 7

After the workshop earlier on user experience I used the flow charts we had created to look at how I could better communicate my content. From the flow chart I knew that I needed to communicate where the walks were first, then what the walks are like and how to get to the starting point.

As I was breaking down what someone would want to know about each walk I came up with a few extras. For example, whether or not the walkers would need to check the tide times for a particular walk (because the path goes down onto the beach).

I broke the areas down into:

Tide-yes/no

length-couple of hours/ half a day/ a full day

attractions-Foodstop/few shops/town

Reach the starting point- bus/train/car parking/coast hopper bus

I also went on to outline what exactly the logo needed to communicate on the first page as dictated from the information flow chart.

OUGD403 Responsive Studio Brief 01 Individual Practice Research into the Fedrigoni YCN Brief

Even though when I first looked into the YCN competitions I wanted to do the J2O rebrand I now think that I want to do the Fedrigoni Brief.  This is because I felt that I could only take the J2O brief in one direction (plants and botanicals) and I wanted to stretch my skills and ideas and do something that is really new for me. So, here are the brief details.

The main things that grabbed me about this brief was the way that it suggests quite a hands on approach, which is always the way I like to work. I also like the way that the fedrigoni brand is quite minimal and edgy which in the past I have had trouble re creating. So, I guess I am saying that I like a challenge. The first thing that caught my attention was the term 'marketing tool', I need to understand what exactly this means and how best to design for this use. The background information seems to focus on the idea of italian heritage and the pure quality that underlines the whole product range as embodied by the true black that the paper manages to achieve. The audience for this campaign is mostly design and art based and this is really what interests me because it means that I can do something beautiful, simply because the product is beautiful to the customers. Also because they are presumably well versed in many aspects of design i could do something quite specific and niche. 

The Creative Challenge

We would like you to design a marketing tool that will promote the NEW Sirio Ultra Black.

Sirio Ultra Black is a collection of pulp coloured papers and boards, with no carbon content. They are extremely light fast and available in 115, 185, 280, 370, 460, 680. The range also includes an embossed version: E/R65 Fiandra in 115gsm only. These papers are FSC certified.

The tool will need to speak to the designer in a visual way which appeals to their high aesthetic standards. It should therefore be a creative piece which maintains awareness of the range.

Your concepts can include creative pieces such as special prints, posters, booklets, direct mailers, promotional videos, electronic newsletters, advertising or even a launch event.

Remember, while we appreciate that we are in a digital age, we are a paper manufacturer, part of the print and paper industry and wish to keep these mediums alive!

Additional Information

About the paper:

Sirio Ultra Black is the newest addition to our product offering and is considered to be one of the darkest black papers on the market (even 20% darker than our very own Sirio Black/Black).

The absence of the carbon pigment within the paper means that gold, silver and metallic hot foils can be applied without any issues. The carbon pigment within black papers can often be the cause of oxidation or a speckled appearance when applying hot foils in particular shades, instead a special dark colorant has been used in Sirio Ultra Black to achieve deep value darkness.

Student Sample Packs:

To give you a better idea of the papers that you are designing for we will provide you with a student sample pack. In the sample pack there will be a selection of papers relevant to the brief. To request yours email: marketing_coordinator@fedrigoni.co.uk 

We ask that students do not send any requests to our samples department or via the online sample request forms on our various websites as these will not be processed. You only need to request your sample pack once and it will be automatically sent out in due course, so please be patient.

It is not required that students strictly use Fedrigoni paper to illustrate ideas. Entries will not be penalised for using other papers. However, if you would like to include some Fedrigoni papers into your work feel free to make use of the sheets provided in the sample pack.

You are also welcome to pop into our Imaginative Papers Studio in London, where you can view the paper range swatch, see printed samples and get some inspiration! We are open Monday to Friday, 9:30 till 5pm. Be sure to give us a call beforehand to let us know that you’ll be coming.

Deliverables and Additional Information

For guidance on how to submit your work, please adhere to the main Deliverables information which can be found at the YCN website.

Any additional information referenced in the brief can be found in the supporting Project Pack at the YCN website.

The next stage is to order the breif pack and to research the brand and any existing or past advertising campaigns.

OUGD504 Studio Brief 03 A Brief History of... User Experience Design Seminar

User experience design is used predominantly in web design but is also used in ergonomics of product design and is a growing area in all new media such as app and other digital advances. The field is often seen as lacking because the connection is so rarely made between simple visual design and a definite focus on user experience.

User experience is more a focus on the role that the product or design plays in a users over all existence. For example, blackberry was superseded by the iPhone because apple thought a lot more about how the phone would interconnect with a persons life and day to day experiences. It is the totality of the end users perceptions: effectiveness, emotional satisfaction and the quality of the relationship with the entity that created the product or service  (what expectations does it create for subsequent interactions). The phone fits so much into peoples life that they often defend their phone decision quite vehemently. This extends to brands and the trust that a good product reflects back on to the users mental image of a brand. 

Hassenzahl and Roto (2007) - divide the 'do goals' make phone calls and buy things from 'be goals' which are the use of technology to create and reinforce a sense of identity and the more socially important aspects. These are two separations of the areas of user experience (not always applicable?)

What is user experience? a comparison was presented between digital maps and the 3D touch maps of inuit tribes in Greenland. The tactile interaction between the user and the 3D map makes it perfect for the requirements of the audience. This is a completely different user experience.

We then when on to compare two different types of hand dryers. One the standard blow dryer and the other the Dyson air blade. The feel and design of the Dyson air blade makes it seem like a better product when in actual fact the newer hand dryer is no more hygienic. The way they make the hand dryer look and the suggestion of something completely new makes it a slightly better user experience.

The comparison of yahoo and google as two different search engines. Yahoo tries to be more of a information board and do numerous things at the same time. When we discussed this further we talked about the fact that google did in fact have all of the utilities of yahoo but it is just neatly tucked away which makes it more user friendly and allows the primary use (search engine) to come to the forefront. The busyness of yahoo is establishing more of an identity straight off the bat where as google is very minimal in this respect until you log in and the experience becomes personalised and your page communicates directly to you about the Google identity.

Which products or services have more focused user experiences tailored to an audience and which are less so?

Amazon-etsy
Both are good ish but we think that the aesthetic of amazon is incredibly dated and doesn't create any emotional connection at all, also there is a sense that it is all coming from a big corporation. In contrast to this etsy has a crafted aesthetic that seems like it is coming from people rather than a business. However, there is also the point that we go to these websites for different things and so the user experiences will differ.

Windows media player- iTunes
They do the same thing but the combination of the aesthetic and the way that we integrate and work with the program makes us all like itunes a hell of a lot more. 

Wordpress- blogger
There is a differentiation in the fact that wordpress is made to look like it is for the writers of the blogging world and blogger is the less academic re-blog blogging experience.

Design for the Wild- design in context. 'Cognitive activity is embodied within the location of the activity and the tools used'.  Really consider the context of the tool and who uses it. User research is a fundamental aspect of designing for the user experience because the design is shaped around how they want to use something. User centered design.

Garrett's model of UXD- Formalised all the different aspects of user experinec design. Going from the theoretical and metaphysical aspects to the more solid ones. At the bottom - product objectives (what is the purpose of the tool and what does it need to do for the audience) Content requirements and functional specification , informtion architecture, informative design and sensory design.

We were then asked to relate this model to our own website design and the content we had. 

We constructed a user perosona to shape the information hierarch around.

We were then asked to create a user flow model for our own website, I found this really useful in organising th order in which the information needs to b communicated

OUGD503 Responsive Studio Brief 01 Individual Practice Leeds Art Part Meeting

I had a meeting today with a lot of the people involved in the Leeds At Party Movement to help get an idea of what they needed help with and what i could shape into part of my responsive briefs. They are basically campaigning the importance of arts education emulating the first arts party by Bob and Roberta in scarborough last year. They also talked about the fact that they wanted to do this better by getting students involved. This is because the original arts party was very white middle aged and middle class in the audience that it reached and although arguably this is the audience with the most political influence the audience that it should access and 'call to arms' are the students that come from this arts background and have the most to say about it. The original arts party also seemed to simply attack Michael Gove and his policies where as the aim of the leeds arts party is much more aimed at celebrating arts education and highlighting its importance as part of a functioning society. 

There are a number of things that I could help with:
leaflet or program that forms part of the event promotion and paperwork that will be handed out on the day. (I should outline that the Leeds Art Party is an event not simply a society) This program could look at categorising all the events in an easy to understand manner and making a map for those new to the college layout. 

Signage: This may involve simply creating a font from the logo that they already have so that it can be used on things like signage along with iconography for the different types of events i.e. talks and workshops would have different symbols.

I will also be involved in a lot of the organisation of the events such as the stand we will have at the juju showcase. We have yet to define this but it is possible we will all be using designs to create a big mix and match of art and visual communication.

OUGD503 Responsive Studio Brief 01 Individual Practice Organisation of Briefs

I was worried about the deceivingly large amount of time we have to finish these five briefs for this studio brief so I simply looked at the time we have until we receive the second brief and see what kind of time slot I could allocate to each brief. However, there may well be some changes to this because I may end up producing work for the art party slightly later than this because of the date the actual arts party is taking place (may) but I will do everything in time for the module submission. 

OUGD504 Studio Brief 03 A Brief History Of... Crit

I presented all the sketches that I detailed in the last post and when through the outline of the purpose target audience.

However, Simon kept saying to me and the majority of the other students that this is not a really defined purpose. We should analyse why someone would visit our websites in the first place and tailor the website around this. For example, people (young professionals) in the cities around the norfolk coast might not be aware of the kind of walks that are  available  around them and the places they can visit. In this sense the first and foremost purpose of my website would be to inform young professionals in the cities of norfolk that these places are easily accessible and readily available for a way to get out of the city. In this way I need to include information about train times, local car parks, the best maps to use, footpath symbols and especially information about the norfolk coast hopper which is a bus that travels parallel to the foot path and can take you back to where you left your car. There were also suggestions about making links to social networks so that the comments people made about certain locations could be accessible in the map or the website. These are things that play into the search engine optimisation as well because they are specific to constructing a day out and specific to the county.

OUGD504 Studio Brief 03 A Brief History Of... Web and Coding Workshop

Web Standards and limitations:
HTML- Language we will lear to use
XHTML- extended language used for more advanced design
CSS- cascading style sheets- the main format used for advanced design coding for really specific aesthetics
WYSIWYG- what you see is what you get. This is what dreamweaver is but this capability is limited
SEO- Search engine optimisation, the accessability of a website through search engines
FTP- transferal through from personal computor to the internet.
URL-uniform resource locator.
A lot of abbreviations are ways to connect between the website and a database where  the information os stored (amazon) (PHP XML) as designer you would never need to know how to use these (front end design)
HTTP/HTTPS- getting from the sever to the users screen
UI- user interface
UX- user interface
This is why nowerdays you are more than a website designer (app etc) design to consider the suer experience. This is what you really need to think about when designing a website the experience has to be appropriate to the target audience.

As a designer you have to be aware of the limitation because you have to design for the lowest common denominator so that you know that it will always work.
-Web safe colour:
These colours are what all screens can display. They are from the RGB colour gamut but originally the 8bit screens could only reproduce 256 colours. There are still extreme limitations to colour. Decide before hand the colours of every aspect of the website and then type the hexadecimal code.

Red-
FF0000
FF0

White-
FFFFFFF
FFF

Black-
0000000
000

When entering this code in illustrator or photoshop you can simply enter three digits.

RGB colours are collectively about 16,777,216 in total different shades. How you choose a colour in illustrator or photoshop they can be in 0 to 255, these are the range of a particular colour R, G or b. 

In CSS and coding for 100% colour red would be rgb(255,0,0)- these colour limitations are dependent on your choice and identification of you target audience and the kinds of computer that they are likely to have. The full RGB colour range will only work on computers built in the last two or three years.

Many brands that depend on colour for identification have had to change their colour choices so that they are web safe and easily reproduced.

Fonts:
If you choose a non standard font then when someone who doesn't have the font in their computer, accesses the website it will be replaced by times. Choosing a font family rather than a single font. This means that you have fall back fonts.

Georgia, serif
"palatino linotype", "book antiqua", times, serif

if the name of the font is two words you need to put speech marks around it. You can make you list of back up fonts as long as you like.

With CSS you can install a typeface on the website (at font face) this means that the font remains consistent across all computers that access the website. You must insure that the font that you use are not only free to use but also free to distribute because other wise yo are breaking copyright laws. There are ways that you can imbed the font into the website so that it can't be downloaded but this is very complicated but also is a bit of a blurred line when it comes to copy right it. Font squirrel will provide a list of these fonts.

Size:

originally 640 x 480 pixel resolution- this would display very small on most screens
1024x768 is the usual dimensions that designers start at when creating a website. However, iMacs can display up to 2880 x 1800 (220ppi) so this is something that needs to be considered. Numiko says that they design separate website for being accessed through different devices. However, this is not always the answer there are lots of different responsive ways. For this brief it may be best to design numerous different options. 1024 x 768 is the best size to start at.

File Formats:

The type of file you chose to save info as can effect how it appears. 
-PNG transparency
-GIF animation
-PDF multiple pages
-JPEG

You can't just work with one type of image i.e. if you needed levels of transparency PNG can support this but JPEG can't and GIF is the only one that can support animation. It is generally accepted that you design 72 ppi however 96ppi is generally accessible by everyone now and apple screens are able to reproduce 220ppi. Mostly people still design at 72ppi because working with file sizes bigger than this really slows down the time it takes the website to load when people have limited bandwidth. For video or image you have two saving options lossy or compressed this is different from losses files such as PSD or TIFF which don't compress at all. This compression is required to allow for easy and smooth access to information. 

------------------------------------------------------------------------------------------------------------

Dreamweaver will not work if you do not use the user work file when on the network of the school. You must create a root folder in the user work folder and this is where everything in the website must go.

Any images that the website needs will go in a file within this labeled folder, any HTML page lie loose in the user work folder in the testroot folder.  Although you must remember to relocate all work in the user work file to the desktop when you have finished working.

------------------------------------------------------------------------------------------------------------

Never use the open recent column when in college because there is no guarantee that these will open from the correct place and this can cause problems later on. The frist thing that you always must do is tell dream weaver where the root folder is. Never delete the file extention of the files you are working with because the sever will not know what type of file it is dealing with.

Once this is done you have to create you wire frame 10024 px by 768 px the header is 160 px high. Logo will be 260 px wide so that it is square. This can be called a wrapper or container or an envelope. It helps to create a wire frame on paper before you start designing.

When you open up the document you can view the design WYSIWYG capabilities or just the code or a split screen of both.

The <html> means that the server knows that from this point on we are coding in html, this needs to be closed as can be seen at the bottom of the code. The head means the header of the website. Nothing that is visual goes in the head area, this is all the background functionality of the website for example if we are using CSS this is where it goes. SEO also goes here like the tagged names of each page so that search engines can find this. Also key words could be here so that search engines can find your website quickly. The body section contains the content and design of the website goes in this section, this is what is visible.

At every stage save so that you always know that the previous piece of coding is what caused the problem.

This shows the transition between the coding and how the website actually looks online. With CSS you can create a stylesheet which links to every page creating a continuity of look instantaneously. 

There is a clear difference between the coding display of the CSS and the HTML displays. Generic CSS links to HTML and specific CSS which creates something called a div.

shows options

To close attributes you need to use a semi colon and then close the curly bracket.

linking stylesheet




font size 0.7 pixels to a point.

We then looked at fixing the background to the top of the page so that there was not gap. The code for this is shown below.

By selecting absolute positioning we then worked out where the left hand side would sit in the middle of the left side of the screen so that the actual centre of the website aligned with the centre of the page.