screen based design for graphic designer
DESCRIPTION
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.TRANSCRIPT
![Page 1: Screen Based Design for Graphic Designer](https://reader034.vdocuments.us/reader034/viewer/2022051817/548139fd5806b5dd108b4642/html5/thumbnails/1.jpg)
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
![Page 2: Screen Based Design for Graphic Designer](https://reader034.vdocuments.us/reader034/viewer/2022051817/548139fd5806b5dd108b4642/html5/thumbnails/2.jpg)
PRINT DESIGN VS.
WEB DESIGN
.... What is the differences?
Wednesday, January 9, 13
![Page 3: Screen Based Design for Graphic Designer](https://reader034.vdocuments.us/reader034/viewer/2022051817/548139fd5806b5dd108b4642/html5/thumbnails/3.jpg)
Types of mediaAudienceLayoutColorFonts
Graphics
Wednesday, January 9, 13
![Page 4: Screen Based Design for Graphic Designer](https://reader034.vdocuments.us/reader034/viewer/2022051817/548139fd5806b5dd108b4642/html5/thumbnails/4.jpg)
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
![Page 5: Screen Based Design for Graphic Designer](https://reader034.vdocuments.us/reader034/viewer/2022051817/548139fd5806b5dd108b4642/html5/thumbnails/5.jpg)
In Print
Tangible & Physical perception
Audience?
In Web
User-friendly & User Experiences
Wednesday, January 9, 13
![Page 6: Screen Based Design for Graphic Designer](https://reader034.vdocuments.us/reader034/viewer/2022051817/548139fd5806b5dd108b4642/html5/thumbnails/6.jpg)
In Print
Know what’s space, measured in inches
Layout?
In Web
Monitor sizes & resolutionliving by pixels
Wednesday, January 9, 13
![Page 7: Screen Based Design for Graphic Designer](https://reader034.vdocuments.us/reader034/viewer/2022051817/548139fd5806b5dd108b4642/html5/thumbnails/7.jpg)
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
![Page 8: Screen Based Design for Graphic Designer](https://reader034.vdocuments.us/reader034/viewer/2022051817/548139fd5806b5dd108b4642/html5/thumbnails/8.jpg)
Screen Resolution Statsin 2012
Wednesday, January 9, 13
![Page 9: Screen Based Design for Graphic Designer](https://reader034.vdocuments.us/reader034/viewer/2022051817/548139fd5806b5dd108b4642/html5/thumbnails/9.jpg)
Screen size1680x1050 - 10%
1024x768 - 20%
1280x800 - 17%Wednesday, January 9, 13
![Page 10: Screen Based Design for Graphic Designer](https://reader034.vdocuments.us/reader034/viewer/2022051817/548139fd5806b5dd108b4642/html5/thumbnails/10.jpg)
Fixed size layout vs. Fluid layout
Wednesday, January 9, 13
![Page 11: Screen Based Design for Graphic Designer](https://reader034.vdocuments.us/reader034/viewer/2022051817/548139fd5806b5dd108b4642/html5/thumbnails/11.jpg)
Fluid Page Design examples
Wednesday, January 9, 13
![Page 12: Screen Based Design for Graphic Designer](https://reader034.vdocuments.us/reader034/viewer/2022051817/548139fd5806b5dd108b4642/html5/thumbnails/12.jpg)
In Print
CMYK - Monitor to physical materials
Color?
In Web
RGB - Monitor to Monitor
Wednesday, January 9, 13
![Page 13: Screen Based Design for Graphic Designer](https://reader034.vdocuments.us/reader034/viewer/2022051817/548139fd5806b5dd108b4642/html5/thumbnails/13.jpg)
CMYK vs. RGB
RGB color VS. CMYK
Wednesday, January 9, 13
![Page 14: Screen Based Design for Graphic Designer](https://reader034.vdocuments.us/reader034/viewer/2022051817/548139fd5806b5dd108b4642/html5/thumbnails/14.jpg)
RGB CODE Red Green Blue
Wednesday, January 9, 13
![Page 15: Screen Based Design for Graphic Designer](https://reader034.vdocuments.us/reader034/viewer/2022051817/548139fd5806b5dd108b4642/html5/thumbnails/15.jpg)
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
![Page 16: Screen Based Design for Graphic Designer](https://reader034.vdocuments.us/reader034/viewer/2022051817/548139fd5806b5dd108b4642/html5/thumbnails/16.jpg)
HTML safe fonts
Wednesday, January 9, 13
![Page 17: Screen Based Design for Graphic Designer](https://reader034.vdocuments.us/reader034/viewer/2022051817/548139fd5806b5dd108b4642/html5/thumbnails/17.jpg)
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
![Page 18: Screen Based Design for Graphic Designer](https://reader034.vdocuments.us/reader034/viewer/2022051817/548139fd5806b5dd108b4642/html5/thumbnails/18.jpg)
Vector vs. Bitmap
Wednesday, January 9, 13
![Page 19: Screen Based Design for Graphic Designer](https://reader034.vdocuments.us/reader034/viewer/2022051817/548139fd5806b5dd108b4642/html5/thumbnails/19.jpg)
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
![Page 20: Screen Based Design for Graphic Designer](https://reader034.vdocuments.us/reader034/viewer/2022051817/548139fd5806b5dd108b4642/html5/thumbnails/20.jpg)
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
![Page 21: Screen Based Design for Graphic Designer](https://reader034.vdocuments.us/reader034/viewer/2022051817/548139fd5806b5dd108b4642/html5/thumbnails/21.jpg)
WHAT’S NEXT?‣ How’s web & internet works‣ Basic HTML knowledges‣ website usabilities‣ web design tool (photoshop, illustrator, firework)
Wednesday, January 9, 13
![Page 22: Screen Based Design for Graphic Designer](https://reader034.vdocuments.us/reader034/viewer/2022051817/548139fd5806b5dd108b4642/html5/thumbnails/22.jpg)
๏ 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
![Page 23: Screen Based Design for Graphic Designer](https://reader034.vdocuments.us/reader034/viewer/2022051817/548139fd5806b5dd108b4642/html5/thumbnails/23.jpg)
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