แนวทางปฏิบัติและเคล็ดลับการออกแบบเว็บไซต์ที่ตอบสนองได้ดี

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

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

กำหนดสไตล์ของคุณ

การสร้างจานสี

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

นึกถึงมือถือก่อน

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

สร้างคู่มือสไตล์ของคุณหลังจากเค้าโครงเริ่มต้นของคุณ ไม่ใช่ก่อนหน้า

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

สม่ำเสมอไม่ได้แปลว่าน่าเบื่อ

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

องค์ประกอบบางอย่างที่คุณอาจต้องการจัดรูปแบบและสร้างมาตรฐาน ได้แก่:

• ระดับพาดหัว: H1, H2, H3…
• ภาพหลักหรือภาพ ฮีโร่
• การนำทางหลัก
• การนำทางรอง
• สำเนาร่างกาย
• รายการลำดับเลขและสัญลักษณ์แสดงหัวข้อย่อย
• การโทรออกหรือตราสัญลักษณ์
• การรักษาภาพเนื้อหา
• สไตล์ดึงใบเสนอราคา
• วิดเจ็ต (ตัวหมุน การฝังทางสังคม ปฏิทิน ฯลฯ)
• ปุ่มคำกระตุ้นการตัดสินใจขนาดใหญ่
• ปุ่มรองหรือลิงก์ข้อความ
• องค์ประกอบของแบบฟอร์ม
• เชิงอรรถและหนูตามกฎหมายประเภท
• แบ่งปันทางสังคม

พิมพ์

คัดลอกบล็อค

เล่นกับระยะห่างตัวอักษร (การติดตาม) ระยะขอบ และระยะห่างบรรทัด (นำหน้า) เพื่อช่วยกำหนดลำดับชั้นของคุณใหม่ ยิ่งระยะห่างมาก ข้อความก็จะยิ่งหนักและอึดอัดมากขึ้นเท่านั้น

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

ไม่ต้องกลัวแตก

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

ใช่ คนจะเลื่อนลงมา

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

ที่เกี่ยวข้อง

เทรนด์การออกแบบชั้นนำของปี 2020

ประเภทการปรับขนาด

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

พิมพ์สี

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

พิมพ์ น้ำหนัก

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

การนำทาง

แฮมเบอร์เกอร์!

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

รวมปุ่ม 'กลับไปด้านบน' ที่ด้านล่างของหน้าเลื่อนแบบยาว

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

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

อภิธานศัพท์การออกแบบ:

โทรออก
ข้อความสั้นๆ ที่ตั้งค่าไว้อย่างแข็งแกร่งกว่าส่วนอื่นๆ ของหน้า และตั้งใจที่จะดึงดูดความสนใจ

คัดลอกบล็อค
ย่อหน้าที่จัดกลุ่มหรือชุดย่อหน้าของข้อความ

The (ดิจิตอล) fold
ใช้ในการออกแบบ เว็บไซต์ (พร้อมกับ “ เหนือ การเลื่อน”) เพื่ออ้างถึงส่วนของหน้าเว็บที่มองเห็นได้โดยไม่ต้องเลื่อน เนื่องจากขนาดหน้าจอแตกต่างกันอย่างมาก จึงไม่มีการกำหนดจำนวนพิกเซลที่กำหนดส่วน พับ

Serif
การฉายภาพเล็กน้อยจบการขีดเส้นของตัวอักษรในแบบอักษรบางแบบ

Sans Serif
แบบอักษร sans – serif , sans serif , gothic, san serif หรือเพียงแค่ sans เป็นแบบอักษรที่ไม่มีคุณลักษณะการฉายภาพเล็กๆ ที่เรียกว่า " serifs " ที่ส่วนท้ายของจังหวะ คำนี้มาจากคำภาษาฝรั่งเศส sans หมายถึง "ไม่มี" และ " serif " จากคำภาษาดัตช์ schreef หมายถึง "line"

ชนิด (ตัวพิมพ์) น้ำหนัก
ความมืดสัมพัทธ์ของอักขระของแบบอักษรประเภทที่เกิดจากความหนาสัมพัทธ์ของลายเส้น แสดงเป็นแสง ตัวหนา ตัวหนาพิเศษ ฯลฯ

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

วิวพอร์ต
พื้นที่กรอบบนหน้าจอแสดงผลสำหรับการดูข้อมูล

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