asimpleframe

Responsible Use

Over the past year, I’ve had numerous people tell me that they or someone they know deleted the Facebook app from their phone. Why? Were they removing an app that they never used? No. In each case the reason was the same – “I use it too much.”

Deleting an app we “use too much” is an interesting phenomenon. It’s an acknowledgement that we think we spend too much time with our phones (or more specifically, a certain app). We want to be spending our time doing other things, but have trouble modifying our behavior. It’s a common issue, and the evidence of our collective awareness – and increasing guilt and frustration – is everywhere.

For example, in a sermon I heard recently, the pastor referred to his iPhone as “my precious.” Everyone in the congregation laughed at the joke, no doubt because intense feelings of attachment to our phones is common. A friend’s honest confession sums it up best: “I know I’m addicted to my iPhone. I know it.”

Jonathan Ive, Senior Vice President of Design at Apple, describes the “unique relationship that people have with their iPhone:”

It’s probably the object you use most in your life. It’s the product that you have with you all the time.

Having our most-used object with us all the time can make it difficult to give our attention to anything, or anyone, else. In fact, in addition to deleting apps from our phones, we are designing other ways to force a separation between ourselves and our devices in order to reconnect with other people.

For example, a tablecloth has been designed with zippered, built-in phone pockets to keep our devices from interfering with conversation while dining. A beer mug has been designed that stands upright only when rested on a phone, ensuring it stays out of commission. To the same end, a restaurant now pays customers to check their phones at the door. And in a new dinner game, the first person to reach for their phone wins the prize of footing the bill.

As we invent new ways to separate ourselves from our phones, we must realize that our device attachment is more than skin deep. Philosopher James K.A. Smith points out how touch-screen devices appeal to – and even shape – our desires for control and power:

The technology affords and invites rituals of interaction. … The material rituals of simply handling and mastering an iPhone are loaded with an implicit social imaginary. To become habituated to an iPhone is to implicitly treat the world as “available” to me and at my disposal – to constitute the world as “at-hand” for me, to be selected, scaled, scanned, tapped, and enjoyed.

Comedian Louis C.K. goes further. He observes that we constantly interact with our phones in order to mask our deep-down feelings of loneliness and emptiness:

You know, underneath everything in your life is that thing – that empty, forever empty. … that knowledge that it’s all for nothing, and you’re alone. … and sometimes when things clear away, you’re not watching anything, you’re in your car and you start going “oh no, here it comes – that I am alone,” it starts to visit on you – you know, just this sadness. Life is tremendously sad. … That’s why we text and drive. … People are willing to risk taking a life and ruining their own because they don’t want to be alone for a second.

In addition to our own motivations, we must also realize that our phones and apps are designed with the specific goal of eliciting our constant use. Jonathan Ive, commenting on his work as a designer, said:

I guess it’s one of the curses of what you do. You’re constantly looking at something and thinking, “Why is it like that? Why is it like that and not like this?”

When we ask these questions of our devices, the answers can be telling. For example, why are notifications always set to “on” by default? How does this default preference, designed into the system, affect my behavior?

In the case of digital products like Facebook, what are the designers trying to achieve? What are the actions they would like us (the users) to take? Why is it the way it is? Most often, the answer involves the goal of fostering as much engagement (use) as possible. Why? The more people use a digital product or service (especially those that are “free”), the more money the company makes (usually via data-driven advertising). Writing of Twitter’s upcoming ipo, The Verge’s Casey Newton writes:

Like any social network, Twitter’s top priorities include increasing its number of active users and – just as importantly – increasing the time they spend using the network.

Simply put, most digital products are designed with a bias towards eliciting as much use as possible.

This brings us full circle – to deleting Facebook in order to use it less. It begs the question of responsibility. As consumers and users, what is the measure of our responsibility to self-control and self-discipline in our use of digital devices? As digital product designers, what is the measure of our responsibility to encourage moderation (not just maximum use and profit) in the way we design our products to be used? Both are topics I wish to explore further. For now, however, I just want to raise the questions – as I’m not sure they’re even being asked.

The First Time I Saw an iMac

