OUGD504 - Design for Print: Logo

As I am working across three different formats, I wanted to have a logo so that there was a sense of continuity across the range.

I thought about having the logo in the style of a passport stamp since my project is called a Journey Through Print. It needs to be simple as I want it to work through a variety of processes such as embossing and foiling, on a small scale. If it is too intricate or I use serif fonts it probably won't work as well as a minimal, sans serif style due to the nature of the processes.

Here is some rough sketches of what I want the logo to be like:

Here is the development of the logo:

I wanted to logo to look like a passport stamp, and be very simple because it would need to work on a small scale through a range of formats such as embossing and foiling.

I liked this shape a lot, but I felt that there is too much white space around.

So I then changed the shape so that there was no white space surrounding the words.

I then added a bit of a border to make it more interesting.

I also tried a drop shadow but realised this wouldn't work when embossing etc.

I wanted to try a circle as I thought the previous was a bit boring. However, I tried a few variations of this kind of style, and it just wasn't working, probably due to condensed typeface and length of words.

I then tried this warped version, and thought it was a lot better as it fills the space and is readable.

I then added two circles to fill more of the space, and resemble a passport stamp more. This is the final logo, and I am happy with it because it is simple enough to do the processes in, easy to read and I like how it looks.

OUGD504 - Design for Web: Flow Chart Revised

After yesterday's session when I was creating a flowchart I realised that it was actually quite a lot of pages that I needed to include, based on the website that I wanted to redesign.

Igloo Hotel
So, I have decided to just focus on the Igloo Village and Igloo Hotel, as there are four resorts and five hotels for Hotel Kakslauttanen. This is what I wanted to do originally, as I love the Igloo Hotel and I didn't actually realise that it was part of a bigger resort.

Here is my new flowchart, which is a site focusing on the Igloo Hotel:

This is a much better and simpler flow chart, because I don't have to include lots of pages about the different resorts and accommodation now, I can focus on the main points and create a more specific site.

OUGD504 - Design for Web: Fundamentals 2

This afternoon we looked at the 5 websites we bought in, and tried to draw out the underlying grid systems.
I found it quite difficult as it wasn't clear where the grids where if text and images didn't line up or it wasn't in equal sections.

Here are the couple that I figured out:

I then realised that some websites use the rule of thirds, or more intricate grids which aren't necessarily very clear. Because of this, I then realised that actually the websites I had chosen are actually better organised and laid out than I originally thought, and they are a lot more intricate than I first anticipated.

Centerparcs
For instance, in the Centerparcs website it uses the rule of thirds initially, and I then realised its made up of a lot of grids. As it is a complex site, which needs to be read easily due to the nature of the booking system, this is done for a functional and usability reason, as it isn't necessarily the most attractive design. However, none of the navigation bars are lined up the content which to me was strange, because this is something I notice usually in websites.

Wythe Hotel
The Wythe Hotel website was probably the most easiest to figure out because it is very symmetrical and linear, which makes for a very easy to understand website which is why I like it.

Navigation
This is how you get from one page to another on a site, and find your way through the different links.

I created a flow chart for my own website, and when I was doing it I was thinking about the amount of pages that I want to include. Is it too many pages? Should I focus on one part of it for my website? Or is this just right for the kind of website it is?

We discussed as a small group the common and uncommon conventions in terms of navigation:

There are a few rules we follow when creating navigation for a website. For example, the nav bar is typically at the top of the page, because its where the user can first see, and sometimes it is on the left because we read left to right.

OUGD504 - Design for Print: Creative Suite Session 1

CMYK Printing
Usually the lighter colour is printed first such as Cyan or Yellow. There is a transparency to the ink which makes the colours mix when printed on top of each other. Black is the key colour to printing.

Colour in Illustrator
By using the swatch palette you can use the same colour again and again as it is saved here.

You can select the option of 'Select All Unused'. This highlights all the swatches that aren't being used, and you can click on the trash icon to delete these.

Once they're deleted the swatch palette looks like this.

You can also change the view of the swatches to a Small List View which is better as it tells you the colour name. 

Registration is specifically for printer's marks, such as crop and trim marks.

You can create a new swatch, and it is useful to keep the swatch name as its CMYK values because then we know what is used in the colour and is good to know for printing. You do this by clicking the new swatch icon next to the trash icon.

You can also do this by going on the colour palette, making a colour and selecting Create New Swatch from the meun.

We then created some shapes and added different colours to them.

To create a swatch of these colours I went on the Swatches tab and clicked the option Add Used Colours.

The swatches palette now has all the colours I've used. The cut corner and the grey square which have appeared on these particular swatches means because the Global option is ticked. The Global option means if you change the colour swatch it updates automatically without having to be selected. So if you have complicated artwork, with lots of objects in one colour, you can edit the swatch and everything will update rather than having to select each piece individually. 

So if I have several squares in navy, I don't have to select them to change each one.

I just double click on the swatch, and because it is global, I can change the settings and they all change.

You can also work with tints with global colours. By going onto the Colour palette, you can change the tint of it rather than the values.

You can then create a new swatch of this, and it has the percentage of the tint next to it.

You can change the colours of the boxes by selecting the shape and then selecting the specific swatch.

If you change the swatch which is 100%, it actually changes all the tints, and you don't need to select any of the shapes.

Process and Spot Colours

The term Process colour referes to CMYK and the four plate printing process.

