Dave Klein's mellifluous musings on design and tech

March 17, 2025

How to Make a Photography Book

At work there was a discussion about making money from photography. I chimed in to say I recently designed and printed a book, and a few coworkers encouraged me to make a presentation to explain how I did it and what I learned. Below are my slides, animations, and talking points. Enjoy and feel free to contact me with any questions.


Slide 1 includes the title “How to make a book” and a 3d render of the book.

My goal for the presentation was to demonstrate how I designed and printed a book vs. uploading photos to a service that automatically generates one. That’s why I’m leaning heavily into the word make.”

Slide 2 is a quick intro about me that mentions my joining Meta in January as a product designer on the enterprise products team.

I provided a very brief introduction about myself including that I recently joined Meta in January as a product designer in the Enterprise Products group.

Slide 3 is a screenshot of a series of comments and a list of blurred out names.

An important lesson I learned from my time at Salesforce is to thank people at the beginning of a presentation. I listed and thanked the people who encouraged me to talk about my book.

Slide 4 is a list of reasons why I made a book including I take photos, books are cool, permanence, challenge, and design.

Getting photos offline was important to me. I wanted to make something tangible. Also I thought it would be fun to design a book! My entire career has focused on software.

Slide 5 includes 2 books that inspired me.

Matt Stuart’s Think Like a Street Photographer and Craig Whitehead’s Find Your Frame are both excellent books to help one become a street photographer which is the book’s focus.

Slide 6 is a series of photos of Craig Mod’s books.

Craig Mod is also a huge inspiration. His newsletters and books are beautifully written and feature dazzling photos. I can’t wait for Craig’s latest book to ship: Things Become Other Things.

Slide 7 includes an image of Josef Müller-Brockmann’s book “Grid Systems in Graphic Design.”

For the book’s design I aimed for a Swiss aesthetic with a strict grid and minimal elements. I consistently return to Josef Müller-Brockmann’s Grid Systems in Graphic Design for inspiration. I also deemed a corresponding neo-grotesque typeface to be ideal.

Slide 8 is a series of book covers of books that are at my favorite book store in San Francisco: William Stout Architecture Books.

I’m in awe whenever I visit my favorite book store in San Francisco: William Stout Architecture Books. I adore browsing the aisles and dissecting the various cover designs.

Slide 9 is a photo of the Ricoh GR IIIx camera and its attributes including small, simple, recipe support, and how I do not feel the need to heavily edit its photos.

I forced myself to carry a dedicated camera for this project and after extensive research decided to purchase a Ricoh GR IIIx. It’s small, has limited controls, supports creating custom recipes, and I find myself making minimal edits to the photos. With a dedicated camera there are no distracting push notifications, no ability to quickly edit, and, most importantly, no ability to instantly share.

Slide 10 is a screenshot from Apple’s website to demonstrate Photos.app and its ability to produce books.

I mentioned that there are plenty of services that are built for simply uploading photos, clicking a few options, and printing books. But, again, I wanted to challenge myself and have total control over the design.

Slide 11 is a screenshot of mixam.com and where I explain that Mixam provides template files and helpful support.

When I saw that fellow photographer Daniel Gynn made a book I immediately reached out to ask a bunch of questions including, What company did you use to print?” That is how I learned about mixam.com which provides helpful template files and extremely patient customer support.

Slide 12 is a screenshot of a Mixam template file.

Template files taught me how to approach incorporating bleed, quiet, and trim areas when designing each page. I simply entered the provided values into Figma.

Slide 13 is a screenshot of the Print for Figma plugin and a list of its attributes including its cost of $12 per month, its ability to help set up bleed and quiet areas, and its ability to export PDFs in the CMYK color model.

I quickly learned that Figma is unfortunately not suited for printing books due to some limitations including the inability to export in the CMYK color model which is required when professionally printing. Fortunately, for $12 per month, one can use a plugin called Print for Figma which helps set up guides and properly export PDF files.

Slide 14 is a screenshot of a 12 column grid.

For the layout I went with a conservative 12 column grid that allowed me plenty of flexibility.

Slide 15 is an animated gif that demonstrates the layouts I experimented with using wireframes.

I started experimenting using wireframes and arrived at 8 possible layouts that provided me the flexibility to select arrangements that maximized the attributes of each photo.

Slide 16 is an animated gif that leverages the final list of wireframes with photos applied.

When I apply photos to the final list of layouts the book begins to come to life.

Slide 17 is a Figma screenshot of every page in the book.

I continued to experiment with layouts and order until I was confident that the book was ready to print.

Slide 18 is the text: “Connect your photographic style to the page.”

Creating wireframes and laying out a series of photos across dozens of pages is just the start. The ultimate goal is communicating your photographic style to the reader.

Slide 19 is a screenshot of a 3x3 grid to demonstrate the rule of thirds.

When I pick up a camera I naturally gravitate towards capturing subjects and scenes using the rule of thirds. I always have a 3×3 grid overlay in my viewfinder or on the camera’s screen.

