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

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

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

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

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

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

1) วิชาการพิมพ์และแบบอักษร

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

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

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

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

ใช้แบบอักษร 2 ถึง 3 แบบ – หลักการออกแบบพื้นฐานที่ผ่านการทดสอบมาเป็นเวลาหลายทศวรรษคือการจำกัดจำนวนแบบอักษรที่คุณใช้ แบบอักษรมากเกินไปทำให้ผู้อ่านเสียสมาธิ มักจะทำให้ลำดับชั้นสับสนและตรงไปตรงมา จบลงด้วยการดูเหมือนนักบินชาวตะวันตกที่แสวงหารางวัลสำหรับคนนอกกฎหมาย ฉันมักจะใช้แบบอักษรเดียวสำหรับส่วนหัวและชื่อ จากนั้นมักใช้แบบอักษร sans-serif ที่อ่านได้ง่ายสำหรับข้อความในย่อหน้าทั้งหมดของฉัน บางครั้งฉันจะมีแบบอักษรแบบที่ 3 สำหรับเมนูหลัก แต่แบบอักษรของเมนูของฉันมักจะถูกปรับปรุงให้เข้ากับชื่อของฉัน

สำหรับแนวคิดเพิ่มเติมเกี่ยวกับวิธีการจับคู่ฟอนต์เข้าด้วยกัน โปรดดูโพสต์ก่อนหน้าเกี่ยวกับการจับคู่ฟอนต์ในการออกแบบเว็บ: หลักสำคัญ 7 ประการที่เปิดเผยและอธิบาย

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

หน้าแรกของ Elegant Themes เป็นตัวอย่างที่สมบูรณ์แบบสำหรับสิ่งนั้น

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

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

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

2) การจัดการภาพและสี

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

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

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

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

ในทางปฏิบัติ หากคุณไม่แน่ใจว่าจะเลือกสีบางสีอย่างไร ต่อไปนี้คือเครื่องมือเลือกสี 10 สี

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

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

3) คำกระตุ้นการตัดสินใจที่แข็งแกร่ง

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

ต่อไปนี้คือตัวอย่างวิธีที่ฉันใช้คำกระตุ้นการตัดสินใจสำหรับลูกค้าล่าสุด

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

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

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

• เกี่ยวกับเรา
• บริการ
• ข้อความรับรอง
• บล็อก
• ติดต่อ

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

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

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

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

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

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

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

สรุปซีรีส์

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

ส่วนที่ 1

• เตรียม Mindset ของคุณ
• วิธีการเรียนรู้แนวโน้มการออกแบบที่ดี
• รับคำติชมและคำติชมเชิงสร้างสรรค์เกี่ยวกับงานของคุณ

ตอนที่ 2

• ปฏิบัติตามกฎสามส่วน
• เลย์เอาต์และโฟลว์
• ลำดับชั้นภาพ

ตอนที่ 3

• วิชาการพิมพ์และแบบอักษร
• ภาพและสี
• คำกระตุ้นการตัดสินใจที่แข็งแกร่ง

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

พวกเราทุกคนกลายเป็น Divi Web Designer ที่ดีขึ้นทุกวัน!

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