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

เว็บไซต์สวยงามเป็น masterpiece ยุคอินเทอร์เน็ต การปรับแต่ง: ง่ายหรือซับซ้อนก็ได้ จากแก้ธีม WordPress ถึงพัฒนาลุคเว็บตั้งแต่ศูนย์

คุณจะพบองค์ประกอบที่ชอบ สีที่อยู่นำกลับมาใช้ โครงการนี้รวบรวมเครื่องมือสำคัญให้เว็บ "บอก" ทุกอย่างที่คุณอยากรู้

สีนี้คือสีอะไร?

ColorZilla

สร้างสำหรับ Firefox ตอนนี้มี Chrome และพวกเขาด้วย ติดตั้ง → ปุ่มเพิ่มใน UI ทั้งสอง กดปุ่ม → รู้สีของทุกอย่างออนไลน์ ColorZilla ไม่แค่ระบุสี รองรับ Palette ด้วย

ฟอนต์นี้คืออะไร?

WhatFont? (Chrome)

ไม่จำเป็นต้องใช้ WhatFont? เพื่อรู้ฟอนต์ (เปิด stylesheet หาได้) แต่มัน เร็วที่สุด

ติดตั้ง → ไอคอนใหม่ใน UI → รีเฟรชหน้า → กดปุ่ม → ปุ่มใหม่มุมขวาบน → โฮเวอร์ข้อความ → แสดงชื่อฟอนต์ คลิก → ขนาด และฟอนต์ใน "stack" (ตัวเลือกสำรอง)

Font Finder (Firefox)

ส่วนขยาย Firefox เฉพาะ ทำหน้าที่คล้าย WhatFont? ติดตั้ง → เมนูคลิกขวาเพิ่ม Analyse Selection

ไฮไลท์ข้อความ → คลิกขวา → Analyse Selection → รายละเอียดทุกอย่าง จริงจัง ถ้าเป็น "(stack)" จะเลือกฟอนต์แรกใน stack ที่ติดตั้งอยู่ (มักจบด้วย sans-serif) ถ้าฟอนต์อื่นใน stack ไม่มี → fallback เป็น system default sans-serif

ปรับแต่งได้: Adjust Element ใส่ font family → เปลี่ยนฟอนต์ Wikipedia ทั้งหมด สร้าง mash-up แปลกๆ (ไม่ถาวร หายตอนโหลดใหม่) Replace font (entire DOM) เปลี่ยนทุก instance ของฟอนต์บนหน้า

วัดขนาดเว็บไซต์

Page Ruler (Chrome)

"ไม้บรรทัด? จริงไหม?" Page Ruler คือไม้บรรทัดหน้าจอ แตกต่างจากที่คิด ตำแหน่งสำคัญบนเว็บ: elements ต้อง spacing พอดี จึงดูดึงดูด Page Ruler ทำได้

ติดตั้ง → ปุ่มใน UI → เปิดเว็บ (ไม่ทำงานกับหน้า built-in Chrome) → คลิกปุ่ม → แถบข้อมูลใต้แถบที่อยู่ → คลิกลากสร้างรูปทรง → แสดงขนาด พิกัดบนแถบ เปิด/ปิด grid ได้ เปลี่ยนสีสี่เหลี่ยมได้ (มี transparency อัตโนมัติ)

MeasureIt (Firefox และ Chrome)

MeasureIt ทำหน้าที่เดียว Page Riller มีทั้ง Firefox และ Chrome ติดตั้ง → คลิกปุ่ม → คลิกลากสร้างสี่เหลี่ยม → แสดง pixel count วัดตำแหน่งแม่น ปรับขนาดพื้นที่ไฮไลท์ด้วยปุ่มลูกศร → ความแม่นยำง่ายขึ้น ตั้งค่า "Area" เพื่อดูพื้นที่

จะประหลาดใจกับจำนวนพิกเซลบนหน้าจอ และพื้นที่ที่สร้างขึ้น ควรทำให้คำว่า "screen real estate" เข้าใจชัดเจน

สรุป

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