Slide 20 is a photo from Hawaii demonstrating the rule of thirds.

Here is an example photo demonstrating the rule of thirds. I love how the sky perfectly fills the top third, land fills the bottom third, and the land slightly emerges into the middle third.

Slide 21 is a photo from Morocco demonstrating the rule of thirds.

Here is a photo I took in Essaouira, Morocco. The sky fills the top third. People are walking through the bottom third. A wall fills the middle third. And, for my favorite detail, an arch is placed at an intersection point.

Slide 22 is a photo from Japan demonstrating the rule of thirds.

Here is a photo I took in Hakone, Japan. Gora Kaden is embedded in nature, but a metal structure juts into the frame filling one third of the photo.

Slide 23 is a photo from Barcelona demonstrating the rule of thirds.

Here is a photo I took in Barcelona. I love this photo because there are people sitting in the left and right thirds separated by a structure that fills the middle third.

Slide 24 is a photo from Barcelona demonstrating the rule of thirds.

Lastly, this photo was taken at Casa Vicens in Barcelona. I stood at the bottom of the most incredible staircase, pointed my retired Fujifilm X-T2 up, and snapped. This is by far the best photo I’ve ever taken.

Slide 25 is a photo split between two pages in the book to highlight the rule of thirds. Two thirds are on one page, and one third is on the other page.

Now this is where I started to really cook with the design. I combined a few photos that particularly exude rule of thirdness, and laid them across two pages along the grid. This creates a neat effect where one photo can act as two. In this photo a man enters a crosswalk and looks across the book towards the parking meter cars.

Slide 26 is another photo split between two pages in the book to highlight the rule of thirds.

Here is another example where I split a photo into one third on one page and two thirds on the other page. A man enters the train car on one page and on the other is part of a person sitting on a chair.

Slide 27 is another photo split between tw pages in the book to highlight the rule of thirds.

The last example where I split a photo across pages features people walking and biking outside of Salesforce Tower on one page, and Salesforce Transit Center’s webbing on the other page.

Slide 28 lists a book’s components including the front cover, back cover, and spine.

After finishing all of the pages I had to consider the book’s exterior including the front cover, back cover, and spine. This is where I had some fun.

Slide 29 is a screenshot of several weights of the typeface I chose.

I adore the typeface I use on my website so it felt right to grab it for the book as well. It’s Söhne by Klim Type Foundry.

Slide 30 is a screenshot of the front cover, back cover, and spine.

My goal for the front and back cover was to be minimalist and strong. My name, the year, the book’s name, and my favorite photo in the book. Streetline came to me while I was brainstorming. I said out loud something like, street photography, lines, leading lines, street, lines. Streetline. Boom.” I intend to continue using this layout for my next book.

Slide 31 is the test: “How should the book feel when opened?”

I spent an inordinate amount of time thinking about what the reader should see upon opening the book. One large photo? Streetline” again?

Slide 32 is a photo of Marcin Wichary’s book, Shift Happens.
I followed Marcin Wichary’s journey for literally years as he wrote his book, Shift Happens. His newsletter was so entertaining and I thought maybe there was a lesson he learned along the way that could guide me.
Slide 33 is an animated gif of Marcin opening and closing a booklet he designed.

I recalled reading in Marcin’s newsletter about a booklet he designed for an event at the Computer History Museum. By placing the same content in identical positions he created a neat effect as the book is opened.

Slide 34 says “Build anticipation. Open to blank pages.”

I decided that the best way for the reader to experience my book was to open to blank pages. I wanted the reader to feel enticed.

Slide 35 is a screenshot of two blank pages in Figma.

Each page of a book slightly increases its cost, so I had to pay extra to achieve this design. It was worth it.

Slide 36 says “Foreword. Welcome the reader.

I continued to delay the reader from seeing photos by briefly explaining the design and purpose of the book.

Slide 37 is a screenshot of a blank page and the foreword.

The foreword discusses why I chose the Ricoh GR IIIx, a few design details, and some people I wanted to thank in writing including my late father, Steven Klein.

Slide 38 is a screenshot of mixam.com after uploading PDFs of each page

Once all of the pages, front cover, back cover, and spine were ready, I exported PDFs using the Print for Figma plugin and uploaded them to mixam.com.

Slide 39 is a screenshot of the book preview feature on mixam.com

Mixam has a fun preview feature that allows you to expereince flipping through the book with a page turning animation. This feature is particularly helpful to understand how your photos interact with the center of the book.

Slide 40 says “Bleed area. Avoid losing data near the hinge.”

One topic that I felt was especially improtant to discuss was how to ensure photos would not lose any data when spread across two pages.

Slide 41 demonstrates how I repeat a bit of the image near the book’s hinge

When a photo is spread across two pages I repeat a bit of data near the book’s hinge. For example my goal for this photo was to ensure the crosswalk lines align perfectly across the two pages after the paper is cut during the bookmaking process.

