สอน Design web 2.0 ค่าย YWC ครั้งที่ 6

1. Design Design Web 2.0
g g
Nariopon Thungtreerat : WoNe’ Co.,Ltd
WoNe Co Ltd
nariopon.t@wone.co.th
18/10/2008

2. Design Design Web 2.0
1. Design
2.
2 Design Web 2 0
2.0

3. Arts & Design
ศิลปะ Arts
ศาสตรแหงการแสดงออกจากจิินตนาการและอารมณ เพื่อความสุขทางใจ
ื ใ

4. Arts & Design
การออกแบบ Design
ศาสตรแหงความคด แกไขปญหาทมอยู เพอตอบสนองจุดมุ
ศาสตรแหงความคิด แกไขปญหาที่มีอย เพื่อตอบสนองจดมงหมาย และสามารถ
นํามาใชไดอยางพึงพอใจ
สวย
ใชสอยได
สื่อความหมาย

5. โ  : พยายามลากเสน 4 เสนใหตอเนื่องกััน (หามยกมือ) โ านจุดทุกจุด
โจทย ใ ื ื โดยผ

7. ลักษณะความคิด
ลักษณะความคิดของมนุษยที่ใชในการดําเนินชีวิตและการสรางสรรคสิ่ง
ตางๆ ในชีวิตของเรา สามารถแบงไดเปน ลกษณะคอ
ตางๆ ในชวตของเรา สามารถแบงไดเปน 3 ลักษณะคือ
• คิดแบบเปะ เปะ
เปนความคิดที่มีกรอบ มีบรรทัดฐานชัดเจน
• คิดแบบกะ กะ
คดแบบกะ
เปนความคิดเกิดจากการคาดเดา กะเกณฑ ประมาณการใน
ชวตประจาวน
ชีวิตประจําวัน
• คิดแบบทางเลือก
เปนความคิดที่จะไมถูก จํากัดแคหนึ่งหรือสอง แตอาจมี
ไดหลายลักษณะหรือหลายรูปแบบ ู

10. ฿฿฿฿฿฿

11. Graphic Design Workflow
Program Conceptual Case Preliminary Design
Analysis Design Study Design
วิิเคราะหโจทย สรางแนวคิิดหลัก
ั ศึึกษากรณีศึกษา
ี ออกแบบราง ออกแบบจริิง
ของงานที่จะออกแบบ ที่มีอยูแลว

12. Graphic Design Workflow
Program Analysis
วิเคราะหโจทย ทีมีมาใหแกไข
่
What เราจะทํางานอะไร ?
Where งานของเราจะนําไปใชที่ไหน ?
Who ใ ปนคนที่ีมาใชงาน ?
ใครเป ใ
How จะทํางานชิ้นนี้อยางไร ?
Conceptual Design
p g
สรางแนวคิดหลักของงานที่จะออกแบบ
งานทดตองมแนวคด
งานที่ดีตองมีแนวคิด

13. Graphic Design Workflow
Case Study
ศึกษากรณีศึกษาที่มีอยูแลว

วิเคราะหขอดี ขอเสีย ของงานที่มีอยูแลว เพื่อนํามาประยุุกตใชในงานของเรา
ู
Preliminary Design
ออกแบบราง
นําแนวคิดทีมีมาแปลงใหเปนแบบ ควรมีมากกวา 1 แบบ
่
Design
ออกแบบจริง
ออกแบบตามแบบที่เลือกไว

14. การสรางเว็บไซต
Customer
Approve
Web/
Content Master
Edit Design
Design
Mockup Web Designer
HTML Copywriter
D
Dynamic
i Programmer
HTML

16. ทบทวนศัพทเกี่ยวกับ Website
Web Page
Web Site
Home Page
Z
Splash Page
p g

17. สถิติที่นาสนใจ

18. สถิติที่นาสนใจ

19. สถิติที่นาสนใจ

