[ไลฟ์สดสอนทำเว็บครั้งที่ 2] เริ่มต้นออกแบบเว็บ ด้วย Seed UI Kit และ Adobe XD

วันอาทิตย์ที่ 18 สิงหาคม เวลา 16:00 – 1700 น. ทีมงาน SeedThemes ได้สอนทำเว็บโดยไลฟ์สดผ่านเฟซบุ๊ก เพจ SeedThemes นะครับ

ประเด็นของเนื้อหาที่จะพูดครั้งนี้

1. พื้นฐานการออกแบบ

การออกแบบ คือ การแก้ปัญหา ดังนั้น เราต้องหาให้ได้ว่า อะไรคือปัญหา หรือสาเหตุที่ทำให้เราต้องออกแบบ แล้วหลังจากนั้น ค่อยวางเป้าหมายและวิธีการ

เราไม่ได้ออกแบบเพื่อความสวยงามเพียงอย่างเดียว บางอย่างถ้าไม่ต้องสวย แต่แก้ปัญหา หรือตอบโจทย์ได้ดีกว่า เราก็ถือเป็นการออกแบบที่ดีเช่นกัน

ปัญหาหรือเป้าหมายของงานเว็บไซต์ส่วนใหญ่ก็คือ การทำให้ผู้ใช้ใช้งานได้ง่าย ได้ข้อมูลที่เค้าต้องการ ซึ่งจะทำให้เกิดการเชื่อมั่นในแบรนด์ และอาจเกี่ยวข้องกับการซื้อสินค้าและบริการ

การออกแบบ เหมือนการปรุงอาหาร นั่นคือ เราต้องรู้ก่อนว่าจะทำอะไรไปเพื่ออะไร แล้วเลือกและเตรียมวัตถุดิบที่เหมาะสม ซึ่งผมคิดว่า วัตถุดิบที่ต้องคำนึงอย่างน้อยก็คือ รูป / สี / ข้อความ

2. รูป – ชนิดของรูป และแหล่งโหลดรูป

  • รู้จักความแตกต่างของ Bitmap และ Vector
  • การเตรียมรูปภาพขั้นพื้นฐาน ปรับความคมชัด และตกแต่งบางจุด (ใช้ Photoshop หรือ Gimp แต่งภาพ)
    • Level
    • Hue/Saturation
    • Shadows/Highlights
  • ขนาดของรูปสำหรับเว็บส่วนใหญ่ กว้างหรือสูง 1,600 px ก็พอแล้ว
  • การเตรียมโลโก้และภาพเว็คเตอร์ (สามารถ Copy จาก Adobe Illustrator ได้, หากใช้โปรแกรมอื่น แนะนำให้ save เป็น svg เก็บไว้)

แหล่งรูปฟรี

  • Pixabay รูปเยอะมาก ทั้งรูปถ่ายและเวคเตอร์ ใช้งานเชิงพาณิชย์ฟรี
  • Icon Finder / Icon8 แหล่งโหลดไอคอน
  • Brands of the world แหล่งรวมโลโก้ของแบรนด์ต่างๆ ทั่วโลก
  • Unsplash แหล่งรวมรูปถ่ายสวย ออกแนวฮิปสเตอร์หน่อยๆ

แหล่งรูปเสียตังค์

  • Shutter Stock / iStockPhoto แหล่งรูปภาพราคาไม่แพงนัก
  • Getty Images แหล่งรูปภาพราคาแพง แต่สวยมาก หลายรูปมีข้อจำกัดการใช้งาน

3. สี – ความหมายและการใช้งาน

หากแบรนด์มีชุดสีอยู่แล้ว (ใน Coporate Identity : CI) ก็ควรใช้ตามที่กำหนดไว้ แต่หากยังไม่มี หรือต้องการสร้างหน้าย่อย/เปลี่ยนบรรยากาศ ก็ให้หาว่า จุดประสงค์ของสีคืออะไร

  • สีนั้นมีโทนร้อน เย็น และกลางๆ (ม่วง) ซึ่งมีความหมายย่อยๆ ตามหลักจิตวิทยา แนะนำให้อ่าน
  • การนำสีมาใช่ร่วมกัน ก็เหมือนเอาโน้ตดนตรีมาเล่นพร้อมกันเป็นคอร์ด มันทำให้อารมณ์ที่ได้มีความหลากหลายมากขึ้น แนะนำให้ดูวงล้อสีที่ color.adobe.com
    • สีที่มีระยะห่างของความถี่สม่ำเสมอ จะทำให้รู้สึกสอดประสานกลมกลืน
    • สีที่อยู่ฝั่งตรงข้ามของวงล้อสี จะทำให้รู้สึกขัดแย้ง มีพลัง รุนแรง
    • สีที่อยู่โทนเดียวกัน (คุมโทน) ก็จะมีอารมณ์แนวเดียวกัน รู้สึกสุภาพ เข้าชุด
  • แต่ในการทำงานจริง เราอาจเริ่มจาก “รูป” ที่ใช้ก็ได้ นั่นคือ สีที่เข้าชุดกับรูปมากที่สุด ก็คือสีที่ดึงมาจากรูปนั้นๆ นั่นเอง

