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

Maintain app icon contrast when switching to grayscale mode
Context & Issue I am developing an iOS application. My app icon uses colors that are relatively close to each other. When the user enables Accessibility → Display & Text Size → Color Filters → Grayscale (or similar modes), the icon becomes harder to distinguish because it loses color and contrast is reduced. Goal When iOS switches to grayscale mode, I want the app icon to maintain good contrast between its elements so it remains clearly recognizable. What I’ve tried Redesigned the icon with more contrasting colors. Added strokes/outlines, but it still doesn’t look much better in grayscale. Researched how iOS renders app icons when grayscale is enabled, but couldn’t find a way to override or provide an alternative icon. Specific questions Is there any API or mechanism in iOS that allows providing a different version of the app icon when the user has grayscale mode enabled? If there’s no direct API, are there any best practices for designing iOS app icons to ensure good contrast when converted to grayscale? Do we have to design grayscale version for app icon? Thank you!
0
0
280
Aug ’25
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
iPhone screen glare
Feedback for iPhone and iPad – Display Technology Dear Apple Team, Currently, the mainstream display technology used in iPhone and iPad is OLED. However, OLED panels produce significant PWM flickering, which strongly irritates the human eye. Many users, especially in China, experience eye strain, tearing, and discomfort after using OLED devices for a period of time. There is a large group of users here who are highly sensitive to screen flicker and therefore cannot use OLED-based devices at all. What they truly need is an eye-friendly device with either LCD or flicker-free Mini-LED display technology. I sincerely recommend that Apple consider offering iPhone and iPad models with LCD or Mini-LED panels. Such displays could provide better eye comfort, no flicker, and a healthier experience. Currently, almost no smartphone manufacturers in China provide such options, and even if they do, their devices often come with outdated chipsets and cannot be used as a reliable daily driver. This presents a valuable opportunity for Apple: by addressing this demand, Apple could attract a unique customer base, increase sales, and even justify a slightly higher price, as many customers would be willing to pay more for the sake of their eye health. In the Chinese market, a truly flicker-free iPhone or iPad would be incredibly rare and highly desired. Thank you for considering this suggestion. I truly hope Apple will take this into account.
Topic: Design SubTopic: General
1
0
361
Aug ’25
Images added in Reality Composer look darker in AR
I’m working with Reality Composer and noticed that images added directly to a scene appear significantly darker when viewed in AR. This seems different from how other objects in the scene respond to lighting, especially under varying real-world light conditions. Is this expected behavior? Are images treated with a different lighting model in Reality Composer? Is there any recommended way to get more consistent light response for image-based artworks?
Topic: Design SubTopic: General Tags:
0
0
256
3w
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
95
Jun ’25
How to get a truly clear glass effect for a circle
I'm using .glassEffect(.clear) on a transparent circle over a gradient background. While it's closer to clear than the plain glass effect, it't not really clear, like clear glass. Here is the code. Is there a glass effect that really looks like clear glass? Circle() .fill(.clear) .frame(width: 180, height: 180) .glassEffect(.clear)
Topic: Design SubTopic: General
1
0
853
Oct ’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
686
Oct ’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
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
728
22h
Need clarify the behavior of QR Code button on `Tap to Pay on iPhone` Figma design
Hi Apple team, We're planning to integrate Tap to Pay on iPhone feature in our product, and found there's a QR code button on the your Figma design: https://www.figma.com/design/2SOXmeLvimllvT67MTMLOy/Tap-to-Pay-on-iPhone--Community-?node-id=0-1&t=E3XskpsLctTuZvg5-1 Questions: is there any official documentation about the QR code button on this screen? What happens when user clicks on QR button? What're the suggestions to show/hide that button, and can we customize it? Thanks.
0
0
747
2w
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
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
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
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
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
Handling Context Save Errors
I was wondering if errors are common for the code below for saving SwiftData data and what would be the best way to handle them (popup, closing the app)? do { try modelContext.save() } catch { print("error") }
Topic: Design SubTopic: General Tags:
1
0
223
2w
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