How I Use Web Design Tools for Web Development

by Matt Montaruli on August 2, 2012

Developers and Designers generally use very different tools. Web Developers live in the text editor, while Web Designers create their masterpieces in graphics software (often one of Adobe’s products).

However, it’s not uncommon for Designer and Developer roles to cross, causing the Web Developer to dive into design software in order to complete their coding job.

Additionally, a Web Developer’s use of design software will be quite different from how a Designer uses this software.

Below I detail which design software I use to code a website.

Adobe Illustrator

Our design team almost exclusively uses Illustrator when designing websites. As a developer, I generally use Illustrator when viewing the initial design file and extracting the individual elements I need for coding the site.

After experimenting with Illustrator, I’ve found selecting individual elements from within Illustrator much easier than in Photoshop. While Photoshop would require sifting through a list of layers in order to select the correct element, you can simply mouseover and click the element in the canvas to select it in Illustrator.

This is basic stuff for designers, but developers have varied degrees of expertise in design programs. This functionality saves countless hours for developers when extracting the individual elements they need from a design file.

Adobe Photoshop

I’ve found that my Photoshop use has been reduced to very basic image manipulation (after extracting an element from within Illustrator) and then “Saving for Web”. That’s it.

If your design team uses Photoshop for design, your usage will likely include element selecting (via the Layers panel), as well as cropping, maybe changing opacities and tweaking layer effects of an element before Saving for Web.

Adobe Fireworks

Fireworks is kind of an interesting hybrid between Illustrator and Photoshop and saves files as a non-flat PNG. Like Illustrator, Fireworks allows you to select individual elements by clicking on the actual element in the canvas.

I’ve found that I generally prefer designing in Fireworks instead of Illustrator. However as a developer, I don’t have much use for Fireworks, as our design team doesn’t complete much of their work with this application.

If your design team uses Fireworks, your experience will likely be very similar to that of Illustrator.

XScope

This tool is extremely useful–maybe even more useful to developers than designers. When viewing a design file from our design team, I often find I’ll need to measure the pixels of different elements for CSS purposes.

The Loupe tool is also very useful–it provides the hex code of a given pixel your mouse is hovering over.

Have any specific design tools you use when coding a website? Let us know in the comments below.