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.

  • Photoshop
  • Illustrator
  • Sketch

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.

Resources

I’ve been using most of these for a long time now. CG Textures in particular has been an invaluable resource for both illustration and design.

Staying organized

If I can’t understand your files, or find them on a server, you’re getting death glares. Staying organized is one of the most important parts of working with a team or delivering files.

  • Get used to file naming properly
  • Organize things into folders and subfolders
  • Date stamps and versioning are incredibly important
  • Things for Mac & iOS for task tracking
  • Evernote for project notes
  • Trello & PunchTime for time tracking and project management
  • Basecamp
  • Slack
  • Paparazzi – Mac Screenshot Tool

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.

Recommended reading for Web Design

The internet is full of places you can learn HTML, CSS, and other facets of web design, but these are some of the places and articles that I think stand out a bit above the rest.

Influential web folks you should know

These are the people I stalk when I’m in need of inspiration or wondering what the big guys are up to.

Inspiration

While inspiration is great, if you’re caught straight up copying someone then the justice fairy is going to swoop down and clobber you.

Tags: , ,