It is important to note that this method worked as desired when using Mixam’s rendering feature, but was inconsistent in the book. Sometimes photos align perfectly; sometimes there are mistakes. I will need to figure out how to get this right for my next book.

Slide 42 says “Text color. Standard black (K). Rich black (CMYK).

One lesson I unfortunately learned the hard way was the difference between standard black and rich black.

Slide 43 is a screenshot of Figma that shows the text color set as black.

In Figma I assumed that setting the text to black and using the Print for Figma plugin to export would result in black text in the book. I was wrong. Thoroughly wrong. If you have experience with printing you are probably shaking your head right now reading this.

Slide 44 is a photo of text in the book.

If you look very closely you can see that the black text in the book actually has a schtickle of color in it. Infuriating.

Slide 45 is a screenshot of a support document on Mixam that demonstrates the difference between standard black and rich black text which has ghosting.

Alas, Mixam has a support document that demonstrates the difference between standard black text and rich black text which has ghosting in it. If only I had known!

Slide 46 says “Easter eggs” and has a screenshot of the last page which shows the 12 column grid I used and a photo of me holding a Macintosh Portable computer.

I included one subtle easter egg for my own entertainment. On the last page the 12 column grid is slighlty present using gray vertical bars. Also I adore my Macintosh Portable. It’s one of the top 5 items in my Apple collection.

Slide 47 lists a variety of book options.

For size I wanted the book to feel like holding a stack of typical pritner paper so I chose A4 for the size. The rest of the options were somewhat randomly selected based on Mixam’s descriptions. I chose thick paper (100lb with a 130lb cover) to make the book feel sturdy.

Slide 48 is a photo of a stack of books along with some statistics.

Each book costs $15.07 to print, and I decided to list them for $24 each. $25 sounded too high. Yes, that is how I decided the book’s cost. After paying $4 for USPS media mail and $3 for a padded envelope my profit is $1.93.

That isn’t a lot of money, but I never intended to make a profit. Breaking even is fine with me. I just feel so much joy knowing that people have my book in their homes. As of March 14, 2025 I am proud to say that I have sold 31 copies.

Slide 49 is a screenshot of my personal website’s Store page.

Streetline is the first of many products. My goal is to start selling prints that I can produce from my home. To accomplish this I created a new page on my website simply named Store. All products will be sold using Stripe Payment Links. I highly recommend Stripe for an easy and elegant way to accept payments and gather customer data.

Slide 50 includes 2 screenshots: an Instagram post and an Instagram store.

To promote Streetline I posted both on my Instagram feed and a story. While poking around Instagram’s settings I recalled that anyone can set up an Instagram store and thought that would be a fun challenge as well.

Slide 51 is a screenshot of Meta Commerce Manager

I’m normally intimidated by large, complex web applications, but I found Commerce Manager to be straightforward to set up. The big lesson learned during this step was it can take a full day for products in your store to appear in Instagram.

Slide 52 are screenshots of posts on Threads and LinkedIn.

A Threads post announcing my book had a few interactions, but I was shocked by the activity on my LinkedIn post. I sold several books to acquaintenaces and former coworkers.

Slide 53 is a screenshot of a Facebook post.

Most of my friends, coworkers, acquaintences, and family have moved on from Facebook proper to other apps. I received much less activity compared to Instagram and LinkedIn.

Slide 54 discusses my goals for this year’s book including more grid experimentation, exploring different apps for designing the book, and telling a story with my photographs.

I have a few goals for this year’s book (yes, this is now an annual traiditon). I want to be a bit more adventurous with my grid selection(s). I also need to use a real tool for making a book. Perhaps it will be time to return to Adobe with either Illustrator or InDesign. Affinity Designer (or Publisher) are interesting as high quality, Apple-centric apps. I’ve also heard good things about Canva.

The most exciting challenge will be attempting to tell a real story with photos. Streetline is honestly random from page to page. I want have a single idea throughout the book.

Slide 55 is a photo of the Ray Ban Meta glasses.

In addition to exploring layouts and tools, I also plan on expanding my camera options. For example, I now work at Meta! I should try to incorporate some photos using the Ray-Ban Meta glasses. The perspective from those glasses feels unique with their ability to include the photographer’s hands in the frame.

Slide 56 is a photo of the Apple Quicktake 100.

As an avid Apple product collector I want to include a few photos using a real Apple camera: the QuickTake 150. With its paltry 640×480 resolution I’ll need to get creative.

Slide 57 is a photo of the Leica Sofort 2 camera.

The Leica Sofort 2 is a truly fun camera to use. I brought it to a cousins ski weekend in Utah, printed photos throughout each night, and placed them on a table as I printed. By the end of the third night the table was covered in photos. It brought so much entertainment to the trip. Maybe a photo of a collage will make its way into the next book.

Slide 58 is a photo of the Canon PowerShot SD1100.

Lastly, I recently acquired a throwback camera to join the kiddos in their enthusiasm for retro photography: the Canon PowerShot SD1100. Its photos feel like college and I love it. Similar to the other cameras, using this will be a fun creative challenge.

