Capn Design

Entries tagged design

Page 2 of 4
Mike Monteiro on Buying Design

If I ever get back into client work, I will share this post with all of my clients.

Most people don’t need to buy design. And only about half the people trying to buy design should be. Your designer should be a partner, helping you solve your problem. You have a goal in mind; the two of you work together for a solution. Getting to that solution includes researching the people you want using your object, the market for that object and who, if anyone, is trying to sell that same sort of object. If all of that sounds like a pain in the ass, and it kind of is, then don’t buy design. Hire a production team. You’ll save money.

Also, I hope Mike enjoys that this post comes right after a huge Hitler poster.

20100706architecture.jpg Architecture's Modern Marvels

Vanity Fair asked 52 experts to name the most important pieces of architecture since 1980. This is what they chose. [via kottke]

Bonus link: Fast Company shows off the 20 Best New Buildings in L.A.

Secret Stash

“This project is about concealing valuables, secrets, bad habits and personal information in our workplaces. Here, hidden spaces/ messages were created within 8 general objects such as wood boards, lamps and disposable coffee cups.” Very impressive. I’d like to see how these objects were created as well. [via Fast Company Design, a great new blog]

20100625hicksdesign.jpg Jon Hicks' Lovely Fluid Redesign

Jon puts Ethan Marcotte’s Responsive Web Design article to work and rebuilds his blog to work in one to four columns depending on the width of the viewport. Fluid designs have been done before and they’ll be done again, but this is a nice one.

Sports Highlights in Online Video

Posted June 22, 2010

With the NBA Final, Stanley Cup and World Cup all happening around the same time, I’ve been taking in a good number of recap, live-streamed and highlight videos. It turns out people are getting a lot smarter about how they surface interesting moments in a game.

NHL Highlights

I find it annoying that recaps for games I care about are sometimes only 30 seconds long. Sure, 30 seconds of a Cubs game is enough for most people, but I’d like at least a couple minutes. The NHL has solved that with their game highlight videos (pictured above). While there’s no commentary, they show you ever goal and a selection of exciting saves and hits. This is great for finding your favorite moment from a game or getting a sense of everything that happened. MLB’s At Bat app let’s you watch a condensed version of the game in 10 minutes, but I’d like a version with just the good parts.

ESPN World Cup Highlights

On Friday, we watched some of the US World Cup match on I don’t remember if these showed up during the game, but right as the game ended, I noticed all of the little tick marks on the timeline. Those were highlights for each of the teams. This is a great way to go back during the game and review some of the choice moments. I’d also love if they kept a marker of where you were when you left live time.

Have you seen any other original ways of displaying sports highlights online?

20100615bridge.jpg The Flipper Bridge: Changing Traffic Flow

As you cross from China into Hong Kong by car, you have to move your car from the right side of the street to the left. In order to do that smoothly, NL Architects have designed the Flipper bridge. As Kottke aptly pointed out:

The only way that could be more cool is if one of the lanes went into a tunnel under the water or corkscrewed over the other lane in a rollercoaster/Mario Kart fashion.

20100614qwerty.png iPad Frees Designers From the Tyranny of QWERTY

Looking at this and the Optimus Maximus keyboard, the iPad looks like a great deal.

The Hulu Player Heat Map

Posted May 13, 2010


Hulu is unveiling a brand new player (yes, it’s still in Flash) that has lots of awesome features, which you can read about at your leisure (here’s a cached blog post too). My favorite, by far, is the heat map.

On any full episode on the site with a sufficient volume of views, a heat map shows the relative popularity of every moment in that episode. Find hot and popular moments within long videos in no time at all.

Now I just want to see a longer version of this that covers a whole season or series.

[via Zach Klein]

Rapid Wireframe Sketching in Google Docs

Morten Just of Vodaphone provides mobile and desktop wireframe stencils for Google Docs. I’m gonna play with these tomorrow. I shall report back (or not). [via]

20100428touch.gif Touch Gesture Reference Guide

A wonderful PDF that captures:

1) an overview of the core gestures used for most touch commands 2) how to utilize these gestures to support major user actions 3) visual representations of each gesture to use in design documentation and deliverables 4) an outline of how popular software platforms support core touch gestures


20100401dunkie.jpg A (Likely Fake) Rebranding of Dunkin Donuts

So sad this is not real as it’s a beautiful redesign.

Update (4/5/10): Indeed, it’s a fake. The creator provided some more samples though. That’s something, right?

menuBarHeatMap-i1.png_large.png Visualizing Usage of the Firefox Menu Bar

I shouldn’t be surprised by how much people still use bookmarks, but I am. I also think their decision to put cut/copy/paste “directly to the right of the Firefox button” might not be necessary. People who use the menu items probably use them in every application, so moving them to a custom place is unnecessary. [via Ben Fry]

Annotations View in the Times' New Document Viewer

This is a great implementation of the notes view I outlined in my Multi-Layered iPad talk. It’s exciting to see how people are implementing features like this. You can read more about the new doc viewer, if you’re so inclined.

20100309statusboard.jpg The Panic Status Board

To keep on top of their various projects, Panic installed an LCD screen with an overview of what’s going on. I’ve wanted to do this at home for the longest time.

Our support turnaround time is faster than it’s ever been. Just the simple act of “publicizing” those numbers — not in a cruel way, but a “where are we at as a group?” way — has kept the support process on-task and, I think, made it a bit more like a video game. (It helps that when all the boxes are at “zero”, a virtual bottle of champagne appears on-screen, and a physical one is likely removed from the fridge.)

