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

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

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

สีอะไรคะ

ColorZilla

สร้างขึ้นสำหรับ Firefox ตั้งแต่นั้นมา ColorZilla ก็พร้อมใช้งานบน Chrome และเบราว์เซอร์ที่เกี่ยวข้องเช่นกัน

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

ฟอนต์คืออะไร

WhatFont? (โครเมียม)

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

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

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

ตัวค้นหาแบบอักษร (Firefox)

ส่วนขยายพิเศษเฉพาะของ Firefox ในรูปแบบเดียวกับ WhatFont ของ Chrome

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

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

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

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

“แทนที่แบบอักษร (ทั้ง DOM)” ให้คุณเปลี่ยนทุกอินสแตนซ์ของแบบอักษรบนหน้า ไม่ใช่แฟนของ Roboto (ที่เราใช้เป็น sans-serif หลักของเรา)? ไฮไลต์ตัวเลือกนี้ คลิก "Roboto" จากรายการแบบอักษรที่มีอยู่ในหน้าเว็บ และป้อนชื่อแบบอักษรที่คุณต้องการดู อีกครั้ง มันไม่ถาวร แต่ให้คุณเล่นกับการออกแบบเว็บไซต์โปรดของคุณได้ แม้ว่าจะเป็นเพียงชั่วคราวเท่านั้น

การวัดไซต์

ไม้บรรทัดหน้า (Chrome)

"ไม้บรรทัด? จริงๆ?" เราได้ยินคุณถาม Page Ruler เป็นไม้บรรทัดหน้าจอซึ่งแตกต่างจากเสียงเล็กน้อย อันที่จริง เราก็เข้าใจถึงความสงสัยในเบื้องต้นเช่นกัน

การวางตำแหน่งเรื่องบนเว็บ องค์ประกอบของหน้าต้องมีการเว้นระยะห่าง มิฉะนั้นจะไม่น่าดึงดูดเท่าที่ควร แม้ว่าข้อมูลนี้จะเป็นความลับอย่างยิ่งที่อยากรู้ แต่ Page Ruler ก็ทำให้เป็นไปได้

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

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

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

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

MeasureIt (Firefox และ Chrome)

MeasureIt ทำงานเหมือนกับ Page Ruler และใช้ได้กับทั้ง Firefox และ Chrome

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

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

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

บทสรุป

ต้องใช้เวลาสักพักกว่าจะได้รับประโยชน์สูงสุดจากส่วนขยายเหล่านี้ แต่ส่วนขยายเหล่านี้มีข้อมูลดีๆ ที่เข้าถึงได้ง่าย คุณจะเข้าใจได้อย่างรวดเร็ว แต่ถ้าคุณพบว่ามันยากที่จะเปลี่ยนแบบอักษร โปรดจำไว้ว่าชื่อต้องถูกต้อง “Comic Sans” จะไม่ทำงาน ในขณะที่ “Comic Sans MS” (ตามที่ปรากฏใน Office) จะทำงาน

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