Tools and Resources for Web Designers

September 24, 2015 - 8 minutes read

Hello friends,

I just began teaching an introductory web design course for the Alberta College of Art and Design. I wanted a good list of various tools a web designer may be interested in for my students but couldn’t find anything I liked and thought I would make my own. What follows is a collection of various programs, services, or tools that web designers, or just people seeking to create their own website, may be interested in. I’m not going to list everything possible, just items that I have used myself, recommend, or have heard really good things about. I’m also not going to list anything too advanced. Most of the below are things an entry level person would see or end up using.

Brainstorming and note-taking

When I am in meetings or on the go I like to quickly jot down ideas. Depending on what I have with me it may be as simple as a hand drawing on paper, or it may be a sketch on the iPad. Generally I usually have something to write on nearby, and here are some of the main tools I use for note taking or really quick rudimentary sketching of “a box goes here, and a box goes there” kind of idea communication. I really enjoy Balsamiq for really quick and dirty idea communication. I’m only recently getting into Sketch but so far like what I see.

Wireframing

Most of my experience is with Omnigraffle or Balsamiq where Wireframing tools are concerned, but I’ve dipped into Illustrator the odd time. The issue with Omnigraffle, being one of the most popular UX tools, is that it’s barely usable itself. Fair warning if you want to use it, it’s aggravating as all hell. Right now I’m experimenting with Sketch and seeing if that suits me any better.

Prototyping

What I’m hearing from people is that InVision, the lovely people who hired me to write my Common Mistakes In Art & Design eBook, are the way to go for prototyping. I’ve only ever gone the straight HTML and CSS route myself.

Design

While Photoshop still seems to reign king in this space, I often wonder why. With the age of responsive sites, you’d think Illustrator, with vector shapes, SVG icons, and more would be the obvious choice. I swap back and forth as necessary. Again, as noted above in some other areas, I may be giving Sketch a good chance here.

Development and File Transfer

Typically I use Coda for Development, but have been using the free Brackets as of late and quite like it. Coda still seems the more rounded of the two. This list is fairly small because I’m fairly married to the tools I use here. I also use a lot of other tools for LESS development, file automation and more, but for a beginner list we’ll keep this simple.

Aids and app extensions

I cannot say enough about two of these tools, GuideGuide and Tiny PNG. GuideGuide saves me so much time with grids and quick layouts, and Tiny PNG just doesn’t make any sense with how much file size it can save.

Recommended reading for UX

This post is mostly for web designers. While I think every web designer should have a solid understanding of UX, I also can’t expect an introductory student just coming into the web to dive too deep into some of the more advanced topics. That being said, here are a few links I’ve found useful.