Just like in most other professions, a web designer’s set of tools is what brings a concept into fruition. There are
many applications available to our disposal, but there are some that
just stand out from the crowd. The tools in this article are what’s regarded as the most
popular tools used for web design.
In this article, you’ll find the
five web design tools that garnered the most votes.
Adobe Fireworks is a commercial raster and vector graphics editor hybrid from Adobe that’s available for the Mac and Windows operating systems. Designed specifically for web designers (unlike Photoshop), Fireworks brings you a plethora of tools and options that make full web layout prototyping a breeze.
Among its notable features are: "slices" for slicing and dicing a design mockup into HTML/CSS for rapidly creating prototypes (though you should avoid using auto-generated source code for the end-build), the ability to package an entire site design as a PDF with clickable components for interactive and impressive site prototypes, and optimization tools for making your web graphics as lightweight as possible.
Adobe Dreamweaver is a commercial application for web development that’s available for the Mac and Windows operating systems. Its featured-packed suite of tools and options include: syntax highlighting and very smart Code Hinting, a built-in FTP client, project management and workflow options that make team work effortless, and Live View – which shows you a preview of your source code. Dreamweaver tightly integrates with other popular Adobe products such as Photoshop, allowing you to share
Smart Objects for quick and easy updating and editing of graphics components.
Panic Coda is a shareware web development application for the Mac OS X operating system. It seeks to reduce the amount of applications (such as an FTP client, CSS editor, a version control system, etc.) you need to develop websites and to improve your team’s workflow. Coda’s one-window web development philosophy uses a tabbed interface for text editing, file transfers, SVN, CSS, and even "Books" which embeds web books that are searchable (it comes with
The Web Programmer’s Desk Reference but you can add your own).
It’s simple and intuitive interface allowed Coda to garner the
Apple Design Awards Best Mac OS X User Experience in 2007.
Adobe Photoshop is a very popular commercial graphics editor available for the Mac and Windows operating system. Created for professional photographers and designers, it is the ideal application for manipulating images and creating web graphics. Photoshop has all the necessary tools and options you need such as: Filters – which automatically adds effects to your image or a selected section of your image, extensibility and automation with
Brushes,
Actions and
Scripting, and workflow enhancement features like
Layer Comps and the
Revert option.
Firebug is a free, open source in-browser web development tool for the Firefox web browser. It’s many features include: on-the-fly HTML and CSS editing for tweaking or debugging, a Console for logging, analyzing and debugging JavaScript, and an intuitive Document Object Model (DOM) inspection tool to help you quickly see how the elements of a web page relates to one another.
Firebug’s popularity is so immense it’s one of the few Firefox extensions that have its own extensions (like
YSlow and
FirePHP)!
Notable mentions
Here are other tools that were voted on that are worth a quick mention.
