{"$schema": "https://raw.githubusercontent.com/guitaripod/wwdc-sessions/master/schema/transcript.schema.json", "id": "wwdc2026-251", "language": "eng", "source": "https://developer.apple.com/videos/play/wwdc2026/251", "wordCount": 2602, "segments": [{"start": 8.0, "text": "Branding is likely top of mind for you"}, {"start": 10.0, "text": "and it's a helpful way to communicate and differentiate your products."}, {"start": 14.0, "text": "But, how do you achieve the expression of your brand identity"}, {"start": 18.0, "text": "while keeping the integrity of familiar paradigms on iOS?"}, {"start": 21.0, "text": "I'm Sarah, a Design Evangelist, and today I'm going to unpack that."}, {"start": 26.0, "text": "I'll share how to approach design in ways that feel familiar where it matters,"}, {"start": 30.0, "text": "but bespoke where needed."}, {"start": 32.0, "text": "There's an aspect of branding that is aesthetic"}, {"start": 34.0, "text": "such as the use of refined and memorable typography,"}, {"start": 39.0, "text": "the expressive use of color,"}, {"start": 41.0, "text": "or the visual language of iconography."}, {"start": 44.0, "text": "I'll share practical guidance as these relate to iOS apps."}, {"start": 48.0, "text": "But branding is also a feeling it's an extension of how you see a product"}, {"start": 53.0, "text": "that bleeds into how you experience a product."}, {"start": 56.0, "text": "This is less tangible, but in many ways, more meaningful."}, {"start": 60.0, "text": "It's possible your product has a website, digital marketing, a retail store,"}, {"start": 65.0, "text": "or even an app on another platform."}, {"start": 68.0, "text": "And you might be tempted to make your brand identical"}, {"start": 71.0, "text": "across all of these experiences."}, {"start": 74.0, "text": "But each of these placements should consider the context."}, {"start": 77.0, "text": "They shouldn't default to being the same."}, {"start": 80.0, "text": "People who use iPhone's expect the apps on their phone"}, {"start": 83.0, "text": "to look and feel like iOS."}, {"start": 85.0, "text": "This is comprised of components, patterns, and functionality"}, {"start": 90.0, "text": "that has been meticulously refined for the iPhone."}, {"start": 93.0, "text": "And people don't typically have experience with other versions of your app"}, {"start": 97.0, "text": "outside of Apple's ecosystem."}, {"start": 99.0, "text": "The tips I'll share today are centered around how branding can be of service"}, {"start": 103.0, "text": "to your app experience."}, {"start": 105.0, "text": "This doesn't mean your app needs to look identical to an Apple app."}, {"start": 109.0, "text": "There are a lot of ways to refine your brand"}, {"start": 111.0, "text": "within the bounds of the operating system."}, {"start": 114.0, "text": "I'll share some great examples from developers"}, {"start": 116.0, "text": "who strike the balance of distinct branding without compromising the native feel."}, {"start": 122.0, "text": "First, you'll learn how the UI and components of your app"}, {"start": 125.0, "text": "can be customized, while still feeling like they belong on the operating system."}, {"start": 130.0, "text": "I'll cover ways to make your content shine,"}, {"start": 133.0, "text": "the appropriate places to use color in your interface,"}, {"start": 137.0, "text": "considerations when using custom fonts,"}, {"start": 139.0, "text": "and examples of great iconography and resources you can use."}, {"start": 144.0, "text": "Let's set the foundation for how to think about where brand belongs."}, {"start": 148.0, "text": "With the introduction of Liquid Glass in iOS 26,"}, {"start": 152.0, "text": "we started thinking about interfaces in a slightly different way."}, {"start": 156.0, "text": "Think of your app as two distinct layers:"}, {"start": 160.0, "text": "the UI layer, which serves as the global navigation,"}, {"start": 163.0, "text": "and the content layer, which sits beneath these controls"}, {"start": 166.0, "text": "and contains all the features that make your app unique."}, {"start": 170.0, "text": "Conceptually,"}, {"start": 171.0, "text": "the content layer is the best opportunity to express your brand identity."}, {"start": 175.0, "text": "This allows the UI layer of your app to act as a foundation"}, {"start": 179.0, "text": "that helps people get around and find what they're looking for."}, {"start": 183.0, "text": "The UI Layer is an app's navigation and actions."}, {"start": 186.0, "text": "Expressed through components like tab bars and top toolbars"}, {"start": 191.0, "text": "they stay floating above the content layer for easy access."}, {"start": 195.0, "text": "Try to lean into what's already familiar for people on iOS,"}, {"start": 199.0, "text": "rather then reinvent the wheel."}, {"start": 201.0, "text": "Gentler Streak is an app that keeps you motivated"}, {"start": 204.0, "text": "and helps you build a fitness routine."}, {"start": 207.0, "text": "At a glance you can tell the app has a distinct identity:"}, {"start": 210.0, "text": "playful illustrations and detailed data visualizations."}, {"start": 215.0, "text": "But their navigation: the tab bar and top toolbar actions, are all native."}, {"start": 221.0, "text": "They don't heavily customize the UI or deviate from the patterns."}, {"start": 226.0, "text": "Establishing a baseline of platform familiarity is important."}, {"start": 229.0, "text": "Otherwise people will need to learn how to use your app."}, {"start": 233.0, "text": "Standard components such as grid views and grouped tables"}, {"start": 237.0, "text": "are highly flexible and functional."}, {"start": 239.0, "text": "If you draw upon what people already understand,"}, {"start": 242.0, "text": "they'll instinctively know how to use your app."}, {"start": 246.0, "text": "Now, it's expected that components will occasionally need to be customized"}, {"start": 250.0, "text": "to fit your app needs."}, {"start": 252.0, "text": "The messaging app Slack has built a custom top toolbar"}, {"start": 255.0, "text": "where a middle action shows Channel information."}, {"start": 259.0, "text": "But the overall look of the component:"}, {"start": 261.0, "text": "like button sizes, placement of floating actions,"}, {"start": 264.0, "text": "and the popover behavior - all feel very iOS."}, {"start": 269.0, "text": "Another example that I love is from the app Moonlitt."}, {"start": 272.0, "text": "The app tracks the lunar cycle for photography and moon phases."}, {"start": 276.0, "text": "The UI is simple, it's a flat hierarchy and doesn't need a tab bar."}, {"start": 282.0, "text": "The lunar cycle calendar is a custom component"}, {"start": 284.0, "text": "that shows moon phases throughout the month at a glance."}, {"start": 288.0, "text": "But it leverages the design language of iOS."}, {"start": 291.0, "text": "With a Liquid Glass backing,"}, {"start": 293.0, "text": "a primary action to dismiss,"}, {"start": 296.0, "text": "and the sheet has concentric edges to match the hardware."}, {"start": 299.0, "text": "This app is totally unique."}, {"start": 301.0, "text": "And yet, clearly belongs on iOS."}, {"start": 305.0, "text": "Custom components take refinement."}, {"start": 307.0, "text": "So you should focus your time building them for areas of your app"}, {"start": 310.0, "text": "that have the biggest impact or make your content stand out."}, {"start": 314.0, "text": "Then, audit your app for opportunities to use standard components"}, {"start": 317.0, "text": "for aspects of your app that are functional."}, {"start": 320.0, "text": "For example, beyond navigation,"}, {"start": 323.0, "text": "one standard component that's often overlooked is context menus."}, {"start": 327.0, "text": "They're often displayed from a button in the top toolbar"}, {"start": 330.0, "text": "and contain actions related to the whole screen,"}, {"start": 333.0, "text": "as opposed to in-line."}, {"start": 334.0, "text": "They provide convenient access to frequently used items, just a tap away."}, {"start": 340.0, "text": "And they're super flexible."}, {"start": 342.0, "text": "Your actions can have icons."}, {"start": 345.0, "text": "They can be grouped into sections with optional headers."}, {"start": 348.0, "text": "Or present a secondary menu or modal."}, {"start": 351.0, "text": "Moonlitt uses a Context Menu for their settings."}, {"start": 354.0, "text": "Notice the animation that's built into the control"}, {"start": 357.0, "text": "deliberately morphing from the action that was tapped."}, {"start": 360.0, "text": "With SwiftUI, you get these components and interactions out of the box."}, {"start": 366.0, "text": "This is just one example where creating a custom component"}, {"start": 369.0, "text": "will require work to build and maintain."}, {"start": 371.0, "text": "These types of custom elements,"}, {"start": 373.0, "text": "the ones that serve a very utilitarian purpose,"}, {"start": 376.0, "text": "don't usually reinforce a brand."}, {"start": 379.0, "text": "In fact, they can make the product appear less native - or even dated -"}, {"start": 383.0, "text": "because they feel misplaced, replicating something tried and true."}, {"start": 388.0, "text": "When it comes to your UI, there are endless possibilities,"}, {"start": 391.0, "text": "but try to build on what people know."}, {"start": 393.0, "text": "Use platform components for conventional tasks"}, {"start": 396.0, "text": "and customize components to cater to your specific needs."}, {"start": 401.0, "text": "With this perspective about your UI, think of the content layer as your canvas."}, {"start": 406.0, "text": "This can include imagery, videos, even words"}, {"start": 409.0, "text": "it's the information your app provides to people."}, {"start": 413.0, "text": "For example, the Crumbl app uses full-bleed videos"}, {"start": 417.0, "text": "to highlight their weekly flavors."}, {"start": 419.0, "text": "These video's aren't just generic assets,"}, {"start": 421.0, "text": "they help draw a deeper connection to the product because they change weekly."}, {"start": 426.0, "text": "Incorporating content well is all about making sure it has a clear purpose."}, {"start": 431.0, "text": "Moonlitt takes a different approach:"}, {"start": 433.0, "text": "their content is edge-to-edge color mimicking gradation in the night sky."}, {"start": 438.0, "text": "The 3D elements dynamically portray your position in relation to the moon."}, {"start": 443.0, "text": "It feels relevant for their content to feel immersive"}, {"start": 446.0, "text": "and take over the entire interface."}, {"start": 449.0, "text": "But, content can also be the words used throughout your messaging."}, {"start": 453.0, "text": "And words are powerful because they can effect how we feel."}, {"start": 457.0, "text": "I encourage you to explore how voice and tone can shape your brand."}, {"start": 462.0, "text": "Sometimes an app is targeting a specific emotion"}, {"start": 465.0, "text": "such as feeling playful and fun,"}, {"start": 467.0, "text": "or trustworthy and safe."}, {"start": 470.0, "text": "Be very deliberate about how you want to make people feel."}, {"start": 474.0, "text": "There's a lot more to say here,"}, {"start": 475.0, "text": "so to learn about copy writing for your content,"}, {"start": 477.0, "text": "check out the video: \"Add personality to your app through UX writing\"."}, {"start": 482.0, "text": "Keep in mind, people don't experience apps as static screens."}, {"start": 486.0, "text": "They're dynamic experiences as people scroll, tap, and interact."}, {"start": 491.0, "text": "So, transitions and animations are the ways in which your content is experienced."}, {"start": 498.0, "text": "One example is the NYT Cooking app."}, {"start": 501.0, "text": "In a recipe detail view,"}, {"start": 503.0, "text": "comments are an important part of the content."}, {"start": 506.0, "text": "The app uses SwiftUI's Zoom Transitions for the comments related to a recipe."}, {"start": 511.0, "text": "These kind of transitions are delightful and feel fluid,"}, {"start": 515.0, "text": "but they also improve interaction"}, {"start": 516.0, "text": "by connecting the tap target to the transition state."}, {"start": 520.0, "text": "For Gentler Streak, motion makes the app feel active,"}, {"start": 524.0, "text": "engaging, and approachable."}, {"start": 526.0, "text": "As you scroll through a monthly recap page, your activities feel almost magical"}, {"start": 531.0, "text": "spring animations make the content really pop."}, {"start": 534.0, "text": "Motion helps emphasize hierarchy and brings attention to what matters."}, {"start": 540.0, "text": "But delayed load times or dropped frames"}, {"start": 543.0, "text": "translate poorly to peoples perception of your app,"}, {"start": 545.0, "text": "even if they couldn't pinpoint exactly why."}, {"start": 549.0, "text": "People remember how a product makes them feel"}, {"start": 552.0, "text": "design an experience that's satisfying, enriching and a joy to use."}, {"start": 557.0, "text": "Now that you're mindful of how the foundation of your app"}, {"start": 560.0, "text": "should honor platform patterns, let's talk about color."}, {"start": 564.0, "text": "Before iOS 26, apps would often use solid backgrounds"}, {"start": 568.0, "text": "on the top toolbars and tab bars of their apps."}, {"start": 571.0, "text": "But these UI elements were bulky and letterboxed the content area,"}, {"start": 575.0, "text": "restricting it to an even smaller portion of the screen."}, {"start": 579.0, "text": "With the new design language we introduced,"}, {"start": 582.0, "text": "our recommendation is to move color into the content area of your app,"}, {"start": 585.0, "text": "into the scroll view."}, {"start": 588.0, "text": "That way, Liquid Glass controls sit above the content layer"}, {"start": 591.0, "text": "and pick up your brand color dynamically."}, {"start": 594.0, "text": "The other thing to consider here is that color can be distracting"}, {"start": 598.0, "text": "and make an interface feel overwhelming."}, {"start": 601.0, "text": "Aim to use color in ways that create meaning"}, {"start": 603.0, "text": "such as portraying hierarchy, groupings, or indicating interaction."}, {"start": 608.0, "text": "Which is why color is often seen on controls and actions."}, {"start": 612.0, "text": "This is referred to as your app's accent or tint color."}, {"start": 616.0, "text": "Slack uses color sparingly."}, {"start": 618.0, "text": "They use tint for primary actions like:"}, {"start": 621.0, "text": "sections with new information,"}, {"start": 623.0, "text": "badges to show unread messages,"}, {"start": 626.0, "text": "new message creation, and the selected state in the tab bar."}, {"start": 630.0, "text": "Intentional use of color communicates status,"}, {"start": 633.0, "text": "feedback, and selection states"}, {"start": 636.0, "text": "helping people focus on what's important."}, {"start": 639.0, "text": "And they moved their solid top toolbar color"}, {"start": 642.0, "text": "into the content area so it scrolls away, allowing content to spread edge to edge."}, {"start": 648.0, "text": "Don't be afraid to use color in your app!"}, {"start": 650.0, "text": "It can enhance communication,"}, {"start": 651.0, "text": "evoke your brand, and provide visual continuity."}, {"start": 656.0, "text": "Keep in mind, the iPhone is an incredibly personal device."}, {"start": 660.0, "text": "Features like Dark Mode are preferences people set for their comfort and needs."}, {"start": 665.0, "text": "Gentler Streak, Slack, and NYT Cooking"}, {"start": 668.0, "text": "have a refined color palette for low-light environments."}, {"start": 672.0, "text": "If your app doesn't support Dark Mode,"}, {"start": 673.0, "text": "people may have a negative experience that translates to your product."}, {"start": 678.0, "text": "There are also various touch points"}, {"start": 680.0, "text": "where your brand identity can extend beyond your app."}, {"start": 683.0, "text": "For example, if people find the data in your app valuable,"}, {"start": 686.0, "text": "they can choose to use your Widget."}, {"start": 689.0, "text": "Here's an example of Crumbl's Widget's"}, {"start": 691.0, "text": "branded with their pastel color palette and distinct imagery."}, {"start": 695.0, "text": "They don't just look delicious, they're also immediately recognizable."}, {"start": 700.0, "text": "When working with color, exercise restraint —"}, {"start": 703.0, "text": "use it sparingly and with intention so it has the biggest impact."}, {"start": 709.0, "text": "Of all the tools at your disposal, typography is often a favorite."}, {"start": 713.0, "text": "It can be expressive, bold, or elegant, but should always be functional."}, {"start": 719.0, "text": "Let's revisit the Crumbl app."}, {"start": 721.0, "text": "They've built their own Typeface, Crumbl Sans,"}, {"start": 724.0, "text": "that they use throughout their marketing"}, {"start": 726.0, "text": "and in moments of their iOS app that are memorable."}, {"start": 729.0, "text": "This is particularly obvious with large headers like their cookie flavors."}, {"start": 734.0, "text": "The primary thing to be aware of when using custom fonts on iOS is how they scale."}, {"start": 740.0, "text": "Dynamic Type is the setting within Accessibility"}, {"start": 743.0, "text": "to increase font sizes across the operating system."}, {"start": 746.0, "text": "It's important to think about this for people"}, {"start": 748.0, "text": "with vision and cognitive disabilities"}, {"start": 751.0, "text": "but Dynamic Type is also a preference, that many people rely on."}, {"start": 756.0, "text": "This is built into Apple's System Fonts, but you'll need to build support,"}, {"start": 760.0, "text": "and test for this, when you use your own Custom Fonts."}, {"start": 764.0, "text": "Notice how when someone increases their system font size through Dynamic Type"}, {"start": 768.0, "text": "the Crumbl app is still legible."}, {"start": 770.0, "text": "As the font size increases, rather than truncating the labels"}, {"start": 774.0, "text": "their layout accommodates them, dropping text to multiple lines as needed."}, {"start": 780.0, "text": "Dynamic type also applies to standard components."}, {"start": 784.0, "text": "When the type is set to larger accessibility sizes,"}, {"start": 786.0, "text": "the tab labels and icons appear larger in the center of the screen."}, {"start": 792.0, "text": "Strive to have your app accommodate as many people as possible."}, {"start": 796.0, "text": "It might sound simple, but when people can clearly see the UI"}, {"start": 800.0, "text": "and read the text in your app,"}, {"start": 801.0, "text": "they're going to have a more positive experience."}, {"start": 805.0, "text": "San Francisco is the system font for all Apple platforms."}, {"start": 809.0, "text": "It's a typeface that provides a consistent, legible,"}, {"start": 812.0, "text": "and friendly typographic voice supporting over 150 languages."}, {"start": 817.0, "text": "SF Pro is the default, but there are other variants:"}, {"start": 820.0, "text": "SF Compact is optimized for small sizes,"}, {"start": 824.0, "text": "SF Mono is designed for row and column alignment"}, {"start": 827.0, "text": "which is great for coding,"}, {"start": 828.0, "text": "and New York is a Serif for traditional reading"}, {"start": 831.0, "text": "and a graphic display face."}, {"start": 833.0, "text": "Some apps, like Gentler Streak, use system fonts entirely."}, {"start": 838.0, "text": "With a mix of font widths, and variants like SF Rounded,"}, {"start": 841.0, "text": "they've achieved variety and hierarchy, while still feeling distinct."}, {"start": 847.0, "text": "Typography is a strong way to express identity."}, {"start": 850.0, "text": "Try to design the fonts in your interface to be flexible and adapt to people's needs."}, {"start": 856.0, "text": "And finally, iconography."}, {"start": 859.0, "text": "For the most part, you can use your own iconography"}, {"start": 861.0, "text": "anywhere throughout your app, from the content view to controls."}, {"start": 866.0, "text": "An example of custom iconography that works really well"}, {"start": 869.0, "text": "is the NYT Cooking app."}, {"start": 871.0, "text": "Their icons have sharper edges and typically use a line-weight variant."}, {"start": 876.0, "text": "I like that they're unique to their app, but not overly detailed,"}, {"start": 879.0, "text": "so they scale well to small sizes."}, {"start": 882.0, "text": "Their icons are used on their tab bar, top toolbars,"}, {"start": 886.0, "text": "and in-line actions in the content layer."}, {"start": 889.0, "text": "They're consistent, cohesive, and a simple nod to their brand."}, {"start": 894.0, "text": "Something I respect about their iconography is platform consideration."}, {"start": 898.0, "text": "Here are three different versions of the Share icon across iOS, Android and Web."}, {"start": 904.0, "text": "Even though they've created their own style of icons"}, {"start": 907.0, "text": "each of these actions stays true to the platform pattern of sharing."}, {"start": 912.0, "text": "Iconography doesn't need to be heavily stylized."}, {"start": 915.0, "text": "It should aim to be identifiable and serve a clear purpose."}, {"start": 920.0, "text": "And… not every app needs custom iconography."}, {"start": 923.0, "text": "SF Symbols is a Mac app with over 7,000 symbols"}, {"start": 926.0, "text": "that you can use for free."}, {"start": 929.0, "text": "SF Symbols are built like a font, so they scale dynamically like text."}, {"start": 933.0, "text": "And they're designed to be neutral"}, {"start": 935.0, "text": "the style of SF Symbols is intended to work"}, {"start": 938.0, "text": "for all types of apps across Apple platforms."}, {"start": 941.0, "text": "They have various line weights, accessibility and localization support."}, {"start": 946.0, "text": "Best of all?"}, {"start": 947.0, "text": "They're built right into Xcode,"}, {"start": 948.0, "text": "so no need for design teams to export icon libraries and manage file handoff."}, {"start": 955.0, "text": "On the topic of icons, let's touch briefly on logo's."}, {"start": 959.0, "text": "In the context of iOS,"}, {"start": 961.0, "text": "people don't need to be reminded which app they're using."}, {"start": 963.0, "text": "And logo's can take up precious real estate"}, {"start": 966.0, "text": "best reserved for more pertinent information."}, {"start": 969.0, "text": "In NYT Cooking their logo is only displayed on the Home tab, and it fades on scroll."}, {"start": 975.0, "text": "There's something really elegant about how understated this is."}, {"start": 979.0, "text": "Aim to incorporate branding like this in refined and unobtrusive ways"}, {"start": 984.0, "text": "that don't distract people from your experience."}, {"start": 988.0, "text": "If you choose to use your own iconography, make sure they're recognizable,"}, {"start": 991.0, "text": "consistent and that they scale well to small sizes."}, {"start": 996.0, "text": "All of the apps I talked about today, have approached branding in a way"}, {"start": 999.0, "text": "that complements the experience, rather than distracts from it."}, {"start": 1003.0, "text": "They have predictable navigation patterns"}, {"start": 1005.0, "text": "that help people quickly understand how to use their app."}, {"start": 1008.0, "text": "But they've integrated their own identity in ways that are subtle, but meaningful."}, {"start": 1014.0, "text": "We encourage exploration of your brand throughout your iOS apps."}, {"start": 1018.0, "text": "Just remember that iOS is a platform with established interactions"}, {"start": 1022.0, "text": "and forcing your brand can compromise the user experience."}, {"start": 1026.0, "text": "Be mindful of where it oversteps with system behavior"}, {"start": 1029.0, "text": "or confuses familiar conventions."}, {"start": 1032.0, "text": "We're delighted by the creative ways people inject their brand identity,"}, {"start": 1035.0, "text": "so continue to exercise your creativity."}]}