The first time I saw an iMac, I didn’t know what it was, but I vividly remember the moment. I was at the mall in the small Maryland town where I grew up, inside the Sears store. I’m pretty sure I was there with my mom, but I don’t remember what we were shopping for. I was about fifteen years old. I didn’t notice the iMac because I was interested in computers at the time. I noticed it because of the design – specifically, the translucent color.

Of course, the iMac I’m remembering is the iMac G3. This is the computer which Steve Jobs envisioned and Jony Ive designed when Jobs returned to Apple. He bet the company on it and won. At the time I saw this computer as a teenager, I wasn’t even aware of Apple. (We always had pcs growing up.) But I clearly remember the moment of encountering that computer. I can still picture the inside of the store. The candy-colored iMac jumped off the beige shelves filled with beige and black consumer electronics. I was intrigued.

Looking back, it’s funny to realize that it made such a lasting impression on me. I think this was because it was unlike any other computer I had seen before. I didn’t know anything about it, but I was attracted to it. It was just cool.

About four years later, I encountered the same iMac G3 at the Design Museum in London. I was there with fellow college students on an art tour of England. The featured exhibit was for the Design Museum’s first Designer of the Year Award. One of the nominated designers (and winner of the award) was Jonathan Ive. There, behind the glass exhibit walls, was the iMac G3. It sat alongside the iPod and Ive’s other iconic Apple designs up to that point. At the time, I didn’t make the connection between that moment and when I had encountered the iMac in Sears years earlier. However, seeing Ive’s work on display also left a big impression in my mind.

What is it about that iMac design that was so remarkable? What is it about the design of objects that can make such an impression? I think the answer has something to do with raw emotional appeal. Both times, I reacted to the design of the iMac more from intuition and feeling than anything else.

Today, I tend to eschew unnecessary visual styling – and even color – added to products. I prefer designs that are modern and simple – designs unswayed by fashion trends. With the release of the iPhone 5c, much was again made of Apple’s use of color in product design. Though I would probably choose white if I were to buy one, the undeniable attraction of the colors is still there for me. Perhaps it’s a reminder to not forget the most powerful element in design, however elusive and abstract it may be: emotion.

Focusing on Beauty

This week, I finished reading Making Ideas Happen by Scott Belsky, the founder of Behance. In one of the last sections of the book, he talks about an experience he had at a storytelling workshop lead by master storyteller Jay O’Callahan. Each participant would tell a story, receive feedback, and then tell it again in order to improve their craft. This sounds standard enough, but there was a catch: constructive criticism was not allowed.

Instead of pointing out the weaknesses in another person’s storytelling, participants were instructed to only point out specific strengths.1 The method proved effective. After receiving positive feedback, participants would improve their storytelling in the next round. Strengths would get stronger and weaknesses naturally faded away.

O’Callahan explains the motivation behind this method:

If our eyes are always looking for weakness, we begin to lose the intuition to notice the beauty.

His reasoning gives me pause for two reasons. One, it provides a deeper motivation for positive feedback. As one who defaults to criticism, my efforts at pointing out positives in a design are often shallow. I do it because I think I should. But O’Callahan is not talking about a false buoying of self-esteem. He’s concerned that we don’t lose the heart and soul of the art we create. With this motivation, positive feedback becomes genuine and enriching.

Two, O’Callahan’s method sends a gentle but somewhat startling warning. By definition, focusing on something other than beauty excludes our attention from it. If we only look at weakness, will we stop noticing beauty all together? This is the great danger. Blindness to beauty deadens our souls and, ironically, prevents us from reaching the goal of criticism – making something great. I don’t believe that critique is unnecessary, but honing an adoration of a beauty is essential, not only for great design – but for our hearts.


  1. O’Callahan calls this “Appreciations.”

The Setup: Pocket Note-taking Tools

In Making Ideas Happen, Scott Belsky argues that the design of tools matters. If a tool is well-designed and beautiful, you are more likely to use it. This doesn’t necessarily mean it has to be expensive or elitist. A good, beautiful tool can be common yet often-used and loved. Ultimately, the right tool for the job is subjective and a matter of personal choice. Even so, it can be helpful to learn about the tools others use and the qualities for which they are valued. In this spirit, here are some thoughts on some tools I’ve come to use often and love – my pocket pen and notebook.

The Need

