April 26, 2024 | IN TIPS

7

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

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

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


กฎ 10 ข้อสำหรับการออกแบบเค้าโครงเว็บไซต์ที่ใช้งานได้

8

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

Rule #1: Avoid Clutter

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

9

Rule #2: Prioritize your design above the fold.


“Fold” หมายถึงขอบด้านล่างของเบราว์เซอร์* เนื้อหาใด ๆ ที่อยู่ครึ่งหน้าล่างสามารถเข้าถึงได้โดยการเลื่อนเท่านั้น ซึ่งหมายความว่าผู้ใช้จำเป็นต้องถูกบังคับให้ทำเช่นนั้นตั้งแต่แรก! วางเนื้อหาและข้อมูลสำคัญไว้เหนือบรรทัดนี้เสมอ

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

Rule #3: Keep in mind the Higgs’ law.


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

Rule #4: Encourage scrolling, not clicks.


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

เหนือสิ่งอื่นใด การเลื่อนจะขี้เกียจกว่าการคลิก ซึ่งหมายความว่าผู้ใช้จะอยู่บนเว็บไซต์ได้นานขึ้น การศึกษา Crazy Egg เมื่อเร็ว ๆ นี้พิสูจน์ให้เห็นแล้วว่าอัตรา Conversion เพิ่มขึ้น 36% โดยการเปลี่ยนจากการคลิกเป็นการเลื่อน

Rule 5: Keep your photos realistic and natural.


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

10

Rule #6: Use Visual Cues


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

Rule #7: Type Should Be Legible First, Stylish Second


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

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

11

Rule #8: Color Is Psychological


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

Rule #9: Design for Mobile First


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

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

12

Rule #10: Design for Everyone


องค์การอนามัยโลก (WHO) ระบุว่าผู้คนอย่างน้อย 2.2 พันล้านคนทั่วโลกมีความบกพร่องทางการมองเห็นหรือตาบอด ซึ่งหมายความว่า 28.5% ของประชากรโลกมีความบกพร่องทางการมองเห็นบางรูปแบบ การปรับปรุงคอนทราสต์ของสีบนเลย์เอาต์ของคุณ เช่น การจับคู่ข้อความสีดำกับพื้นหลังสีขาว และการเลือกใช้ฟอนต์ sans-serif ขนาดใหญ่เป็นสองวิธีง่ายๆ ที่จะช่วยทำให้การออกแบบไซต์ของคุณเข้าถึงได้และครอบคลุมมากที่สุด