แหล่งชุดสี

แนะนำให้อ่านบล็อก เลือกชุดสีไหนดี ให้เข้ากับที่มีอยู่? ก่อน

  • Coolors.co – สามารถเลือกสีที่เข้าชุดกับสีที่เราตั้งค่าไว้ได้
  • Dribbble.com/colors – ดูตัวอย่างงานออกแบบจากสีที่เราเลือก
  • uiGradients.com – ตัวอย่างการไล่สีสวยๆ

4. ข้อความ – การเลือกฟอนต์และจัดข้อความ

ภาษาอังกฤษนั้น จะแบ่งฟอนต์หลักๆ เป็น 2 แบบคือ

  • Serif (มีเชิง/ฐาน) – รู้สึกเก่าแก่ คลาสสิค
  • Sans Serif (ไม่มีเชิง) – รู้สึกทันสมัย ไม่รก

ในขณะที่ฟอนต์ไทยนั้น จะแบ่งเป็น

  • แบบมีหัว เช่นฟอนต์ Sarabun (สารบัญ) ที่เป็นตัวอ่านนี้
  • แบบไม่มีหัว เช่นฟอนต์ Maledpan (เมล็ดพันธุ์) ที่เป็นหัวข้อต่างๆ ในเว็บนี้

แต่ประเภทย่อยๆ แนะนำให้ดูตามลิงก์ด้านล่าง

แหล่งรวมฟอนต์

  • Dafont.com แหล่งรวมฟอนต์ภาษาอังกฤษ มีฟอนต์หลายประเภทให้เลือก และโหลดไปใช้ ส่วนใหญ่จะฟรี
  • Thaifaces.com แหล่งรูปฟอนต์ภาษาไทย ปรับปรุงทันสมัยกว่า f0nt.com (ที่เจ้าของหันไป เล่าเรื่องผี แทนทำฟอนต์ :D)
  • Google Fonts แหล่งฟอนต์ฟรีที่ใช้งานบนเว็บไซต์ได้ทันที จาก Google หลายๆ ฟอนต์จะมีเวอร์ชั่น Open Source ให้โหลดและศึกษาได้ฟรี

5. เลย์เอาท์ – การ “ปรุง” หรือนำเสนอเนื้อหา

  • การนำเสนอที่ดี ต้องมีสิ่งที่ให้คนเปรียบเทียบ เช่น พระเอก จะไม่เด่น ถ้าไม่มีพระรองมาช่วย หัวข้อต่างๆ ที่จะเด่น จึงควรมีคำโปรยมาเพิ่ม
  • การออกแบบเหมือนการปรุงอาหาร ถ้ามีวัตถุดิบที่ดี ก็ควรโชว์วัตถุดิบ (เช่น รูปสวยๆ หรือคำโปรยที่มีพลัง) แต่ถ้าวัตถุดิบไม่ดี ก็อาจใช้การปรุงมาเพิ่ม เพื่อกลบรสวัตถุดิบไป (เช่น รูปข่าวที่มักไม่สวย ไม่ละเอียด เราก็เอามาเฟดสี ย้อมสี สั่งเบลอ ฯลฯ)
  • ตัวอักษรต้องอ่านง่าย ฟอนต์ตัวอ่านขนาดมาตรฐานคือ 16px (ถ้าสั่งฟอนต์เล็กกว่านี้ในฟอร์มต่างๆ จะทำให้มือถือซูมหน้าเว็บ ซึ่งทำให้ใช้งานยากขึ้น)
    • ตัวอักษรบนภาพ แนะนำว่าไม่สีขาว ก็ ดำ สีอื่นๆ จะจัดการยาก
  • ที่ว่าง ไม่ใช่พื้นที่ไร้ประโยชน์ แต่เป็นการทำให้ชิ้นงานโดดเด่นขึ้น อย่ายัดทุกอย่างลงในที่ว่างอยู่
  • คนเรากวาดสายตาจากซ้ายไปขวาได้ไม่มากนัก การแบ่งเป็นคอลัมน์ขนาดเล็กจะทำให้เราอ่านง่ายขึ้น ขนาดความกว้างปัจจุบันของเนื้อหา 1 คอลัมน์ แนะนำให้ไม่เกิน 750px (เว็บ Medium ใช้ความกว้าง 680px)
  • ทำให้การวางหน้าเว็บเต็มความกว้าง ไม่ค่อยมีประโยชน์เท่าไหร่ (และคนใช้ Desktop ก็มักไม่เกิน 20% ด้วย) ปัจจุบัน Bootstrap Grid จะมีความกว้างของเนื้อหาสูงสุดแค่ 1,110px เท่านั้น (จากสมัยก่อนที่กว้าง 1170px, 1140px)
  • คนมีความอดทนในการดูข้อมูลน้อยลงเรื่อยๆ เราควรแบ่งเนื้อหาออกเป็น Section และแบ่ง Section ออกเป็น Card แบบต่างๆ

