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 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
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 customization, with a range of options to make it user-friendly no matter your needs.
Chrome user rating: 4.3/5
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
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
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 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 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
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 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 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
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 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 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
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 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 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 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
Comments