Slide 59 is a screenshot of the iA Presenter macOS app.

While I was in an extended period of experimentation, I thought it would be fun to try a new app for making a presentation. Naturally I’m inclined to use Keynote, but I recalled that last year iA, the company that makes iA Writer, launched a presentation app named iA Presenter. The pitch is simply write out your presentaiton using Markdown and the app will handle making slides. I enjoyed using the app even though I wish there were just a few more controls over slide designs.

Slide 60 is a screenshot of my slides

Every slide in this presentation was made using iA Presenter!

Slide 61 is a screenshot of Blender on macOS.

When it came time to promote the book I wanted to go beyond a Figma export. I decided it was time to learn 3D software again (I frist learned to use Strata Studio Pro and Bryce 3D at summer school in 1994). I heard Blender is an approachable app to enter the field. After dozens of ChatGPT prompts and a few calls with a coworker, I managed to get PNGs attached to a rectangular prism. I then placed the book above a plane, dropped a light source in, and delicately placed a camera near the object.

Slide 62 is an animated gif of a 3D render of my book spinning around.

I couldn’t stop. I recalled my days of using Macromedia Flash and figured out how to use keyframes to make the book spin and levetate. I love how you can see the object’s shadow mnoving.

Slide 63 is a render of the book.

Alas we have arrived at the end. Please feel free to send me questions. Designing, printing, and ultimately selling copies of Streetline has been the most rewarding experience of my design career. I finally designed and made something for myself and loved ones.

Thank you for joining me on this journey, and don’t forget to buy a book.

Photography Camera Book Design
February 18, 2025

3D Printing Happiness

Apple Adjustable Keyboard with 3D printed palm rests
So happy I purchased a lightbox

Last year I acquired an Apple Adjustable Keyboard for my collection. I do not recall ever seeing this keyboard in person, and I thought it would be both fun and pleasant to type on. Unfortunately it did not come with the curved palm rests that truly give the keyboard its presence on a desk. They’re almost as tall as the keyboard itself!

One day I was lamenting about this to a fellow Apple collector and friend who informed me that the 3D model files for the left and right rests are available on Printables. I do not have access to a 3D printer, but I had heard about companies that will just ship you prints.

After a bit of research I discovered a San Francisco-based company called Makelab. I uploaded a .stl file and was immediately overwhelmed by complexity. FDM, SLA, VCJ, MFJ, PLA, PETG, ASA, etc. What is all this nonsense? How is a newcomer supposed to just print?

I quickly learned that Makelab has an incredible support team. I explained the project and they provided a few quotes in addition to helping me choose a custom color that resembles early 90s aged computer plastic.” I went with an FDM machine using PLA material at 200 microns. (Don’t ask me what that all means.) A few days later the parts arrived and… perfect. They attach easily, look great, and feel comfortable even after several hours of use.

In addition to 3D printing the rests I also had to find a way to connect an ADB keyboard to USB-C. The same collector friend gifted me a Drakware ADB2USB connector. It has some mild temperaments (make sure you connect the keyboard to the connector and then the connector to a USB-A to USB-C dongle) but otherwise works beautifully. Now I’m up and running with the keyboard at my home office and slowly adjusting to the home key indicators’ placement on the d” and k” keys instead of modern f” and j” keys. Yes, Apple had to do everything their way in the 90s.

Oh one more thing… I purchased a second Apple Adjustable Keyboard for my desk at Meta.

Apple Keyboard
January 24, 2025

Ode to a Box

I’ve been following the team at CW&T since 2011 when they launched the Pen Type-A on Kickstarter. My design team gathered around to watch the campaign video and were immediately impressed by the delightful pop” sound the pen makes when it is removed from its container.

The duo behind CW&T not only makes thoughtful proudcts, but they also come across as thoughtful people with genuine kindness and emphathy. You can clearly see this from their Instagram content, weekly newsletter, and podcast appearances.

Many years, product launches, and awards later, CW&T launched a product for me: the 55 66 88. It’s a phone stand set at 3 useful angles for positioning your camera.” Clever and unique!

55 66 88 rotating video

CW&T’s product photography is always stellar.

After having children we found ourselves regularly making FaceTime calls from the table during meals, and we used a few different average looking phone stands to free up hands and stabilize the video. When CW&T launched the 55 66 88 I immediately backed it thinking it would replace our current stands.

What surprised me beyond the cleverness of a stand that can display a phone at 3 different angles was the box’s design. It somehow manages to both demonstrate the product and perfectly encapsluate the CW&T brand. At first glance it looks like a typical box with an illustration of the product on the side.

55 66 88 box zoomed out

If one takes a closer look a few details quickly emerge. First, the circle.

55 66 88 box dot

CW&T uses the circle as either a foundational element in a product or as a colorful accent. For example, the Studio Sketchbook, the Solid State Watch (which I have come close to purchasing several times), the Orange Dot, and Salty all leverage the circle in unique ways. It’s even a core part of the website’s design as a consistent element in the upper left corner.

