Affordable Web Design Tools: Diving into Sketch

banana skate

Banana skater? Sketch experiment #5

I’ve been playing around with a new app I got, called Sketch (for Mac). The main things I’ll be using it for are to:

  1. Have a tool to make flat icons for websites (see image below)
  2. Create SVG’s (scalable vector graphics) that can re-size without pixellation on the curves
  3. Design header and logo elements for web sites
  4. Have a tool to muck about with creatively (see image at top)

While I’m finding out that learning to create with vector tools isn’t as intuitive of a process as I’d like it to be, it’s neat to have an app that can spit out the SVG code for me when I design complicated forms that in the past I would have to load onto websites as raster images.

It’s also one twentieth of what the traditional cost of entry for the industry standard (Adobe Creative Suite, or ACS) was before it switched to a subscription model this year. Up until now, I had found that the only reasonable alternative to ACS had been the excellent (and free) open-source app Gimp; which, although something I will definitely return to in the future, I had found to have too steep of a learning curve for a newbie.

4 screen sizes

4 screen-size flat icons merged into a single transparent .png with Sketch.

While Sketch is professional-level and suitable for general web design work, it is not a photo processing/editing tool, and is more akin to ACS’s Fireworks and Illustrator. So for working with photo images, maybe that’s what I’ll try to selectively learn to do with Gimp.

Of course, 90% of web designers and clients still work with Photoshop documents. That number isn’t going to drastically change anytime soon. But with easily affordable web design tools like Sketch, Gimp, iPhoto and Balsamiq Mockups, a starting web designer can still have a fighting chance without spending a small fortune (or having to buy a pirated or student copy of ACS).