Bezier Internship - Work Diary

Business Cards

Above is the design for the new Bezier business card which I was working on this morning. i altered the layout of the 'contact' side so that it was much more clean and professional. The address was hanging out before but i altered this so that the body copy all fit in one place.

i also had to change the Spot UV varnish on the back of the card. From the previous samples, the company felt that the varnish would work better if made full bleed to the edge, which is what I did. They also wanted the lines to be thicker because the logo was getting lost in the design. I corrected the mistakes and hopefully these will make for some swish business cards.




3D Christmas Card

Above is the initial design stages of the 3D christmas card. The card will be delivered flat in one peice and the clients will have to cut around the four sections following the simple instructons beside the peices. Once cut out, the peices can be tied together and hung as a decoration on their christmas trees.

The sections when tied together will form a Three Dimensional looking Silhouette of a Reindeer which will hang in seperate parts and therefore be moveable.

To link the card to the company Bezier, there will be a QR code on the back peice of the Reindeer. This will take the client to a moving showreel on a website which will be all about the services that are offered. The Reindeer itself will be the purple branded colour of Bezier to make the company stand out and keep consistant.

This very basic template can help clients interact with the business and could possibly leave a longer lasting message about the services we offer instead of a regular christmas card.

Lynx Apollo - Interactive Game

Over the last couple of days we have been brainstorming ideas for an interactive online game that will be hosted on the boots website to help promote the launch of the new Lynx Fragrance, Apollo. With the name, it's obvious to take a space theme throughout the whole brand, including these games. 

My job was to create the initial mood-boards and mock-ups for the games in time to take into a meeting about moving forward with solid ideas for the games which will be created over the next few months.

Mood Boards

The first mood board was research and ideas that we discussed in our first meeting that I was involved in with Chris, the Creative Director and two games designers. We talked about games that are addictive and 'The Helicopter Game' came up the most popular. We also looked at old 8-bit style games such as Asteroids, Space Invaders and Moon Lander. We then went on to talk about modern adaptations of these games such as 'Monkey Lander' as well as more puzzle style games with the introduction of 'Mario Space Galaxy' and 'Portal'.

I then created a mood board of my initial game scamps and explained our discussed ideas underneath each one. These will be used in the meeting on Friday which will be deciding to move forward with ideas for the final games which will be used on the Boots.com website for promotion. 

The last mood-board was on the ideas for prizes for the competition. Boots had commissioned for the first prize to be a virgin galactic flight to space which costs around 200,000,000 american dollars or 20,000 to go on the waiting lists. Smaller prizes include a Zero Gravity flight courtesy of 'Zero-G' and then money off the new Lynx Apollo range, Coupons and Lynx branded flight toys. 

Game Mock-Ups

Here are some really rough scamps I put together to help give a sense of the game so we can take it forward to proposal in the meeting on Friday. 

Th general idea we had was to split it into three games in a 'Lynx Apollo Arcade' style theme. The games would be based on old school classics such as Moon Lander and Asteroids. We also had the idea of using the different products for each game. 

For instance the Shampoo would be used as a rocket where you have to click to squirt our the gas and guide your way through the tricky course and up to the moon. 

The Asteroids style game would be using the shower gel to squirt out at the meteors in space and break them up and the Deodorant would be used for the Moon Lander style game, where you have to pick up the Lynx Space Girls and get back to the podium before you runout of gas. 

Type Workshop (2)

Typeface Personalities

In today's workshop, we started by looking further into the typefaces that we had been working with. We was asked to come up with three words to describe the personality of the typeface. As I was working with Bell MT, I went for Informative, Inoffensive and Formal. 

We was then asked to come up with a brand or line of business which relates to the words I had chosen and see if that fit with the typeface. I chose a Solicitors as they are a formal business who are informative and also inoffensive (sometimes)

We then had to think of a business that is the complete opposite to the three words. I chose 'Bouncy Castles' because this is obviously informal and not very informative. It is aimed more at children so obvioulsy looks wrong when written in this typeface. 

It is interesting during the workshop that there was laughter when people seen some of the businesses written in a certain typeface. This proves that by the choice of typeface you can provoke laughter in people which is a really powerful thing and also shows in general how much a typeface can determine a design and how the whole world recognises certain styles of typeface. 

