Technical App Designer with Sketch

App design is hard! At least if you have a development background like me. There are a lot of things you have to take into account in any design. So to start to learn app design I did what I often do when faced with a new problem. I started looking for new tools. In this case I had heard from people I worked with about an app called Sketch, and it came with warm recommendations. So I decided to give it a go. Previously I had tried, with little result, Photoshop and Illustrator. So was very excited to see what this app could do differently.

In this post I will share my experience with Sketch. Some issues, tips and additional resources I have encountered while working with it.

Briefing

My first step, when learning a new tool, is always to watch and/or read a tutorial. That’s only half true though because I never watch a complete tutorial. I really like the idea of making the mistakes myself and I really love solving all the problems that arises. In this case though it might not be true at all because I just downloaded the app and started using with it.

In my experience it is always better to have a project in mind when starting to work with a new tool. This gives you a goal of what you want to achieve, it also makes it more real in some way. If you don’t have a goal in mind, you will end up just “playing” with it.

In this case it was quite easy for me. I already had a iOS project that I wanted to work with. A goal/task manager for iPhone, iPad and Mac codename “Allan”. This project would let me explore a lot of different sizes and layouts (I will write about “Allan” in a different post, if I don’t drop the project as I usually do).

First blood

Starting up Sketch I found that there was a template with iOS components, great! Next I created a new art board and conveniently there was predefined sizes for iPhone (and a lot of other sizes including iPad sizes). I started copying components from the template to my art board, and changing their sizes and colors I soon realized that everything was changing in the original component. Same went for text I changed in my copied elements. This was apparently a feature not a bug. The elements I copied were of a type called Symbols. What you have to do is to detach it from the original.

Sketch context menu ’Detach from Symbol’

After this initial hurtle I have not run into any major problems. And It has a some features I like;

  • It is easy to manage the layers.
  • Drag n’ drop existing bitmaps or vector I onto the canvas.
  • It opens even very large Sketch documents fast. Amazing!

Sketch is light years ahead of Photoshop in my mind and for a fraction of the price.

I also know it has a lot of features for exporting different sizes appropriate for iOS development. But I have not yet used these features (I am still designing my first app with it). So I will not comment on them yet.

Tips

If you are like me you will just jump right in and skip all the intros. Definitely works it is intuitive enough for that. However I almost forgot the had an intro. After a while it was valuable to refer back to this intro.

In doing so I also found their support site. Which I have yet to use, but it seems to go into comprehensive detail for everything you might want to accomplish .

I might be back later with a further review. To round up I want to recommend a webpage called Sketchapp Sources I found that has a lot of resources for Sketch. Found a lot of iOS resources there. I always used teehan+lax iOS components when trying to use Photoshop, and they have made a version for sketch as well.