Mockup Tools (Sketch)

Introduction

If there was a list of all the design tools I’ve tried over the years, it would be pretty long. The first one I had was Illustrator 88 on a 300K diskette, partial payment for design work I did for Apple as my first freelance project. Over the years, I’ve seen and tried almost every one that’s come along, up until about a half-dozen years ago. That’s when the team I was on settled on Fireworks as our standard.

I have more familiarity with standard vector-based drawing tools, like Illustrator and FreeHand, and with Photoshop because I was a visual designer, but Fireworks can be a great tool for teams, particularly if you want to standardize what you do. Its Library feature has great potential for creating and dispensing standard components.

I had one team member create vector versions of every standard form and application element we currently used. Each element was created using styles as a wireframe element, as a fully rendered, brand-compliant element, and in inactive, active, selected, and deselected states, as appropriate. We then used an ActionScript-based add-on panel for corporate styles. Selecting an element (or a screen full of them) and selecting the right radio button could change every element from wireframes to fully-rendered mockups while you went for coffee. A huge timesaver.

All a designer had to do was drag an element onto the file from the library and modify the size and labels to meet the application needs. It included tables, standard form elements, text boxes (complete with content), complete banners for intranet sites with brand, search, personalization links, etc., everything we used on a regular basis. The screens still needed to be designed, but the components all looked as they should and no matter who the designer was, there was consistent appearance and behavior built in to the system.

Adobe never had a handle on what a web-oriented design application should be. For print, designers had to use a vector app for illustrations, logos and visuals (Illustrator or FreeHand), exported as .eps files, Photoshop for imagery, exported as tiff or .eps, and then put it all together in yet another application (Pagemaker or Quark, at first, then InDesign). They wanted the same thing to happen in the web world (Illustrator/FH, Photoshop, into Dreamweaver) but the designers at that time didn’t want to code HTML in Dreamweaver. They just wanted to design stuff and let someone less purist convert it into prosaic HTML. Now they’ve decided to stop supporting Fireworks and let it die, just as the other products they bought from Macromedia have also died.

When I’d try out a new design application, I had a process for it. I’d install the application and use it for one of my projects with an impending deadline. Yes, no training, no manual, just dive in and see if it’s shallow water. Thats what I’m planning to do with the current tests (although I’ve only done one so far). For the first tool, I decided to create a full set of the Teehan-Lax iPhone PSD files as the test. T-L had just released them and I hadn’t looked at them yet (not having a project to use them on). There was no deadline, but it would be a test involving standard mobile UI components, small, highly detailed images, and it would be a file with lots and lots of elements to create.

Sketch: Rating — workable, but not perfect

Advantages:

  • inexpensive
  • easy to use
  • good at drawing things from scratch if you can draw
  • If all you need are standard shapes, that’s easy to do
  • lets you specify pixel dimensions of objects for pixel perfect positioning
  • fully rendered looks and feel with gradients, filters, and effects are easy to do
  • lets you create styles for objects
  • once you create your screen, you can export the CSS (but not HTML)

Limitations:

  • no library of items means redrawing everything or finding that one file with that thing you need
  • limited number of objects you can have in one file
  • Mac only. No file sharing with corporate PC types

As you can see from the results, creating iOS7 files using Sketch is obviously possible. I was able to create each and every UI element in Sketch. I made a jpg of the PSD file, dropped it into the bottom layer of Sketch, locked it, and started drawing. However, after starting with the individual UI element portion of the PSD file, I ran into a snag and it was a big one.

As I work, I organize things. It’s a learned skill from trying to pick up work others have done and make changes. I group things into folders (or grouped elements) so they stay together and I can figure out what line goes where. So when I create a keyboard, for example, I’ll do each row of keys and collect them into a folder and I’ll have each row of letters in its own folder with letters in the folder in left-to-right order and the key shape layer right below the letter it goes with and the background for that keyboard at the bottom. Organized.

In addition to all the elements that make up a component, that adds complexity and more things to the files, but it’s great for six months down the road. Once I had created the individual UI components and started working on some of the dialogs and screens, Sketch stopped letting me add objects. I apparently hit the upper limit on the number of objects I could create in one file.

Most of the projects I’ve worked on are corporate applications. Internal and external applications with heavy data usage and lots of things ending up on the screens. Having limits on the number of objects I can create in one file doesn’t work well in those situations. No matter how I tried to restructure the file, it was obvious I wasn’t going to get it all in there. When you also consider that a simple drop-down picker requires a rectangle, a square, a downward pointing arrow, a label, and content text, items multiply faster than you’d think. This is a crippling feature for large applications. Combined with the lack of a library for reuse and storage, it’s less than I want for screen mockup purposes. It’s a good application for sketching but that’s not what I’m looking for.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>