culterally trained to read left to right


Kerning

The next task was to kern our own name correctly. When Kerning we have to keep the spacing between the letters exactly the same. It is normally not needed for body copy. but when you start to look at branding where there is one word being used, kerning becomes really important. 

When kerning letters together such as the A and the N. The N is easy because it is a straight vertical but the A is a diagonal which is more difficult to work out. The general rule of thumb is to measure half way down the diagonal stroke and measure from this point to the edge of the 'N'. You can then keep the same distance with the other letters resulting in a perfect kern.

It was particularly hard to kern my surname because I had the worst two letters together in the 'L' and the 'A'. This means that it will look wrong even when it's right because these two letters sit horribly together but its just a case of using the same measurement system and judging it by eye to get the best possible looking kern 

A good tip if your struggling to kern is turning the type upside down, this way you don’t read the word, you merely look at the shapes the characters make and the space that’s created between them, making it easier to judge the spacing of the characters. 

Another good tip is to look at somebody else's work and get feedback on your own because a fresh pair of eyes is better to spot a well kerned word. 

Hierarchy 

The next task was to do with the hierarchy of words. We was give the three words, ONE, TWO and THREE and was asked to type these words into a document making the viewer still read it as 'one, two three' but making sure that the three is at the top of the page, the two next then the one. 

This was a pretty simple task to start with but is important to learn. I simply made the one larger in pt size going smaller to three which makes it more visible to the viewer to read first. I also placed the one further to the left and moved the words across the page because we culturally read left to right, which again makes it easier for us to read the words in this order. 

We was then asked to do the same, but without changing anything on the words. They had to be exactly the same. I tried to do this by doing the diagonal again from left to right but apparently this does not work. We can se how this does not work by looking away from the page then quickly turning to look at it and seeing which one we read first. In this case our eyes are drawn to the centre of the page and the word is easy to read so we read the 'two' first. 

The way to do it, is by turning the two upside down. Now it is turned upside down, we do not see it as a word, so we read the three first because we naturally look above the centre when we can't read the word. So the order in this case would be read as 'three, one, two'. 

By turning the three on it's side, this makes in more difficult to read so now we read the easiest word which is the 'one' first. The order is read as 'one, three' two'. 

Using this as a basis, We then was asked to use the four words, 'one, two, three and four' and was made to keep the order of reading as 'one, two, three, four' but the vertical order in placement had to be 'two, four, three, one'. After the first task, I got this quite easily. I turned the four upside down making it the last word read and kept the one upright so that that was the first one read. I rotated the 'two' 90 degrees to the left to be read upwards next and similarly with the 'three' rotated it to the right and moved it further over to the right of the page making sure it was read after the 'two'. 

Design For Web - Workshop (2)

"The average time somebody spends on a website before choosing whether to stay or go is around 5 seconds."

Initial one word reactions we have to certain websites. 

In groups, we looked at some websites and had to shout out the first word that come to mind without thinking within 5 seconds of viewing the site. This is a useful way to find out what people are thinking of your site before they make the decision to stay or leave the page. Here below, I have listed the websites we looked at as well as some of the words that was shouted out.

ollymoss.com - Black, Negative Space, Simple, Minimalist.

This website has been made using - http://www.indexhibit.org/

The first rule of web design is that the content should determine the website and not the design of the website. If the design

Malikafavre.com - Grid, Colourful, Fashion, Busy.

This website has been made using Cargo Collective.

360langstrasse.sf.tv - City, German, Speech Bubble

mercertavern.com -  Cafe. Vintage, Hipster, Old Fashioned, Black and White.

Caavadesign.com - Pastels, Urban , Circles.


3 questions you must ask yourself when designing a website

What is the purpose of the website your creating?

Who is the target audience?

What do the target audience need?


What can we do to see what the target audience need and want?

- Researching existing contemporary websites and website based around the subject.
- Focus groups. Talk to the target audience. Ask them what they want to see on your website.


What is generally what we see on every website?

- Navigation
- Type
- Image

The internet was born in 1990 making it 22 years old.

What are the limitations of web?

