Cole Townsend | Blog

Graphic and Web Designer

[layervault]

The Photoshop file format is over 23 years old, yet it remains one of the most opaque file formats out there. PSDs are very widely used, yet Adobe has never produced an easy way for developers to work with the format. Indeed, some developers have gone mad trying to parse PSDs. We know the...

[keenancummings]

For the past ~18 months, I’ve been working as a product designer. And I’ve spent that same 18 months trying to understand what that means. This an attempt to articulate, in the broadest sense, what it means to practice product design.

My product design work is the work I am most proud of,...

[coletownsend]

Case Study: Mach 2000

June 15, 1973 a large demonstration was held outside the LIP (pronounced "leap") watch factory in Besançon, France.  The workers rallied under the phrase: "C'est possible: on fabrique, on vend, on se paie!" The factory was taken over by the workers and proceeded to be self managed. During the time, watches were shipped out under the cloaks of monks, who brought in the mail. In the first six weeks, they made revenue equivalent to half a normal year. 

"It is possible: we make them, we sell them, we pay ourselves."

The Mach 2000 was made during the period of self management. Roger Tallon spearheaded the design. As an industrial designer, the watch is simple and functional. It is beautiful without being obtrusive. The watch has several assets, the face and the crown. 

The face features a black background with an off white bezel as well as tick marks. The minute and second hands match these. The hour hand is red, as well as the hour tick marks. It spans roughly a quarter of the diameter of the face. In contrast, the minute and second hands are half the diameter of the watch face. The two are differentiated by their width.

A red knob is used for the crown. It is three dimensional and red, contrasting the flat black of the watch casing. It is set in a cut out section of the upper right hand corner of the watch, making it easy to access when worn on the left wrist. 

When a product is made solely by  a group of designers and producers, without management, it often ends in a success. Look at Layervault, Karmaloop, and Square. They were all started with a design at their core. I realize what I'm saying isn't new. 

That's the point.

The watches made by LIP in 1974 were designed and produced by the designers and watchmakers with no outside influence. The doors were shut to anyone except monks, and food delivery. The occasional reporter was let in for interviews. They didn't care about what management thought would make the most money. They instead were producing items about which they were passionate and that they knew people would enjoy.

[coletownsend]

Typistry is Available

Typistry is a minimal, single column theme based on Safari Reader and minimal writing apps like Byword and iA Writer. It has stylistic similarities to A List Apart and Information Architects blog, and focuses on delivering a perfect reading experience through golden ratio typography, and a beautiful serif font named "Lora". 

The theme is written in HTML with mostly HTML5 attributes. The styles were written in CSS with some CSS3 attributes. It is fully responsive, and reads well on wide screens as well as tablets.

Read easy — Typistry

Creative Market

[coletownsend]

Photoshop Replacement?

There's been some talk about Sketch being a potential replacement for Photoshop. While I think that's a stretch, it's not so far off. 

Sketch App by Bohemian Coding is absolutely awesome. It's built for UI work. It exclusively uses vectors. The interface is simple and intuitive. I can run it off a thumb drive and the program is smaller than the average PSD.

One area where Sketch lacks is resources. There are so many Photoshop plugins, grids, brushes, and templates. As the industry standard I would expect there to be more for Photoshop, just as Windows runs more games than Mac. That's just how it is.

Even so, there are devs that make games specifically for Mac. I would expect some designers to make resources specifically for Sketch App. I didn't find as many as I would like, so I took a few hours of my time to make The Royal Macs. It features a minimally styled iMac, iPad, and iPhone that are infinitely scalable. You can download it from here: 

I encourage you to give Sketch a try. The app is 10mb; neither slow download speed nor hard drive size is a good excuse.

[coletownsend]

I recently made a text editor, called Ecrit.es. The aim was simplicity. Now there is a blog theme with the same goal.

I encourage you to use this theme to exercise your writing, to inspire you to rely on words, to rely on your own work to make an awesome blog. The theme itself is clean, relatively plain, and provides you with everything you need to frame your writings.

[coletownsend]

The Username Quandary

We are a generation of usernames and avatars. Online, our identity is formed by our Facebook and Twitter accounts, which grant us access to a variety of sites. Our real name is hidden behind a clever handle, and alluded to by our profile photo. I find that I recognize those that I am familiar with solely by their username or avatar. I no longer search for their true name, nor do I usually know how to spell it.

