Essential tools for every web designer

Every web designer requires the right tools to do their job. To create well crafted original designs you certainly need to be inspired to do so.

Getting to that point is sometimes the hardest challenge in the field of web design. Luckily enough for us and our fellow design community there are tools available to assist in completing the job quicker and more efficiently.

Below, I have outlined a list of tools I recommend for any web designer. Be sure to bookmark these pages so you can utilize them to your advantage like I have!

 

Color

Adobe Kuler (free)

A great tool offered by Adobe which allows members to upload, create, and edit color schemes of their choice.

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.

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.

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.

Hues ($2.99)

Interested in native apps rather than web apps? Hues from giant comet is a color scheming tool for you. At only $2.99 from the app store you can sample colors on any project you’re working on.

 

Typography

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.

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.

Lost Type (from $1)

The Lost Type Co-Op is a Pay-What-You-Want Type foundry, the first of its kind. With a great selection of fonts any web designer could push their designs to the next level.

Typecast (from $29 per month)

Typecast is a very valuable tool which allows you to quickly style, check readability, and rendering as you work. Instead of downloading web fonts and constantly changing the way they read inside a Photoshop document this new technology will help any designer’s work flow.

 

Wireframing

Balsamiq (from $79)

Balasmiq is a rapid wireframing tool used to produce mockups of user experiences. Their sketched UI design embraces the fact that it’s a tool for brainstorming and critical thinking when it comes to designing with users in mind. Options to design for web, mobile, and tablets all exist and are easy to implement.

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.

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.

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.

Photoshop/Indesign/Fireworks (from $49.99 per month)

The easiest of solutions in my opinion is to create a wireframe from scratch. Going this route is only limited by your creativity and imagination instead of preset UI solutions like many wire framing tools offer. It may take longer but the end result is more personal and customized to fit each individual user experience be it a website, app, mobile website, or tablet app.

 

Layout and Boilerplates

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.

1140 CSS Grid ($5 donation)

If you’re interested in a wider grid width then I recommend the 1140 CSS grid as a great starting point. The complete grid fits perfectly to a 1280 monitor and better yet for smaller monitors or devices the grid becomes fluid and adapts to any width of the browser.

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.

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.

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.

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.

Reset CSS (free)

Without a doubt this globally recognized browser CSS reset is an absolute must for any web designer to offer their designs across any platform or browser.

 

Content Management

WordPress (free)

WordPress takes the cake when it comes to Content Management Systems. Originally the most popular blog posting platform has turned into that and more in the CMS world.

Joomla (free)

Joomla is another popular CMS used by millions worldwide. Much like WordPress the default layout installed with the CMS is user friendly and mobile ready.

Expression Engine (from $299)

Developed by EllisLab, Expression Engine is a CMS built with the help from an open source PHP framework called Codeigniter. Many larger corporations like Apple, Ford, Nike, and Sony choose Expression Engine to fit their own demands. Expression Engine as a result is not a free CMS but it’s definitely worth reading up on and/or downloading a copy to become familiar with, for future work you may encounter.

Drupal (free)

Drupal is an open source content management platform for powering millions of websites and applications. It’s built, used, and supported by an active and diverse community of people around the world. Drupal can be used for everything from blogs to extensive web applications.

Radiant CMS (free)

Radiant is a no-fluff, open source content management system designed with small teams in mind. Their slogan says it all: content management simplified.

 

Useful Apps, Actions, and Resources

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.

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.

By People (free)

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

Temboo (from free)

Temboo lets developers focus on what makes their software unique. Temboo normalizes access to APIs, databases, and more to save you time and give you the creative space you need.

LittleIpsum (free)

Download this! If you’re a web designer on a mac, you’ll use this every day. I promise!!

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.

 

Code Editors

Coda 2 (from $99)

Ever since coda was introduced to me I have been a fan. I typically compare other code editors to coda and for me Coda always wins the fight. This may be different for you but I suggest giving coda a try if you haven’t yet. Coda2 is packed with features and easy to use UI which makes coding for the web a breeze.

SublimeText 2 ($70)

SublimeText 2 is right up there with Coda for me. There are a ton of features and the sleek UI of the app itself lets you concentrate on the coding process rather than messing with the app to get it in usable condition for your own projects.

TextMate (from $59)

TextMate brings Apple’s approach to operating systems into the world of text editors. It’s simple and easy to use and takes up less screen real estate than many other Code Editors.

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.

BBEdit ($49.99)

BBEdit is a professional HTML and text editor for Mac.

 

