Occasionally, a design tool comes along that establishes its place as an essential, can't work without it solution for Web designers and developers.
The available design tool options are nearly limitless, but here are what the experts have open on their computer every day:
Photoshop CS6 - Designing the layout of a website first in Photoshop, then coding that PSD file into a WordPress theme or other template. This really let's you get creative and visualize your site before ever getting to the coding itself.
Illustrator CS6 - Working with vector images and creating graphics for sites.
Sublime Text - A text editor for the nitty-gritty of coding sites.
Filezilla - FTP program for uploading and downloading files for new and existing sites.
Firebug - A Firefox extension that allows you to inspect on-page elements of your site quickly, in order to make the necessary changes.
Roboform - When you are working with multiple sites, online programs, etc., Roboform makes remembering logins and passwords simple (by doing it for you with a simple click).
PagePart - With the emergence of mobile, we are trying to shift clients to mobile websites. It is very tricky though. They have limited budgets and big ideas. We came across PagePart, a mobile website platform that helps build a mobile websites affordably while providing design flexibility within a range that keeps you ultimately within design limitations that provide the best possible user experience.
This website solution is unique because the company also provides all the sales and marketing tools to help me sell my services. From an URL, I can create a working mobile website within about 10 minutes using templates and pre-selected colors. I can then customize to my client needs. All this happens quick and easily. We serve more clients at higher margins. You can't beat that.
Jorge Aguayo, SEO Specialist at InTechCenter
Inkscape and the GIMP - For me, the main tools are Inkscape and the GIMP. The GIMP is great to tweak the look and optimize the images. The curves tool, specifically, lets me enhance the contrast to my linking. Besides these two, I am fond of using Yahoo's Smush It tool to optimize the image files even more for the Web, as it lightens up the image files without affecting their quality.
Mario Mirabella , Founder and Creative Director of MSM DesignZ, Inc.
Dreamweaver - Dreamweaver is an extremely powerful text editor and streamlines all of my files into one connected entity, which helps put organization and consistency in the forefront without extra effort on my part. From CSS and HTML to PHP and Javascript, Dreamweaver's tools make developing websites simpler and more efficient.
Photoshop - Photoshop is my other go-to when designing a website or creating images for backgrounds/content/slideshows/etc. It's extremely powerful, the tools are intuitive and precise. It's ability to save for Web takes the hassle out maintaining quality of the clear and vibrant images I work so hard to create.
Zurb Foundation - I also use Zurb Foundation, a framework that makes creating responsive websites as simple as possible. With its pre-coded column grid, its excellent cross browser capabilities, and its beautiful jquery plugins, my speed of production has increased dramatically. It's an extremely important part of my process.
Prasant Varghese, Usability Analyst (Web Design) at Icreon Tech
960 Grid - To aid us in creating the most usable websites possible - we use CSS frameworks like 960 Grid that allow us to create website blueprints to help aid site visitors in naturally navigating through a website organically and without much friction.
The Web today is all about usability. Today - there is no such thing as a unique website - and so, websites with similar functionality are usually only distinguished by how usable they are.
Garrett Scafani, Creative Director at Yeti
Standard Issue - Personally I think my toolset is pretty standard issue: A laptop, adobe creative suite, a code editor, a camera and a sketchbook. When trying to improve the visual design of the project I try to get out of the routine and absorb as much inspiration from things outside of the Web realm as possible while still keeping up to speed with the current trends and standards. There are a lot of really clean and slick web pages out in the wild right now, but so many of them look exactly the same. It seems while designers are embracing new standards and tools (e.g the mobile-first approach and frameworks such as Twitter Bootstrap and Zurb Foundation) they succeeded in creating an experience that can adapt to any device but have in turn sacrificed making something the is different from every other responsive website.
To combat this I try to glean styles and visual motifs from everything I'm exposed to, whether it's an old book, a movie or video game, architecture, nature - anything. Mobile technology makes it really easy to capture these moments and take notes, just adding a phone and a bicycle to my toolset gets me away from the desk and helps me think about the project in a new and creative way.
Photoshop, PowerPoint and Stock Images - As a Website developer, time spent on graphic design is critical because it can become very time consuming lowering the profit potential of the business. I develop a vision for a site then find the fastest most efficient way to bring it to life visually. The top tools I most frequently use are Photoshop, MS PowerPoint and a stock-image supply site.
Photoshop makes it easy to size and crop images then add text (example logo header: www.theinnerniche.com). PowerPoint enables a quick and easy screenshot capture then crop and save for posts, where maximum image clarity isn't an issue. The stock-image supply sites are a very inexpensive way to get great images and ensure your client is protected from copyright issues. The logo-header of the sample site previously referenced was created using a stock image, stock vector image and Photoshop.
Ryan Morgan, Online Marketing Manager at ERC
Zurb - For starting from scratch, I always use paper and pencil along with Zurb sketch sheets, which are great for mapping out designs, especially responsive designs.
Sublime Text 2, Crunch SimpLESS - For coding, I've been using Sublime Text 2, which in my opinion is the best text editor out there. I also use Crunch and SimpLESS for LESS CSS coding.
Toggl - If I'm doing freelance work, Toggl is a really great free time tracking application.
Bootstrap and Base - All of my designs are responsive these days, and two great frameworks to start with are Bootstrap from Twitter or Base for a lightweight framework.