CW&T website screenshot

Next, the product name. It’s the same typeface, color, and font size as the rest of the box’s text. One can imagine designing this side of the box with a much larger size so the product name shouts at the customer.

55 66 88 box product name

Why not include a description like a phone stand with 3 useful angles?” Simplicity. Let this side simply show the product name, and allow other sides to be busier.

Now for a few product details.

55 66 88 box product details

Ah hah! There’s the description: A phone stand set at 3 useful angles.” Concise and clear. Along with the description are the material, finish, size, weight, and contact information. Instead of the obvious design of Material: 6063 Aluminum,” CW&T inserts space after each label to ensure the semicolons and values are aligned. This leads to a much cleaner, uniform aesthetic.

Lastly, a demonstration of the product.

55 66 88 box product demonstration

6 quick ways to use your front + rear facing camera.” 6?! It didn’t occur to me that with 3 angles one could achieve 6 orientations by leveraging all of a phone’s cameras. In retrospect this is obvious and I was too focused on solving the FaceTime calls at the table use case. The illustrations are educational and they connect the product’s purpose to its name using the degrees symbol: 55°, 66°, and 88°. I also adore the subtle dots on the sides of each phone indicating what the cameras will be pointing at for each orientation. Again, clever details abound.


I highly recommend keeping an eye on CW&T, and I can’t wait to back the Pencil Type-C on Kickstarter.

Box CW&T
January 9, 2025

Streetline—My First Book!

Streetline book 3d render
Rendered in Blender

I designed and produced a book of my street photography and added a Store page to this website. I’m kvelling that people are already placing orders. Buy a copy for yourself! It’s only $24 including shipping anywhere to the United States.

Figma screenshot

I spent weeks agonizing over every detail. Grids, typefaces, photos, etc. Fortunately Mixam has a patient support team that was helpful with all of my questions. I learned so much and I already have ideas and improvements for my next book coming later this year.

Book Design Photography
December 11, 2024

People First AI

Albert Shum writing about AI on LinkedIn:

My hypothesis is that consumer AI experiences fall short because it’s lonely out there. There isn’t a way to engage, connect, build and learn from, collaborate and build on with other people.

Albert previously writes about the visual consistency of popular AI chat apps from Microsoft, Google, Anthropic, and OpenAI. During the race to build the most popular AI client in the last two years, interface designs appear to have converged aside from the occasional differentiating feature. I give Anthropic points here for having the gumption to use a serif typeface and opinionated set of colors.

I assume this consistency will live on for the foreseeable future until companies truly begin to reimmagine software with an AI foundation. I think of it like baking a cake. Right now all software is a finished cake, and we are simply adding AI as frosting. Who will bake a new cake with AI as flour?

People First AI shouldn’t just be a set of features, it’s a way to create shared contexts for learning, enable creative expression while maintaining safety, build trust through transparency, and foster genuine connections rather than just transactions. The next wave of AI needs to move beyond individual chat interfaces to create richer spaces for human connection and growth. These are just some thought starters for a People First AI, ensuring people are at the heart of what we do, why we do it, and how we do it.

It’s hard to believe that the most exciting breakthrough since the GUI (or maybe iPhone OS) has virtually the same interface that Matthew Broderick uses in Wargames, a movie from 1983. However, is there an allegory for what Albert is suggesting? We have collaborative text editors, presentation tools, and spreadsheets, but they are certianly not rich spaces” and AI will not change that.

Is Meta going to integrate AI into the Quest and Horizon Workrooms? The answer is definitely yes, but I still wonder what the actual product is. A virtual whiteboard that has an AI observer to chime in like a professor with exerptise and guidance sounds compelling. I recall as a CS student I would sit in an alcove with classmates working on problem sets and feeling stumped (understatement). An AI observer that could guide us through challenges would have been most welcome. To help that young, stressed version of Dave Klein I can imagine Google integrating Gemini into Jamboard to accompany our work with notes, drawings, and helpful corrections on a TV that acts as a whiteboard. This would be fun to prototype!

Should Google revisit Wave for a richer space for human connection?” Probably not, but attaching a single-player mode chat interface to Google web apps is not the long-term solution Albert is imagining. And yes, I thoroughly enjoy talking about Wave.

AI
November 21, 2024

Take the Task Offline

Elizabeth Laraki writing about designing Gmail in its earliest days:

Kevin refined his explorations to prioritize the newest unread message while also providing context from the other messages in the conversation. But nothing felt quite right. So he took the task offline. He grabbed a pile of index cards and tried grouping, ordering, and stacking them in different ways. Doing this gave Kevin the idea to treat each email as a card and to stack the messages in a pile. He ordered the stack oldest to newest, so the most recent message was on top. He then pulled out each card to reveal peeks of earlier messages, providing context of the whole conversation at-a-glance.