Size - This is a big limitation because there are so many different resolutions with different screen sizes, especially with the addition of Ipad and Smart phones today. this means you have to design for the lowest common denominator.

Image Resolution (PPI) - In 1990, Apple Mac screens had 72 pixels making up each inch of the screen.  Because the internet was created using Apple Mac, everything was designed to be 72 PPI. In 1990, PC screens was 96PPI and since then every computer screen in the world has been 96 pixels per inch. The only reason it's remained at 72PPI is because old school designers don't like change. New retina displays are actually 227PPI which is nearly as much as print.

The Fonts - When working on the internet there is a limited range of fonts that you can use for body copy. Times New Roman is the default font for the internet. Websites do not embed the font into the site but use the font families that are stored on the users computer. You have got to use a sequence where if you choose Helvetica for example you would have to select Arial an so on and so on. You can install a font as a webkit into your website, you can use this but you would need to purchase a license to be distributing the font.

SEO - Search Engine Optimisation - This means that if you have body copy then this can be read by search engines as text which make it god for finding the information you need to do.

Colour - The colour mode for screen is RGB but the problem is is that every screen in the world has a slightly different variation. To get around this, you have to use 'WEB SAFE COLOURS' in order to keep it consistent throughout different computers.

In photoshop when selected colours in the palette, you can check 'web safe colours' which will make you see that there are a lot fewer colours. The codes you work in for web is the highlighted '#993333' at the bottom.

Great Book to Buy on Web Design - "HTML and CSS - Design and Build Websites"

Web Languages

HTML - Hyper Text Markup Language 

CSS - Cascading Style Sheets 

To view the coding for any website in Safari you go to View and View Source to bring up the coding for the website. 

Dreamweaver is known as Wysiwyg which means What You See Is What You Get. So this means in Dreamweaver, the graphics what you see is what you are going to get in the coding.

URL - Uniform Resource Locator . Scientists created a uniformed way to find online resources by creating domain names.

When creating a website you have to buy a domain name and also buy physical space on the serve which is hosting.

FTP - File Transfer Protocol. This is sending a file from one computer to another computer and a form of it is sending an email.

CMS - Content Management System. Updating text and images on a page that is updated to the world. An example of this is Blogger or Facebook. This is giving the user of the website a system where they can update their website when they wish. This would be an extra cost for a web designer.

Design For Web - Workshop (1)

Why do we have a website?

- Promotion (Advertisement)
- Informing
- Persuasion
- Contact
- (Entertainment)

Audience

The audience is NEVER for everyone! There is always a target audience in mind.

Factors that a website should have

- Usability
- Aesthetics
- Funtionalilty

It's got to look good, it's got to work and it's got to work well.

Good number of pages is around 4-5 for a general website.

Landing Page?

Why is it there? What is the point? If you can't explain why then its pointless. Most of the time opening straight up with the portfolio page will keep attention and people can easily click though your work rather than being faced with a 'slideshow of work'.

Contact Page

Email Address
Actual Address
Phone Number

Twitter
Behance
Cargo
Tumblr
Pinterest
Social Networks

Option to put it in a footer to keep it on all pages.


About Page

Could be linked to CV and vice versa.


CV Page

If your a freelancer then it  might not be necessary to have a CV

Sometimes it's good to just have a CV that clients and businesses can instantly get the info on.

You can do a non-standard format and creative CV to make it more appealing.


Shop / Link to 

Depending on what kind of your designer you are. Links out to Etsy or Big-Cartel.


Homepage

This is normally the landing page so it has to be important. Personally I think that this page is unnecessary though. Samples of work, Minimalist approach?

Quotes/Fee's

It's really unnecessary from a design point of view to have quotes on your website because this differs from every client and job. It's better to have 'email for quotes'.

We then went onto to mock-up the landing page for our personal websites. After this we then went on to critique each others work.

Webpage Mock-Up

Feedback

Comments on Feedback

Overall I am really happy with the feedback my mock-up received. I received compliments on my logo and placement, simple navigation and placement again, the layout being unique and different to a simple grid layout. Use of grids being used well and they liked the idea I had of the projects being able to click on each photo which takes you through to a slideshow above the portfolio without leaving the page. Logo and links are stripped back to the basics which people said worked well with an overall clean professional layout. 

