Menu

Top Five Web Design Tools

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.

Last week, you were asked to vote on what you thought was the best web design tool. Close to 280 of you shared your opinion on what the best web design tool is.

In this article, you’ll find the five web design tools that garnered the most votes.

5. Fireworks

screenshot source: Introducing Adobe Fireworks CS4 beta http://www.adobe.com/devnet/logged_in/rjones_fwcs4_beta.html

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.

4. Dreamweaver

Dreamweaver - screen shot.

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. 

3. Panic Coda

Panic Coda - screen shot

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.

2. Photoshop

Photoshop - screen shot.

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.

1. Firebug

Firebug - screen shot.

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.

A Poll

Related content

This was published on Mar 15, 2009

137 Comments

Desiztech Mar 15 2009

Photoshop is my fav!

Sacramento Website Design Mar 15 2009

Which one of these would you rate the easiest to use functionality wise and which one is easy to put SEO in place with?

izzat aziz Mar 15 2009

i could say that i couldn’t design without firebug. especially deal with some themes that don’t have any comment on css.

together with firebug, word search in firefox is combine together to become brilliant tools.. :D

My current basic combo is pspad, photoshop, mozilla – firebug, webdeveloper

IETester is also very useful

Good post! I agree with your selections. Fireworks is my personal favorite for making web buttons and web graphics. Firebug looks cool, I will have to check it out.

I actually really like Safari’s web page tools, which are very similar to Firebug. I think people don’t take Safari seriously right now, especially Windows users. But the tools in Safari are priceless to me.

Open terminal and type this:

defaults write com.apple.Safari IncludeDebugMenu 1

Then restart Safari and right click on an element, select “Inspect Element”

Cristhian Bedon Mar 15 2009

I agree, but without Dream weaver – I don’t think I’ll be the same.

Alexandre J. Mar 15 2009

I use Photoshop and Dreamweaver!
but firebug is really usefull too.

for the web designer chek out http//www.webdesignerheaven.com for resources and usefull links!

Yes Photoshop my favourite too ;)

Kumail.H.T Mar 15 2009

I want to give coda a try. I really try to avoid adobe products, I feel they are bloated and slow, even on powerful systems.

Web Developer Mar 15 2009

Coffee never made it on to that list?

abdusfauzi Mar 15 2009

without firebug, my work gonna be 10 times slower and longer. :D love you firebug!

Doug S. Mar 15 2009

Personally I prefer Illustrator to Fireworks. Fireworks’ typography abilities are rather pathetic. What I would much rather see from the app is the ability to style elements the same way I would those very elements with CSS. That would be MUCH more useful to me and that way I’d have all the features I could honestly really need.

However it doesn’t do this and as such I find Photoshop and Illustrator to be much more useful.

Pavel Ciorici Mar 15 2009

I’m using only PS and FireBug from this list, because I prefer Notepad2 for coding :)

I hate fireworks but I agree on the rest. Is that Dreamweaver CS4 you have on there? I haven’t been able to upgrade yet.

I still think that designing with bitmaps is a bit lame. OK, it is easier and I might be influenced by mine print design and Flash experience, but I still find a bit more dificult to incidently resize an element by about 1600% or change the colors of all medium grass leafes in a meadow to brown just to look how would it seem.

Of course Photoshop, Fireworks or a GIMP is essential for the finishing touches, but I still find Illustrator or Xara more comfortable and powerful for main stages of design.

Rokurosv Mar 15 2009

I think that Firebug is one of the best plugins you can have in Firefox, it’s a must

I’ve never used Fireworks, what are other advantages of using it over Photoshop? Is it hard to figure out or pretty intuitive?

Jacob Gube Mar 15 2009

@izzat aziz: I’ll have to agree with that. It’s very useful in troubleshooting rendering bugs. To me though, it’s greatest strength is it’s JavaScript logging/debugging features.

@tekket: Replace PSPad with Dreamweaver, and you’ve got my typical set-up! :)

@Web Developer: Coffee (and/or Red Bull) is on my personal list of tools, especially when you’re trying to meet a deadline.

@Doug S.: I agree with you. I used Fireworks for a bit, but found that I’d much prefer Illustrator/Photoshop with Shared Objects than Fireworks.

@Erica: The biggest advantage of Fireworks is that it’s made for web designers, so the options, tools, and workflow is optimized with a web designer’s need in mind. Photoshop is for a wide range of professionals: Photographers, Digital Media Artists, and web designers. Other than that, the (lower) price is also a selling point.

