5 Apps for Webdesigners and Web Developers
If you are in the process of creating new websites, the first thing you need is to address the target group. Then you want to get an idea of what you’re making and work on a concept with rough sketches and wireframes.
When you’ve worked your way through prototypes, there are countless applications that can take you on to the fun part: creating beautiful web pages.
In this article I have compiled a list of top 5 most essential applications I use in my work as a web designer.
1. Adobe Photoshop CS4
This program is considered industry standard as it is the current market leader for commercial bitmap and image manipulation software. Despite the stiff price of $699, Photoshop is without doubt the preferred tool for serious designers worldwide.
If you’re a web developer or designer with a limited budget and less need for advanced functionality, you will go far with open source apps as GIMP (mac/pac) or Paint.NET (pc only). Both of these programs also allow you to import. PSD files.
Download trial: Adobe Photoshop CS4 (mac and pc)
2. Coda
There are countless types of text and code editors and correspondingly many opinions about what is best. But of all the editors I’ve used, Coda sticks out as the best. It has a relatively stiff price of $99 for a single user license, but the price can be justified by an incredibly intuitive interface, ability to collaborate in teams, customized add-on modules, spelling and subversion.
Text Mate is an option that also reap a lot of praise, but I have no first hand experience with this application. May be worth checking out.
Adobe Dreamweaver is probably one of the most well-known editors that works on both Mac and PC, but at a price of $ 399, Coda is for me without doubt the preferred option.
Download trial: Coda Panic (mac)
3. MAMP/XAMPP
This program lets your computer run as a test server during development of dynamic web pages. Whether you program in PHP, Perl or Python, you can work against a local MySQL database without the need to upload files to a remote server each time you make a code change.
Download freeware: MAMP (mac) or XAMPP (pc)
4. Mozilla Firefox (with Firebug)
For me, Mozilla Firefox is the preferred browser because of the huge variety of free add-ons and the large community of engaged developers and users. As far as I can see, Firebug will be the most essential plugin you’ll need in web development projects. This add-on allows you to debug and monitor CSS, HTML and JavaScript live in any web page.
Download freeware: Firefox (all platforms)
5. Transmit
If you are looking for an affordable FTP Client for Mac OSX, don’t look any further. Transmit comes with handy features such as uploading via dashboard widget or docking, support for. Mac and iDisk / WebDAV, Spotlight and Automator. The program costs $ 29.95, and a free trial is avaliable here.
If you only require a simple FTP Client without too much additional functionality, Cyberduck is a good and free alternative.
Download trial: Transmit (mac)
Download freeware: Cyberduck (mac)
Do you have any suggestions to other apps that could improve my workflow? Feel free to share your thoughts!
Great to see a designer that cares about the process following the design — and the tools used! :)
I believe in hand coding XHTML and CSS. Any serious web- or front end developer should be able to turn design into hand coded semantic & table less markup + CSS. Dreamweaver is the devil’s work.
As far as code editors goes, yes there sure are a lot of opinions, Ole Fredrik. And here’s mine: I wouldn’t use anything else than PDT (http://www.eclipse.org/pdt/) for PHP development. At least if you need to do more than a simple web page. As it turns out, it’s even built on top of eclipse — meaning that you only need a single editor for both your PHP, Java, Python, XHTML, CSS, XML, XSLT, etc. needs (eclipse, that is). Sweet :)
Id also throw in the Web Developer Toolbar, YSlow, HTML Validator and Live HTTP Header* add-ons for Firefox by the way….
* Just for saving my day when I submitted this form without first filling in the e-mail field (hit browser’s back and the comment field was emptied)
@Zeynep: Thank you very much for taking your time to comment! I’m glad that you found the post useful.
When it comes to the text editors, there are many opinions about which tool is best. Although I’m sure some web professionals disagree, I consider Coda an invaluable tool.
But I think all web developers will agree that the Firebug addon for Firefox is priceless. Once you have learned to use it, I’m sure it will save you a lot of time.
Hi, thank you for this post, it’s very helpful.
I actually found your website through Weekly Web Design inspirations on my Twitter feed. (posted by @sharebrain)
http://d-lists.co.uk/2009/10/26/weekly-web-design-inspiration-25/
I think you did a great job with this design, it’s very clean and streamlined.
I’m not a professional web designer, I’m entirely self-taught although I’ve been designing for about ten years now. I’m just now discovering some of the more advanced PHP and CSS tricks. I’ve started subscribing to some web design blogs and twitter feeds but it can be a little overwhelming, there’s so much stuff out there. I think I’m a little behind the curve! I’m actually still using Dreamweaver for lack of a better option, although I downloaded Coda, MAMP, and FireBug based on your recommendations. I also use Transmit, which I love. Unfortunately I’m still only a student so I’m stuck with my old copy of Photoshop CS. Maybe soon I’ll be able to afford the upgrade to CS4. :)
Thanks again for the helpful post!
@Oskar: I would rather not use Dreamweaver as my first choice. Coda is so far the best editor I’ve used. But there are actually several Norwegian educational institutions that encourage students to use Dreamweaver for coding web pages.
@Matt: I have not tested Yummy so far. Transmit seems to cover all my needs. Can you say something about what is better with Yummy? Thanks for the tip anyway:)
@Mario: I also prefer to hand code XHTML and CSS. Coda is a perfect tool for this with clever spelling and a variety of plug-ins. Thanks for the nice comment:)
I use Dreamweaver as a file manage and FTP client, but hand code XHTML & CSS.
I couldn’t live without Firebug, which saves me enormous time debugging CSS issues between IE and Firefox. It’s also extremely useful in testing various design elements. Also, I use “Run YSlow,” which is a great a plug-in providing very useful data pertaining to a site’s page weight and overall performance.
Luv your site and blog Ole!
Oskar, I cant agree on that with Dreamweaver. I still use it a lot.
That being said I spend a lot of time in eclipse based editors. Its my choice for PHP Dev and AIR Development.
Yummy FTP is way better than transmit IMHO.
As far as I agree with most of the points, I find it funny that a web-developer can even mention this joke of an application called Dreamweaver. No offense man, but it’s 2009 not, 1999. Nowadays people use TextMate or Coda for beginner.
Hi, thanks for your comment! Glad you liked the photo. I wanted to capture a cozy geeking-by-night mood :)
I agree on Illustrator, it’s definately a handy tool, but for some reason I don’t find myself using it very often in web projects. Guess I’m probably more of a pixel guy :)
I love the photo for this post. I shot my own workplace just a couple of days ago for my own website, but that looks boring next to this one. The light sources really set a nice mood on your picture.
(Oh, and on the apps: I agree, but I need my Illustrator as well!)