Web designers are a creative and skilled bunch, but they can't always create masterpieces alone. Over the years, they have learned to collaborate with clients and colleagues, as well as enlist the help of must-have and emerging design resources.
Website Magazine interviewed three experienced designers to understand which tools (a phrase used very loosely) they use every day and which tools have caught their attention. We've also added some editor's favorites.
Photoshop and Photoshop with a side of Illustrator.
Whether you're designing for desktop, mobile or tablet, there are so many great plugins now available for Photoshop to assist in Web design. One that comes to mind is 'GuideGuide.' Dealing with grids in Photoshop can be a tedious task. The GuideGuide plugin creates grids automatically based off your design. This has saved me hours of time within the layout process.
A classic tool, but must have, is the Firefox Web Developer toolbars, such as Firebug and Responsive Design View. With Firebug, you don't need Page Source as Firebug shows you the source code, but in a more organized fashion. It's great for code highlighting and inspection - to see how something has been created and if it's doable for your purposes. This has helped with the communication and brainstorm process when working with the internal team of programmers.
From a design standpoint, it is great for experimenting - especially if it's for quick aesthetic changes to see what's working. We all scream for Google Fonts! When first starting out in Web design, a question always being asked was, "Is that a Web safe font?" - and rightfully so. A print ad can look highly stylized until you need to use Verdana as your headline font. Now we have options and can better accomplish brand alignment when going from print to Web.
Another handy tool that has also been around for a bit but is as useful as ever, is the Art Directors Toolkit. This desktop application allows you to use a dropper to select RGB/ Hex colors on any site, a quick way to grab a Web color you come across and want to put it in your back pocket for later.
Lastly, finishing strong with the 960.gs (960 grid system). This website is useful for design layout needs as well as staying ahead of the UI trends. It outlines the most commonly used Web dimensions and best practices - as they are ever changing.
Fireworks has always been a solid application for prototyping a mobile app or website. But now we can incorporate a conversation and collaborate with multiple team players with online application tools like InVision. You can bring your designs to life with an interactive prototype, great for client presentations.
These are not so much new as they are newly discovered versions of useful tools done well, but there are two new resources that surfaced, peepcode.com and websitedimensions.com, both have "sitegrid" check tools worth exploring. The sitegrid or live pixel checker on websitedimensions.com allows you to check your URL in real time, across multiple browsers - a shortcut for viewing mobile design, horizontally and vertically.
At the end of the day, it's fun to think it's all like magic, never failing to evolve and keeping designers on their toes.
For Web development, Sublime Text 3 (version two shown in image) is my current 'can't live without' design tool. However, that is constantly changing. Sublime Text 3 is a code text editor but really is nothing more than notepad with some additional features (auto complete, code highlighting, find and replace). A seasoned Web developer could really use any tool to complete the job if needed. So... can't live without isn't always accurate. In fact it will likely be replaced by another text editor in a few months.
My other must-have for Web development is the CLI (command line interface). It's the nuts and bolts behind the operating system, giving base access to a lot of powerful commands. Hard to learn but unmatched when it comes to automation, versioning, bundling, compiling and a lot more.
Another must have, a Mac. OSX (Mac operating system) based design is just so much easier than Windows-based equivalents. It's very frustrating (or impossible) to do certain things in Windows (e.g. develop for any POSIX based language, which for the most part is everything outside of .NET). Not to mention, if you do use a GUI based program they are so much slicker on OSX. The CLI on OSX is also unmatched in functionality.
For other areas of design, it would be pencil and paper. Just plain sketching is a major part of my thinking process when it comes to user interface design or branding.
Right now, the design community seems to be ditching the tools they used to use in favor of the CLI. Since most of these tools are just Graphic User Interfaces for CLI processes, many find it more useful to learn the CLI by itself now in order to access the base level tools that powered these programs for more customized solutions.
As far as tools for non-programmers are concerned, Slicy (from LayerCake) is a pretty awesome tool for raster output for Web use. It's not recommended for vector based output (no svg support) which is best for Web output.
My two primary Web design tools are a sketchbook and Photoshop. The sketchbook should always be your starting point no matter what software you use. It allows you to quickly draw out ideas, and if you don't like them you haven't wasted time mocking something up on a computer - just turn the page! As for software, Photoshop is still my primary tool for creating high fidelity mockups
I've recently gone back to using Fireworks quite a bit as a suggestion from a 99designs colleague. It has a lot of advantages for Web design because that's what it was actually created for. Features such as the nine-point scaling tool and the ability to easily click and drag elements, as well as many others, make it a valuable tool. If you haven't tired it yet, I'd highly recommend giving it a shot as a lot of the shortcuts and tools carry over from Photoshop.
Stylevault - Submit your work or get inspiration at Stylevault.net.
Behance Network - Like the Facebook for designers, Behance is a great place to showcase portfolios, connect with other designers and more.
ColoRotate - Edit color palettes with a few taps of your fingers. ColoRotate allows designers to analyze, extract, adjust and share colors.
WhatTheFont! - Ever see a font and want to know what it is? Submit an image to WhatTheFont! and they'll find the closest match in its database.
W3C - Offering a variety of validators to check the markup validity of Web documents, mobile readiness and broken links, W3C provides many validators and tools.