Drew Warkentin joins 31Three

Nearly 20 years ago Drew Warkentin and I sat in a small studio on the 3rd floor of his home in Grimsby and talked about how one day we would run a creative studio together.

We were in our mid teens at the time, and clueless as to what the future would hold. But we knew that we worked well together and shared a strong creative bond.

Those conversations of 20 years ago proved prophetic, as in late June, Drew has joined me as a full-time designer at 31Three.

A graduate of The Ontario College of Art & Design, Drew began working independently as a web designer in 2006 and hooked up with Airbag Industries in 2007 which later became part of Happy Cog. He spent the last five and a half years working there as designer and later Senior Designer.

From day one, Drew has hit the ground running and has been putting together some amazing design work. He’s currently working on a project with the Orthodox Union, and will then move onto one with the United Nations.

I’m privileged to have Drew on my team, and even more privileged to call him a friend.

Flexibits - Chatology for Mac 

New app from Flexbits for searching your iChat / Messages logs. Been looking for an app like this for awhile. Via Daring Fireball

CIA Releases Analyst’s Fascinating Tale of Cracking the Kryptos Sculpture 

Interesting story about a CIA analyst spending over 400 hours cracking a complex code using only pencil and paper. I especially liked this quote…

When confronted with a puzzle or problem, we sometimes can lose sight of the fact that we have issued a challenge to ourselves–not to our tools. And before we automatically reach for our computers, we sometimes need to remember that we already possess the most essential and powerful problem-solving tool within our own minds.


Welcome to Sleekbitz 

Convert static designs into clickable, interactive prototypes for web and mobile apps.

I haven’t tried this out as of yet, but it sure looks interesting.

Authentic Jobs 2013 Promotion 

Hiring in the new year? Use the promo code “THREE2013” at Authentic Jobs to get 50% off! Expires midnight Jan 11.

iPhone contract for a 13 year old 

I’m taking some personal notes from this mom’s contract with her 13 year old.

14. Leave your phone home sometimes and feel safe and secure in that decision. It is not alive or an extension of you. Learn to live without it. Be bigger and more powerful than FOMO – fear of missing out.

15. Download music that is new or classic or different than the millions of your peers that listen to the same exact stuff. Your generation has access to music like never before in history. Take advantage of that gift. Expand your horizons.

16. Play a game with words or puzzles or brain teasers every now and then.

17. Keep your eyes up. See the world happening around you. Stare out a window. Listen to the birds. Take a walk. Talk to a stranger. Wonder without googling.

Banishing Your Inner Critic 

If “I woulda/shoulda/coulda” is a predominant part of your inner dialogue, then you have an active inner critic working tirelessly to make you drink the “not good enough” kool-aid.
Equally insidious and damaging (also frequently involving “shoulds”) is the tendency to compare oneself to others.

Great article from @denisejacobs on A List Apart.

Symbolset - SS Pika 

Pika is a friendly new symbol font with precise pixel-fitting and a warm, organic finish.

ARS Maquette WEB

All 10 weights and styles have been hand-hinted and optimized for Cleartype and Grayscale rendering to look as good as we could manage on your Mac and Windows computer screens. While ARS Maquette Web Pro is still in production, we believe this standard set with its Extended Latin language support, will be more than sufficient for your website projects.

A nice alternative to Proxima Nova from ARS Type.

Viewing documents at 100% in InDesign CS6

When InDesign CS6 came out earlier this year, I was excited to try out all of the new features aimed at resizing and reflowing documents. My excitement was quickly tempered by the way that the InDesign team chose to disconnect screen pixels from document pixels. At first I couldn’t figure out what was going on, but when I drew out a 20px square box, took a screenshot, and imported it into Photoshop to measure it. It came out as 31px.

Apparently this is a feature (not a bug) that works well in the print world (making stuff on screen a more realistic size) but fails miserably when working on screen.

Luckily there is a fix that is fairly straight forward.

  1. Download Pixel Perfect Script
  2. In InDesign, open up the scripts panel ( Window / Utilities / Scripts )
  3. Right click on folder labeled “User” in the scripts panel and select “Reveal in Finder”
  4. Place the “Pixel Perfect” script in this folder
  5. Return to InDesign and you should see the script show up in the scripts panel. Double click it and you should be done.

Hope this helps! (Via Peter Spier on the InDesign Forums)

A Movie Theater’s Walls, Broken Into Thousands Of Pulsating Pixels 