FTP Clients

CyberDuck ($23.99)

By far my favorite FTP client is CyberDuck. There’s endless ways to connect to web servers, local servers, access devices via ssh, and more. A great tool available for both Mac and PC platforms.

FileZilla (free)

FileZilla is a free FTP solution. It’s also open source software.

Transmit ($34)

From the makers of Coda comes Transmit. A very fast and effective solution for FTP.

FireFTP (free)

Fire FTP is a client available for Firefox users. The application is built into the mozilla browser and offers a quick and easy way to transfer your files.

Have you tried out these resources? Have we missed any of your favorites? Let us know in the comments.

0 shares
  • http://alfredarcifa.com/ Alfred Arcifa

    Good Good Good article!
    Thanks.

    • http://twitter.com/justalever Andy Leverenz

      Thanks Alfred!

  • http://alfredarcifa.com/ Alfred Arcifa

    Thanks.
    This is a good tools article.

  • http://twitter.com/n1tn4t Konstantin Meier

    that awkward moment when you use nearly all of the tools and your designs still suck

    • http://www.blackbookoperations.com/ Black Book Operations

      might be a great developer with bad design skills… solution: team up ;)

      • http://twitter.com/justalever Andy Leverenz

        Good call!

    • http://twitter.com/justalever Andy Leverenz

      The tools are just that “tools”. Design is an art! I know the feeling regardless ;)

  • gustavscirulis

    This might come in handy too if you use a lot of special characters – http://getcharacters.com

    • http://twitter.com/justalever Andy Leverenz

      Thanks for sharing!

  • http://www.dneveu.co.uk/ Dwayne Neveu

    Good Article, I have used most of the items on the list and am still using quite a few of them :)

    • http://twitter.com/justalever Andy Leverenz

      Same here! Can’t get enough of them!

  • jaystrab

    Where’s Espresso?

    • http://twitter.com/justalever Andy Leverenz

      Definitely forgot Espresso! Doh! Thanks for the comment

  • http://www.facebook.com/joewindetc Joe Windeknecht

    Incredible round-up; thanks for the one-stop shop!

    • http://twitter.com/justalever Andy Leverenz

      Thanks Joe

  • http://twitter.com/studiocalderon Arnold Calderon

    Two of my favorite lightweight and open-source CMS’s are “CMS Made Simple” and “concrete5″. It’s easier for front-end designers to create custom themes than in WordPress or Joomla.

    • http://twitter.com/justalever Andy Leverenz

      I’ll check these out for sure! Thanks for the share Arnold

    • http://twitter.com/meetmicah Micah Choquette

      I’ll second Concrete5 – I’ve done several sites with it and can vouch for it well! The only thing C5 doesn’t do well yet is blogs. So WordPress still gets used.

  • Jeremy Stewart

    great article, lots of useful information for a newbie in web development

    • http://twitter.com/justalever Andy Leverenz

      Thanks Jeremy

  • Jeremy Stewart

    Great article, lots of information for new web deisgners

  • http://twitter.com/justalever Andy Leverenz

    Awesome app. Thanks for the share

  • http://www.facebook.com/hartshar Sharon Hart

    I never see Headway (theme for WordPress) mentioned. I bought a lifetime membership years ago, forgot about it, then recently checked it out and it’s changed *a lot.” I don’t work for them or anything, just thought I’d mention it because it’s an amazing WYSIWYG tool for WordPress design.

    • http://www.igobydoc.com igobydoc

      I like Headway, it has come a long way. I am working with it on 2 sites now. Not sure if it would fit so much on this list, but maybe a themes list. =)

  • http://www.facebook.com/hartshar Sharon Hart

    .. oh and good roundup, thanks.

    • http://twitter.com/justalever Andy Leverenz

      Thank you!

  • http://twitter.com/Cln_Lgr Colin Léger

    Leech FTP is great… let’s you thread 16 files at a time instead of one by one.
    Thanks for the others Andy, nice to see that I actually use some of these.

    • http://twitter.com/justalever Andy Leverenz

      Thanks Colin

  • Sahib Alejandro Jaramillo Leo

    Reset CSS is a very bad practice, use Normalize CSS instead.

  • http://twitter.com/justalever Andy Leverenz

    I’ve used Alfred. I like it a lot as well. Thanks for sharing

  • http://twitter.com/justalever Andy Leverenz

    Thank you!

  • http://twitter.com/justalever Andy Leverenz

    Thanks Japheth

  • http://twitter.com/justalever Andy Leverenz

    Looks very very promising! Thanks for the share!

  • http://twitter.com/justalever Andy Leverenz

    Haha Thanks!

  • http://twitter.com/justalever Andy Leverenz

    Thanks!

  • http://www.igobydoc.com igobydoc

    Sweet list of resources Andy. I do not do a lot of web design anymore, but there are a couple of tools here I think are great that I had not heard of.

    Thanks for the post!

    Doc

    • http://twitter.com/justalever Andy Leverenz

      Thanks for the comment!

  • 08joejoi

    Some great tools, but I must point out a mistake. LostType offers their fonts for free if you enter 0 in the Name Your Price box.

    • http://twitter.com/justalever Andy Leverenz

      Correct. Losttype isn’t free but it is a “pay what you like” collection. It’s up to you as the user to contribute or not. I’m assuming the more contributions the more they can offer in the future.

  • orange county web designer

    Great list and well written. Thanks for sharing.

  • http://twitter.com/justalever Andy Leverenz

    Awesome. Thanks for the comment!

  • http://www.sinuousmag.com/ theComplex

    Great round-up Andy. I use at least one tool from each section already but I’ll be sharing with friends.

  • disqus_f6iHgvyqwE

    great article. loved it

  • thorncityultra

    Obviously there are many tools out there for web design and dev, and other people will inevitably have their take on each one or have additions to this list. For me, as a professional in the design and dev world for over 15 years, this list is a GREAT resource for up and coming designers (or even a pro looking for some new info, ha ha). Nice work!

  • http://twitter.com/maerean Mihai Maerean

    There’s also Brackets http://brackets.io/ Open-source code editor built with the web for the web: With features like “Live Preview” and “Quick Edit” of css classes and colors, Brackets streamlines development without getting in your way.

  • http://www.facebook.com/arcadman Adam Cadman

    Great list – I’ll be trying some of these out.

    Just like to add UltraEdit (www.ultraedit.com/) into the mix too. It’s a really powerful text editor with loads of macro and scripting ability. Available for Windows, Mac & Linux. From the same place there is also UltraCompare (file and directory comparison) and UltraFinder (search files and contents)

  • Rodrigo T.

    Great!

  • Siegfried Bolz

    I am missing WebStorm 6 from JetBrains, a leading IDE for JavaScript & HTML Development.

  • http://twitter.com/surfulater Neville Franks

    Very good post. Nice to see a good commentary on each site/tool, A couple of FTP’ish apps which I highly recommend are WinSCP and Terminals, the later being a new find for me. WinSCP does secure FTP and Terminals includes a terminal and a lots of other tools in the one package with a single password login. http://terminals.codeplex.com/

  • http://twitter.com/ilona_herr IlonaHerr

    thanks for the very helpful tips :-)

  • http://twitter.com/setilikim Kim Setili

    Axure is another good wire framing tool and I use Fetch as my ftp client. Both have educational licences which make them free!

  • Max

    http://eyepitstop.com
    A kind of essential tool for web designers.

  • http://www.websitedesignreference.com/ WSDR

    Just installed LittleIpsum, thanks for sharing – this will come in handy for sure.

  • http://www.facebook.com/webtakersit Web Takersit

    very nice. thanks

    http://www.webtakersit.com

  • Sophina

    very useful article. i bookmarked and sharing with friends. I have used few of them but found new one.thanks for writing such a informative article.

  • Arafat Zahan Kuasha

    Firebug?

  • Willem Smith

    Great List!
    The only thing I missed is Notepad++.
    Very good, versatile editor.
    I find more uses every day.
    Free!

  • Dawid Tkocz
  • tripurari

    very useful links , thanks …………

  • Dev

    Thanks for posting this lesson over here.
    Pleasure mate.

    Regards

    Dev

  • Anil

    awsome

  • Chris

    wow that was really helpful thanks!!

  • Kate

    Yummy FTP should be included : ) It’s as easy and beautiful as using your own mac (for mac only). Aptly named!

  • Bartek Sci

    I’ve recently made the virtual fonts “fitting room”: http://fontry.net/ – you can try fonts directly on your website, without necessity of changing source code.

  • Jeremy

    If you write a lot of CSS there are some really useful free CSS3 generators. My personal favorite is http://css3gen.com

  • lfx

    Nice article with a lot of resources and most importantly categorized :)

    I am allowed to do so, i would also recommend Likno Web Builders Collection (http://www.likno.com/jquery-builders/index.php) as they are handful applications for creating web elements (menus, sliders, modals, tabs, etc) without writing code.