When building outstanding consumer products, a mix of design and development is always required. Maybe you’re a designer that also codes, or maybe you’re a developer implementing a designer’s pixel mock-ups. Either way, you’re going to be working hard if you want to ensure the final implementation perfectly reflects the design, pixel for pixel.
Getting a design implemented to a world-class standard takes hundreds of tiny iterations and persistently sweating the details. To do your best work, you need great tools to help you. What follows below is a list of tools I frequently return to when I’m building a great UI, either for the web, or for mobile apps: without them I might have gone insane long before a project was finished.
Desktop Tools to Improve Implementation Productivity
DigitalColor Meter is a tiny app that ships in the Utilities folder in Applications on every version of Mac OS X. It’s equivalent to the pipette/dropper tool in Photoshop: as you move the mouse around the screen it shows a magnified version of the content near the mouse pointer.
More importantly, it shows the exact color of the pixel your mouse is pointing to.
For mobile apps, you can use this with a screenshot to help reverse-engineer an interesting feature. For web development, it can help you gauge a splash of color in a logo or something interesting in a bit of stock photography. If you’re a web developer, there’s one specific pro tip: configure the app to display hex values. This makes it effortless to translate colors directly into a hex value in your CSS. You can do this from the View menu in the app. Although it won’t remember your setting, it’s still an immense time saver:
When a designer and developer are working remotely DigitalColor Meter can save many email exchanges. If an obscure but important color in a mock-up didn’t get fully described, it might normally take a few emails to get the info the developer needs. Instead, the developer can fire up DigitalColor Meter, determine the exact pixel color, and get straight back to implementing.
Zooming in and out on a whim is massively under-rated and becomes increasingly necessary when dealing with designs that are being displayed at one DPI or viewport size on a laptop or display, but another DPI on a phone or tablet.
In your browser, in Preview.app and in most paint programs, you can zoom in and out using ⌘+ or ⌘-. But you can also zoom into any area of your screen with a quick two-finger flick after enabling an accessibility preference. Go to System Preferences and click Accessibility. Check the box marked “Use scroll gesture with modifier keys to zoom”:
You can then hold down the Control key and swipe two fingers upward on the trackpad. This is really great when an application doesn’t support zooming but you need to get closer to the pixels. It’s also helpful if an app’s own zoom behavior would affect the content: eg. Google Chrome will rescale things rather than literally zoom in on the pixels. Control and a two-finger swipe has helped me check an exact pixel alignment many times over the years.
Mobile Tools to Improve Test Productivity
Did you know you can zoom-in anywhere on your iPhone? Similar to the Control-Swipe on Mac OS X described above, you can enable arbitrary zooming on an iOS device. First, enable the feature from the Settings app, thus:
Now you can double-tap using three fingers to zoom in and out of your device. Watch out for that three-finger drag-tap gesture (to adjust the zoom level): I found it a little tricky to get the hang of.
Real-time syncing between mobile & desktop really boosts productivity: sounds obvious, but seeing a mobile interface design/prototype on the device it’s intended for is really important. Designs simply look different on a device. File syncing solutions like dropbox can be helpful for getting mock-ups onto your device. But to really speed up iteration times, Skala Preview is a fantastic free tool that makes you feel all-powerful: it live-syncs images from your mac to your iPhone or android screen.
Some Tips that Cut Across Devices
Have a physical ruler on your desk, or a piece of card, basically anything with a strong straight edge: sometimes there’s no substitute for something physical to help ensure two distant elements are physically aligned to the exact pixel.
Make use of digital rulers/grids if you’re having any problems gauging the dimensions of a container or screen. Cameron Moll has some great grid/ruler images that are helpful when loaded on a web page or added into a mobile app.
Start out with placeholder images in your implementation using a service like placehold.it. It lets you build arbitrary-sized images that are marked with their dimensions. I’ve used this to keep a design’s layout pixel-perfect without getting blocked while waiting for an exact image or full-quality photograph.
I’m not a designer by training, so I loved getting up to speed on design with The Non-Designer’s Design Book, especially the chapters about alignment and proximity. Reading through some of the rules of thumb helped me build a stronger mental model of how to evaluate design and how to better anticipate a designer’s possible intent. It’s also helped me develop a sense of correctness in design, which makes it easier to see at-a-glance whether an early design draft is completely correct, close to being right, or if it still has plenty of work left to do before it’s ready for shipping.
Go forth and pixelate!
As a developer, using the tools and techniques above has helped me develop a strong confidence in my design taste. This in turn has boosted team productivity as my designer colleagues increase their confidence in my aesthetic abilities. Being able to politely push back or suggest adjustments to a design as it’s being developed helps designers get a stronger sense of the implementation, helps foster a greater sense of ownership and collaboration, and helps keep everyone’s productivity high.
Do you have any time-saving tools you couldn’t live without? Please share your favorites in the comments below!
Follow @LeeMallabone to make sure you get my next post about front-end development; tools, tips and cutting-edge UI hacks.
fonicmonkey 