หลักการออกแบบเว็บไซต์ขั้นพื้นฐาน

เผยแพร่แล้ว: 2021-08-19

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

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

บทความนี้ครอบคลุม:

ลำดับชั้นภาพ
เค้าโครง Gutenberg, Z และ F
อัตราส่วนทองคำ
กฎสามส่วน
ทฤษฎีสี
ทฤษฎีเกสตัลต์
พื้นที่เชิงลบและความเรียบง่าย
การออกแบบที่ปรับให้เหมาะกับมือถือ

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

พร้อมที่จะทำธุรกิจมากขึ้นด้วยการตลาดผ่านอีเมลแล้วหรือยัง

เรียนรู้เพิ่มเติม.

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

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

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

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

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

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

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

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

เค้าโครง Gutenberg, Z และ F

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

เลย์เอาต์ที่ใช้กันมากที่สุดสามแบบ ได้แก่ เลย์เอาต์ Gutenberg, เลย์เอาต์ Z และเลย์เอาต์ F แต่ละคนใช้หลักการออกแบบเว็บไซต์ที่แตกต่างกัน

เค้าโครง Gutenberg

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

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

เค้าโครง Z

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

โปรแกรมดูจะสแกนในแนวนอน (ซ้ายไปขวา) ที่ด้านบนของหน้า ตัดในแนวทแยงมุมจากด้านขวาบนไปด้านซ้ายล่าง จากนั้นเลื่อนตามแนวนอนไปทางขวาล่าง

ในเลย์เอาต์ Z คุณวางวัสดุไว้ที่มุมทั้งสี่แต่ละมุมและตรงกลางของแนวทแยง

ตัวอย่างหลักการออกแบบเว็บไซต์ - Z layout — หน้าแรกของเว็บไซต์ Extra Shot Coffee House ใช้โครงสร้าง Z แบบหลวม นอกจากนี้ยังแสดงตัวอย่างที่ดีของโทนสีเดียวที่ใช้ได้ดี เฉดสีน้ำตาลทำให้ไซต์ดูกลมกล่อมแต่ยังคงความมีชีวิตชีวา

เค้าโครงF

เลย์เอาต์ F ทำงานได้ดีกว่าเมื่อคุณต้องการรวมทุกอย่างมากขึ้น — มากขึ้นทุกอย่าง แต่โดยเฉพาะอย่างยิ่งข้อความมากขึ้น

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

ตัวอย่างหลักการออกแบบเว็บไซต์ - F Layout — Mr. Jay's Car Wash เริ่มต้นด้วยตัว Z เล็กน้อย แต่จะตกลงไปที่เลย์เอาต์ F อย่างรวดเร็ว สังเกตว่าข้อความสุดท้ายถูกวางไว้ที่ด้านล่างซ้ายแทนที่จะเป็นมุมล่างขวาอย่างไร (เช่นเดียวกับในเค้าโครง Gutenberg หรือ Z)

อัตราส่วนทองคำ

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

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

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

หากคุณมีพื้นที่ทั้งหมด X และต้องการทราบว่าครึ่งที่ใหญ่กว่าของคุณควรขนาดไหน ก็แค่หาร X ด้วย 1.618 ง่าย สบาย.

เคล็ดลับด่วน: หากคุณกำลังพยายามคิดว่ารูปภาพมีขนาดใหญ่เพียงใด คุณสามารถคลิกขวา (Windows) หรือคลิกควบคุม (Mac) ที่รูปภาพนั้นแล้วเลือก "ตรวจสอบ" ทางด้านขวาของหน้า คุณสามารถดูข้อมูลมากมายเกี่ยวกับรูปภาพ รวมทั้งขนาดเป็นพิกเซลภายใต้ "คำนวณ"

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

กฎสามส่วน

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

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

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

ตัวอย่างหลักการออกแบบเว็บไซต์ - Rule of Thirds — ภาพนี้บนหน้าแรกของ Davidson Real Estate เป็นไปตามกฎสามส่วน เส้นและจุดสนใจจะสอดคล้องกับตารางที่ซ้อนทับ

ทฤษฎีสี

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

สำหรับภาพรวมของมือใหม่ คุณอาจต้องการใช้วงล้อสี

ตัวอย่างสี Pantone เป็นวงกลม — มีหลายวิธีในการพัฒนาชุดสีตามวงล้อสี ภาพโดย: Annie Spratt ผ่าน unsplash.com

ต่อไปนี้คือสี่วิธีในการเลือกสีของแบรนด์และเว็บไซต์ที่กลมกลืนกัน:

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

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

สกรีนช็อตของเว็บไซต์ JJ's Kitchen ที่ใช้หลักการออกแบบเว็บไซต์ - ทฤษฎีสี — JJ's Kitchen ใช้สีน้ำเงินที่สวยงามและผ่อนคลายทั่วทั้งเว็บไซต์ แต่มันคือ "ภาพฮีโร่" ที่ใช้ทฤษฎีสีได้ดีที่สุด จุดโฟกัสสองจุดของมันคือสีสันที่ปรากฏอยู่ในใบไม้สีเขียวและในเหยือกสีเหลือง เฉดสีเข้ากับสีน้ำเงินอยู่ทั่วไปทุกหนทุกแห่งเพื่อสร้างโทนสีที่คล้ายคลึงกัน

ทฤษฎีเกสตัลต์

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

ที่ แกนหลัก ทฤษฎีเกสตัลต์กล่าวว่าเมื่อคุณดูชุดภาพที่ซับซ้อน คุณจะทำสิ่งใดสิ่งหนึ่งจากสองสิ่งนี้:

ดูทั้งหมดที่สอดคล้องกันก่อนแล้วจึงดูชิ้นส่วนของมัน
ดูความสับสนทั้งหมดก่อนแล้วจึงพยายามแบ่งออกเป็นส่วนหรือกลุ่มที่ง่ายกว่า

มีหลักการออกแบบเว็บไซต์เจ็ดประการที่ดึงมาจากทฤษฎีพื้นฐานนั้น:

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

ใช้หลักการเหล่านี้เพื่อช่วยผู้ดูของคุณตีความข้อมูลที่คุณให้

พื้นที่เชิงลบและความเรียบง่าย

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

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

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

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

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

การออกแบบที่ปรับให้เหมาะกับมือถือ

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

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

‌ สิ่งนี้ ไม่ เพียงป้องกันความหงุดหงิดของผู้เยี่ยมชม แต่ยังเป็นปัจจัยการเพิ่มประสิทธิภาพกลไกค้นหา (SEO) ที่สำคัญอีกด้วย อัลกอริทึมของ Google คำนึงถึงการเพิ่มประสิทธิภาพมือถืออย่างแน่นอน

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

หลักการออกแบบเว็บไซต์ คุณทำได้!

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

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

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

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