Pixel City

Oh look, another blog about design and technology

Car Design

Well-known designer Peter Brock recounts designing the Daytona Coupe in the 1960s. (13 minutes)

Apple Ports: they come, they go.

This is a great piece and it's totally the kind of thing I would do. Now I feel bad that I didn't have the idea first. Great job, The Verge.


Shifter Design

Whether it caused a death or not, this design is pretty bad. If the position is important, make the position apparent.

Whose point of view?

iTunes: It should either be "My music" and "For me", or "Your music" and "For you". :-|

Lightweight Web Pages

Here's a great article (transcript of a talk, actually) on making small web pages. (Small as in fast-loading and small file sizes.)

What do I mean by a website obesity crisis?

Here’s an article on GigaOm from 2012 titled "The Growing Epidemic of Page Bloat". It warns that the average web page is over a megabyte in size.

The article itself is 1.8 megabytes long.

Here's an almost identical article from the same website two years later, called “The Overweight Web". This article warns that average page size is approaching 2 megabytes.

That article is 3 megabytes long.

On a related note, there's this post at quirksmode:

Pushing the web forward currently means cramming in more copies of native functionality at breakneck speed — interesting stuff, mind you, but there’s just too much of it... I don’t think this is a particularly good place to push the web forward to. Native apps will always be much better at native than a browser. Instead, we should focus on the web’s strengths: simplicity, URLs and reach.

Logo and Icon Design

A general rule of logos is that they should work well at all sizes. It's worth pointing out, though, that you are allowed to manually tweak them if needed to make them work in certain situations. Craig Hockenberry discusses what he did to make his company's icon work at very small sizes.

The animation to the left shows the progression of changes Anthony made to align the roof and windows of our factory on a 256×256 grid. While we ended up with a shape that’s different than our official logo, it renders a lot more clearly in the space provided.


The design of the new TiVo Bolt seems pretty silly. I can't see any good reason for it to be shaped the way it is.

TiVo Bolt, in bent enclosure

A/V components (and most things, really) should be flat, so they stack nicely. But TiVo used to be great at design. Two little things they did in the past stand out to me:

  • I had a TiVo and I replaced its hard drive with a larger one. Later, I added a second drive. But the second time I had it open, I forgot to reconnect the fan. I woke up the next morning, and when I turned on my TV, I saw a message from my TiVo saying it had shut itself down due to heat. TiVo's engineers saved me from my own carelessness, and after reconnecting the fan, everything was fine, and that box worked for years. If they weren't so good, I would have woken up to an expensive, melted, non-functioning paperweight.
  • I had another TiVo that I kept for many years. In 2007, Daylight Saving Time was changed in the U.S. My TiVo did not update itself to show the correct time but it never had problems recording things. They'd display at the wrong time, but everything still worked. A show that should be on at 8pm would show up in the menu at 7pm, I'd set it to record, and it'd record. I don't know how they kept the backend working, despite the frontend not, but I never missed a show.

How to design a deceptive headline

The headline: "Is Apple Music a Total Failure?"

The end of the article: "So, is Apple Music a total failure or just a slight disappointment? For the time being, I'd lean toward the latter."

Can you say "linkbait"? I knew you could. Seriously, Slate, you suck.

The Golden Ratio

Fun read. And I agree 100%.

"The golden ratio is total nonsense in design. Here's why."

Let me be clear. I agree with the general premise — that the ratio doesn't have any amazing properties. (Other than certain technical usefulness.) But lines like this — "'Strictly speaking, it's impossible for anything in the real-world to fall into the golden ratio, because it's an irrational number,' says Keith Devlin, a professor of mathematics at Stanford University." — are just flat out wrong. That's like saying that there's no such thing as a circle because pi is irrational. Oh wait, they go on to say that two sentences later: "Just as it's impossible to find a perfect circle in the real world, the golden ratio cannot strictly be applied to any real world object. It's always going to be a little off." Um, OK. Circles don't exist in the real world. Got it. Thank you, Fast Company!

Music Design


Meet the 44-year-old Swede who's been writing American pop hits for 20 years.

They also created a template for the Max Martin sound, which combines ABBA’s pop chords and textures, Denniz PoP’s song structure and dynamics, eighties arena rock’s big choruses, and early-nineties American R. & B. grooves. On top of all that is Sandberg’s gift for melody... Like many of ABBA’s tunes, these Backstreet Boys songs use major and minor chords in surprising combinations (going to a minor chord on the chorus, say, when you least expect it), producing happy songs that sound sad, and sad songs that make you happy—tunes that serve a wide variety of moods.