Alex B. Mar 15 2009

coda > dreamweaver :)

Kevin Quillen Mar 15 2009

Dreamweaver is ridiculously overpriced and a system hog. It’s simply a text editor, why is it more than $100? I’d rather have Aptana, which seems to be more enterprise based given its parent model, Eclipse.

++ using Design mode…. bad.

I’m missing the web developer toolbar. I can’t do without it.

I’ve moved to Aptana in conjunction with Firebug for all webdev work. If you do webdev and haven’t tried it, you’re missing out.

notepad is all any real designer needs

Best tool, visual studio 2008. Supports every standard spec known to man, a plethora of languages, debugs everything from C++ to ecmascript and for people who do actual work involving the web, its power to create and leverage applications and technologies is unrivaled.

Oh yeah, and it’s free.

Wade Jackman Mar 15 2009

This is pretty much the line up on our computers although dreamweaver doesnt get used much. Fireworks has saved me so much time, I feel that it makes it easier to work at a productive pace.

Jordan Moore Mar 15 2009

For me it’s got to be Fireworks, Firebug and Nano for coding. I would love a decent Windows alternative to Coda, but that’s maybe too much to wish for.

Feedweaver Your RSS reader Mar 15 2009

I think all the photoshop user should use Fireworks for website. I have been using photoshop for 3 years for web design purpose, however, after I used FW for about a 1month I just can not live without it. FW can do most of the web design related task faster and quick than PS, further, PS gives much bigger file size compare to FW.CHeck out Feedweaver.net, use it for this blog!

Richard Kimber Mar 15 2009

Couldn’t be without Visual Studio 2008 for XHTML/CSS/JavaScript.

MN Web Design Mar 15 2009

Remember the good old days when Dreamweaver and Fireworks were bundled together?

Firebug, Photoshop and WordPress is about all I need.

Jacob Gube Mar 15 2009

@foo: But it’s so hard to create graphics in Notepad, aside from ASCII art. :)

This is a pretty obvious list. Any designer will already know about these.

you can do easy the same in the safari preferences under advanced! No hacking in the terminal is necessary!

patrick Mar 15 2009

fireworks is fabulous! i’m so used to it that i can’t imagine designing and deploying a site without it.

1. I think that Photoshop is much better than Fireworks when creating layouts.

2. I think that Notepad++ or SciTe are the best programs for actual coding.

3. I think that Firebug is the best for debugging and manipulating layouts to your liking.

Lee Munroe Mar 15 2009

I actually don’t use Firebug that much, maybe I’m not using it to its full potential.

Going to have to sit down and work with Fireworks some day, I hear everyone bigging it :)

@Brad: Yes, but did you think that maybe their are aspiring web designers who are looking for what programs experienced designers use?

Daniel Anderson Mar 15 2009

Jacob

You choose Photoshop over Fireworks? I am pretty new to the web design world would Photoshop be better than Fireworks in your opinion?

Thanks in advance for the advice.

Cheers

Garrett Mar 15 2009

Dreamweaver is a horrible program that hinders far more than it helps as far as web design goes. Any sort of semi-professional or upward web designer will stay away from it.

What about TextMate / e-texteditor hmm?

Ok, I know I’ll take the arrows for this, but… The King is dead, long live King GoLive. Adobe bowed to their market bungling of GoLive rather than the logic of superior product when it killed GoLive. They should have integrated the good parts of Dreamweaver into the GREAT parts of GoLive for the ultimate authoring application. Don’t tell me I’m wrong unless you’ve built a dozen sites with GoLive and really understand its power. That’s the truth, ’cause I said so!

Gubatron Mar 15 2009

emacs > *

Christopher Bolton Mar 15 2009

I have to share some love as you chose to include Fireworks. I believe this is the most underrated program in the web design industry.

Dietmar Mar 16 2009

Photoshop is also my fav, forget about fireworks…

Webdesigner Mar 16 2009

am surely going to download firebug now… thanks for the useful article

xcession Mar 16 2009

+1 for Photoshop

Firebug is very useful to me

Illustrator Mar 16 2009

Leaving me (illustrator) out of the list and have fireworks and photoshop is just ridiculous. Everybody knows that real designers use the latest cs4 version of me insted of my siblings ONLY.

Hey Jacob I also have the same problem of creating graphics in Notepad aside from ASCII art

Catuira Mar 16 2009

Photoshop rules! :D

I prefer Photoshop to the rest..

Jacob Gube Mar 16 2009