20. สถิติที่นาสนใจ

21. โปรแกรมทีใชงาน
่
Image HTML Animation
• Adobe WYSIWYG • Adobe
Photoshop Image Ready
• Macromedia
Adobe
• Ad b D
Dream weaver •M
Macromedia
di
Illustrator Flash
• MS. Front Page
g
• CorelDraw • Ulead
• Fi
Firework
k

22. หลักในการออกแบบเว็บไซต
Structure Design Interface Design
การออกแบบโครสรางเวบไซต
การออกแบบโครสรางเว็บไซต การออกแบบหนาตาเวบไซต
การออกแบบหนาตาเว็บไซต

23. sitemap
Structure Design
การออกแบบโครสรางเว็บไซต

24. Sitemap ทีี่ดี
Sit
• ทุก Web Page จะตองมีลิงคทางออกเสมอ
• ทุก Web Page ควรจะตองมีลิงคกลับไปยังหนา Home Page เสมอ
• ถา Web Site ของเรามีจํานวนหนามากๆ ควรจะมี Web Page
ททาหนาทเปน
ที่ทําหนาที่เปน Site Map

25. I t f
Interface Design
D i
การออกแบบหนาตาเว็บไซต
ใชงานไดงายและสะดวก • มีระบบ Navigation นําทาง
• เขาใจงายไมซับซอน
สวยงามและสื่อความหมาย • สี
• Layout
• องคประกอบโดยรวม
ไมโหลดนาน •ไมควรรอเกิน 7 วินาที ในการโหลดหนาแรก
•ไฟลโดยรวมควรมีขนาดไมเกิน 300-400 Kbps
bps
อารมณเดียวกันทั้งเว็บ • theme เดียวกันทั้งเว็บไซต
เดยวกนทงเวบไซต

26. Layout
สิ่งพิมพ เว็บไซต
เปนการนําองคประกอบตางๆที่เรามีอยู นํามาจัดวางลงไปในพื้นที่ทกําหนด
่ี

27. Layout
เปนการนําองคประกอบตางๆที่เรามีอยู นํามาจัดวางลงไปในพื้นที่ทกําหนด
่ี
จุดมุงหมายเดยวกน
ี ั
• นําเสนอขอมูลที่เรามีอยูใหกับผูชมไดอยางเหมาะสม
• ผูชมสามารถรบขอมูลทเรานาเสนอไดสะดวก
ั  ี่ ํ ไ 

28. รูปแบบ Layout ของเว็บไซต
สามารถแบงออกได 3 รูปแบบ
• Ice Layout
• Jelly Layout
• Liquid Layout

29. รูปแบบ Layout ของเว็บไซต
Ice Layout
พนททใชสาหรบแสดงขอมูลจะมการกาหนดขนาดไวตายตว และจะชิดอย านใด
พื้นที่ที่ใชสําหรับแสดงขอมลจะมีการกําหนดขนาดไวตายตัว และจะชดอยูดานใด
ดานหนึ่งของจอภาพ

30. รูปแบบ Layout ของเว็บไซต
Ice Layout
ขอดี
สามารถควบคุมองคประกอบในสวนตางๆไดตามตองการ เชนขนาดของรูปภาพ
ความกวางของ Layout ภาพที่จะนํามาเปนพื้นหลัง
ขอเสีย
ใชพื้นที่แสดงขอมูลไดไมเต็มศักยภาพ หนาเว็บไซตขาดความสมดุล
เหมาะสําหรับ
เว็บไซตที่ไมตองการนําเสนอขอมูลมากนัก แตเนนไปที่ความสวยงาม และความ
แปลกใหม

31. รูปแบบ Layout ของเว็บไซต
Ice Layout
800x600 1024x768 1280x800
www.daleharris.com

