17 Must-Have Chrome Extensions for Web Designers and Front End Developers

등록 날짜: - 최종 수정 날짜:

Are you a web designer or front end developer? Here are some chrome extensions that could actually make your job a lot easier!

 

Responsive Web Design Tester

Responsive Web Design Tester is a neat tool that allows you to test your website on any device, previewing your designs at the dimensions they’ll be seen on your customers’ mobile tech. It gives the option of adding your own devices if the pre-set options don’t fit, supports external and internal networking, and won’t deluge you with adware. Free, user-friendly and with quick review features.

Chrome user rating: 4.3/5

  

Window Resizer

This add-on is particularly useful for the designers and developers out there. Window Resizer tests layouts on different browser resolutions, removing the need to switch screen size to check results. The resolutions list is customisable, with a range of options to make it user-friendly no matter your needs.   

Chrome user rating: 4.3/5

 

Fontface Ninja

We’ve all come across fonts that make our eyes pop. Whether they’ll be perfect for a new ad, or to catch a customer’s attention, you’ll want to know what it is and how it’s going to look with your text. Fontface Ninja allows you to identify and try out any font on a website. It can remove ads and pictures to let you focus on the text, and a simple click gives you the price - or allows you to download if it’s free. 

Chrome user rating: 4.4/5

 

WhatFont

In a similar vein to Fontface Ninja, WhatFont provides an easy way to identify fonts on web pages. Simply hover over the text you like, and et voila. It detects the services used for serving the web fonts, and supports Typekit and Google Font API.

Chrome user rating: 5/5

  

TypeWonder

So, you’ve found a font you like but can’t decide whether it’s the perfect fit for your site. Enter TypeWonder, a simple extension that lets you preview fonts on any website. Simply enter the site URL, and follow the instructions. An example can be found here

Chrome user rating: 4.9/5

 

Lightshot

Lightshot is a simple and convenient screenshot tool, which allows you to take a shot and share it in a few clicks. You can select any part of the page, edit in place, search for similar shots and save either on a disk, or upload to the cloud. If you want to record screencasts, Nimbus - another screenshot app - is also recommended.

Chrome user rating: 4.5/5

 

Page Ruler 

Page Ruler lets you draw out a ruler to any page, and displays the width, height and position of it. It’s Chrome’s most popular ruler extension, and allows precise measurement of the elements so you can decide how to make them look their best. Accurate, and simple to use.

Chrome user rating: 4.4/5

  

Dimensions

Another handy tool for designers. Dimensions measures the distance between elements, and provides a simple way to check pixel height and width. It’s great for sizing, measuring padding and margins, and can measure everything you see in a browser.  

Chrome user rating: 4.2/5

 

PerfectPixel by WellDoneCode

PerfectPixel allows developers to overlay a semi-transparent image on top of developed HTML to perform per pixel comparisons. There’s a range of features, including separate overlays for each website, and no image size restrictions. It is supported by ads, but these can be disabled.

Chrome user rating: 4.5/5

 

ColorZilla

ColorZilla is a powerful program boasting an impressive array of features. Eyedropper, colour history, analyser, colour picker, auto copy, keyboard shortcuts, the list goes on. It has a simple and intuitive interface, and is useful for designers, web developers and graphic designers alike.   

Chrome user rating: 4.3/5

 

Corporate Ipsum

Are you fed up of spending hours coming up with buzzword copy to fill Lorem Ipsum space? Just hit up Corporate Ipsum, and dramatically benchmark enterprise-wide models through resource-levelling content. Seamlessly synergise your corporate-speak needs with word-void issues, and collaboratively morph the two.

(Bonus: is often hilarious.)

Chrome user rating: 4.7/5

  

CSS - Shack

CSS-Shack is a web and desktop application for creating layer styles, and exporting them in to a single CSS file. Useful for creating web designs and mock-ups, or for maintaining a style guide for a website.

Chrome user rating: 3.7/5

  

Code Cola

Code Cola makes it easy to visually modify the CSS of any element. It shows the result immediately and is user-friendly, even for those who have only basic coding skills. Designed to collect and share CSS at the click of a button.

Chrome user rating: 4.6/5

 

 

Pendule

The features list for Pendule runs on, and on, and on. One of the most obviously useful tools is the way it beautifies compressed CSS, and makes it readable. A visual breakdown of some of its abilities can be found here, if the developers among you want to be enticed further.

Chrome user rating: 4.3/5

  

UX Check

UX Check is a free extension that could help save money by reducing the need for user tests. It is designed to help developers identify UX issues, based on Nielsen’s heuristics - principles developed as a guide for website usability. You don’t have to stick to his guide though; custom lists are an available option, and on-screen annotations are simply screenshot and exported for later analysis.

Chrome user rating: 3.9/5

 

Muzli

Muzli identifies and evaluates UX and interactive content, bringing it straight to your desktop. It’s a well-researched tool that delivers the latest, coolest, design projects. it has a wide scope, presenting illustration, photography and visual arts, unique websites and design features. Customisable to your needs, and a great source of inspiration for all the designers out there.  

Chrome user rating: 4.6/5

 

Handcraft

Handcraft is web-based prototyping tool. It lets interaction designers and front-end developers bring designs into the browser, where you use HTML, CSS and Javascript to hand craft interactive prototypes. It’s not free, starting at $9 a month, but it does have a 30 day trial so you can see what you’re getting first. The prototypes are interactive, automatically backed up, presented to a professional standard and easily shared with colleagues.

Chrome user rating: 4.3/5

 

Let us know if we missed any in the comments below!

다음 문서

11 UX Web Design Tips Every Developer Must Follow