Amateur question

I use Xojo as a hobby and I’ve never had any software engieering classes. Until now, when creating an app, I’ve come up with the UI design myself. I’m not a designer either so it looks a bit amateurish, to put it nicely.

Just wanted to ask how you professionals go about the app UI. I assume you have some design company or single designer come up with some alternative designs and you select one? And then? Do you recreate the design in Xojo with the available controls, or do you use images provided, or both? Or do you do that in general?

Thank you!

Apple Human Interface Guideline, the original 1995 one:
http://interface.free.fr/Archives/Apple_HIGuidelines.pdf

and the actual one :
https://developer.apple.com/design/human-interface-guidelines/macos/overview/themes/

1 Like

Tbh, my experience is that users don’t really care. As long as an app does what they want, they’ll put up with even crappy UI. So follow the UI guidelines posted above and don’t stress about it.

2 Likes

Xojo will provide guidelines to dialog edges as you visually design.
after that, form follows function for me.
Try to use your designed pages for a few hours.
What make you stumble?
What slows you down?

Then ask a friend: look at this, and without touching anything, how would you do x, y and z?

1 Like

Similar to what @Jean-Yves_Pochez mentioned, here are the guidelines for a final program for multiple platforms: Human interface guidelines - Wikipedia

I typically create a skunkworks project that has: 1) very little functionality (usually the buttons are not programmed yet), 2) creates a really general high-level structure, 3) show the client in 1-week maximum.

The purpose is to get feedback from the client. Almost always, the design will not be what the client wants. I usually find that spending very little time and money and presenting something to the client significantly speeds development time, as I can get their input early on and make changes. This also addresses scope creep and appropriate billing with the overall changes to the cost of the project.

  • Listen to your users. Do they understand how to use the interface? Sometimes it’s only small things like now showing the beachball for long operations.

  • If others follow bad patterns it’s not a good reason to follow those, too. I’m looking at the stupid “enter email address, click to show the password field” here.

  • Give the user a modern interface with all the new gimmicks that Apple loves. Doesn’t always fit to the bad patterns. Dark mode, the stupid scrollbars, translucency, the stupid BS icons with outlines. Users love that, really.

2 Likes

While that may be true for desktop apps, there is so much competition on iOS that design does matter.

I started Xojo as a hobby too. Working on side-projects until I decided to start my company 5 years ago.

My first iOS app was horrific in terms of UI.
Then I discovered ui8.net and bought a travel theme which I used to make Packr
Now I have two freelance designers I can contact when I am working on a new project.

For desktop I usually mixed both: Xojo Controls (canvas mostly) and images.
For iOS I very rarely use images (except for icons of course) and tend to use Xojo controls and native iOS controls.

For mobile I try to use the least amount of canvases possible because I discovered that using a canvas uses much more memory than native controls.
For example, instead of using a canvas to draw a semi-transparent background, use a rectangle with a semi-transparent alpha value to use up to 8MB less per instance.

1 Like

If you’re doing it for someone else, I agree with Eugene’s suggestion. Dummy up an initial design. In my experience people will be able to give you useful feedback when they have something to react to.

1 Like

That is what I do too :slight_smile:

Some color printing (from macOS interface) is nice too.

Can be used to add ideas while talking to the client.

Thank you for all your replies. I think I misphrased the question. Since it’s a hobby, I don’t have any customers with any expectations/deadlines/money invested in the app (other than the users that will download the app from the store later). I am just trying to learn and understand as much as there is about software developing. And I want a nice looking app because everybody wants their babies to be nice, no? :wink:

So my question was more in the direction of where @Jeremie_L pointed me with ui8.net and how to implement the design/theme in Xojo. Was just looking for some best practices once you have a layout in mind (and have PSD images for example), how you put that into Xojo (or any other programming language).

The UI is the last step of the design. I usually adapt from existing free icons.

  • You define a workflow in your software with tasks. Example: user must define what he/she wants to archive with emails. User must set email accounts and email clients.
  • The workflow needs a data structure. This is the most critical part of the design. The data structure will define your interface. If you have the correct data structure it will make the big problem into smaller problems that are much easier to solve. Example: 8 table SQLite database to hold data about archiving emails.
  • Make a rough design for the interface. Refine. Result: about 30 classes and containers making a complex window design. See Setup
1 Like

The new standards for UI design are Sketch and Figma, not PSD.
With these tools, it is quite easy to understand how each UI element is constructed and that is what made me create iOSdesignExtensions.

Create subclasses of UI controls that repeat throughout the app, such as a Rounded Mobile Button, where you define the style in the Open event only once.

Best is to keep all UI design properties in a Module, such as colors, fonts, font sizes, corner radius values… It will then be easier to edit values only once and apply to all.

1 Like

dribbble.com has a nice collection of examples (designers showing their work) that may inspire some ideas.

https://www.uihut.com showed up on HackerNews the other day; seems like ui8.net

1 Like

The most mind-bogglingly beautiful UIs I run into are those of music plug-ins. Quite an art.

4 Likes

and yet, much like a lovely but now- dusty ‘modelling amp’ I bought… utterly incomprehensible.
Too many dials, no explanations

You might try fiver or one of theother design service groups online. There is a whole industry around UI/UX and its kind of costly but you could get into it. I try to emulate the things i like in other apps i use in my own apps and I think as simple and clean as possible os best ofr my tastes. I also agree a lot with most of the sentiment here. If I put too much effort into ui it seems to get trounced by evaluators/users anyway and gets changed or turfed. As Kem said, if it works for the purpose it almost doesnt matter.

There are quite some cheap UX designer courses on Udemy.
According to me, it’s just more valuation if your work has a professional look and feel. And as soon as you have adapted some best practices it just doesn’t take you much more.
But, it’s true, you need to know who your potential users are.
men-women-on-off-switch

1 Like