3 หลักการออกแบบเว็บที่มีประสิทธิภาพสำหรับ “ผู้ที่ไม่ใช่นักออกแบบ”

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

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

มาเริ่มกันเลยดีกว่า!

3 หลักการออกแบบเว็บที่มีประสิทธิภาพสำหรับ “ผู้ที่ไม่ใช่นักออกแบบ”

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

1) กฎสามส่วน

แนวทางปฏิบัติที่พบบ่อยที่สุดอย่างหนึ่งในการออกแบบเว็บ การออกแบบกราฟิก การออกแบบการพิมพ์ การถ่ายภาพ และสื่อสร้างสรรค์อื่นๆ คือการปฏิบัติตามกฎง่ายๆ หนึ่งข้อ – กฎสามส่วน กล่าวโดยย่อ กฎสามส่วนคือทั้งหมดที่เกี่ยวกับความสมมาตรและความสมดุล วัตถุประสงค์ของกฎสามส่วนมีขึ้นเพื่อช่วยให้คุณบรรลุความสมดุลและความกลมกลืนในการออกแบบมากขึ้น และส่วนที่ดีที่สุดคือ – คุณสามารถใช้กฎสามส่วนกับกราฟิก รูปภาพ เค้าโครงหน้าเว็บทั้งหมด และอีกมากมาย!

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

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

ด้วยตารางจินตภาพบนรูปภาพ กราฟิก หรือเลย์เอาต์ของคุณ คุณสามารถวางเนื้อหาไว้ใกล้กับจุดตัดหลักอย่างน้อยหนึ่งจุด

การรักษาวัตถุและจุดโฟกัสไว้ที่จุดตัดกันตั้งแต่ 1 จุดขึ้นไปจาก 4 จุด มักจะได้รูปลักษณ์ที่สมดุลและสมมาตรมากกว่าตัวอย่างที่สองซึ่งตัวแบบอยู่ต่ำกว่าจุดตัดกัน ลองดูที่ภาพด้านล่าง ตัวอย่างแรกไม่เป็นไปตามกฎสามส่วน

ตัวอย่างนี้เป็นไปตามกฎสามส่วน

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

ทีนี้ลองดูที่ภาพโดยไม่วางกฎของจุดตัดที่สาม

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

ตอนนี้ มาใส่กฎสามส่วนบนส่วนหลักและดูว่าหน้าตาเป็นอย่างไร ในกรณีนี้ ฉันจะเน้นที่เนื้อหาด้านล่างเมนูหลักที่ฉันใช้กฎสามส่วน

ในตัวอย่างนี้ มี 4 องค์ประกอบหลักที่อยู่บนหรือใกล้กับจุดตัดกัน ในระยะสั้นฉันต้องการเน้นต่อไปนี้:

1. คำอธิบายสั้น ๆ ว่าฉันเป็นใครและไซต์นี้เกี่ยวกับอะไร
2. ภาพที่ช่วยให้ผู้ใช้รายใหม่รู้สึกสบายใจและเชื่อถือได้มากขึ้นเมื่อเห็นว่าพวกเขาจะได้ยินจากใคร
3. กราฟิกของ e-book ล่าสุดของฉันทำให้ผู้คนมีเหตุผลในการสมัคร
4. สุดท้าย อีเมลคำกระตุ้นการตัดสินใจลงทะเบียนใน 2 เฟรมสุดท้าย ซึ่งเป็นที่ที่ผู้ใช้จะมองเห็น

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

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

2) เลย์เอาต์และโฟลว์

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

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

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

ลองมาดูว่าฉันหมายถึงอะไร

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

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

3) ลำดับชั้นภาพ

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

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

นี่คือตัวอย่างการออกแบบล่าสุดที่ฉันสร้างขึ้นโดยคำนึงถึงลำดับชั้น:

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

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

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

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

ในการปิด

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

หากคุณมีหลักการออกแบบอื่นๆ ที่คุณต้องการแบ่งปัน โปรดแจ้งให้เราทราบในความคิดเห็นด้านล่าง!

พรุ่งนี้: 3 ส่วนสำคัญของการออกแบบที่มุ่งเน้นสำหรับทุกการสร้างเว็บไซต์

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

อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้ไม่พลาดประกาศสำคัญ เคล็ดลับที่เป็นประโยชน์ หรือ Divi freebie!