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.

Learn about designing great app and game experiences

Posts under General subtopic

Post

Replies

Boosts

Views

Activity

About tvOS Material (design resource)
I noticed a discrepancy between the Material specifications for tvOS on the Developer page and the naming in the Design Resources (Sketch files). Which one should we consider authoritative? https://developer.apple.com/design/human-interface-guidelines/materials
1
0
105
Apr ’25
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
Correct way to handle 2 to 3 column switch
I'm using a NavigationSplitView on macOS which needs to show 2 or 3 columns depending on the selection of the sidebar. Column 1 has a list of main activities. Some of these just have some data to show and some have a sublist. Currently, when an item that has no sublist is selected, I set the 2nd column (content:) to: Spacer() .navigationSplitViewColumnWidth(0) This works, although it started hitting bugs requiring a workaround on macOS 26, which got me wondering, what is the correct approach here? NavigationSplitViewVisibility.doubleColumn is not the solution, as this hides column 1, not column 2.
Topic: Design SubTopic: General Tags:
0
0
817
Oct ’25
Poor Rendering of Liquid Glass Icon on Device
Hey there, I redesigned my apps icons for Liquid Glass in the icon composer app. I have to say it's been a pleasure to use and my icons look stunning when rendered in the icon composer app, whatever rendering mode and context I've been testing. But once in a developer release on my device (iOS 26 beta 3), the rendering is very disappointing. They look blurry, very far from what icon composer is showing. I would like to know whether I have a design issue, or if the current state of the beta release is known to not render icon properly. I'm kind of panicking :)
Topic: Design SubTopic: General
1
0
1k
Jul ’25
Macos26 Tahoé is Hell with "Relocated Items"
I just discover that feature (a folder lost in the middle of others desktop folder ). so with each updates: -/usr/local is emptied -somes apps in the Application folder, are deleted, even paid apps .. -i lost : Docker, python 3.13, latexlive2025, Apache NetBeans, java install, Affinity Publisher 2, all my 3D slicers ... github desktop, Epic Games Launcher, ........ 296go of apps Franckly : c'est la merde !!! I am using a MacBook Pro 16" 2019 any way to stop this behavior ? thank you !!!
Topic: Design SubTopic: General
0
0
674
Sep ’25
Titles and Header Auto Changing Color?
I have some questions about Liquid Glass and iOS 26 on the iPhone. Routine scrolling transactions in any view are causing the title to change from Light Mode colors to Dark Mode colors. Is this now standard operation? The column headers are also displaying a black stripe across the top of the screen when scrolling. So why doesn't the display shift when in Dark Mode to Light mode? Scrolling is causing everything in the header (navigation title, time, battery status, and wi-fi status) to change from black to white. Is this an accessibility action that I may have turned on by accident? I'm not very thrilled by this behavior!
Topic: Design SubTopic: General Tags:
7
0
754
1d
Suggestions on macOS and iPad app structure
Building an app to edit the various parameters of digital musical instruments. A typical user would have perhaps max 6 instruments, out of the hundreds of possibilities. Would like to structure the app with a global window, menu, etc which would be a free download. The user could download editor inserts for their particular set of instruments and ignore all of the others. The downloaded editors would show as options in a menu. It seem like more than a widget but less than a library. Building a monolithic app containing all possible editors doesn't seem like an option, but separate full-app editors for each piece of gear doesn't sound right either. Any suggestions out there? Thanks very much Brian
0
0
121
May ’25
App Release
While doing production release of app, I was not able to see phase release option like in my previous releases. Due To whihc when I released. the app , it got released to 100% users. I want to know why phase release option was not showing up in my dashboard
Topic: Design SubTopic: General
2
0
623
Feb ’25
iOS Screenshot Markup – Rounded Crop Tool (UI Concept)
🔍 Context The built-in screenshot editor in iOS and iPadOS (Markup tool) only allows users to crop images using rectangular frames. While this is sufficient for basic editing, it lacks flexibility for those who wish to tailor the screenshot to the aesthetics of iOS itself — which relies heavily on rounded shapes and smooth UI elements. ⸻ 🚫 Current Limitation • After taking a screenshot and opening it in Markup, users can only crop in rectangular or square formats. • No option is available to apply rounded corners to the crop. • As a result, many users are forced to use third-party apps just to achieve a basic rounded-edge crop, which feels unnecessary for such a common need. ⸻ ✅ Proposed Solution Add a rounded corner cropping feature to the screenshot editor. This could be implemented as: • A toggle to activate “Rounded Crop”. • A radius slider (or predefined corner radius presets). • Optional: an export option to save the result with transparent background, useful for designers and mockups. ⸻ 🎯 Why it matters • Aligns better with the iOS design language (cards, notifications, widgets, etc.). • Saves time for users who currently have to rely on external editing apps. • Greatly improves the presentation of screenshots for social media, UI/UX mockups, blogs, and professional use cases. • Useful across many professions: developers, designers, content creators, educators, marketers. ⸻ 📷 Visual Example Here’s a mockup to illustrate the proposed feature: (Add your image here) ⸻ 💡 Bonus Suggestion Allow exporting with a transparent background when cropping screenshots — especially useful for rounded crops or mockups placed on colored backgrounds.
Topic: Design SubTopic: General
1
0
276
Aug ’25
MusicKit design guidelines
Hi community, I have a question regarding MusicKit, is it necessary to follow a design guideline to integrate this framework into my App? Also, when no music is reproducing in MusicKit which placeholder we should show, do you provide the resource? Or can we create our own placeholder? Thanks for all, David.
1
0
669
Feb ’25
Getting original LocationNode from hit tested SCNNode
I would like to modify the content of a published LocationNode upon been clicked by the user. But unfortunately: func hitTest(_ point: CGPoint, options: [SCNHitTestOption : Any]? = nil) -> [SCNHitTestResult] returns an SCNNode array from which it is impossible to retrieve the original LocationNode being inserted in order to be able to modify it. Of course the solution would be to either insert the SCNNode corresponding to the inserted LocationNode in a custom class or conversely insert the identifier of the custom object as a tag of the LocationNode, in order to solve the issue. But both options seem impossible to implement. May anyone help me?
1
0
110
Apr ’25
Make default Standby clock
Is there any way to lock the clock in Standby so it doesn't change? It is so frustrating when I put the phone on the charger and have to scroll back and forth, trying to find the clock I would like to use all the time.
Topic: Design SubTopic: General
1
0
587
Feb ’25
Struggling creating a custom SF Symbol: The provided variants are not interpolatable
Hi, I am trying to create a custom SF Symbol from an SVG file created with Affinity Designer but, even though my SVG file look perfect in Firefox for example compared to the exported custom.circle.svg file (as recommended in Apple's documentation), I fail to get rid of this error: "The provided variants are not interpolatable" My creation process using Affinity Designer is: Export as SVG file Duplicate the custom.circle.svg file exported from the SF Symbols app In the new file, replace the 3 "path" tags in the "g" sections "id="Black-S", "Regular-S", "Ultralight-S" with the paths from the SVG file exported from Affinity designer Set the 3 transform matrices to "matrix(1 0 0 1 0 0)" for the 3 variants to be generated at the correct location. Verify in an SVG viewer that the file looks correct. Import the file via Drag&Drop into the SF Symbols app. What is wrong with my file? Thank you in advance for any help, Marc mySymbol.svg.txt
Topic: Design SubTopic: General Tags:
3
0
176
Jun ’25
WebView some of fonts became too small on ios 18.4 and on latest safari
Below is the sample css code where I render a web page in my webview screens fonts became too small after 18.4 and its so hard to read when I launch my app . Any workarounds to address this issue .sg-labels-canvas { font-size: 15px; display: flex; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Roboto, sans-serif; font-style: normal; }
Topic: Design SubTopic: General
1
0
99
Apr ’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
How to create a custom SF Symbol using Affinity Designer
When I first tried to create a custom SF Symbol using Affinity Designer, I encountered difficulties because of two problems which have cumulated: SVG files created by Affinity Designer cannot be directly imported into the SF Symbols app because Affinity Designer totally recreates the content of tag <g id="Notes">, making so the file incompatible for later import into the SF Symbols app. So I had to manually fix that tag via a text editor in order to make the file compatible with the SF Symbols app. Because I was so focused on fixing manually the SVG file, I did not see that the actual content of my SVG file did not follow all Apple recommendations. As a consequence, I have posted this question on the forum: Struggling creating a custom SF Symbol: The provided variants are not interpolatable Finally I have found a way to create an SVG file compatible with SF Symbols using Affinity Designer, meeting the Apple recommendations, and at last perfectly suitable for further use in Xcode. You will find the solution in my reply to this post below which is actually a quasi copy/paste of my final own reply to my original post. Marc
Topic: Design SubTopic: General Tags:
1
0
183
Jun ’25
Core database relationship are only partially updating.
I created a data structure based on a dictionary of words. The purpose is to link each word to all other words made up of the same letters plus one. Example: table -> ablate, cablet, tabled, gablet, albeit, albite, etc. For this I built a data model made of three entities: Word, Draw, Link. A Draw is a set of letters corresponding to a Word and sorted in alphabetic order, like : HOUSE -> EHOSU. A Link is a letter that you add to a Draw to get another Draw. So my data model looks like this: And here is how I implemented it in Xcode: Entity Word (let's forget the attribute optComp that plays no role here) Entity Draw Entity Link I am populating the data in two steps: first I read a list of words from a .txt source and I populate the Word entity and at the same time the Draw entity with the corresponding relationship (function loadDic()) This first step apparently works fine. I can easily find all anagrams of any word with something like word.sort.word.spelling I read through the Draw entity. For each draw I seek all existing +1 draws considering each letter of the alphabet. If there are, I create a Link and add the relationships (function createLinks()) Here is where something goes wrong. If the Link's and the relationship Draw.plus seem to be correctly created, the other relationship Link.gives is only partially populated, say 50%. Moreover, I tried to apply an additional routine (updateLinks()) , focusing only on Link's with an empty Link.gives relationship and updating them. But again, only 50% of the nil relationships appear to be populated. I could not find out why those relationships are not properly populated. If someone can help me out I would be grateful. Here is the code: LoadDic() function (OK) : func loadDic() { print("Loading dictionary...") dataAlreadyLoaded.toggle() guard let url = Bundle.main.url(forResource: INPUT_FILE, withExtension: "txt") else { fatalError("\(INPUT_FILE).txt not found") } if let dico = try? String(contentsOf: url, encoding: String.Encoding.utf8 ) { let lines = dico.split(separator: "\r\n") for line in lines { let lineArray = line.split(separator: " ") print("\(lineArray[0])") // word let wordSorted = String(lineArray[0].sorted()) let draw = getDraw(drawLetters: wordSorted) ?? addDraw(drawLetters: wordSorted) // look if draw already exists, otherwise create new one. let wordItem = Word(context: viewContext) // create word entry with to-one-relationship to draw wordItem.spelling = String(lineArray[0]) wordItem.optComp = (Int(String(lineArray[1])) == 1) wordItem.sort = draw do { try viewContext.save() } catch { print("Errort saving ods9: \(error)") } } } print("Ods Chargé") } func addDraw(drawLetters: String) -> Draw { let newDraw = Draw(context: viewContext) newDraw.draw = drawLetters return(newDraw) } func getDraw(drawLetters: String) -> Draw? { let request: NSFetchRequest<Draw> = Draw.fetchRequest() request.entity = Draw.entity() request.predicate = NSPredicate(format: "draw == %@", drawLetters) do { let drw = try viewContext.fetch(request) return drw.isEmpty ? nil : drw[0] } catch { print("Erreur recherche Tirage") return nil } } createLinks() function (NOK): func createLinks() { var erreur = " fetch request <Draw>" let request: NSFetchRequest<Draw> = Draw.fetchRequest() request.entity = Draw.entity() request.predicate = NSPredicate(value: true) print("Building relationships...") do { let draws = try viewContext.fetch(request) count = draws.count for draw in draws { print("\(count) - \(draw.draw!)") linkTable.removeAll() for letter in ALPHABET { print(letter) let drawLettersPlus = String((draw.draw! + String(letter)).sorted()) // draw with one more letter if let drawPlus = draws.first(where: { $0.draw == drawLettersPlus }) { // look for Draw entity that matches augmented draw let linkItem = Link(context: viewContext) // if found, create new link based on letter with relationship to augmented draw linkItem.letter = String(letter) linkItem.gives = drawPlus erreur = " saving \(draw.draw!) + \(letter)" try viewContext.save() linkTable.append(linkItem) // saves link to populate the one-to-many relationship of the initial draw, once the alphabet is through } } let drawUpdate = draw as NSManagedObject // populate the one-to-many relationship of the initial draw let linkSet = Set(linkTable) as NSSet drawUpdate.setValue(linkSet, forKey: "plus") erreur = " saving \(draw.draw!) links plus" try viewContext.save() count -= 1 // next draw } } catch { print("Error " + erreur) } print("Graph completed") } updateLinks function (NOK): func updateLinks() { var erreur = "fetch request <Link>" let request: NSFetchRequest<Link> = Link.fetchRequest() request.entity = Link.entity() print("Running patch...") do { request.predicate = NSPredicate(format: "gives == nil") let links = try viewContext.fetch(request) for link in links { let baseDraw = link.back!.draw! print("\(baseDraw) \(link.letter!)") let augmDrawLetters = String((baseDraw + link.letter!).sorted()) if let augmDraw = getDraw(drawLetters: augmDrawLetters) { viewContext.perform { let updateLink = link as NSManagedObject updateLink.setValue(augmDraw, forKey: "gives") erreur = " saving \(augmDraw.draw!) \(link.letter!)" do { try viewContext.save() } catch { print("Erreur mise à jour lien") } } } } } catch { print("Error " + erreur) } } RESULT And this is the output showing the content of the Draw entity with relationships after createLinks() is applied: And here after updateLinks() is applied :
2
0
991
Feb ’25
Spam 4.3 (a)
Hello everyone, I’ve reached out to Apple’s review team multiple times, but unfortunately, I haven’t received any clear or specific guidance on why my app was rejected. My app has been rejected several times with the reason “Spam” under guideline 4.3, and I still don't understand exactly which part of the app is problematic. Even after providing the necessary information about the data, I resubmitted the app, and after a few days, it quickly moved into "In Review" status, but then was rejected within seconds with the same “Spam” message. I have sent over 13 messages asking for specific feedback, and all I get are vague responses saying “It’s spam, refer to 4.3, fix your app, and resubmit.” However, when I review the guidelines, I don’t see any specific reasons for rejection that apply to my app. I’m particularly confused because my app is a VPN, and when I check the guidelines, I see that apps in categories like dating and others are saturated, but VPN apps are not. My app uses completely dedicated servers, and the IP addresses are not found in any other apps. Still, my app keeps getting rejected. If anyone has encountered a similar issue or has any insight into what might be causing this, I would greatly appreciate it if you could provide detailed guidance on what specifically needs to be changed to get the app approved. Thank you!
Topic: Design SubTopic: General
1
0
868
Mar ’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
184
Apr ’25