@Daniel Anderson: I can’t say that Photoshop is better than Fireworks, it’s just what I prefer. I know many web designers who use Fireworks because it’s simpler to use and is optimized for a web designer’s workflow. For example, Noura from Noupe uses Fireworks and she loves it. She even made me reconsider Fireworks again (I think the last time I used Fireworks was in the MX family), at least for processing images for the web.

Fireworks can do both vector and raster graphics, so if you do not have access to a whole CSx suite where Illustrator is also bundled but still want to have simple vector graphics editor – then Fireworks is great.

I started with Photoshop, it’s what I learned and it was what I was taught (almost 10 years ago). Same with Illustrator (when I did print/branding work). So I personally prefer Photoshop/Illustrator when I’m doing design work as opposed to Fireworks. For example, I’ll design a logo in Illustrator and use that as a Smart Object in Photoshop.

But to answer your question: I like the versatility of Photoshop – I can use one program to process and manipulate images and create web layouts and interfaces. I also like the more robust suite of tools that Photoshop has. I like its workflow management options like Layer Comps so that I can save and tweak multiple versions of a layout for presenting to clients without affecting the rest of the comps. I can name a few more – but I’m afraid that this comment would turn into the length of a book.

Let me end by saying that if you have access to Photoshop, try it for a bit – and maybe pick up a book about it. And always know that you can always switch tools at any time, especially when you’re just starting out. But don’t change for the sake of change, if a tool works for you and your style of working, and you’re able to accomplish your job with it, you should really consider what the benefits are of switching to another program. It’s better to be an expert on one program than mediocre in many.

Gautam Lad Mar 16 2009

Photoshop and Firebug. I can’t believe the others even made the list. And last I recall, Dreamweaver is going down.

Timothy Mar 16 2009

Not a big fan of Dreamweaver. I think it makes web developers have less of an understanding of things. But Firebug is a must!

Michelle Mar 16 2009

I use PhotoShop to process photos and do any collage work.
Fireworks is the main program I use for actually laying out a design. The ability to create and edit vectors easily and to select objects on screen no matter what layer they are on save me an enormous amount of time. And with the frames feature, I am able to store layouts for an entire site in one file. I truly hate the vector capabilities in PhotosShop and find the type features an absolute pain. PS excels in photo processing and manipulation and for my photography it is the end-all be all.

I then code everything in DreamWeaver CS3-I have been using DW since version 2 and I know what it does well and what it doesn’t do so well at and I use it accordingly. Notepad is great and all, but I need to SEE what I am doing immediately, because I am completely a visual person-Notepad doesn’t provide that immediate visual response that I need. And the coding helps in DW are useful when you don’t have all day to manually code every last bit of html or css.

Firebug and IE Developer toolbar are absolute necessities (IR toolbar particularly for branding SharePoint sites.)

EndOfLeg Mar 16 2009

that’s a terribly half-assed list

photo sharing Mar 16 2009

nice list. i need to play with fireworks

CyberFox Mar 16 2009

Notepad++ >> Firefox [scrapbook,firebug,colorzilla, etc] >> Photoshop … in that order.

Jmiles540 Mar 16 2009

I disagree with the premise of the list. It’s apples and oranges. you cannot say, which is better Dreamweaver or Photoshop, they serve different purposes. I personally Use Visual Studio 2008, and find it to be the best IDE ever, but that’s for .NET. When I used to code Classic ASP, I loved UltraEdit.

Nate Johnson Mar 16 2009

Jacob Gube: I can. Photoshop is better.

NYCgirl Mar 16 2009

How about a similar list but for all free web dev apps?

This is a rather weak article. There’s so many quality tools that exist in niches and hidden parts of the web dev world- why write about tools that we all know about. Is there any web designer here who really doesn’t know what a fabulous tool Photoshop is yet?

I’ve had firworks for awhile and have yet to really dig into it. I think this post just inspired me to do so! I’m also going to try to start using Firebug.

Notepad++ >> Firefox [scrapbook,firebug,colorzilla, etc] >> Photoshop … in that order..

Man, Dreamweaver gets such a bad rep. People assume that since you use Dreamweaver, you use the ‘Design’ view and never hand code anything. This simply isn’t true. I never let Dreamweaver write my code, but I do like its power as an editor. I will however agree that it is a bit bloated and slow. I prefer Coda overall, especially in the look/feel department, but still think Dreamweaver is a great app, when used correctly.

Tegan Snyder Mar 16 2009