Nothing beats pen and paper when an idea needs to be quickly jotted down or sketched. Ideas can come at anytime and capturing them in the moment is essential, lest they be forgotten. Thus, having pen and paper handy at all times is paramount. The obvious solution is to keep a small notebook and pen in one’s pocket at all times.

The Notebook

Choosing a notebook was fairly easy. It needed to be small and flexible enough to fit comfortably in my pocket. It also needed to be relatively cheap. Expensive notebooks can feel too precious to the point that they discourage use. One shouldn’t question whether or not an idea is worthy enough to take up space in a fancy notebook. It simply needs to be used.

I keep some sticky notes handy on the inside front cover of my notebook. I always draw a line through the first page.

Paper, page count, perforations and pockets were of secondary concern. Plainness, however, was important. A notebook should be a simple frame for thoughts and ideas. It shouldn’t scream out ideas, text and logos of its own. Both the cover and the pages needed to be plain.

Moleskine packaging

The Moleskine cahier plain journal fit the bill. Relatively inexpensive, three can be purchased for less than ten dollars. The board covers and inside pages feel great. There is a pocket for loose papers in the back, and the last sixteen pages are perforated. The plain cover is interrupted only by a tastefully small, blind deboss of the Moleskine logotype on the back. As pen ink shows through the somewhat thin pages, I write on only one side of each page.

The Pen

My favorite pen is the Pilot Precise V5 RT. Though ugly, it is inexpensive and writes incredibly well. However, it is not pocket-sized. Being retractable, it can also accidentally be extended once inside a pocket and bleed ink onto your clothes. Thus, my criteria for a pocket pen was set. I wanted a pocketable, unbreakable version of the Pilot Precise V5 RT.

Fortunately, the V5 RT uses a replaceable ink cartridge. All I needed to find was a pocketable, unbreakable pen body that could be hacked to accept it. The first serious candidate was the Fisher Bullet Space Pen. Thought it has a great form factor and finish, the V5 RT’s ink cartridge simply didn’t fit.

The next candidate, however, ended up working. Thanks to the power of Google, I stumbled across a completed Kickstarter page for the Solid Titanium Pen + Stylus – a minimal, titanium pen designed to accept over 30 different ink cartridges, including the V5 RT. Though this was a standard-size pen, I quickly discovered a pocket-sized version – the XTS, which accepts cut-down V5 RT ink cartridges. 1

The XTS fit my requirements. It is a very nice pen, but not perfect. On the pro side, it is virtually unbreakable, pocketable, minimal, and accepts the V5 RT cartridge. It feels solid and well-made. On the con side, it is relatively expensive. The aluminum XTS I purchased cost $40. Secondly, it’s pieces connect (when opened or closed) by screwing them together. This is a great feature in a pocket pen, making it very unlikely for the pen to come apart in your pocket. Unfortunately, the threads stripped out on the first day I started using it. I’m happy to report that the maker’s of the pen, BIGiDESIGN, replaced it quickly at no charge, and I haven’t had a problem since. However, revisiting their site leads me to believe I wasn’t the only one to encounter this problem. As of this writing, the aluminum XTS is not being sold and the full-size version has been updated to include “newly improved, stronger threads.”

Threading on the ends of the XTS

The Cost of Choice

In Barry Schwartz’s TED talk on the paradox of choice, he says that “Some choice is better than none. But it doesn’t follow that more choice is better than some choice.” It’s incredible that I could find most everything I wanted in these tools, including a pocketable pen body made of a metal that accepted my favorite ink cartridge.

However, as Schwartz argues, having this incredible choice has a downside. Arguably, I’ve wasted too much time and brain power on finding a pen from the available choices. More significantly, the incredible number of choices leads me to believe that a tool that is a little bit more perfect is still out there, waiting to be found. Even though the tools I have are truly great, I can easily become dissatisfied with them or disappointed in the choices I’ve made when something isn’t exactly as I want it to be.

It’s a great thing to find tools that are enjoyable to use. At the end of the day, however, the most important thing is what the tools accomplish – capturing ideas and doing creative work. Though I love my current pen and notebook setup, I could get by with almost any piece of paper and a pen or pencil. Just like the best camera is the one that you have on you, the best tool is the one that gets the job done.


  1. I purchased the XTS Aluminum pen. As of this writing, the XTS Aluminum was not being sold on BIGiDESIGN’s website.

