Gregory's Serverš§µ Well well well, if it isnāt another design critique thread! This week, weāre taking a look at the Quirks and Featuresā¢ of the Apple Journal app.
Lickability
22 comments
Lickability
There are also a few loose sheets throughout and even those are super polished. For instance, hereās a prompt for setting up a journaling schedule. That full-bleed image at the top has been internationalized with four variants: light and dark variants for both LTR and RTL.
Lickability
Back to Journal, letās start with the editor. Weāve seen this pattern a lot ā a keyboard toolbar that summons other sheets. This is an elegant implementation: the toolbar stretches to the bottom and the keyboard sits on top.
Lickability
When a sheet appears, it swaps place with the keyboard. The toolbar never changes position; the sheets are always the same size as the keyboard. Compare this to the X/Twitter composer, where the Add Media gallery is full-screened. Use modals sparingly!
Lickability
Speaking of things youāve seen before, take a look at what happens when you remove items from the attachment grid. Itās fairly similar to what youād see on X, but they animate between layouts here, which is always a nice touch.
Lickability
You can record audio and attach them to entries like this. The pulse animation doesnāt respond to amplitude or anything fun, but at least it gets turned off if the Reduce Motion accessibility setting is enabled!
Lickability
One last thing here: Journal never asks for full photo library permissions, it just uses an inline system photo picker. And when an app uses it, the system provides a little animation to let you know the app doesnāt have full access to your library: https://developer.apple.com/videos/play/wwdc2023/10107/
Lickability
Take a look at the date picker in the editor view, this is so weird: ā¢ Why does it appear in a pseudo-action sheet?
Lickability
While weāre talking about weirdness, letās read the nav bar to absolute filth. Ahem: ā¢ Why can you preemptively bookmark an entry? Is the expectation that youāll write an entry, think āthis one is a banger,ā and bookmark before you even finish it?
Lickability
Hereās our proposal: Get rid of the bookmark button. Move discard to its rightful place, as a cancel button on the leading edge. The nav title is already the date, so we can make this a button to change the date. Weāll give that a slight background as a hint to it being editable.
Lickability
Alright, enough about the editor. Letās get to that gorgeous, lickable timeline. We actually got an early look back at WWDC of an earlier timeline concept. Which version do you prefer? š¤
Lickability
The timeline is this really nice card-style interface with a branded gradient in the background. In light mode, itās quite subtle. In dark mode, itās really š ±ļøoppinā. Very good gradient, 9/10.
Lickability
For the longest time, Appleās guidance was to avoid Android-y floating action buttons (FABs) like the plague. But it seems theyāre slowly coming around to them? We love to see it.
Lickability
Taking a closer look at that footer, youāll notice the variable blur effect. This has been showing up in a TON of first-party apps. Achieving this effect is quite difficult. Thereās nothing in Figma that lets you do this and the API to do this is private (for now) š
Lickability
Some people mimic this by making a blurred overlay and gradient masking it, but that creates a nasty halo effect when you dim the opacity of a blur layer. Itās not worth it, donāt do it. (By the way, we created this graphic using
Lickability
Hereās another common pattern thatās highly polished here: the media grid. Youād normally see this in a social media timeline, but we love the nested corner radius the grid items, how inner corners are sharper, and how items delightfully spring in and out of the light box view.
Lickability
When you scroll in the timeline, thereās some interesting behavior with the nav bar title ā it collapses to the leading edge rather than the center. The stock nav bar, with centered text and trailing buttons, looks a bit lopsided; this is a nice fix!
Lickability
Next: card swipe actions. This rounded style is hard to replicate with public APIs, especially SwiftUI List. Most people give up and write a custom implementation, which is a shame since you relinquish a lot of accessibility features when you do that.
Lickability
Apple uses a few private swipe action stylesāāācircular in Mail, or round-rects in Weather. Seb Vidal is taking one for the team by attempting to get his swizzled implementation through App Review. Godspeed, soldier š«”
Lickability
Thanks for following along! Hope you enjoyed this peek into our own design journal. šš
CausticMango
@lickability You may love to see it, but I deeply dislike them. Itās disappointing to see Apple start using them, too. |
In case youāre not familiar, the core app flow is quite simple. There are three main screens:
1. The timeline, where your entries are sorted reverse chronologically. This is where you start.
2. Journal suggestions (after you tap the floating Add button)
3. Edit entry