Why is a real name even important in user interfaces anymore? Some programs lend to using a real name. For Facebook it is vital. On the other hand, I don’t find it necessary for Twitter. Users recognize who they follow by a username or an avatar. Basically, users process a relationship between the username and avatar, the real person, and the tweet. They see the username, recognize to whom it belongs, then attribute the tweet to the real person. Eventually, the second step is an instantaneous, subconscious connection and users no longer think about the real person’s given name. They associate the username directly with the real person. Several design features catalyze this process. For instance, avatars will be placed on the left hand side of a feed, making it easier for users to scan their tweets and filter through those which they wish to read, and those which they wish to ignore.

I think a person’s real name is still important, but I see the majority of new registrations requiring usernames. People may be comfortable when they are framed by a pseudonym. It can change the way a person is perceived, based on the emotions and connotations with which it is associated. On the other hand, there is a movement towards increasing transparency on the web. We like to know with whom we are interacting. The result is a fusion of username and real name, basically a translation of one’s given name into a handle used for Twitter, LinkedIn, Instagram, Dribbble, etc.

[coletownsend]

Don't Study Design

While I don’t have experience with graphic design schools, or even that much with graphic design, I find a general consensus about the subject. I see that many successful designers did not attend design school. They did not take graphic design classes. Most of them learned their trade from the Internet (while I hate capitalizing the word “internet”, I will here for the sake of emphasis).

I will admit my title was a bit misleading. I think that everyone should “study” design, but I don’t think that should be one’s intellectual focus or direction for formal study. I think that the best designers draw inspiration and motivation from every aspect of their education and life experience. They can connect the dots, recognize the patterns, between all of their courses of study. For them, African highlife music (a kind of brass band, colonially influenced style) has the same underlying rhythm yet arrhythmic percussion as, say, a font with a some varying serifs or add-on glyphs. The idea here, is that as designers, we should expose ourselves to various intellectual stimuli to become better designers. There is something to be said about going outside and doing nothing, which Jared Erondu blogged about. Even better, though, is a challenge outside of the realm of pixels and screens, Micron pens and paper.

[coletownsend]

Exercise your Design

Everyone knows the common cliches of exercise: it improves your mood, it raises your endorphin levels, you'll lose weight. Not everyone discusses the psychological benefits. You feel a sense of accomplishment after completing a workout, it improves your self esteem, and it gives you something else to improve besides your latest project. 

Running is my favorite exercise. I am first and foremost a runner, then a designer. I find that running clears my mind, and I love training. That being said, I don't turn off my designer mind when I'm out on a run. I actually get many of my best ideas out pounding the pavement. There is no better way to expose yourself to a multitude of influences: the sounds, smells, and sights of that days workout. I run by awesome urban art, expressive typography, and beautiful architecture every day. 

Consider it the next time you are looking for something to do. Instead of turning on the tube, put on a pair of shoes and enjoy the your neighborhood.

[coletownsend]

Designing For Discussions

Branch is a new website that organizes discussions. It allows users to easily register and gather others in conversation, or branch, about a topic of their choice.

One thing I dislike about branch is the narrow dicussion area. Some might find this layout more intimate, but I believe that in aiming for less distraction, the designers made it more distracting; the text is too conglomerated. A wider discussion area with larger font would make the conversation easier to read and less like Twitter, where I find many tweets and replies go unnoticed in a massive list of text.

Another aspect to examine is the sidebar. The branch sidebar displays the branches of which you are currently a member. While this is good, a better way to utilize this sidebar would be to show an activity feed, perhaps similar to that of LayerVault. This would keep all the focus on the discussion.

A solution to notifications would be an icon with a push-style (a la iOS) mark that signals to the user someone else added to their branch. When clicked, the icon would open a small drop-down window that would show the activity, similar to the way the Dribbble notification system works. 

Overall, the site functions very well. I really enjoy going on branch and opening up discussions as well as participating in them. The familiar structure is similar to Twitter and reflects the websites deep integration with Twitter API. Users are added to discussion through either a direct message or public reply. Unfortunately this can get a bit spammy, so they also have an option to link to the discussion, which people can request to join. I got a great conversation about "flat" or minimal design going.

Also, I started a great group called the State of Web Design on branch. It could be a great hub for discussion on various design theories, trends, and quandaries.