The Internet, Distraction and Sticky Notes

Revealing the hidden Rdio window, I check the name of the band that’s caught my ear. “Who are they? Where are they from?” I wonder. I recall the furniture exhibit I visited earlier in the day. “How much does that chair cost? Who makes it? How is it made?” I remember an email that I need to send, a quote to write down and a book to purchase. These thoughts run through my mind as I sit at my work desk. Seemingly benign, they have significant power to disrupt and distract my focus.

These thoughts are given their power of distraction by the multi-purpose tool sitting on my work desk: a computer. The internet is but a click away. Out of Photoshop and into Chrome, I quickly find myself deeply entrenched in a band’s Wikipedia page or a furniture manufacturer’s website. Not only has the last ten minutes been spent reading information of dubious usefulness, my concentration has been broken. I must now refocus my attention to begin anew on the task at hand, any previous momentum squandered and lost.

Today, the satisfaction of every fleeting curiosity can be reached in seconds. Thanks to our phones, we need not even be sitting in front of a computer. A question arises in conversation. No one knows the answer. A phone appears. Google is searched. The answer is found. What were we talking about again?

The price we pay for this convenience and abundance of information is subtle but real. As Herbert Simon stated, “A wealth of information creates a poverty of attention.” In conversation, our private screens often win our attention more fully than the person sitting across from us. In our minds, we are deprived of what it is to remember, ponder and wonder. At work, we are robbed of productivity and focus – which brings me back to my desk.

Satisfying the whims of trivial curiosity is now second nature. Searching instinctively comes before thinking. The implication for those who do their work on computers? Distraction is second nature. I don’t have all the answers, but I have found one simple weapon to be effective in reprogramming my response. All that is required is pen, paper and a slight diversion. Instead of typing into Google’s search box, I write interrupting thoughts on a sticky note. My mind’s impulse to act is satisfied. I’m left with a bulleted list – an inbox if you will – of disparate thoughts, unintelligible to anyone but me.

Focus is the real goal. Productivity, thoughtfulness, and creativity don’t exist without it. Having unloaded stray thoughts, my mind is cleared to focus on the task at hand, uninterrupted. Upon completing the task, taking time to revisit the list becomes a reward for work well done.

This process has one peculiar side effect. As I begin typing the contents of my list into a search box, it suddenly becomes shorter. Thoughts once so urgent to warrant interruption are viewed in a new light. Feigned importance fades to triviality, a waste of even my free time.

Quoted: Jennifer Morla on Design Matters

During recent commutes to work, I’ve been listening my way through old episodes of Design Matters with Debbie Millman (iTunes / SoundCloud) – a podcast in which Debbie Millman interviews well-known designers. This past week, I listened to the Jennifer Morla episode from 2011. Jennifer Morla – President and Creative Director of Morla Design and recipient of the 2010 AIGA Medal – is full of design wisdom accumulated through years of experience. Below are some highlights from the episode that resonated strongly with me.

By surprising first and informing after. So, how you branch beyond your constituency is, really, doing an alternate view of what design is expected within that category. —19:30

Oftentimes I say that words are as powerful as images, and images can be more powerful than words. Because I think that, especially young designers, they don’t realize how important words are, really, and how they can be the the actual structure to your piece or the concept to your piece. —20:26

I think whenever you can engage the audience in actually a physical way, you will have more meaningful relationship and communication with them. —23:19

People love to be educated. They love to know things. I mean that want of knowledge certainly happened, let’s say, within the wine industry. … It’s that sort of education that brings value to the product itself. —26:32

Art is very different than design beecause with design, there’s always two people involved. Somebody has to pose something to you and you are creating, somewhat, a response. It’s a response. I don’t even know whether it’s solving a problem. I like to say it’s more of a response to what’s being proposed. —31:06 

Tutorial: How to Create a Custom, Crisp Icon Font with IcoMoon App

By now, you’ve probably heard all about the great benefits of using icon fonts. You may have even used a service like Font Awesome or Symbolset to implement an icon font on your own site. But how do you go about creating an icon font from scratch using your own custom icons and ensure that they render crisply? This tutorial will answer just those questions – providing some fundamental background knowledge as well as the specific steps to create your own custom icon font.

