11 ส่วนขยาย Chrome ที่ดีที่สุดสำหรับนักออกแบบ

เผยแพร่แล้ว: 2022-04-28

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

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

ด้วยเหตุนี้ เราจึงรวบรวมส่วนขยาย Chrome ที่ดีที่สุด 11 รายการสำหรับนักออกแบบ

เครื่องทอผ้า

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

ส่วนขยายนี้ให้คุณบันทึกและบรรยายวิดีโอของสิ่งที่คุณเห็นบนหน้าจอของคุณ เช่นเดียวกับกล้องหน้าของคุณ ก่อนที่จะแชร์ด้วยลิงก์ง่ายๆ

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

ตัวปรับขนาดหน้าต่าง

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

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

มุซลี

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

ด้วยแหล่งข้อมูลมากกว่า 150 แหล่งจากทั่วอินเทอร์เน็ตรวมถึง Dribbble, Mashable และ Product Hunt Muzli จะนำแนวคิดการออกแบบที่สดใหม่ โปรเจ็กต์ และข่าวสารมาให้คุณทุกครั้งที่คุณเปิดแท็บใหม่

เห็นสิ่งที่คุณสนใจ? คลิกผ่านและเรียนรู้เพิ่มเติมในหน้าต่างเบราว์เซอร์ใหม่

ไม้บรรทัดหน้า

นักออกแบบ UX มักจะรู้สึกซาบซึ้งในแนวคิดที่เรียบง่ายแต่มีประสิทธิภาพ และนั่นก็รวมถึง Page Ruler

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

ColorZilla

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

หนึ่งในส่วนขยาย Firefox ที่ได้รับความนิยมมากที่สุดก่อนที่จะมาสู่ Chrome ในที่สุด ColorZilla นำเสนอ eyedropper ขั้นสูงเพื่อกำหนดสีของพิกเซลใดๆ บนหน้าใดๆ ตัวสร้างการไล่ระดับสี CSS และตัวเลือกสี

หากคุณเห็นสีที่คุณชอบ ColorZilla จะทำให้การนำค่าฐานสิบหกและ RGB มาวางลงในคลิปบอร์ดของคุณเป็นเรื่องง่าย

ฟอนต์เฟซ นินจา

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

“Fonts DNA engine” ของ Fontface Ninja ไม่เพียงแค่แสดงชื่อ CSS เท่านั้น แต่ยังแสดงชื่อจริงของฟอนต์ที่แสดงอยู่ด้วย เพื่อให้คุณได้ลองใช้อย่างถูกกฎหมาย หากคุณชอบ Fontface Ninja ยังมีลิงก์สำหรับซื้อใบอนุญาตที่เหมาะสม

คลื่นความถี่

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

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

เช็คบอท

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

การทดสอบหลายร้อยหน้าในคราวเดียว Checkbot สามารถค้นพบลิงก์ที่ใช้งานไม่ได้ ข้อผิดพลาด HTML/JavaScript/CSS ชื่อเรื่องที่ซ้ำกัน ปัญหาด้านความปลอดภัย การเปลี่ยนเส้นทางสาย และข้อผิดพลาดของเนื้อหาผสม

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

SVG Grabber

คุณมักจะพบว่าตัวเองจำเป็นต้องดึงโลโก้ ไอคอน ภาพประกอบ หรืองานศิลปะอื่นๆ จากเว็บไซต์อื่นหรือไม่? ถ้าใช่ SVG Grabber จะช่วยคุณประหยัดเวลาและความน่าเบื่อหน่ายได้มาก

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

UX Check

พูดง่ายๆ ก็คือ UX Check จะเปลี่ยนการประเมินฮิวริสติกให้เป็นเรื่องง่าย

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

เมื่อเสร็จแล้ว คุณสามารถส่งออกทุกอย่างไปยังไฟล์เอกสารเพื่อแชร์กับเพื่อนร่วมทีมได้อย่างง่ายดาย

บริษัท Ipsum

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

แทนที่จะใช้ข้อความจำลองยาวๆ ที่คุณเคยเห็น คุณอาจถูกทักทายแทน เช่น ศัพท์แสงขององค์กรในลักษณะนี้

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับหลักสูตรการออกแบบ UX ของ BrainStation