A spot colour is a pre mixed ink, which does not use CMYK. If you are commissioned to do a one or two colour print job, it will be cheaper to use a spot colour because it uses less plates.

Using process and spot colours together would make the job more expensive because they would have to use four process plates as well as spot colour plates.

Another reason to use spot colours is that you can get more speciality inks such as metallic and fluorescent colours. 

You can also get an exclusive colour for a big brand such as Sainsbury's for consistency. If it was produced in CMYK, it could get changed slightly with the percentages, but if a spot colour is used then the colour will always be the same.

There is a reference code on the Pantone reference swatches, and when it goes to print the printer knows exactly what colour to mix onto the stock to produce the exact colour. 

In Illustrator you can find the swatches for Pantone in the swatch options.

You can choose any of the Pantone swatches and turn the format into a list. You can also search for the code that you want. When you click on one it adds to your swatch library. In the cut corner there is a spot so you know that it is a spot colour.

You can also make tints of a spot colour, and this would be significantly cheaper to print tints of one spot colour than one process colour.

OUGD504 - Design for Web: Studio Brief 02 Workshop 01

Aim:

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

Web Standards:

Acronyms, abbreviations etc

HTML - Hyper Text Markup Language

XHTML - Extended Hyper Text Markup Language

CSS - Cascading Style Sheets

API

WYSIWYG - What You See Is What You Get

MIME

SQL

MYSQL

SEO - Search Engine Optimisation 

FTP - File Transfer Protocol

URL

XML

PHP

ASP

JSP

CGI

AJAX

ASCII

DNS

GIF

HTTP

HTTPS

UI - User Interface

UX - User Experience

WWW - World Wide Web

Limitations

• Colour in HTML - Web safe colour. 216 colours. RGB colour mode is capable of reproducing 16,777,216 colours.
• When CSS was introduced all these colours can now be used, however, as they are not all web safe they look different on different screens
• Fonts are limited, and there are only standard ones. If you want to use a downloaded fonts you need to buy the license for distribution. 
• On Font Squirrel a lot of fonts have a Web Font Kit where you can use them on your website for free

Size, dimension, pixel resolution

640 x 480

800 x 600

1024 x 768

1920 x 1080

2880 x 1800 (220ppi)

File Formats

PNG

JPEG

GIF

PDF

Photographs take up too much data, and therefore takes ages to load on a page so they need to be compressed. By changing the resolution of the image this helps 

Lossy 

Dreamweaver

<head> is something that isn't seen on the website, but is what helps it function, for example, it is where CSS document would go

<p></p> This is an open and closed paragraph tag. Anything between these two tags would class as one paragraph.

The logo/icon on a web tab is called a favicon

<body> Everything you want to be visible in the website goes in the body tags.

When there is a broken image or Error 404 on a webpage, this is because the files aren't in the one folder where the website is getting the information from.

Creating a Site

When you create a site you need to create a local folder where all your files will go into. 

File Names

• No spaces
• No exclamation mark/question mark/ampersands etc
• All in lowercase letters
• Max 8 characters

Once this is done, you need to Create a New Site on Dreamweaver, and call the site name whatever you want. Then you find the local site finder, and choose the local folder you made.

Now in the bottom right corner you can see and manage your local files:

Index is the universal word for the home page - this is what the server looks for to show the first page.

OUGD504 - Design for Print: Furthering my Concept

As my idea is a 'Journey Through Print', I have researched different tickets, and now I am looking at other printed material you encounter as part of a journey. 
I want to break down my project into three sections that you get on a journey. 
So the first section will be a ticket which you need to embark on the journey, the second part will be a series of posters as you see advertisements at train stations, airports etc, and the third section will be the destination - located in the printroom specifying whereabouts you can do the processes.

This is a mind map on printed material we come across in journeys:

This is a mind map on the printed material I'm going to use for my project:

This is a mind map on the content of the posters I want for the 2nd stage of the journey:

After coming up with a few thumbnails of poster ideas, I went to sketch some more accurate ideas:

I also looked at the content for my tickets. I have already looked at the content I could include when I was researching the tickets I had, which were:

Destination (equipment)

Route (Vernon/Blenheim)

Class (Difficulty)

Ticket Type - (Process name)

Date it's valid (How long it takes - short/long process)

Price (Cost of production)

Number (Blenheim/Vernon print room details)

I then sketched some ideas that would mimic a ticket:

I also know that for the 3rd stage of the process, the destination, that I want to use the location icon shape. I want to keep these simple with bold text so that students can see it clearly in the print room. Here are the sketches for that:

Now that I have ideas for each of the steps I want to create, and the content for it I can start designing on the computer and get things ready for print.

OUGD504 - Design for Web: 5 Best Web Designs

Now I have researched into a lot of different websites, I need to choose the five which I think are the best designs ready for next weeks session.

Centerparcs
I chose this one because of how easy it is to search for a holiday.

Luxury Hotels and Resorts
I chose this one because it looks sophisticated and has really good options for searching for a hotel which is on a global scale.

Megeve
I chose this one because of how easy it is to use, and how effortless the clearly advanced technology is, with its fluid page transitions.

Four Seasons
I chose this one because of its easy reservation booking system on the home page, and for the professional, modern layout. It also has great little touches such as the local temperature and time of hotels and the colour change when you hover over the destinations.

Wythe Hotel
I chose this one for the linear layout which makes it easy for the user to find things and make decisions. I also think it is a very sophisticated layout and colour scheme which reflects a upmarket tone on the hotel.