10 ส่วนขยาย Google Chrome สำหรับนักออกแบบ

หากคุณเป็นนักออกแบบเว็บไซต์ที่ปฏิบัติตามขั้นตอนการออกแบบมาตรฐาน งานของคุณมีดังนี้:

• กำลังค้นคว้า
• โครงลวด
• การเลือกชุดสี
• การเลือกฟอนต์ที่เหมาะสม
• การทดสอบหลายรูปแบบ
• ร่วมมือกับลูกค้าและเพื่อนร่วมทีม

และอื่น ๆ ...

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

ดังนั้น ประหยัดเวลาได้มากและลองใช้ส่วนขยาย Google Chrome 10 รายการสำหรับนักออกแบบ

1. Responsive Web Design Tester

โพสต์การอัปเดตที่เหมาะกับมือถือของ Google การตอบสนองคือคำศัพท์! นี่คือส่วนขยายที่ให้คุณทดสอบเว็บไซต์ของคุณในอุปกรณ์มือถือ Android และ Apple หลักๆ ทั้งหมด

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

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

2. TypeWonder

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

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

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

3. แท็บ Packager

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

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

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

4. TrackDuck

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

ตอนนี้อาจฟังดูเหมือนพูดเกินจริงไปหน่อย แต่ TrackDuck ก็เหมือนอาสนะขนาดเล็กสำหรับนักออกแบบโดยเฉพาะ

TrackDuck เป็นเครื่องมือการทำงานร่วมกันแบบภาพที่ช่วยให้คุณสามารถเพิ่มเว็บไซต์เป็นโครงการได้ เมื่อคุณเพิ่มโปรเจ็กต์แล้ว คุณสามารถเชิญเพื่อนร่วมทีมเข้าร่วมได้ เมื่อใดก็ตามที่คุณแสดงความคิดเห็นในโครงการนี้ (หรือเว็บไซต์ - ซึ่งคุณสามารถทำได้โดยคลิกที่ไอคอนของส่วนขยาย) งานจะถูกสร้างขึ้นเกี่ยวกับความคิดเห็นนั้น คุณสามารถมอบหมายงานนี้ให้เพื่อนร่วมทีมของคุณ เพิ่มไฟล์แนบและภาพหน้าจอ และรวมเข้ากับเครื่องมือการทำงานร่วมกันมากมาย เช่น Trello และ Basecamp

5. คัลเลอร์ซิลล่า

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

ดังนั้นคุณจะจับภาพสีใด ๆ บนเว็บได้อย่างไร?

นี่คือ ColorZilla ซึ่งเป็นผลิตภัณฑ์ Chrome ที่นักออกแบบทุกคนชื่นชอบ คุณลักษณะพื้นฐานและเป็นที่นิยมที่สุดคือการรับโค้ดสำหรับสีใดๆ บนหน้าเว็บ

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

6. WhatFont

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

แต่คุณไม่จำเป็นต้องใช้เส้นทาง Inspect Element อีกต่อไป – WhatFont จะแยกแบบอักษรใดๆ บนเว็บเพจด้วยการคลิกเพียงครั้งเดียว

เพียงคลิกที่ไอคอนของส่วนขยายแล้ววางเมาส์เหนือส่วนข้อความที่คุณสนใจ WhatFont จะสร้างประเภทแบบอักษร ขนาด ความสูง สี และครอบครัว

7. โครงลวดทันที

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

ส่วนขยาย Wireframe ทันทีช่วยให้คุณดูโครงร่างที่ดีพอสมควรของหน้าเว็บใดก็ได้ ยังอยู่ในช่วงเบต้า แต่ทำงานได้ดี

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

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

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

Page Ruler เป็นวิธีที่สะดวกที่สุดในการทำเช่นนี้ Page Ruler ช่วยให้คุณเห็นความสูง ความกว้าง และตำแหน่งขององค์ประกอบ คุณยังสามารถวิเคราะห์องค์ประกอบต่างๆ ได้อย่างชาญฉลาด

และเหมาะอย่างยิ่งสำหรับการสร้างแบนเนอร์ที่สมบูรณ์แบบพิกเซล รูปภาพเด่น และเอกสารทางการตลาดอื่นๆ

9. จานสีสำหรับ Chrome

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

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

ฉันจะชอบมันมากกว่านี้ถ้ามีวิธีการส่งออกแบบแผนชุดสี แต่ส่วนขยายยังคงเป็นสิ่งที่ต้องมี

10. ExtensionMuzli – อาหารเช้าดีไซน์

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

ExtensionMuzli ถูกสร้างมาเพื่อสิ่งนี้ รวบรวมเรื่องราวจากแหล่งข้อมูลการออกแบบชั้นนำประมาณ 12-15 แห่ง นอกจากนี้ยังมีส่วนงานออกแบบเว็บไซต์หากคุณต้องการเปลี่ยน

เมื่อคุณติดตั้งส่วนขยายนี้ แท็บใหม่ของคุณจะแสดงเรื่องราวเกี่ยวกับการออกแบบที่สร้างแรงบันดาลใจหรือการศึกษาล่าสุดจากอินเทอร์เน็ต มันเป็นวิธีที่เรียบร้อยในการติดตามข่าวสารล่าสุดในช่องของคุณ

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