A trip through time. Fascinating to watch the small changes with each generation.
Design
iFixIt on the Microsoft Surface Laptop teardown: “You can’t get inside without inflicting a lot of damage.”
I have long railed against construction that makes phones, tablets, and laptops difficult to repair. But this might be a new low.
As the iFixIt folks make their way through the Microsoft Surface Laptop teardown, it becomes clear that getting inside is no easy task. And these folks are pros at taking things apart. It’s their raison d’etre, their primary gig.
The whole thing turns a bit ugly. Just look at the picture in Step 5. Here’s a quote:
Now that we’ve got a clear look at the plastic, it seems these aren’t reusable clips at all, but weak ultrasonic spot welds that we’ve been busting through. This is definitely not going back together without a roll of duct tape.
Yeesh. I wonder what plan Microsoft has for repairing these units when they start rolling in. Will they simply replace the cover, discard the old?
Redditors design worst volume sliders possible
Some great, intentionally horrible design.
How the world’s most beautiful typeface was almost lost forever
Hayley Campbell, Buzzfeed:
The history of London can be found in pieces on its riverbed. The old pipes and fossilised horse bones wash up on the shore, and with them come the lead letters that printed that history in the newspapers.
The letters ended up there mostly out of laziness, building up piece by piece over the years that Fleet Street served as the epicentre of British journalism. A typesetter’s job was time-consuming: A page of newspaper was laid out one character at a time, the pieces were put back in their boxes the same way. When the typesetters crossed Blackfriars Bridge on their way home from work they’d toss a pocketful of type over the side rather than bother.
They’re still there. There are thousands of letters slowly rearranging themselves over the years and moods of the mud, like alphabet soup.
This is the story of one of those sunken typefaces and a feud between two longtime friends. Beautifully written and a fascinating bit of design history.
Check the main Loop post for a related BBC video.
Apple Park’s tree whisperer
Steven Levy, Backchannel:
As the campus came into shape, Muffly — who was granted full-time status as Apple’s senior arborist in 2011 — had to actually get the trees. This task was even harder because the arborist and his small team (he calls them his “elves”) needed more trees than originally estimated. When Jobs presented his plan to the Cupertino City Council in June 2011, he said that Apple would add to the 3,700 existing trees for a total of 6,000. But when Muffly began his work, he realized that nearly all the (non-indigenous) existing trees would have to go.
“It was all junk trees and parking lots here,” he says. “So it was a long process.
There’s a lot to enjoy in this story. There’s the background on Steve Jobs and his history with trees, coupled with the process of selecting trees for Apple Park, with an emphasis on saving and planting native trees. Native trees are built to consume the rainfall for a specific area, grow well in the native soil without supplement. Steve Jobs knew this and hired an arborist who shared his vision.
Latest Apple Park drone footage — Is that a barn?
[VIDEO] Matthew Roberts latest footage is gorgeous (click through to the main Loop post to watch it).
One question: About two minutes in, we see a shot of an outbuilding that looks like a barn, sitting off center on what appears to be a concrete pad. Anyone know what that is? If so, please tweet at me.
I do find it fascinating to watch an architectural vision come to full fruition. This is a beautiful design, incredibly detailed, massive in scope.
UPDATE: Yup, it’s a barn. According to this Mercury News article:
Underscoring that Apple Campus 2 is at once one of Silicon Valley’s wildest sketches of the future and a portal to its past, the company has set aside a place on its state-of-the-art campus for the Glendenning Barn, named for a pioneer family whose land became a magnet for tech companies after the blooms faded from their orchards. Constructed in 1916 with planks of redwood, the barn was built to last, though its founders couldn’t have foreseen all that it would withstand: the decline of local agriculture, the rise of big tech and several changes of the guard in Silicon Valley, not to mention Apple’s earth movers.
Thanks for all the response. Love this bit of preserved history.
Why Apple should replace the Navbar in modern iOS design
Brad Ellis, Medium:
The UINavigationBar, navbar for short, has been around since the original iPhone. Historically, navbars have been convenient and clear, easy to understand and easy to build.
The navbar is the strip at the top of your phone that lets you move in and back out of views. As an example, in the Messages app,the nav bar has an Edit button on the left side, the title Messages in the middle, and a create new message icon on the right. If you tap on a message thread, the nav bar will change to a “<” on the left. Tap that “<” and you’ll navigate back to the main view.
Back to Brad’s post:
Then phones ballooned, enough that the iPhone 7 Plus supplanted sales of the iPad mini. Now, if you own a modern iPhone, navbars can feel unwieldy — literally out of touch.
Burgeoning screens mean the distance between the navbar and our thumbs has grown. The screen on a 7 Plus is so tall it would take a thumb-length increase of 150 percent to reach those pesky buttons with one hand. Just another knuckle or two. Nothing weird.
He does have a point. I use a Plus, and when I need to work the navbar, I either have to use my other hand to reach the top of the screen, or do a weird slidey move to work the phone down so I can reach the navbar with my thumb.
iOS does feature that double-touch the home button gesture to bring the top of the phone halfway down, but I find that takes too long, given that I have to also do the double-touch to restore to full screen. The double-touch is my least favorite solution. [UPDATE: Yup, you can tap to dismiss this. Still don’t like it.]
Read the post for thoughts on how Apple is already addressing this issue and steering away from the venerable navbar. Terrific.
Vector icon speed runs
Learn how to draw a bunch of cool icons. Terrific post from Marc Edwards. Have an icon you are struggling to recreate? Ping Marc on Twitter.
Incredible 3-way wooden joint
[VIDEO] I find the design of this 3-way joint terrifically clever. The narrator does an excellent job explaining and then building out the design. The video is in the main Loop post.
RIP Blobs: Google redesigns emojis
Emojipedia:
Having appeared in various shapes and sizes since Android 4.4; the amorphous blob that defined Google’s emoji appearance since 2013 is being retired.
In its place: a redesign of every emoji in Android, coming as part of Android “O” which was announced today at Google I/O.
Follow the link, take a look at the new artwork. It’s certainly an improvement. Given the fragmentation of Android updates, not sure how big an impact this will have.
Also mentioned by Google is functionality which would allow users to download newer emoji fonts to support the latest emojis even on older Android versions.
So that’s something. But it requires specific action on the part of the user. If they’ve not moved to update to a newer phone or newer version of Android, not sure how effective this will be.
VIDEO: Microsoft’s Fluent Design System at work
[VIDEO] The video embedded in the main Loop post was built to showcase Microsoft’s new Windows 10 design language, which will roll out over the coming months. As you watch the video, think motion, depth, and translucency effects. It all flies by fast, so it might take a few viewings to wrap your head around the subtleties.
Not seeing a lot of capability that I don’t already see in iOS, but the trend definitely seems to be more depth, a move away from the completely flat design that had become a hallmark of Windows.
I got rejected by Apple Music — So I redesigned it…
Visual designer and Northwestern University student Jason Yuan:
Earlier this year I applied and interviewed for a graphic design internship at Apple Music (an opportunity of a lifetime), and was turned down with a very kind letter stating that although they liked my work, they wanted to see more growth and training.
Jason’s solution? Redesign Apple Music:
What you’ll find below is a case study offering potential solutions to address some of Apple Music’s problems, as well as ideas for future development. My process was guided by qualitative user research, Apple’s official Design Principles, and my own designer intuition.
To me, there’s always value in a project like this, value in identifying flaws in an existing design, as well as in prototyping fresh design approaches. Feedback like this is a gift to the Apple Music team. Hope someone there takes a look.
Live, draggable, animated Bézier curves
Bézier curves are everywhere, from the interfaces on our phones and computers to the various drawing packages that bring those interfaces to life.
Once you’re done playing, spend some time learning the details in this free online book.
Free online CSS gradient generator
Click. Drag. Type. Bang, zoom, you’ve got your cross browser CSS gradient all generated. Nice.
New emoji will include dinosaurs, barf, a brain, and a breastfeeding woman
I love the artwork here, glad they are still expanding the set to be ever more representational. As this set expands, we’re going to need better search tools. Scrolling through pages and pages of emoji is reaching a breaking point.
Text substitution is one solution. Keeping a page of recently used emoji (as iOS does now) is also helpful, though perhaps Apple could add in a pane of configurable favorites?
Note this, in bold letters on the Emojipedia page:
This update is not final and is subject to change.
Just something to keep in mind. And where’s that rimshot emoji?
How the AirPods show Apple’s frustrating and delightful quest for simplicity
Jason Snell, Macworld:
Tap-tapping your earbud and asking your phone out loud to turn the volume up doesn’t seem simple—but would a complex series of gestures really help?
As Jason points out in the quote above, how do you raise and lower the volume in a device with no dedicated volume buttons? A bit of a conundrum. And as the AirPods evolve as a product line, as they become capable of more complex behavior, will Siri be the solution?
Interesting post on the quest for balance between simplicity and complexity.
iOS 11 lock screen concept
Matt Birchler:
iOS 11 will all but surely be revealed at WWDC in June this year, and I would expect something to change on the lock screen there. So before Apple shows us what we’re getting in iOS 11, I decided to design my own new lock screen for iOS.
Matt has some excellent ideas here, designed to wring some usefulness from the lock screen, beyond checking the data and time and seeing notifications that have occurred since your last unlock.
I’ve long felt we should have the ability to fine tune what shows up on the lock screen and that Apple should open up the lock screen to developers. For example, I’d love to see the current temp/weather, along with my next appointment, on my lock screen.
Great writeup, worth reading.
Futuracha Pro: quirky font, watch the magic as you type
Futuracha Pro is an Open Type Font, originally based on Futura, which includes a large set of ligatures which change dramatically depending on the letter before and after the letter you are typing. This concept is best seen in motion.
Watch the video embedded in the main Loop post and jump to about 1:07 to watch the magic.
The key is the ever-expanding library of ligatures, which you can add to. Futuracha Pro is homing in on the end of its Indiegogo campaign, having long ago reached their original funding goal. This is definitely my favorite new font.
The typography of Broadway
This is an amazing visual catalog of the typography up and down Broadway in New York City. Each photo has a slide that reveals the font (in one direction) and the font in place on a building or sign (the other direction). Beautiful implementation.
The world’s finest logos
Logobook purports to curate and feature the world’s finest logos, symbols and trademarks.
An interesting project, worth digging through, especially if you need to create a logo of your own.
BeatsX review: For real? Just pick up some AirPods
Jordan Novet, VentureBeat:
When I picked up a pair of Apple’s wireless AirPods a few weeks ago, I thought the included charging case was a clever touch.
But the case wound up being so useful that it spoiled me for Apple’s other wireless earbuds, the BeatsX. After two weeks of testing a pair of BeatsX headphones, I’ve found they also fall short of the AirPods in one make-or-break area: battery life.
And there are other drawbacks, too, The AirPods case, with its satisfying clasp, is an instant Apple design classic, whereas the included BeatsX silicone case doesn’t always completely protect your headphones — sometimes parts of the cable end up sticking out. And it gathers lint. Just look at it.
If you are trying to decide between BeatsX and AirPods, this take is worth reading. The difference between the two carrying cases is just one small piece of a larger puzzle, just a taste of each respective product’s approach to design, but in my opinion, a telling taste.
If nothing else, take a look at the image of the BeatsX case in the linked post, then imagine wrestling a rubbery, springy, coiled BeatsX headset into that case. Compare to the plop, plop of dropping your AirPods into their case. Then add in the take on battery life.
If that matters to you, you’re likely an AirPods customer.
CSS reference
Yesterday, we posted a link to this HTML reference. Here’s a CSS reference from the same folks. Good stuff. Pass it along.
HTML reference
No shortage of these, but check this one out, see if you like it. Be sure to click on a few tags to get a sense of the interior pages.
The myth of Apple’s great design
Ian Bogost wrote an article for The Atlantic with the provocative title The Myth of Apple’s Great Design.
Here’s a quote:
Apple has great design is the biggest myth in technology today. The latest victim of this ideology comes in the form a remarkable report on the late Steve Jobs’s final project, still in production: a new, $5 billion Cupertino headquarters for Apple Inc.
And:
But if Apple designs at its best when attending closely to details like those revealed in the construction of its spaceship headquarters, then presumably the details of its products would stand out as worthy precedents. Yet, when this premise is tested, it comes up wanting. In truth, Apple’s products hide a shambles of bad design under the perfection of sleek exteriors.
There’s a lot more of this. Luckily, I will not have to take this article apart, point by point. Nick Heer, keeper of the blog Pixel Envy, does this job nicely, in a post titled Sufficiently Great.
Read ’em both.
Font Squirrel offers free fonts and some quite useful tools
From this Robservatory post about Font Squirrel:
They offer a huge assortment of fonts, all licensed for free commercial use, with a nice set of categories and search engine. And free…though the tradeoff is a fairly heavy advertising load.
And:
Font Squirrel not only has a great collection of fonts, but they offer a free web font generator. Using the generator, you can create fonts that are embedded in your page, so that they’re available even when users don’t have those fonts installed locally.
There’s more to Font Squirrel. Definitely worth a look.
iOS and the neglected touch down state
Visual and user interface designer Max Rudberg compares the touch down state (the visual change when you press, but before you release, a button) in Apple Watch, Android, and iOS. There are excellent animated GIFs for each example.
Max makes his case well. By comparison, iOS does feel a bit stiff.
The core design principles of Apple’s spaceship campus
Reuters:
But what was most striking to those who worked on the project was Apple managers’ insistence on treating the construction of the vast complex the same way they approach the design of pocket-sized electronics.
Apple’s in-house construction team enforced many rules: No vents or pipes could be reflected in the glass. Guidelines for the special wood used frequently throughout the building ran to some 30 pages.
Tolerances, the distance materials may deviate from desired measurements, were a particular focus. On many projects, the standard is 1/8 of an inch at best; Apple often demanded far less, even for hidden surfaces.
And:
Apple’s novel approach to the building took many forms. Architect German de la Torre, who worked on the project, found many of the proportions – such as the curve of a rounded corner – came from Apple’s products. The elevator buttons struck some workers as resembling the iPhone’s home button; one former manager even likened the toilet’s sleek design to the device.
But de la Torre ultimately saw that Apple executives were not trying to evoke the iPhone per se, but rather following something akin to the Platonic ideal of form and dimension.
Fascinating read. Skip the video.
Theater mode for Apple Watch
Christian Zibreg, iDownloadBlog, on Apple Watch theater mode:
Activated via a brand new toggle in Control Center, Theater Mode puts your wearable device into silent mode while keeping the screen dark until you tap it or press the Digital Crown or the Side button.
Read the post for all the details, including some nice screen shots and a video that shows theater mode in action.
In a nutshell, you drag up on your Apple Watch screen to bring up control center. Tap the theater mode icon (orange, with two theater masks) to bring up a splash screen with a theater mode button. Tap the button and theater mode is enabled.
In theater mode, your watch screen will not light up in response to notifications or a wrist flick. You’ll need to tap the screen or press the Digital Crown or side button to turn it on.
Two things:
Not sure we need the splash screen button press to enable theater mode. Hopefully, this is a temporary extra step. I turn airplane mode on and off without the confirming splash screen. Works just fine.
Does the UK interface say “Theatre Mode”? Just curious.
UPDATE: And the answer is, Theater Mode in the US and Cinema Mode in the UK. [H/T Vincent Ritter]
Unicode progress bars
Not exactly sure where I’d ever use these, but I love design exploration and definitely enjoyed playing with this. I could see this as an exhibit at the Museum of Modern Art.
Apple web site adopts San Francisco font
I find it jarring, but I suspect I’d say that about any design change, especially about one so foundational.