SCREEN BASED DESIGNFor graphic (print) designers
First edition: JULY 28, 2010 Updated: JAN 9, 2013
by Bow Kraivanich
http://www.inmysmallroom.com | [email protected]
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
Recommended
