Tag Archives: design

Watch form over function

Everyone’s thinking the same thing: Samsung’s new smartwatch looks significantly better than the Apple Watch. Even the rounded scrolling control looks as usable or more usable than Apple’s digital crown. If Apple tried multiple designs internally, including a round watch — and I’m sure they did — why did they opt for a nerdy square shape that looks more like a computer than a watch? Especially in a product with such a focus on fashion that they felt the need to charge $10,000 for the high-end models.

Surprisingly, this might be Apple showing they can still choose a functional user experience over purely beautiful form and design. Square looks worse but it’s just more practical for reading text. The digital crown is a better fit for scrolling vertically.

It’s rare in the modern era of Apple (post-2000 or so) for the company to sacrifice beauty for usability. The iPhone is always thin at the expense of battery life. Mac scroll bars are hidden in the name of cleanliness. The new MacBook has a single new cable type which no one owns peripherals for. But with the Apple Watch, I think they built something with a foundation that could last for years, despite its initial awkwardness, and square was the right call.

Fun apps don’t need clean code

Jared Sinclair says that a successful app has nothing to do with writing clean code. Thinking about Riposte:

“Riposte, still used and loved by some App.net diehards, has one or two view controllers I wrote that are thousands of lines long. The app was littered with procedures that should have been generalized but got copied-and-pasted everywhere. And it didn’t matter.”

Most programmers try to improve their code a little from one project to the next. But obsessing about how the code looks and how it’s structured might mean that you’re not spending enough time worrying about the things that matter even more: what the app looks like and what it does (and ever shipping it).

Multiplane

“We spend a lot of time on a few great things.” — Designed by Apple in California

In 1940, Ub Iwerks, the animator behind Walt Disney’s first Mickey Mouse shorts, came back to the Disney studios after a 10-year absence. Ub had famously produced hundreds of drawings alone each day for one of those first Mickey Mouse shorts, but Ub’s return to Disney would also be remembered for his contribution to the technical side of film production, with advances in cameras and special effects. In an industry with extreme specialization — you either did backgrounds, or animation, or ink-and-paint — Ub’s talents bridged both the artistic and technical.

One of Ub’s inventions while away from Disney was called the multiplane camera. Perfected by others leading up to Snow White, in a massive camera stand over 10 feet tall, the multiplane’s innovation was to allow a background to be split into levels. Foreground trees might be painted on the glass of the first level, then the characters sat underneath that, and then farther back layers for a building, with others behind that for hills and sky.

To provide a sense of depth, camera operators could vary the distance between each plane. And movement for each level could be synchronized at different speeds, giving it a beautiful parallax effect. Distant background levels moved more slowly and were naturally blurred and out of focus.

80 years after Ub’s invention, the multiplane is alive in iOS 7. Previous versions of iOS were built on a single plane with raised and textured areas on that surface, like a topographical map except with buttons instead of mountains. iOS 7 is instead designed with multiple flat layers. Each level is strikingly flat, but by layering two or three, spaced apart, Apple has achieved an overall sense of depth.

It’s a return to basics. Simple things can remain simple, readable. When clarity is needed, everything goes flat. But it’s a framework that allows for subtle motion and depth without changing what works about the new, content-first flat design. iOS 7’s control center blurs the layer below. The home screen background sits deeper too, as if only the app icons are touching the screen. Photos scroll under the navigation bar.

Each plane is painted flat as if on glass. There can be no text drop shadows, no textures, without ruining the effect. And the result of this strict metaphor is equally valuable: there are no drop shadows to distract or obscure an app’s real content.

Disney’s multiplane camera, first in a dedicated rig and then recreated in software, lasted for decades, until the era of 3D computer animation. iOS 7’s new look won’t last that long, but the core concepts should carry Apple for years. I really like where they’re headed.

Design in grayscale

Adam Keys has several tips for programmers, to make our web sites look better by keeping things simple. I often just use grayscale, too:

“Most important: design in greyscale. Color is hard and can lead to tinkering. My goal is to get in and out of the front-end bits quickly, so tinkering is the enemy. Greyscale is one dimensional, greatly simplifying matters. Give important information higher contrast and less important information or ‘chrome’ less contrast. Now you’re done thinking about color.”

These days I also start everything with Bootstrap, which adds great defaults for layout, buttons, and text. It makes everything looks better, right away. It’s not a replacement for a designer, but it does save hours (or days) of getting the basics up and running.

Bootstrap CSS

I’ve been using Twitter’s Bootstrap in an internal project at VitalSource for a few months, and over the weekend I finally switched to using the CSS framework in Tweet Marker too. The layout now works in more browsers and provides a much better foundation for design changes. It also allowed me to integrate this excellent date picker.

Here’s a short screencast video showing the date picker in a new browsing feature in Tweet Marker Plus. I’m very happy with how this turned out — both the look and functionality. On the server the date ranges are implemented with a Sphinx query, so they can be combined with search terms to help find old tweets.

Holiday bundles and no-brainer promotions

Two new bundles were announced this week: “The Indie Mac Gift Pack”:https://indiemacgiftpack.com/ (6 great Mac apps for $60) and the “Fusion Ads Holiday Bundle”:https://fusionads.net/bundle/ (an assortment of web design-related apps, icons, and more for $79). I love apps in both of these bundles and recommend you check them out, buy what you need, or gift them to a friend. There’s a fear among many developers that a bundle can cheapen the healthy Mac software market, but both these bundles avoid that with a higher price and the feel of being put together carefully.

As a comparison, here’s a “Macworld article on holiday bundles from 2009”:http://www.macworld.com/article/145005/2009/12/holiday_bundles.html. That collection seems kind of random despite several good apps in the list.

And sales for the Indie Mac Gift Pack are split evenly to the developers, so we know it’ll be a nice revenue boost for them during the holidays. From the FAQ:

“Hey… you’re ripping these developers off, aren’t you?” … “No… we ARE these developers. Our six small companies decided to band together and do a promotion, to see if it works for us. We’re splitting all the proceeds evenly. There’s no middleman here.”

I’ve never participated in a bundle, but after some of the “MacHeist controversy”:http://homepage.mac.com/simx/technonova/reports/from_the_mouths_of_developers.html I developed a set of rules that I run Riverfold promotions on. These are the easy things that I can always say “yes” to without much thought:

Coupons are great. My coupons rarely expire and I don’t care if sites like “retailmenot.com”:http://www.retailmenot.com/ keep a list of them. Saving a few bucks might be the difference between someone buying my software and not.

Giving out software to bloggers is great. Inspired by “Wil Shipley’s C4 talk”:http://www.viddler.com/explore/rentzsch/videos/4/, I’ve “blogged about this”:http://www.manton.org/2008/04/wii_transfer_serial.html. Apple employees get free licenses too.

Small promotions are great. I freely give out copies to small sites that want to give away licenses of my software to encourage people to post comments. I think readers interpret these (correctly) as software developers doing something generous for a small site, instead of the gut reaction when you see software listed on MacZot or MacUpdate Promo (“are sales so bad they had to sell their software for half price?”).

Charity is great. I loved being a part of “Indie+Relief”:http://www.indierelief.com/, the Pan-Mass Challenge auctions, and other bundles that go directly to a cause. Just like smaller promotions, these are good for users (deals on software), good for developers (helps with marketing), good for charity (donated money), and good for the software market (these aren’t developers who are making a sacrifice because their sales aren’t doing well — it’s charity).

Now that I’ve seen a bundle like the “Indie Mac Gift Pack”:https://indiemacgiftpack.com/, I think I can more clearly judge a unique bundle opportunity when it comes along. Does it minimize the middleman? Does it respect the individual apps as peers? Does it use the total bundle price to underscore the value of software rather than cheapen it? Then it’s probably a good deal for everyone.

