LIFE'S A PITCH// OVER+OUT Logo Design

Having sketched out some of our ideas, the rest of the group went away for a studio session, and while I had some free time I began digitising a few of our ideas. First was this screen-bed inspired logo design. I agree that it needs a lot of refinement

DESIGN FOR WEB// Consoles Website Implementing the Nav Bar

So at the moment the website is all together but you need to scroll or 'use arrow keys' to navigate the page. As the page is so massive and long this can bee really tedious and loosing your place is easy. To deal with this I plan in implementing a navigation bar capable of smooth scrolling the user to a given decade and back to home if they need. The smooth-scroll feature is particularly important firstly because it allows the user to see the rest of the website run past, giving some perspective as to where they are in the timeline. Secondly in the smart phone generation the user expects smooth-scrolling to be there, jumping to the location would be clunky and unprofessional.

I coloured the nav bar container grey temporarily so if anything went wrong it would be easier to spot the cause. The second home button beneath the bar is part of the image that contains the running man, this will be changed asap.

Here I have added the rollover buttons. They will flash to the same image but with drop shadows when hovered over, and will eventually work as buttons to scroll the user to a point in the image.

To work around several problems I cut up the massive time line image into one for each decade. This will improve performance, quality and allow me to actually use smooth scroll. It also gave me the opertunity to remove the second home button. Here I have saved the image as a PNG which has allowed for transparency and the website background colour has shown through.

Here I have altered the background colour back to white. Having taken the smoothscroll for a run I realisr that I need to use this code:

Pre-loading the images into the website to make sure they don't have to load really quickly as the page is scrolling (leading to juttering).

I will write more about how the website runs in the next post.

WEB DESIGN WORKSHOP// Final Session

 To get a website live:

1. By a domain name, go for the cheapest option. 123reg is good.

2. Get someone to host the site on their servers. Again go for the cheapest one, but make sure it is based in the UK, so you can get support when you need it. 123reg offer a free name with hosting. But is fairly expensive. One.com offer very cheap hosting.

3. If you buy the two above from different people they will send you various codes to link together.

4. Go to dreamweaver> servers> click plus button and fill out the details. This will allow you to save your site to a host server. You can also drag files over to the server if you click on this little icon:

5. CushyCMS offers a service which allows users to manage their own websites, you set up a master account as the designer and the people you work for can log on and edit their own sites. You can also edit the site. To set up the areas you can the customer can access use the 'editable region' command <div class=cushycms  ----or something like this, it will be explained on the website.

DESIGN FOR PRINT// Final Crit Feedback

Positive feedback:
-Simple Diagrams
-Layout is refreshing
-Good use of colour
-Diagrams are interesting, especially the half-tone one
-Great Illustrations
-Easy to read and easy to navigate
-Explanation of binding is good
-Good typeface used of headers, modern, fits with title page
-Like the different stocks used
-Liked the target audience of students, will be usfull for them
-Named and reference stocks will be very usful too.
-Diamgrams are easy to understand especially for audience.
-CMYK bit clever+useful- particularly for students
-Layout is strong and simple

Improvement feedback:
-Body copy typeface is no sans serif like header, could work better if it was modern
-Page numbers too big, should be next to CMYK swatches. Too big and draws attention away
-More definition between titles and main text so that they stand out more
-Imagery should always fall on the left, with type on the right.
-Page numbers too big
-Type on cover would look better if it was straight, looks scruffy
-Layout on the 'about the book' page looks like there is some missing content.
-A series has some missing content.
-Are the CMY lines needed, might detract from the header
-How will stock effect colour prints, on heavier stocks?
-Layout should be more consistent maybe the one at the moment could be used but with less space.


Overall some good feedback, I do think I could reconsider the layout, perhaps shift the image and type design from alternating to a more solid format. I do think that the front page could be redesigned from scratch, because I haven't really experimented here yet. I'm very happy that people considered the stock and CMYK features to be useful, this was the main focus of the book from the beginning, so its great that people will find the feature useful.
I would counter the claim that there is too much white space. On printing, the content could be on any range of coloured or white stock, this will really add an extra dynamic to the book that cant really be seen here, but there will be much less white space!
Also the complaint of the headers not being clear enough is mental. The headers are huge. If anything they are too clear and should be reduced in size.

WEB DESIGN WORKSHOP// HTML, CSS and Java

Never use File>Open to open work. Go to Manage sit and find root folder. Open in Bottom right tab.
Today we will look at padding..

Add some body copy to the site using the design view.

How this text goes right to the edge, padding would specify where the text sits within the box. This system doesnt leave a gap between any of the content and will generally look very messy.

The padding option is entered beneath the bounding box here.

 We added 10px

This will knock the columns off kilter.

Take 20px off the width and height around each column. This will reshuffle the page.

So the text is back but it still runs to the edge.
To fix this apply the padding to every column. With the WxH change.

The bounding border is applied to the text now. The image is still the wrong size, this is why it is important to add imagery after the page has been totally set up.


We are now focusing on javascript.
We have downloaded lightbox 2 from the developers website.

Copy the important files of lightbox into our root folder. Then import all of the images, these will be the buttons on the lightbox. You can edit the button images to your own design.
Every image you want to appear in the light box needs to have a full size and a thumbnail size.
Thumbnails will be 80x80px.

Here is my image, from this I take the thumbnail.

We now need to add the functionality to the Head of our site. This should be in the template so it can be used on any page.

Copy this code from the lightbox website

 To the head of our template.

 Copy the next line in after...

 Then copy this code into...

 ... the actual area of you wish the image to be run in.

Change the image name to the actual name of the image you want to appear.

This will add the lightbox, but not the thumbnail...

To add the thumbnail. Enter design view and highlight the hyper link, go to Insert>Image.

Occasionally this will mess up your code, so go back to the code and make sure its all still there.

You can continue to copy in the image code to continue adding images.

If there are any issues make sure the code looks like this:

We are now going to look at a bit of video or audio for our website. Vimeo is recommended by Simon as it has a better functionality and reputation. The java plugins work in the same way as the lightbox. There are some good other Lightbox alternatives you could use, just do some searching.

DESIGN FOR PRINT// Final Crit Design

Open publication - Free publishing - More book


This is my design for the final crit of my Design for Print book. It doesnt really work in Issuu becuase it isnt suppose to be a DPS but all the content is there. It is also important to note that the final print will be on a multitude of stocks to colour is also lacking at the moment. Overall I am pleased with the design so far, I kept it simple but informative and readable. 

DESIGN FOR PRINT// Print Book Progress 2

One of the most noticable changes for this newer edition for the book is the new underline style for title pages and contents pages. This will allow me to keep the aesthetic and layout of the book while separating the contents pages from the rest of the book for reader clarity. I chose this unusual style because the book needed some brightening up, especially the contents pages. The gradient covers CMY, the inclusion of black was considered but put to bed because it created this muddy effect.

This welcome page and the contents page qualifies for the underline for example.

The standard page however will not feature one.

My contents pages have all been tidied  up too, hopefully they look much more professional and easy to read.

Labels have been added to all of the printing diagrams to make it crystal clear what each component is. They are written in century schoolbook bold italic to tie them in with the rest of the book neatly.

Binding Process has been switched to 'Binding' chapter in its own right.

Each one of the illustrations has been transferred to indesign and then beefed up a bit with a heavier weight. This will help them fit in more with the general aesthetic of the other illustrations.

After finishing the book I re-wrote the main contents page with all of the correct page numbers and added the colourful underline to spice things up.

The document now features 40 pages total with four main chapters.