• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Screen Based Design for Graphic Designer
 

Screen Based Design for Graphic Designer

on

  • 1,424 views

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 ...

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.

Statistics

Views

Total Views
1,424
Views on SlideShare
1,424
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

    Screen Based Design for Graphic Designer Screen Based Design for Graphic Designer Presentation Transcript

    • 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
    • PRINT DESIGN VS. WEB DESIGN .... What is the differences?Wednesday, January 9, 13
    • Types of media Audience Layout Color Fonts GraphicsWednesday, January 9, 13
    • 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
    • Audience? In Print Tangible & Physical perception In Web User-friendly & User ExperiencesWednesday, January 9, 13
    • Layout? In Print Know what’s space, measured in inches In Web Monitor sizes & resolution living by pixelsWednesday, January 9, 13
    • 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
    • Screen Resolution Stats in 2012Wednesday, January 9, 13
    • 1680x1050 - 10% Screen size 1024x768 - 20% 1280x800 - 17%Wednesday, January 9, 13
    • Fixed size layout vs. Fluid layoutWednesday, January 9, 13
    • Fluid Page Design examplesWednesday, January 9, 13
    • Color? In Print CMYK - Monitor to physical materials In Web RGB - Monitor to MonitorWednesday, January 9, 13
    • CMYK vs. RGB RGB color VS. CMYKWednesday, January 9, 13
    • RGB CODE Red Green BlueWednesday, January 9, 13
    • 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
    • HTML safe fontsWednesday, January 9, 13
    • 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
    • Vector vs. BitmapWednesday, January 9, 13
    • + 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
    • 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
    • WHAT’S NEXT? ‣ How’s web & internet works ‣ Basic HTML knowledges ‣ website usabilities ‣ web design tool (photoshop, illustrator, firework)Wednesday, January 9, 13
    • 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
    • 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