Practical Ecommerce

20 Chrome Extensions for Web Design

Merchants look for ways to improve the design of their online stores. Loading the Chrome browser with the right extensions is a good way to ensure that you keep helpful design tools at hand.

Here is a list of Chrome extensions for design from Google’s Chrome Web Store. There are design tools to find the right font, develop your palette of colors, discover and create inspirational images, customize graphics, measure elements, and analyze your page as well as the pages of your competitors.

Chrome Extensions for Design

Pixlr Editor. Pixlr Editor is an online photo editor. No download is required, and it’s entirely free. It contains advanced features normally found in desktop graphic design applications, such as layers, lasso tool, brush controls, cloning, and filters.

Pixlr Editor.

Pixlr Editor.

PicMonkey. The PicMonkey Chrome Extension lets you instantly grab images from any web page and open it in PicMonkey, a free online photo editor.

ColorZilla. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color, and then paste it into another program.

WhatFont. WhatFont is the easiest way to get font information about the text you are hovering on. Also, WhatFont detects services used for serving web fonts. It supports Typekit and Google Font API.

WhatFont.

WhatFont.

Evernote Web Clipper. Use this Evernote extension to save web elements into your Evernote account. Add and highlight text, use visual callouts, share clips, and more.

Yslow. YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance pages. YSlow grades a web page, summarizes a page’s components, and displays statistics about the page.

Benchwarmer. Benchwarmer is a Chrome extension for Dribbble, a site for designers to show and promote design work. Every time you open a new tab, Benchwarmer shows the latest inspirational images, from your feed or popular images.

Benchwarmer.

Benchwarmer.

Palette. Do you want to create a color palette that matches an image? Or grab some colors for inspiration? With Palette, just right-click on the desired image, select the “Palette for Chrome” option, and choose the number of colors you want the palette to have.

Instant Wireframe. This extension allows you to view any web page with a wireframe overlay.

Dimensions. Dimensions is a design tool to measure screen dimensions. Measure area boundaries, images, and HTML elements, buttons, videos, text, and icons. Ideal for measuring mockups.

Dimensions.

Dimensions.

Stylebot. Stylebot lets you manipulate the appearance of any website with custom CSS. Pick an element and choose any changes you want to make from the editor. Change the font, color, margins, visibility and a lot more. You can also write CSS manually.

Appspector. This extension will help to inspect the web framework, content management system, and JavaScript library running on a current browsing website. This extension can detect more than 100 popular CMS and JavaScript libraries.

CSS Shapes Editor. This is an interactive editor for CSS shapes. Create and adjust CSS shape values with an interactive editor overlapping a selected element.

CSS Shapes Editor.

CSS Shapes Editor.

Eye Dropper. Eye Dropper is extension for Google Chrome and Chromium. It allows you to pick color from any webpage or from advanced color picker.

Font Playground. Preview your site with over 1,000 Google web fonts, and then get the CSS code.

Minimalist Markdown Editor. Here is a simple and slick Markdown editor. Just write Markdown and see what it looks like as you type. The Minimalist Markdown Editor comes with a one-click HTML conversion tool and more.

Minimalist Markdown Editor.

Minimalist Markdown Editor.

Type Sample. Type Sample is a tool for identifying and sampling web fonts.

EnjoyCSS. EnjoyCSS is a free online CSS3 generator. Adjust rich graphical styles quickly, without coding. Make ‪2D‬ and ‪3D‬ transforms, complex ‪transitions‬, linear and radial ‪‎gradients‬, text shadows, and more. Access a gallery of CSS solutions.

Alexa Traffic Rank. Alexa Traffic Rank is Alexa Internet’s free extension for Chrome, providing Alexa data about the sites you visit. Learn how a site is being found through search, or see what it looked like in the past using the Wayback Machine.

Web Developer. This is the official port of the web developer extension for Firefox. Add a toolbar button to the browser with various web developer tools.

Web Developer.

Web Developer.

Sig Ueland
Sig Ueland
Bio  |  RSS Feed


Get the Practical Ecommerce RSS feed

Comments ( 5 )

  1. Carlos Rivera September 18, 2015 Reply

    I have not heard of many of these. Thank you for sharing, as I can see their usefulness.

    By the way, I checked out your movie trailer and animated series today. Awesome that you are writing screenplays, too! Great job!

    • Sig Ueland September 19, 2015 Reply

      Thanks Carlos! You rock completely.

  2. Jill Kocher September 21, 2015 Reply

    Thumbs up on that last one — Web Developer Toolbar. I prefer to use it in FireFox because it has more features there for deep analysis. It’s the only reason I still keep FireFox around, actually. But for a quick look, the Chrome version does enough.

  3. William September 24, 2015 Reply

    Great article, I didn’t realize Google has so many different tools to assist in design. Thank you.

  4. karen jain December 23, 2015 Reply

    Informative one,Chrome Extensions are really reduce our coding work and makes it faster and easy to finish

Email Newsletter Signup

Sign up to receive EcommerceNotes, our acclaimed email newsletter.
And receive a free copy of our ebook
50 Great Ecommerce Ideas