“... Baby One More Time” ... was ABBA with a groove, basically... Without being fully aware of it, he’d forged a brilliant sound all his own, and within a few weeks every American producer was desperately scrambling to emulate it.”

Swedish writers are not partial to wit, metaphor, or double entendre, songwriting staples from Tin Pan Alley through the Brill Building era. They are more inclined to fit the syllables to the sounds—a working method that Martin calls “melodic math”—and not worry too much about whether the resulting lines make sense. (The verses in “I Want It That Way,” for example, completely contradict the meaning of the chorus lines.) ... This very freedom from having to make sense lyrically has allowed the Swedes to soar to such melodic heights.

(Ugh. I just hate The New Yorker's archaic house style. "R. & B."? Really?)

Base iPhone Capacities


Capacity of entry-level iPhones has not changed from 2009 to 2015.

iOS 9's 'News' app is not that great

Oh. My. God. This thing sucks out loud.

When setting it up, you have to choose a source from their short list to start. (CNN, The New York Times, Fox News, etc.) No way past it. Fine. I pick the NYT, figuring I'll delete it later. I add Daring Fireball. And Wired. I look at a couple things. I see no way to just look at just one source (i.e., just Wired.) I see no way to delete things from my list of sources. The tabs at the bottom (on my iPhone) are "For You", which has God knows what — I guess it's the NYT, mostly; "Favorites", which is empty; "Explore", which is like "browse", compared to the next tab, which is "Search", and then finally "Saved", which is empty because I haven't saved anything. And that's all there is.

Like I said, I see no way to look at a single content source and I see no way to delete any of the sources I've chosen. I google "how to use apple news" and the first match is a Wired article, "Apple News Is the Best New Thing About the iPad", with which I respectfully disagree. No useful links. I go to support.apple.com, click "iPhone", then "iOS 9", then "built-in apps", then "Learn more about News", and there's info about it but nothing on how to use it.

Oh yeah, and the way it lays out stories is worthless too. One-size-fits-all never works. (I don't like Flipboard, either.) You get a little box about 3/4" high with as much of the headline and/or some article content that fits, plus maybe an image.

So basically, it's a minimally-configurable app, and you have nearly no control over what you see. It's like watching TV while a stranger works the remote. Toss. (Well, actually, you can't delete it, so it goes into the "Junk" folder, along with Stocks, Tips, and the rest.)

Designing the first level of Mario

The Photoshop Alphabet

A - Path Selection Tool/Direct Selection Tool. (aka the Arrow tool)
B - Brush
C - Crop
D - Default Foreground and Background Colors (black foreground/white background)
E - Eraser
F - Full screen mode
G - Gradient/Paint Bucket
H - Hand (or, press and hold "space")
I - Eyedropper Tool (I = "eye")
J - Healing Brush Tool (and others) (no mnemonic)
K - Knife tool (don't let the silent K fool you!)
L - Lasso Tool(s)
M - Marquee Tool
N - Notes Tool
O - Dodge Tool (and Burn and Sponge)
P - Pen Tool
Q - Quick Mask mode
R - Blur Tool (and Sharpen and Smudge)
S - Clone Stamp Tool (and Pattern Stamp Tool)
T - Type Tool
U - Line Tool (and other shapes) (no mnemonic)
V - Move Tool
W - Magic Wand
X - Swap foreground and background colors (you can see how X is kind of like "switch")
Y - History Brush Tools (no mnemonic)
Z - Zoom Tool (or, press and hold command/control-space to zoom in and option/alt-command/control-space to zoom out)

More awesome housing

This place is amazing. The only thing that could make it better would be surrounding it with a lazy river. :-)

Great article about designing with accessibility in mind

I can't say enough about this piece. Lots of good info here from a member of the Salesforce.com design team.

Disney color palettes

Very cool. Check'em out.

Apple Watch App Design

I'm sure there will be many articles about this. Here's one. It's a great overview of how he made the app, and how he changed it immediately after actually spending some time using it.

Before (left) and after (right)

Cinematography Analysis

"Every Frame a Painting". Good stuff.

Every Automotive Emblem, Explained

Title says it all. (Except they don't cover every emblem. Sadly, they mention Oldsmobile's but they don't show it.) Not super in-depth, but they cover a lot.

The story of EA's hockey game

Not quite "design of", but the story behind the game is pretty neat.

Evolution of the Star Wars logo

I love this stuff. I drew countless 'STAR WARS' logos in my notebooks as a kid. These are much better. :-)

Awesome housing

I just found out about this: "Habitat 67", in Montreal, Canada. "It was originally conceived as [a] master's thesis in architecture at McGill University and then built as a pavilion for Expo 67, the World's Fair held from April to October 1967."

You always get the coolest things from World's Fairs.

Pixels: The Movie

Of course I was going to link to this.

Happy 25th birthday, Photoshop!

Enjoy this video of some current Photoshop users trying to use Photoshop 1.0.


Stephen Hackett at 512 Pixels has a great writeup on how the iPad has changed in 5 years — and how much it hasn't. The most striking thing to me is that it's gone from 1/2 inch thick to 1/4 inch. As he points out, "the entire iPad Air 2 is as thick as the sidewall on the original iPad." (Referring to the gently tapered profile of the original iPad.)

Sound design?

Yup, love that too. It's everywhere — computers, cars, and even food.

Detail about fajitas is here:

Chili’s kept the recipe simple and relied primarily on the sizzle to not only turn heads but also trigger a barrage of senses: you hear them, then you notice the smoke and smell the aroma. Add up all of that, and you don’t just taste or see a neat-looking dish with Chili’s sizzling fajitas. You experience it.

Great job, Samsung!

No, really. Not being sarcastic here. They really did a great job with this series of fine-art-based ads.

Arrange by Color

From an interview with Faith Korpi:

I arrange all the app icons in my dock by color because that’s the only way I’ll remember where everything is. I’ve tried sorting them by type and how often I use them, but by color is the only method that doesn’t leave me scanning the whole bar for the icon I’m looking for.

Good to know that...

.. the targeting system for Terminators is coming along nicely: Dynamic Target Tracking Camera


Vague UI: Bad.

From Stephen Hackett's review of Evernote's new "Context" feature:

On the Mac app, the verbiage makes me think that Context can’t be turned off, just hidden. Clicking the “Manage Context Sources” button loads the Evernote web app, where sources can be turned off. These settings do sync with the iOS device, which is nice, but again, it’s unclear if this feature can be disabled completely.

This is very bad. There is a world of difference between "do/don't do" and "show/don't show". "Show/don't show" implies that the action is happening no matter what you choose. Unless you have good reason to do otherwise, it's generally better to build an app with settings that "do/don't do" instead of "show/don't show". It impacts many important things, including performance, battery life, network data usage, storage space usage, and privacy.

A Note to Designers

If you're going to put links at the bottom of your page, DO NOT use infinite scroll. Otherwise, cool site.

40 hidden logo symbols

Hiding symbols inside logos can be a gimmick, but it can also be done very well and for good reason. Here are a bunch that span the spectrum. Some are a bit of a reach (the hidden tire in the Continental logo?) but there are a lot of good ones here.

Pixar's Cars

Cars is one of the least-liked Pixar movies on most lists. Most people agree that even the worst Pixar movie is better than the average film, but beyond that, I think it is very underrated. I think it's one of the best, especially for young kids, for many reasons.

The story is very simple: a racecar wants to win a race, but he gets lost on the way, and winds up making new friends. That's it. It's not a complicated plot. There's no violence, other than cars pushing each other around a bit. Nothing scary. No dead parents. No monsters. No warping of time and space. No evil villains. No giant sharks. No sadistic kids. No toys getting pulled apart or being tossed into a grinder or incinerator. You don't need to know anything about how the world works — fossil fuels, energy production, land rights, or economics. No complicated references to other film genres or mythology.

Granted, Cars 2 is pretty much the exact opposite, but the original Cars has many great qualities that a lot of people overlook.

One thing Apple kinda glossed over today...

Yosemite Review

This button. Click it.

'Reduce transparency' option in Yosemite

Seriously. Transparency is bullcrap. No, Sir Jony, your OS is not all about "focusing on my content", you're just smearing crap all over the screen. When I have a window open, I want to see that window, not part of what's behind it. You're making what I want to read, harder to read. I want to read what I want to read, not what's behind it. How is that so hard to understand?

I worked for a publisher. Like almost all publishers, we used the cheapest paper possible, but we weren't so cheap as to use paper that you could see through. That makes things worse, not better. Didn't you guys move away from this once already?

Screenshot of transparency in OS X 10.1

I can't wait for brushed metal to come back in OS X 10.11: Pittsburg. (Coincidentally, there is a Pittsburg in California, so that name could work.)

Color and Usability

Interesting article from C. G. P. Grey about how color imacts usability. (Via Marco Arment)

Reasons to Upgrade Your Phone

Not just rationalizations — there are actually good reasons to upgrade your phone sooner rather than later.

  • The new phone will be in warranty.
  • Flash drives slow down over time.
  • Batteries degrade over time.
  • Buttons wear out. Probably on all phones, but in particular, the home button and sleep/wake buttons on iPhones seem to wear out a lot as you hit the two-year mark.
  • You will be able to run the newest OSs and apps well.
  • If you're on a plan where your phone is subsidized and your monthly payment doesn't go down once it's paid off, you're leaving money on the table if you don't take advantage of the ability to upgrade as soon as it's possible.
  • iPhones hold their value well, and you'll get more money for it the sooner you sell it.

So... if you can afford to upgrade comfortably, do it!


You don't always get a big "aha!" moment when trying to solve a problem, but when you do, it's pretty sweet.

"... image stabilization was the answer, but the technologies of that time, which you’d find in Final Cut and myriad other video editing programs, were simply unworkable for smartphones. ... image stabilization algorithms typically analyze a movie frame by frame, identifying image fragments common to each. By recording how those shared points jump around across frames, algorithms can then infer how the camera has been moving. By reverse engineering that motion data, software can recreate a new, steadier version of a film clip. Yet every step in that process requires processing muscle. That’s fine for a movie studio, which has massive computers that crank overnight to re-render a scene. It’s ridiculous for a smartphone... Karpenko had an aha moment: Smartphones didn’t have nearly enough power to replicate video-editing software, but they did have built-in gyroscopes. On a smartphone, instead of using power-hungry algorithms to model the camera’s movement, he could measure it directly. And he could funnel those measurements through a simpler algorithm that could map one frame to the next...

From an article in Wired about the creation of Hyperlapse for Instagram.

Name design?

Yes, it exists. This great old (1999!) article popped into my head so I figured I'd add a link to it. I think it's hysterical — a view into an industry that's so nuts it almost reads like satire.

“What a crummy name,” he says. “[Agilent] sounds like a committee name. ‘Who’s your competition?’ ‘Lucent.’ ‘Well, we want to play off Lucent — only we’re agile.’ I mean, if you wanted a name like that, I could come up with that kind of name in about four seconds.”


Landor, for its part, is quick to defend its handiwork. “To our critics, I can only say, vive la diffirence, vive the competition and vive individual entrepreneurialism,” says Redhill, in his gentle, grandfatherly voice. “We have the utmost confidence in our model.” To drive home that point, Redhill put me in touch with Darius Somary, the research director who had confirmed to an empirical certainty the allure of names like Agilent. “From a quantitative standpoint, it’s a very appealing name,” Somary told me. “On all the scalar measures of distinctiveness and appropriateness, it tested right off the charts.”


I occasionally post things here that are not design- or technology-related but are just really interesting. This is one of them — an article about how climate change will affect the grapes grown for wine production. (Via Paris Lemon.)

Great Video about Adobe Illustrator

Fast Company has a great video (19 minutes) about the history and impact of Adobe Illustrator. One of the interviewed subjects is Dylan Roscover, a former Full Sail student, who had his work used in Time Magazine while he was still in school.

Word Crimes

What does it take to make a 3 minute, 44 second video with amazing kinematic type? About "500 hours of work in After Effects, Photoshop, Illustrator and Premiere". Read (and watch) all about it in this post by the creator, Jarrett Heather.

Word Crimes screenshot

I never would have guessed that these companies shared a typeface.

Apple, Reebok, and Trapper Keeper. Who knew?


Via 512pixels.

How to Design a TV Show

OK, that's not really what this article is about, but the design stuff is my favorite part.

Siskel and Ebert had switched to sitting in movie theater seats—slightly angled, 18 inches apart—to a mock balcony, a kind of belvedere from which they could surveil all of moviedom. This created a narrative frame for the reviews. They were critics playing moviegoers, who discussed films as they were shown to them; it gave the show its sitcom quality, which became a central part of its appeal... In order to sustain the illusion, Siskel and Ebert would turn their heads in the direction of the screen after introducing a clip, as though they were watching it alongside the viewer... It read as inclusive; the camera always positioned the viewer either in a seat close to the hosts, or in an impossible spot just leaning over the balcony railing.

I totally want some of this material.

Scientists have developed a material so dark that you can't see it.

"You expect to see the hills and all you can see … it's like black, like a hole, like there's nothing there. It just looks so strange," said Ben Jensen, the firm's chief technical officer.

"Beats" Design

Congratulations to the design firm Ammunition for helping grow Beats from nothing* in 2006 to a $3 billion purchase by Apple in 2014. Never let it be said that you can't get anywhere with a stick-and-ball letter for your logo. Thanks to Ammunition for this great look into their work. (And thanks to Daring Fireball for letting me know that Ammunition exists.)

Beats logo wireframe

* OK, I guess they had a few million from Dre to start... but other than that — nothing. :-)

Birth of the Mall

Long and detailed (of course) story from The New Yorker about malls, by Malcom Gladwell.

Then he looked up and pointed to the second floor of the mall. The handrails were transparent. “We don’t want anything to disrupt the view,” Taubman said. If you’re walking on the first level, he explained, you have to be able, at all times, to have an unimpeded line of sight not just to the stores in front of you but also to the stores on the second level. The idea is to overcome what Taubman likes to call “threshold resistance,” which is the physical and psychological barrier that stands between a shopper and the inside of a store. “You buy something because it is available and attractive,” Taubman said. “You can’t have any obstacles.

Chicken nugget design?

Of course!

Designing a Taco

The inside story of the Taco Bell/Doritos marriage. The idea is pretty simple; this story is all about the execution. It's full of sweet, sincere, unintentionally hilarious lines like "To tackle this huge challenge, for months we shared know-how between the technical teams at Frito-Lay and Taco Bell" and "We had teams of engineers working day and night to get the seasoner working", but also interesting stuff like...

"When you buy a bag of Doritos and you open it, and some of the corners are broken off, you're probably not going to be that mad, because they're still Doritos," Gomez says. "But if our taco shells are broken in transit or in the restaurants, we can't do anything with them. That was a big obstacle for us. How do we make these shells chip-like, but also be able to ship them and still be able to build a taco without having them break?"

Design (and manufacturing) is all about constraints.

a picture of a taco

Pen Design

Low-tech Skilcraft pens endure in a high-tech world

The original design — brass ink tube, plastic barrel not shorter than 4 5/8 inches, ball of 94 percent tungsten carbide and 6 percent cobalt — has changed little over the decades... The original 16-page specifications for the pen are still in force: It must be able to write continuously for a mile and in temperatures up to 160 degrees and down to 40 degrees below zero.

Juice design? Of course!

It's easy to not think about the fact that juice companies can somehow make juice that tastes the same all year. Sadly, it's heavily processed and then re-flavored. Even the brands that are advertised as "natural", aren't. Still, it's interesting to see a little of how this happens, if also a bit sad.

After the oranges are squeezed, the juice is stored in giant holding tanks and, critically, the oxygen is removed from them. That essentially allows the liquid to keep (for up to a year) without spoiling — but that liquid that we think of as orange juice tastes nothing like the Tropicana OJ that comes out of the carton. In fact, it's quite flavorless. So, the industry uses "flavor packs" to re-flavor the de-oxygenated orange juice... Juice companies therefore hire flavor and fragrance companies, the same ones that formulate perfumes for Dior and Calvin Klein, to engineer flavor packs to add back to the juice to make it taste fresh. Flavor packs aren't listed as an ingredient on the label because technically they are derived from orange essence and oil. Yet those in the industry will tell you that the flavor packs, whether made for reconstituted or pasteurized orange juice, resemble nothing found in nature. The packs added to juice earmarked for the North American market tend to contain high amounts of ethyl butyrate, a chemical in the fragrance of fresh squeezed orange juice that, juice companies have discovered, Americans favor... Since they're made from by-products that originated in oranges, they can be added to the orange juice without being considered an "ingredient," despite the fact that they are chemically altered.


"The iPad is just a big iPhone"

Yeah. And a swimming pool is just a big bathtub.