NEW: My new book Pro SwiftUI is out now – level up your SwiftUI skills today! >>

Struggling with designing UI

Forums > SwiftUI

Unusually for me, I have a non-technical question (at least as far as the coding side goes).

I'm developing an app that I'm hoping will help in my day job and although I've managed to get most of the back end sorted, I've hit a wall with developing the main 'dashboard' interface that is the most critical aspect of the app. I just can't seem to settle on a design that looks "right" to me or, most importantly, user friendly. It's a medical (specifically, veterinary) clinical app so I'm struggling to find examples of UI design in the usual places such as Dribble or Pinterest as many of the controls and infographics are niche and domain specific.

Courses such as Design+Code haven't helped much either; the outputs are attractive but it's not helping me decide on information hierachy, etc, etc.

Any thoughts or guidance on where I can access resources on this aspect of app design would be much appreciated as I'm dead in the water unless I can get a prototype together that looks half way professional (or usable)

Cheers Adrian

   

If you have the advantage of using SwiftUI, you should be in a good spot if you stick to the native views and controls available to you in the standard libraries. Try not to overdesign your own lists, or your own charts, or your own tables.

For a table, try to leverage LazyVGrid, or LazyHGrid. Or make an extension for SwiftUI based off of the UIKit CollectionView type.

As for text, try to stick to native and adaptive font system (pretty much standard with the native set of development tools).

You can also use SF Symbols (highly recommended by Apple to make your app look more native and representative of an iOS product).

As for more softer niche aspects of design, try to stick to an 8-based pixel padding and margin system. Don't deviate from this, and whatever data you display or elements you configure will tend to look good together since they obey the same "grid" or "gutters".

As you get a grip on some non-offensive layouts for your app, you can build on that confidence and maybe tweak your views to your liking.

The more you build, try to make components out of things. This comes in the form of creating your own re-usable view modifiers (so you don't need to keep redesigning and rewriting the same shadow effect everywhere, for example). Or, make a view that is a general button view, and you don't rewrite the button code everywhere redundantly.

Such techniques can help you create something simple and consistent, which is key for starting out. Since it is a veterinary/clinical app, you don't need to impress anyone with the shinest most custom-designed visuals.

Something that helps too is sticking to a simple color theme. Pick 3 or 4 colors, and don't deviate. Background, Foreground, Primary, and Accent. Stick to those same colors for the entire app.

When in doubt, try to stick to native examples and leverage that until you find the need to make it more custom. You should be able to go far with this starter knowledge. What helps me is studying both web and mobile design blogs to get inspiration and ideas.

I know you've said you went through Design+Code and other resources, so this may be a redundant link, but it's still worth sharing IMHO because going back to the basics when you feel something is difficult to achieve really helps a lot.

https://developer.apple.com/design/human-interface-guidelines/guidelines/overview/

   

Hacking with Swift is sponsored by MadMachine

SPONSORED Want to try Swift on microcontrollers? MadMachine provides ways to interact with the physical world in a Swift way. Join us and have fun!

Get it now

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.