New blog design

I’ve been blogging here since 2002, and I started Riverfold in 2006, but it’s taken me a while to realize something pretty obvious: traffic flows back and forth between my personal blog and the company site, and I should stop fighting it. Today I’m embracing that in a small way by adapting the “riverfold.com”:http://www.riverfold.com/ design to this blog, and linking more prominently to my indie products.

I’ll still post about things that have nothing to do with software. I don’t want to give that up, and some of my favorite posts wouldn’t exist if I stuck to programming or business topics. Some non-software favorites I found while surfing “the archives”:http://www.manton.org/archives.html include “Ollie Johnston died”:http://www.manton.org/2008/04/ollie_johnston.html, “Perfection”:http://www.manton.org/2005/08/perfection.html, “The Great Scott”:http://www.manton.org/2005/02/the_great_scott.html, “Bush veto”:http://www.manton.org/2007/11/bush_veto.html, and “50,136 words”:http://www.manton.org/2005/12/50136_words.html. But hopefully by unifying things a little it’ll be more consistent, and encourage visitors coming to my blog for the first time to also buy some Mac software.

Thanks for your support over the years. Even when the referrers dry up and the click-throughs aren’t worth graphing, I’ll still write here, and maybe every once in a while it’ll be something good.

It’s like iTunes for…

Sometimes it seems like every app is trying to be “the iTunes for <insert subject here>”. I’ve worked on “an app that fits into this category”:http://www.vitalsource.com/software/bookshelf/, and there are countless more. iTunes 1.0 represents one of the biggest shifts in Mac user interface design we’ve seen — single window, source list, and smart groups.

While the iTunes UI is great for music, I’m not convinced it’s automatically great for all workflows.

“Clipstart”:http://www.riverfold.com/software/clipstart/ goes out of its way to do something different, by twisting the traditional source list a little to promote tags as the most important part of the UI. At first I feared that some customers would find it worse, that the UI would fail and I would be forced to become more iTunes-ish for the next version. But I think only by trying something different can you hope to be better. I’ve been using Clipstart to manage my movies all year and the tag-focused UI really works, especially when you start building up your library and can search and find related tags across all your videos.

I released Clipstart 1.1.1 a few days ago with a bunch of bug fixes, and an “iPhone 3GS giveaway”:http://www.riverfold.com/software/clipstart/press/3gs.html too.

Better software, less support

A few months ago “Ars carried a story”:http://arstechnica.com/journals/apple.ars/2008/10/09/slowing-economy-impacts-apple-call-center-in-colorado about Apple canceling a call center in Colorado. This part stuck out to me:

“Somewhat surprisingly, the iPhone 2.1 update was also named as one of the reasons for the cancellation. The software update has apparently been so successful at resolving iPhone 3G problems that its release has caused a noticeable drop in support calls.”

In this case it was just bug fixes, but it reminded me of “Getting Real”:https://gettingreal.37signals.com/. Make software easy to use and simple and then there are fewer things that can break and users are less confused. I have been obsessed with following this advice lately. Some of the limitations I’ve put in a couple recent projects:

  • No preferences (for Mac, no prefs window; for web, no options or settings screen).

  • Single toolbar (no status bar or need to look in multiple places, e.g. both the top and bottom of the window).

  • Minimal toolbar buttons (only the absolute basics are exposed outside of menus).

  • Opinionated defaults (no customization, similar to others above).

On a few occasions this has hurt my ability to add features, but on others it forces me to see a user interface problem from a new angle, something I wouldn’t have done if I hadn’t had these limits to work in.

Limiting features in an app does not come naturally to me, but the more I embrace it, the more value I see in it. I “tweeted a bonus side effect”:http://twitter.com/manton/status/1177252437 to this approach last week: “Maybe another reason why simple software succeeds: customers see in it all the possible features to come, implemented just right for them.”

