Capn Design

Entries tagged design

Page 1 of 4
Top 10 Digital Car Dashboards

Jalopnik rounded up up what they believe to be the best (most interesting?) car dashboards. It’s a mix of super-fancy, adaptive new ones and some relics.

Though I appreciate the new-fangled fancy screens, I’m sharing this because my dad used to have that late 80’s Buick Riviera with a touchscreen console computer and it felt like magic. I couldn’t believe they were able to have a responsive screen in the car and now I’m wondering just how big the computer behind it had to be. Here’s a video of it in action.

Don't Divert the Train

Luke Wroblewski has some good advice on getting users to do what you want without driving them nuts. In any successful app, users develop muscle memory around common tasks. This means it’s difficult to push users to complete secondary tasks — like adding a user photo or connecting with friends — that will improve their experience but are rarely the reason you open the app.

His solution is to style these tasks like other items in a user’s feed and insert them seamlessly. He didn’t give numbers, but said the “use of the Find Friends feature shot up dramatically” after implementing this change.

It’s a simple observation, but a powerful one for me. Changing someone’s behavior is difficult and there’s no reason to take on this task when it’s unnecessary. I would just be careful to respect the user’s intentions and avoid polluting a stream with too much unexpected content.

Introducing Facebox

Posted September 17, 2013

facebox-share-icon.pngKhoi and I made something! We’ve created a set of 50 stock user photos for UI design and presentations. These are photos of real people that we really found while walking the streets of New York City. What’s more exciting is that it’s awesome, available today, and called Facebox.

Facebox was built with a simple problem in mind — it’s hard or expensive to find good photos to use in design mockups. Personally, I often spend half an hour pulling together photos of friends (which aren’t rights-cleared) or I drop $100 on stock photography (and still spend half an hour wading through garbage). Our goal was to provide an affordable product that has the natural look of your friends’ photos with the professional polish and legal clearance of stock photography. If you look at what we’ve produced, I think you’ll agree we’ve succeeded. For just $25 at launch, it’s something I’d buy in a heartbeat.

What’s in the (Face)Box

As you might imagine, we’ve included all 50 photos as JPGs (at 640px x 640px, big enough to fill the portrait view of an iPhone 5). We’ve also included sets at the same size with rounded rectangle and circle masks as 24-bit PNGs.

Since the tools you buy should make your life easier, we’ve bundled in several files that remove a step or two in your process. In the download you’ll find a Photoshop file with all 50 photos that makes it easy to export versions with custom masks (we include some options) and sizes; PowerPoint, Keynote, and Sketch files with the images placed on the canvas; and an OmniGraffle stencil.

If there’s something you think is missing, I’d love to hear it. We want this purchase to feel like a no-brainer.

This project made me happy. We pried ourselves out from behind our Cinema Displays and spent 7 days outside taking photos. Even better, we produced something we believe solves a simple, but real, problem in a graceful way. It’s something I’m proud of and I hope it solves a problem for you, too.

Check out Facebox, or send it to a friend. Cheap, legal, and totally awesome.

Sneak peek of Macaw

Macaw is next in line to try and unseat Photoshop as the web designers tool of choice and it looks promising. This 20 minute demo shows both how it works to produce designs and its seemingly good ability to generate HTML and CSS code.

Macaw’s design tools seem worthy of evaluation alone, but the ability to produce working code with zero additional effort makes this a potential game-changer.

UX GIFS: Ebony's Masthead

Posted July 19, 2013

Masthead Change

We’ve lived through several years of publications working out what to do with their giant masthead and navigation bars. There’s been plenty of success, but Ebony Magazine has the most elegant I’ve seen. It took a recent inelegant solution (you can ignore the article, obvs) to remind me that this is still a tough thing to do well. Thanks, Ebony!

UX GIFS: Making FiftyThree

Posted July 9, 2013

Hero image at large scale

Hero image at medium scale

