Explore the art and science of app design. Discuss user interface (UI) design principles, user experience (UX) best practices, and share design resources and inspiration.

All subtopics
Posts under Design topic

Post

Replies

Boosts

Views

Activity

A Summary of the WWDC25 Group Lab - Design
At WWDC25 we launched a new type of Lab event for the developer community - Group Labs. A Group Lab is a panel Q&A designed for a large audience of developers. Group Labs are a unique opportunity for the community to submit questions directly to a panel of Apple engineers and designers. Here are the highlights from the WWDC25 Group Lab for Design. Can you expand on how Liquid Glass helps with navigation and focus in the UI? Liquid Glass clarifies the navigation layer by introducing a single, floating pane that acts as the primary navigation area. Buttons within this pane seamlessly morph as you move between sections, and controls can temporarily lift into the glass surface. While avoiding excessive use of glass (like layering glass on glass), this approach simplifies navigation and strengthens the connection between menus, alerts, and the elements that trigger them. What should I do with customized bars that I might have in my app? Reconsider the content and behavior of customized bars. Evaluate whether you need all the buttons and whether a menu might be a better solution. Instead of relying on background colors or styling, express hierarchy through layout and grouping. This is a good opportunity to adopt the new design language and simplify your interface. What are scroll edge effects, and what options do we have for them? Scroll edge effects enhance legibility in controls by lifting interactive elements and separating them from the background. There are two types: a soft edge effect (a subtle blur) and a hard edge effect (a more defined boundary for high-legibility areas like column sorting). Scroll edge effects are designed to work seamlessly with Liquid Glass, allowing content to feel expansive while ensuring controls and titles remain legible. How can we ensure or improve accessibility using Liquid Glass? Legibility is a priority, and refinements are ongoing throughout the betas. Liquid Glass adapts well to accessibility settings like Reduce Transparency, Increase Contrast, and Reduce Motion. There are two variants of glass: regular glass, designed to be legible by default, and clear glass, used in places like AVKit, which requires more care to ensure legibility. Use color contrast tools to ensure contrast ratios are met. The Human Interface Guidelines (HIG) are a living document offering best practices. The colors and materials pages are key resources. Do you have any recommendations for convincing designers concerned with consistency across Android and Web to use Liquid Glass? Start small and focus on high-utility controls that don't significantly impact brand experience. Native controls offer familiarity and predictability to users. Using the native controls makes sure your app feels at home on the device. Using native frameworks provides built-in accessibility support (dynamic type, reduce transparency, increase contrast). Native controls come with built-in behaviors and interactions. Can ScrollViews include Liquid Glass within them? You can technically put a glass layer inside a scroll view, but it can feel heavy and doesn't align with the system's intention for Liquid Glass to serve as a fixed layer. Think of the content layer as the scrolling layer, and the navigational layer as the one using Liquid Glass. If there is glass on the content layer it will collide into the navigational layer. What core design philosophy guided the direction of iOS 26, beyond the goal of unification? The core design philosophy involved blurring the line between hardware and software, separating UI and navigation elements from content, making apps adaptable across window sizes, and combining playfulness with sophistication. It was about making the UI feel at home on rounded screens. Can we layer Liquid Glass elements on top of each other? Avoid layering Liquid Glass elements directly on top of each other, as it creates unnecessary visual complexity. The system will automatically convert nested glass elements to a vibrant fill style. Use vibrant fills and labels to show control shapes and ensure legibility. Opaque grays should be avoided in favor of vibrant colors, which will multiply with the backgrounds correctly. What will happen to apps that use custom components? Should they be adapted to the new design within the next year? The more native components you use, the more things happen for free. Standard components will be upgraded automatically. Look out for any customizations that might clash. Think about what is the minimum viable change, where your app still feels and looks very similar to what it did. Prioritize changes in core workflows and navigational areas. There are a number of benefits to using native components including user familiarity, built-in accessibility support, and built-in behaviors and interactions. Will Apple be releasing Figma design templates? Sketch kits were published on Monday and can be referenced. The goal is to ensure the resources are well-organized, well-named, and easy to use. It's a high priority.
Topic: Design SubTopic: General
0
0
1.3k
Jun ’25
Novice SwiftUI developer can't make network call
I'm trying to use URL structure in the foundation framework and it is failing to build, returning a nil value. Could it be trying to evaluate the string I am giving it as a variable for its argument at build time? Is there a test argument I can give URL to see if it can return a non-nil value? (of URL type)?
Topic: Design SubTopic: General
17
0
1.6k
Sep ’25
@State variable returns empty despite being set in .onAppear function
With the code below, JSON data is parsed and is stored in the variable data in the .onAppear function, however an empty set of data is passed to the Content view. How can that be fixed so that the JSON data passes to the DataView? struct ContentView: View { @State var data: [Data] @State var index: Int = 0 var body: some View { VStack { DataView(data: data[index]) } .onAppear { let filePath = Bundle.main.path(forResource: "data", ofType: "json") let url = URL(fileURLWithPath: filePath!) data = getData(url: url) } } func getData(url: URL) -> [Data] { do { let data = try Data(contentsOf: url) let jsonDecoded = try JSONDecoder().decode([Data].self, from: data) return jsonDecoded } catch let error as NSError { print("Fail: \(error.localizedDescription)") } catch { print("Fail: \(error)") } return [] } }
17
1
510
Aug ’25
Testing In-App Purchases
Hi, I have a couple of questions in regards to testing in-app purchases. I tested the subscription on a device but I'm not sure how to reset so I can test again. I didn't see the subscription in device settings or in Debug -> StoreKit -> Manage Subscriptions window. Additionally, I was wondering if there was a way to detect the subscription being made. I implemented this, but I'm not sure if that will work: .onChange(of: Product.SubscriptionInfo.RenewalState.subscribed) { if Product.SubscriptionInfo.RenewalState.subscribed == .subscribed { } }
13
0
290
Jul ’25
Video Playback on iOS 18 public release is seriously flawed
Video Playback on iOS 18 public release is asinine. I use video playback to show slow-motion video frame by frame to my students and the video can only be shown at like 3/5 of the screen size (just like Apple fouled up screenshot editing about a year ago) If you try to view video in the full screen you can’t scrub through and see time stamps or play frame by frame sliding left to right. It’s absolutely ridiculous. 2 out of 3x the video timeline finishes fully right and I haven’t watched the full clip. Here’s a video showing the issue how at the small default size I can see the entire timeline and play the full video from beginning to end, but when I go to full screen and/or zoom in or move the screen around the timeline doesn’t work and you can’t scroll through the full video! Need the video to not condense in size on the screen and play the full height / width of the screen. Also not have the text of the location showing above the screen. Way too much clutter. The reduced size of the video for editing issue started with photos several updates ago and now Apple idiotically brought a terrible flaw from photos to videos as well. Ugh.
Topic: Design SubTopic: General
12
16
5.5k
Dec ’24
Complex Swift Data Relationships...
I am struggling with exactly how to set up SwiftData relationships, beyond the single relationship model... Let's say I have a school. Each school offers a set of classes. Each class is taught by one teacher and attended by several students. Teachers may teach more than one class, but only at one school. Similarly students may attend more than one class, but only at one school. Classes themselves may be offered at more than one school. Can someone create a class for School, SchoolClass, Teacher, and Student with id, name, and relationships... I have tried it unsuccessfully about 10 different ways at this point. My most recent is below... I am struggling getting beyond a school listing in the app, and I'll cross that bridge next. I am just wondering if all the trouble I am having is because I am not smart with the class definitions. And wondering if this is to complex for SwiftData and CoreData is the requirement. This is not a real app, just my way of really trying to get a handle on Swift Data models and Navigation. I am very new to Swift, and will take any and all suggestions with enthusiasm! Thanks for taking the time. import Foundation import SwiftData @Model class School: Identifiable { var id: UUID = UUID() var name: String var mascot: String var teachers: [Teacher] var schoolClasses: [SchoolClass] init (name: String, mascot: String = "", teachers: [Teacher] = [], schoolClasses: [SchoolClass] = []) { self.name = name self.mascot = mascot self.teachers = teachers } class SchoolClass: Identifiable { var id: UUID = UUID() var name: String var teacher: Teacher? var students: [Student] = [] init (name: String, teacher: Teacher? = nil, students: [Student] = []) { self.name = name self.teacher = teacher self.students = students } } class Teacher: Identifiable { var id: UUID = UUID() var name: String var tenured: Bool var school: School? var students: [Student] = [] init (name: String, tenured: Bool = false, students: [Student] = []) { self.name = name self.tenured = tenured self.students = students } } class Student: Identifiable { var id: UUID = UUID() var name: String var grade: Int? var teacher: Teacher? init (name: String, grade: Int? = nil, teacher: Teacher? = nil) { self.name = name self.grade = grade self.teacher = teacher } } }
Topic: Design SubTopic: General Tags:
6
0
742
Jul ’25
ipados 26 and xib
hi, i have an objc ipad application that use xib with zooming for adapt to the screen (until ios18) but with ipad os 26 will be displayed wrong
Topic: Design SubTopic: General
6
0
165
Jul ’25
Design Spam 4.3
Hello So I have an application which is in the Apple store. I wanted to fixe some issue therefore i created update build with the following: • Reworked Character Physics: Improved responsiveness and movement for smoother, more controlled gameplay. • Bug Fixes & Performance Enhancements: Fixed critical issues affecting gameplay consistency and stability. Players will now experience better performance and more accurate controls. • Mac Catalyst Fixes: Improved support for macOS, fixing issues related to UI scaling and responsiveness. The changes above are basically all there is. Now it seems that i am not able to pass review as it constantly marks design spam and not give anything in particular. Whats up with that ?
Topic: Design SubTopic: General
6
2
824
Feb ’25
.onAppear and .task code not running
Hi, I have the following code, which for some reason is not working as expected. I have an .onAppear and a .task function that isn't running, which I can see isn't running because nothing is printing. Any guidance would be greatly appreciated. Thank you. struct ContentView: View { var body: some View { ZStack { switch view { case .view1: View1() case .view2: View2() case .view3: View3() case .view4: View4() case .view5: View5() default: SubscriptionStoreView(groupID: "") } } .onAppear() { view = .view6 print("test 1") } .task { print("test") await refreshPurchasedProducts() } } func refreshPurchasedProducts() async { // Iterate through the user's purchased products. for await verificationResult in Transaction.currentEntitlements { switch verificationResult { case .verified(let transaction): print("verified") case .unverified(let unverifiedTransaction, let verificationError): print("unverified") default: print("default") } } } }
Topic: Design SubTopic: General Tags:
6
0
148
Apr ’25
Subscriptions Not Displaying
I have a subscription group with two individual subscriptions configured but when trying to load the SubscriptionStoreView I get the error: "Subscription Unavailable: The subscription is unavailable in the current storefront." When I try to load the ProductView, it appears to be stuck in a loading screen. I am running the app on a device that is signed into a sandbox account. Any guidance would be greatly appreciated. Thank you.
Topic: Design SubTopic: General Tags:
5
0
862
Feb ’25
How can this be resolved - load_eligibility_plist: Failed to open //private/var/db/os_eligibility/eligibility.plist: Operation not permitted(1)
I'm programming my constraints in my video game, which is working good so far until I ran into my most important interactive storyboard. I have three buttons that move back and forth on the Y position each time they are hit. The buttons Y positions only change to view.safeAreaLayoutGuide.centerYAnchor, constant: 100 or view.safeAreaLayoutGuide.centerYAnchor, constant: 200 or view.safeAreaLayoutGuide.centerYAnchor, constant: 300 The strange part is the button that is in the Y 100 stays visible and I can hit the button that is in the Y 100. The buttons in the Y 200 and Y 300 positions are visible until after one or two hits, then the button that is in Y 300 position disappears, then after another hit or two the button that is in the Y 200 position disappears but the button that is in the Y 100 is still visible. I cleared all my constraints to narrow it down to clear view of the constraints that is causing the problem. I do not think this Log Noise. Below is the error log: load_eligibility_plist: Failed to open //private/var/db/os_eligibility/eligibility.plist: Operation not permitted(1) 1 Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. ( "<NSLayoutConstraint:0x302aa7610 UIButton:0x10c257600.centerY == UILayoutGuide:0x3030f0c40'UIViewSafeAreaLayoutGuide'.centerY + 100 (active)>", "<NSLayoutConstraint:0x302acb480 UIButton:0x10c257600.centerY == UILayoutGuide:0x3030f0c40'UIViewSafeAreaLayoutGuide'.centerY + 300 (active)>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0x302acb480 UIButton:0x10c257600.centerY == UILayoutGuide:0x3030f0c40'UIViewSafeAreaLayoutGuide'.centerY + 300 (active)> Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful. Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. ( "<NSLayoutConstraint:0x302aa7750 UIButton:0x10c257900.centerY == UILayoutGuide:0x3030f0c40'UIViewSafeAreaLayoutGuide'.centerY + 200 (active)>", "<NSLayoutConstraint:0x302acb5c0 UIButton:0x10c257900.centerY == UILayoutGuide:0x3030f0c40'UIViewSafeAreaLayoutGuide'.centerY + 100 (active)>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0x302aa7750 UIButton:0x10c257900.centerY == UILayoutGuide:0x3030f0c40'UIViewSafeAreaLayoutGuide'.centerY + 200 (active)> Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful. Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. ( "<NSLayoutConstraint:0x302aa7890 UIButton:0x10c257c00.centerY == UILayoutGuide:0x3030f0c40'UIViewSafeAreaLayoutGuide'.centerY + 300 (active)>", "<NSLayoutConstraint:0x302acb700 UIButton:0x10c257c00.centerY == UILayoutGuide:0x3030f0c40'UIViewSafeAreaLayoutGuide'.centerY + 200 (active)>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0x302aa7890 UIButton:0x10c257c00.centerY == UILayoutGuide:0x3030f0c40'UIViewSafeAreaLayoutGuide'.centerY + 300 (active)> Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful. 3 Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. ( "<NSLayoutConstraint:0x302aa7610 UIButton:0x10c257600.centerY == UILayoutGuide:0x3030f0c40'UIViewSafeAreaLayoutGuide'.centerY + 100 (active)>", "<NSLayoutConstraint:0x302acb480 UIButton:0x10c257600.centerY == UILayoutGuide:0x3030f0c40'UIViewSafeAreaLayoutGuide'.centerY + 300 (active)>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0x302acb480 UIButton:0x10c257600.centerY == UILayoutGuide:0x3030f0c40'UIViewSafeAreaLayoutGuide'.centerY + 300 (active)> Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful. Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. ( "<NSLayoutConstraint:0x302aa7750 UIButton:0x10c257900.centerY == UILayoutGuide:0x3030f0c40'UIViewSafeAreaLayoutGuide'.centerY + 200 (active)>", "<NSLayoutConstraint:0x302acb5c0 UIButton:0x10c257900.centerY == UILayoutGuide:0x3030f0c40'UIViewSafeAreaLayoutGuide'.centerY + 100 (active)>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0x302aa7750 UIButton:0x10c257900.centerY == UILayoutGuide:0x3030f0c40'UIViewSafeAreaLayoutGuide'.centerY + 200 (active)>
Topic: Design SubTopic: General
4
0
371
Apr ’25
Launch screen more vibrant in iOS18?
Hi! I've detected that in iOS18 launch screen colors differs from the defined ones, that is, if I create a launch screen with a color like #ff0000 (red) and the initial view controller is a view controller with the same color as background, I can see the transition between launch screen and the initial view controller because the launch screen color is different from the other one (dark in this case). I've tested it with several colors: left side is the launch screen and right side is the initial view controller. Both views created with IB using the same colors (it also happens with background images using colors) Is this an intentionall behavior? If so, theres a way to disable it? I need the transition between the launch screen and my initial view controller to be non perceptible... Thanks!
Topic: Design SubTopic: General Tags:
4
1
654
Jan ’25
Notification badge with no indication number
I'm looking for a way to display a notification badge without showing a number—essentially, just an empty badge to indicate the presence of notifications. From my research, it seems like this functionality isn't available . Is there any workaround or method to achieve this?
Topic: Design SubTopic: General
3
0
69
May ’25
Live Weather Radar Overlay in CarPlay Maps
Hi all — I wanted to share an idea I recently submitted through Feedback Assistant that I think could improve safety and usability for drivers using CarPlay: Add an option to overlay live weather radar (rain, snow, storms, etc.) directly onto CarPlay Maps while navigating. Similar to how traffic conditions are shown now, this would allow drivers to visually track incoming weather in real time without switching apps or relying on separate devices. Why this matters: • Enhances driver safety by increasing situational awareness • Helps with trip planning and route adjustments around severe weather • Reduces distractions by integrating everything into one screen • Useful for everyday drivers, long-haul travelers, and first responders I submitted this via Feedback Assistant, but I’d love to know what others think. If you also see value in this feature, consider submitting your own version via Feedback Assistant so Apple sees there’s interest. Let’s push for smarter, safer navigation — thanks for reading!
3
0
729
Jul ’25
Wrong unit in HIG > Components > System Experiences > Widget > watchOS widget dimensions
Hello, I noticed a small mistake in the Human Interface Guidelines (HIG). On the page HIG > Components > System Experiences > Widget > watchOS Widget Dimensions, scroll down to the bottom. In the "watchOS widget dimensions" section, the sizes in the table are in pixels (px), not points (pt) actually. However, the table header indicates the sizes should be in points (pt). Page link: https://developer.apple.com/design/human-interface-guidelines/widgets#watchOS-widget-dimensions For example, the widget size in the Smart Stack on a 49mm watch should be 192x81.5 pt (or 382x163 px), not 382x163 pt. This size can be verified with the information provided here: https://developer.apple.com/documentation/watchos-apps/supporting-multiple-watch-sizes/. https://developer.apple.com/documentation/watchkit/wkinterfacedevice/1620974-screenscale
Topic: Design SubTopic: General Tags:
3
0
837
Jan ’25
Scrollview and a background image set to scaledToFill....
I've been beating my head against the wall over a scrollview issue where the top and bottom are cut off in landscape mode. Portrait mode - everything runs swimmingly. The moment I flip the iPad on its side, though, I lose about a quarter of the view on the top and bottom. I thought this was something to do with framing or such; I ran through a myriad of frame, padding, spacer, geometry...I set it static, I set it to dynamically grow, I even created algorithms to try to figure out how to set things to the individual device. Eventually, I separated the tablet and phone views as was suggested here and on the Apple dev forums. That's when I started playing around with the background image. Right now I have.... ZStack { Image("background") .resizable() .scaledToFill() .ignoresSafeArea() ScrollView { VStack(spacing: 24) {.... The problem is the "scaledToFill". In essence, whenever THAT is in the code, the vertical scrollview goes wonky in landscape mode. It, in essence, thinks that it has much more room at the top and the bottom because the background image has been extended at top and bottom to fill the wider screen of the iPad in landscape orientation. Is there any way to get around this issue? The desired behavior is pretty straightforward - the background image fills the entire background, no white bars or such, and the view scrolls against it.
3
0
138
Apr ’25
Ask about SF symbols
Hi, I would like to make an educational app for helping my students to learn about malaria diagnosis and need to put some animal icon. In the tabview, is it possible to use system images like monkey, bird, mouse. I cannot see these animals in SF symbol list.
Topic: Design SubTopic: General
3
0
139
May ’25
IS THE SWiPE LEFT CAMERA MODE REALLY IMPORTANT?
I have really examined the swipe left Camera function mode and sincerely believe it is no more important especially when there no option in the settings to turn it on or off. I will highly recommend a total scrap in the iOS 26 or if possible a function to activate and deactivate it.
Topic: Design SubTopic: General
3
0
326
Aug ’25
How to attribute/credit Apple Fonts added to app?
My app lets users create things with text, and I've included Apple fonts so users can format their text with them. These were fonts I found in the Font Book app that comes with macOS. My assumption is that these, like the San Francisco font, can be distributed with apps. Do I need to attribute these fonts to their creators and publish a license in my "About" page? If so, where do I find the license(s) and what is the proper way of publishing them? Is there anything else I should know? Please let me know if this should've been posted under a different topic and tag
Topic: Design SubTopic: General Tags:
3
0
1.2k
Jan ’25
iPad/iPhone - Display best practices….
So…I am hitting a wall here and could use some guidance towards best practice. I’ve developed an app in Xcode/SwiftUI that renders just fine on the iPhone - text, images, buttons, frames…everything is nicely centered on the screen or scrolls where and when I want. The iPad though…not so much. I’m having issues with tops and bottoms being cut off in scrollviews. These are just straight up text screens too - the ones with other elements/controls…they’re rendering fine. I’ve tried a mix of geometry, vstack, scrollview, padding, spacers…the lot of it. Nothing I seem to do works - the views do not want to fill and fit properly. And, of course, the issue becomes worse the moment you flip the iPad into landscape view. Or use the 13” models. I’d imagine others are battling these issues as well and found solutions, so I decided to hit up the brain trust.
3
0
145
Apr ’25