Ywc Web Design2

1,594 views

Published on

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

Published in: Design, Technology
  • ขอบคุณมากครับ สุดยอดไปเลย
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Ywc Web Design2

  1. 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. 2. Design Design Web 2.0 1. Design 2. 2 Design Web 2 0 2.0
  3. 3. Arts & Design ศิลปะ Arts ศาสตรแหงการแสดงออกจากจิินตนาการและอารมณ เพื่อความสุขทางใจ ื ใ
  4. 4. Arts & Design การออกแบบ Design ศาสตรแหงความคด แกไขปญหาทมอยู เพอตอบสนองจุดมุ ศาสตรแหงความคิด แกไขปญหาที่มีอย เพื่อตอบสนองจดมงหมาย และสามารถ นํามาใชไดอยางพึงพอใจ สวย ใชสอยได สื่อความหมาย
  5. 5. โ  : พยายามลากเสน 4 เสนใหตอเนื่องกััน (หามยกมือ) โ านจุดทุกจุด โจทย ใ ื ื โดยผ
  6. 6. ลักษณะความคิด ลักษณะความคิดของมนุษยที่ใชในการดําเนินชีวิตและการสรางสรรคสิ่ง ตางๆ ในชีวิตของเรา สามารถแบงไดเปน ลกษณะคอ ตางๆ ในชวตของเรา สามารถแบงไดเปน 3 ลักษณะคือ • คิดแบบเปะ เปะ เปนความคิดที่มีกรอบ มีบรรทัดฐานชัดเจน • คิดแบบกะ กะ คดแบบกะ เปนความคิดเกิดจากการคาดเดา กะเกณฑ ประมาณการใน ชวตประจาวน ชีวิตประจําวัน • คิดแบบทางเลือก เปนความคิดที่จะไมถูก จํากัดแคหนึ่งหรือสอง แตอาจมี ไดหลายลักษณะหรือหลายรูปแบบ ู
  7. 7. ฿฿฿฿฿฿
  8. 8. Graphic Design Workflow Program Conceptual Case Preliminary Design Analysis Design Study Design วิิเคราะหโจทย สรางแนวคิิดหลัก ั ศึึกษากรณีศึกษา ี ออกแบบราง ออกแบบจริิง ของงานที่จะออกแบบ ที่มีอยูแลว
  9. 9. Graphic Design Workflow Program Analysis วิเคราะหโจทย ทีมีมาใหแกไข ่ What เราจะทํางานอะไร ? Where งานของเราจะนําไปใชที่ไหน ? Who ใ ปนคนที่ีมาใชงาน ? ใครเป ใ How จะทํางานชิ้นนี้อยางไร ? Conceptual Design p g สรางแนวคิดหลักของงานที่จะออกแบบ งานทดตองมแนวคด งานที่ดีตองมีแนวคิด
  10. 10. Graphic Design Workflow Case Study ศึกษากรณีศึกษาที่มีอยูแลว  วิเคราะหขอดี ขอเสีย ของงานที่มีอยูแลว เพื่อนํามาประยุุกตใชในงานของเรา ู Preliminary Design ออกแบบราง นําแนวคิดทีมีมาแปลงใหเปนแบบ ควรมีมากกวา 1 แบบ ่ Design ออกแบบจริง ออกแบบตามแบบที่เลือกไว
  11. 11. การสรางเว็บไซต Customer Approve Web/ Content Master Edit Design Design Mockup Web Designer HTML Copywriter D Dynamic i Programmer HTML
  12. 12. ทบทวนศัพทเกี่ยวกับ Website Web Page Web Site Home Page Z Splash Page p g
  13. 13. สถิติที่นาสนใจ
  14. 14. สถิติที่นาสนใจ
  15. 15. สถิติที่นาสนใจ
  16. 16. สถิติที่นาสนใจ
  17. 17. โปรแกรมทีใชงาน ่ 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
  18. 18. หลักในการออกแบบเว็บไซต Structure Design Interface Design การออกแบบโครสรางเวบไซต การออกแบบโครสรางเว็บไซต การออกแบบหนาตาเวบไซต การออกแบบหนาตาเว็บไซต
  19. 19. sitemap Structure Design การออกแบบโครสรางเว็บไซต
  20. 20. Sitemap ทีี่ดี Sit • ทุก Web Page จะตองมีลิงคทางออกเสมอ • ทุก Web Page ควรจะตองมีลิงคกลับไปยังหนา Home Page เสมอ • ถา Web Site ของเรามีจํานวนหนามากๆ ควรจะมี Web Page ททาหนาทเปน ที่ทําหนาที่เปน Site Map
  21. 21. I t f Interface Design D i การออกแบบหนาตาเว็บไซต ใชงานไดงายและสะดวก • มีระบบ Navigation นําทาง • เขาใจงายไมซับซอน สวยงามและสื่อความหมาย • สี • Layout • องคประกอบโดยรวม ไมโหลดนาน •ไมควรรอเกิน 7 วินาที ในการโหลดหนาแรก •ไฟลโดยรวมควรมีขนาดไมเกิน 300-400 Kbps bps อารมณเดียวกันทั้งเว็บ • theme เดียวกันทั้งเว็บไซต เดยวกนทงเวบไซต
  22. 22. Layout สิ่งพิมพ เว็บไซต เปนการนําองคประกอบตางๆที่เรามีอยู นํามาจัดวางลงไปในพื้นที่ทกําหนด ่ี
  23. 23. Layout เปนการนําองคประกอบตางๆที่เรามีอยู นํามาจัดวางลงไปในพื้นที่ทกําหนด ่ี จุดมุงหมายเดยวกน ี ั • นําเสนอขอมูลที่เรามีอยูใหกับผูชมไดอยางเหมาะสม • ผูชมสามารถรบขอมูลทเรานาเสนอไดสะดวก ั  ี่ ํ ไ 
  24. 24. รูปแบบ Layout ของเว็บไซต สามารถแบงออกได 3 รูปแบบ • Ice Layout • Jelly Layout • Liquid Layout
  25. 25. รูปแบบ Layout ของเว็บไซต Ice Layout พนททใชสาหรบแสดงขอมูลจะมการกาหนดขนาดไวตายตว และจะชิดอย านใด พื้นที่ที่ใชสําหรับแสดงขอมลจะมีการกําหนดขนาดไวตายตัว และจะชดอยูดานใด ดานหนึ่งของจอภาพ
  26. 26. รูปแบบ Layout ของเว็บไซต Ice Layout ขอดี สามารถควบคุมองคประกอบในสวนตางๆไดตามตองการ เชนขนาดของรูปภาพ ความกวางของ Layout ภาพที่จะนํามาเปนพื้นหลัง ขอเสีย ใชพื้นที่แสดงขอมูลไดไมเต็มศักยภาพ หนาเว็บไซตขาดความสมดุล เหมาะสําหรับ เว็บไซตที่ไมตองการนําเสนอขอมูลมากนัก แตเนนไปที่ความสวยงาม และความ แปลกใหม
  27. 27. รูปแบบ Layout ของเว็บไซต Ice Layout 800x600 1024x768 1280x800 www.daleharris.com
  28. 28. รูปแบบ Layout ของเว็บไซต Jelly Layout เหมอนกบแบบ เหมือนกับแบบ Ice Layout แตจะแตกตางกันตรงที่มีการแกไขปญหาเรื่อง แตจะแตกตางกนตรงทมการแกไขปญหาเรอง ความสมดุลของเว็บไซต โดย Layout จะวางอยูตรงกึ่งกลางหนาจอ
  29. 29. รูปแบบ Layout ของเว็บไซต Jelly Layout ขอดี สามารถควบคุมองคประกอบในสวนตางๆไดตามตองการ ใชเวลาในการสราง ไมมากนัก ขอเสีย ใชพื้นที่แสดงขอมูลไดไมเต็มศักยภาพ เหมาะสําหรับ เว็็บไซตท่วไปที่ตองการควบคุมองคประกอบตางๆไดงาย และใชเวลาในการ ั สรางไมนานนัก
  30. 30. รูปแบบ Layout ของเว็บไซต Jelly Layout 800x600 1024x768 1280x800 www.tag.in.th
  31. 31. รูปแบบ Layout ของเว็บไซต Liquid Layout เปนการออกแบบ L ป t ใ Layout เพืื่อการใชพ้ืนทีี่ในการแสดงขอมูลอยางคุมคา และ   มีความยืดหยุนในการใชงานมากที่สุด
  32. 32. รูปแบบ Layout ของเว็บไซต Liquid Layout ขอดี สามารถแสดงผลไดดีกับทุกๆ Resolution ขอเสีย ใชเวลาในการสรางมากและไมสามารถควบคุมองคประกอบของสวนตางๆได ตามที่ตองการทั้งหมด เหมาะสําหรับ เว็บไซตที่มีการนําเสนอขอมูลมากๆ และตองการใหผูใชสามารถเขาชม เว็บไซตไดหลากหลาย
  33. 33. รูปแบบ Layout ของเว็บไซต Liquid Layout 800x600 1024x768 1280x800 www.vivabit.com
  34. 34. รูปแบบภาพทีใชกับเว็บไซต ่ JPG เหมาะกับไฟลทุกประเภทที่เปนภาพนิงสามารถปรับขนาดไฟลไดตามใจชอบแตถาภาพมีสี ่ นอยๆ ขนาดไฟลจะใหญกวา GIF นิดหนอย ญ GIF เหมาะกับไฟลเกือบทุกประเภททีเ่ ปนภาพนิ่งและภาพเคลื่อนไหว และภาพที่มีพื้นโปรงใสได PNG สูญเสียจากการบีบอัดนอย ชวยใหเราไดภาพที่มีไซตขนาดเล็กลง แตคุณภาพไมลดลง
  35. 35. JPG GIF 28.3 KB 97.3 KB
  36. 36. JPG GIF 30.9 KB 55.6 KB
  37. 37. JPG GIF 14.0 KB 12.7 KB
  38. 38. JPG GIF 15.6 KB 11.7 KB
  39. 39. Transparency a spa e cy GIF PNG 36.4 KB 88.2 KB Binary Transparency Alpha Transparency
  40. 40. Web 2.0 การมสวนรวม การมีสวนรวม  ทุกคนเปนผูรวมสรางเนื้อหาในระหวางการบริโภคเนื้อหา เนื้อหาที่ผูใชเปนผูสราง (User Generated Content)
  41. 41. ตัวอยาง Web 2.0 flickr.com youtube.com delicious.com wikipedia.org hi5.com facebook.com twitter.com
  42. 42. ตัวอยาง Web 2.0 flickr.com youtube.com delicious.com wikipedia.org hi5.com facebook.com twitter.com
  43. 43. ตัวอยาง Web 2.0 flickr.com youtube.com delicious.com wikipedia.org hi5.com facebook.com twitter.com
  44. 44. ตัวอยาง Web 2.0 flickr.com youtube.com delicious.com wikipedia.org hi5.com facebook.com twitter.com
  45. 45. ตัวอยาง Web 2.0 flickr.com youtube.com delicious.com wikipedia.org hi5.com facebook.com twitter.com
  46. 46. ตัวอยาง Web 2.0 flickr.com youtube.com delicious.com wikipedia.org hi5.com facebook.com twitter.com
  47. 47. ตัวอยาง Web 2.0 flickr.com youtube.com delicious.com wikipedia.org hi5.com facebook.com twitter.com
  48. 48. ตัวอยาง Web 2.0 www.Go2Web20.net
  49. 49. Designer & Web 2.0 • ลักษณะเดนของ Web 2.0 • การแยกสวนของการแสดงผลออกจากเนื้อหาโดยการใชเทคนิค Tableless Layout Design
  50. 50. Color นิยมใชสีท่สดใส สวาง เชนสี น้าเงินสด สีชมพู สีเขียว ี ้ํ www.ajaxload.info
  51. 51. Color www.skype.com
  52. 52. Color www.curvycorners.net
  53. 53. Oversized เนนสิ่งที่ตองการแสดง โดยการทําใหสงเหลานั้นมีขนาดใหญกวาปกติ ่ิ www.flickr.com
  54. 54. Oversized www.rankforest.com
  55. 55. Wet table extensions.flock.com
  56. 56. Glass buttons www.popshops.com
  57. 57. Glass buttons dashwire.com
  58. 58. Glass buttons www.bigfilebox.com
  59. 59. Rounded Corners Rounded Corners www.schillmania.com
  60. 60. Rounded Corners www.webcredible.co.uk
  61. 61. Star burata
  62. 62. Star burata www.clockingit.com
  63. 63. Star burata www.mangolanguages.com
  64. 64. Free beanstalkapp.com
  65. 65. Free www.veetro.com
  66. 66. Free www.fullpix.tv
  67. 67. สรุป • ไ ตองยึดติิดกับรูปแบบดังกลาว ไม ึ ั ั  • เปนเพียงแคสมัยนิยม อนาคตเปลยนแปลงแนนอน เปนเพยงแคสมยนยม อนาคตเปลี่ยนแปลงแนนอน • ใชงานไดงาย และสะดวกดีที่สุด
  68. 68. Tableless Layout Design y g
  69. 69. การทําเว็บในอดีต(ของบางคน) การทาเวบในอดต(ของบางคน) • เปด Dream weaver เปด • Ctrl + N • คลิกทีปุมตารางเพื่อสรางLayout กําหนดความกวางของหนาเพจ ่ • ใ ดีไซน ทีี่หั่นไ เรีียบรอยแลวจาก Photoshop ใส ไว ู • ใสตารางเขาไปอีก ใสเนื้อหาลงไป กําหนดสี กําหนดรปแบบเนื้อหาลงไป • ไดเว็บเพจ ออกมา 1 หนา จบ.... แลวมปญหาอะไร แลวมีปญหาอะไร ????
  70. 70. การทําเว็บในอดีต(ของบางคน) การทาเวบในอดต(ของบางคน) • รูปแบบการแสดงผลตางๆถููกกําหนดลงไปในเนื้อหาเลย ู -หัวขอหลักเปนสีแดง ขนาดอักษร 38 -หัวขอหลักเปนสีเขียว ขนาดอักษร 38 -เนืื้อหายอยเปนสีีดํา ขนาดอัักษร 18 ป -เนืื้อหายอยเปนสีีเหลืือง ขนาดอักษร 18 ป ั
  71. 71. การทําเว็บในอดีต(ของบางคน) การทาเวบในอดต(ของบางคน) สรุปปญหา ุ • ไมสามารถแสดงผลไดอยางสมบูรณในอุปกรณตางๆ • เกิดความยุงยากเมื่อตองการแกไขรูปแบบการแสดงผล • ฯลฯ แลวจะแกไขอยางไร ????   ไ
  72. 72. Tableless Layout Design • เมื่อกอนการจัดวาง Layout ของเว็บไซตนิยมการใชงาน <table> ซึ่งอาจจะ เมอกอนการจดวาง ของเวบไซตนยมการใชงาน table ซงอาจจะ เปนการใชงาน tag HTML ที่ไมคอยจะถูกตองตามหนาที่มากนัก • เพราะวา <table> ควรจะถูกใชเมื่อตองการนําเสนอขอมูลที่เปนกลุมกอน มากกวา เชน การแสดงรายการสินคาของเว็บไซต มากกวา เชน การแสดงรายการสนคาของเวบไซต • เมื่อใชเทคนิคนีแลว จะเปนการแยกสวนของการแสดงผล และสวนเนื้อหาของ ้ จ ข ข เว็บไซตออกจากกันอยางสิ้นเชิง โดยการใชงาน eXtensible HyperText Markup Language (XHTML) และ Cascading Style Sheets (CSS)
  73. 73. 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
  74. 74. HTML, XML, XHTML, CSS & Tableless Layout Design , , , y g + = HTML XML XHTML CSS Tableless Layout Design XHTML+CSS
  75. 75. แยกสวนทเปนเนอหาออกจากสวนของการแสดงผล แยกสวนที่เปนเนื้อหาออกจากสวนของการแสดงผล
  76. 76. Tableless Layout Design • Tableless Layout Design / CSS Layout Design • การออกแบบ Layout โดยไมใช Table(ตาราง) y ( ) • ไมใชไมใหใช Table เลย แตใหใชใหถูกหนาที่ของมัน • XHTML + CSS • ใช <div> และ <span> ในการวาง Layout • ใช CSS ในการควบคมการแสดงผล ุ • เปนการออกแบบ Layout ที่แยกสวนของเนื้อหา ออกจากสวนแสดงผล
  77. 77. ตัวอยางการวาง Layout ดวยเทคนิค Tableless Layout Design ตวอยางการวาง ดวยเทคนค ขั้นที่ 1 เริ่มแรกดวยการออกแบบวาในเว็บไซตของเราจะมี Layout ทีประกอบไปดวยสวน ่ ตางๆอะไรบาง โดยตัวอยางนี้เราจะแบง Layout ออกเปน 4 สวนคือ header, left t i ht layout และfooter layout, right l l t f t
  78. 78. ขั้นทีี่ 2 เริ่มเขียน HTML โดยไดโคด HTML ดังนี้
  79. 79. ขั้นที่ 3 เขียน CSS เพือควบคุมลักษณะการแสดงผล ่
  80. 80. ขั้นที่ 4 นํา CSS มารวมกันในไฟล HTML
  81. 81. ศึกษาเพิ่มเติม ศกษาเพมเตม www.csszengarden.com www.oswd.org www.cssplay.co.uk thaicss.com www.divland.com
  82. 82. สรุป ุ • การออกแบบ La o t โดยไมใช Table(ตาราง) Layout โดยไมใช • ใช <di > และ < > ในการวาง L t และใช CSS ในการควบคมการแสดงผล ใช <div> <span> Layout และใช ในการควบคุมการแสดงผล • เปนการออกแบบ Layout ทีี่แยกสวนของเนืื้อหา ออกจากสวนแสดงผล ป
  83. 83. แหลงขอมูล 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
  84. 84. คาถาม? คําถาม?
  85. 85. จบการบรรยาย

×