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