Overview

The process for creating our custom icon font will involve two tools. First, we’ll use Adobe Illustrator to draw our custom, vector icons. Second, we’ll use the IcoMoon App (an online tool for creating icon fonts) to transform those vectors into the font files and css needed to implement our icon font on a website.

It should be noted that there are other ways to create custom icon fonts. You can manually create a font using a font editor like Glyphs combined with Font Squirrel’s Webfont Generator to create the needed web formats and code. You can use Font Custom if you prefer the command line. However, using IcoMoon App is by far the easiest, most powerful, and cheapest (it’s free!) way to create a custom icon font. This is especially true if you want your icons to render crisply – which brings us to the first step of creating our icon font.

Determine Your Crisp Size

What does it mean for an icon to be crisp? Essentially, it means that the icon renders sharply when displayed at a small size. This is determined by how the vector outline of an icon aligns to the pixel grid of the screen when it’s displayed.1 In this case, a picture is worth a thousand words:

Keyamoon’s calendar icon looks crisp and fuzzy at different sizes

As you can see, the icon on the right appears fuzzy because its outlines don’t align to the pixel grid. The icon on the left, on the other hand, appears crisp and sharp as it aligns exactly to the grid.

Is it possible to ensure that the vector shapes of your icon font align to the pixel grid? The answer is yes, but only at one particular size and its multiples. IcoMoon terms this the “Crisp Size.” At 16px, the most common Crisp Size, the icons will appear crisply with a font size of 16px, 32px, 48px, etc.2

To determine the best Crisp Size for your icon font, consider the intended size and usage of your icons. For example, Font Awesome uses a Crisp Size of 14px so that the icons align well next to lines of 14px text (Bootstap’s default font size).

Draw Your Icons

With your Crisp Size determined, the next step is to draw your vector icons in Illustrator. As an example, I’ll use the article end mark I created for A Simple Frame, which has a Crisp Size of 16px.

First, create a new artboard with a size of 512px × 512px (IcoMoon App’s default font em size).3 Next, set the document grid to represent pixels. To do this, divide the artboard dimensions by the Crisp Size. In this case, 512 ÷ 16 = 32. Enter this number in Preferences > Guides & Grid > Grid > Gridline every.

Setting up the grid in Illustrator

Also, set the grid subdivisions to 1.4 This will result in a document perfectly gridded to your Crisp Size.

Custom end mark icon drawn in Illustrator and aligned to the grid

Draw all your icons in this manner, and export them from Illustrator as svg files. Be aware that the name of your svg files will be used as the names of your icons once imported into IcoMoon App (though they can be edited and changed once imported).

Import Icons into IcoMoon App

With svg files in hand, you’re ready to import your icons. Open IcoMoon App, click “Import Icons,” and select your svg files. Your icons will now appear under Your Custom Icons.

IcoMoon App with custom endmark and bullet icons selected

Note that you can change the preview size of your icons. Set this to the Crisp Size of your font to make sure your icons are drawn correctly and appear crisp. Also note that you can edit and delete icons using the respective tools in the menu bar. Edit can be a very helpful tool to nudge your icon a pixel or two within the square grid if a minor adjustment is needed.

Adjust Font Settings

Now it’s time to create a font from your imported icons. Using the select tool, click to select each icon you would like to include in your icon font. Next, click the Font button at the bottom of the page.

Preferences

You should now see a preview of all the icons to be included in your font. As an example, we’ll use the icon font I created for A Simple Frame, which contains only two icons – the previously mentioned end mark and a custom bullet.

IcoMoon App’s font creation screen

The first order of business is to adjust the settings for your font. Click the Preferences button to name your font and set a class prefix.

IcoMoon App’s Preferences menu

The class prefix refers to the css class names that will be generated. By default, it will use the name of your svg file (which imports into IcoMoon App as a tag) prepended with “icon-“. You can also edit the font metadata if you wish.

Font Metrics

Next, click the Font Metrics button and input your Crisp Size in the “Optimize Metrics For” field.

IcoMoon App’s Font Metrics menu

