This Is Locomotion - Design, Code, and News

We just finished watching John Gruber’s fascinating chat about The Gap Theory of UI Design. The talk highlights the evolution of the visual design of Mac OS X from System 1 to System 2, all the way up to Mac OS X.

There are lots of great bits of food for thought in the talk, but one that hit us was how Apple has really changed it’s position on interface design over the years. It’s hard to believe that in 12 years, Apple literally changed nothing about how Notepad works. Certainly, some things are tried and true classics, but it’s hilarious to think that Twitter (or Tweetie) for the Mac years ago would have resulted in Twitter being shunned from WWDC. The idea that all apps have to be visually consistent has been dead for some time, and although many apps still utilize similar functionality (such as position of maximize, minimize, scrollbar etc.) they take visual liberties in how they implement these actions.

Consistency isn’t dead. What’s dead is uniformity. ~ John Gruber

Towards the end of the video, Gruber goes on to talk specifically about how The HIG (human interface guideline published by Apple) has become less of a Bible (as it was in the 90′s and early 2000′s), and more of a general guideline for designers and developers.

One of the biggest things we pulled from this talk was the importance of providing guidelines for interface design, without becoming overly structured in the approach to the point where the guidebook literally hampers creativity.

If you’ve got 40 minutes, it’s well worth watching.

You can watch the video on Vimeo. Unfortunately, it can’t be embedded.

Exciting things have been happening at Simple Station for the past few months, and we thought that we should take a little time to update our website and share some of our latest creations.

What’s new and happening?

• The very shiny new Simple Station website
• Completely overhauling our MediaCore Video Platform giving it a complete visual facelift, along with some hefty new features. Our design team has sweated blood on this project, and we’re so excited to see it go live. MediaCore has been getting some great press recently and big organizations such as the University of London have started using it
• Designed and built 6 great new web apps over the past few months. Head over to our portfolio to have a peek at our new work. You can click the little “i” at the bottom of our portfolio (best viewed in Safari for maximum HTML5 coolness) to read a little more about the project and the work that we’ve done
• Amazing new icon design work – just go through the portfolio and you’ll see

We’re hiring!

• We’re also ramping up our staff for the summer and are actively looking for a Python developer. If you’re awesome and want to work for a great up and coming company, get in touch with us

This year we’ve got some pretty huge things planned and we can’t wait to start really making a big splash.

I just finished reading Stefan Sagmeister’s book titled “Things I have learned in my life thus far” and found this beautiful clip today on Vimeo that expresses what I really feel the essence of this book is about. Experiences.

Taking time out of your life for experiential moments (a little wanderlust) as a designer is one of the best things you can do to continue to nurture your creativity. Many of the best projects I have ever worked on have happened just after a period where I’ve had a complete break from the internet world. Steffan Sagmeister took an entire year to do it, but I believe it can be done anytime you set your mind to it, even if it’s just for a few hours a day.

Wanderlust from Thinklab on Vimeo.

I keep forgetting whenever I setup a new photoshop installation, which settings are in fact the best for web use. A while back I saw this terrific post on Viget Inspire about issues surrounding colour shifts in Photoshop when you use the “Save for web” menu option.

Basically it boils down to a view things:

• View > Proof Setup > Monitor RGB
• Make sure proof colours is enabled under the View menu
• Save for Web & Devices > Click the little button to the right of the Preset field > Uncheck Convert to sRGB

I have left my ICC profiles setup for sRGB IEC61966-2.1 as I don’t like the idea of allowing the monitor to set the colour profile. This does differ from what they recommend in both of the articles I read, but I just feel that I can’t trust the monitor to set the colour profiles.

Here are a couple great in depth reads on the issue:

• http://www.viget.com/inspire/the-mysterious-save-for-web-color-shift/
• http://www.gballard.net/psd/srgbforwww.html (Forgive the terrible site design)

I recently came across this series of articles from idsgn on Design Love. The series features couples who are designers and manage to run a design firm together. I think it’s rare to see such partnerships and it’s interesting to see how working together impacts the lives of various couples. I really enjoyed how the Vignelli’s summed up how they deal with disagreements in the workplace:

Disagreements are the salt of life and a partnership grows stronger by having some of them…

Here are a few of the articles in the series:

• Vignelli Associates
• Design Army
• Triboro Design
• Workshop
• SML Office

Today in the news I noticed that Apple has re-branded their entire product line to prominently feature the Verdana typeface.

The California-based computer and electronics company, best known for their Macintosh computers and iPods, announced today the company will be adopting Verdana as their corporate typeface. The typographic change, Apple’s first since 2001, was spotted on several of the company’s international websites Thursday morning, and will soon be visible on all new packaging and marketing materials.

