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.5k
Jun ’25
SF Symbols Variable Draw without the background.
Is it possible to use the new variable draw feature for a custom SF Symbol without it leaving the background behind it when it is not drawn? I am trying to make a tally icon that is drawn with the variable draw, but it doesn't look good if the tally is visible in the background before it is drawn.
Topic: Design SubTopic: General Tags:
0
0
93
Jun ’25
The airdrop was sent to the wrong device. Will modifying the interface in this way reduce the error
I have many Apple devices, such as macbook, iPad and iPhone. It's very convenient for me to transfer files between devices. However, when I want to send files to my own device in public places, I often click on the wrong recipient because the list avatar keeps changing. I hope the list of recipients can be grouped One group is my own device (or the one I often send to), and the other group is other devices. When the user is about to send, the mouse will be in a relatively fixed and mentally expected area. I feel that this can reduce the probability of sending wrongly
Topic: Design SubTopic: General
3
0
651
Nov ’25
NFC innovation
Existing smartphones store multiple NFC card information. When the NFC antenna of the phone is close to the card reader, it is usually necessary to open the APP to select NFC card information or default to one card information to be transmitted to the card reader. It is not possible to quickly select or switch cards among multiple cards. For example, after using the NFC function to swipe the subway card, the phone needs to open the car access control and community access control again. It is necessary to open the mobile NFC card information management APP to select the community access control card and then swipe the mobile NFC access control, which causes inconvenience. (现有的智能手机存储多个 NFC 卡信息。当手机的NFC天线靠近读卡器时,通常需要打开APP选择NFC卡信息或默认一个卡信息传输到读卡器。无法在多张卡之间快速选择或切换卡。例如,使用NFC功能刷完地铁卡后,手机需要重新打开车内门禁和小区门禁。需要打开手机NFC卡信息管理APP选择社区门禁卡,然后刷手机NFC门禁,造成不便。) Divide the smartphone screen into multiple areas, and users can freely define corresponding NFC information for each area. When the screen is turned off and not unlocked, select NFC card information by pressing different screen areas with your fingers. When the mobile NFC is close to the card reader, the selected card information will be transmitted to the reader(将智能手机屏幕划分多个区域,每个区域手机用户可以自由定义对应NFC信息。在熄屏’不解锁的情况下,通过手指按压不同屏幕区域选择NFC卡片信息,手机NFC贴近读卡器时将选择的卡片信息传递给读卡器。) Below, the method will be further explained in conjunction with the accompanying drawings and embodiments. Figure 1 is a schematic diagram of a utility model; Figure 2 is the flowchart of the present utility model; NFC reader, 2. Mobile screen partition, 3. NFC signal in Figure 1. In Figure 2, 1. Press the area of the screen partition with your finger. 2. Place the phone close to the NFC reader. 3. The phone senses the returned NFC signal. 4. The phone detects the pressed area.( 下面结合附图和实施例对方法进一步说明。 图1为实用新型示意图; 图2为本实用新型流程图; 图1中1.NFC读取器,2.手机屏幕分区,3.NFC信号。 图2中1.手指按压屏幕分区的区域2.手机贴近NFC读取器3.手机感应到返回的NFC信号4.手机检测到按压的区域,5.是否检测到手机用户按压区域的动作,6.检测到按压区域,根据按压区域做出匹配相对应的NFC的动作7.选择用户所需的NFC卡8.NFC卡收到信息并发出卡片信息9.NFC读卡器收到NFC卡的信息。) For example, a smartphone user has N NFC virtual cards in their phone. Users can divide the smartphone screen into N areas, distinguished as A area, B area, C area..., each area controls different NFC. When a smartphone user holds down the B area that controls NFC (such as virtual access cards) and brings the phone close to the NFC card reader (such as access control). The mobile phone will sense NFC signals (access control signals), triggering the phone to detect the area that the user is pressing. There are two possibilities. Firstly, if the user's pressing action is not detected, the NFC card corresponding to the default A zone (set as the default here) will be selected. If the user's pressing action is detected and it is detected that the pressing is in Zone B (the partition corresponding to the access card), then the NFC information corresponding to Zone B is triggered. The smartphone receives this message, and the corresponding NFC sends out a card message. The NFC card reader (access control device) receives the message and reacts (door opens).(例如,一智能手机用户手机中有N个NFC虚拟卡。用户可以将智能手机屏幕分为N个区域,分辨为A区、B区、C区······,每个区域分别控制不同的NFC。当智能手机用户按住控制NFC(如虚拟门禁卡)的B区域并将手机靠近NFC读卡器(如门禁)。手机将会感应到NFC信号(门禁信号),触发手机检测用户正在按压的区域。有两种可能性,第一没有检测到用户的按压动作则选择默认的A区(这里把A区设为默认)所对应的NFC卡。第二检测到用户的按压动作并检测出按压的是B区域(门禁卡所对应的分区),则触发B区域所对应的NFC信息。智能手机收到此信息,相对应的NFC发出卡片信息,NFC读卡器(门禁设备)收到信息,做出反应(门打开)。) 图1 image1 图2 image2
Topic: Design SubTopic: General
1
0
399
Sep ’25
Animating items between a VStack and a ZStack?
Hey there! I'd love to know if theres a way where you can animate items between ZStack and VStacks? Just like the native iOS notifications on the Lockscreen stack at the bottom and if tapped, they convert from a Stack to a List - I have a list with items, displayed in a VStack, and I make the list collapsable when swiping down, where the items stack behind eachother with a progresisve reduction in opacity & scale, but I havent figured out a way to animate the items between the list and the stack - where you can visually see items starting to overlap and stack ontop of eachother when collapsing the list.
0
0
144
May ’25
Guideline 4.3(a) - Design - Spam
Hello, I recently submitted my app to the Apple Store and received a rejection under Guideline 4.3(a) - Design - Spam, stating that my app is similar to others on the store. However, my app has a unique feature set, offers more functionality and content than competitors, and is completely free with ad monetization, unlike most similar apps that require subscriptions. I have spent five months developing this app from scratch, ensuring it provides an original and valuable experience for users. I did not use an app template or repackaged code, and my app is not a reskinned version of any existing app. I genuinely believe it brings meaningful differentiation to the market. I would appreciate any guidance on how I can better communicate my app’s uniqueness to the review team or what specific aspects I should adjust to comply with Apple's guidelines. Thank you for your time and support.
Topic: Design SubTopic: General Tags:
0
0
750
Feb ’25
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
772
Jul ’25
iOS 26 Liquid Glass - Without any Blur - Possible?
let glassView = UIVisualEffectView(effect: UIGlassEffect(style: .clear)) glassView.frame = CGRect(x: 100, y: 200, width: 200, height: 400) self.view.addSubview(glassView) Though UIGlassEffect has two variants: .regular and .clear, even the clear one has some blur on the background. Is there a way to do get absolute no blur? Edges still have the glass effect. Apple does this in two places: Camera app: Text magnifier:
Topic: Design SubTopic: General Tags:
0
0
685
Oct ’25
Panel Toggle Glitch
Development environment: Simulator: iOS 26 beta 3 iPhone 16 (for testing) Simulator 2: iPadOS 26 beta 3 iPad Air 13 inch (M3) (for testing) Connected Device: iPadOS 26 beta 3 iPad Pro 11 inch (M4) (for testing) Dev Device: macOS Tahoe 26 beta 3 Macbook Air When using the NavigationSplitView element, the sidebar has a built-in panel toggle button. However, when I click the toggle button to toggle the sidebar section in SwiftUI 26 on both simulator 2 and the connected device, it has a slight animation glitch before going back to normal. What's going on? This is my code for the specific view that has the NavigationSplitView (and all views are connected through TabViews): RecordsPage.swift Here are image references: When I clicked the toggle: After 1~2 seconds: These images are in the state of the panel being hidden.
Topic: Design SubTopic: General Tags:
1
0
405
Jul ’25
iOS 26 beta 3 bug report
In the clock app when making an alarm for myself to wake up, I found this bug where If you swipe left On an alarm without deleting it and then Swipe right it does a goofy visual glitch where it teleports to the top of your screen.
Topic: Design SubTopic: General
1
0
519
Jul ’25
White border appears during app transition despite full-opacity 1024x1024 icon (SVG and PNG tested)
Hi everyone 👋 I’m a new iOS developer working on my first app and I’ve run into a frustrating visual bug involving my app icon during the launch/close transition. Issue: When I use Icon Composer (the new tool introduced for iOS 26) to generate my app icon, I consistently see a thin white border or “fringe” around the icon only during the transition animation (when the app opens or closes). It disappears once the animation ends. What I tested and confirmed: • I exported the exact same design directly from Adobe Illustrator as a 1024×1024 PNG, fully opaque, RGB color mode, background color filling the entire canvas (no transparency, no borders, no rounded corners). • When I place that exported PNG directly into the AppIcon asset catalog in Xcode, the icon renders perfectly — no white fringe appears, just a slightly darker shade of blue during transitions (expected and acceptable). • But when I generate the icon using Icon Composer, the white edge always appears, even if I disable effects, use full coverage layers, or only keep a flat color layer. Notes: • Tested on iOS 26 (latest beta) using Xcode 16. • The issue seems specific to Icon Composer’s export format or metadata — maybe it’s not stripping alpha correctly or something related to the squircle mask? • I followed all recommended specs: 1024×1024 px, PNG, sRGB, no transparency, exported from Illustrator at 72ppi with solid background. Even tested without the logo, just the icon made with icon composer Is anyone else experiencing this issue with Icon Composer exports? Is there an official recommendation to avoid this during transitions or should I simply avoid Icon Composer for production icons for now and stick with Illustrator / Figma exports? Thanks so much Here’s a visual example:
0
0
274
Aug ’25
Preventing Content Cutoff in Sheets
I’m working on a SwiftUI sheet that has a specific size 624 x 746, but I’m running into issues on certain devices like the iPad mini in landscape or when using Stage Manager. The sheet sometimes gets cut off, and the content inside isn’t fully visible. Current Implementation: The sheet is 624 x 746, but if there's less width or height around the sheet, I want it to scale dynamically while maintaining the aspect ratio (to ensure the content can always be shown) Ideally, I’d love for the sheet to increase in size on larger screens to cover more of the page behind it. The sheet contains a NavigationStack with multiple pages. Problems I’m Facing: iPad mini (landscape): The bottom content (like buttons) gets cut off when the sheet height is constrained. Stage Manager: If the user resizes the window, the sheet doesn’t adjust properly, leading to UI clipping. Ideal behavior: I want the sheet to dynamically scale its width and height while maintaining the aspect ratio. Questions How can I prevent content from being cut off when using the sheet in iPad mini landscape? Is there a better approach to handle Stage Manager resizing dynamically? Any insights or alternative approaches would be greatly appreciated! 🚀 Also, I’m a designer, and I’m doing this to help our development team—so please bear with my code 😅 Thanks in advance! 😊
Topic: Design SubTopic: General
1
0
661
Feb ’25
Code d’invitation TestFlight
Bonjour à tous, je voudrais savoir comment avance mon dossier sur les applications que j’ai créé,comment puis-je faire? Et sinon quelqu’un connaît-il la Durée exacte quand APPLE envoie le code de vérification pour mes applicationà!???
Topic: Design SubTopic: General
1
0
479
Mar ’25
Got Some Error while build of my Application
Showing Recent Errors Only Prepare build error: Multiple commands produce '/Users/mayankjain/Library/Developer/Xcode/DerivedData/PCS_EmpApp-chsylqbxjptobeawzzckymqzagvr/Build/Products/Debug-iphonesimulator/PCS_EmpApp.app/Info.plist' note: Target 'PCS_EmpApp' (project 'PCS_EmpApp') has copy command from '/Users/mayankjain/Documents/05-NOV-2025-SWETA_IOS/PCS_EmpApp/PCS_EmpApp/xcode-out/Platforms/iOS/Info.plist' to '/Users/mayankjain/Library/Developer/Xcode/DerivedData/PCS_EmpApp-chsylqbxjptobeawzzckymqzagvr/Build/Products/Debug-iphonesimulator/PCS_EmpApp.app/Info.plist' note: Target 'PCS_EmpApp' (project 'PCS_EmpApp') has process command with output '/Users/mayankjain/Library/Developer/Xcode/DerivedData/PCS_EmpApp-chsylqbxjptobeawzzckymqzagvr/Build/Products/Debug-iphonesimulator/PCS_EmpApp.app/Info.plist' Multiple commands produce '/Users/mayankjain/Library/Developer/Xcode/DerivedData/PCS_EmpApp-chsylqbxjptobeawzzckymqzagvr/Build/Products/Debug-iphonesimulator/PCS_EmpApp.app/Info.plist'
Topic: Design SubTopic: General
0
0
666
Nov ’25
Icon looks broken on the App Store
Hi, I just had V1.0 of my app approved on the App Store and I immediately noticed that the icon preview is broken. It looks good in Xcode, on-device and also in the App Store link preview. The icon was built with Icon Composer. Here's the difference (left is App store): Has anyone encountered the same issue and found a solution?
1
0
525
2w
Some variable SF Symbols don't work.
Some SF Symbols (wifi for example) render fine with the variable. But many, mostly ones with the circle being variable, do not seem to work. The SF Symbols app shows them rendering with a variable fine. But in code it doesn't work. Am I missing something or is there a reason? var body: some View { HStack { Image(systemName: "01.circle", variableValue: 0.5) Image(systemName: "figure.wave.circle", variableValue: 0.5) Image(systemName: "wifi", variableValue: 0.5) }.font(.largeTitle) } }
Topic: Design SubTopic: General Tags:
0
0
1.2k
Dec ’25