Over the past 11 years I used many different software applications while developing or designing websites, but there is one program over all the others that I hold true to my heart. That program is Adobe Fireworks. Designing website layouts and user interfaces in a vector based application with the power of Fireworks really cuts down on the amount of time it takes to achieve the desired result.

I’ve been using Fireworks since version 1.0 and I don’t see it leaving my toolkit anytime soon.

With all that said I still find times where i need the advance features photoshop and illustrator provide, but Fireworks hands down increases my productivity and produces results fast.

Daniel Anderson Mar 16 2009

Thanks Jacob, I think I will go with Photoshop and see how I go.

Tom Wilson Mar 16 2009

I surprised that no one mentions Homesite, which, for me is the best html and css editor of all time. I’ve been using it since it was shareware, before it was bought by Allaire (remember them?), who were bought out by Macromedia, bought out by Adobe – and there hasn’t been an update since version 5.5 eight years ago. Although Adobe still sell it, I guess they’ve given up on it. I’ve just moved to a Mac and I come across people on discussion lists bewailing the fact that Homesite was never ported to the Mac, because, believe me – I’ve tried all of them – there is no Mac editing tool that comes anywhere near the ease of use and convenience of Homesite.

Rodrigo Mar 16 2009

I can’t believe Dreamweaver made into the list, it’s such a heavy app for what it does. I can’t live without Textmate and firebug.
As graphic tools, I keep switching btw photoshop, fireworks and illustrator. I use illustrator for all icons, photoshop to layout the website, move stuff around and effects like shadow. Fireworks is the best tool for preparing images for the web, its compression is far superior than Photoshop and it’s the only app that saves image as PNG 8-bit with transparency which help when design for IE6.

Parallax Mar 16 2009

Interesting list – a bit curious. I would have expected that, out of thousands of software and hardware tools, the top five would reflect absolutely essential solutions.

BestOnlineGamblingCasinos Mar 17 2009

looks pretty cool!!!

osCommerce Templates Mar 17 2009

I prefer using Fireworks over Photoshop. Fireworks is more to work with.

I am not really good in designing but I would love to learn and become one of the best graphic artists the world has ever known. :D

notepad++

Thibaut Allender Mar 18 2009

Dreamweaver? Doh!

Caesar Chi Mar 18 2009

I like firebug, and using Firefox. Good choose.

custom icon design Mar 19 2009

I like dreamweaver, because I used more than 5 years in code.

I must say i only ever use fireworks to slice up everything. I always design in photoshop, slice in fireworks and put together in dreamweaver. I can imagine that there probably is less effort in fireworks in comparison, but i don’t think id be quicker. I am superfast with photoshop, and the mac can’t keep up with me. Good old photoshop will always be a winner with me and my web design.

San Jose Web Design Mar 19 2009

I’ve been using Dreamweaver for years and I like it because of the code highlighting, code collapsing, the clean HTML it produces, and the code auto-completion. However, after all these years, Firebug is in my opinion the best developer tool I’ve come across. The more I get to know it the more I like it. If only there were a version for IE.

Website design company Mar 20 2009

I use Dreamweaver and Photoshop and rarely Fireworks.
They are really cool. I don’t feel the need for additional tools yet.

Ed Hardy Mar 20 2009

I stopped when I read Dreamweaver …

Peer Bentzen Mar 20 2009

Freeway Pro and Photoshop make a nice pair

Wow, I seriously feel that people who say things like real designers don’t use dreaweaver clearly have little knowledge of its capabilities.
Yes Dreamweaver creates crappy code in design mode but if you are a “real” designer you will only use it in code mode, Notepad cannot manage a full site’s architecture, if you change a file name for a page or move it into a sub-folder, DW will will update all linked pages in one shot, simple things like this would be a huge pain in the ass by hand.

pradeep Mar 21 2009

I have used all but panic.

they are great..

Pixel Groups Mar 21 2009

well its strange that i saw the same article even on about.com
i am new so i have no idea about this site.
any ways yes photo shop is like life line for we web designer and then comes dream weaver….

Fireworks is and has always been better, faster, more intuitive and generally more awesome than Photoshop (probably because Adobe didn’t design it, Macromedia did). All Adobe would have to do is open up a few more export options, enable brushes, enable larger file dimensions and it would kick Photoshop off the planet. As it is, Fireworks does 99% of everything I want it to (print, web, etc. design).

Safari 4 has an incredible web developer toolkit built in. Beats Firebug to pieces in my opinion.

Dreamweaver creates ugly code. Yes, you can use it in code mode, but why not just learn some simple programming that does everything DW does, but cleaner? To each their own I suppose. :) I personally heart Geany for my code.

