Blog

  • Making Icons for Square Register

    August 5, 2012

    "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 :)

    Read more
    DSri Seah
  • Website Refresh!

    August 3, 2012

    I just switched themes from the old TwentyTen-based theme to a new one. It looks pretty much the same as the old one, except the layout is a bit tighter. It will be the basis for future changes to the process journals. I wrote some terse notes on the Agenceum Web Agency blog if anyone’s curious.

    Read more
    DSri Seah
  • Website Update on DavidSeah.Com

    August 3, 2012

    I’ve been pecking away converting my old website template for davidseah.com for several months. The actual development work was done on the server live using the Theme Test Drive plugin. This allows an administrator (me) to see one template while the rest of the world sees another one. Yesterday I finally got it to the point where I thought I could switch it over.

    The cool thing about this approach was that it allowed me to live with the template for a while. While it doesn’t look very different from the old template (based on the venerable Twenty Ten theme), it’s using the quick and dirty typography and layout code I was playing with last October.

    (more…)

    Read more
    DSri Seah
  • Task Juggler Card Design: Day 2 Followup

    August 2, 2012

    Thursday was busier than expected, so I didn’t write down my tasks on the task cards until well after dinner. And you know what? These tiny little cards are TERRIFYING! :-) Thoughts follow. (more…)

    Read more
    DSri Seah
  • Prototype Card-Based Task Juggler

    August 2, 2012

    Card Docks and Business Cards I was working through my project list yesterday, making a list of projects to work on in the coming few days. I wanted to make a few “big picture” task cards using Fog Creek’s card-based tracking tool Trello on my new iPad, but there isn’t a native iPad app available for it yet. While I can use it in the iPad’s browser, the experience is slow and crappy. So, I spent some time today putting together a prototype card system that would work with my index card docks.

    The basic idea is to create small task tickets, similar to the Task Order Up! but smaller and simpler. There are three pieces of information important to me:

    • The task itself or project
    • The tangible result or deliverable
    • The expected result or benefit

    To encourage the starting of these projects, I added four check-off areas for a 15 minute start, which is sufficient to get moving. Furthermore, I added an expiration date (as opposed to a due date) when the task ticket is invalid. The idea is that these task tickets are created only when you intend to do some work.

    Task Cards on Avery Template I prototyped these using some Avery edge-to-edge business card inkjet stock, which unfortunately slips a lot through the inkjet printer so the design isn’t centered properly. Tomorrow, I’ll try using these prototypes to keep track of the projects I want to make progress on, using them as a kind of physical reminder of what I need to do and why.

    After I refine the design, I will have these produced using a cheap online business card printer, which has greater precision, and then think about producing some kits for sale. These first prototypes are merely to give me an idea how easy they were to read. The 8 point type seems legible, but the large text is excessive.

    Task Cards World I’m already seeing some simplifications I want to make, and some changes to the design to make them more visually striking.

    The effect I’m going for is that of a “personal project forest” that I can set up somewhere near my desk, showing ONLY tasks that are in the creative-but-unknown variety. For these types of projects, it’s important just that time is being spent on it because it’s impossible to predict how long the creative task will last, or what rabbit holes the tasks may lead you toward. To process a task means merely allocating 15 minutes of work time to it, not necessarily completing it. The momentum that arises from even just 15 minutes can be very beneficial, I think.

    Read more
    DSri Seah