stephen.news

hypertext, words and more

Prototyping

  • The iPhone has no doubt been a crazy success since the early days. But how did the iPhone end up being such a success? Speculation, rumors and the lack of a design-first company in the market left Apple wide-open to squeeze into a already crowding market of cell phones and catalyze the smartphone industry into the behemoth that it is today. It took years of research, iteration and trial and error to produce the first iPhones. Apple was prototyping devices in secrecy with fabricators in China as early as 2005 with Foxconn and Pegatron. Looking back, we can see the design lineage and early ideas that were afoot in the company.

    Early on, there was a bet that the clickwheel, an invention of the successful iPod could be re-used in the iPhone. Thanks to @DongleBookPro, and (a few others over the years), we have some interesting images of late Acorns OS. Apple installed numerous diagnostic tools on these devices such as fabricator diagnostics, carrier and engineering diagnostic UI. Hap Plain of Cult of Mac put together this video showing just how rudimentary some of these early P-series iPhones worked here:

    The rudimentary touch-operated Acorn OS that ran on these prototypes eventually were refined and became the much beloved iOS. For further reading I recommend 9to5mac’s piece on the history behind Acorn OS and how it came to be.

  • The other day, a friend of mine asked me if I could help design a fun little website that emulate's macOS. I thought it would be a fun project, and looked around for some design resources to get a head start. Low-and-behold, I came across this amazing gem (get it?! 🤣):

    If you're not familiar with Sketch, it's a design and prototyping tool. Totally worth checking out their free trial. Sketch makes a good habit of releasing these, but for some reason the macOS UI Library didn't get any notoriety on their blog.

    At any rate, it's a badass resource for rapid prototyping. You can install the maOS UI Library here or click on the image below.

    A screenshot of the Sketch website showcasing the macOS UI Library

    If you don't have Sketch installed, clicking on the big orange button to install won't do anything. If you do have it installed, it will open Sketch and prompt you for installation. At which it will be available in your Sketch Preferences.

    Sketch app preferences on the library tab

    Once it's here, you're done! The biggest upside to this Library is it works with Sketch Runner out of the box (a must have for you Sketch users out there). You can quickly plop any macOS component by pressing command-apostrophe (⌘ ') at any time and it should bring up the Sketch runner dialog. Search for a component and:

    Sketch Runner dialog search query

    Press enter, and drop the component onto your artboard.

    Sketch App running with a macOS window component

    Congratulations! You’ve're ready to start prototyping! Enjoy! 🎉