Hero image at small scale

FiftyThree, creaters of the sketching app Paper, recently started a blog devoted to the making of their products. The hero section has a great CSS-powered animation when you first load the page. What’s more impressive is that it works well at several breakpoints. Beautiful stuff.

UX GIFS: Instagram's Hover State

Posted July 8, 2013

hover state for instagram's web view

This is the first in what I intend to be a regular series. I frequently come across well-designed interfaces and want to share them. A lot of these will be animated gifs and I’m still fiddling with settings. If you have tips, I’m all ears.

The best thing about Instagram’s iPhone app is the way it focuses almost entirely on the content. A single image (or, now, video) takes up nearly the entire viewport. Sure, there are comments and metadata, but the focus on huge imagery makes it easy to browse and gives no doubt that the service is about engaging photography.

Even on their user profiles—which show a grid of images and have a very different success metric—they let the images speak for themselves.

A few months back, Instagram launched a web version for logged-in users. With new technology (I know, nutty that desktop browsers are new for many products these days) comes new opportunities for interaction design. With their web version, they’ve unlocked the mystical hover state on user profiles.

As you can see above, they’ve continued the trend of letting the images speak for themselves. By adding a hover state, they can provide more data to show the engagement for each photo. If the goal is to help you find the interesting people, they’ve added another quantifiable data point for you to consider.

Also, rolling over a bunch of them in a row looks awesome.

Oh Beautiful Beer

No need to oversell it: “Oh Beautiful Beer celebrates remarkable graphic design from the world of beer.”

20110927lakes.jpg Branding 10,000 Lakes

Nicole Meyer lives in Minneapolis and believes her state’s lakes have shitty branding. She’s fixing that by designing a logo for one lake every day. [via Youngna]

Wendy's Redesigns Their Burger

I don’t know any Wendy’s faithful, beyond the Frosty, which is why it’s good to see they’re debuting a new version of their burger. While they could have added some guacamole or a fourth patty, they instead looked at the design of their burger. In fact, they took away more than they added.

Tasters said they wanted a thicker burger, so Wendy’s started packing the meat more loosely, trained cooks to press down on the patties two times instead of eight and printed Handle Like Eggs on the boxes that the patties were shipped in so they wouldn’t get smashed. And Wendy’s researchers knew that customers wanted warmer and crunchier buns, so they decided that buttering and toasting them was the way to go.

In the end, Wendy’s changed everything but the ketchup. It switched to whole-fat mayonnaise, nixed the mustard, and cut down on the pickles and onions — all to emphasize the flavor of the beef. The chain also started storing the cheese at higher temperatures so it would melt better, a change that required federal approval.

“It’s not about getting real exotic,” said Lori Estrada, Wendy’s senior vice president of menu innovation and packaging. “It’s about making everything work.”

I have no idea how it tastes, but I’m intrigued by such complicated systems and how simpler can often be better. The costs of change are magnified when you have thousands of restaurants. “They thought about making the tomato slices thicker but didn’t want to ask franchisees to buy new slicing equipment.” It may have made a slightly better burger, but not a better product.

[via Pat’s Picks]

Designers vs Coding

Frank Chimero explains why it’s important for designers to know how to code, which seems incredibly obvious. This rung truest:

Design decisions are affected by both the content and the format, like how a sculptor would make different decisions if she were working with clay rather than marble.

You don’t have to be an expert, but you do have to understand how things are built. If you don’t, you’re going to make assumptions that affect the work of everyone else on the team.

High-Design Furniture for a Small Apartment

If you are at all impressed by good design, watch a couple minutes of this. My favorite part begins at 0:54. You start by seeing a desk with a chair, but the host pulls out the chair, and brings down the bed without taking anything off the desk. It’s basically magic.

20110411japanphotos.png Japan Before and After Tsunami