32. รูปแบบ Layout ของเว็บไซต
Jelly Layout
เหมอนกบแบบ
เหมือนกับแบบ Ice Layout แตจะแตกตางกันตรงที่มีการแกไขปญหาเรื่อง
แตจะแตกตางกนตรงทมการแกไขปญหาเรอง
ความสมดุลของเว็บไซต โดย Layout จะวางอยูตรงกึ่งกลางหนาจอ

33. รูปแบบ Layout ของเว็บไซต
Jelly Layout
ขอดี
สามารถควบคุมองคประกอบในสวนตางๆไดตามตองการ ใชเวลาในการสราง
ไมมากนัก
ขอเสีย
ใชพื้นที่แสดงขอมูลไดไมเต็มศักยภาพ
เหมาะสําหรับ
เว็็บไซตท่วไปที่ตองการควบคุมองคประกอบตางๆไดงาย และใชเวลาในการ
ั
สรางไมนานนัก

34. รูปแบบ Layout ของเว็บไซต
Jelly Layout
800x600 1024x768 1280x800
www.tag.in.th

35. รูปแบบ Layout ของเว็บไซต
Liquid Layout
เปนการออกแบบ L
ป t ใ
Layout เพืื่อการใชพ้ืนทีี่ในการแสดงขอมูลอยางคุมคา และ
 
มีความยืดหยุนในการใชงานมากที่สุด

36. รูปแบบ Layout ของเว็บไซต
Liquid Layout
ขอดี
สามารถแสดงผลไดดีกับทุกๆ Resolution
ขอเสีย
ใชเวลาในการสรางมากและไมสามารถควบคุมองคประกอบของสวนตางๆได
ตามที่ตองการทั้งหมด
เหมาะสําหรับ
เว็บไซตที่มีการนําเสนอขอมูลมากๆ และตองการใหผูใชสามารถเขาชม
เว็บไซตไดหลากหลาย

37. รูปแบบ Layout ของเว็บไซต
Liquid Layout
800x600 1024x768 1280x800
www.vivabit.com

38. รูปแบบภาพทีใชกับเว็บไซต
่
JPG
เหมาะกับไฟลทุกประเภทที่เปนภาพนิงสามารถปรับขนาดไฟลไดตามใจชอบแตถาภาพมีสี
่
นอยๆ ขนาดไฟลจะใหญกวา GIF นิดหนอย
ญ
GIF
เหมาะกับไฟลเกือบทุกประเภททีเ่ ปนภาพนิ่งและภาพเคลื่อนไหว และภาพที่มีพื้นโปรงใสได
PNG
สูญเสียจากการบีบอัดนอย ชวยใหเราไดภาพที่มีไซตขนาดเล็กลง แตคุณภาพไมลดลง

39. JPG GIF
28.3 KB 97.3 KB

40. JPG GIF
30.9 KB 55.6 KB

41. JPG GIF
14.0 KB 12.7 KB

42. JPG GIF
15.6 KB 11.7 KB

43. Transparency
a spa e cy
GIF PNG
36.4 KB 88.2 KB
Binary Transparency Alpha Transparency

44. Web 2.0
การมสวนรวม
การมีสวนรวม

ทุกคนเปนผูรวมสรางเนื้อหาในระหวางการบริโภคเนื้อหา
เนื้อหาที่ผูใชเปนผูสราง (User Generated Content)

45. ตัวอยาง Web 2.0
flickr.com
youtube.com
delicious.com
wikipedia.org
hi5.com
facebook.com
twitter.com

46. ตัวอยาง Web 2.0
flickr.com
youtube.com
delicious.com
wikipedia.org
hi5.com
facebook.com
twitter.com

47. ตัวอยาง Web 2.0
flickr.com
youtube.com
delicious.com
wikipedia.org
hi5.com
facebook.com
twitter.com

48. ตัวอยาง Web 2.0
flickr.com
youtube.com
delicious.com
wikipedia.org
hi5.com
facebook.com
twitter.com