Small icons

I mentioned on “Core Intuition”:http://www.coreint.org/ episode 11 that I’ve been having fun making small icons for my new app. Here are a few partial screenshots:

clipstart_icons.png

Some of these are just pixel-by-pixel drawings, with slight gradients in places. For other parts of the user interface I used vectors in Photoshop, which gives a nice anti-aliased look that is important for some types of shapes, but for really small icons and widgets it’s pretty satisfying to just poke at things “fat bits”:http://www.google.com/search?q=fat+bits+macpaint style.

“Gus Mueller”:http://gusmueller.com/blog/ pointed out that I should be using PDFs or drawing them in code to be ready for resolution independence. He’s right of course. Maybe Apple will announce a device at Macworld that will make that task seem more practical.

Animation panel and web site for STAPLE! 2007

“Chris”:http://ycrtft.rethunkmedia.com/ and I headed over to Northcross Mall yesterday to take a final look at the conference center rooms before next week’s STAPLE! Expo. Although I’ve been on the planning committee since the very beginning of the conference over 3 years ago and actively involved for each of the previous 2 shows, this year is a little special because I’ve been organizing a panel on animation to complement the mostly comic book focused show. We have three great local animators this year: Aaron Romo, Evan Cagle, and Lance Myers. See the “STAPLE! guests page”:http://www.staple-austin.org/guests/ for more information on their work and our other featured speakers.

I also redesigned the web site last week, late Thursday night. In order to accommodate some CSS improvements and images from our new program, I had to abandon a few things from last year’s excellent design by “John Rubio”:http://www.johnrubio.com/ (who also did the logo). I hope to bring back elements of the old design for next year, though. There’s just not enough time in the day, and March is days away. I hate you February, for being so short.

Weblog design update

I just rolled out some design tweaks and “realignment”:http://alistapart.com/articles/redesignrealign/ to this site. The original design (if you could call it that) was whipped together several years ago and hasn’t really changed much since then. It even used HTML tables, a fact I was oddly proud of. The new site uses hack-free CSS, although there is a layout bug for some content sizes.

I also added a podcast feed link to all pages, links to my Flickr, 43 Things, and Del.icio.us accounts, and each individual post archive page also now includes excerpts from other posts in that category. You can see this in action by visiting “this post from 2 years ago”:http://www.manton.org/2004/07/california_adventure.html. I’ve been clicking through my old archives tonight, and that one stood out because WWDC is fast approaching again.

Here are two before and after thumbnails of the same post. Not too exciting, but it’s nice to make even these small improvements. Next up are some planned design-y things for the header.

Before After

Enjoy!

Creative professionals

My friend “John Rubio”:http://www.johnrubio.com/ has launched a new site: “CREATEaPro”:http://www.createapro.com/. A steady flow of good essays is already filling up the site. His latest, “10 Essential Tips to Becoming a Successful Creative Pro”:http://www.createapro.com/2006/07/10/10-essential-tips-to-becoming-a-more-successful-creative-pro/, is equally applicable to a wide range of disciplines, not just designers, illustrators, animators, or other artists the site is aimed at.

I like this paragraph from his introductory post:

“If I could go back, I would have paid more attention. I would have started my education not then, but at 8, when I first discovered the blackroom they had stashed behind my uncle Richard’s light table. I would have spent more time studying the racks of lead type before dismissing them as just things that got my hands and homemade clothes covered in ink.”

It underscores what seems to be the main theme of the site: get working and stay confident.

Sometimes I worry that I wasted too much time with trivial stuff, pushing away time for what is really important. But then I’ll encounter an artist or visionary who got a late start and still made the best of it. It’s never too late.

Unless you listen to “John Kricfalusi”:http://johnkstuff.blogspot.com/2006/05/animation-school-lessons-do-you-want.html: “After 24 if you haven’t already become really good, you will stagnate and your powers of learning and your rebellious youthful attitude will have died.”