6. แนะนำ Adobe XD

  • สร้าง Artboard และลองใช้งานเครื่องมือต่างๆ
  • การใส่ข้อความ วัตถุและรูปภาพต่างๆ
  • การใช้งาน Repeat Grid
  • การใช้งาน Asset
  • การสร้าง Prototype

7. แนะนำ Seed UI Kit

8. ทดลองออกแบบเว็บไซต์จาก Seed UI Kit

  1. เริ่มต้นที่ Logo และ Sitemap (เมนูต่างๆ)
  2. แล้วคัดเลือก Content หรือเนื้อหาต่างๆ ที่ต้องการนำมาใช้ อย่าลืมปรับรูปหรือคำให้เรียบร้อยก่อน (เตรียมวัตถุดิบ) แล้วค่อยมาประกอบ (ปรุง)
  3. ออกแบบเวอร์ชั่นมือถือก่อน – สถิติปัจจุบันคน 80% เข้าเว็บจากมือถือ
  4. ออกแบบ Header และ Footer
  5. ออกแบบแต่ละหน้า สิ่งสำคัญคือ “เป้าหมายของหน้านี้ เอาไว้ทำอะไร?”
    1. Home – หน้าแรก
    2. Single Page – เช่นหน้าเกี่ยวกับเรา
    3. Single Post – หน้าบทความ
  6. เมื่อออกแบบหน้ามือถือเสร็จ ก็ออกแบบหน้าสำหรับจอคอมต่อไป

เกร็ดความรู้

  • เว็บข่าวหรือเว็บเนื้อหา (Content) นั้น คนไม่ได้เข้าหน้าแรกเยอะที่สุด อย่าคิดว่าหน้าแรกสำคัญสุด บางบทความอาจมีคนอ่านสูงกว่าหน้าแรกมากๆ ก็ได้ (ตัวอย่างของโปรแกรมเมอร์ก็เช่น – ใครเคยเข้าหน้าแรกของ Stack Overflow บ้าง? หรือหน้าเว็บข่าวอย่าง ไทยรัฐ , เวิร์คพอยต์ เข้าหน้าแรกครั้งล่าสุดเมื่อไหร่?)
  • เมื่อหน้าแรกไม่ได้สำคัญสุด และ คน 80% เข้าจากมือถือ แปลว่า เราไม่ควรเอาอะไรไปยัดหน้าแรกเยอะๆ เหมือนเว็บยุคก่อนแล้ว เพราะใส่ไปคนก็ไม่อ่าน ทำให้เว็บโหลดช้าเปล่าๆ
  • เว็บแต่ละประเภท ก็มีเป้าหมายต่างกัน
    • ธุรกิจเกิดใหม่ อาจต้องการความเชื่อถือ บทสัมภาษณ์ เรื่องราวความเป็นมา ก่อนจะรีบขายของ
    • ธุรกิจที่สินค้าเยอะ คนต้องการหาของ ซื้อของให้เร็วที่สุด
    • ธุรกิจที่คนเข้าเว็บเพราะอยากได้เบอร์โทรหรือแผนที่ ก็ควรทำให้เข้าถึงข้อมูลนั้นง่ายและรวดเร็ว
    • ฯลฯ
  • เนื้อหาที่ไม่แสดงทันที เช่น Slider / Carousel (แปลว่าม้าหมุน) / แท็บ / Accordion (แปลว่าหีบเพลง) – คนส่วนใหญ่มักไม่ดู ไม่กด มันจะกลายเป็นการโหลดที่เสียเปล่า คำแนะนำคือ ไม่ควรมี หรือมีให้น้อยที่สุด ตัวอย่างเว็บที่ไม่มี Slider เลย ก็คือ Apple
  • เมนูหลัก อย่ามีเยอะเกิน (ส่วนตัวผมคิดว่า ไม่ควรเกิน 7 เมนู) ทำให้คนอ่านเสียเวลากับการอ่านเมนูมากไป เว็บที่มีเนื้อหา 134,000,000 หน้าอย่าง Apple ยังสามารถจัดเมนูหลักเหลือ 7 เมนูได้นะ
  • การเริ่มออกแบบ ให้เริ่มจากเนื้อหาก่อน ที่เรียกว่า Content First ถ้าเราเริ่มจากดีไซน์แล้วใส่คำเปล่าๆ ไว้ (เช่น Lorem Ipsum) พอมีเนื้อหาจริงที่ไม่ตรงกัน มันจะทำให้ต้องออกแบบใหม่ แนะนำให้อ่านบล็อกนี้

หมายเหตุ: คำถามผ่านเฟซบุคอาจมีการตกหล่น แนะนำให้ติดต่อผ่าน อินบ๊อกซ์ หรือ เว็บบอร์ด นะครับ