20100219accolade.jpg Accolade's Amazing Box Art

Panic collects some stunning video game boxes produced by Accolade between 1984 and 1990. The Killed Until Dead box is my favorite and nothing like anything out there now.

20100218bbc.jpg The BBC Prepares a New Visual Identity for Its Website

“We wanted to create something that is flexible enough to allow all our brands their full expression whilst uniting them into a coherent user experience.” Rethinking the identity of a site this large is an undertaking I can barely fathom. I also really liked the simplicity of their new icon set, seen above, which supports their desire to have pages with “a predominantly neutral colour palette with colour being provided by large and dramatic imagery.”

Behold! The New Design!

Posted February 15, 2010

Whew. This took way too long, but here we are with a new design! I am loath to admit that I’ve been building this off and on for 2 years, but it’s true. Let me give you the rundown.

  • I’ve lived with this last design for quite some time and it was getting stale. I wanted something a bit more flexible and brighter.
  • I wanted a view into my social graph (i.e., everything I’ve been doing outside of this site).
  • I wanted a project that would take way too long to finish and become way too complicated (not exactly true).

The Design

I’ve long pined for the beautiful structure of Khoi’s blog and the free-flowing nature of Jason’s. I’d like to think I created something original that draws from what they’ve been doing for years.

The fonts in use are FF Tisa Web Pro, FF Enzo Web and Verdana (my commitment to chunky sans-serif fonts continues in this latest iteration.). The first two are served from Typekit1, which has been a fun experiment.

As for the colors, I just wanted something bright and fun. I tried to make use of the color as an accent instead of blinding you with a yellow background or blue body text (don’t cross me or I just might). I think the color choices are the most successful aspect of the site.

The Social Graph

Like most of you, I’ve been Twittering and Flickring for quite some time, and I wanted to get that onto the site. Sure, I could have used the widgets they provide or even the action streams provided by Movable Type, but that would have been “fast” and “easy”. So, I wrote a set of scripts that grab data, parse it and write out some interesting widgets throughout the site. Some of this stuff is a little buggy, but for the most part it turned out well.

You can see good examples of this by looking at the monthly archives, which only have data from that month, instead of just the most recent. I wanted it to be a view into what I did for the month (probably more for me than you, when I think about it). The homepage has some nice views as well. You’ll notice a graph for the top tracks. I built that using Highcharts, which is a jQuery graphing library. I’ve been playing around with these for a few months now — mostly at work — and this one is the most full-featured. I also really like Bluff.

Since this is only bringing in data about what happened and when it happened, I’m also reviving reviews. I haven’t reviewed anything here since 2005, but that will change post haste.

The Tech

The site is powered by Movable Type 4.33, several MT plugins, jQuery, Typekit and the custom social graph scripts I wrote. While everyone else is moving to hosted blogging solutions, some of which are awesome, I’m still a tinkerer. I want to be able to dive in and play with the code. It forces me to learn new tricks, even if I occasionally have to debug an errant template.

I’m using jQuery in some fun ways around the site. You’ll notice at the bottom of the home page you can load new entries. “But Matt, how is that possible if you use a CMS that publishes static files?” Well, in MT 4.3 I helped usher in the ability to paginate entries and I thought it was only appropriate I put it in action here.

Another change is the addition of authenticated commenting and tags. You can still comment anonymously, but now Facebook, TypePad, Google and Yahoo! users can log in and keep their identities. In regards to tags, I’ve been adding them to entries for a while now, but I’ve gotten around to exposing them.

Finally, I have dropped support for IE6. Only 3% of my visitors use the browser, so sorry dudes. You’re out of luck. The site does still have some issues in IE7 and 8, but I’ll fix those over the next week or two. Ya’ll can read the content just fine, so I think we can both wait a bit.

Summing Up

I’ve been blogging for over ten years (yeah the archives only go back to December 2000, but I lost some old hand-coded entries) and I feel like this is the first design I’ll be able to (intentionally) keep going for some time. I also feel like it represents who I am right now.2

If you happen to find anything that looks odd, feel free to let me know. You can find contact information on the about page or just leave a comment here.

Thanks to everyone for visiting over the years. It’s been fun so far and I’m looking forward to many more years of funning with you.

  1. Typekit has been fantastic, but it’s still a bit buggy. You may notice some issues here and there (especially in Internet Explorer), but I’m going to live with it. The service is run by smart people, so I’ve got confidence.
  2. How right now is it? The about page uses a random Flickr photo of me. That’s pretty right now, right?
Kolelinia: A Bike Path in the Sky

Detailed photos of a plan to allow for cyclists to ride above a busy city center. I could poke some holes in this, but I'd much rather RIDE MY BIKE IN THE SKY. [via @bobulate, who's killing it lately]

New York Public Library's New Logo

This is good. The new lion looks really dignified, but also like he gets loose on the weekends.

You Could Eat Off the Floors

Posted November 4, 2009

This Volkswagen factory in Dresden is beautiful. The outside is almost completely glass, the floors are made of hardwood and the parts are transferred by robots that move along thousands of magnets embedded in the ground.

When the production process is a work of art, it makes the end result feel more impressive. Some companies, like Apple, focus on beautiful packaging, but it doesn't say much about the craftsmanship. Unlike the iPod, the Phaeton — the luxury car built at the Transparent Factory — is not an impulse purchase.

Seeing the care put into its creation makes dropping $75,000 (minimum) on a car an easier pill to swallow. More importantly, it makes you believe, or at least hope, that they put the same effort into producing their more affordable cars.

Recent Entries