hand tlhand crfog b
06Nov, 2020
Language blog :
Thai
Share blog : 
06 November, 2020
Thai

4 ไอเดียในการทำ Hero image ในเว็บไซต์ให้น่าสนใจ

By

4 mins read
4 ไอเดียในการทำ Hero image ในเว็บไซต์ให้น่าสนใจ

เมื่อเปิดหน้าแรกของเว็บไซต์ (Index) ขึ้นมา สิ่งแรกที่จะดึงดูดความสนใจของผู้เข้าชมได้มากที่สุดก็คงจะหนีไม่พ้นรูปภาพขนาดใหญ่ที่ตั้งอยู่กลางหน้าเพจ ซึ่งภาพส่วนนั้นเรียกว่า Hero image หรือพูดง่าย ๆ มันคือ ภาพ Banner ขนาดใหญ่ที่จะขยายไปตามความกว้างของหน้าเว็บไซต์ 

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

Hero Image

นอกจากนั้นเจ้าของเว็บไซต์สามารถเพิ่มลูกเล่นต่าง ๆ เข้าไปให้กับ Hero Image ได้โดยการเปลี่ยนรูปแบบ เช่น วิดีโอ ภาพเคลื่อนไหว tie in กับโปรโมชันต่าง ๆ เชื่อมต่อกับปุ่ม Call-to-Action (CTA) ให้ผู้ชมสามารถคลิก หรือกดเข้าไปเพื่อทำรายการตามจุดประสงค์ที่ตั้งไว้ได้ ดังนั้นบทความนี้จะรวบรวมไอเดีย และเทคนิคที่น่าสนใจเพื่อเป็นแนวทางในการสร้างเว็บไซต์ของคุณในอนาคต

Interactive carousel

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

Interactive carousel

(คอนเซ็ปต์เว็บไซต์ Adidas แบบ Carousel โดย Nathan Riley)

Hero background video

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

Hero background video

(เว็บไซต์ Adobe: www.adobe.com)

Product-first background

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

Product-first background

(เว็บไซต์ Apple ประเทศไทย : www.apple.com/th)

Graphics & illustrations

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

Graphics & illustrations

(เว็บไซต์ Airbnb : www.airbnb.com)

นอกจากนั้นเราจะสังเกตได้ว่า hero image ในรูปแบบต่าง ๆ ส่วนใหญ่จะมาพร้อมกับปุ่ม Call-to-Action (CTA) พร้อมให้ผู้เข้าชมคลิก หรือกดเข้าไป เพื่อดำเนินการตามวัตถุประสงค์ที่มุ่งหวังไว้ เช่น การสมัครสมาชิก การซื้อสินค้า ทดลองสินค้าฟรี (free trial) หรือการส่งต่อเนื้อหาไปหน้าอื่น ๆ ซึ่งในการออกแบบควรจะทำให้ปุ่มดูโดดเด่น สังเกตได้ง่าย

ติดตามอ่านบทความดี ๆ ที่น่าสนใจ ไม่ว่าจะเป็น Machine Learning, Startup, Design, Software Development และ Management ทาง Senna Labs Blog ได้ทุกวัน

Written by
Senna Labs
Senna Labs

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

11
October, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
11 October, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
หลายคนคงเคยเจอเหตุการต่างๆ บนโลกดิจิทัลที่สามารถนำพาเราไปเสียเงินหรือสมัครใช้บริการได้ง่าย ๆ ทั้งที่ไม่รู้ตัว ลองมาดูกันว่า พวกเขาเหล่านั้น ใช้วิธีหลอกล่อนักชอปอย่างเรากันอย่างไรบ้าง พื้นฐานของคนทั่วไปนั้นไม่อยากที่จะสูญเสียอะไรไป แม้แต่สิ่งที่อาจจะไม่จำเป็น เราอาจจะพบการทำการตลาดในเชิงนี้ได้บ่อย ๆ ทั้ง ๆ ที่เราไม่รู้ตัว และอาจจะไม่จำเป็นต้องซื้อแต่โดนกระตุ้นด้วยข้อมูลที่เรารับมาแบบงง ๆ เช่น Flash sale 40% สินค้าที่มีจำนวนจำกัด นั้นจะน่าสนใจมากกว่าการเดินเจอสินค้าเดียวกันในห้างที่ลดราคา 40% เช่นเดียวกัน ข้อความบนเว็บช็อปปิ้งที่ส่งมาหาคุณว่าสินค้าที่คุณเคยสนใจกำลังลดราคาอยู่ อย่าพลาดโอกาสที่จะซื้อตอนนี้ มักกระตุ้นความต้องการซื้อของเราได้เป็นอย่างดี เพราะเรากลัวที่จะเสียโอกาสดี

By

3 mins read
Thai
11
October, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
11 October, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
แต่ก่อน เวลาที่เว็บไซต์ถูกดีไซน์ด้วยฟอนต์แปลก ๆ หรือมีเอกลักษณ์เฉพาะตัว จะทำให้ผู้ใช้งานบางคนมองไม่เห็น เพราะในเครื่องของผู้ใช้งานไม่มีฟอนต์นั้น ระบบก็จะเลือกเอาฟอนต์อื่นในเครื่องขึ้นมาแสดงผล เห็นเป็นฟอนต์อื่นไป ทำให้ดีไซเนอร์ต้องแก้ปัญหาด้วยการทำรูปแล้วเอามาแปะในเว็บไซต์แทน หรือแม้ว่าจะแสดงผลตามที่ถูกออกแบบมา ความเร็วก็อาจเป็นปัญหาในการโหลดและเข้าถึง เพราะฟอนต์ถูกโหลดจากเซิร์ฟเวอร์ แต่สมัยนี้ไม่มีใครใจเย็นพอที่จะรออะไรนานๆ เพราะจากรายงานระบุว่า 40% ของคนที่เข้าเว็บไซต์ จะออกหรือปิดทันทีถ้ามีการโหลดนานกว่า 3 วินาที โดยเฉพาะนักช็อปออนไลน์เกือบครึ่งที่พร้อมจะหันหลังให้อีคอมเมิร์ซเว็บไซต์ที่โหลดช้ากว่า 2 วินาที และ 79% บอกว่ามีโอกาสที่จะไม่ใช้บริการอีก Google Fonts คืออะไร? (กันแน่) หลายคนคงรู้จัก Google Fonts แต่วันนี้เราจะพามาทำความรู้จักให้มากขึ้น

By

4 mins read
Thai
11
October, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
11 October, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
S&P Food’s yearly revenues were 435 mils $USD. 10% of the revenue was from online sales. The board of directors felt that online sales should account for more. The digital

By

4 mins read
English

Let’s build digital products that are
simply awesome !

We will get back to you within 24 hours!Go to contact us
Please tell us your ideas.
- Senna Labsmake it happy
Contact ball
Contact us bg 2
Contact us bg 4
Contact us bg 1
Ball leftBall rightBall leftBall right
Sennalabs gray logo28/11 Soi Ruamrudee, Lumphini, Pathumwan, Bangkok 10330+66 62 389 4599hello@sennalabs.com© 2022 Senna Labs Co., Ltd.All rights reserved.