ทุกสิ่งที่คุณต้องการรู้เกี่ยวกับการออกแบบภาพฮีโร่

เผยแพร่แล้ว: 2020-08-18

ทุกสิ่งที่คุณต้องการรู้เกี่ยวกับการออกแบบภาพฮีโร่

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

ทำไมคุณควรมีภาพฮีโร่?

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

สิ่งที่ควรรวมไว้ในการออกแบบภาพฮีโร่

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

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

แนวทางปฏิบัติที่ดีที่สุดสำหรับการสร้างอิมเมจฮีโร่

ใช้รูปภาพคุณภาพสูง

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

เมื่อพูดถึงความสูงและความกว้างของภาพฮีโร่ มันจะขึ้นอยู่กับเลย์เอาต์เฉพาะที่คุณมี บางทีคุณอาจต้องการให้ภาพฮีโร่ของคุณเต็มความกว้างของหน้า? ถ้าใช่ ให้ใช้ VW หรือ VH (ซึ่งหมายถึงความกว้างเต็มหรือความสูงของพื้นที่วิวพอร์ต)

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

ว่างเปล่า
เวลาในการโหลดภาพ

เมื่อคุณใช้รูปภาพคุณภาพสูง เวลาในการโหลดจะมีบทบาทสำคัญ เมื่อเวลาในการโหลดเพิ่มขึ้นจาก 0.4 เป็น 0.9 วินาที จะทำให้การรับส่งข้อมูลลดลง 20% ดังนั้นแนวทางปฏิบัติที่ดีที่สุดบางประการที่คุณควรปฏิบัติตามเพื่อหลีกเลี่ยงปัญหานี้ ได้แก่:

  • การปรับขนาดรูปภาพด้วยตัวเองและไม่ให้เบราว์เซอร์ทำโดยอัตโนมัติ
  • บีบอัดภาพที่คุณเลือกโดยใช้ Photoshop คุณยังสามารถใช้เครื่องมือบีบอัดสำหรับสิ่งนี้โดยเฉพาะ
  • ลองใช้ทั้งภาพ PNG และ JPG เพื่อดูว่าประเภทใดทำงานได้ดีที่สุดโดยไม่ต้องเพิ่มเวลาในการโหลด
สาธิตการอุทธรณ์

การออกแบบภาพฮีโร่ของคุณควรแสดงให้ผู้ชมเห็นว่าคุณกำลังขายอะไรตามที่เป็นอยู่ ตัวอย่างเช่น หากคุณต้องการขายร่มแบบกำหนดเอง คุณสามารถแสดงภาพคนกลางสายฝนได้โดยใช้ร่มเหล่านั้น

หากรูปภาพของคุณบ่งบอกถึงสโลแกนหรือบอกลูกค้าเกี่ยวกับการขาย ตรวจสอบให้แน่ใจว่ามีการใช้สำเนาเพียงเล็กน้อยเท่านั้น สิ่งสำคัญอีกประการที่ควรทราบคือคำบรรยายใต้ภาพของคุณจะถูกอ่านมากกว่าเนื้อหา 300% ดังนั้น ให้คุณมีแนวคิดว่าคำอธิบายภาพของคุณควรจะแม่นยำ เข้ากันได้ และตรงเป้าหมายเพียงใดกับภาพฮีโร่

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

ว่างเปล่า
รักษาความเกี่ยวข้อง

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

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

ว่างเปล่า

เพื่อรักษาความเกี่ยวข้อง คุณจะต้องพิจารณาสิ่งต่อไปนี้:

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

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

ว่างเปล่า

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

ว่างเปล่า
โชว์คนจริงไม่ใช่คน 'ตัวปลอม'

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

พิจารณาใช้ภาพประกอบที่ให้ความรู้สึกส่วนตัว

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

ว่างเปล่า

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

หากคุณต้องการมือในการออกแบบภาพลักษณ์ฮีโร่ของคุณ ทีม Kimp ที่ทุ่มเทพร้อมให้ความช่วยเหลือเสมอ

ภาพฮีโร่ที่ยอดเยี่ยมสำหรับแรงบันดาลใจ

เมื่อคุณรู้พื้นฐานแล้ว ต่อไปนี้คือตัวอย่างที่ยอดเยี่ยมของรูปภาพ Hero ที่ทำงานได้ดีจริงๆ

ภาพนี้ใช้แนวคิด 3 มิติ นอกจากนี้ยังมีพื้นหลังที่คมชัดและน่าดึงดูดพร้อมฟังก์ชั่นที่ยอดเยี่ยม

ว่างเปล่า

อย่างที่เราทุกคนทราบกันดีว่า Apple เป็นแบรนด์ที่เน้นการออกแบบ ด้วยเหตุนี้ จึงเหมาะสมอย่างยิ่งสำหรับพวกเขาในการแสดงผลิตภัณฑ์ของตนบนภาพฮีโร่ของพวกเขา - อย่างมีสไตล์

ว่างเปล่า

Spotify สร้างผลกระทบที่นี่ผ่านการใช้คอนทราสต์สีที่สวยงามซึ่งเล่นได้ดีเพื่อทำให้ข้อเสนอนั้นโดดเด่น นอกจากนี้ ผู้ใช้ยังสามารถเลื่อนดูภาพฮีโร่หลายภาพแทนภาพเดียวได้

ว่างเปล่า

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

ว่างเปล่า

เป็นฮีโร่และรับการออกแบบภาพฮีโร่ของคุณถูกต้อง

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

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