Quick glance of Sketch 3

While looking for alternatives for the heavy and expensive Adobe products, more specifically, Adobe Illustrator, I found Sketch 3.

Apart from a much more affordable price, like other tools that are newly designed, Sketch’s workflow and design patten works way better with modern way of building web and mobile applications.

Some thing for myself to remember in Sketch 3:

  1. Pages: in most cases, it’s be the highest level you work with, usually includes a few artboards.
  2. Artboard: it’s a container with clear boarders, usually includes lots of shapes, but under artboards.
  3. Shapes: nothing to explain really.
  4. Alignments: really handy tools, except for regular alignment, it could also evenly distribute multiple objects, both horizontally and vertically.
  5. Symbols, a shape or a set of them you use site wise, for the objects that are global in your wireframe, you should use symbol. It works like css concept, you change symbol at one place, all other places using the same symbol will be updated automatically, so handy.
  6. Text styles, similar to CSS, try to apply a few global text styles in all your wireframes.
  7. Grids and layouts: as most of the popular open source frontend framework like Bootstrap, Bourbon, you can divide the page you are designing into columns, which makes later implementation seamless.
  8. Bootstrap likes created .sketch file with lots of pre-made icons and building blocks facilitates fast wireframe. The downside is your site will very possibly look like someone’s else’s since it’s such a popular framework.
  9. Sketch has a pretty active user community, with quite a considerable amount of available plugins and extensions, from something as simple as generating lorem ipsum to a super customized UI kit.
  10. Built-in templates for most common layouts, such as web, iOS, Android.

Here is an awesome tutorials from Level Up Tuts.