Yay Paul Portfolio Book 1.3


Published on

Printed portfolio component to my online portfolio www.yaypaul.com.

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Yay Paul Portfolio Book 1.3

  1. 1. First printed in the United States of America by Hi there, my name is Paul West. LuLu, August 2009. I’m an English born graphic All original: graphics, web site design, designer, art director and interface illustration, custom code, layout and images specialist. I use both Mac and PC, I © Copyright 2009 Paul West. All rights reserved. prefer Mac. All other content © Copyright their respective owners. Specially designed to fit along side No part of this publication my be reproduced, your graphic novels. in any form or by any means, without the prior written permission of the author.
  2. 2. Storyimp identity Illustration, character, branding, direction Storyimp asked me to join their team and lead the creation of a brand identity and character design. The Imp characters are modelled on 19th century inkwell designs. The Imps came with special requirements: each Imp must be quickly producible, easily modified, colored and posed. Happy Smug Sad A serif font was chosen and edited for the logotype to mimic printed story books. Scared Oh? Standard Oh no? Wasn’t me! Base body style 04
  3. 3. 06
  4. 4. ? 08
  5. 5. Storyimp website Design, layout, ux, html, css, jquery With brand and character design completed, the Storyimp application needed some user experience and layout love. Each page had to be designed around advertisement placing and existing functionality. All code was built to reduce server calls and load times. As much navigation as possible is text based and images are placed in sprites. www.storyimp.com 10
  6. 6. 12
  7. 7. Deadly Furry Cute Illustration, character, toy, paper, game, direction Deadly Fury Cute is a paper toy project: depicting furry animals of the world, one species at a time. Custom made toy templates designed to print on A4/Letter paper or card. Toys are offered as free downloads to individuals and teachers. The latest version to date includes a battle style number game and color-your-own variants. 14
  8. 8. 16
  9. 9. 18
  10. 10. Deadly Furry Cute website Illustration, design, layout, copy, ux, html, css, jquery The website for Deadly Furry Cute is designed as a simple portal for downloading and building the paper toys. The site is designed to appeal to all ages with a vibrant quirky tone. The content was written to be helpful, quick to absorb and easy to follow. www.deadlyfurrycute.com 20
  11. 11. HOME TOYS BATTLE HELP ABOUT NEWS EXTRAS Search 4 Series 1: Cats WANT MORE? Series 3: Apes Series 2: Squirrels Series 1: Cats DOWNLOAD DEADLY DOWNLOAD FURRY DOWNLOAD CUTE What are the colour your own versions of this toy? Colour Your Colour Your Colour Your Donec quis est massa. Suspendisse Own Version Own Version Own Version ac ante mauris, ac luctus diam. Etiam eget congue erat. Sed pharetra, enim sed lobortis ultrices, Battle Stats orci mauris iaculis diam, non lacinia Learn how to play... leo massa id metus. Praesent elit orci, fringilla id consequat at, iaculis BLACK CAT FLUFFY CAT YAWNING CAT (Deadly) (Furry) (Cute) sed libero. Aliquam erat volutpat. Vivamus et condimentum elit. 2 2 2 7 7 7 12 12 12 Want to hear about the latest toys and games? 3 3 3 Signup to the newsletter and we’ll keep you informed. 5 5 5 Email Address 2 2 2 Unsubscribe SIGNUP d 2 Comments ... Leave a comment... Davey Jones Sed tincidunt vulputate diam. Proin risus turpis, consequat sit amet Reply volutpat consectetur, pretium sit amet dolor. Suspendisse volutpat, ipsum sodales dapibus fermentum, justo mi dictum odio, non scelerisque risus orci ac velit. In eu dui et lectus rutrum auctor. Davey Jones Sed tincidunt vulputate diam. Proin risus turpis, consequat sit amet Reply volutpat consectetur, pretium sit amet dolor. Suspendisse volutpat, ipsum sodales dapibus fermentum, justo mi dictum odio, non scelerisque risus orci ac velit. In eu dui et lectus rutrum auctor. Leave a comment All elds are required. Name If you’ve not yet had a comment approved, it will Email be held for moderation. Message POST COMMENT 22
  12. 12. 24
  13. 13. Promotional photography Studio, location, direction 26
  14. 14. 28
  15. 15. 30
  16. 16. Rosie’s Mai Tais Illustration, ui, animation, flash, game, direction 32
  17. 17. Totally Money Illustration, character, design, animation, flash 34
  18. 18. 36
  19. 19. Vodafone Flexphone ai 08/29/06 mk Illustration, animation, flash, direction D109 38
  20. 20. coupled with our selected colour palette is an integral ingredient of our identity. Bold use of these colours maintains coherence Isis Telecom across our brand and helps our customers recognise Isis and it’s communications. Design, layout, print 06 Isis Brand Guidelines 07 Brand Values The tone of voice for all Isis communications is Flexible, Knowledgeable, Helpful. Isis is a credible and trusted source for information. Organised and Resourceful. flexible knowledgeable helpful 22 Isis Brand Guidelines 23 08 Isis Brand Guidelines 09 10 Isis Brand Guidelines 11 14 Isis Brand Guidelines 15 Photography Logotype Logotype continued Typography continued Exclusion zone Colour Restrictions Size Isis is continuing to pursue brand integrity When using the Isis logo it must be clearly The exclusion zone ensures that there is always a In addition to the standard exclusion zone the blue Where possible the standard Isis logo (blue on white) Where the Isis logotype sits over photographic imagery The Isis logotype has been specially designed and As a guide logo should appear at 4cm wide, although The Arial typeface has two weights Regular and Bold, The way you use these different typefaces will be Arial Regular - Arial Regular Italic across its whole product range, this ensures visible with no distractions or items interfering consistent amount of clear space around the logo. It area surrounding the alternate logo should also equate should be used, it is possible however to use the the logo must maximise the communication of our should never be redrawn. Always use approved the application and target audience will ultimately both are available in Italic. These choices are given integral to your designs, each weight, size, colour and the reputation and image of the company with it and should employ the exclusion zone also prevents anything else on the page from impairing to 50% the height of the lowercase ‘i’ (excluding the alternate Isis logotype of white on a blue surround if brand. This means on a light background using the electronic artwork when reproducing the logotype. define which size the logo is used at. so you have a flexible set of styles for the different emphasis can evoke a number of different tones, voices ABCDEFGHIJKLMNOPQRSTUVWXYZ visually on the logo. dot) in the word Isis. this better fits the work being produced. standard blue instance only when it is easily visible, applications you me be designing for depending on the and emotions. Subtle small lines of text can be just is consistent with the expectations and as described below. In all cases the logotype other wise the alternate must be used, where the logo Do not alter the colour of the logotype (fig 1), do not The minimum size of the logo should be no smaller nature of your communication. as effective as a larger bold headline. Used carefully abcdefghijklmnopqrstuvwxyz experience of our customers. should not appear closer to any edge than The exclusion zone should equate to 50% of the height will reside on a dark background image a black and apply a drop shadow to the logotype (fig 2), do not than 2cm wide on an A4 sheet of paper, while the your choices can create a number of different styles 1234567890&!?@£$% the distance defined in the exclusion zone. of the lowercase ‘i’ (excluding the dot) in the word Isis white reverse of the standard style must be used to alter the typeface of the logotype (fig 3), do not alter alternate versions minimum should be no more than Also available for use in printed documents is the and themes while still aligning with Isis’s brand. The Isis logotype has been especially created where imagery or typography is to be placed above, maximise visibility. the scale of the logotypes (fig 4) and do not rearrange 2.5cm wide. This is to ensure the logotype is legible Helvetica type face, as it is very close to Arial in design and should never be redrawn. below, to the left or to the right-hand side. the logotype (fig 5). Do not introduce department and clear across all applications. and is found more regularly on Mac’s. ABCDEFGHIJKLMNOPQRSTUVWXYZ Strong photography fuels the imagination Either version of the logo maybe printed in black and names, sub identities or slogans to the logotype, our white if the work requires. logo should reflect that we are one single entity or In special circumstances the logo maybe displayed at a abcdefghijklmnopqrstuvwxyz company. smaller size, i.e. small promotional items, please contact a 1234567890&!?@£$% member of the Marketing Tam for this application. capturing interest X Arial Bold - Arial Bold Italic and impacting ABCDEFGHIJKLMNOPQRSTUVWXYZ perception abcdefghijklmnopqrstuvwxyz 1234567890&!?@£$% 1/2 x 1/2 x X 4 cm ABCDEFGHIJKLMNOPQRSTUVWXYZ 1/2 x abcdefghijklmnopqrstuvwxyz ofthearialtypeface 1234567890&!?@£$% x 2 cm X X x 1/2 x X X 1/2 x 4 cm 1/2 x 1/2 x 1/2 x 2.5 cm 1/2 x 1/2 x 1/2 x 1/2 x 40
  21. 21. Silicon Village D O EB IGN Design, layout, print, copy, direction O F D O EB IGN D O F N AN D T’ N AN T’ S W ES ’S S W ES ’S O D O D D DO’s and DONT’s of Web Design Color Schemes 6 D D O EB IGN DO’s and DONT’s of Web Design White Space 5 O F D N Color schemes are one Black text on a white AN of those page elements background is the most T’ common choice for a web that can complement page. or corrupt web page S designs. Just because W ES ’S ‘you’ can see it on your Contrast and Readability screen or just because O ‘you’ like that color mix D doesn’t mean other D people will. Some people White text on a black D O EB IGN may be color blind and background, although heavily although this is a constant contrasted, is not always easy O F issue, what’s more for people to read, especially D O EB IGN D important is understand at smaller text sizes. N O F how colors interact with AN D each other, contrast and Contrast and Readability T’ N readability are paramount AN when dealing with S T’ W ES information. ’S Avoid shades of the same S W ES color, grey over black or O D ’S light blue over dark blue as example. D O D Contrast and Readability Not just in art is white space D O EB IGN necessary, this fine balance O F D Some colors will work great between objects and contrast N for artistic websites, but think AN hard before using them on also exists in design. White T’ mainly textual pages. space is paramount in S Contrast and Readability situations where you must W ES ’S display large amounts of O D content, such as on a web D page. If information fills D O EB IGN the whole page it can be O F D O EB IGN D increasingly hard for a user to N O F AN read. D T’ N As a test step back from your AN S T’ W ES computer and look at the ’S DO’s and DONT’s of Web Design Information Location 8 DO’s and DONT’s of Web Design Fonts 10 S page, do you see mostly light W ES O D S or dark? If you see a lot of D D dark go back and edit your All your content is Using too many fonts on pages design to ‘lighten’ it up. WHITE SPACE important right? a page can make your Yes and no, while you design look all cluttered, hope the user will read can confuse the user and all your content, the truth is that some will be more 1 2 is generally bad design. important than others. This is where content DON’T USE BALANCE placement comes in to FONTS OR play. TOO MANY FONT You’ll want, for yourself as much as for the 2 user, to place all of your important information at the top of the page. We’ve established all 3 SIZES your content is important, but some of it you will definitely want the user to see and some you wont mind if they don’t. Grading your content will let ON YOUR PAGES! This is where you grade you place it on the page in the content, any system an intelligent way, allowing will do, but grading from the user access to what s/he 1 to 3 works well, 1 for is likely to want right away, As a rule have no more while drawing them down the than 3 different fonts on the the most important, 2 for graded content levels. quite important and 3 for page, in 3 different sizes. It’s generally a good idea to optional. have one font type and size for your navigation, one for your headings and one for your main content. That then leaves you some play in size or type for other navigational or informational elements. same goes for colors! 42
  22. 22. Team Meerkat Illustration, design, ux, css, html, jquery, wordpress www.teammeerkat.com 44
  23. 23. 46
  24. 24. Gaming Characters Illustration, character, direction 48
  25. 25. 50
  26. 26. For more, please see; www.yaypaul.com www.designergamergeek.com www.deadlyfurrycute.com