ในฐานะนักออกแบบเว็บ ซอฟต์แวร์ที่คุณต้องมีบนคอมพิวเตอร์อย่างแน่นอนคืออะไร? โอกาสคือ Photoshop และ Illustrator และแม้จะเป็นสิ่งจำเป็นของเวิร์กโฟลว์การออกแบบของคุณ แต่ก็มีเครื่องมือเล็กๆ ที่คุณอาจไม่รู้ว่าต้องการ
สิ่งที่ดีที่สุดคือ คุณไม่ต้องดาวน์โหลด—เพียงติดตั้งส่วนขยาย Chrome เหล่านี้แล้วใช้ได้เลย จากการระบุฟอนต์บนหน้าไปจนถึงการวัดระยะห่างระหว่างองค์ประกอบเว็บ ส่วนขยาย Chrome สำหรับนักออกแบบเว็บเหล่านี้จะทำให้ชีวิตคุณง่ายขึ้น
1. Dropbox for Gmail
Dropbox เริ่มต้นเป็นบริการโฮสต์ไฟล์ แต่เร็วๆ นี้ค้นพบว่ากลุ่มผู้ชมหลักคือนักออกแบบ ที่ใช้บริการแชร์งานกับเพื่อนร่วมงาน เนื่องจากไฟล์ออกแบบมักใหญ่เกินกว่าจะแนบในอีเมล จึงสะดวกกว่าที่จะส่งลิงก์ Dropbox ของไฟล์
Dropbox for Gmail ทำให้กระบวนการสะดวกขึ้นอีก เมื่อคุณลิงก์ไฟล์โดยใช้ปุ่ม Dropbox ที่ด้านล่างหน้าต่างอีเมลใหม่ ผู้รับจะได้ดูตัวอย่างสิ่งที่คุณส่ง ลิงก์ไฟล์รูปจะอัปโหลดรูปภาพตรงไปที่อีเมล และลิงก์ประเภทไฟล์อื่นจะสร้างพรีวิวที่สะดวก
ติดตั้ง: Dropbox for Gmail
2. FontFace Ninja
ด้วยฟอนต์พันๆ ที่พร้อมใช้งาน ความเป็นไปได้ของแบบอักษรไม่มีที่สิ้นสุด โดยเฉพาะหากคุณสามารถระบุฟอนต์สวยงามที่เห็นที่ไหนที่นั่นและนำมาใช้ในโปรเจกต์ของตัวเอง
FontFace Ninja เป็นส่วนขยาย Chrome ที่ช่วยให้คุณทำได้เพียงพอ คล้ายกับเครื่องมือที่ค้นหาฟอนต์จากภาพ มันช่วยระบุฟอนต์ที่คุณเห็นออนไลน์ ความต่างคือ FontFace Ninja อ่านฟอนต์ที่เขียนใน CSS ของหน้า เช่น ไทป์เฟซของหัวข้อและข้อความเนื้อหา
เมื่อคุณเปิด FontFace Ninja มันจะแสดงข้อมูลฟอนต์ที่คุณชี้—ไม่ใช่แค่ไทป์เฟซ แต่น้ำหนัก ขนาด ความสูง ความกว้าง และสี เพื่อบุ๊กมาร์กฟอนต์นั้น คุณจะต้องมีบัญชีที่บริการพี่น้อง FontFace Dojo
ติดตั้ง: FontFace Ninja
3. ColorPick Eyedropper
ไม่ว่าคุณจะมีตาสำหรับสีดีแค่ไหน ยากที่จะสร้างเฉดสีที่เห็นออนไลน์หากคุณไม่รู้ค่า RGB หรือ HTML ของมัน โชคดีที่คุณไม่ต้องเดา หากคุณมี ColorPick Eyedropper
เหมือนแอป Color Picker ที่ดีที่สุดสำหรับ Mac ColorPick Eyedropper จะแสดงค่าสำหรับสีใดๆ ที่คุณชี้ ความต่างคือมันอยู่ในเบราว์เซอร์ของคุณตลอด และคุณไม่ต้องอัปโหลดอะไร—เพียงคลิกไอคอนและย้ายเป้าหมายไปที่จุดที่ถูกต้อง
ส่วนขยายอ่านสีจากข้อความ รูปภาพ และเกือบทุกอย่างที่คุณอาจเห็นบนหน้าเว็บ (แม้แต่โฆษณา) เมื่อคุณจับสีได้ มันจะแสดงค่า HTML, RGB และ HSL ให้
ติดตั้ง: ColorPick Eyedropper
4. Dimensions
ส่วนขยายโอเพนซอร์สนี้เป็นการค้นพบสำหรับนักออกแบบเว็บ โดยเฉพาะหากคุณทำงานแบบครั้งเดียวสำหรับธุรกิจขนาดเล็ก เมื่อลูกค้าส่งเว็บไซต์มาหาคุณโดยไม่มีไฟล์หรือเอกสารก่อนหน้า และขอให้คุณออกแบบ "หน้าแบบนี้ แต่ด้วยข้อความและรูปภาพที่ต่างกัน" การหาเลย์เอาต์เป็นความลำบาก
Dimensions ให้คุณวัดความสูงและความกว้างขององค์ประกอบใดๆ บนหน้า รวมถึงระยะห่างระหว่างพวกมันได้ง่ายๆ นั่นทำให้สร้างหน้าที่มีอยู่ซ้ำและตรวจสอบดีไซน์ของตัวเองหลังจากไปสู่การผลิตได้ง่าย
ติดตั้ง: Dimensions
5. Visual Inspector
Visual Inspector เป็นเครื่องมือฟีดแบ็กและร่วมมือที่ทรงพลังสำหรับทีมออกแบบ รวมฟีเจอร์ของส่วนขยายสามตัวก่อนหน้าและเพิ่มอีกมากมาย
ในแท็บ Inspect คุณสามารถเลือกองค์ประกอบใดๆ บนหน้าเพื่อรับข้อมูลเต็มรูปแบบเกี่ยวกับมัน จากมิติไปจนถึงชื่อไฟล์ แท็บย่อย Colors และ Typography ให้คุณเห็นพาเล็ตสีและฟอนต์ทั้งหมดในแววตาเดียว ในขณะที่ Assets รวมรูปภาพทั้งหมดบนหน้าไว้ที่เดียว
แท็บ Collaborate เป็นที่ที่คุณสามารถให้ฟีดแบ็กและอภิปรายกับทีมของคุณ และง่ายต่อการทิ้งความคิดเห็นโดยคลิกที่องค์ประกอบใดๆ บนหน้า
เหมือนเครื่องมือขั้นสูงส่วนใหญ่ Visual Inspector มีราคา: คุณต้องจ่ายจาก $9/ผู้ใช้/เดือน เพื่อเพิ่มความคิดเห็นและซิงค์การเปลี่ยนแปลง อย่างไรก็ตาม ฟีเจอร์พื้นฐานอย่างการตรวจสอบสี ฟอนต์ และรูปภาพ ฟรีใช้งาน
ติดตั้ง: Visual Inspector
6. Easy Screen Capture
ส่วนขยายจับภาพหน้าจออาจดูซ้ำซ้อน เนื่องจากจับภาพหน้าจอบน Mac เป็นเรื่องง่าย และจับภาพหน้าจอบน Windows เพียงแค่ยุ่งยากกว่าเล็กน้อย แต่ Easy Screen Capture มีจุดขายไม่少
สำคัญที่สุด มันให้คุณจับภาพหน้าเว็บทั้งหน้า ไม่ใช่แค่พื้นที่ที่คุณเห็นบนหน้าจอ นั่นมีค่าไม่มีราคาเมื่อคุณต้องรายงานปัญหาหลายอย่างบนหน้ายาว และการจับภาพทั้งหมดจะใช้ 3-4 รูปภาพ
ทริกอีกอย่างคือสามารถคัดลอกภาพหน้าจอไปยังคลิปบอร์ดและวางลงในแชทหรืออีเมลทันที แทนที่จะสะสมไฟล์รูปภาพที่ไม่ได้ใช้บนคอมพิวเตอร์
ติดตั้ง: Easy Screen Capture
7. Muzli 2
สุดท้าย มีงานสำคัญหนึ่งที่คุณต้องจัดการทุกเช้า: ลั่นทิ้งความซื่อสลายของการนอนและเข้าสู่กระบวนการ Muzli 2 โดย InVision จะทำหน้าที่เป็นหนังสือพิมพ์เช้าของคุณ พร้อมบทความที่คัดสorbanเกี่ยวกับศิลป์ การออกแบบ UX และเทคโนโลยี
Muzli แทนที่แท็บ Chrome เริ่มต้นและให้คุณปรับแต่งสิ่งที่คุณเห็น שם ขึ้นอยู่กับความสนใจ Muzli จะเลือกฟีดให้คุณ โดยมีเว็บไซต์ตั้งแต่ Dribble และ Behance ไปจนถึง 99designs และ Creative Bloq แรงบันดาลใจมากมายให้เลื่อนอ่านขณะคุณดื่มกาแฟเช้า!
หากคุณคิดว่าแท็บเบราว์เซอร์เต็มไปด้วยเนื้อหาการออกแบบหนักเกินไป Muzli มีเวอร์ชัน Lite ไม่จะทับแท็บเริ่มต้น และคุณจะเข้าถึงฟีดได้ตลอดเวลาเพียงแค่คลิกไอคอนส่วนขยาย
ติดตั้ง: Muzli 2
ได้ส่วนขยาย Chrome สำหรับงานออกแบบทั้งหมดของคุณ
ส่วนขยาย Chrome ในรายการนี้ไม่เทียบเท่าซอฟต์แวร์ออกแบบของคุณ แต่มันครอบคลุมสิ่งเล็กๆ น้อยๆ ที่มากับการเป็นนักออกแบบ— سواءเป็นข้อมูลแบบอักษรหรือการร่วมมือกับเพื่อนร่วมงาน
เมื่อคุณตระหนักว่า Chrome Web Store เต็มไปด้วยเครื่องมือ อาจยากที่จะหยุดเพิ่มตัวใหม่ๆ ดังนั้น เรียนรู้วิธีจัดการส่วนขยาย Chrome ก่อนที่มันจะหลุดมือ
