How to become brilliant in user interface (UI) design

Hi everybody,
I started few years ago building my FM platform to manage all the activity for my office. We are five people.
The platform now is pretty complex and it works well.
I started during covid, refugee in my appartment. At the beginning was really hard to learn and build and fix and fix scratching my head. But thing started going better and better and the project runs very well like my addiction to FM (I guess you all know what i mean :sweat_smile:).
In my opinion ouar tailor job is made in two parts, logical and design.
like a dress as to be confortable and goodlokking.
If, on one side, I learnt to get out of trubble in logical, on the other I feel the same dummy in design. (My artist side didn't come out with the rest of the body that day!!! :cold_sweat:).
How and where can I learn to make the design in a brilliant way? :thinking:
I can't find, till now, libraries where look and get examples of formats layout. I only need pics. On google I don't find sudisfaction.
Do you have any suggestions?
Can you suggest me corses or tutorial to emprouve?
Thank you so much

Hi Massimo,

look at interfaces of software that you find cool in terms of operation! Analyze them! Make life easy for the user. Also think about how you would like it to be. How would you like to use it?

Also:

  • Choose a small range of colors and use them sparingly.

    • Helpful tool on Mac: ColorSlurp
      With this tool you can save color sets and quickly copy the colors in hex format to use them in FileMaker. You can also check if there's enough contrast between two colors for text and background.
  • Divide your layout into meaningful areas: not like a set box, but tidy.

  • Choose a font that is installed on all devices.

    • It is best to use only one font: normal style and bold for emphasis. I would avoid italics on screen or use them only very sporadically if you absolutely need two types of highlighting.
  • Use the styles: If you have to change something in a style: Save it under a new name. If you use styles consistently, you can make changes later centrally and quickly if necessary.

That's it for now. If I think of more, I'll add to it.
__

Added:
Don't copy 1:1. You still don't have to reinvent the wheel. Look at the software you like and mix something new from it. Always think about the user!

3 Likes

Hi @mipiano,

I like it, very precious tips.
I will follow it!
Thank you so much :+1:t3:

1 Like

Con piacere. :slightly_smiling_face:

1 Like

Hi @Massimo,

Yes… good looks can be important. That said, there is more to UI than good looks. I think you should look up UX - user experience. User experience tends towards good looks but encompasses more: organization; automation; clear language; pro-active error checking; reduction of errors via interface restrictions. Your search will bring up more.

Hope this helps.

3 Likes
3 Likes

I recently reworked a client's horrible legacy database design that was simply unacceptable: a colorful mess of fields and colors, totally overloaded. Here is my résumé as a guide:

Less elements
The most common UI design mistake I see is trying to display too much at once. This means too many elements on one page and too little white space. It is better to arrange information by topics and display them on different pages (e.g. with sliders, tabs or custom layouts). This requires some interaction from the user to display the info, but makes for a much smoother appearance. 'Less is more' should be constantly in the back of your mind.

Grouped Information
Fields that belong together should be grouped and the individual groups should have enough distance from each other. White space is essential for a pleasant design! The groups can also be provided with small headings, so that the user has a quick overview.

Vertical and Horizontal Lines
Furthermore, you should make sure that vertical (but also horizontal) lines are kept, along which your fields and groups are aligned, in order to achieve a harmonious design. It should be self-evident that fields always have the same height. I use a 12 point grid to align all elements. Single-line fields and labels are therefore always 24 pt high. All my layout parts are always a multiple of 12 high or wide: 24, 36, 48, 60,... Snap to grid is your friend.

Colors
Colors should be used very sparingly, preferably only one, maximum 2 accent colors. The color red should only be used to display warnings.

Fonts
As a font, only one should actually be used. It may be possible to use a second one for the headlines. Choose a font that it well readable and that can be displayed on all devices and OSs.

Golden Ratio
These simple tips are usually enough to create a user-friendly, aesthetically pleasing design. If you want to go one step further, you can divide the content according to the golden ratio. But more important would be the first mentioned measures.

Styles
Use as few FM styles as possible to avoid losing the overview. I personally use e.g. the following naming to immediately recognize what a style is for and what it looks like:
Field |-
Field -|
Field |-|
Label |-
Label -|
This way I see immediately which field is right or left aligned and don't have to sort in my head where right and left is.

Edit: If you are curious how my approach looks in the real world go to azuro.de

8 Likes

You're asking about UI and interface design, which usually means user testing and not pretty pictures. On that front I'd HIGHLY recommend Don't Make Me Think by Steve Krug. It's a great book which can be summarized as "watch your users, see where they get confused and waste time and make it better, then do that again and again. Any time a user does the same 3 clicks twice in the same 10 minutes figure out how you can make those clicks turn into 1.

If you're looking for tips to make it pretty, Picasso was famous for saying "good artists copy; great artists steal". Find a design you like and copy it. The closer you can copy it the more you'll learn. One of my intro graphic design assignments I give to my students is to find a layout they like and open it, then try to recreate it in Photoshop (or Figma or whatever). Then when you're done, overlay the two pictures on top of one another and see where you were off. Places that junior artists tend to mess up are:

  • spacing around objects (margins/padding)
  • fonts (too many inconsistent sizes or using more than 1 or at most 2 fonts in a design)
  • Colors - too many of them, or reusing colors. For example if red means "important" don't also have red mean "red team" or whatever.

Here's my Pinterest Board with inspiration for Filemaker projects. Pick one you like it and do your best to match it.

One other thought is if you only have a five person team, you should think about the value this design is actually giving you and then. For 5 people ugly doesn't matter, usable does. If you are going to spend 5 hours making it look pretty, could you instead spend 10 hours making it easier to use?

I use this classic image when I look at what I'm spending time on:

is_it_worth_the_time

6 Likes

www.behance.net and www.dribbble.com are good for inspiration and ideas. Search for "Dashboard" and you can find a lot of nice interfaces.

4 Likes

Awesome resources. @JasonMark i love that filemaker inspiration collection!

1 Like

I was going to mention Steve Krug's book as well. A lot of good info there to consider. Glad you posted it, @JasonMark

1 Like

you are all magic! :smiley:
I've never been in a forum like this!
You are all so kind and Helpful that I'm speechless!!!
Thank you so much for all the tips! :smiling_face_with_three_hearts:

7 Likes

Anything from Yann Liqueur-Salzedo is highly recommended to watch and learn!

5 Likes

Many of the large FileMaker consultancies offer free, starter solutions. From these, you can find many examples of UI design that may be useful in your learning.

Rccconsulting (although much of what they do looks kewl - Nick shows genius in design - the obscure and obtuse gyrations often required to do these things are not for the faint of heart)
Dbsolutions
Luminaire
Many others

Search for FileMaker starter solutions…….

UX is, imho, far more important than UI

Also worth searching for “Performer Centric Design”. First created by Gloria Gerry in the 90’s, these concepts are focused less on “pretty” and more on the right things at the right time to optimize the user performance.

When designing the reservation system for a major airline - working with Mrs Gerry - we put poster paper in landscape mode on the walls of a huge conference room and using stickies, put up the elements of the UI on each as the programmers envisioned it. Then we invited a group of experienced reservation agents in and let them collectively move/add/change thing to match their needs. Lots of “when we are on this screen we also need this info” changes. The results were amazing.

Always ask yourself, when a user is on this screen what information do they need to know immediately, have quick access to, or have no current value?

4 Likes