screen based design for graphic designer

SCREEN BASED DESIGNFor graphic (print) designers

First edition: JULY 28, 2010 Updated: JAN 9, 2013

by Bow Kraivanich

http://www.inmysmallroom.com | bow@inmysmallroom.com

Wednesday, January 9, 13

PRINT DESIGN VS.

WEB DESIGN

.... What is the differences?

Wednesday, January 9, 13

Types of mediaAudienceLayoutColorFonts

Graphics

Wednesday, January 9, 13

Types of mediaPrint Web & Screen based

LogoBusiness cardPosterMagazine advertisingProduct packagingBillboardEnvironment graphicETC.

Standard HTML websitesFlash websitesEmail newsletters, E-Direct MailBanner advertisingWeb application interfaceMobile ApplicationsMobile GamesETC.

Wednesday, January 9, 13

In Print

Tangible & Physical perception

Audience?

In Web

User-friendly & User Experiences

Wednesday, January 9, 13

In Print

Know what’s space, measured in inches

Layout?

In Web

Monitor sizes & resolutionliving by pixels

Wednesday, January 9, 13

Screen Resolution Stats

others20.0%

1920x12004.6%

1680x105010.0%

1440x90010.5%

1280x80017.0%

1280x102418.0%

1024x76820.0%

1024x768 1280x1024 1280x800 1440x900 1680x1050 1920x1200 others

*in 2010

Wednesday, January 9, 13

Screen Resolution Statsin 2012

Wednesday, January 9, 13

Screen size1680x1050 - 10%

1024x768 - 20%

1280x800 - 17%Wednesday, January 9, 13

Fixed size layout vs. Fluid layout

Wednesday, January 9, 13

Fluid Page Design examples

Wednesday, January 9, 13

In Print

CMYK - Monitor to physical materials

Color?

In Web

RGB - Monitor to Monitor

Wednesday, January 9, 13

CMYK vs. RGB

RGB color VS. CMYK

Wednesday, January 9, 13

RGB CODE Red Green Blue

Wednesday, January 9, 13

In Print

All in your font library

Fonts?

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 designer

Wednesday, January 9, 13

HTML safe fonts

Wednesday, January 9, 13

In Print

300dpi - TIFF, EPS

Graphic?

In Web

72dpi - JPG, GIF, PNGToday, 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. Bitmap

Wednesday, January 9, 13

JPG vs. GIF vs. PNG

+ Super high quality file+ Can have transparent background+ May be the next standardfor image file in future; both vector and bitmap

- Big file size- May be not supported by some old browsers

+ Perfect for vector basedgraphic with low-detailed,not much colors+ Can have transparent background but not as goodas PNG

- Small file size

+ This is a standard file typeused over the world today+ Best use with bitmap filee.g. photograph+ Can optimized:best quality to poor qualitydepends on file size desire.

Wednesday, January 9, 13

FAQ. & GlossariesFlash vs. HTML based website

HTML&CSS

web programming, database and CMS?

Backend vs. Frontend

SEO

Domain name, Hosting

FTP upload?

Cloud computingGoogle 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

๏ 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/

Wanna learn more?

Wednesday, January 9, 13

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_resolution

References

THANK YOU

Wednesday, January 9, 13