I love this story. As designers we should not only be creative when designing complex interactions, but we should also experiment with creative design methods. Elizabeth’s example is perfect. Get away from the mouse and keyboard. Stop dragging rectangles around. Try to approach problems in more tangible, unexpected ways.

This reminds me of a story from Creative Selection, a book written by Ken Koceinda who designed and built the iPhone’s initial keyboard. During a meeting to discuss the iPhone’s software, Imran Chaudhri, a designer who worked on many Apple products in addition to co-founding Humane, placed a piece of paper on a table. He pressed a finger down on the paper and moved it around. He pointed out how humans expect the paper’s movement to be perfectly smooth, and it was crucial for the iPhone to feel as responsive as physically moving the paper. If moving an element on a touchscreen had any delays or jumps, the illusion of physicality would break and the product would feel subpar.

I’m setting a goal right now to incorporate paper in an upcoming design project.

Design Gmail iPhone
July 5, 2024

The Art of Noise Exhibit

Art of Noise museum exhibit entrance

I recently visited the San Francisco Museum of Modern Art to see the Art of Noise exhibit and was stunned. I felt nostalgic browsing the audio products I recall seeing and enjoying years ago, and inspired by the gorgeous pieces I was unfamiliar with. Yes, pieces. Many products are worthy of being in a museum (or my living room).

After leaving I couldn’t stop thinking about the exhibit and ended up returning a day later to do another lap. Below are a few of my favorite pieces and experiences.


Listening room

Before approaching the main part of the exhibit area you can sit down and recline in Devon Turnbull’s HiFi Pursuit Listening Room dream No. 2 and take in its exceptionally high-fidelity music” played on a custom-built sound system.” The speakers are gigantic and brutalist, and the sound is soul-piercing.

Art of Noise museum exhibit large audio room

Art of Noise museum exhibit large audio room

Posters

In the first room there are approximately 400 posters for albums, concerts, and advertisements. Note the comfortable looking seating and intense blues used throughout the space.

Art of Noise museum exhibit poster room

I instantly recognized a few Swiss-designed posters from my collection of graphic design books that I pour over when in need of inspiration. Two of my favorites are Gottlieb Soland’s Grammo-grafik from 1957, and Josef Müller-Brockmann’s Otto Klemperer reza anda: Ludwig Van Beehthoven from 1955.

Art of Noise museum exhibit swiss design poster

I’m a strong proponent for making posters. My new mantra at work is does this project need a poster?”

Sound installation

After passing through the poster room, one approaches the Teengage Engineering-designed sound installation. Large, blue, plush seats beckon visitors to sit and experiment with the equipment. The lack of clear seating boundaries encourages people to improvise through kneeling, lying down, or sitting to face in any direction. It feels more like a playground than a museum.

Art of Noise museum exhibit seating

Several listening stations are arranged amongst the seats where one can don a pair of headphones, press buttons to manipulate music, and stare at a miniature television.

Art of Noise museum exhibit listening area hardware

After enjoying the tactile feel and click sounds of the station’s buttons I noticed that Teenage Engineering printed its name on the headphones. What a lovely touch.

Art of Noise museum exhibit listening area headphones headphones

Products

Immediately following the sound installation is a table littered with beautiful, aging music playing devices. Centrally placed is an iPod from 2001 along with a few iPod Shuffles and a single iPod Nano. This struck me as an odd decision considering their recency. They stole the focus from a variety of Braun products, the original Sony Walkman, the original Sony Discman, and a rare sighting of a Sony MiniDisc player.

Art of Noise museum exhibit iPod

The iPod represents a fundamental shift in music listening habits. At the time one could build mp3 playlists and listen to them on a computer. For on the go enjoyment one could burn CDs and carry around a portable CD player. The iPod (and possibly the Creative Nomad Jukebox with its large harddrive) permanently changed habits for a generation. Note: The fastest way to determine if an iPod is a first or second generation model is to look at the 4 buttons surrounding the scroll wheel. If they are separate it’s a first or second generation. If they are integrated it’s at least a fourth generation. The third generation had four buttons horizontally placed above the wheel which was a mistake in my opinion.

Art of Noise museum exhibit orange stereo

Teenage Engineering, the firm that designed this exhibit, makes highly functional, beautiful products like the OB-4 Bluetooth speaker which is offered in this striking orange. At $549 it’s a tough sell, but I assume I will purchase a white model eventually.

Art of Noise museum exhibit harmon kardon speakers headphones

The Harmon Kardon SoundSticks and iSub are the result of a partnership with Apple in 2000. Jony Ive designed the iSub (obviously?) and one is currently in MoMA’s collection in New York City. I definitely need to add these to my collection. After two revisions over the past two decades, the fourth iteration was recently launched. I’m relieved to report that Harmon Kardon maintained the SoundSticks’ beauty and elegance with this new design.

Art of Noise museum exhibit bang & olufsen stereo