timbury Apr 04 2009

I only work on Linux systems and I can manage quite well with vim, ssh, scp, ftp, gimp, inkscape, firebug and occasionally gedit. These tools are all free (beer and speech-wise). I’ve used most of the others mentioned and they all have value, but I won’t use over-priced, proprietary tools any longer. Thanks for a valuable post!

Gustavo Apr 29 2009

CSS Edit! Greatest program for CSS development. I have pretty much stopped using Dreamweaver and will be teaching CSS Edit in my college level courses if I can get to pass through the administration. I will try out Coda b/c I can’t stand Cyberduck for FTP and have started to use SSH instead, and no one likes command prompts!

anistock May 13 2009

dreamweaver and photoshop are the staple diet for most of our team, although CSS edit has popped up in discussions

Notepad++ with it’s plug-ins is the best editor out there. As for graphics, nothing compares to photoshop, but you need a JPEG compressor because it’s stinks.

Module23 May 26 2009

Firebug is one of the useful tools out there, but is there any other on-the-fly tool compatible with other browsers like Safari or Chrome?

dotjinks Jun 10 2009

I second or third on the coffee. Would not get anything done without it. I like to use Notepad++ when dealing with someone else’s dw template files.

What I would like to add to your list is InType for source code editing (as an alternative for NotePad++).

@Module23: for IE, starting from IE8, there is a built-in developer tools to help debug sites for IE. Also there is available a JS based, so called, FireBug Lite, that can be used in any JS compatible browser. However, none of these is so useful and comprehensive as FireBug does.

staronline Jun 28 2009

How can you manage a full site with thousand of php, css pages ? with notepad ? i have tried much programs like nvu who changed my code when i save the document … Dreamweaver never added a single character for years in my code and never missed something when doing a search for a single word over all the site.

Another great feature of Fireworks for working up web designs is I can see the exact position and size of an element. This makes it easier to be pixel perfect, rather than having to zoom in to slice in Photoshop. I hope people will give it a try.

Vancouv Jul 10 2009

Fireworks makes life so much easier;) and Firebug was a total gem to discover!

Notepad++ is my tool,
Dreamweaver is also cool,
with the new trends to build lighter site…..
i use as little graphics as possible…so PS can do all i need
so with Notepad++ n dreamweaver

hahaha cow, nice one thnx adobe guys thingy you guys totally helped me on my school research thank you

Waheed Akhtar Oct 01 2009

Dreamweaver, Photoshop, Flash what I use :)

I learned web design with dreamweaver. Then started to code by hand using ultredit and have recently switched to iStylr because it lets me collaborate online with my freelance buddies

I’m surprised at how popular Dreamweaver is!

Don’t get me wrong, Dreamweaver is a great tool, and it has improved hugely in the latest versions, but it is still quite the behemoth when it comes to coding up a website!

Personally I find the extremely speedy Espresso – http://macrabbit.com/espresso/ – to be a much better tool for Mac, or PSPad – http://www.pspad.com/ – for Windows, simply because of how fast they are and how effectively they reduce the clutter. Both of these programs get rid of all the excess, it’s great.

It’s great to see Coda up there, it is well deserved!

chander Nov 27 2009

dreamweaver is the best tool for creating the web site.it is very difficult to create a web site page without dreamweaver .

sorry, i was not searching for a survey.

austiner Dec 25 2009

I am new in the business, but I use photoshop and notedpad to do websites, and file zilla for ftp. You mentioned firebug my friend uses that, I guess i’ll check it out , seems like a good list.

rihana verma Jan 09 2010

its good but need help, i need help to find out what is better,

cheltenham Jan 15 2010

some of these apps are essential for web design but for me DW and Firebug are on the top of my list – note to self… must investigate Coda

Rahul Sethi Jan 17 2010

Dreamweaver is best 4 both designing & development

Bambang S Jan 31 2010

I LOVE YOUR POST VERYMUCH
KEEP POSTING, THANKS A LOT

Great list ! I prefer Fireworks ’cause PS isn’t all about
web designing.

dheeraj Mar 13 2010

Hello all the web designers. I’m also interested in web developing and designing it. I’m just the beginner. May I know the combination of these tools and the databases for this?

Vinfotech Mar 25 2010

Photoshop and Dremweaver are reeally very good. I have not heard about the rest. I have learned about the other web design tools after going through this article.

Many thanks for sharing.

Cijo Cyril Apr 11 2010

Fireworks & Dreamweaver s d best

dream waver is better

