An overflowing bathtub of creative stuff.

May 12

10 must have tools for the Mac based Web Designer

Add

Web design. It’s got a lot of names these days. From Information Architects to Usability Experts, it can be hard just knowing what to call yourself if you wrangle pixels for a living! The choice of what tools to use to wrangle said pixels can be even harder. Here is a list of 10 of my favourites. I consider them all to be “best in class” for their prospective jobs, but if you have an alternate suggestion and would like to let us know why you prefer it, don’t keep it to yourself!

Before we get started, an admission: These days I am a total Mac convert, long gone are the days of building my own computers and cursing endlessly at Microsoft’s ineptitude. If you are not running an Intel based Mac system on at least OS X Tiger, you has my condolences but you should know that this list is not for you. Number 1 on any list of useful tools for the web professional that I write would be a Mac. That’s just me, but I thought I’d better explain who this information is aimed at as I’m not sure that all of this software is available for other computing platforms. Right, onwards!

  1. Textmate

    Textmate is THE text editor for the Mac. It is one of those tools that looks fairly simple at first glance, but beneath this superficial simplicity lies the power of a unix monster! Textmate integrates seamlessly with your Macs terminal prompt, connecting at the very core of your system. You can open files to be edited from the terminal itself. Very handy. This is just the start of the story though, Textmate is fully customisable, both in terms of look and functionality. You can chose from a plethora of custom color coded skins to help you write your code, or if you can’t find one that you like you can make your own! Textmate also comes with an extremely smart set of behavioral shortcuts and commands that are wrapped up in “bundles”. Textmate is fully extensible, so if it doesn’t come with a bundle you need you can just add it on later. Remove the bundles you don’t want, add the ones you need.

    The fluid manner in which you can customise Textmate ensures that you will always be able to adapt the program for the particular set of tasks that you would like to perform. There are bundles for almost everything, from HTML and CSS to Ruby and SQL. There is even a Blogging bundle, which I am using to write this very post right from within Textmate!

    This brief synopsis really does just scratch the surface of what is a juggernaut of a web development tool. It’s not free, but it is very good value for money and their is a free trial version. If you are still building websites in Dreamweaver or some other GUI based tool do yourself a favour, bite the bullet and begin to learn to code your creations in Textmate instead. Yes there is a bit of a learning curve to doing things this way, and the text based approach can seem a little daunting at first, but trust me it’s worth it! Not only will your sites improve, but ultimately your understanding and control of what is going on will as well. Faster, more fun, with better control. What’s not to like!?

    You can download a copy of textmate from here: http://macromates.com/ and there is an excellent book on the subject from the pragmatic programmers:http://www.pragprog.com/titles/textmate/textmate

  2. Firefox

    There really is no excuse not to have Firefox installed if you are in the business of building websites. It’s free, it’s relatively small, and it’s very very extensible. It is this extensibility that has made it the most popular browser in use today. No matter what you are trying to do, or how you are trying to work you can be almost certain that there is a plugin for Firefox that will fulfill your needs. This is especially true for the web designing fraternity, with all manner of useful tools constantly popping up. There are far too many Firefox plugins for me to list here, but I will give you the low down on the ones that I think pass the Daz doorstep challenge and make it onto my installed list.

    Firefox itself can be installed from here: www.mozilla.com/firefox/

  3. Transmit

    FTP clients are hardly what you would call sexy software. They ferry a load of information from one place to another. So what really counts is functionality, reliability and transparency. Transmit has all of those things in spades. The interface is well thought out and easy to understand, it gives you all the information you need as and when you need it, and it very rarely goes wrong. In fact it has never gone wrong for me. Ladies and gentlemen we have a winner! Icing on the cake are features like being able to create a droplet file containing all of the relevant information for a specific account. This droplet can then be zipped up and sent to the person needing access, they double click it at the other end and voila! Transmit on their machine will open with all of the relevant access informaiton already in place.

    Transmit isn’t free but it is very reasonably priced. http://www.panic.com/transmit/

  4. CSSEdit

    Even if you are a die hard text based web site builder (like me!) it can be useful to sometimes step into GUI land when developing the CSS for your site. Most CSS work can be done straight from a text editor, but even the most hardened of coders will occasionally forget the odd styling rule, or want a visual cue to tweek their layout so that it is perfect. This is where CSSEdit comes in. CSSEdit is an extremely light weight and responsive tool for building style sheets and viewing the changes in real time. These changes are rendered using Webkit so you are effectively seeing the output from Safari as you amend your styling rules. The changes are instant, the GUI elegant, and the program responsive. If you have been trying to build stylesheets in Dreamweaver you are in for a treat. CSSEdit is not free, but as with Textmate and Transmit it is extremely good value for money.

    You can download a copy from here: http://macrabbit.com/cssedit/

  5. Color Schemer Studio

    This little app is an extremely simple concept: Provide a way for designers to choose colors that complement each other, store them together, and recall the hex values for those colors with ease. Once you have started using this app for your color choices, you’ll feel lost without it. It excels at being a handy and simple repository for the color based information that may be flying around your computer as you move from application to application. Try it, you’ll like it.

    Color Schemer Studio isn’t free, but it is very reasonable, check it out here: http://www.colorschemer.com/osx_info.php

  6. Illustrator

    In my opinion Illustrator is the jewel in the crown of Adobe products. If you are lucky enough to own a graphics tablet (I recommend the Wacom Intuos range) then using Illustrator really is a treat. For those that aren’t familiar with Illustrator it is a vector graphics program of the highest order. Vector graphics files differ from their bitmapped counterparts in that they rely upon mathematical coordinates to reproduce what is on the page, they do no track pixels. The use of coordinates brings several key advantages, the main ones being the size of the files created is generally much smaller than their pixel based counterparts, and vector based images can be scaled to any size without any loss of quality or aliasing. With those key advantages in mind Illustrator takes the premise of the vector image and runs with it.

    Since CS4 Illustrator finally has support for multiple art boards in one document. This is incredibly handy for developing graphics in different sizes for different tasks, or for creating differing versions of something based on a common template. Illustrator is not the most intuitive program to use but it will reward those that take the time to progress beyond the learning curve. As with all Adobe products, Illustrator isn’t cheap.

    You can find the Illustrator page on the Adobe website here: http://www.adobe.com/products/illustrator/

  7. Fireworks

    Fireworks is a little bit like the black sheep of the Adobe family. Everyone knows about what great tools Photoshop and Illustrator are, but all too often Fireworks is overlooked. This is a real shame because it really is a gem of a program for anyone wanting to design for the web. Fireworks is something of a hybrid, it can deal with bitmap images and vector images on the same page. This is incredibly useful for anyone that works some of the time in Photoshop and some of the time in Illustrator. Fireworks becomes the hub of the design process, a place where the prototype page designs take place. Fireworks also allows you to create multiple pages and templates within one file, and allows you to create image “slices” from those pages, meaning that you can keep one Fireworks master file that contains all of the images for your site! Very handy indeed.

    The interface is very similar to the other Adobe design applications which makes picking up the program easy if you have spent any amount of time in Photoshop or Illustrator. As of CS4 Fireworks can now even convert your wireframes into working HTML and CSS pages. This is a very cool feature for a quick look at your design in a browser, but in no way would I recommend using the outputted CSS for deployment! Still it shows that Adobe are looking to evolve Fireworks and are trying to further integrate it with the web design process.

    As with most Adobe products Fireworks doesn’t come cheap. Although I love some of their software I do think that Adobe products are generally overpriced in comparison to some of the other excellent software out there. That said I haven’t found programs to replace any of my Adobe tools. If you use something that you think is better, and it’s cheaper I would love to know about it!

    Adobe Fireworks can be found on the Adobe website here: http://www.adobe.com/products/fireworks/

  8. Expandrive

    Expandrive is a handy little application for the Mac that enables you to connect to remote drives as if they were hard disks on your computer. You can access these drives straight from the finder just like any other hard disk! The program is based on the Macfusion open source program. Macfusion provides similar functionality to Expandrive with the added bonus of it being free, but at time of writing MacFusion was a little buggy and harder work. Expandrive is very reasonably priced in any case, and as the main reason for having a program like this is convenience it seems silly to scrimp here! Expandrive provides support for the SFTP (SSH) and FTP(S) protocols, and as of version 2 now supports Amazon S3 straight from within the finder. Very cool.

    You can buy Expandrive from here: http://www.expandrive.com

  9. Suitcase Fusion

    Suitcase fusion is a font management tool. Although this doesn’t initially sound that important or interesting, font management quickly becomes a major issue for many designers. The problem is the number of fonts that a designer may need in their library. Traditional font management software like the kind that comes integrated with OS X on the Mac, does a great job of keeping track of what fonts are installed when the number of fonts on the system is at a reasonable size. However it will quickly give up the ghost when confronted with a mound of thousands of typefaces to activate. The system will become sluggish, then unstable and things will begin to go wrong. The solution is Suitcase fusion. This super clever program will manage all of your fonts in one giant “vault” file, quickly and easily allowing the activation of fonts as and when they are needed. Fonts can be activated permanently, or just for the duration of that session. Even better, Suitcase Fusion ships with several plugins for major design programs (such as Illustrator). These plugins will automatically detect any fonts that are needed when a file of the relevant type is being opened, and activate the necessary fonts. Very slick. I’ve tried quite a few different systems for managing large numbers of professional fonts and Suitcase Fusion is by far the best. It may not be the cheapest font management tool out there, but it is the best.

    You can find Suitcase Fusion on the web here: http://www.extensis.com/en/products/suitcasefusion2/index.jsp

  10. VMware Fusion

    Product number ten in my illustrious list goes to VMware Fusion, which should not be confused with Suitcase Fusion from the previous entry! VMware Fusion is an emulation environment for the Mac. It enables the user to install any number of virtual machines on top of OS X and run them in tandem with the native Mac operating system. This is incredibly handy for the web professional as it allows you to test across a much broader range of browsers. I run a Windows XP virtual machine through VMware Fusion on my Mac and this enables me to test in Internet Explorer and Google Chrome from my Mac. This is beyond handy. VMware Fusion is not free software, however there is a comparable open source program available from Sun Microsystems called http://www.virtualbox.org/. I prefer the integration of VMware Fusion. It offers additional features like Unity mode which enables you to run emulated applications in your dock as if they were native OS X programs. I find these added extras hard to walk away from but it’s nice to know that there is an open source alternative.

    VMware Fusion can be found on the web here: www.VMware.com/Mac

Posted by: Ian Alexander Wood

Leave a Reply

(required)

(required but will not be published)


(required)

category

tag cloud

twitter

Tweets from:
Ian Alexander Wood

Tweets from:
Andy Hicks

Tweets from:
Ravi Abbott

archives