Created for the Hyundai Motor Group Exhibition Pavilion at the 2012 Yeosu EXPO in Korea, the Hyper-Matrix is comprised of a steel scaffolding and thousands of lightweight, 300mm x 300mm cubes, each attached to its own stepper motor. A choreographed routine makes the pixels pump in and out, creating rippling arrows and pulsating grids. It looks a little like being trapped inside some sort of monochromatic Tetris nightmare.


The Magic of Water 

So far AuthenticJobs and it’s community have raised nearly $50,000 for clean water. That’s ridiculous. Crazy ridiculous. Congrats to Cameron and the design community for what they’ve accomplished so far.

Let’s not sit back though… this year Cameron is pushing it a bit further.

Our goal this year is to raise enough funds to bring clean drinking water to an entire community and neighboring school. $30,000 will fully fund tap stands for up to 800 people, with water delievered to those taps through a series of electric pumps and pipes, and good old-fashioned gravity. No more trekking hours every day just to find water.

It’s amazing to think that we as a design community can join forces to bring an entire community clean water. Let’s do this.


Currently is a simple extension that replaces your “New Tab” screen with a new one that shows you the current time and the weather.

Beautiful extension. Hopefully they can sort out the current weather issues.

Young Oceans 

My Responsive Design Process (So Far)

In response to this recent Twitter conversation… here’s a quick overview of the design process I’ve been using for a responsive design project I’ve been working on.

I quickly settled on using InDesign for the following reasons…

Multiple Pages
No explanation needed. Having more than one page is a good thing. I’m looking at you Photoshop.

Multiple page spreads with variable page sizes
This is a killer feature for responsive stuff in CS5+. It allows to you create side by side pages, each with a unique width and document grid. In CS6, there will be something similar which they’re calling “Alternate Layout

“Photoshop Includes”
Using InDesign doesn’t mean that I need to stop using Photoshop completely. Right now I have separate Photoshop documents for the site’s header and footer, which allows me to make quick updates in a global header.psd file, and have the changes update across every InDesign page. InDesign also has the ability to selectively hide or show layers in an imported psd, which is helpful for showing drop down menus, hover states, etc.

Character & Paragraph Styles
These come pretty close to mimicking CSS styles, and allow me to quickly make global changes to my type styles.

I hate making tables in Photoshop. And yes… I know hate is a strong word. Making tables in InDesign however is a pretty simple process. But just like the original coders out there quickly learned, tables aren’t just useful for tabular data. I’m using them in a bunch of areas in my design where I need the content to easily expand or contract when I change it’s width.

Anchored Objects
This is a feature that allows you to paste a graphic or a text frame inline with your flow of text. This is great for keeping any little icons or article images flowing correctly even when adjusting page widths.

Upcoming InDesign Features

There’s a few new features that are coming out in CS6 that should make designing responsive sites a little more bearable.

Liquid Layout
Adobe describes this as: “Liquid page rules to automatically adapt content when you create an alternate layout with a different size or orientation in InDesign.” Sounds good to me. Can’t wait to see how if holds up with more complex pages.

Linked Content
The InDesign feature page describes this as “Link content within or across InDesign documents so that changes (including interactivity) made to the parent text or object are applied to all linked children objects.” I envision this functioning similar to a text-based php include. Make a text change in one of your layouts, and have it update across the rest of them.

“Love to have” Features

Snap to Pixel Grid
Right now I’ve set my document grid to 1px increments which helps, but it would be great to have an option to force everything to align to the grid.

Symbol Library
InDesign has a “library” feature where you can store and reuse commonly used design snippets, but it doesn’t have the ability to update those snippets globally. You can however, embed InDesign documents inside of InDesign documents… which gets you most of the way there.

Custom Page Titles or Page Folders
Managing a ton of pages can be tough, and only having the page numbers to go by doesn’t make it any easier.

Putting it all together.

One thing that I hate more than creating tables in Photoshop is writing. So instead of describing how I set my files up, and how all these things work together, I figured it would be easier to just create an InDesign document that uses Bootstrap’s grid dimensions, and let you download it for yourself.

(Looks like I mistakenly deleted my Droplr links with the files… I’ll repost if I can dig them up)

I’ll do my best to update this post as I refine my procedure. No promises.

Authentic Jobs

authentic jobs signHelp Wanted
Recent openings posted at Authentic Jobs.

Post your own job opening.