Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Screen Based Design for Graphic Designer

2,625 views

Published on

Designing website, mobile application or other screen based design are different from print design. Yes, the basic design concept is not changed but there are so many things that you have to concern more than about colour proof, texture of paper.... Digita kind of designs are display and used on screen, you can not touch it, OK, we all use touch screen mobile phone but we are not actually TOUCH it like we touch the paper. It's intangible; it's all about the usability and user-experiences.

  • Be the first to comment

  • Be the first to like this

Screen Based Design for Graphic Designer

  1. 1. SCREEN BASED DESIGN For graphic (print) designers First edition: JULY 28, 2010 Updated: JAN 9, 2013 by Bow Kraivanich http://www.inmysmallroom.com | bow@inmysmallroom.comWednesday, January 9, 13
  2. 2. PRINT DESIGN VS. WEB DESIGN .... What is the differences?Wednesday, January 9, 13
  3. 3. Types of media Audience Layout Color Fonts GraphicsWednesday, January 9, 13
  4. 4. Print Types of media Web & Screen based Logo Standard HTML websites Business card Flash websites Poster Email newsletters, E-Direct Mail Magazine advertising Banner advertising Product packaging Web application interface Billboard Mobile Applications Environment graphic Mobile Games ETC. ETC.Wednesday, January 9, 13
  5. 5. Audience? In Print Tangible & Physical perception In Web User-friendly & User ExperiencesWednesday, January 9, 13
  6. 6. Layout? In Print Know what’s space, measured in inches In Web Monitor sizes & resolution living by pixelsWednesday, January 9, 13
  7. 7. Screen Resolution Stats *in 2010 1024x768 others 20.0% 20.0% 1920x1200 4.6% 1680x1050 1280x1024 10.0% 18.0% 1440x900 1280x800 10.5% 17.0% 1024x768 1280x1024 1280x800 1440x900 1680x1050 1920x1200 othersWednesday, January 9, 13
  8. 8. Screen Resolution Stats in 2012Wednesday, January 9, 13
  9. 9. 1680x1050 - 10% Screen size 1024x768 - 20% 1280x800 - 17%Wednesday, January 9, 13
  10. 10. Fixed size layout vs. Fluid layoutWednesday, January 9, 13
  11. 11. Fluid Page Design examplesWednesday, January 9, 13
  12. 12. Color? In Print CMYK - Monitor to physical materials In Web RGB - Monitor to MonitorWednesday, January 9, 13
  13. 13. CMYK vs. RGB RGB color VS. CMYKWednesday, January 9, 13
  14. 14. RGB CODE Red Green BlueWednesday, January 9, 13
  15. 15. Fonts? In Print All in your font library In Web Use standard fonts * These days, there are a lot of font embed solutions provided to use on the web, but still limited for designerWednesday, January 9, 13
  16. 16. HTML safe fontsWednesday, January 9, 13
  17. 17. Graphic? In Print 300dpi - TIFF, EPS In Web 72dpi - JPG, GIF, PNG Today, the screen resolution tends to be larger and larger. Giving time, the hight-resolution screen such as ‘retina display’ will replace the standard 72dpi as we all have seen in the mobile devices such as iPhone & iPad and the latest, Macbook Pro with Retina display.Wednesday, January 9, 13
  18. 18. Vector vs. BitmapWednesday, January 9, 13
  19. 19. + This is a standard file type + Perfect for vector based used over the world today + Super high quality file graphic with low-detailed, + Best use with bitmap file + Can have transparent not much colors e.g. photograph background + Can have transparent + Can optimized: + May be the next standard background but not as good best quality to poor quality for image file in future; both as PNG depends on file size desire. vector and bitmap JPG vs. GIF vs. PNG - Small file size - Big file size - May be not supported by some old browsersWednesday, January 9, 13
  20. 20. FAQ. & Glossaries Flash vs. HTML based website HTML&CSS web programming, database and CMS? Backend vs. Frontend SEO Domain name, Hosting FTP upload? Cloud computing Google can answer your clues better than me!Wednesday, January 9, 13
  21. 21. WHAT’S NEXT? ‣ How’s web & internet works ‣ Basic HTML knowledges ‣ website usabilities ‣ web design tool (photoshop, illustrator, firework)Wednesday, January 9, 13
  22. 22. Wanna learn more? ๏ http://www.smashingmagazine.com/ ๏ http://www.alistapart.com/ ๏ http://www.noupe.com/ ๏ http://www.uxbooth.com/ ๏ http://mashable.com/ ๏ http://www.sitepoint.com/ ๏ http://www.webdesignerwall.com/Wednesday, January 9, 13
  23. 23. THANK YOU References http://www.dynamit.us/blog/2009/01/web-design-vs-print-design/ http://graphicdesign.about.com/od/printvsweb/a/print_vs_web.htm http://webdesign.about.com/od/layout/i/aa060506_2.htm http://en.wikipedia.org/wiki/Display_resolutionWednesday, January 9, 13

×