Essential Tools for Web Designers

By 20th August 2013 Design Tools

Color

  1. Adobe Kuler

  2. Pictaculous (free)

    From the creators of Mailchimp comes a color palette generator different to any other. Simply upload an image and colors within the image are sampled to create a custom color scheme.

  3. Colorzilla (free)

    ColorZilla for Google Chrome is an extension that assists web developers and graphic designers with color related tasks – both basic and advanced.ColorZilla includes a Color Picker, Eye Dropper, Gradient Generator and many additional advanced color tools.

  4. Dribbble.com (free)

    Many designers turn to dribbble.com for great inspiration. You can search common terms but even better you can search by color. Visit dribbble.com and click the explore link in the top navigation and then select colors to explore inspiration for your designs by color.

Typography

  1. Google Webfonts (free)

    Google has numerous web fonts for any web designer to make great use of. They are free and incredibly easy to implement into your projects.

  2. Font Squirrel (free)

    Font Squirrel is your best resource for free, hand-picked, high-quality, commercial-use fonts. Even if that means they send you elsewhere to get them.awesome-fontstacks.com (free)

  3. awesome-fontstacks.com (free)

    Awesome Fontstacks is a great online tool to help you mix and match web fonts on the fly. When you are satisfied with your fontstack you get greeted with ready-to go CSS code.

Wireframing

  1. moqups (free)

    moqups is a HTML5 app used to create wireframes, mockups or UI concepts. The style and features available are very similar to balsamiq. It all boils down to which tool you are more comfortable using.

  2. Mockflow (from free)

    Mockflow is an online wire framing tool like the couple I mentioned above. The feature I find neat is the collaboration tools. You can make notes to allow another user to see your changes or concerns as well as chat with each other in live time regarding important UI decisions or functionality.

  3. Google Drawing (free)

    A valuable tool that a lot of web designers pass up is Google Drawing. While it doesn’t feature any presets like those on balsalmiq or moqups, it is an entirely free service which you can store on your online google drive. You simply need a gmail address to get started.

Layout and Boilerplates

  1. 960 Grid (free)

    The 960 grid is the benchmark of the web. Every good web designer should already understand the importance using a foundational grid for their layout as it keeps web design much more usable for the end user. The accompanying photoshop actions in the download have saved me numerous hours of getting alignment issues in check.

  2. Bootstrap (free)

    If you’re looking for a pre-made user experience out of the box, then bootstrap will become your best friend. There are numerous features bundled with the framework which is completely adaptive and sexy looking to boot.

  3. LessFramework 4 (free)

    Less is a framework dedicated to making websites truly adaptive. It’s made to fit nearly any device on the market. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

  4. Skeleton (free)

    Skeleton is simply a great starting point for any website. Its simple, light weight structure benefits those who are looking to get started without studying up on how the framework really works.

  5. Foundation by Zurb (free)

    Foundation just released Foundation 4 which according to them is the most advanced responsive front-end framework in the world. With many new added features and awesome templates to start off with I can say that I am a true fan. Test drive it today.

Useful Resources

  1. GuideGuide (free)

    GuideGuide is an awesome photoshop extension which allows you to create perfect grids on the fly. By using GuideGuide you can create more accurate columns,rows, midpoints, and baselines with one click.

  2. iOS Photoshop Actions & Workflows (free)

    One of my favorite resources is on a website called bjango.com. The specific article features a detailed listed of actions and workflows created by Bjango. Actions to create new templates for iPhone, or iPad are made with a simple click or if you’re designing an app icon for an iPhone app there is a great action which resizes the app to each pixel width and height necessary. This find was the equivilent to finding gold for me.

  3. By People (free)

    By People is a great and simple website feature packed with resources which are all free and easy to use.

Code Editors

  1. Aptana Studio (free)

    Aptana Studio is the industry’s leading web application IDE. Available for both Mac and PC this software harnesses amazing potential to code virtually any type of application you can think of.