Making Icons for Square Register

Making Icons for Square Register

"Square Register Icon Design" After getting my iPad, I installed Square Register so I could accept sales by credit card in-person. It also has a cool “Favorites” display, so you can just tap the things you are selling, and they’re added up right on the screen before you swipe the card.

There are two kinds of sales I’m making: physical goods in the form of the various Emergent Task Planner printed products, and also face-to-face consulting and on-site production (graphics) time. Square Register allows you to take pictures either from the camera (this is buggy and unreliable, currently) or from your stored photos, so I designed a set of icons for this.

The criteria that they were visually distinct from each other and not too hard to draw.

  • I stuck with simple shapes and geometries. For the ETP products, I just used Illustrator’s 3D Rotate tool for the page and text, then drew in the pad thickness with the pen tool. For the time-related services, I drew a simple hourglass with a couple of triangles manipulated with the ROUND CORNERS filter, pathfinder UNIFY tool, OFFSET PATH, and CLIPPING MASK.
  • The one conceptual idea I put into this was having the “thought bubble” on the left of the hourglass to imply “thinking comes first”, and the “brick stack” on the right to imply “production comes next”. But this is subtle reasoning; it actually just helps distinguish the two icons a bit better, as they have similar elements, element weightings, and proportions.

  • To impart a little motion to the images, the hour glass dripping sand is spaced to imply acceleration. The stack of bricks also has the top brick tilted and placed as if it’s going to drop. The strong pyramid pattern creates the desire for shape closure (our friend “gestalt” at work), so I think that helps sell the idea of something in the process of being assembled.

<

p>The hard part was figuring out how Square Register imports the images. While it appears to accept a square-aspect icon, it actually clips the image in a way that was difficult to predict. If you import a square-aspect picture (e.g. 256×256), Square doesn’t show you any cropping that it will perform. In actuality, it WILL crop it to allow the app to put a TEXT LABEL at the bottom of the icon. Strangely, if you upload a pre-cropped icon, Square will THEN show you the cropping tools…it seems to want to crop the image square, and then screw it up later.

To get around this, you need to design with a safe frame at the top and bottom of your icon. The aspect ratio of the final cropped image is 200×158, so you want to make a 200×200 icon with a buffer of 79 pixels at the top and 79 pixels at the bottom with 21 pixels of dead space at both the top and bottom. Here’s a visual representation of what happens:

Aligning Square Register Icons After that, you just need to figure out how to get those images onto your iPad’s photo application. Either sync it with iTunes or whatever. I use DropBox for all my project file synchronizing, so I used the DropBox iPad app to do something similar. It can copy image files from your DropBox account into the iOS Photo Album thingy, which then can be set in the Square Register App.

On a side note, Square Register seems to be a little flaky about remembering the images you set, sometimes forgetting the image or reverting back to the text-only label. It also gets confused and sometimes crashes when using the camera to take a photo. But once it’s set up, I have my pretty icons :)

2 Comments

  1. Jim 12 years ago

    If you have a 200 x 200 image with a buffer top and bottom, and the final image is 200 x 158, isn’t the buffer (200-158)/2=21 top and bottom? And the image constrained to 79 pixels above and below the center line of the image to allow for the Square manipulation?

    • Author
      Dave Seah 12 years ago

      I think I’m being ambiguous about the buffer…I was thinking framebuffer, not space buffer.

      Another way of putting it is that Square takes the center 158 pixels (21 pixels at the top and 21 pixels at the bottom are cropped, assuming 200×200 pixel source) .