Some constructive criticism was to be careful of the grid going of the page because this is on trend at the moment but it might look dated. I suppose i agree with this comment to an extent, but you have got to stand out in a current market and look like your on trend but also be unique at the same time, so getting this balance is essential. It was also mentioned that there was a strong focus on the work but maybe in need of some more information. I think for a home page, lots of imagery is essential because people tend to spend no more than 5 seconds on your page before they decided whether or not they want to stay or leave. The information can come later, when they decided to click into a certain case study of work but it's definitely something that is worth thinking about. 

Common Pieces of Feedback throughout

- Clean Layout

- Unoriginal Layout

- Easily Usable Navigation 

- Redundant Features - For example a scroll window inside a window. Is it really necessary?

- KISS - Keep It Simple Stupid

- Use of Grids - makes a big difference when moving into digital. 

Indesign Workshop - Design For Print (3)

Booklet Printing 

How you bind your book is going to have a consequence

Saddle Stick Binding - We are going to saddle stitch the book which means that it needs to be a multiple of 4 pages for it to work.

Perfect Binding - Ring Binding is an example - single sheets glued down the edges. the pages in a perfect stitch can go in multiples of 2.

Readers Spreads - This is how in the pages palette you can see the pages. This is how the final book is going to look when trimmed and put together.

Printers Spreads- This is how the pages are going to be arranged next to each other when re-ordered in Indesign's print settings to see the booklet.

An easy way to work out the printers spreads is by creating a to column grid by hand. One column is the right hand page and the other is the left. You can work down the columns in a zig zag fashion and keep going until you get to half of the number of pages. Then make your way back up from the bottom to the top and you should end up with the last page facing the first page. All of the printers spreads should always ad up to one more than the total number of pages.

Example 1 and 8 = 9 in this case below

Auto Page Numbering 

Double click on the 'A-master' slide in the pages palette. Then in here make a simple text box and place the number 1 in there. 

Then, go to Insert Special Character, Markers and Current Page Number.

As you can see it has added pages down all the left hand sided pages. To transfer to the right I can copy the 'A' on the master slide and drag it over the right hand page to give me my final numbered document. 

If you only want the numbering on some pages and not other such as the front cover. You can do this when you create your Indesign document by changing 'start page numbering' to a different number than'1'. 

To make the numbering start later. For example, if you needed page number 2 to start on page number three, you can click on which page you want to start on and go into 'Numbering & Section Options' in the pages palette menu. From here, I can select the start page numbering later. To so this will have to remove the master from the first two pages if I wanted to start on the third page. 

We go to Print Booklet and select '2-up Saddle Stitch'

When you click though to print you get the settings. Here you need to make sure that print blank pages is selected! 

If your not working with bleed then you can get away with printing it on an A3 but with bleed and trim marks you will need to print onto A2. 

With double sided printing, always set the page position to be centred which will make sure that what is printed on one side will line up to what is printed on the other side. 

To print double sided, you need to go into the 'Printer' options then into layout options. The two sided option is at the bottom and you should always select Short-Edge binding when your book is going to be bound by the shortest edge and this will automatically be set for you. 

Because were working with A4 onto A3 paper then we are using the shorted edge where binding. If you choose the wrong option it will print upside down on the back of the paper. 

Postscript

PostScript is the language that your digital file is turned into and used when you send something through to a printer. The printer then recompiles the information to print the document. 

A few years ago the most common type of font was Postscript Fonts and Truetype fonts which has now been replaced by Open Style Fonts. 

A postscript file is very much like a PDF file. In order for Indesign to create this file when Iv'e selected it in the print options. 

We are going to be using the Adobe PDF which allows us to create a postscript file all the way up to A0 in size. 

I can now see my document ready to print on A2 with crop marks which I have selected. I can now go over to save which will give me a postscript file which i can now open in preview when i double click it. 

Converting The Postscript File into PDF with Adobe Distiller

We can open Acrobat Distiller which is simple to use.  We choose the setting that we need, in this case press quality and then we canjust drag our postscript file into this area on the program. This 

ISSUU

Always save the PDF in the smallest file size. 

Heres an example of my Issuu account. I can then go onto embed these e-books into websites or my blog to help make my work visual online.