One thing we have lost with Sonos, the Apple TV, and other modern audio/video products is modularity. Stereo companies once strived to design beautiful, dedicated hardware. Each piece had its own purpose, and one could expand a system’s capabilities by adding a new item to the stack. Now this is sadly relegated to ultra high-end systems. The Bang & Olufson Beograd 5500 system is a statement, especially when placed next to its master control panel.”

Art of Noise museum exhibit Braun LE1 headphones

It’s difficult to believe the Braun LE1 was released in 1960. It would feel at home in a living room today. The design of the more recent LE01 is playful and reminiscent of the original model’s design, but certainly lacking in height. Perhaps I will purchase an LE01 the day I open a design studio.

DJ station

I want to be very clear about something: I know nothing about DJs, DJ equipment, or what being a DJ entails. In fact, every time I try to organize music at a party, I am ridiculed for my taste (even during my own birthday dinner). However, if I were to be come a DJ during a midlife crisis, I would definitely want equipment designed by Teenage Engineering.

Art of Noise museum exhibit DJ station

I love Teenage Engineering’s versatility. Their designs range from tiny audio products like the TP-7 field recorder all the way to table-sized products like this setup. Their products also share a design language and color palette of white, black, and grey with orange accents. Even from a distance I can sense how it would feel to press each button.

Art of Noise museum exhibit DJ station

Choir

After viewing all of the products one can venture to the final room which consists of a bench, a table, and Teenage Engineering’s Choir. A series of wooden dolls play choral classics and each has a dedicated light that shines downward when it plays a sound. I appreciate the unique design of each doll and how they are based on cultures and characters from across the world,” but I left wondering why. Why was Teenage Engineering compelled to build this? I would understand if they were limited to this single exhibit, but the set is available to purchase for approximately $2,000.

Oh. Wait. The Choir can be paired with the OP-1 which can be used to conduct an orchestra.”

Art of Noise museum exhibit choir

I am particularly proud of this shot with the ghostly appearance of a man floating past the table.

Wrapping up

I usually look suspiciously at people who walk around galleries photographing paintings. Do they actually look at those photos in the future? How can one possibly capture the beauty of a painting with a cell phone (or any camera)? The photos are crooked and poorly lit. Put your phone down and enjoy the pieces!

However, I felt compelled to photograph this exhibit because it was not a typical museum experience. There were colors, sounds, and hardware. Funky, nostalgic, unique hardware. The listening rooms were also worth capturing with perfectly lit speakers, and exhibitors who were endlessly photogenic while enjoying the music.

I highly recommend swinging by MoMA to see this exhibit. You have until August 18! I also hope to see more exhibits that focus on products as art in the future.

MoMA Exhibit iPod Music Poster Stereo
July 2, 2024

AI-Powered Thoughts

Thot home, new input, and response

One thing that I believe is missing from all of the AI discourse, product launches, and funding announcements is how AI can help augment the small, mundane tasks users perform many times per day on phones and computers. We have seen AI tackle complex, time-consuming tasks like drafting emails and editing spreadsheets, but what about quick, repeatable tasks?

Consider two categories of tasks: primary and secondary. Writing an email can be a prolonged, focused task where users experiment with words, sentence structure, and tone. Users cannot complete the task of sending an email if there are any distractions. This a primary task because it requires a high cognitive load for success.

Capturing an idea, webpage, or to-do needs just a couple clicks or a few seconds of messy typing. The cognitive load is low enough for the task to exist in one’s periphery as a secondary task. (Note: I’ve been thinking about primary and secondary tasks since 2005 when I published a paper about designing peripheral displays.)

Companies investing in AI are, in my opinion, focusing on primary (and artistic) tasks. When Apple announced Apple Intelligence the topics included writing tools, AI-generated emojis, Image Playground, Siri updates, notifications, etc. What’s missing is innovation in the secondary task space. I have a proposal for how AI can help.


The Prompt

Recently I had an epiphany: I want to walk around with a tiny tape recorder like a powerful businessperson in a 1990s movie who records every thought for an assistant to later transcribe, categorize, and follow up on. Got an idea? Raise the tape recorder, press record, talk, press stop, and put it back in my pocket. Now replace the tape recorder with an app and a keyboard.

The goal is to write a prompt that takes an input and asks an LLM to automatically categorize, organize, and expand the input. For example, if I bookmark a webpage a summary should be generated. If I make a to-do to practice a presentation, a list of helpful ways to prepare should be included. If I jot down a thought like I wonder if we should try reducing Jessica’s afternoon nap time to 1 hour instead of 1.5-2 hours,” relevant resources should be gathered.

The prompt could look like this:

If you detect a link in $input:
- Return a summary of the linked page with a maximum of 280 characters in a section called "Summary"
- Return a list of 3 themes/categories in a section called “Tags”

If you detect a task in $input:
- Return a list of 3 themes/categories in a section called “Tags” and one of them must be “Task”
- Return the text of the task with an attempt at fixing typos and grammar
- If the date and or time for the task are provided, return “Due: ” + the date and time for the task
- Provide any additional information that can be helpful for me to complete the task in a section called “Things to consider”

