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.

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.com
Wednesday, January 9, 13

2. PRINT DESIGN
VS.
WEB DESIGN
.... What is the differences?
Wednesday, January 9, 13

3. Types of media
Audience
Layout
Color
Fonts
Graphics
Wednesday, January 9, 13

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. Audience?
In Print
Tangible & Physical perception
In Web
User-friendly & User Experiences
Wednesday, January 9, 13

6. Layout?
In Print
Know what’s space, measured in inches
In Web
Monitor sizes & resolution
living by pixels
Wednesday, January 9, 13

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 others
Wednesday, January 9, 13

8. Screen Resolution Stats
in 2012
Wednesday, January 9, 13

9. 1680x1050 - 10%
Screen size
1024x768 - 20%
1280x800 - 17%
Wednesday, January 9, 13

10. Fixed size layout vs. Fluid layout
Wednesday, January 9, 13

11. Fluid Page Design examples
Wednesday, January 9, 13

12. Color?
In Print
CMYK - Monitor to physical materials
In Web
RGB - Monitor to Monitor
Wednesday, January 9, 13

13. CMYK vs. RGB
RGB color VS. CMYK
Wednesday, January 9, 13

14. RGB CODE Red Green Blue
Wednesday, January 9, 13

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 designer
Wednesday, January 9, 13

16. HTML safe fonts
Wednesday, January 9, 13

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. Vector vs. Bitmap
Wednesday, January 9, 13

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 browsers
Wednesday, January 9, 13

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. WHAT’S NEXT?
‣ How’s web & internet works
‣ Basic HTML knowledges
‣ website usabilities
‣ web design tool (photoshop, illustrator, firework)
Wednesday, January 9, 13

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. 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_resolution
Wednesday, January 9, 13