26 June 2018 / 8 minute watch
Sketching an iPhone Lock Screen
Apple packed a bunch of complexity into the iPhone lock screen UI. Let's break it down into a system sketch to better understand it—and how to think about describing product behavior.
Sketches referenced in this tutorial:
iPhone lock screen (work in progress)
iPhone lock screen (final version)
You’re probably familiar with the iPhone lock screen—it shows up when you press a button or raise the phone. When it’s active, you can see notifications and widgets, access the camera, or unlock/authenticate the phone. Pretty simple stuff, right?
As it turns out, Apple packed a bunch of complexity into this UI—little things that aren’t immediately apparent when you first think about how the lock screen works.
This video tutorial breaks down the lock screen into a system sketch. It’s a quick introduction to sketching out behavior—and how it can help you think about your product’s design.