Web App UI Design Question

Hi all,
One of my more lacking skills is goo UI design; I’m looking to build another web app for internal needs at my work and I was hoping someone might have some references to documentation on UI design - making it attractive and useable and/or some xojo samples in the wild that look good. Unfortunately, I’m more of a back end person so when I design front end controls it looks more utilitarian than attractive and easily usable by anyone other than myself :wink:

I too would love someone with better knowledge than me to comment here on this.

Hopefully this will “bump” your post a little.

I guess Web Framework 2.0 will help with this too.

Up.

nice ideas here : https://github.com/codesurge-xyz/xojo-metro
forum post here : https://forum.xojo.com/45178-metro-style

not really finished but a really good start for a web app.

Inhouse applications usually look ugly as fudge. 80% of your job is done if you do the following:

  • Use black text und a white background and not light grey on a bit lighter grey.
  • Stuff that can be clicked should look like it can be clicked.
  • Avoid picture backgrounds.

I think the UI-designer needs to be able to know what a user expect.
Too often I see software with great functionality but hard to use by the UI-desgn. A term often used is UX… as in user experience.
It is not wrong to “copy” certain elements from existing software. That makes the learning curve for the user not as steep.

Last week I filmed for How It’s Made in a huge factory where they make big custom made Laser Cut machines for the aviation and train industry. They use a brand new laser cutter themselves. An amazing piece of machinery. But the software was not made by the end-user and was very hard to work with.

So, I think that it is a good idea to get inspiration from existing software.

well not really a howto but… ah just look yourself (link)

1 Like

[quote=474560:@Jean-Yves Pochez]nice ideas here : https://github.com/codesurge-xyz/xojo-metro
forum post here : https://forum.xojo.com/45178-metro-style [/quote]

This can be a nice inspiration:
https://docs.microsoft.com/en-us/windows/uwp/design/

It is for Desktop apps, but I believe most of it can be applied to Xojo Web.

That is so funny… and unfortunately very true

In all my years of designing apps, one major principle has helped me get favorable reviews:

KEEP IT SIMPLE

As programmers, it is so easy to succumb to complexity. That reflect on both engineering, and unfortunately, UI design.

Michel’s “Keep it simple” clocking in at number 1 for the very first Google result: https://sharpened.com/web_design_rules

And then, to expand upon Beatrix’s color suggestion, watch your contrast. It’s not really about solid black and solid white, it’s about the contrast between the text and it’s background. I legitimately have a harder time reading the forum than my dark mode website

I have a session at Xojo.Connect all about improving your user experience in desktop software. Check out UI, UX, and You at Xojo.Connect!

Amen!

I saved a bookmark :slight_smile:

What is wrong with the default look for an internal app? IMHO it looks just right as it kinda looks like a regular desktop app.

Having said that, I like using google’s material design guidelines Material .

I will go back to Bootstrap now that I read that Web 2.0 is Bootsrapy.

One important thing missing on that list:

Don’t use 3rd party ressources on other hosts. Always try to keep all your scripts, CSS, images, fonts etc. within your own domain.

If you’re using the WebEdition, you are super free to design what you want.

My suggestions as a UI/UX professional:

  • Use CSS in your Webprojects
  • get inspiration on dribbble.com
  • go the extra mile (don’t hesitate to much more effort into your UI, than you would like to)
  • be consistent. alway use the same styles and the same controls in similar situations.
  • give your layout space. way more space as you would usually do.
  • if theres no cool control you could use for a usecase, write your own with the WebSDK