The photos are devastating, but the design of the page makes it feel real. Using a slider, you can choose how much of the before or after you want to see. Something about watching the landscape change from whole to decimated and being able to control it is powerful. It’s like a simplified, horrific version of destroying a Sim City with a natural disaster. Somehow, it brings more gravity to the images.

20110321peru.png Peru's New Logo

Brand New takes a look at my favorite new logo of the year. The swirl of the P is wonderful and is 1000x more interesting than their previous logo. As part of the identity system, they’re also using Bree, which is a font I nearly used on Capn Design.

How To Pick the Right Clients

Mike Monteiro discusses the need to be picky with your partners. Sure, everyone needs to keep the lights on, but finding the right clients will make everyone happier. I found this bit most interesting.

I’m wary of working with startups in general. At least on their initial work. Even when they’re good, smart people, they’re people with dreams. People who probably walked away from their comfortable full-time jobs to follow a dream they’ve been designing in their heads for months or years. What they need is someone to flesh that out for them. They’re not usually in a mindset to have their dream messed with, nor should they be.

It’s true, people who have been scheming for years are going to have a tough time letting go, but this seems like some of the most exciting work to me. Still, Mike is right that this is not the right realm for contract work. In the case of a startup, they should either hire a designer full-time or put the design shop on retainer. That work requires commitment to see it through, which is expensive.

The Shape of Design

Frank Chimero wants to write a book about the why of design and he’d like you to help fund it on Kickstarter. I dropped some cash and I think you should too. Some of Frank’s words:

The Shape of Design isn’t going to be a text book. The project will be focused on Why instead of How. We have enough How; it’s time for a thoughtful analysis of our practice and its characteristics so we can better practice our craft. After reading the book, I want you to look at what you do in a whole new light. Design is more than working for clients.

But really, this book aims to look at the mindset and worldview that designing develops in order to answer one big, important question: How can we make things that help all of us live better?


As Gridulator says, “Make pixel grids, lickity-split.” It’s a great little tool. David Sleight, aka Mr. Stuntbox, gives some nice background on the product, if you’re into that.

A Blind Man's First Week with the iPhone

Austin Seraphin is blind and has a story that will guarantee every designer remembers how important it is to make their products accessible.

“Can he get text messages on this?” she asked. “Well, yes, but it doesn’t read the message.” the salesman said. Mom’s hopes sunk, but mine didn’t, since I understood the software enough. “Well, let’s see, try it.” I suggested. She pulled out her phone, and sent me a text message. Within seconds, my phone alerted me, and said her name. I simply swiped my finger and it read her message: Hi Austin. She almost cried. “Leave it to Apple.” I said.

That made me tear up a little, but this just blew my mind.

The other night, however, a very amazing thing happened. I downloaded an app called Color Identifier. It uses the iPhone’s camera, and speaks names of colors.


The next day, I went outside. I looked at the sky. I heard colors such as “Horizon,” “Outer Space,” and many shades of blue and gray. I used color cues to find my pumpkin plants, by looking for the green among the brown and stone. I spent ten minutes looking at my pumpkin plants, with their leaves of green and lemon-ginger. I then roamed my yard, and saw a blue flower. I then found the brown shed, and returned to the gray house. My mind felt blown. I watched the sun set, listening to the colors change as the sky darkened. The next night, I had a conversation with Mom about how the sky looked bluer tonight.

[via @waxpancake]

20100920lostfairs.png Lost World's Fairs

When you put great people together, they do great things. The IE9 team asked Jason Santa Maria to show off what you could do with web fonts in their new browser. He, Frank Chimero, and Naz Hamid put together their vision of world’s fairs that never happened. Frank hit it out of the park with Atlantis, but they’re all wonderful.

Future of Screen Technology

A Swedish software company puts together their vision for the screen’s of the future. The stretchable display would be amazing, but seems impossible. Personally, I’m looking forward to just having more everyday items display information of my choosing. [via swiss miss]

Recent Entries