Contact Us
  • Awesome Chrome Extensions for Web Design

    Creating a website requires juggling many different tools. This article looks at Google Chrome Extensions. These extensions won’t won’t replace your text and graphic editors. They may, however, give you an extra boost of power to experiment with new ideas in the browser.

    Subtle Patterns Preview

    spatterns

    Before flat design was fashionable, texture was the latest trend. Subtle Patterns is probably the best online collection of minimal patterns and textures.

    This extension lets you preview Subtle Patterns backgrounds in your web browser. After activating the extension, simply choose your pattern.

    This extension lets you preview Subtle Patterns backgrounds from directly within your web browser

    By default, Subtle Patterns applies your chosen background to the body element. You can also apply the backgrounds to other HTML elements.

    Google Font Previewer

    gwebfonts

    No textures for you? Well, ok, but surely you’ll want to explore some fonts. Google Font Previewer lets you replace the fonts on a live web page with Google Web Fonts.

    Google Font Previewer lets you replace the fonts on a live web page with Google Web Fonts.

    This is a great way to experiment with fonts. If you want to quickly test out Google Web Fonts on a live site, without getting bogged down by embed codes, this extension is a real time saver.

    Snappy Snippet

    snappy

    Snappy Snippet is activated within your Chrome Web Inspector Tools. When you inspect an element and select the Snappy Snippet Tab, the extension copies all HTML and CSS of the selected element (or group of elements).

    You can then export the HTML and CSS of those elements to a number of different code playgrounds. You can also copy and paste the code into your own text editor. This extension allows you to isolate patterns of HTML & CSS. This can improve your ability to see markup patterns, and it can also give you some nice snippets for creating your own pattern library.

    Evernote Web Clipper

    evernote

    Evernote Web Clipper is a great tool to save your design inspirations. When you find a site that you like, you can send the page directly to Evernote with the web clipper.

    Evernote Web Clipper is a great tool to save your design inspirations.

    You can also take screenshots with the web clipper to save images directly to Evernote. You need a free Evernote account to use the web clipper.

    As an aside, Evernote is a great tool if you need a place to store your digital life. It allows you to easily save notes, web pages, images, emails, pdfs and pretty much anything you can throw at it. It has powerful search capabilities so you can find your digital things later on.

    Rulers and Guides Bookmarklet

    rulers

    Rulers and Guides is not an extension, but rather a Bookmarklet. You install it by simply dragging the bookmarklet up to your browser toolbar.

    When you click on the bookmarklet, you get Photoshop-like rulers and guides. You can drag out both horizontal and vertical guides. This can help you align things if you are designing in the browser.

    Responsive Design Bookmarklet

    rwd

    The Responsive Design Bookmarklet shows you different breakpoints as you resize your browser. This helps you make proper adjustments so your layout can adapt at different sizes. It also gives you some presets to see how your site might look on a phone or tablet.

    These tools are a fun and efficient way to experiment in the browser. Whether you are looking for inspiration or testing out new ideas, hopefully some of these extensions can improve your workflow.

    Do you have any favorite Google Chrome Extensions? Please drop a line in the comments…

    Speak Your Mind

    *