Thursday 29 November 2012

Responsive: Design Process 2 - Ideas Development


Age Groups for the classic books published by Penguin:


0-3
The Snowman

2+
Hungry Caterpillar (5)

3+
Goldilocks and Three Bears (5)
Cinderella (5)

5+
Tale of Peter Rabbit (8)
Georges Marvellous Medicine (8)
Milly Molly Mandy (8)

7+
James and Giant Peach (11)
BFG (11)
Pinocchio (9)
Jungle Book (11)

8+
The Railway Children (11)
Adventures of Robin Hood (12)
Wind in the Willows +
Worst Witch (12)
Matilda (12)
Secret Garden +
Peter Pan +
Borrowers (12)

9+
Anne of Green Gables (12)
Treasure Island (13)
Jungle Book (12)

10+
Alice in Wonderland (15)

Responsive: Design Process 2 - Crit

Childhood Classics I sourced Categorised:

1800's

  • Alice in Wonderland
  • Oliver Twist
  • Jungle Book
  • Treasure Island
1900-50
  • Wind in the Willows
  • Peter Rabbit
  • Secret Garden
  • Railway Children
  • Velveteen Rabbit
  • Magic Faraway Tree
  • Winnie the Pooh
  • Peter Pan
  • Famous Five
  • Wizard of Oz
  • Milly Molly Mandy
50-Present
  • BFG
  • Charlottes Web
  • Mr Men
  • Hungry Caterpillar
  • Borrowers
  • 101 Dalmatians
  • Narnia
  • George Marvellous Medicine
  • Matilda
  • Worst Witch
  • Cat in the Hat

Ideas:

  • Modern take on books 
    • type
    • pattern
    • imagery
    • format
  • Kept in a sleeve or a box as a collection
  • Interact with now generation of children and parents
  • Add to collection as grow up - encourage reading
  • Transferable to digital ebooks
  • Keep sake limited edition series of childhood classics
  • Different age ranges of reading
  • Stimulate there development
  • Becomes part of childhood 
      • playground games
      • stickers
      • collectibles
Boards for crit -


Feedback


Clarity of concept - good
Breadth of ideas - good
Appropriateness of response - very good
Contextual Awareness - very good
Analysis/Understanding of Audience - very good
Level of Innovation/Originality - good
Quality/Clarity of Presentation - good

Areas for Improvement:
Make a decision of what kind of style you are going to adopt for the covers. 
Think about combination of type and image - just get some designs going.
Addressed the idea of being digital - keep this in mind throughout. 
Revisit the idea of who will be reading it - parents or children?

Clarity of concept - average
Breadth of ideas - good
Appropriateness of response - very good
Contextual Awareness - good/very good
Analysis/Understanding of Audience - very good
Level of Innovation/Originality - average
Quality/Clarity of Presentation - good

Areas for Improvement:
Research more into the history behind the books. You already seem to have an understanding of the history (dates) but think about context, how you could bring context to the book cover in a concise way
A very modern design would fail to bring nostalgia/evoke memories within parents who are buying the books for there children, consider how you can appeal to this older generation as well as young generation

Activities -

Research

History of the story
Where is it based?
Typography
Existing modern - what does and doesn't work when reinvented
Ebooks - colour/different covers?
Global aspect

Development 

Draw some visuals 
Illustrations?
Screen print foiling

Production

Promo.
Point of Sale
Consider the format

Responsive: Design Process 2 - Initial Thoughts

Penguin

Analysis - 

Brief: 
bring a classic childhood tale into the new generation - reinvent it
Problem:
books are old fashioned and children aren't read bed time stories anymore
Need to know:
the story/the characters/audience/penguin company
Already exists:
the original versions other child story books
What they want:
cover design - imaginative
stands out - in store and digital
cover copy supplied
design to template
178mm x 129 mm
spine 20.6mm

Research - 

Ideas: 
whole series of books
campaign for bedtime reading
promotion
interactive installation

What happens if...?
I don't stick to book size
I make a series
Make it interactive
It becomes an installation

Wind in the willows:
Parents past experience
Childhood
Storybook
Mole
Animals
Bed time reading
Fantasy
Fictional
Creatures

Ideas -

- Die cut illustrations

- Keep sake book
Foiled text hardback
Wrapped in a sleeve box with tissue
Precious item

- Use aspect of child development - senses etc.

- Walk through installation of childhood classic stories:
Character connection them
Walk through cut out characters into new story

Things to Research -

- Book shops:
What stands out?
Child books
Other copies of story

- Online presence
- Famous child stories
- Children books now
- What makes a book keepable?
- What do parents like?
- What age group children and parents by classics?



Wednesday 28 November 2012

Design Production: Website Design 4

Have to buy
Domain name - name for the website

http://www.123-reg.co.uk

Go for cheapest one
Based in the UK - available if anything goes wrong in your

Have to buy hosting
- the space you store your website on for people to access


http://www.one.com/en/

Manage site:
Click on site then pencil too;
 Go to menu option servers and press the + sign
This is were you fill in the details of your hosting.
eg. ftp.apple.com
Username and password you get emailed when you get your hosting
Click test and that will tell you if it works
 This symbol above the list of your site folder is your connection - goes green when your connected
Drag files from your root folder into the hosting folder - if you make a change to drag page over 


Content manage system - so people can alter the website themselves

http://www.cushycms.com/en


editable regions option in dreamweaver - access to those areas eg. content so they don't mess up whole website

Tuesday 27 November 2012

Design Production: Design for Web - Website Prodcution