49. ตัวอยาง Web 2.0
flickr.com
youtube.com
delicious.com
wikipedia.org
hi5.com
facebook.com
twitter.com

50. ตัวอยาง Web 2.0
flickr.com
youtube.com
delicious.com
wikipedia.org
hi5.com
facebook.com
twitter.com

51. ตัวอยาง Web 2.0
flickr.com
youtube.com
delicious.com
wikipedia.org
hi5.com
facebook.com
twitter.com

52. ตัวอยาง Web 2.0
www.Go2Web20.net

53. Designer & Web 2.0
• ลักษณะเดนของ Web 2.0
• การแยกสวนของการแสดงผลออกจากเนื้อหาโดยการใชเทคนิค
Tableless Layout Design

54. Color นิยมใชสีท่สดใส สวาง เชนสี น้าเงินสด สีชมพู สีเขียว
ี ้ํ
www.ajaxload.info

55. Color
www.skype.com

56. Color
www.curvycorners.net

57. Oversized เนนสิ่งที่ตองการแสดง โดยการทําใหสงเหลานั้นมีขนาดใหญกวาปกติ
่ิ
www.flickr.com

58. Oversized
www.rankforest.com

59. Wet table
extensions.flock.com

60. Glass buttons
www.popshops.com

61. Glass buttons
dashwire.com

62. Glass buttons
www.bigfilebox.com

63. Rounded Corners
Rounded Corners
www.schillmania.com

64. Rounded Corners
www.webcredible.co.uk

65. Star burata

66. Star burata
www.clockingit.com

67. Star burata
www.mangolanguages.com

68. Free
beanstalkapp.com

69. Free
www.veetro.com

70. Free
www.fullpix.tv

71. สรุป
• ไ ตองยึดติิดกับรูปแบบดังกลาว
ไม ึ ั ั 
• เปนเพียงแคสมัยนิยม อนาคตเปลยนแปลงแนนอน
เปนเพยงแคสมยนยม อนาคตเปลี่ยนแปลงแนนอน
• ใชงานไดงาย และสะดวกดีที่สุด

72. Tableless Layout Design
y g

73. การทําเว็บในอดีต(ของบางคน)
การทาเวบในอดต(ของบางคน)
• เปด Dream weaver
เปด
• Ctrl + N
• คลิกทีปุมตารางเพื่อสรางLayout กําหนดความกวางของหนาเพจ
่
• ใ ดีไซน ทีี่หั่นไ เรีียบรอยแลวจาก Photoshop
ใส ไว
ู
• ใสตารางเขาไปอีก ใสเนื้อหาลงไป กําหนดสี กําหนดรปแบบเนื้อหาลงไป
• ไดเว็บเพจ ออกมา 1 หนา จบ....
แลวมปญหาอะไร
แลวมีปญหาอะไร ????

75. การทําเว็บในอดีต(ของบางคน)
การทาเวบในอดต(ของบางคน)
• รูปแบบการแสดงผลตางๆถููกกําหนดลงไปในเนื้อหาเลย
ู
-หัวขอหลักเปนสีแดง ขนาดอักษร 38 -หัวขอหลักเปนสีเขียว ขนาดอักษร 38
-เนืื้อหายอยเปนสีีดํา ขนาดอัักษร 18
ป -เนืื้อหายอยเปนสีีเหลืือง ขนาดอักษร 18
ป ั

76. การทําเว็บในอดีต(ของบางคน)
การทาเวบในอดต(ของบางคน)
สรุปปญหา
ุ
• ไมสามารถแสดงผลไดอยางสมบูรณในอุปกรณตางๆ
• เกิดความยุงยากเมื่อตองการแกไขรูปแบบการแสดงผล
• ฯลฯ
แลวจะแกไขอยางไร ????
  ไ

