Had some free time during a long mandatory training session at work and started perusing Apple’s macOS Sketch file with all the components that go into making a desktop app. I love imagining how components come together to form something useful 🤓
The training session I was enduring had minimum time limits. For someone who reads fast and watches video at 2x I decided it would be fun to throw together a desktop version of Facebook between modules — the most BORING version possible with nothing fancy, just standard macOS components.
Disclaimer: This is just a fun exercise and a way for me to play with someone else’s building blocks. A lot goes in to how and why Facebook is the way it is today and teams of people are sweating the details.
When you boil Facebook down it’s not that complicated. There are A LOT of interactions, but everything can pretty easily be assigned a component that’s super familiar to people. Below are basic replicas of News Feed, the Stories viewer and Messenger. The sidebar acts as a great home for most of the ever-growing navigation.
The composer dropdown can show all the possible things a person can create, along with a clean interface for uploading photos and writing text posts. Sorta feels like sending an email 💌 Unseen notifications and messages could persist in the right collapsable sidebar.
Things get super fun in Settings / Preferences. Facebook settings are notoriously complicated as the product has grown over the years. App settings have been an indicator for me how much a developer cares about their product and [cmd+,] is one of the first key commands I use after installing a new app. Most of Facebook’s settings can be organized well using standard layouts and components. It’s surprisingly clear how they all feel, probably because long-time Mac users are so familiar with these interactions.
Finally, here’s the basic interface, the thing we all end up scrolling most of the day. I like how boring it looks, how it puts more emphasis on content wile making it feel like it’s easier to navigate.
Takeaways
- Multi-color iconography make an interface look too busy. The monochromatic and tint color strategy with macOS helps signify where interaction is possible while receding into background.
- The density of macOS is something I didn’t realize I valued so much when compared to the latest version of Facebook where things seem way more spaced out than previous iterations.
- Component libraries are kinda like alphabets, once you learn letters and grammar you can write great prose. Stability is key so people aren’t constantly having to re-learn fundamentals.