วิธีการปรับปรุงการออกแบบเว็บไซต์ของคุณ? อธิบายด้วยตัวอย่างเชิงปฏิบัติ

เผยแพร่แล้ว: 2018-01-10

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

ง่าย ๆ เข้าไว้

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

Victor-themes-heat-map

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

พื้นที่สีขาวคือเทรนด์

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

brixey

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

bamf

รักษาแนวทางที่เรียบง่าย

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

kinsta-web-design

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

อย่าเพิ่งพูดว่าบรรยายว่าคุณเป็นใคร!

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

กบร้องไห้

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

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

ตอบสนองมือถือ แน่นอน! แต่แอมป์?

การตอบสนองบนมือถือนั้นเกือบจะเป็นตัวเลือกเริ่มต้นที่คุณจะได้รับแม้ในธีม WordPress ฟรี ในธีมพรีเมียม คุณจะได้รับตัวเลือกการปรับแต่งเพิ่มเติม ฉันได้สร้างรายการปลั๊กอินที่ช่วยให้คุณสร้างไซต์เวอร์ชันมือถือที่สวยงาม
แต่ถ้าคุณสงสัยว่าคุณควรใช้ AMP สำหรับเว็บไซต์ของคุณหรือไม่ คำตอบคืออยู่กับคุณ หากการรับส่งข้อมูลส่วนใหญ่ของคุณมาจากอุปกรณ์พกพา เป็นการดีกว่าที่จะเลือกใช้ AMP เนื่องจาก Google ได้ทดสอบดัชนี Mobile First อย่างเงียบๆ และผลักดันหน้า AMP ในการค้นหาบนมือถือและในการค้นหาด้วยเสียงของ Ok Google ก็ควรที่จะนำ AMP ไปใช้ ฉันยังได้สร้างบทความพิเศษเกี่ยวกับวิธีการสร้างหน้า AMP โปรดดูที่หน้าดังกล่าวเพื่อทำความเข้าใจ

การออกแบบร่วมสมัยหรือหรูหรา

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

gap-logo-ออกแบบใหม่

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

ไม่เคยชำระ

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

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