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

Future iPhone Innovations – Portless & Foldable iPhones
Dear Apple Innovation Team, I have a game-changing iPhone concept and want Apple to explore it first. 📱 iPhone 18 – The First True Portless iPhone No ports – MagSafe 2.0 with high-speed data transfer. Under-display Face ID & Camera – No security compromise. Seamless OLED Display – No interruptions, just pure screen. 📂 iPhone 20 – The Perfect Foldable Crease-free foldable design – Apple perfects what others failed to. Optimized iOS for foldables – Smooth UI & app integration. Apple leads the foldable market. 🚀 Why This Matters: Apple can set a new standard & dominate both innovations. Looking forward to your response. Best, Saksham Sethi
1
0
408
Mar ’25
My experience With IOS 26 Beta
Hello Apple Developers i am here write down my experience with the IOS 26 Beta first off i would like to say that i kind of do/don't like the new iquid glass UI/UIX Designs in some parrts of the ios like in m ust 3rd Party Apps like Uber Lyrith MJ Access Link Moblie app DoorDash VLC And Apple Music App just to name of few since i have installed the beta i have ran into a few bugs i have alread sent to the feeback app via iphone but i'm going to write them here as will i'm not looking for troubleshoots or tech support i'm just shareing my experience with the apple community and the Apple Development/Enginer Team to fine tone for release Time please note that i am a user with Vision impairment so please by respect to me due to my writteing issues and grammer and spelling so here i go my first bug that i ran into on the first day was when i was listening to some music trakcs in the apple muisc app when scrolling down or up fast the app will froze for mill secend then contiune as noraml my second bug that i ran into dureing music play was with my Crossfade settings not working on some tracks im not sure if this is due to BMP alignment or AI algorithm integration with in the software itseif but for me this takes me out of the listening experince that i have when i enjoy listening to music My suggestion Move the AutoMix and Crossfade Settings in to the Apple Music its seif and give the user more controll over how long or how short they want the crossfade or autmix to happen dureing the ending of each tracked play also for the cross fade option is set at 12 increase this to 30 secs or more if possiable or add an BPM options for the Automix to mix in the next track via BMP for simple of my rock track is at 148 BMP the next track should be pop or kpop or rap synceing up with that same BMP speed or similar at 148 BMP my next suggestion for the Apple Music App Shameless track mode (this mode to can be Incorporated) in to the Automix Featrue this redue some music tracks that ends abruptly some MP3 tracks added outside of the Apple Music App seems to broke dureing playback My 3rd bug that i ran in to with the Glass UI for controll Center like i stated before i am Vision impaired with the clear Glass over lapping the current UI for me this hard for me to tell what icons i am looking atside from the Voolum and Brightness Bars i am asking please make this more dark theme and make the icons brigher or add name undernearth the icons or Flip the Dark them or dan the current UI over lapping the Controlor center or add White colors with Black Arrows/icons for all Apple App that has this Glass UI in side of cause this is driving me nuts My 4th Bug that i ran into was with the lock screen/restart/reboot ohh girl where do i began with this one let's with the notifications i don't know who through it was a good idea to have a Clear Bright UI over lapping the Notifications this is very annoying via imessage Texting cause my custom wallpaper Blends in with a white background and this is Worst My suggestion for this is very simple darkering the background on the lock screen abit more so the text is more reader or increase the Notification bars (this is for users like myseif that use Dark mode) My 5th Bug involves my Back ups/Restore/Corrupated < is seif explanatory when i tryed to downgrand back to Version 18.5/18.6 nothing happened so please fix this or make it a bit more easyer for users to be able to back up/Retore their Devices now i has to wait until (Tomttow morning Friday) to factory reset my phone my conclusion since Beta Users and Developers and Engiers are Still testing please take look at my suggestion and try to bring not all but some of them in to public Release Thank You! Update i would like to Downgrad from IOS 26 Developer Beta back to IOS 18.5
0
0
175
Jun ’25
New to macOS Development. How Do I Build a Timeline Editor UI Like Logic Pro?
Hi everyone, I’m new to macOS development and working on an app idea that needs a timeline-based editor interface, similar to what you see in Logic Pro or Final Cut. The UI I want to build would have: A horizontal beat ruler that follows BPM and shows beat positions Several vertical tracks stacked below it (for things like events or markers) Horizontal zooming and scrolling A preview panel on the right side that stays in sync with the timeline I’m currently trying this in SwiftUI, but I’m running into some limitations and wondering if AppKit would be a better fit, or maybe a hybrid of the two. My questions: Where should I start when building something like this? What’s the best way to make the beat ruler and all track layers scroll together? How should I handle zooming in/out and syncing the display to a BPM timeline? Is there a clean way to integrate AppKit for the timeline view while keeping SwiftUI elsewhere?
1
0
130
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
86
Jun ’25
(tvOS) Categories or Selection Menus Don't Fit the Design
Hi everyone, I'm currently working on my own Apple TV app. So far, things are going pretty well, but right now, I'm stuck on the design of the categories or selection menus. Here's a screenshot of how it looks right now: The green color and the border are intentionally added for now so I can see what is where. My actual goal is to remove the gray bar (or is this the "main bar"?). The pink bar and its border are just design elements that can be removed if needed. I want it to look more "original," like this: Here is the code: let title: String let isSelected: Bool var body: some View { HStack { Text(title) .foregroundColor(isSelected ? .black : .white) .font(.system(size: 22, weight: .regular)) .padding(.leading, 20) Spacer() Image(systemName: "chevron.right") .foregroundColor(isSelected ? .black : .gray) .padding(.trailing, 20) } .frame(height: 50) // Einheitliche Höhe für die Kategorien .background(Color.pink) // Innerer Hintergrund auf pink gesetzt .cornerRadius(10) // Abrundung direkt auf den Hintergrund anwenden .overlay( RoundedRectangle(cornerRadius: 10) .stroke(Color.green, lineWidth: 3) // Äußerer Rahmen auf grün gesetzt ) .padding(.horizontal, 0) // Entferne äußere Ränder .background(Color.clear) // Entferne alle anderen Hintergründe } } struct SettingsView_Previews: PreviewProvider { static var previews: some View { SettingsView() } } I’ve adjusted the code, but it’s still not quite right. When a category is not selected, it appears black instead of gray, like in the original design Here is the code: struct SettingsView: View { @State private var selectedCategory: String? var body: some View { NavigationStack { ZStack { Color.black .edgesIgnoringSafeArea(.all) VStack(spacing: 0) { // Überschrift oben in der Mitte Text("Einstellungen") .font(.system(size: 40, weight: .semibold)) .foregroundColor(.white) .padding(.top, 30) HStack { // Linke Seite mit Logo VStack { Spacer() Image(systemName: "applelogo") .resizable() .scaledToFit() .frame(width: 120, height: 120) .foregroundColor(.white) Spacer() } .frame(width: UIScreen.main.bounds.width * 0.4) // Rechte Seite mit Kategorien VStack(spacing: 15) { ForEach(categories, id: \.self) { category in NavigationLink( value: category, label: { SettingsCategoryView( title: category, isSelected: selectedCategory == category ) } ) .buttonStyle(PlainButtonStyle()) } } .frame(width: UIScreen.main.bounds.width * 0.5) } } } .navigationDestination(for: String.self) { value in Text("\(value)-Ansicht") .font(.title) .foregroundColor(.white) .navigationTitle(value) } } } private var categories: [String] { ["Allgemein", "Benutzer:innen und Accounts", "Video und Audio", "Bildschirmschoner", "AirPlay und HomeKit", "Fernbedienungen und Geräte", "Apps", "Netzwerk", "System", "Entwickler"] } } struct SettingsCategoryView: View { let title: String let isSelected: Bool var body: some View { HStack { Text(title) .foregroundColor(.white) .font(.system(size: 22, weight: .medium)) .padding(.leading, 20) Spacer() Image(systemName: "chevron.right") .foregroundColor(.gray) .padding(.trailing, 20) } .frame(height: 50) // Einheitliche Höhe für die Kategorien .background(isSelected ? Color.gray.opacity(0.3) : Color.clear) // Hervorhebung des ausgewählten Elements .cornerRadius(8) // Abgerundete Ecken .scaleEffect(isSelected ? 1.05 : 1.0) // Fokus-Animation .animation(.easeInOut, value: isSelected) } } struct SettingsView_Previews: PreviewProvider { static var previews: some View { SettingsView() } }
0
0
554
Jan ’25
glassEffect() in SwiftUI always renders as white – even with latest Beta 2 on macOS 15
Hi everyone, I’m having trouble getting the new glassEffect() modifier to render correctly in SwiftUI. No matter what I try, it just appears as a solid white background (instead of translucent glass). This happens both in Beta 1 and Beta 2. My setup: • Mac mini (M4 chip) • macOS 15 Beta 2 (Tahoe) • Xcode 16 Beta 2 • Samsung Odyssey G9 57” monitor (super ultrawide) • Using Preview in SwiftUI (not the Simulator) Even when I use Apple’s default demo code like: Text("Hello World") .padding() .glassEffect()
Topic: Design SubTopic: General
0
0
109
Jun ’25
Feedback on the new Camera app icon in iOS 26
I’m currently using the iOS 26 Developer Beta and noticed the new icon design for the Camera app. Personally, I preferred the previous icon it looked cleaner, more elegant, and felt more in line with Apple’s signature iOS design language. The new icon feels more like something you’d expect from Android. It lacks the minimalist, refined style that usually defines iOS icons. I understand UI evolves over time, but this change feels like a step away from what makes Apple’s design philosophy unique. Just wanted to share this honest feedback as a long-time user and developer. Thanks for considering!
Topic: Design SubTopic: General Tags:
2
0
170
Jun ’25
HotKey support for sandboxed apps
App design: macos, Xcode 16.4, Sequioa 15.5, it is sandboxed Uses: Pods->HotKey for a global hotkey which xcode says "binary compatibility can't be guaranteed" This app is on the Apple Store and supposedly apps on the Apple Store can't use global hotkeys. Someone internally, installed it from the store and the global hotkey works just fine. I'm concerned for two potential problems; I need to find a hotkey library or code that is known to work with a sandbox'd Apple Store app. Why is it working now when everything I have read says it shouldn't.
0
0
141
Jun ’25
Sketch templates for watchOS 11 / Series 10?
Hi, I'm getting started with designing and coding a watchOS app. I wanted to use Sketch to plan the UI before I dive into coding, but it seems like the official Sketch templates on the Design Resources page only have templates for the Series 8 and SE 2 on watchOS 10. I want to use the Series 10's screen size for my layouts since it's the model I have, but I can't find a template for it. Will the official templates be updated for the new models? If not, does anyone know of a third-party template I can use? Thanks in advance!
Topic: Design SubTopic: General
0
0
88
Mar ’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.3k
Jun ’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
755
Jul ’25
glassEffect() in SwiftUI always renders as white
Hi everyone, I’m having trouble getting the new glassEffect() modifier to render correctly in SwiftUI. No matter what I try, it just appears as a solid white background (instead of translucent glass). This happens both in Beta 1 and Beta 2. My setup: • Mac mini (M4 chip) • macOS 26 Beta 2 (Tahoe) • Xcode 26 Beta 2 • Samsung Odyssey G9 57” monitor (super ultrawide) • Using Preview in SwiftUI, I use IOS 26 Beta 2 (not the Simulator) Even when I use Apple’s default demo code like: Text("Hello World") .padding() .glassEffect()
Topic: Design SubTopic: General
1
0
108
Jul ’25
Progress Ring Artifact
I'm working to emulate the Activity Rings featured in Apple's Fitness app. Here's a copy of what's in the swift file so far. // // ProgressRingPrototype.swift // Nutrition // // Created by Derek Chestnut on 1/13/25. // import SwiftUI struct ProgressRingPrototype: View { @State var progress = 0.00 let size: CGSize let thickness: CGFloat var color: Color? var gradientColors: [Color]? var body: some View { let color = color ?? .primary ZStack { RingPrototype( size: self.size, thickness: self.thickness, color: color.opacity(0.2) ) let gradient = AngularGradient( colors: gradientColors ?? [.primary, .secondary], center: .center ) let style = StrokeStyle( lineWidth: 32, lineCap: .round ) Circle() .trim(from: 0, to: progress) .stroke(gradient, style: style) .rotationEffect(.degrees(-90)) .frame(width: size.width, height: size.height) } .onAppear { DispatchQueue.main.asyncAfter(deadline: .now() + 1) { withAnimation(.easeInOut(duration: 1)) { progress = 0.75 } } } } } #Preview { ZStack { ProgressRingPrototype( progress: 0.1, size: CGSize(width: 256, height: 256), thickness: CGFloat(32), color: .primary ) ProgressRingPrototype( progress: 0.1, size: CGSize(width: 190, height: 190), thickness: CGFloat(32), color: .primary ) ProgressRingPrototype( progress: 0.1, size: CGSize(width: 124, height: 124), thickness: CGFloat(32), color: .primary ) } } Here's a snapshot of the live preview. I'm experiencing an issue where the trailing line cap generated by the stroke exceeds the start angle of the angular gradient, which creates an ugly artifact at 0 degrees. Anyone have a solution to this problem? Derek
Topic: Design SubTopic: General
0
0
323
Jan ’25