COOL IT IDEAS AND STUFF
15 Must-Have Chrome Extensions for Product Designers
19-Jul-24
คัมภีร์เทพ IT
See the original english version Click here!
ในการทำงาน เราทุกคนสามารถใช้ประโยชน์จากเครื่องมือต่าง ๆ ที่มีอยู่ได้ ซึ่ง Chrome Extensions ก็เป็นหนึ่งในเครื่องมือที่มีประโยชน์กับทุกคนไม่เว้น Product Designers และบทความนี้จะมาแนะนำ 15 Chrome Extensions ที่ Product Designers ควรรู้ไว้และใช้งานให้เป็น ซึ่งจะช่วยเพิ่มประสิทธิภาพให้กับกระบวนการออกแบบได้
1. Colorzilla
Colorzilla เป็น Color Picker ขั้น Advance และชุดเครื่องมือที่เกี่ยวข้องกับสี:
- Eyedropper (ได้รับสีของ Pixel บน Page)
- CSS Gradient Generator
- Webpage Color Analyzer (ได้รับ Color Palette สำหรับ Site)
- Color History ของสีที่ถูกเลือกไว้ล่าสุด
Colorzilla Toolset
Colorzilla Color Picker
2. Site Palette
Site Palette จะสร้างจานสี (Color Palette) จาก Website ได้ และช่วยให้คุณสามารถ Share กับคนอื่น ๆ ได้
Site Palette Generator
3. Fonts Ninja
วิธีที่ง่ายที่สุดในการระบุ Fonts บน Web Pages เพียงแค่วาง Mouse ไว้เหนือ Text Element เพื่อแสดง Styles ที่ใช้
การใช้ Fonts Ninja เพื่อระบุ Font
สำรวจและดาวน์โหลดรูปภาพต่าง ๆ บน Web Page คุณสามารถ Filter รูปภาพได้ตาม ความกว้าง, ความสูง หรือ URL
การใช้ Image Downloader บน Reddit Page
5. SVG Grabber
หยิบเอารูปภาพ SVG และ Icon ทั้งหมดจาก Site
SVG Grabber
6. Page Ruller
ใช้วัดระยะทาง (เป็น Pixel) บน Webpage โดย Extension นี้จะวาดไม้บรรทัดสี่เหลี่ยมเมื่อคุณเลื่อน Mouse บน Page ไม้บรรทัดนี้มี ความกว้าง ความสูง จุดเริ่มต้นและจุดสิ้นสุดทั้งหมดโดยมีป้ายกำกับที่มีหน่วยเป็น Pixel เมื่อคุณเลื่อน Mouse สี่เหลี่ยมจะเปลี่ยนขนาด และตัวเลขทั้งหมดก็จะได้รับการอัปเดตตามไปด้วย
การใช้ Page Ruler เพื่อวัดคำบรรยายภาพ
Extension นี้จะปรับขนาด Window ของ Browser ใหม่เพื่อจำลองความละเอียด (Resolutions) ต่าง ๆ คุณสามารถตั้งค่าความกว้าง/ความสูงของ Window, ตำแหน่งของ Window, Icon ที่กำหนดไว้ล่วงหน้า (Phone, Tablet, Laptop, Desktop) และแม้กระทั่ง Option ในการใช้ Dimensions ใหม่กับทั้ง Window หรือเฉพาะกับ Viewport
การใช้ Window Resizer บนหน้าเว็บ
8. CSS Peeper
CSS Peeper เป็น CSS Viewer ที่ถูกออกแบบมาสำหรับ Designers โดยเฉพาะ คุณสามารถแยก CSS และสร้าง Styleguides ที่สวยงามได้
CSS Peeper
9. Dark Reader
Extension ที่ช่วยดูแลดวงตานี้ จะเปิดใช้งาน Night Mode โดยการสร้าง Dark Themes สำหรับ Websites ได้ทันที Dark Reader จะทำการแปลงสีสว่าง ทำให้มี Contrast ที่สูงขึ้น ซึ่งจะทำให้อ่านง่ายขึ้นในเวลากลางคืน
การใช้ Dark Reader บน Wikipedia web page
10. GoFullPage – Full Page Screen Capture
จับภาพ Full Page ของ Browser Window ปัจจุบันของคุณ เพียงคลิกที่ Extension Icon (หรือกด Alt+Shift+P) ดู Extension ที่จับภาพแต่ละส่วนของ Page และเคลื่อนย้ายไปยัง Tab ใหม่ของ Screenshot ของคุณ ซึ่งคุณสามารถดาวน์โหลดเป็นรูปภาพหรือ PDF หรือเพียงแค่ลากมัน ไปยัง Desktop ของคุณ
การใช้ GoFullPage เพื่อจับภาพ Page ปัจจุบัน
สามารถใช้ Tool นี้ได้ หากคุณต้องการแชร์ Screen เพื่อวัตถุประสงค์ต่าง ๆ เช่น การรายงานปัญหาทางเทคนิค, การสร้าง Product Demos หรือการสร้าง How-To Tutorials
Awesome Screen Recorder
12. Loom
ด้วย Loom คุณสามารถ Record Screen และรับ Link เพื่อแชร์กับใครก็ได้ในทันที มันเป็นวิธีที่เร็วและง่ายที่สุดในการจับภาพ Screen และติดต่อกับทีมของคุณได้
Loom
13. Hover Zoom
Zoom รูปภาพ / วิดีโอ บน Websites โปรดทั้งหมดของคุณ (Facebook, Amazon ฯลฯ) เพียงแค่วาง Mouse ไว้เหนือภาพเพื่อขยายให้ใหญ่ขึ้น
Hover Zoom Amazon
14. Daltonize
จำลองสถานการณ์ที่ตาบอดสี ได้โดยตรงใน Chrome
การใช้ Daltonize บน Bing.com
ตรวจสอบความแตกต่างระหว่างการผสมสีต่าง ๆ ด้วยมาตรฐาน WCAG เปรียบเทียบ Contrast Ratio ของ 2 สี, Background และ Foreground, ภายใน Webpage ที่เปรียบเทียบกับ Level 2 ของ Web Content Accessibility Guidelines (WCAG)
Color contrast checker
ที่มา: https://uxplanet.org/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด