6 เทรนด์การออกแบบเว็บที่เปลี่ยนโฉมหน้าการตลาด

เหตุการณ์สำคัญมากมายเกิดขึ้นในปี 2553

อาคารที่สูงที่สุดในโลกเปิดอย่างเป็นทางการในดูไบ Space X ประสบความสำเร็จในการเปิดตัว Dragon Capsule, Apple เปิดตัว iPad และ Ethan Marcotte สร้างการออกแบบเว็บที่ตอบสนองได้ดี

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

การออกแบบเว็บตอนนี้เน้นที่การใช้งานและประสบการณ์ของผู้ใช้ และทำไมถึงไม่เป็นเช่นนั้นในเมื่อผู้คน 46.1% มองว่าการออกแบบเป็นเกณฑ์อันดับต้นๆ ในการพิจารณาความน่าเชื่อถือของธุรกิจ

การออกแบบหน้า Landing Page หลังคลิกใช้พลังเดียวกัน อันที่จริง Numara Software สามารถปรับปรุงอัตราการแปลงแบบฟอร์มได้มากถึง 133% เพียงแค่เปลี่ยนแบบอักษรของหน้า

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

ในอดีต เราได้พูดถึงแนวโน้มหน้า Landing Page หลังการคลิกที่กำลังมาแรงในปี 2018 วันนี้เราจะมาดูแนวโน้มการออกแบบเว็บที่จะช่วยเพิ่มอัตราการแปลงของคุณในปี 2019

1. รูปแบบการ์ด

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

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

หน้าแรกของ Essentials ใช้เลย์เอาต์ของหน้าที่อิงการ์ดเพื่อแสดงภาพที่รวบรวมโดยกลุ่มครีเอทีฟโฆษณาระดับโลก:

2. หน้าเลื่อนยาว

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

การปฏิบัตินั้นตายแล้ว หน้าเว็บ "สั้น" ที่มีข้อมูลสำคัญทั้งหมดครึ่งหน้าบนไม่ถือว่าเป็นบรรทัดฐานสำหรับอัตราการแปลงที่สูงขึ้นอีกต่อไป ผู้ใช้เว็บในปัจจุบันคาดหวังที่จะเลื่อนดู พวกเขาต้องการข้อมูลเพิ่มเติม ไม่ว่าจะอยู่ในรูปแบบของโพสต์บล็อก 10x หรือหน้า Landing Page หลังการคลิกแบบเลื่อนยาว

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

หน้าเว็บหรือหน้า Landing Page หลังการคลิกที่ต้องการให้ผู้ใช้เลื่อนดูข้อเสนอของคุณช่วยคลายข้อสงสัยและเปิดโอกาสให้คุณบอกเล่าเรื่องราวที่มีรายละเอียดมากขึ้น

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

นี่คือสิ่งที่ Mugs ทำกับเพจ:

3. การออกแบบตัวอักษรที่น่าทึ่ง

การเข้าถึงความละเอียดของอุปกรณ์ที่ดีขึ้น ความเร็วอินเทอร์เน็ตที่เร็วขึ้น และแบบอักษรสร้างสรรค์ทั้งหมด (ต้องขอบคุณ Google Fonts และ Adobe Typekit) ทำให้การพิมพ์ที่ยอดเยี่ยมบนหน้าเว็บและหน้า Landing Page หลังคลิกเป็นการเปลี่ยนแปลงอย่างเป็นธรรมชาติ การออกแบบตัวอักษรที่น่าทึ่งช่วยให้คุณสร้างเอกลักษณ์ของแบรนด์และเปิดโอกาสให้คุณปรับปรุงประสบการณ์เนื้อหาสำหรับผู้เยี่ยมชมของคุณ

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

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

ตัวอย่างเช่น Outbrain ใช้แบบอักษรขนาดใหญ่บนหน้า Landing Page หลังการคลิก ซึ่งจะดึงดูดความสนใจทันทีที่คุณมาถึงหน้า:

4. การโต้ตอบแบบไมโคร

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

การโต้ตอบเล็กๆ น้อยๆ เหล่านี้ช่วยให้ผู้เข้าชมเห็นภาพผลลัพธ์ของการกระทำ เช่น นี้จาก Nike:

การโต้ตอบแบบไมโครยังสามารถช่วยให้ผู้เข้าชมเข้าใจเลย์เอาต์ที่ไม่ได้มาตรฐาน เช่น หน้าจอแยกแนวตั้ง หรือเลย์เอาต์ตามการ์ด และกระตุ้นให้ผู้เข้าชมคลิกคำกระตุ้นการตัดสินใจ:

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

5. การปิดกั้นสี

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

นี่คือสิ่งที่หน้าแรกของ Wrist ทำ:

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

เพื่อแสดงให้เห็น หน้าแรกของ Barn + Co ใช้การบล็อกสีและสถานะโฮเวอร์พร้อมกัน:

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

6. การใช้หน้าจอเป็นเพจ

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

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

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

Google App ใช้หน้าจอเป็นหน้า:

คุณสามารถสลับระหว่างหน้าจอจากส่วนหัวการนำทาง เลื่อนด้วยเมาส์ หรือโดยใช้ปุ่มลูกศร

พลิกโฉมหน้าล้อเลื่อนโดยใช้หน้าจอของคุณเป็นหน้า

รูปแบบการออกแบบเว็บใดที่เหมาะกับแบรนด์ของคุณมากที่สุด

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

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

แนวโน้มการออกแบบใดที่คุณคิดว่าเหมาะกับหน้าเว็บของคุณมากที่สุด กรุณาแสดงความคิดเห็นด้านล่างและแจ้งให้เราทราบ

ยังไม่ได้เริ่มสร้างหน้า Landing Page หลังคลิกใช่ไหม ออกแบบหน้า Landing Page คุณภาพสูงหลังการคลิก ลงทะเบียนสำหรับการสาธิต Enterprise วันนี้