The news comes only months after Swedish furniture giant IKEA similarly adopted the Verdana typeface. “Verdana is a simple, cost-effective font which works well in all media and languages,” praised IKEA spokeswoman Camilla Meiby. After IKEA’s change, designers and IKEA fans alike were initally shocked to see the company drop Futura (their corporate typeface for 50 years) for the screen optimized Verdana. However, as time passed, people began to embrace the typeface in ways like never before. Source: Idsgn.org

PS. April fools

One of my favourite applications a the moment is fluid.app, which essentially can turn any website you regularly visit into a Mac OS X application. I used to use NetNewsWire for all my RSS needs, but after spending some time with Google Reader I decided to convert.

The main selling point was the combination of using Google Reader with Byline, which is a Google Reader app for the iPhone. Since now I have a laptop, a desktop, and an iPhone one of the main issues I was having was that I wanted to be able to synchronize what I was reading. NetNewsWire didn’t cut it. The only thing that really irked me with using Google Reader was the fact I was tied to using a browser, there wasn’t an app for it (that functioned the way the web app does), and I found the default Google theme to be incredibly dull. After some quick research I discovered Fluid.app and Helvetireader.

Before (Google Reader default):

After (Helvetireader applied):

In this quick tutorial I will show you how I changed Google Reader to use John Hicks’ Helvetireader and build the whole thing inside a Fluid app.

Steps:

1. Download and install Fluid.app
2. Open up fluid.app and fill out the information like in the photo below. Where it asks for the icon you wish to use, you can download a ultra-high-res image of the Google Reader icon. Store the image on your computer, and then add through the file dialogue.
   
3. Press “create” – this will create an application for Google Reader and place it in your applications folder.
4. Startup your new shiny Google Reader Fluid application.
5. Now we will add the Helvetireader theme. Go up to the scripts icon in the menu bar. From the menu choose “open userscripts folder”.
6. Download the following two files: HelvetiReader.user.js and config.xml. Or you can download the zip. Note: Helvetireader 2 is now out!
7. Extract them to the userscript folder. If you have to overwrite the existing config.xml do so.
8. Go to the scripts menu in your new Google Reader Fluid app and click “Manage User Scripts” and check off the option for HelvetiReader.
   
9. Go to the scripts menu and hit the “Reload all User Scripts” option and then close and restart your Google Reader Fluid app
10. Everything should now work perfectly and you will have successfully integrated Helvetireader into Google Reader

On a side note with Helvetireader the sharing menu disappears. If you scroll to the bottom of a post and mouse over where the gear is, the menu appears. I now love the minimalism, but it did take some getting used to.

Thank-you John Hicks!

Posting to Locomotion has slowed down over the past week as my team has focused exclusively on the release of our first big Open Source web application codenamed “MediaCore.”

MediaCore is a free open source video, audio, and podcast publishing platform. It is built for organizations who wish to distribute media in a variety of formats on their website while maintaining the ability to control the user experience.

• Check out the project, features and docs at http://getmediacore.com
• View the demo at: http://getmediacore.com/demo
• Watch the screencast on how the product works
• Give us feedback over at Concept Feedback

Over the past year we have built the entire platform from the ground-up to create one of the most cutting-edge podcasting and media platforms available anywhere on the net. In coming months we will be documenting the process of how we created MediaCore, the stumbling blocks we hit along the way, and the lessons we have learned in designing and marketing an Open Source project. It has been an exciting road and we are looking forward to the next few months as the project unfolds.

A huge round of applause should go to Nathan Wright, Anthony Theocharis, and Melanie Wright for all their hard work in making this dream a reality for Simple Station. I couldn’t have done it without them! I would also like to thank the TurboGears development community for the valuable feedback they have provided us with throughout the development process.

We have already enjoyed some early success including a glowing email from Leo Laporte of TWIT.TV, and a whole slew of feedback from various web design agencies. As the project continues to evolve we will be leaning heavily on the community for guidance on design feedback and feature requests.

If you are a fan of MediaCore you might want to consider following us on Twitter or becoming a fan of MediaCore on Facebook

This morning I noticed that Movable Type 5.1 was just announced. As one of the main alternatives to WordPress what really shocked me was how similar the interface of Movable Type has become to WordPress.

I think it is always a bad move when you stop thinking about how your product differentiates itself from the products on your competitors, and you start flat out cloning them. Is this redesign the result of a lot of design exploration that just happened to take them in a similar design direction to WordPress? Or did they just look at WordPress and think “Wow! That’s pretty good, perhaps we should just change our interface to look like that.” They should be thinking how they can take Movable Type to the next level, not just make it a WordPress alternative.

Print Society is an open, free virtual marketplace for prints and original artwork online.

Our goal is to empower galleries to sell more art, build relationships with many thousands of new art buyers online, and enable art fans everywhere to find and spread your art online while still giving your gallery complete control of your artwork. The power of the social web has been proven many ties over, and Print Society is making it easy for your gallery to take advantage of it, connect with art buyers everywhere, and build a following.