The Chrome browser gets all sorts of reputation for itself, a few choose to blame the browser for lack of security and lack of more in-depth tools, but when it comes to the bigger picture, imagining a better browser than Chrome is hard. Speed, scalability, performance, and things like Developer Tools is what keeps both web designers and web developers stick with Chrome for the long-term strategy.
There has been a lot of discussion about the safety and privacy of Google Chrome Extensions, but what it comes down to is a mindful choice of extensions that are built by trustworthy developers and startups that actually want to deliver some good for the community. The expansion of Chrome’s capabilities has provided developers with the necessary toolkits and features to build extensions that can help to cultivate more productivity, and more importantly — more accessibility for building things in the browser.
Front-end developers are amongst the bigger winners of using Chrome, as it provides a very fluid IDE-like experience when building websites and apps for the browser, and also for the mobile web. We will be covering the best fifteen Google Chrome Extensions for designers, some of which developers might find use for too. The list is unbiased and based on research that designers themselves have shared over some of the most popular community forums and platforms we can find on the web today.
Fonts and typography are the essential part of great web design, not only do they help to add personality, they immensely help to compliment design course of action. Most of the modern designs we see today are utilizing some sort of external fonts and typographic standards to truly extend the user experience for everyone involved. With Font Playground, designers can now get access to a flexible extension that helps you play with your fonts on your designs directly from the browser. Choose from over a 1000+ unique Google Fonts and see how they interact with each other on different occasions.
A User-Agent is otherwise known as the fingerprint that you send out within each new request you make to a page. The website can then detect your User-Agent and serve you the appropriate version of the website, in accordance of your browser capabilities. This is the standard technique for websites to determine whether someone is browsing a website from a Desktop or Mobile device. The User-Agent Switcher extension lets you change your User-Agent to any other browser or mobile device out there, letting you quickly experiment with the way your designs appear on these devices and browser. It’s a tiny extension that has a lot of power to help developers increase productivity by saving them time from having to switch back and forth.
With more than 500,000+ active users in all technology communities, the Window Resizer extension helps designers to spoof different kinds of resolutions to better understand how these resolutions interact with your designs. Building a website that works for majority of population is essential, and this extension helps you pinpoint where errors may begin to occur, so you can promptly make any necessary code changes. You can quickly change the width and height of your browser window, the position where it resides, and there’s an in-built shortcode function that will greatly increase your ability to check different screen resolutions as you are doing live coding.
With millions of active websites, and plenty of new websites we visit every single day, there’s always something that catches our eye, a particular widget or dynamic function, or a particular font that just seems to look outstanding, but we aren’t able to pinpoint the name for it. With the WhatFont extension you are able to quickly examine fonts on any give website page and quickly learn the name of the font so that you can begin your search for it. Other than that, WhatFont also helps to understand the kind of services that are being used to serve fonts, in the case that they are coming from premium or free services like Google Fonts, or Typekit.
Designers, and even developers, all struggle to keep their tabs clean and organized. When doing design work, we are constantly looking at other sources, research stuff, inspiration work, and examples on how to perfect our designs, and these tabs tend to stack up rather quickly! With Tab Packager you can now enjoy a simple way of packaging all your tabs in a single URL, and then accessing them from that URL. This improves productivity as we can continuously return to our list and quickly grab what we need, rather than skimming through tabs guessing what each tab consists of.
Photoshop isn’t the only tool that deals with layers, every front-end developer has to deal with layers in their CSS configurations. This Chrome extension for web designers help you to create style layers and then export those layers to your CSS files for easier access. You can quickly build designs, wireframes, or simple elements like buttons in a matter of a few clicks. Whether it’s random experimentation and sandbox testing, or a full-on style guide you are trying to build, CSS-Shack offers the tools to help you in those departments.
Flat Colors Guide
Building a new web design using the FLAT style guide, but not sure of the right color codes to use in each situation? With the simple to use Flat Colors Guide extension that worry quickly disappears. Install the extension and simply click the extensions button to load up the colors that usually go into FLAT designs.
ColorZilla has millions of active users on the Mozilla browser, and now finally a Google Chrome extension is also available, which has accumulated more than 800,000+ active users already. With ColorZilla you can quickly assess the colors on any given page, and then use those colors to optimize them and load them up in any other tool that you are using for building your designs. Easily access the colors of singular pixels within the page, giving you the right depth for your colors in any situation. Shortcuts enable for quicker color manipulation and optimization.
Some designs take longer than others to perfect, some designs take years of work before a finalized version is establihed. Sometimes we browse a beautiful website and think to ourselves “what great designers and developers are working on this”, but more often than not — it has been a long journey over the course of many years to create such fluid designs. With the Instant Wireframe extension we can quickly assess and depict any web design and see exactly how the structure is built, and whether we can implement a similar structure in our own projects.
Stylebot is a live editing tool for manipulating the CSS code of any website and element you are currently browsing. You can quickly select individual elements and make appearance changes using CSS. Change anything you like using automated in-built tools, or write your own CSS. This helps you to learn more about CSS, but also gives you a glimpse of how live editing works and how much quicker you can create the changes to your designs that you desire. With more than 150,000+ users, this is the extension that every web designer should have in their toolkit.
EnjoyCSS is a web design suite studio directly in your browser! It’s a direct CSS3 generator that lets you manage UI settings of any element of your own choice. Create transitions, transform elements, work with gradients, shadows, and so much more. EnjoyCSS also has a library of pre-built transformations that you can directly apply to your elements.
SnappySnippet fills the bridge gap between working in elements in the browser, and being able to send them to famous code editing platforms like JSFiddle and CodePen. SnappySnippet enables a feature that whenever you are browsing a particular website element using Developer Tools, you are quickly able to send that element for live editing in one of the most popular code playgrounds we find on the web today. Works with HTML5 and CSS3.
Responsive Web Design Tester
Front-end developers no longer build standalone desktop websites, mobile is the brother of desktop, so each design has to be built with mobile users in mind. Thank God we have gotten over the stream of articles talking about how important responsive web design is, it’s no longer important, but truly quintessential. The Responsive Web Design Tester extension will allow you to quick test all your existing designs on a number of different devices and give you a glimpse of whether you have done everything right to ensure that your designs look great on all devices, whether mobile or desktop.
Emmet LiveStyle instantly updates your web-page stylesheet while you edit CSS, LESS or SCSS file in your text editor. No file saving or page reloading: pure real-time experience! And this is the first tool that transfers updates from DevTools back into source code the right way. A lot of the reviews for this extension continue to mention that they can’t imagine their web design workflow without this tool.
Mozilla Firefox has their own Developer Tools, just like Google Chrome does. What has happened in the recent years is that a lot of Firefox users have switched over to Chrome, but still feel like a certain functionality is missing or lacking in specific departments. One of the highest loses for people switching is the loss of Mozilla Developer Tools, and since there was such a huge demand for it, a few developers got together and built an exact mirror of Firefox Dev Tools for Chrome. With more than one million active users already, this extension is a booming success for both established and aspiring designers who wish to extend their browser toolkit for working with web designs in live environment.