Web design talk 2011

1,480 views

Published on

ออกแบบเว็บไซ้ต์ อย่างมีประสิทธิภาพ

Published in: Design

Web design talk 2011

  1. 1. การออกแบบเว็บไซต์ อย่างมีประสิทธิภาพ Web Design
  2. 2. โดย สาธิต เอี่ยมจิตต์ Assistant Web Design Manager Email : [email_address] Twitter : @ monozone
  3. 3. ขอสาวสวย หุ่นเหมือนในภาพ ช่วยออกมาเล่นเกมส์หน่อย
  4. 4. <ul><li>1. เพื่อให้ผู้เข้ารับการฝึกอบรม มีความเข้าใจ และสามารถอธิบายถึงหลักการออกแบบเว็บไซต์ได้อย่างถูกต้อง </li></ul><ul><li>2. เพื่อให้ผู้เข้ารับการฝึกอบรม มีเทคนิคในการออกแบบเว็บไซต์ ให้ก้าวทันโลกอินเตอร์เน็ตในปัจจุบัน </li></ul>วัตถุประสงค์
  5. 5. ทำ WEB เขาต้องใช้ใครบ้าง WEB Designer Programmer Network Contents Mkt. & Promote WEB Master
  6. 6. มีหน้าที่ <ul><li>สร้างความสะดวกในการใช้งาน </li></ul><ul><li>สร้างการสื่อสารอย่างมีประสิทธิภาพ </li></ul><ul><li>สร้างความประทับใจ </li></ul><ul><li>สร้างความได้เปรียบจากคู่แข่ง </li></ul>
  7. 7. สร้างความได้เปรียบ
  8. 8. เริ่ม ต้นยังไงดี
  9. 9. Research • User & Usability • Similar Sites • Guide Line, Case Study • Technology > html5 > Mobile • Trendy Design • Inspiration 1
  10. 10. Target Group กลุ่มเป้าหมาย เพศ อายุ การศึกษา รายได้ ที่อยู่ ความชอบ / ไม่ชอบ ประสบการณ์
  11. 11. Usability พฤติกรรมและสภาพแวดล้อมการใช้งาน
  12. 12. Usability พฤติกรรมการใช้งาน
  13. 13. CASE Study เรียนรู้คู่แข่ง SWOT Analysis
  14. 14. &quot; You either make dust or eat dust .&quot; ( via : H . Jackson Brown Jr .)
  15. 15. สร้างแรงบันดาลใจ <ul><li>ศึกษาตัวอย่าง </li></ul><ul><li>คิดตรงข้าม คิดต่าง </li></ul><ul><li>ลองทำให้มันเกินจริง </li></ul><ul><li>เขียน 101 ไอเดีย   </li></ul><ul><li>เปลี่ยนสถานที่ มองหาสิ่งรอบตัว </li></ul>สังเกต > สงสัย ตั้งคำถาม > ค้นหาคำตอบ “ ความเป็นไปได้ กับความเป็นไปไม่ได้ ถูกแบ่งด้วยเส้นบางๆ เพียงเส้นหนึ่ง ”
  16. 16. Guide Line ตัวอย่างเว็บ <ul><li>CSS Mania   </li></ul><ul><li>SmashingMagazine </li></ul><ul><li>Pattern Tap   </li></ul><ul><li>deviantART </li></ul><ul><li>Dark-i. </li></ul><ul><li>100 Great Resources for Design Inspiration </li></ul>
  17. 17. Web Design Trend 2011 <ul><li>Grid Intensive Layouts </li></ul>
  18. 18. Web Design Trend 2011 <ul><li>HTML5, CSS3, jQuery Sliders </li></ul>CSS3 example
  19. 19. Web Design Trend 2011 <ul><li>Texture & Big Background </li></ul>http :// www . duirwaigh . com /
  20. 20. Web Design Trend 2011 <ul><li>Video WEB </li></ul>Jay Jays Dance/Off
  21. 21. Web Design Trend 2011 <ul><li>MOBILE Site </li></ul>
  22. 22. Web Design Trend 2011 <ul><li>A Typographic Explosion </li></ul><ul><li>Desktop Application UI Influence </li></ul><ul><li>Grid Intensive Layouts </li></ul><ul><li>Massive Images </li></ul><ul><li>Texture & Big Background </li></ul><ul><li>Infographic Driven Designs </li></ul><ul><li>Single Page Sites </li></ul><ul><li>Mobile Sites </li></ul><ul><li>HTML5, CSS3, jQuery Sliders </li></ul><ul><li>3D Environments </li></ul><ul><li>Video WEB </li></ul><ul><li>WEB 3.0 </li></ul>
  23. 23. WEB 3.0 Web 1.0 = Read Only Web 2.0 = Read/Write Read / Write / Relate , data with structured metadata + managed identity
  24. 24. 2 Planning Design
  25. 25. Brainstorm & Mind Map
  26. 26. <ul><li>ตู้เย็น </li></ul><ul><li>ถุงเท้า </li></ul><ul><li>ตู้เสื้อผ้า </li></ul><ul><li>ห้องนั่งเล่น </li></ul><ul><li>พจนานุกรม </li></ul><ul><li>ห้องครัว </li></ul><ul><li>นมสด </li></ul><ul><li>ชั้นหนังสือ </li></ul><ul><li>ห้องนอน </li></ul>Structure ขนาดใหญ่ ห้องนั่งเล่น ห้องนอน ห้องครัว ขนาดกลาง ตู้เสื้อผ้า ชั้นหนังสือ ตู้เย็น ขนาดเล็ก พจนานุกรม นมสด ถุงเท้า ห้องครัว ตู้เย็น นมสด ห้องนั่งเล่น ชั้นหนังสือ พจนานุกรม ห้องนอน ตู้เสื้อผ้า ถุงเท้า
  27. 27. Site Map บ้าน ห้องครัว ห้องนั่งเล่น ห้องนอน ตู้เย็น นมสด ชั้นวางหนังสือ พจนานุกรม ตู้เสื้อผ้า ถุงเท้า
  28. 28. <ul><li>เล่นเกม </li></ul><ul><li>มองตำแหน่งไหนก่อน </li></ul><ul><li>จากไหน ไปไหน </li></ul><ul><li>รับของรางวัลจาก MThai </li></ul>
  29. 29. Lay Out <ul><li>ใช้เมื่อ </li></ul><ul><li>ต้องการสื่อสารข้อความหลัก </li></ul><ul><li>ใช้ภาพกับหัวข้อข่าวเพื่อดึงดูดความสนใจ </li></ul><ul><li>เพื่อเน้น SEO </li></ul>
  30. 30. Lay Out <ul><li>ช่วยให้ </li></ul><ul><li>สร้าง Branding </li></ul><ul><li>แสดงลำดับขั้น </li></ul><ul><li>ส่งเสริมการดำเนินการ </li></ul>
  31. 31. Sketch Design
  32. 32. Virtual Design 3
  33. 34. Grid Lay Out
  34. 35. Navigation Primary Secondary
  35. 36. Horizontal Navigation <ul><li>ข้อดี </li></ul><ul><li>เด่น เห็นได้ชัดเจน </li></ul><ul><li>ใช้พื้นที่น้อย </li></ul><ul><li>ง่ายต่อการใช้งาน </li></ul><ul><li>ส่วนใหญ่นิยมใช้กัน </li></ul><ul><li>ข้อจำกัด </li></ul><ul><li>พื้นที่จำกัด ถ้ามีหลายหน้าย่อย </li></ul><ul><li>จำนวนเมนูได้ไม่เยอะ </li></ul>
  36. 37. Vertical Navigation <ul><li>ข้อดี </li></ul><ul><li>ช่วยในการจัดกลุ่มเมนูได้ดี </li></ul><ul><li>ง่ายที่จะลดหรือเพิ่ม จำนวนเมนู </li></ul><ul><li>ข้อจำกัด </li></ul><ul><li>เสียพื้นที่ด้านซ้าย </li></ul><ul><li>ชื่อเมนู จำกัดด้วยความกว้าง </li></ul><ul><li>ต้องเลื่อนลง ถ้าจำนวนเมนูมาก </li></ul><ul><li>เดี๋ยวนี้ ไม่ค่อยนิยมใช้กัน </li></ul>
  37. 38. ออกแบบให้ ตรงกับเป้าหมาย และ ลักษณะของเว็บไซท์
  38. 39. ออกแบบสะท้อน ความเป็นเอกลักษณ์
  39. 40. การใช้ TEXT และ ข้อความ <ul><li>ใช้งาน Font ที่ได้มาตรฐาน </li></ul><ul><li>Dynamic>> Tahoma, MS-Sand serif </li></ul><ul><li>Graphic >> อ่านง่าย </li></ul>ขนาดและสี Font ใช้ให้เหมาะ Hyperlink >> สีแตกต่างจากตัวปกติ TEXT >> สีไม่ควรตัดกับสีพื้นหลังเกินไป T E X T >> ไม่ควรใช้สีเยอะเกินจำเป็น H1 >> หัวข้อหลัก H2 >> หัวข้อรอง H3 >> หัวข้อย่อย <ul><li>การใช้ข้อความ เพื่อสื่อสาร </li></ul><ul><li>กระจ่าง ชัดเจน </li></ul><ul><li>สั้น กระชับ เข้าใจง่าย </li></ul><ul><li>จัดลำดับความสำคัญ </li></ul><ul><li>เลือกใช้ภาษาให้เหมาะกับ User </li></ul><ul><li>ใช้ความเสมือนมีคนพูดอยู่หลังเว็บ </li></ul>
  40. 41. การใช้ Color สีและอารมณ์ http://colorschemedesigner.com
  41. 42. การใช้ Color สีและอารมณ์
  42. 43. การใช้กราฟิก Image JPG Gif JPG Gif
  43. 44. การใช้กราฟิก Image PNG PNG Gif ไม่รองรับ IE6
  44. 45. การใช้ Icon ๐ ข่าว ๐ บันเทิง ๐ ดูดวง ๐ เรื่องเด่น ๐ กิน เที่ยว ๐ เทคโน ๐ ผู้หญิง ๐ ผู้ชาย
  45. 46. ออกแบบเพื่อ SEO <ul><li>NOT>> Splash Page </li></ul><ul><li>NOT>> Flash-Picture menu </li></ul><ul><li>NOT>> table style </li></ul>OK>> Picture ใส่ Alt OK>> ใช้ Dynamic Text Hyperlink OK>> div, css OK>> ใช้ H1,H2,H3 อย่างถูกต้อง
  46. 47. Sending to Programmer 4
  47. 48. QC & Testing 5 FiveSecondTest   1 . ดูว่าตามองที่ไหนเป็นที่แรก ? 2 . อ่านเว็บไซด์จาก ซ้ายบน - > ขวาล่าง 3 . ทริค “ 5 อย่าง ” ดู 5 วินาทีแล้วจำอะไรได้บ้าง
  48. 49. <ul><li>เล่นเกม </li></ul><ul><li>จำสิ่งที่เห็นบนหน้าเว็บ </li></ul><ul><li>ให้เวลา 10 วินาที </li></ul><ul><li>จำให้ได้ 5 อย่าง </li></ul>
  49. 51. <ul><li>เห็น </li></ul><ul><li>และจำอะไรได้บ้าง </li></ul><ul><li>ใครจำได้ 5 อย่าง </li></ul><ul><li>รับของรางวัลจาก MThai </li></ul>
  50. 52. สรุป <ul><li>คิดวางแผนก่อนทำงาน </li></ul><ul><li>ศึกษาตัวอย่าง , คู่แข่ง อยู่เสมอ </li></ul><ul><li>สร้างแรงบันดาลใจ </li></ul><ul><li>การใช้งานสะดวก เข้าใจง่าย </li></ul><ul><li>เลือกใช้ Technology ให้เหมาะสม </li></ul>
  51. 53. <ul><li>ขอบคุณครับ </li></ul>

×