Dream waver and photo shop are the best …

I love Fireworks, best tool for web design and user friendly

Student Aug 20 2010

what ever you desire, a good designer application is that which helps in rapid designing.

GraveDeen Aug 21 2010

As a veteran page designer who started at IBM in the early ’80s using SGML and PostScript, I’ve used more professional page design products than most people have heard of, including: Xerox Star (first GUI environment) and Ventura Publisher, IBM Mainframe-based DrawMaster and BookMaster, MS Word (1.0 on), TRON/TROFF, Arts&Letters (first bezier-curve-based vector drawing program for the PC), Aldus PageMaker and Freehand, CorelDraw, Adobe FrameMaker, Illustrator, PhotoShop, InDesign, DreamWeaver and Fireworks.

Many of you seem to be bent on PhotoShop, which was developed for print projects. It has undergone some changes to include web-specific functionality, but more as an afterthought. Its vector drawing tools are still clunky after all these years. PostScript is at the heart of PhotoShop’s export function, which still leads in the print arena. But HTML is at the heart of web content, and web pages bring a new element to the designer’s table: interactivity.

Enter Fireworks! Macromedia had a great idea: develop a web-specific design/drawing program that combines the best of PhotoShop’s raster processing tools with the best of the industry’s vector drawing tools (bezier curves and text, with fill and line properties) and use the familiar Adobe interface with layers, frames (or states) and object properties, but with DHTML and web-optimization at the heart of the export function. How perfect is that?

I jumped from PhotoShop to Fireworks as soon as the bulk of my projects became web based (version 1.2). That was before CSS became prevalent and developers were still using the tag to do page layout. The HTML/Javascript generated by Fireworks was righteous in those days.

When Adobe took Macromedia, my biggest fear was that they would kill Fireworks as potential competition to PhotoShop. I knew they would kill FlashPaper as competition to Adobe Reader–which they did. But Adobe has shown great wisdom in keeping Fireworks as the web-specific design and development tool in their creative suite. Fireworks CS5 offers righteous XHTML/CSS code generation (although somewhat CSS-class-verbose).

All projects are not the same. But Firework’s versatility makes it great for complete single-page projects (such as HTML email), or for specific snippets of interactive code and graphics that add to a more complex site architecture.

Good mechanics reach for the right tool for the job. If I were designing for print media, I reach for PhotoShop. It does wonderful color separations and pre-press. But when designing/developing a web page, I reach for Fireworks.

alonso munoz Sep 13 2010

why would coffee make it on here? just kidding i dont know what im talking about. im only on here cause of my web tech class

I am interested with web designing.., I hav little work out with photoshop. but am not aware of any other s/w that u ppl r taking about.., frnz plz guide me…???

Talk King Oct 20 2010

The reason why I create this site is because I find it is so hard for me to get a favorite one as easy as possible

zane walter Nov 13 2010

I have better alternative named proofhub which I am using for the past 6 months. It true that its feature and price can beat others.

thanks for useful information…..
i think firework is best..

They don’t mention any type of form builder in the top 5.
I need to build some quick hosted web forms. I ran across:
http://www.formsite.com and http://www.elbowspace.com. Has anyone had any experience with these? Are there other suggestions?

All the tools have their own capability but i like dreamweawer most.It makes my work easy and its interface is much easy to use
thank you

jarrell Apr 11 2011

if i where you i wiil use firebug

Cody Bonney May 07 2011

All excellent tools. I’m not too big on dreamweaver though.

hi,if i where you i wiil use firebug

I completely agree with all your selections…Photoshop & Dreamweaver are my personal favorites for web design and firebug is really very helpful…Thanks for this article!!!

i like this

Princewell Aug 10 2011

i want to be a professional web designer. Can any one teach me…. My e-mail is [Email removed for privacy]

where is ADOBE FLASH BUILDER????????

photoshop is my favorite but i like wordpress and artisteer but with wordpress it is so easy to use and looks so profesional

GraphicDesignGurl Oct 05 2011

I really like photoshop, probably because I that’s how I learned how to do graphic design. I also think firebug looks pretty awesome (although complicated).

For me it’s got to be Fireworks, Firebug and Nano for coding. I would love a decent Windows alternative to Coda, but that’s maybe too much to wish for.

I’ accept the clear view of
“GraveDeen
August 21st, 2010″.
What an experience he has!!!!
Photoshop for printing
dreamweaver or firework for developing….
use tools according to ur needs…

This comment section is closed. Please contact us if you have important new information about this post.

Partners