<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/">
	<channel>
		<title>Start Designing for Dynamic Island and Live Activities | Infinum</title>
		<atom:link href="https://infinum.com/blog/start-designing-for-dynamic-island-and-live-activities/feed/" rel="self" type="application/rss+xml" />
		<link>https://infinum.com/blog/start-designing-for-dynamic-island-and-live-activities/</link>
		<description>Building digital products</description>
		<lastBuildDate>Thu, 23 Apr 2026 13:14:19 +0000</lastBuildDate>
		<sy:updatePeriod>hourly</sy:updatePeriod>
		<sy:updateFrequency>1</sy:updateFrequency>

					<item>
				<image>
					<url>28092https://infinum.com/uploads/2022/09/blogpost-dynamic-islands.webp</url>
				</image>
				<title>Start Designing for Dynamic Island and Live Activities</title>
				<link>https://infinum.com/blog/start-designing-for-dynamic-island-and-live-activities/</link>
				<pubDate>Wed, 21 Sep 2022 10:15:55 +0000</pubDate>
				<dc:creator>Kata Juras</dc:creator>
				<guid isPermaLink="false">https://infinum.com/?p=28092</guid>
				<description>
					<![CDATA[<p>Whatever your opinion about Apple's Dynamic Island may be, it is a UX renaissance in the making and designers need to take it into account.</p>
<p>The post <a href="https://infinum.com/blog/start-designing-for-dynamic-island-and-live-activities/">Start Designing for Dynamic Island and Live Activities</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</description>
				<content:encoded>
					<![CDATA[<div
	class="wrapper"
	data-id="es-200"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-92">
	</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-95"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-93">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-94'
	>
	With the September Apple event behind us, there is only one thing everyone is talking about. The Dynamic Island.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-98"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-96">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-97'
	>
	By now, you have probably absorbed <a href="https://uxdesign.cc/is-the-iphone-14s-new-dynamic-island-plain-stupid-or-the-next-revolutionary-ux-pattern-e86f96880698" target="_blank" rel="noreferrer noopener">the multitude of articles outlining the pros &amp; cons</a> and marveled at the animations. Some love it, others don’t. Whatever your opinion about the Dynamic Island, it’s a UX renaissance in the making. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-101"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-99">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-100'
	>
	Making the notch a feature, not a bug</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-104"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-102">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-103'
	>
	So far, phone manufacturers have tried hiding the notch, the camera housing which sits dead center at the top of the screen. A simple Google search reveals hundreds of articles and apps suggesting how to make it less intrusive. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-107"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-105">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-106'
	>
	Leave it to Apple to swim against the tide! </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-109"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-highlighted-text">
	<p	class='typography typography--size-24-text js-typography block-highlighted-text__typography'
	data-id='es-108'
	>
	With the Dynamic Island, Apple embraced the notch and made it a focal point by adding useful functionality to it. By doing so, they are blending the borders between hardware and software. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-112"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-110">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-111'
	>
	Why is that such a big deal, you ask? Well, first of all, Apple saw the otherwise useless space as room to improve user experience. Secondly, they made the Dynamic Island work by using beautiful animations and seamless transitions. These two reasons alone make for a truly delightful experience, but wait, there’s more!</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-115"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-113">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-114'
	>
	<strong>What can you do with the Dynamic Island? </strong></h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-117"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-highlighted-text">
	<p	class='typography typography--size-24-text js-typography block-highlighted-text__typography'
	data-id='es-116'
	>
	The Dynamic Island comes in four different sizes and shapes: a compact leading view, a compact trailing view, a minimal view, and an expanded view.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-120"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-118">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-119'
	>
	Each of these views provides users with important information at a glance. The expanded view allows them to see more detail and perform different actions depending on the app used.&nbsp;</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-123"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-121">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-122'
	>
	Speaking of apps, the Dynamic Island displays live information from up to two currently used apps – the so-called Live activities. It could be a timer counting down, Maps instructing you that your next right turn is in 200 meters, the charging status of your battery, connectivity with your headphones, or how long will your Uber ride take to arrive.&nbsp;</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-126"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-124">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-125'
	>
	The information is displayed for up to eight hours or until your Live activity ends, similarly to the behavior of <a href="https://onesignal.com/blog/using-ios-16-live-activities/" target="_blank" rel="noreferrer noopener">Live Activities on the lock screen</a>. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-129"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-127">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-128'
	>
	<strong>Designing for the Dynamic Island and Live activities</strong></h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-131"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-highlighted-text">
	<p	class='typography typography--size-24-text js-typography block-highlighted-text__typography'
	data-id='es-130'
	>
	Live activities will be available on all iPhones with iOS 16 installed, while the Dynamic Island is available only for iPhones with the pill-shaped notch. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-134"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-132">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-133'
	>
	This means that even though you might not be designing for the latest iPhones, you should cover the Live activities as many users will likely use them. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-137"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-135">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-136'
	>
	Designing for the Dynamic Island means designing for all possible views, from minimal to expanded, because there are three different ways <a href="https://infinum.com/blog/live-activities-in-ios-apps/">Live Activities</a> can be displayed on the Dynamic Island: </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-140"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-138">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-139'
	>
	<li>a leading and trailing compact view for single activities</li><li>a minimal view, attached to or detached from the TrueDepth camera, visible when there are two active activities</li><li>an expanded view on a long press</li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-143"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-141">
	<h3	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-142'
	>
	Minimal and compact view</h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-146"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-144"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-145">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2022/09/Visual-1-1400x700.webp				media='(max-width: 699px)'
				type=image/webp								height="700"
												width="1400"
				 />
												<img
					src="https://infinum.com/uploads/2022/09/Visual-1.webp"
					class="image__img block-media__image-img"
					alt=""
										height="960"
															width="1920"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-148"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-highlighted-text">
	<p	class='typography typography--size-24-text js-typography block-highlighted-text__typography'
	data-id='es-147'
	>
	The simplest views are compact and minimal view. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-151"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-149">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-150'
	>
	The compact view is divided between a compact leading view on the left-hand side and a compact trailing view on the right-hand side of the Dynamic Island. These views are reserved for the most important live information from the app currently in use, e.g., the time until food is delivered, confirmation of a successful wireless earbuds connection, or a notice of call duration.&nbsp;</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-154"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-152">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-153'
	>
	Use both sides of the compact view to get a centered shape, but keep in mind that in the case of two live activities, the iOS system could place the other one in Dynamic Island’s minimal view. This means you need to design for compact leading and minimal views.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-157"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-155">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-156'
	>
	The Dynamic Island resizes horizontally to fit all your content, but be mindful of placing really detailed visuals in compact and minimal views as they would not be readable.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-160"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-158">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-159'
	>
	<li>The height of the Dynamic Island is 36 px.&nbsp;</li><li>Your icons and images should be sized at 24 px with a bounding box.&nbsp;</li><li>Text size should be 15pt with 22 line height.</li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-163"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-161">
	<h3	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-162'
	>
	Expanded view</h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-166"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-164"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-165">
	<picture class="image__picture block-media__image-picture">
								
			<source
				srcset=https://infinum.com/uploads/2022/09/Visual-2-1400x700.webp				media='(max-width: 699px)'
				type=image/webp								height="700"
												width="1400"
				 />
												<img
					src="https://infinum.com/uploads/2022/09/Visual-2.webp"
					class="image__img block-media__image-img"
					alt=""
										height="960"
															width="1920"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-168"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-highlighted-text">
	<p	class='typography typography--size-24-text js-typography block-highlighted-text__typography'
	data-id='es-167'
	>
	Expanded view appears when users press and hold the compact or minimal view or when there is an update in the Live activity. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-171"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-169">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-170'
	>
	This view also appears when a live activity requires a user’s action, such as an incoming call or a FaceID authentication. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-174"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-172">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-173'
	>
	<li>The height of the extended view in the Dynamic Island can’t exceed 144 points (≈192 px)</li><li>The system may truncate a <a href="https://infinum.com/blog/live-activities-in-ios-apps/">Live Activity</a> on the Lock Screen if its height exceeds 160 points (≈213 px).</li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-177"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-175">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-176'
	>
	The expanded view is useful for displaying more detailed information. You might see sports apps displaying the national team’s country flag along with the match score. Or a music app showcasing album covers, a song bar, and controls to switch or pause songs. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-180"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-178">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-179'
	>
	The possibilities are endless but don’t go overboard. The Dynamic Island should only be used for important information and the most crucial controls. Leave the other parts in the app. </p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-183"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-181">
	<h3	class='typography typography--size-36-text js-typography block-heading__heading'
	data-id='es-182'
	>
	General guidelines</h3></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-186"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-184">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-185'
	>
	By default, the system uses the default primary color for text and background color for your Live Activity that best fits a person’s Lock Screen, but you can also set custom colors for both the background and text.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-189"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-187">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-188'
	>
	Make sure you handle any errors that may occur gracefully. For example, starting a Live Activity may fail because a user’s device may have reached its limit of active Live Activities. Your users need to know this happened and why it happened. If possible, provide them with an alternative so they don’t get stuck in a loop.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-192"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-190">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-191'
	>
	<strong>Should you design for the Dynamic Island?</strong></h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-195"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-193">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-194'
	>
	In short, yes! All designers who do any work with the iPhone/iOS will need to take into account designing for the Dynamic Island moving forward.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-198"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-196">
	<p	class='typography typography--size-20-text-roman js-typography block-paragraph__paragraph'
	data-id='es-197'
	>
	Also, the past has taught us that soon enough many other manufacturers will be using a variation of this, so start implementing this pattern in your designs as soon as possible.</p></div>	</div>
</div>
</div>		</div>
	</div><p>The post <a href="https://infinum.com/blog/start-designing-for-dynamic-island-and-live-activities/">Start Designing for Dynamic Island and Live Activities</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</content:encoded>
			</item>
		
	</channel>
</rss>