10 Web Design Tools I Can’t Live Without


Everyone has their favorite methods, tricks and tools for completing their work. As a Mac Webdesigner/developer, I thought I’d share my list of indispensable software and resources that I use on virtually every project. I wouldn’t call this list exhaustive as I have left out a couple things like an FTP client (though I do like Transmit) and an SSH client (I simply use OSX’s terminal), but it should give a little insight into how I get things done. I primarily use Firefox as my browser of choice, so some of the tools here are actually add-ons for the browser.

  1. A decent text editor. I use BBEdit, though I sometimes use Eclipse/Aptana as well. Say what you want about WYSIWYG editors, they’re easier, they’re getting better, they have a lot more features, etc… I really just haven’t ever liked them. Sure Dreamweaver is much better than it used to be, Coda isn’t bad and Espresso looks pretty promising, but they still seem to get between you and the real markup IMHO. They all seem to let you down with their previews eventually anyway, so what’s the appeal? I haven’t been able to pin that down, and so until then, I edit in a text editor and preview with a browser. Honestly, I have a version of BBEdit that is a little old, so I may eventually shift away from the slightly overpriced standby, but old habits die hard.
  2. Omnigraffle is tops in my book for wireframing and process documents. Sitemaps, data design, UI prototypes, etc pretty much always start here for me. I use it for sketches and for client delvierables alike. It’s easy, fast and extensible. I love it. To enhance the already great app, head to Graffletopia.
  3. Photoshop is most likely in your toolbox, too. That or Fireworks. I use the save for web for all my images feature now that Imageready is no more.
  4. Kuler/ColourLovers. I seem to switch back and forth between the two color palette creation sites. Each has their pros and cons. I like Kuler’s flash tool interface a tad better, but ColourLover’s community is just awesome. When I feel creatively stagnated, I often pop over to one of them just to work up some palettes and get inspired.
  5. The Web Developer Toolbar. If you don’t have this installed on your Firefox installation you are simply wasting too much time debugging and validating your markup and CSS. With the built in guides, grid and rulers, the toolbar in many ways seems to obsolete the tools in many of the WYSIWYG editors out there. I could probably write a post on just this tool alone, because each top level menu in the bar is loaded with useful utilities and features.
  6. Firebug is a great combo/tag team tool to use with the Developer toolbar. The DOM inspector, HTTP request logger and header inspector along with the great inline CSS and HTML editing tools just make this another have to have editor tool for your browser.
  7. Colorzilla is another handy little add-on that puts a eyedropper tool in your browser’s status bar. Sample the color of any pixel in your viewport, use the zoom to get nice and precise and then copy the hex color to your clipboard to use in an editor or your image editing program. Saves a lot of back and forth between Photoshop and the editor for me.
  8. VMWare Fusion/Windows. Yes, we live in a windows dominated world. So, for my cross platform testing, I have to have a Windows partition with IE6, 7 and Firefox installed. I use IE Developer toolbars over there and also have used IE Watch in the past to track HTTP requests in the browser that everyone detests. I’m hoping we can drop support for IE6 soon, but I’m not holding my breath.
  9. Pngbehavior/Pngfix. I can’t wait to not need this. But, until IE6 is no longer in my list of browsers to test against, I am going to need to be able to use one of these methods to get PNGs to render as transparent images in this aged browser. I was thinking about not including this in my list, but again, I don’t think I have produced a site in the last several years that didn’t need this.
  10. My Delicious bookmarks. With nearly 800 web design focused bookmarks and no filler, this resource is one I use to solve quirky rendering problems and find inspiration or tips first. It’s like a mini Google of web design tricks, but all tagged by yours truly. Now, I can’t guarantee the answer to everything web is in there, but more than likely there is something I have saved in my account that you can use.

So, there you have it. My must haves. What have I missed? What can’t you live without in the W3C sea? I’m interested in learning more, so as always, let me know what you are using to create your work.

Posted on


