A (Very) Brief History of Unretrofied's Design

I haven't written anything meta about this site in a while, so I think I'm overdue to reminisce about its various design iterations. (That's a normal thing to do, right?)

If you like the sound of that, then read on, friend! If not, here's a 34-minute Ron Swanson supercut for you to enjoy instead. Actually you should just watch it either way. I can't top Swanson.

* * *

For those of you who read this site solely in an RSS client and never click through to see my writing in its natural habitat, you may have missed a couple major redesigns in the last two months. Well, I say "major," but I haven't exactly been good at keeping track of version numbers.

Much like a trombone that ostensibly has seven slide positions but in practice has an infinitely variable range, there are particular "moments" in Unretrofied's design history that stand out to me but so many tweaks were made along the way that documenting specific versions seemed futile. I just [Joker voice] did things.

If you held a gun to my head and ordered me to assign some numbers anyway, here's how I'd do it:

Version 1.0

Ah, this takes me back. I was so innocent back then, so naïve. This was my DF-wannabe phase. I still cringe a little, looking back at some of those early posts. By the way, the old site is still live if you want to, I dunno, click around on it or something.

Version 2.0

This was my longest-lasting design by far. It was during this period that Unretrofied kind of started to take off, in terms of my writing ability and the amount of attention it received. I still love a lot of things about this design, particularly its newspaper-y aesthetic. As with many things in my life though, I needed to change it up after a while.

Version 3.0

A short-lived but overall pleasant change from the previous iteration. Many of you will immediately note the resemblance to Shawn Blanc's site, something that earned me the internet version of a sideways glance from several people. I've been quite open about my reasons for the copycatting though.

As I've told everyone who has brought it up, it was an experiment I did while home alone one night, mainly to improve my CSS skills. Nothing more. I used Shawn's site as a template because I really like some of his design decisions, particularly the subtle ones people may not think about (link-list delineation, the transition animation that happens when you hover over links, etc).

This was never meant to be a permanent design. The only reason it stuck around for even a month was sheer laziness on my part. (Sorry Shawn!)

Version 4.0

And now we come to the current version of Unretrofied, my favorite of the bunch. Some of the ideas I got from Shawn's site are still here, but I've mixed them with concepts from "v2.0" and ended up with something I'm pretty happy with.

I'd like to give a huge thanks to my internet buddy Sid O'Neill for helping me with several big CSS issues that were giving me trouble (read: things I broke while ignorantly tinkering). Most notably, the mobile versions of the site—at least on iPhone and iPad—are no longer broken the way they've always been in the past. In fact, this may be the most responsive the site has ever been.

* * *

So there you have it, a brief history of my design iterations. I hope you enjoyed this little tour.

MacStories 4.0

Viticci and co. have unveiled the long-awaited redesign of MacStories, and I must say, it looks great.

“We spent probably too much time trying to get many details just right, but we’re satisfied with the end result because the new design (and technology behind it) allows us to do a series of interesting things for our readers, with many more in the pipeline.”

The new design is much more readable and a pleasure to navigate, so I'd say it was worth the extra work.

Diet Coda 1.5

Diet Coda is the code-editing app to get if you have to maintain websites from your iPad, and it just updated with some great new features. Files can now be stored locally and synced with Dropbox, and the app now supports a slew of new syntaxes, including Markdown. It's a $20 app, so only serious coders need apply.

'Designing Unread'

Speaking of Unread, Jared Sinclair wrote a post detailing his decisions behind the app's design:

“I decided that best way to make Unread a comfortable app was to let the reader directly manipulate each screen anywhere her thumb might land. This freed me to remove interface chrome and focus on the text. It’s now a trite idea for design to focus on “content,” but in Unread’s case it really was an essential goal. I wanted readers to get their minds out of the email rut that has trapped their expectations of what RSS can be.”

I think he nailed the comfort aspect. The gestures in Unread feel so natural that I'm finding myself swiping around and exploring every corner of the app just because I enjoy the sensation of flicking things on- and off-screen.

On Squarespace's New 'Logo' Feature

Earlier today, Squarespace announced a new feature called Squarespace Logo that allows users to create simple logos with some text, a tagline, and an icon. Pretty innocuous, right? Might even help a few people add a little personal touch to their site that they might not be able to create for themselves (or can't afford to have made by a professional).

But to a bunch of designers out there, this was a personal affront, a direct attack on their livelihoods. Do a simple Twitter search for 'squarespace logo' and you'll see this sort of thing:

I could keep going, but you get the idea.

The problem I see here is that these designers think that Squarespace is now in direct competition with them for their client base. On the contrary, I highly doubt this tool will affect the livelihood of any designer worth their salt.

If a person or company decides to make a logo with this tool and is happy with the result, then you can bet they were never going to hire you anyway. Maybe they're not interested in Building a Brand™, or maybe they just don't have the means to pay for a professional logo. Whatever the reason, the fact that they have tools to make this process easier for themselves is a good thing. Only a completely selfish person would think otherwise.

It's also pretty silly to say that these sorts of tools "devalue a profession". Professional photographers have been moaning for years about the rise of portable cameras and layman editing tools, but there's still a vibrant and necessary market for pro photographers. In the same vein, the advent of home video-editing tools hasn't done away with movie studios.

Maybe photographers and videographers and designers (and even writers!) will be made obsolete someday. Maybe. But I think that day is very far off in the future, and a designer scared of a tool that produces nothing more than a basic shape with some text is perhaps a designer not worth hiring to begin with.

So no, I don't think there's any cause for concern. Squarespace didn't kill the web designer market, and Squarespace Logo is not going to kill the field of icon design.

'What Screens Want'

Frank Chimero wrote a sprawling, wonderful essay that reflects on the web as we know it, concluding that it has become too impersonal, cold, and calculating:

“We used to have a map of a frontier that could be anything. The web isn’t young anymore, though. It’s settled. It’s been prospected and picked through. Increasingly, it feels like we decided to pave the wilderness, turn it into a suburb, and build a mall. And I hate this map of the web, because it only describes a fraction of what it is and what’s possible. We’ve taken an opportunity for connection and distorted it to commodify attention. That’s one of the sleaziest things you can do.”

This is one of those pieces that I recommend reading on the web and not with Instapaper or Pocket. Frank created a special page just for this essay, and it's too pretty not to be enjoyed in its intended state.

Jony Ive Biography by Leander Kahney

Released just this morning, Jony Ive by Leander Kahney — editor of Cult of Mac — explores the early life and meteoric rise of Apple's famous product designer. It's not based on direct conversations with its subject in the way that Walter Isaacson's biography of Steve Jobs was, but it looks pretty interesting nonetheless.

Jony Ive is available from Amazon in both hardcover ($17) and Kindle ($12) formats, as well as from the iBooks Store ($12).

The App Design Handbook

Nathan Barry and Jeremy Olson have put together an excellent resource for anyone looking to get started with app design.

The full package – which includes 9 video tutorials, 9 video interviews, and a handful of resources such as Photoshop files and Xcode samples – is $199 for a limited time to celebrate the launch, and will go back up to $249 soon. The book can also be purchased by itself for $29 (soon $39) or as a middle-ground package that includes fewer resources than the full package.

'How Designers Destroyed the World'

Mike Monteiro of Mule Design gave an impassioned (and profanity-laden) talk at Webstock 2013, in which he discusses the importance of speaking up when a project is about to head downhill. I think it's a must-watch for anyone in the design world, and probably people outside of it too.

If you like Mike's talk, be sure to also check out his book.

A Guided Tour of Brett Terpstra's Blog

I honestly had no idea that so much work has been put into all the little nuts-and-bolts that run Brett's site. It's basically a mix between a blog and a webapp, which tickles the geeky side of my brain.

Currently, I'm just enjoying what happens when I hover my mouse cursor over the 'Donate' button at the bottom. Sometimes it's the little touches.

The Great Discontent Interviews Frank Chimero

Frank Chimero is a designer and the author of The Shape of Design, an excellent book I talked about on Tools & Toys recently.

Frank always has fantastic things to say about design and freelancing:

“It’s more important to do good and interesting things than it is to make money. If you do good and interesting things, then you have to trust that the money will follow.”

He also delved a little into the age-old "fake it until you make it" method:

“I learned to make websites because I agreed to do something that I didn’t know how to do and then I had to figure out how to do it. That seems to be a pattern that comes up all over the place because nobody knows how to do what was invented last week. You have to say you know how, then figure it out under the gun.”

and

“As soon as you start writing like you know what you’re talking about, then you have to back it up. But, I’ve always been very clear that I am making it up as I go along. I’m learning on the job.”

There are a hundred other things I'd love to quote, but instead I'll just tell you to go read the whole thing. Great interview.

The New Instapaper is Live

The beta is over, and the new design has been rolled out to instapaper.com proper. I still love the way this looks, and according to their blog post about the new design, reading progress now syncs on the web. This has been one of my longest-running wishes for Instapaper's web client (the iOS versions have had this capability for a long time).

'Delight is in the Details'

Shawn Blanc has released his long-awaited eBook + interview series, Delight is in the Details.

“In the book, I talk about why the long-term success of our products (and our reputations) depends heavily on us taking the time to think through and sweat the details. This book encourages you to strive for excellence and resist the tendency to settle on “good enough” work that leads to forgettable products.

Additionally, I share several examples of products and services I consider delightful, and I talk at length with makers who've shown an astounding ability to sweat the details, gleaning from their experience and success.”

Shawn has put a ton of work into this project, and it shows. I highly recommend picking up a copy, especially if you're a designer or writer (or anyone else who does creative work, really).

The full bundle that includes the audio book and interviews is only $29, while the eBook by itself is $20. I'd recommend getting the full package at least to get access to the interviews.

Drafts Has a New Icon

Greg Pierce, developer of the much-beloved Drafts:

“I was approached by a large multi-national corporation regarding concerns about the old Drafts “D” icon’s similarities to one of their trade marks. This was likely a somewhat tenuous claim, but I was not interested in pursuing a battle on the matter – and I must say the corporation in question conducted itself in a professional and reasonable matter, which made it much easier to capitulate. At any rate, in the end, I think I like this new icon better.”

The new icon is rather lovely, and I really can't blame Greg for trying to avoid such a legal battle. Still, it's a shame that indie creators have to face such challenges. I highly doubt an iOS app catered to nerds was really going to affect a mult-national corporation's bottom line or confuse their customers in any way.

A Better Look for Feed Wrangler

I've been trying out Feed Wrangler over the last 12 hours or so, and I'm mostly loving it so far, but I agree with the general consensus that the web interface isn't the prettiest thing around. Now, this is totally understandable since it was more important for David Smith to get the thing off the ground first, but it doesn't change the fact that the UI could use a little polish.

Thankfully, Preshit Deorukhkar – the lovely man who runs the Beautiful Pixels blog – has come up with some nifty tools for improving the overall look of the UI. The first is a Safari extension called Feed Rango, and the other is merely a set of CSS rules to accomplish the same task. Personally, I'm using the CSS rules in a Chrome extension called Stylish.

[Update: Feed Rango is now available as a Chrome extension. I'll be switching to that from the CSS rules shortly.]

I'm sure that Feed Wrangler will inevitably get a redesign at some point, but my thanks goes to Preshit for making the current experience a lot more enjoyable.

'Making the NetNewsWire 4 App Icon'

John Marstall, designer for Black Pixel, details the steps that went into the design of NetNewsWire 4's new app icon, the beta of which I linked to on Tools & Toys the other day:

“With the release of NetNewsWire 4 Public Beta, we wanted to overhaul and modernize NetNewsWire’s app icon as much as the rest of the app. We didn’t throw out everything — the color scheme and satellite metaphor stayed — but the design is completely new.”

I love how much thought and care went into the design (and it certainly doesn't hurt that they're sticking with the astronomy theme).

"Someone Finally Opened the Blinds"

Matt Gemmell's astute take on the design of iOS 7:

“iOS 7 is much, much lighter – in the colour sense, and consequently also in visual weight. Breathable whitespace is everywhere, and is used to unify and homogenise previously disparate interface styles.

The overall impression is of brightness and openness. The extent of the change (and its consistency of application) only becomes obvious when considered in aggregate.”

This is true, there is a certain lightness to iOS 7 that seems refreshing. Call me crazy, but I expect that in the coming years we'll all be describing Apple software this way, using terms like: refreshing, room to breathe, airy, clarity, calmness, fluid, and so on.

Seems pretty Zen, doesn't it?

'Choose Wisely'

Neven Mrgan looks at the photo-upload dialogs found within many iOS apps, and calls for a little uniformity between them:

“Does it matter if apps are consistent on matters of this sort? Decades of UI theory seems to indicate so. Having the same button say the same thing in all situations means the user has to do less parsing of the text, and can simply rely on quick-glance recognition.”

Like Neven, I've been bothered by these kinds of dialogs for a long time.

The problem is that so many apps use different wordings for these options, and in different orders from one another, that I can't always parse them immediately the way I should be able to. If I don't double-check the list, it sometimes ends with me accidentally tapping the wrong option.

Obviously the problem is avoided if I take an extra second or two to verify which option I'm selecting, but when you're having to do this all the time between all the various apps that allow photo uploads, those seconds really start to add up. It would benefit everyone if there were a standard button layout apps would adhere to.

Go read the rest of Neven's post to see his suggestions for other developers on this matter. I agree with every one.