77. Tableless Layout Design
• เมื่อกอนการจัดวาง Layout ของเว็บไซตนิยมการใชงาน <table> ซึ่งอาจจะ
เมอกอนการจดวาง ของเวบไซตนยมการใชงาน table ซงอาจจะ
เปนการใชงาน tag HTML ที่ไมคอยจะถูกตองตามหนาที่มากนัก
• เพราะวา <table> ควรจะถูกใชเมื่อตองการนําเสนอขอมูลที่เปนกลุมกอน
มากกวา เชน การแสดงรายการสินคาของเว็บไซต
มากกวา เชน การแสดงรายการสนคาของเวบไซต
• เมื่อใชเทคนิคนีแลว จะเปนการแยกสวนของการแสดงผล และสวนเนื้อหาของ
้ จ ข ข
เว็บไซตออกจากกันอยางสิ้นเชิง โดยการใชงาน eXtensible HyperText
Markup Language (XHTML) และ Cascading Style
Sheets (CSS)

78. Tableless Layout Design
XHTML ( Xt
(eXtensible H
ibl HyperText M k L
T t Markup Language)
)
• การรวมเอา HTMLและXML เขาไวดวยกัน
เขาไวดวยกน
• แตกตางจาก HTMLตรงที่จะตองเปน Well-format เทานั้น
CSS (Cascading Style Sheets)
• ตกแตงเอกสาร HTML หรือ XHTML หรือ XML

79. HTML, XML, XHTML, CSS & Tableless Layout Design
, , , y g
+ =
HTML XML XHTML CSS
Tableless Layout Design
XHTML+CSS

80. แยกสวนทเปนเนอหาออกจากสวนของการแสดงผล
แยกสวนที่เปนเนื้อหาออกจากสวนของการแสดงผล

82. Tableless Layout Design
• Tableless Layout Design / CSS Layout Design
• การออกแบบ Layout โดยไมใช Table(ตาราง)
y ( )
• ไมใชไมใหใช Table เลย แตใหใชใหถูกหนาที่ของมัน
• XHTML + CSS
• ใช <div> และ <span> ในการวาง Layout
• ใช CSS ในการควบคมการแสดงผล
ุ
• เปนการออกแบบ Layout ที่แยกสวนของเนื้อหา ออกจากสวนแสดงผล

83. ตัวอยางการวาง Layout ดวยเทคนิค Tableless Layout Design
ตวอยางการวาง ดวยเทคนค
ขั้นที่ 1
เริ่มแรกดวยการออกแบบวาในเว็บไซตของเราจะมี Layout ทีประกอบไปดวยสวน
่
ตางๆอะไรบาง โดยตัวอยางนี้เราจะแบง Layout ออกเปน 4 สวนคือ header, left
t i ht layout และfooter
layout, right l
l t f t

84. ขั้นทีี่ 2
เริ่มเขียน HTML โดยไดโคด HTML ดังนี้

86. ขั้นที่ 3 เขียน CSS เพือควบคุมลักษณะการแสดงผล
่

87. ขั้นที่ 4 นํา CSS มารวมกันในไฟล HTML

89. ศึกษาเพิ่มเติม
ศกษาเพมเตม
www.csszengarden.com
www.oswd.org
www.cssplay.co.uk
thaicss.com
www.divland.com

90. สรุป
ุ
• การออกแบบ La o t โดยไมใช Table(ตาราง)
Layout โดยไมใช
• ใช <di > และ < > ในการวาง L t และใช CSS ในการควบคมการแสดงผล
ใช <div> <span> Layout และใช ในการควบคุมการแสดงผล
• เปนการออกแบบ Layout ทีี่แยกสวนของเนืื้อหา ออกจากสวนแสดงผล
ป

91. แหลงขอมูล
Image www.flickr.com
www.istockphoto.com
Template www.oswd.org
www.cssplay.co.uk
l k
Font
F t www.f0nt.com
fontstruct.fontshop.com
ชุดสีี www.colourlovers.com

92. คาถาม?
คําถาม?

93. จบการบรรยาย