Must Have Chrome Extensions for Web Designer

Rantideb Howlader 20th Nov 2017

In previous blog post, I shared some Must Have Chrome Extensions for Web Developers. And today i am going to share some awesome Chrome Extensions for Designers.

Inspect Designs:

Page Ruler: Page Ruler lets your draw out a ruler to any page and displays the width, height and position of it.
Dimensions: Dimensions measures the dimensions from your mouse pointer up/down and left/right until it hits a border. So if you want to measure distances between elements on a website this is perfect. It doesn’t really work with images because there the colors change a lot pixel to pixel.
Perfect Pixel:Perfect pixel allows developers to put a semi-transparent image overlay over the top of the developed HTML and perform pixel perfect comparison between them.
Visual Inspector: Visual Inspector -a delightful way to make design changes in live webpages without losing comfort of design tools.
Instant Wireframe:Instant Wireframe allows you to view any web page, local or on the web, with a wireframe overlay.

Get Font from Websites:

WhatFont: WhatFont helps you to identify fonts on web pages
Google Font previewer: Google Font previewer helps to choose a font from the Google Font API directory, and apply that font to the entire page or a specified CSS selector to see how it looks.
Fontface Ninja: Fontface Ninja is a browser extension that let you inspect, try and buy font on any websites.
Visual Inspector — Fonts: Check and experiment with fonts in live website using Visual Inspector — Fonts.

Color Tools:

ColorZilla: ColorZilla helps you to generate color code .
Visual Inspector by CanvasFlip: Visual Inspector allow designers to make temporary edit in websites without coding.
Your Graphic Designer: Your Graphic Designer is an HTML5 vector graphics editor can be used to create drawings, vectors and paintings both online and offline.
Flat color Tools: Flat Colors Guide-guide you to remember color codes.
ExtensionEye Dropper: Eye Dropper allows you to pick color from any webpage or from advanced color picker. So that you can pull colors from webpages just like you can pull colors in Photoshop. You can then create a personal color history, and grab hex codes.

Responsibilty Checker:

Window Resizer: Window Resizer- let you resize the browser window to emulate various screen resolutions.
Mobile/Responsive Web Design Tester: The Mobile/Responsive Web Design Tester extension allows both Web Designers and Developers to test their web pages against common mobile, phablet and tablet devices by emulating the user agent and screen resolution. Excellent for testing responsive web designs. Easily switch between portrait and landscape mode and test multiple mobile device’s at the same time!

Check Grammer:

If you are a web designer, grammar is also important. You can use Grammarly to fix complex grammatical errors.

Screenshot:

Lightshot: Lightshot is the fastest way to take a customizable screenshot.
Fireshot: Fireshot take FULL webpage screenshots. Capture, edit and save them to PDF/JPEG/GIF/PNG, upload, print, send to OneNote, clipboard or email.

Design Inspirations:

Doesn’t matter you are a professional designer or a newbie you rarely do designs from scratch as well as you can’t imagine new design idea for every single project. For that, you may always do browse the designs from another designers & i think that will help you to do better design.

Muzli 2: Muzli 2 shows you the freshest design, UI, UX and interactive news and shots from around the web. All the design inspiration you need.
ExtensionDribbble New Tab: Dreibbble New Tab shows the best shots from Dribbble every time you open a new tab in Chrome.

I think these chrome extensions will help web designers to be more productive.I will do update this if I find more useful extensions for Web Designers.