This is very important. If it is not set correctly, your icons will not appear crisp at your Crisp Size. IcoMoon App also allows you to set Font Metrics manually. Though that is beyond the scope of this tutorial, this is a very powerful feature. It allows you to tweak parameters like the relative height of the baseline, which can be helpful in ensuring your icons align to baseline of your text.

Set Unicode Values for Each Glyph

Each glyph of your icon font will now need to be assigned a Unicode value. Although it can get a bit technical, it’s important to have a basic understanding of Unicode to ensure you set up your icon font correctly.

About Unicode Values

Unicode is a map of code points that correspond to characters used in alphabets. For example, the Unicode for a lowercase “a” is “u+0061.” Every font assigns this same Unicode value for its lowercase “a” character. That way, when you press the lowercase “a” key on a keyboard (no matter what font you’re using), a lowercase “a” appears on your screen.

The Importance of Setting Correct Unicode Values

Since icon fonts consist of symbols, it’s important that these symbols aren’t assigned Unicode values reserved for letters. As Chris Coyier points out on CSS-Tricks:

the letters become “content” and a part of the semantics of the document. Or worse, read outloud by screen readers.

Essentially, you want to avoid using Unicode values for letters, because your icons are not letters, and you don’t want them to be read in your html as such. Fortunately, there are Unicode values reserved for commonly used symbols as well as custom symbols. All that’s left now is choosing the right ones.

How to Choose Correct Unicode Values

If your icon maps to a commonly-used symbol that already has a Unicode value, it’s best to map it there. IcoMoon App makes this easy to do. To see if you can find a Unicode match for your icon, click the menu arrows on your glyph and select “Symbols” from the list.

Opening the symbols menu

This opens up a grid of Unicode symbols. Find the one that matches your icon, and select it. For example, I found a match for my end mark symbol under “Geometric Shapes”.

Try to match your icons to appropriate Unicode symbols

If you can’t find a match for your icon, have no fear. There’s a block of code points in the Unicode map reserved for custom characters and symbols. It’s called the Private Use Area (pua) and ranges from U+E000 to U+F8FF. IcoMoon App also makes it easy to assign these values (which are assigned by default) by selecting “pua” from an icon’s menu. With all Unicode values assigned, you’re now ready to download your custom icon font.

Download Fonts and CSS

Click the download button to download your icon font package. Included in the downloaded files are everything you need to implement your new icon font. The Fonts folder contains all of the different font file formats required by different browsers. It also contains a .dev.svg file that can be imported back into IcoMoon App to edit your icon font at a later date.

The style.css file includes the @font-face rule that references all of the font files in the fonts folder. Additionally, it contains the css for two different methods of implementation – data attributes and class selectors. In HTML for Icon Font Usage, Chris Coyier explains in detail the implementation of the data attribute method and why he favors it over using class selectors.

Also included in the downloaded package is an index.html file that displays a preview of your font as well as a .js file for supporting IE7.

Start Using Your New Icon Font

Now that you have all your files and know what they do, all that’s left is to copy the files to your own server and start using them (just make sure to update your @font-face rule to point to the location of the fonts on your sever).

Speaking from experience, IcoMoon App makes the process of creating custom, crisp icons accessible, easy, and fast. It simplifies and automates much of the process while also providing the ability to tweak advanced settings and parameters. It’s definitely the best tool out there right now for creating custom icon fonts.


  1. This is only an issue on standard-resolution displays (72dpi). At small sizes, there simply isn’t enough resolution for the icons to render well. On high-resolution displays, like the retina display on an iPhone, it’s a nonissue. There’s so much resolution that it really doesn’t matter how the icon aligns to the grid.

  2. As font-size increases (and thus the number of pixels), it matters less and less if your font-size is a multiple of the base Crisp Size.

  3. IcoMoon App’s default em size can be changed in the Font Metrics menu. For more information about font em sizes, see Pixel Perfection on the Glyphs blog.

  4. Some icons in your icon font file may need to be optimized for a larger size than your Crisp Size. A common scenario for this is embedding a logo as a glyph in your icon font. To do this, you can adjust the number of  grid “subdivisions” in your Illustrator file to the factor of magnification you intend to use for your finished icon. So if your subdivisions are set to “2”, every grid subdivision would represent a whole pixel when the font is displayed at twice its base Crisp Size.