Visual Design

RSS for tag

Discuss animation, branding, color, layout, typography, and other elements of great looking apps.

Posts under Visual Design tag

32 Posts
Sort by:
Post not yet marked as solved
3 Replies
893 Views
Hello, I have this widget: And as you can see down at the bottom, next item is very barely visible. This is because on different devices (combined with varied text sizes + number of lines) the vertical space differs quite a lot. In the past I had the limit set to 4 items in the bottom part but that often left empty space at the bottom or even overflowed still on iPhone SE. What is the proper way to tell ForEach (or any other component) to "layout as many items as can fully fit, but no more". The only solution I could think of is to use ViewThatFits and try first rendering 6 items, then 5 and so on to find the count that fully fits. But that seems maybe too complicated? Thanks.
Posted
by nemecek_f.
Last updated
.
Post not yet marked as solved
3 Replies
1.3k Views
I am facing an odd problem with the global accent color in a macOS application targeting macOS 11 +. The color is defined in an asset catalog and its name is set as the value of the key Global Accent Color Name in the project's build settings. Despite this, the custom accent color is not applied uniformly throughout the application when the system accent color is set to multicolor. Anywhere where NSColor.controlAccentColor is used explicitly either in code or interface builder, the color is correct. However, wherever the use of the accent color (or its variants) is implicit, the blue system accent color is used instead. This includes the selection in NSMenus, the selected state of NSSegmentedControls, the selection NSOutlineView using the source list style, NSSwitch, NSPopUpButton, NSButton, etc. This problem occurs in both light and dark modes, on macOS 11 and macOS 12. I have compiled the application with Xcode 12.5, and multiple versions Xcode 13. I have found that modifying the system accent color to something other than multicolor and then back to multicolor fixes the problem, but only until the application is quit. At the next launch, the problem reappears.  I have tried all sorts of changes such as: Setting the value directly in info.plist Adding the value in an xconfig file: with the key ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME Forcing views to redraw Renaming the color in the asset catalog Creating a minimal application in an attempt to reproduce the problem. The closest I have come to a solution is investigating in detail the effective appearance of the application, from the property NSApplication.sharedApplication.effectiveAppearance.  The object returned is of the class NSCompositeAppearance. It contains an array of 2 appearances: an NSAquaAppearance or NSDarkAquaAppearance and an NSSystemAppearance.   Two private properties of NSAquaAppearance/NSDarkAquaAppearance are of interest: _tintColor and _cachedNormalizedBezelTintColor. These properties seem to set the color of standard controls. In my problematic application, _tintColor returns the system blue accent color. In other applications without these problems, _tintColor points to the color defined in the asset catalog. _cachedNormalizedBezelTintColor seems derived from _tintColor.  Using key-value coding, I am able to modify these properties and change the appearance of most but not all controls, buttons, and selections. However, I do not want to use private properties and this is just masking the symptom of the real problem. Has anyone experienced this problem with the global accent color? What was the solution?
Posted
by Emilia_S.
Last updated
.
Post not yet marked as solved
1 Replies
582 Views
I think there should be definitely more colors for the emoji hearts. Especially dark blue, dark green and dark purple and in general more multicolored hearts which fit into the fall aesthetic of many apple users.
Posted
by msiebje.
Last updated
.
Post not yet marked as solved
2 Replies
431 Views
I have a base view which displays a number of subviews at fixed positions. Its for laying out tables in a restaurant. The base view is an image of the restaurant floor, the subviews are images of tables. The user can click on a table and drag it about - so far so good, all working. Tables should only be placed in certain places, for arguments sake we'll say every 100 pixels (x and y) in the base view. While the user drags the table about smoothly, I'd like a "shadow" rectangle to snap to just the nearest available place that's allowable like it's saying "this is where the table will snap to when you drop it" Can someone help this old dinosuar by explaining how to include a temporary rectangle in a SwiftUI view that updates it's position during the DragGesture of the table? Thank you!
Posted Last updated
.
Post not yet marked as solved
0 Replies
379 Views
Hello, I want to create a UI in which there are 4 main tabs representing individual views/screen (Just like the one in AppStore app). Now for some of the screens, I want to show the content of it using Master-Detail view - Just like iPad Messaging app where message list is in the master view and chatting is in the detail view. The TabView must remain visible to the users to navigate through all 4 views/screens. To show both, TabView and Master-Detail view, in one screen, I get to see 2 options. Show the TabView in MasterView section. In my opinion, this option is fundamentally a malpractice in perspective of UX. Because TabView is representation of shortcut of all 4 screens and user will use them to navigate through different screens, we must not restrict TabView in any other view. TabView must be placed at the top most hierarchy of the application. Keep the TabView in the top-most hierarchy and show in full width like it is shown in the AppStore app, and when user taps of any of the tab, the view that appears would have the Master-Detail View. Now in this one, I have concern of me manipulating the concept of Layout designs and worse UX. I am looking for the right way to implement such functionality with a good and UI/UX. Thank you.
Posted Last updated
.
Post not yet marked as solved
1 Replies
401 Views
Hello , i am a tech i fix phones on the side as a second source of income, Apple, can you design a back that is as easy to take off as the front with clip or locking system, instead of using the glue to bond the glass back to the frame, this is a headache for most techs people who do not have the funds to buy the laser glue blasting machine, can you guys go back to the drawing board and design a new concept for the back to make it easy to fix. thank you.
Posted Last updated
.
Post not yet marked as solved
1 Replies
416 Views
I have a fairly standard app for visionOS, created using SwiftUI. I have not added any customization, so I regard this "out of the box" graphics. Legibility is far too low. I know I can change that, but by default, SwiftUI should generate UI elements that are within WCAG2 specs.
Posted
by jlv.
Last updated
.
Post not yet marked as solved
0 Replies
476 Views
I am having a problem configuring popup buttons for a macOS application, using the Interface Builder mechanisms of Xcode (14.3.1). I am prepared to report the issue as a bug, but I thought I would check here to see if I had overlooked something in my configuration efforts: Briefly, I wish to have a popup button in my app's main window (not in the menu bar), that has a bezel color of "System Orange Color" and that uses white lettering for its title. My app has a lot of buttons, and for all the other button types I have used, when I set the bezel color to System Orange or to some similarly dark-ish color, the title lettering automagically comes up white. That of course also happens for the popup buttons that are part of the menu bar -- their titles have white lettering -- but when I place a popup button in the main window of my app, its title comes up with black letters no matter what I do. This is solely an aesthetic problem -- the popup button works perfectly well, it just looks out of place because its lettering doesn't match the other buttons. The misbehaving popup button is configured via Xcode only -- no commands sent from code. Its Xcode configuration settings include Pull Down, No Arrow, Bevel, Momentary Push In, System Orange Color, System Regular (font), and No Image.
Posted
by Knightley.
Last updated
.
Post not yet marked as solved
0 Replies
487 Views
Has anyone paid a graphics designer to produce custom SF Symbols for them? Would you care to share your experiences? I paid for some custom graphics a decade ago; the results were OK but not amazing. I forget how I found that guy. No doubt everything has changed since then.
Posted
by endecotp.
Last updated
.
Post marked as solved
1 Replies
774 Views
I have a ToDo list app with an accompanying widget that displays upcoming items with an 'n more...' label at the bottom if they don't all fit. At the moment the number of rows is hard-coded based on widget family (4 for small and medium, 11 for large). How do I make the row count and 'more' text adjust for dynamic type sizes? Small and medium fonts should display 4 rows while large will only fit 3 before content is pushed off the bottom.
Posted
by picnicbob.
Last updated
.
Post not yet marked as solved
0 Replies
592 Views
See attached screenshots. How can this design be reproduced in SwiftUI? The capsules are positioned to represent the values. But the calculation needs to take into account the labels width. I tried using a mix of Grid and custom Layout but I haven’t found a way… Any help would be appreciated! Thanks
Posted
by alpennec.
Last updated
.
Post not yet marked as solved
0 Replies
648 Views
Hi, I´m new at develping in the Apple and SwiftUI environment. My friends and I got an idea to create a simple Fitness app to track down our own exercises and activities. For now we got some concept ideas how the design should be. But for now 4 days I´m watching out for any possible way to create thies small animation. I ´m trying to create this little animation like thy are in the Fitness WatchApp. If you know hou to create those animation: please write it down. Thanks for advance
Posted
by Paule201.
Last updated
.