If you detect a quote in $input:
- Return the text of the quote
- Return a list of 3 themes/categories in a section called “Tags” and one of them must be “Quote”

If you detect words like “wonder” or “think” or “idea” in $input:
- Return the text of the input with repaired typos and grammar
- Return a list of 3 themes/categories in a section called “Tags” including “Idea”
- Include any helpful, relevant links from Wikipedia in a section called “Links”

For themes/categories try to use only 1 word. Not a requirement but try hard
Include any helpful, relevant links from Wikipedia in a section called “Links”

Experiments

Imagine you have time to catch up on some bookmarked articles. As you scan the list of links you subconsciously try to recall the article the link represents by parsing any words in its URL. Now imagine scanning a list of links and each has a 1-2 sentence summary.

Input 1: https://www.fastcompany.com/90975882/meet-dot-an-ai-companion-designed-by-an-apple-alum-here-to-help-you-live-your-best-life

Response 1:

  • Summary: Dot, an AI companion designed by an Apple alum, assists users in enhancing their lives by remembering and analyzing conversations, offering proactive suggestions, and storing personal data like recipes and notes. It aims to be a long-term companion focused on self-improvement rather than just task management.
  • Tags: AI, Innovation, Technology.

Imagine you have a presentation approaching and your to-do starts and ends with practice.” Now imagine you are reminded to time yourself, seek feedback, and clearly articulate. These are helpful tips for everyone.

Input 2: Practice my presentation.

Response 2:

  • Task: Practice my presentation.
  • Tags: Task, Presentation, Preparation
  • Things to consider:
    • Review the content and structure of the presentation to ensure clarity and coherence.
    • Practice delivering the presentation multiple times to become familiar with the material and improve delivery.
    • Time yourself to ensure you stay within the allotted time.
    • Seek feedback from a peer or mentor to identify areas for improvement.
    • Focus on clear articulation, appropriate pacing, and engaging with your audience.

Imagine you are having a conversation with your spouse about your toddler’s sleep habits, and you want to jot down the idea to reduce her afternoon nap. You go to store the idea and in response are a series of helpful links.

Input 3: I wonder if we should try reducing Jessica’s afternoon nap time to 1 hour instead of 1.5-2 hours.

Response 3:

  • Idea: I wonder if we should try reducing Jessica’s afternoon nap time to 1 hour instead of 1.5-2 hours.
  • Tags: Idea, Parenting, Sleep
  • Things to consider:
    • Monitor Jessica’s behavior and energy levels after the change.
    • Assess if the new nap duration improves her nighttime sleep.
    • Assess if the new nap duration improves her nighttime sleep.
  • Links:

These experiments successfully demonstrate that AI can boost the links I bookmark, thought I have, and to-dos I jot down by providing a few considerations and links.

Note: Each prompt used ChatGPT 4o.

Design

If I were to design an app that helps people remember ideas, save links, and track to-dos, the design would lean towards simplicity and clarity.

Thot home

The home screen can be a list tags generated by the LLM, and a tap on a tag drills in to reveal all items associated with the selected tag. Users can customize a tag’s icon and color, but one can hope that the LLM can also determine which SF Symbol is ideal for each tag. The plus button is the primary action and it launches create mode.

Thot create mode

Similar to the ChatGPT app, the focus when creating an item is the blinking cursor. Hidden behind a [+] button can be additional options like uploading a file, uploading a photo, recording audio, or taking a new photo with the camera.

Sending a message to the LLM leverages the same chat paradigm that every AI company is currently using. I truly believe that chat is not the future of interacting with AI. We are in the command-line interface era of AI, and someone will invent the GUI of AI soon.

Thot response

After the user taps the submit button, the prompt is executed and a response arrives. Of course there is an intermediary step since the LLM requires a few seconds to ponder, but I’m skipping that step here. The response, as demonstrated in the experiment above, includes the category (“Idea” for example), tags, things to consider, and helpful links. The user can choose to save the item here with a tap on the Add” button, or they can augment the item by continuing to message the LLM.

Thot item

After an item is created the user can archive or delete it along with a few more advanced options hidden behind a More” button. The goal is to allow the user to edit the item by removing or adding additional information. Perhaps editing simply reveals the keyboard, or edit mode can be similar to create mode by launching the chat interface again.

Start with the problem

AI is infiltrating every piece of software at the OS level, apps, and conversations. When considering what to build it’s so easy to start with AI!” and work backwards towards a problem. As Steve Jobs famously said:

I’ve always found is that you’ve got to start with the customer experience and work backwards to the technology. You can’t start with the technology and try to figure out where you’re going to try to sell it.

Companies and developers need to consider how to bring tangible benefits to customers using AI. Don’t just imagine cool things AI can do. Help me save time. Help me be more efficient. Help me get away from the computer so I can hang out with my kids. Writing notes, tracking to-dos, and reading documents are activities we all do on our phones and computers. Let’s start experimenting with enhancing them with AI. They might be boring topics, but people will love it.

AI Apps