79 comments

  1. JoshuaJonah Oct 12

    Coda isn’t a wysiwyg editor, you should really try things before you make an opinion of them.

  2. Chad Oct 12

    Joshua,
    thanks for dropping by. I would definitely call Coda a WYSIWYG editor. With it’s integrated preview/editor metaphor, sure, it let’s you edit the HTML as it’s method of input, but the integrated approach serves the same purpose of Dreamweaver or iWeb’s basic editor… to let you see your layout prior to opening it in a browser.

    And, I have tried Coda. I have the trial, used it on a site, didn’t really dig it.

  3. James Oct 13

    I use Dreamweaver as a code editor and site file manager, for which it works very well.

  4. roblob Oct 13

    Great toolbox advise. I was familiar with most of your suggestions and can heartily agree with you.

    Another handy tool for Firefox is MeasureIt, which (with your above suggestions) pretty much completes the tools I’ve found I need in my browser.

    But the real gem for me was was your Delicious bookmarks. I’ve been going over them all day, wasting precious work time. Great links! Thanks.

  5. EllisGL Oct 13

    I used Netbeans for my code editor.

  6. Candice Ho Oct 13

    Didn’t know about Firebug, gotta try that one. Here’s a few of mine

    ColorSchmere – ( http://www.colorschemer.com ) good for pallet selection makes it so much easier to get hex -to- rgb values. Use it with colorlovers or colorjack for best results.

    ZenGarden – ( http://www.zengarden.com ) just so much talent here. How can you not be inspired by some of the things people create. Use it to get some creativity also great with css showcase for when you’re having brain drain.

    Delicious – you already said it but yea its great resource.

    FreeTube TV – ( http://www.freetube.us.tc ) always flying to get to clients, so I find myself relying on this one to keep abrest of the news. and what’s going on. I’d feel so cut off without it, when you land at 3:00 am in Houston with free wifi but your connecting flight is delayed you’ll understand why this is great.

    Core77 ( http://www.core77.com/blog ) – blog I frequent. Good for more then just web design. Lots of great stuff here.

    I also have a subscription to a few design magazines that I couldn’t live without. I get lots of resources from there.

  7. Andy Sowards Oct 13

    Delicious bookmarks very much rock!

  8. Daniel Lyons Oct 13

    Coda is definitely a text editor with some accoutrements. The preview is just WebKit, so if you use it, you’re getting to see what Safari or Chrome is going to do with the page. It’s not really “prior” to opening it in a browser–it is opening it in a browser. Hard to see how it could be getting between you and the markup since if you want to edit a page you have to edit the markup itself.

    The structured CSS editor is closer, but it isn’t really WYSIWYG, it does map directly to the CSS, and it happily edits hand-built CSS.

  9. Egypt Urnash Oct 13

    BBEdit? I tossed that for Textmate ages ago.

    And don’t forget tool #0: pencil and paper. Get away from the computer for your preliminary roughs and you’ll feel a lot freer/

  10. Kevin Reynen Oct 13

    Why can’t I like to a specific comment? Both the username and the date link to the user’s website.

  11. Scott Reynen Oct 13

    You keep using that word. I do not think it means what you think it means.

    WYSIWYG stands for “what you see is what you get.” What you see in Coda is raw source text. What you get is a visual website. That is not WYSIWYG.

    The point of WYSIWYG is not “to let you see your layout prior to opening it in a browser;” it’s to let you see your layout while editing it, which you can’t do in Coda.

  12. Michael Oct 13

    Hey Chad, I was quite interested when I saw your article title but when I started reading #1 and you called Coda and Espresso WYSIWYG’s I lost some interest. You need to learn the definition of a WYSIWYG. You were right on the money with Dreamweaver but Coda is not a WYSIWYG by any stretch of the imagination. The code is all you can edit and what you type is what you get.

    The rest of your list seems pretty spot on with what I use everyday, with the addition of Transmit, MacFusion and Terminal.

    Thanks.

  13. Kevin Reynen Oct 13

    Sorry, link… not like.

    And I guess the question is really why isn’t the anchor linked somewhere on the comment since unique ids are available in page.

    http://visualrinse.com/2008/10/12/10-web-design-tools-i-cant-live-without/#comment-70885

  14. Chad Oct 13

    Scott and Michael,
    Thanks for visiting and your comments… So on the topic of Coda and WYSIWYGs… yes, I am aware that Coda is an editor. It does have the intergated preview (http://www.panic.com/coda/img/screenshots/editor-screenshot_02.jpg), so, while a slightly different take on it, the basic premise is that you can edit and test without using a standalone browser… isn’t this right? Not truly WYSIWYGgy (where you are actually editing a visual representation of the piece), yes, but still a different workflow than what I prefer.

    Now, granted, I have only used Coda for a brief time in it’s 1.0 incarnation, but at the time it didn’t impress me with it’s workflow. Maybe I’ll have to give it another shot.

  15. Chad Oct 13

    Kevin, you’re the only one who has ever asked for that. I’ll take a look an edit the template just for you! ;-)

  16. Oct 13

    Good stuff in your list but I have to chime in on your first item as well.

    When I started doing Web sites, I used code editors for a long time, especially HomeSite and TopStyle Pro. But now I really love working with Dreamweaver. Its code editing features are on par with any other pure code editor out there and it doesn’t get between me and the real markup any more than HomeSite, or Notepad or any other pure text editor would. I rarely use Design View but love having it or the new Live View in CS4 visible as I work on the code. Beats a pure code editor for me any day as I can see the effect of my changes right away without having to fire up or switch to a browser.

    As for color, you should really try Genopal (http://www.genopal.com). It really is different from any other color scheme creation app I tried.

  17. John Moats Oct 13

    This is the most heated debate of the meaning of WYSIWYG I have seen in a while… anyway, I think you started the MM465 delicious page when I was in your class. I still use it as a reference. I would also add Redbull/Monster Energy to the list, for those all night sessions.

  18. snipe Oct 14

    Not much of a debate, really. Coda != WYSIWYG. It just isn’t. Its a text editor with some auto-complete functionality and a preview window, just like UltraEdit and EditPlus for Windows – and no one would ever call those WYSIWYG.

    I have a long list of FF extensions that are very useful, available here:
    http://www.snipe.net/2007/01/firefox-extensions-i-cant-live-without/

  19. Nathan Oct 14

    Hi, just adding gas to the fire. From a person who swears by text-edited HTML: Coda is not WYSIWYG. THE END.

  20. Tim Jahn Oct 14

    I don’t know how I lived without TextMate after using it for awhile now. So awesome!

  21. Chris Oct 15

    Please contact me. I have a question on SWFShot. Thanks

  22. polyGeek Oct 18

    I’ve been using NoteTab Pro for all my HTML coding for over a decade. It’s just a rock solid, easy to use text editor. Nowadays I hardly ever do any HTML coding outside of what I insert into a blog post. NoteTab Pro is great for creating custom snippits to make your life easier.

    http://www.notetab.com/

    The other tool I use is my own AIR app: pixDIF. I probably use it a few times a day. It just so quick and easy to help measure and see how changes might look.

    http://polygeek.com/pixdif-utility-for-showing-you-the-difference-between-your-design-and-websiteapplication

  23. James Oct 21

    Did you sneak a look at my workstation or something? I’m using most of the same helper apps except I’ve recently switched to Zend for editing because I’m doing a lot of PHP work and the function tips are great.

  24. Jagad Guru Oct 27

    Hey Chad, I was quite interested when I saw your article title but when I started reading #1 and you called Coda and Espresso WYSIWYGs I lost some interest. You need to learn the definition of a WYSIWYG. You were right on the money with Dreamweaver but Coda is not a WYSIWYG by any stretch of the imagination. The code is all you can edit and what you type is what you get.

    The rest of your list seems pretty spot on with what I use everyday, with the addition of Transmit, MacFusion and Terminal.

  25. Flug Oct 29

    I just installed the developer toolbar:) Oh dear, I didnt even knew that something like this exists! Its simply awesome, thats why I love FF! I am looking forward to your dedicated post on it! Thanks again!

  26. Jo Nov 19

    I use Dreamweaver in the main and switch into Visual Studio .Net when I need to program a site’s backend.

  27. website design Dec 2

    If you’re technologically challenged and are attempting to make a website for the first time, a web site design template will surely be your best friend. All you have to do is choose a template that represents your product and your preferences best.

  28. Cheap Website Design Dec 2

    as for me, i am really rely on photoshop to survive

  29. Website design Dec 16

    Dont forget ACDSee. I like version 3.1 because it is the fastest image viewer in the world.

  30. Charles Jan 5

    Great list, cudos on the Omnigraffle & Firebug. Special thanks to VMWare Fusion for keeping me off my Vista Laptop as much as possible. More MAC time = happier designer/developer

  31. Laureen Jan 5

    Really just wanted to say a great big thank you! I’ve been out of the field for a while and I’m trying to find my way back in… and your list of tools and bookmarks have been very helpful!

    Regards

  32. Dean Cowart Jan 25

    Omnigraffle looks awesome – I wish they had a PC version. boo

    Carolina Marketing | Vista Designworks

  33. TMYDesign Jan 26

    Awesome post. I use many of these programs currently for my design company and would not be able to survive without them. I will look into a few others you recommended, who knows, perhaps it will help even more.

  34. webdesign Mar 10

    Omnigraffle is great! Didn’t knew this one. Thanks for sharing!

  35. Web Design Norwich Mar 18

    Thanks for these, just found some very useful tools which I shall add to my Arsenal!

  36. Web Hosting – best Mar 29

    Thanks for sharing these useful tools. That only one that I used was photoshop. I am trying all of these and they all seem pretty good especially VM
    Thanks

  37. Web Design California Apr 2

    Great web design tool lists you have here. Mine I usually use DW and PS combo for some of my projects. But my other man are using some other tools. We are more inline with CMS, that’s why.

  38. Dominik Apr 9

    ColorPicker and MeasureIt are really neat firefox-extensions.
    As i code mostly PHP i use the Zend-Studio as Editor for everything.

  39. SEO Programmer Apr 14

    I like photoshop very much but I am still using the old version with Imageready. I can’t still afford to upgrade to the latest one.

  40. Web Design Apr 17

    Spot on. Although I do not use Coda. Some favourites of mine are Dreamweaver, JEdit, Eclipse, ANT, photoshop, Delicious, Acrobat, Flash and Ultra Edit (in no particular order).

  41. Ocular Harmony Design Apr 25

    I’m happy that I happen to have a good amount of these. Firebug has been especially promising to me lately, I certainly can’t live without it. Only thing I’d add to your list is a pencil and paper pad ;) .

  42. Matt Apr 29

    Hi,

    This is a great list! I’d add one thing that I couldn’t live without as a frontend developper.

    Pixel Perfect

    It’s such a great little add-on.

  43. Spaardeposito May 4

    Firebug is key for me, but also a program like WAMP to view pHp site localy.

  44. Taina P. // Sitegrinder May 5

    I use some of the tools you’ve mentioned above, but I haven’t heard of the others. Judging from your brief reviews of them, I’ll probably find them useful, too. I’ll check those out later.

    I find Kuler really inspiring. It’s a pity I can’t make an adequate design with each beautiful scheme I encounter.

  45. Web Apps May 5

    I suggest everyone try the SEO for Firefox add-on.

  46. Los Angeles SEO May 14

    My web design tool that I can’t live without is first Photoshop and second Dreamweaver. They are very powerful tools.

  47. sitegrinder May 14

    Having photoshop on your list is a great option. You can do incredible graphics using this software.
    You must first think of what specific web design you would want to attract your prospected visitors. If you have enough knowledge on the photoshop, I would suggest you try to use sitegrinder
    plug in tool for adobe photoshop this could help you create a stunning web page design without the need to learn any complicated computer codes, and start making stunning website designs with a few simple clicks of the mouse!

  48. Flug Bangkok May 19

    For what do I need Dreamweaver? Photoshop ist the one and only.

  49. marc May 26

    Compulsory we need first photo shop then Dream weaver.Because with out photo shop there is no use of dream weaver.
    Thanks
    Marc

  50. Ricardo Jul 13

    Hello, would you consider doing a review on Linux tools?

  51. Modellbau Autos Jul 13

    Omnigraffle is great! Didnt knew this one. Thanks for sharing!

  52. memory foam topper Jul 17

    Great post i have found about web design tools….Thanks for sharing it :)

  53. scotiasystems Aug 5

    Hi Chad,

    You mentioned Adobe Fireworks – have you played around with this? If so what did you make of it?

    Thanks,

    Nick

  54. Deisgnersart Aug 21

    Good collection! But you could have added some creativity-tools as well.

  55. Chad Aug 24

    Deisgnersart, care to give any examples? I’m not sure I follow you.

  56. home biz Sep 20

    I use firebug when im trying to figure out problems that my blogs have, and it helps me out a lot saving me hours when I was trying to find this one bug that was hassling me and my template.

  57. Meekrab Sep 24

    I like photoshop very much but I am still using the old version with Imageready. I cant still afford to upgrade to the latest one.

  58. Fort Myers Web Design Sep 30

    It’s funny looking back on this post now a year later, a lot of these tools are still very much in use and are still extremely handy. I’m surprised to be truthful. Well…all but the PNG fix stuff. We are very close to the death of IE6.

  59. Rhonnie Dec 1

    Amen to Photoshop.
    What can you say? It’s the best image editor so far.

  60. Linkmoko Jan 7

    No one can beat Adobe Photoshop it’s still the best image editor until now. Agree with me guys? When it comes to web design tools i used dreamweaver it’s the only tool which i really familiar with. Well of course when it comes to simple and plain text editor i used notepad for hard coding for web designing though takes so much time and it’s very stressful. :)

  61. boca raton website design Feb 16

    I use dreamweaver for the design. Just upgraded to Photoshop CS4 and I’m overwhelmed with all the things it can do. From your info, I installed the developer toolbar – I didn’t know this even existed. Thanks for the very helpful and useful information.

  62. memory foam topper Feb 19

    Dreamweaver – $700. Photoshop $500. How does the little guy ever save up enough what with gas and rent and food each month? Unfortunately piracy will run rampant until these tools are made more reasonable.

    If they charged $700 for a hammer and $500 for a screwdriver, would we have any homes?

  63. Chad Feb 19

    Hmm. How much does a computer cost? Software costs money. Software makes you money.

    A hammer might not cost $700, but a professional nailer and air compressor will easiliy run you $500-$600.

  64. Webdesign Roosendaal Feb 20

    Nice list!

    Personally, I’m a big fan of open source/ free applications. Here’s my list.

    - Aptana Studio
    - Filezilla
    - CoffeeCup sIFR Font Maker (comes in handy when you don’t want to buy Flash and want to stick to something free)
    - XAMPP Lite
    - Photoshop CS4
    - A lot of Firefox Addons

  65. Pacquiao vs Clottey Feb 20

    When it comes to web design tools i used dreamweaver it’s the only tool which i really familiar with. Well of course when it comes to simple and plain text editor i used notepad for hard coding for web designing though takes so much time and it’s very stressful

  66. Naruto Manga Spoilers May 15

    I would suggest you try to use sitegrinder plug in tool for adobe photo shop this could help you create a stunning web page design without the need to learn any complicated computer codes, and start making stunning website designs with a few simple clicks of the mouse!

  67. hermes kelly bag Jul 9

    When it comes to web design tools i used dreamweaver it’s the only tool which i really familiar with. Well of course when it comes to simple and plain text editor i used notepad for hard coding for web designing though takes so much time and it’s very stressful

  68. optimizasyon Sep 5

    We shall not forget Google services like analytics, webmasters,adwords,trends… Thank you.

  69. Business Website Development Sep 27

    Thank you for the blog – Hey I added your article to my personal blog page.

  70. Kansas City Email Marketing Sep 27

    If I didn’t have Delicious or Photoshop, I don’t know how I’d survive with site design! Both need a few more refinements, though and then everything would be pure bliss.

  71. alquiler montaña Dec 1

    What about Firebug? I use it everyday.

  72. mattress specialist May 11

    I use photoshop. If I can use it anyone can. Maybe I will look at other options as there are a lot of viable options on this site which seem to be well recommended. Sometimes it just a case of what you are familiar with.

  73. Nick Julia Oct 10

    I am on a mac and am interested in your VMware solution that you wrote about. I am a long time PC user slowly moving over to mac and looking for a good way to test sites in IE on a windows platform.

    Can you give more information on how you setup the VMware?

  1. WordPress Blog » Blog Archive » web design
  2. A Short Addendum to my Web Design Tools List - pixDif | Visualrinse | Design and Development by Chad Udell
  3. A Short Addendum to my Web Design Tools List - pixDif | Iona.LABS
  4. A Few Plugins, Components or Tool Add-Ons Worth the Money for a Web/RIA Designer | Visualrinse | Design and Development by Chad Udell
  5. A Few Plugins, Components or Tool Add-Ons Worth the Money for a Web/RIA Designer | Iona.LABS
  6. #WDNDL For 4/13/2009 | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?

Leave a reply