1. ColorZilla
Working with color is part of every designer's life. A color tool
that can aid in both basic and advanced color tasks, positioned within
your browser, could prove invaluable.
ColorZilla provides three ways to choose a color: Color Picker, Eyedropper and Palette Browser. You can select precise colors by pinpointing on the hue/saturation canvas, or by entering the RGB, Hexidecimal or HSL/HSV values. Give a selected color a unique name for future reference and add it to your favorites. Colors can be copied and pasted into other programs (in CSS, RGB, Hexidecimal and other formats), and you can even analyze a page and inspect its entire palette of colors.
The DOM Color Analyzer inspects the colors on any webpage, locates corresponding elements and helps determine which specific CSS rules set the colors. Interestingly, you can even create advanced multi-stop CSS gradients.
ColorZilla provides three ways to choose a color: Color Picker, Eyedropper and Palette Browser. You can select precise colors by pinpointing on the hue/saturation canvas, or by entering the RGB, Hexidecimal or HSL/HSV values. Give a selected color a unique name for future reference and add it to your favorites. Colors can be copied and pasted into other programs (in CSS, RGB, Hexidecimal and other formats), and you can even analyze a page and inspect its entire palette of colors.
The DOM Color Analyzer inspects the colors on any webpage, locates corresponding elements and helps determine which specific CSS rules set the colors. Interestingly, you can even create advanced multi-stop CSS gradients.
2. Pencil
When designing a website we often need to draw and plan the content
architecture and navigation. Pencil is an open-source tool for making
diagrams and GUI prototyping, available as either a standalone
application or a Firefox extension. It provides a built-in shapes
collection for drawing various types of user interfaces, including
flowchart elements, UI and general purpose shapes, for use in both
desktop and mobile interfaces.
Export documents in a range of formats, including PNG, PDF, ODT and multi-page SVG files. With the clip art browser tool that integrates with OpenClipart.org, you can easily find images by keyword and import them using a drag-and-drop interface. Elements can be individually linked to a specific page in a document, then converted to HTML hyperlinks when exported into web format.
Export documents in a range of formats, including PNG, PDF, ODT and multi-page SVG files. With the clip art browser tool that integrates with OpenClipart.org, you can easily find images by keyword and import them using a drag-and-drop interface. Elements can be individually linked to a specific page in a document, then converted to HTML hyperlinks when exported into web format.
3. MeasureIt
Creating pixel-perfect designs with perfectly aligned elements can be
a challenge. With MeasureIt, accurately measure screen elements in
pixels, so you can verify their width, height and alignment. The
dimensions are displayed right next to the selected area. The resize
cursor handles allow adjustments to the area after drawing it, while the
drag-and-drop handle lets you move the highlighted measurement area
around the browser window.
Once installed, simply click the icon, which lives on the left of the status bar, and click and drag anywhere on the page. A tiny tooltip showing the dimensions of the selected elements appears. Please note the latest release means the MeasureIt Icon doesn't automatically display in the status bar. To fix this, simply right-click on any Firefox toolbar and choose 'Customize.' In the pop-up, drag the MeasureIt icon onto your toolbar. Overall, MeasureIt is a fast, simple, single-purpose tool that is easy to get comfortable with.
Once installed, simply click the icon, which lives on the left of the status bar, and click and drag anywhere on the page. A tiny tooltip showing the dimensions of the selected elements appears. Please note the latest release means the MeasureIt Icon doesn't automatically display in the status bar. To fix this, simply right-click on any Firefox toolbar and choose 'Customize.' In the pop-up, drag the MeasureIt icon onto your toolbar. Overall, MeasureIt is a fast, simple, single-purpose tool that is easy to get comfortable with.
4. Stylish
Stylish allows easy installation, management and authoring of
userstyles, which are CSS rules that let you change and customize the
appearance of websites, within the browser. They work similarly to Greasemonkey and UserScripts.org. You can remove irrelevant content, change colors or completely redesign an entire website.
There are thousands of (user-created) styles and themes available at its companion website, UserStyles.org, so you can tweak your favorite websites to your heart's content. It also works well in combination with other extensions, such as AdBlock. Plus, help remove annoying popup ads and other distracting elements to make your browsing a cleaner, leaner experience.
There are thousands of (user-created) styles and themes available at its companion website, UserStyles.org, so you can tweak your favorite websites to your heart's content. It also works well in combination with other extensions, such as AdBlock. Plus, help remove annoying popup ads and other distracting elements to make your browsing a cleaner, leaner experience.
5. View Source Chart
A neat extension that allows you to visualize DOM structure
accurately and efficiently, Source Chart pictorially delineates element
boundaries. As the DOM becomes more complex, navigation becomes a pain,
but Source Chart provides an instant, complete visualization by color
coding hierarchical nesting of any tag in the viewport. This can be a
huge productivity boost when compared to the standard tree-style source
presentation.
To view the DOM structure, just right-click on a webpage and click on "View Source Chart." A new tab will open showing the structure of the page. Each section is color coded and clickable, so you are able to easily jump between sections of code. A bookmarklet is also available, which can be styled and customized to suit. Also of note is DOM Inspector, which inspects and edits the live DOM of any webpage.
To view the DOM structure, just right-click on a webpage and click on "View Source Chart." A new tab will open showing the structure of the page. Each section is color coded and clickable, so you are able to easily jump between sections of code. A bookmarklet is also available, which can be styled and customized to suit. Also of note is DOM Inspector, which inspects and edits the live DOM of any webpage.
6. Firesizer
An incredibly simple extension, which ignores bells and whistles and
instead concentrates on delivering a genuinely useful experience,
Firesizer provides a menu and status bar to resize your current browser
window dimensions. Unlike similar extensions, Firesizer sets the size of
the entire window, not just the HTML area, which better reflects the
environment users will actually be using. It is neat and unobtrusive
(sitting in the "Add-On" toolbar) and scales with the browser window, so
if the window is expanded, the values on the status bar increment in
proportion.
Firesizer comes with three screen sizes by default; however, you can add custom sizes and access them all in the status bar (using a right-click). You can even store the "current size" of your browser window. For quickly testing how your website design displays at various resolutions, it's a very useful extension.
Firesizer comes with three screen sizes by default; however, you can add custom sizes and access them all in the status bar (using a right-click). You can even store the "current size" of your browser window. For quickly testing how your website design displays at various resolutions, it's a very useful extension.
7. HTML Validator
This nifty extension helps you write well-formed HTML by checking
your markup for standards compliance. Based on HTML Tidy and OpenSP
(SGML Parser), which were originally developed by W3C, the algorithm is
embedded inside the browser, with the validation done locally on your
machine, without sending HTML to a third party server. The extension
works by adding a small icon to the status bar, which instantly
validates the code as the page loads. The details of the errors found
within the document are located within the HTML source code of the page.
The automatic "Clean Up" button will also suggest improvements to the
markup.
The SGML parser used is the same as the one running behind the W3 Validator, and the extension has an accessibility check for the three levels defined by the Web Accessibility Initiative (WAI). While the extension is officially Windows only, it is available on other platforms.
The SGML parser used is the same as the one running behind the W3 Validator, and the extension has an accessibility check for the three levels defined by the Web Accessibility Initiative (WAI). While the extension is officially Windows only, it is available on other platforms.
8. Font Finder
This add-on finds the properties of selected text within the browser.
It's especially useful when researching fonts used on various websites.
Font Finder lets you analyze the CSS font detail for an element and
modify those specifications as non-destructive edits, allowing you to
conceptualize your site with an alternative font. Copy an element's
information to the clipboard and disable font-families to test browser
degradation. Also, adjust the style of a font (color, size or family)
inline.
Access these options by highlighting the selected area and right-clicking, or by toggling the icon in the status bar. The information captured for each element is extensive and includes font color, background color (RGB or Hex), font family, font size, line-height, alignment, weight, decoration and an element's type, class and ID. It's a fantastic time saver and eliminates the need to launch Firebug and use the inspection tool, for example.
Access these options by highlighting the selected area and right-clicking, or by toggling the icon in the status bar. The information captured for each element is extensive and includes font color, background color (RGB or Hex), font family, font size, line-height, alignment, weight, decoration and an element's type, class and ID. It's a fantastic time saver and eliminates the need to launch Firebug and use the inspection tool, for example.
9. CSS Usage
This extension, which integrates into Firebug,
allows you to scan a website to uncover unused CSS style rules. It
identifies which CSS rules you do and don't use and suggests unnecessary
styles which can be removed, to help keep your CSS files as lightweight
as possible. Colors identify elements, classes and IDs within the
markup, and numbers indicate how many times they appear. Unused styles
are not deleted but have the word "UNUSED" at the beginning of each
style declaration, which makes for a neat, non-destructive method. The
stylesheet can then be exported and edited to remove these unused
styles.
To use the extension simply press "Scan," located in the "CSS Coverage" Firebug tab. This extension can prove a huge timesaver for both cleaning up and speeding up the loading time of your CSS files.
To use the extension simply press "Scan," located in the "CSS Coverage" Firebug tab. This extension can prove a huge timesaver for both cleaning up and speeding up the loading time of your CSS files.
10. Tab Mix Plus
Tab Mix Plus enhances Firefox's browsing capabilities and makes managing tabs less of a grind. Features
include duplicate tabs, undo closed tabs, controlled tab focus and much
more. It has more options than you could actually imagine using. Once
installed it is configured using multiple categories, each of which
contains related settings to configure the extension to your own style
of browsing. It also contains a Session Manager with crash recovery that
can save and restore combinations or opened tabs and windows. You can
even set keyboard shortcuts to allow for faster browsing and tab setup.
The protected and locked tab features are so useful you will wonder how you used Firefox without them. You can protect a tab from being accidentally closed, and lock a tab to prevent navigation from one page or URL to another.
The protected and locked tab features are so useful you will wonder how you used Firefox without them. You can protect a tab from being accidentally closed, and lock a tab to prevent navigation from one page or URL to another.
Source mashable.com
10 Firefox Add-Ons for Designers
Related Posts : Designer Tips