The Dynamic Island - Amazing design details! Overview

 

Amazing design details!

The dynamic island that apple introduced recently is chock full of interesting design details in this video i'll break down these details how they work and show an interactive prototype i made that strives to emulate all these details too hi i'm wayne welcome to my channel let's unpack the dynamic island for me the reason that the dynamic island was so striking was because it kind of felt like a reversal punch outs and notches in mobile devices feel more like problems rather than opportunities how you frame that from the start can shape your entire design approach when you frame something as a problem sometimes you're just trying to overcome it resolve it make it kind of invisible in the experience the dynamic island subverts that it draws your eye it's a centerpiece for your attention and your interaction they decided that this was going to be an opportunity rather than a problem when designing for it thus the immediate reaction of damn that's pretty clever as they showed more even in rapid fire fashion you could see a lot of details in this implementation it's highly configurable in its sizing and based on the size a lot of elements react differently and dynamically i analyzed it by scrubbing through the video and also i reverse engineered a prototype so i could better understand how it all works here's what i found first let's focus on the status bar this is where a lot of interesting details are happening the clock and stats bar icons adapt based on the start and end dimensions of the dynamic island for the clock generally if there's space for it it's mostly centered in the available space with a bit of optical adjustment for the screen's rounded corner on the left side if there's room for it in the end state it'll shift over reacting to the width of the dynamic island if there isn't room for it in the end state it'll drop into the background immediately weirdly it seems to shift inwards when it's dropping backwards in most examples but in one example with the music player it gets pushed outwards not sure what the logic is here but it must be intentional i just don't quite understand it let's move over to the right side towards the status bar icons there are a few variations here based on the island width first when it's only a little wider than default it keeps all the icons visible but shifts them over a little bit this creates just enough room to show about one icon on either side like the lock icon when you're unlocking the screen if you get wider than that it starts to remove icons interestingly the wi-fi icon goes first then the cell icon and then finally the battery however if the dynamic island is going to be so wide that it would obscure all these icons in its end state they'll drop them all out of view at the same time rather than staggering how they drop out of you i want to put extra emphasis on the idea that they are dropping out of you rather than just vanishing all together let's dig into this effect i see three effects in play here first of all is opacity this is an obvious one to remove it from visibility probably the first thing most designers would do the other two effects are scaling and blurring these are why i think this is interesting because i think these are part of the same idea you scale it down to simulate moving it further back and blur it to simulate the idea of depth of field from the point of view of a camera lens my theory for this is based on the physical constraints of what the dynamic island is the dynamic island lives in the foreground it's based on the actual screen cutout so nothing can go in front of it if you want to create extra contrast using depth it means that the dynamic island is a fixed point and other elements are going to have to move further back other elements basically have to get out of the way as the dynamic island expands and takes up that feel estate on the screen all this stuff happens really really quickly it's easy to miss but i really love this detail next let's talk about the overall scale and animation of that scaling the dynamic island has a bit of spring to its motion but it's not just the outer container it's also tied to the contents if you protect for this you'll want to anchor your contents to the outside edges i've set up the prototype to do this with some test elements here anchoring the elements to the outside edge with some knowledge of how origami studio works you can put your own designs into this prototype vial and have that stuff react accordingly the last detail is about the shadows that the dynamic gun casts multiple shadows in a way first it has a normal drop shadow but second it has a drop blur it's a tough detail to replicate dynamically it was tricky to do in origami studio and impossible in figma to do dynamically there's a blur occurring around the dynamic island with a gradual fall off here's my theory around this if you were displaying a modal you sometimes darken or blur the whole background where you're just able to see a little bit of it around the edge that helps exaggerate the idea of it being in the foreground and directs your attention to the foreground element however with a dynamic island you still see a lot of the screen users may be referencing the screen information so you want to avoid obscuring all of that i think they're trying to split the difference here there's just a hint of the effect to pay homage to the idea that there is a depth of field but not so much that's going to impact the usability of the rest of the screen okay so those are all the details that i've found now let's switch over to talk about the prototype and how i tried to replicate those details inside there here's the prototype that i made within origami studio to try and emulate all of these details okay so first of all you can toggle the state of the dynamic island by clicking up here or you can also use the toggle in this debug interface which can also collapse as well if you want to get out of the way when you're doing some testing you can also adjust the size of this dynamic island with the height and the width completely freely when it's in that open state or you can just drop that down so you can see how it's actually going to properly animate to that target state as well you'll notice a couple of notches on this with one in particular that is just a little guide to show you how some break points of how things react when certain icons are dropping out of you or when all the icons are going to go away here's a fun little detail the width of the dynamic island has to adjust based on the radius of the screen itself it cannot be full width at this minimum height because otherwise it would interfere with the actual rounded corners of the screen itself so it expands as it goes downwards or rather as it grows in height and then it reaches a maximum width right around there and then you can extend that however you want so you don't have to worry about that the prototype will just take care of that if you're on device and don't have an iphone 14 pro you can also adjust it so the screen offsets below where the notch would be let me show you with uh or comes to you can simulate that a little bit so here even in this simulation the notch is completely blocking or really obscuring that dynamic island interfering so you can just toggle this it's going to shift downwards and now you can still mess with it in here or on your non iphone 14 pro device too also there is a little bit of a toggle here so you can also see where the non-usable cutout is for the actual sensor array one more detail that i want to make sure is being shared here is it also is applying the right drop shadow and the background blur to the dynamic island now that is only going to show up on the mac version of this unfortunately origami studios blur effect isn't supported on devices uh so it's just not going to show up it's not going to cause any errors it just will look nice and crisp unfortunately under that area but that's it if you do want to just open this file in norgrim studio and know how to use it you're going to be able to configure a whole lot more and also drop your own designs into it and do some more testing so hopefully you can have fun with that and there's the prototype for all the designers out there i hope this is interesting to you and i hope better understanding this is going to help better inform how you might design around this feature okay let's wrap this up first of all thank you for watching i had a lot of fun scrubbing through this video analyzing it unpacking it and also creating that prototype to better understand everything the reason i did this is because i think that when we see really good design out there it's healthy to recognize it understand it and therefore it can help inspire us and improve all of our work as well for a couple more details on this prototype if you want to just try it out without any knowledge of origami studio all you have to do is download the origami studio app on your mac or origami live app on your ios device both are free links are in the description if you want to use this to try and integrate your designs into it good news is i just finished a tutorial series on origami studio you can find the playlist right here if you like this video i'd really appreciate a like subscribe all that good stuff uh if you're interested in any other videos from the point of view of a designer uh which is me so thank you for watching and that's it hope to see you again soon take care