Making the Transition from Print to Digital Design

Upcoming SlideShare
Loading in...5
×
 

Making the Transition from Print to Digital Design


on

  • 765 views

This presentation explains different techniques and concepts relevant to transitioning best practices in print design to those of the web and other digital media. It covers universal principles that ...

This presentation explains different techniques and concepts relevant to transitioning best practices in print design to those of the web and other digital media. It covers universal principles that apply across-the-board as well as those unique to each discipline and offers specific insights on easing your transition from one to the next.

Statistics

Views

Total Views
765
Views on SlideShare
723
Embed Views
42

Actions

Likes
0
Downloads
10
Comments
0

1 Embed 42

http://timfrick.com 42

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • Design principles that transition well across media formats.\n
  • What is the take-away on this slide?\n
  • Atlanta Magazine Article\n
  • Fast Co Design\n
  • Design pages (print, web, media, etc.) so that they take advantage of the natural way one’s eyes travel across a page.\n
  • - The Gutenberg Diagram\n- Same as books, users tend to read/experience a web page by starting at the top left and working their way down to the bottom right.\n
  • Primary Optical Area:\n- top left\n- logo\n- 1st read\n
  • Primary Optical Area:\n- top left\n- logo\n- 1st read\n
  • Terminal Area:\n- bottom right\n- calls to action\n- buttons\n
  • Mightybytes example\n
  • - have to be more careful with colors vibrating on screen, even more than when on print\n- red on gray or green\n- orange directly on blue\n- need to talk about values/saturations and how they need to balance between colors to avoid bad vibrations (INSERT PIC OF BEACH BOYS? GOOD VIBRATIONS?!... “the only kind of vibrations we want are...” lol okay maybe not)\n- talk more later on RGB vs. CMYK later\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Chroma = purity of a color, so its lack in white, gray and black\n
  • \n
  • \n
  • Eyes tend to be more sensitive to brighter colors on the web than in print.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • If you comp something up in 300dpi, you’re packing more information into each pixel, \nwhich MAJORLY increases load time\n
  • \n
  • \n
  • \n
  • Others include: \n- Impact\n- Comic Sans\n- Arial Black\n
  • Others include: \n- Impact\n- Comic Sans\n- Arial Black\n
  • Cons:\n- No desktop version for comping up proofs\n\n
  • \n
  • Average body copy is set to 13 or 14px on web,\nwhereas 12 even seems big at times in print.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Making the Transition from Print to Digital Design
 Making the Transition from Print to Digital Design
 Presentation Transcript

  • Making the Transition from Print to Digital Design Tim Frick and Joy Burke from Mightybytes APRIL 18, 2010
  • PART 1:Universal Design Principles
  • Visual Hierarchy
  • First read, second read, etc.
  • Reading Gravity(and how the Gutenberg Rule relates)
  • The Gutenberg Diagram PRIMARY STRONG OPTICAL AREA FALLOW AREA WEAK TERMINAL FALLOW AREA AREA
  • Primary Optical Area
  • Terminal Area
  • Color Theory
  • Body CopyGenerally dark body copy onlight background creates betterlegibility
  • See? This is not very enjoyable reading. It This is way easier on the eyes, especiallystrains the eyes. It’s one thing if it’s a very for on-screen reading. Be nice to yourshort amount of text and enhances the users and make it easy for them to readdesign and user experience, but in what you are trying to tell them.general don’t set body copy like this,especially not on the web. Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. PraesentPellentesque nibh felis, eleifend id, eu elit. Ut eu ligula. Class aptent taciticommodo in, interdum vitae, leo. Praesent sociosqu ad litora torquent per conubiaeu elit. Ut eu ligula. Class aptent taciti nostra, per inceptos hymenaeos.sociosqu ad litora torquent per conubianostra, per inceptos hymenaeos. Maecenas elementum augue nec nisl. Proin auctor lorem at nibh. Curabitur nullaMaecenas elementum augue nec nisl. purus, feugiat id, elementum in, lobortisProin auctor lorem at nibh. Curabitur nulla quis, pede. Vivamus sodales adipiscingpurus, feugiat id, elementum in, lobortis sapien. Vestibulum posuere nulla egetquis, pede. Vivamus sodales adipiscing wisi.sapien. Vestibulum posuere nulla egetwisi. Integer volutpat ligula eget enim. Suspendisse vitae arcu. QuisqueInteger volutpat ligula eget enim. pellentesque. Nullam consequat, semSuspendisse vitae arcu. Quisque vitae rhoncus tristique, mauris nullapellentesque. Sed dapibus vehicula odio. fermentum est, bibendum ullamcorperQuisque pellentesque. sapien magna et quam. Sed dapibus vehicula odio.Proin bibendum gravida nisl. Fusce lorem.Phasellus sagittis, nulla in hendrerit Proin bibendum gravida nisl. Fusce lorem.laoreet, libero lacus feugiat urna, eget Phasellus sagittis, nulla in hendrerithendrerit pede magna vitae lorem. laoreet, libero lacus feugiat urna, egetPraesent mauris. hendrerit pede magna vitae lorem. Praesent mauris.
  • Avoid Vibrating Colors Tsk, tsk.Nooooooooooooooo!
  • Balanced Color Palette
  • Balanced Color Palette kuler.adobe.co m
  • ModerationUse high contrast and highchroma in moderation
  • SaturationFind balance between low andhigh color saturation
  • SaturationUsing high saturation forhighlight areas can be aneffective method for calls-to-action or emphasis
  • PART 2:Working for the Web
  • Behaviors vs. Narratives
  • GOOD MagazineThe user experience isoptimized for the deliveryplatform.
  • Dynamic vs. Static Content
  • Static ContentDoesn’t change from page topage • Logo • Main navigation • Social media links • Search bar
  • Dynamic ContentFlexible content that changes • Headings • Body copy • Features • Testimonials
  • CMS 101
  • Content Management System Drupal Expression Engine WordPress
  • Designing on a Grid
  • Make Your Developers Happy • Backbone of the design • Easily plug in content on each new page • Creates consistency • Careful when breaking it on the web
  • 960 Grid• 960.gs• Downloadable .ai/.psd files• Uses CSS, with classes labeled “grid_xx” to determine widths• Grid Overlay Bookmark
  • From CMYK to RGB & HEX
  • CMYKAllows virtually any color to beproduced in print
  • RGBGenerally brighter, more vivid
  • RGB CMYK
  • RGBWYSIWYG (no need to printproofs)
  • HEX ValuesHexidecimal numbering systemusing the RGB color model.
  • HEX ValuesWritten as 3 sets of hex pairs:1st two = Red2nd two = Green3rd two = Blue
  • HEX Values Red Green Blue#ff0000 #00ff00 #0000ff
  • ff0000ffffff0000ff
  • Print vs. Screen Resolution
  • 300dpi vs 72dpiStandard screen resolution:72dpi
  • Optimize Your Images!Determine goal dimensions ofimage at 100%, then make72dpi
  • Saving Comps‘Save for Web’ as .jpgsKeep original files
  • Print vs. Web Typography
  • Web Safe FontsAndale Mono Times New Roman Arial Georgia Helvetica Courier New Verdana Geneva Trebuchet MS Lucida Grande
  • Font Embedding Systems • TypeKit • Fontdeck • Font-Face • Fonts Live • Fonts.com Web Fonts • Fontspring • Google Fonts
  • We <3 TypeKit • > 4,000 fonts • Super easy setup & integration • Reasonable rates • Host custom fonts • Flexibility in font usage
  • Legible Body CopyStudies show sans-serif fontsprovide better legibility forbody copy than most seriffonts.
  • Legible Body CopyGenerally much bigger fontsize online than in print
  • Font SizePrint: points (pt)Web: pixels (px)
  • PART 3:Real-World Examples
  • DCA Theater Chicago
  • Arts Engagement Exchange
  • PinP, Inc.
  • The Joffrey Ballet Chicago