วิธีใช้งาน Hero images เทรนด์เก่าแต่ยังมาแรงในปี 2017

Update

Hero images

คือเทคนิคที่นักออกแบบเว็บไซต์ใช้งานกันมาระยะหนึ่ง (หลายปี) แต่ยังเป็นเทรนด์ที่ยังมาแรงในปี 2017 เพราะว่าการที่เราใช้ภาพแบบ Full-width (ภาพกว้างเต็มหน้าจอ) เป็นเทรนด์ที่นิยมใช้อย่างมากในช่วงเวลาที่ผ่านมา ภาพเพียงหนึ่งภาพสามารถบอกเล่าอะไรได้อย่างมากมาย วันนี้เราจะมาแนะนำวิธีใช้งาน Hero images แบบที่นักออกแบบมืออาชีพใช้งานกัน

Credits www.shopify.com

เทคนิคนี้เหมาะกับ

  • ภาพช่วยสร้าง engagement กับผู้ใช้งาน เช่น ใช้ภาพสินค้าเพื่อให้ผู้ใช้งานได้รู้จักในตัวสินค้า หรือใช้ภาพที่บอกเล่าเรื่องราวของบริษัทเพื่อให้ผู้ใช้งานรับรู้ถึงวิธีการทำงาน
  • ช่วยสร้างพื้นที่ว่าง (white space) ให้กับงานออกแบบเพื่อให้มีพื้นที่ในการวางข้อความหรือปุ่ม Call to action
  • ออกแบบให้รองรับ responsive design ได้ง่าย

 

เทคนิคการใช้งาน Hero images

คุมโทนของภาพ

วิธีที่ช่วยให้เว็บไซต์ของเราเป็นไปในรูปแบบเดียวกันคือต้องมีจุดเชื่อมโยงกันระหว่างภาพและองค์ประกอบอื่นๆ เช่น สี ตัวอักษร หรือแม้แต่ภาพที่ใช้งาน

Credits www.shopify.com

จัดวางสมดุลและองค์ประกอบให้ดี

ข้อควรระวังสำหรับเทคนิค Hero images คงเป็นการเลือกภาพและวิธีการจัดวางสมดุลของภาพไม่ให้ดูหนักหรือเอียงไปในทางใดทางหนึ่ง ควรคิดก่อนว่าในส่วนของ Hero images เราจะมีองค์ประกอบอะไรบ้างเช่น มีข้อความมากน้อยแค่ไหน  มีปุ่ม Call to action บ้างหรือไม่ ตัวอย่างด้านล่างเป็นการจัดวางภาพให้มีพื้นที่ด้านซ้ายมือ เพื่อให้มีที่วางสำหรับองค์ประกอบอื่นๆ (แต่ลองนึกภาพถ้าไม่มีข้อความหรือองค์ประกอบต่างๆ อาจทำให้ภาพรู้สึกหนักไปทางด้านขวาได้)

Credits www.shopify.com

ภาพต้องคมชัด

เพราะ Hero images ใช้พื้นที่บทหน้าจอเกือบ 100% ของพื้นที่ทั้งหมด เมื่อภาพคุณแตกหรือไม่ชัดทุกอย่างจะจบลงทันที ความสวยงาม ความเป็นมืออาชีพจะหายไปหมด

Credits www.shopify.com

ภาพที่ดีควรใช้งานได้

ภาพที่ใช้งานได้คืออะไร? ภาพที่ดีควรสื่อความหมายของสิ่งที่เราต้องการจะสื่อ ภาพที่ดีช่วยในเรื่องของ User Experience (UX) ได้ ภาพที่ดีจะต้องบอกเล่าเรื่องราวของภาพออกมาให้ผู้ใช้งานได้เข้าใจและจดจำ บางทีภาพที่สวยอาจจะไม่ใช่ภาพที่บอกเล่าเรื่องราวออกมาได้ดี หรือบางทีภาพที่บอกเล่าเรื่องราวออกมาได้ดีอาจจะไม่สวย เพราะฉะนั้นสิ่งที่คุณต้องทำคือ “หาภาพที่ดีและสวย”

ตัวอย่างด้านล่าง ภาพสามารถสื่อสารได้ทันทีโดยมีข้อความช่วยเพียงเล็กน้อย

Credits www.shopify.com

ข้อมูลจาก www.shopify.com

เรียบเรียงโดย Grappik.com