I generated my columns from my wireframe using the measurements I had calculated. I placed 4 separate sections within the navigation to place the different part such as the navigation tags, date and logo.


When creating my website I tried to add a countdown timer to the date. I found a code on here :http://www.htmlhelpcentral.com/messageboard/showthread.php?7526-HTML-For-A-Countdown-Clock


It originally looked like this:
But I altered the coding to make it as close as I could get it to what I wanted



I realised however that it would have to use a server to get the countdown and therefore it wouldn't work without hosting it. I will have to substitute this with just text.
I also realised that my images that I saved for web from illustrator were appearing low quality and pixalated. I altered this by saving them as PNG from photoshop which also allowed them to be transparent.

This enhanced the quality of my images.

I realised I had been making an index page and forgot to make a template to go across my other pages. This meant I went back a few steps and created a template and made a new index and other pages using the template.


New index from template:
I added a video with a similar idea to what the website is about this. This is substituted for the video that would be in place there with design similar to the website and promoting material.

I changed the colours to the my theme now that I have everything in it's right place.



I decided to change the countdown substitute to make it more atheistically pleasing but also to emphasise the focus on the numbers



 
I also noticed the logo was cut off slightly and might be ineligible to read so I twiddled the pt size and leading in order for it to be readable and retransferred the image.




Design Production: Design for Web - Crit Feedback

Strengths:


  • Red and white is very war like
  • We like how you have made charitable websites more aesthetically pleasing
  • Good colour scheme
  • Planning is key and your on your way
  • Good effective market to target because of the all the poo'er peace websites
  • Relevant colour scheme red - awareness, danger etc.


Areas for Improvement:


  • Annual Peace Day should be much more clear (think of 5 second rule)
  • When talking about the count down we think it should be a direct count down 
  • (4months, 13 days, 9 hours)
  • This would make the count down more understandable to the viewer
  • Should of put most the figures in bold as they're lost against the boldness of the date


Considerations:


  • Are you going to make a Facebook/twitter page?
  • Very good idea would be great with Facebook page!
  • How would the chapters be displayed? In the same layout?
Response:

I think it would be good if on the contact page it linked to the different social networks that were own pages for the charity event as well as on the bottom of the pages in the footer. Also this made me think of creating an app feature where people had the template instructions to create a crane. Making it a viral campaign - eg. adverts on facebook page, around youtube videos etc.

Monday 26 November 2012

Design Production: Design for Web - Mock up

Wire frame for my final scamp:

Mock up on illustrator of the website homepage:

I decided to add some space to the top of the layout which I hadn't left initially just to balance it out better.
I also changed the picture to black and white to make it look more professional and less tacky.

Design Boards:




Wednesday 21 November 2012

Design Production: Print Samples

 Paper samples from Fedrigoni - 




 
 Paper samples from St Cuthberts Mill

 


Sample of Laminate paper - durable quality

Paper samples from Letterworks





Design Production: Final Crit

Mock up for Crit:

 I sourced some gloss black vinyl as I couldn't get matte in time and stuck out the shape on the machine. I decided to leave the middle bit outs as it didn't look very good with just the thin line.



I printed out mock ups of the page which had the tracing paper layered over content so I could get some feedback on them.
   




I also printed out an example of the tracing paper chapter page over the following page to get feedback on those and so people understood how it would appear visually as well as the white on black to check if it was legible as body copy.


Group 1

Strengths:



  • Aesthetically pleasing, looks professional
  • Unique, good use of images, eye catching
  • Tracing paper - really creative approaches good use of stocks and shows different effects with stock
  • Really innovative approach
  • Good text layout
  • Good experimenting with stock
  • Like the tips
  • Printed really nicely
  • Design boards clear
  • Informative without being too much information


Areas of Improvement:



  • How will it be bound?
  • Font size for issu?
Response:

My bounding information is on my design boards and in notebooks - Saddle stitched with staples

Group 2:

Strengths:
  • Art work is clever with red 'corrections'
  • The print idea is really clever even for the actual title of the publication
  • Cost effective book - most of it is B&W

Considerations:
  • Colour coded sections are really good but odd the colours to the following pages too? So on every every page you know where you are in the book?

I was really pleased with my crit feedback it was all positive and they didn't have anything bad to say. I didn't realise how thought through my idea was that it didn't need to be questioned at this point. I think it helped having printed out examples of pages in my book and the cover so people could see and understand what I was talking about on my design sheets and blog.

Design Production: Website Design 3

Text within the column area
<p> is for new paragraph
Adding space around content within column so they don't touch is padding
If it's 10px padding then you have to take 20px off the width and height


Work out the image size for the thumbnail view within the column 

Then alter style to fixed size and change size

 Using the box select the area of the image you want to show as a thumbnail
Save as JPEG 40 quality thumbnail 1
Then save the original image at the size you want to see it in full in 72 dpi as JEPG 40 quality


 Functionality goes into template between <head> </head>

 Paste in Index

It brings up image#1 hyperlink in blue text 
Highlight the text then insert image and pick the thumbnail image
Then delete the text
Check the coding of the image falls between <a> </a> code so it links to the larger image

Thumbnail view

Repeat for the other images and change the file name of the thumbnail image and large image
To make them a group create a group by adding [dogs] after lightbox
This link them together

 Group lightbox view now with icons

This is for your own videos
Applet is for quicktime
Plugin for anything else

Better to upload in vimeo first as it hosts it and won't use your bandwidth, will stream it and upload immediately 

Alternative to your own audio is soundcloud