New GUI Concept

[f1shy-dev]

(Edited) I have made a new GUI for UTM: iPhone, iPad and MacOS (In Progress)

Instead of scrolling, I update the latest GUI at https://vishy-dev.github.io/utmGUI/

If you want to suggest something, add a comment. If you want to see the new GUI, just use the link

[ThatStella7922]

The iPhone UI concept looks good, but would this translate over to iPads?

[osy]

Yeah that looks nice. I'm not sure what the other tabs would be though. It doesn't make sense to make settings its own tab because it's per-VM. Debug Log isn't really useful for 99% of people, so it doesn't make sense to give real estate to it.

I think the tiles are nice but there's a bit too much shadow imo, it doesn't look "modern iOS". According to Apple:

Minimal use of bezels, gradients, and drop shadows keep the interface light and airy, while ensuring that content is paramount.

[snslpa]

What do you think about this but with a modern design? Wizard machine creator based on your Apple hardware and the guest OS would be great.

It is Qemu manager 7 for windows.

Also PDF MANUAL: qemumanager.pdf

[osy]

I very specifically wanted to AVOID something like that. It feels antiquated to me and doesn't fit iOS.

[f1shy-dev]

Yeah that looks nice. I'm not sure what the other tabs would be though. It doesn't make sense to make settings its own tab because it's per-VM. Debug Log isn't really useful for 99% of people, so it doesn't make sense to give real estate to it.

I think the tiles are nice but there's a bit too much shadow imo, it doesn't look "modern iOS". According to Apple:

Minimal use of bezels, gradients, and drop shadows keep the interface light and airy, while ensuring that content is paramount.

True, I did kinda neglect using a list view. I will update that.

[f1shy-dev]

The iPhone UI concept looks good, but would this translate over to iPads?

On iPads we could have a form of split screen, the selection for vm on the side, vm details on the rest of the screen (settings etc)

[f1shy-dev]

I’ll try make a better one with a bit more context and also a iPad version, all following Apple guidelines this time

[snslpa]

It was only an idea to have more options but it's better to follow Apple guidelines, simplicity its much better.

Thanks, Osy86 and vishy.

[f1shy-dev]

I would try to make storyboards but sadly I'm not that experienced in iOS. I code in flutter, not native. I'll stick to sketch, I'm almost done with the home design, I'll also try design VM settings and maybe more menus. From reading latest issues, I'll make a MacOS version too

[f1shy-dev]

How does this look? I kind of based it on the current GUI, and Apple's Guidelines.

[snslpa]

It looks very nice, I add in red my suggestion.

Mosaic/List view icon for more options Different (Play) location RAM in the general specs

[f1shy-dev]

I'll update that when I get time.

[snslpa]

Thanks Vishy-dev

[f1shy-dev]

no problem, I just saw this project, found it interesting and had some free time, so I wanted to contribute.

[f1shy-dev]

I didn't add the second button you suggested parallel to the Windows 7 text, as that would be too many in my opinion.

[snslpa]

Very nice but what about this? like in the Files app.

[snslpa]

Also RAM first, SPICE Tools last. ;-)

[snslpa]

Also there is a line for that. Boot sequence.

[f1shy-dev]

Very nice but what about this? like in the Files app.

tried that but couldn't find the icon in apples library so I went with that

[f1shy-dev]

Also there is a line for that. Boot sequence.

I'll update it in a bit

[f1shy-dev]

Also what should the Mac OS version look like hmm

[f1shy-dev]

Maybe I'll use a virtual box like design but then with new things. So like play controls and edit etc could be in a top bar like this

[snslpa]

if we want more refinement, the icons with the OS logo can be even better. The exact OS Logo, Windows 10 logo is different to XP for example, and same in macOS, Tiger, Leopard, Catalina ... Linux Arch Debian, Suse, Ubuntu ... The ideal thing is to put the OS logo in the bottom left of the snapshot:

[f1shy-dev]

hmmmm i don't know if this is good so far, adding more now (ignore the scrollbar below the blue, its because otherwise when i want to select things, e.g the windows icon, it will select the side view scrollbar element, and not what i want (temporary))

[f1shy-dev]

if we want more refinement, the icons with the OS logo can be even better. The exact OS Logo, Windows 10 logo is different to XP for example, and same in macOS, Tiger, Leopard, Catalina ... Linux Arch Debian, Suse, Ubuntu ... The ideal thing is to put the OS logo in the bottom left of the snapshot:

hmm, like how virtual box has some generic icons, we could get something like that

[ThatStella7922]

I’m by no means an expert on this but I strongly suggest that UTM uses generic icons because the project probably doesn’t have rights to use those icons (the logo ones)

[f1shy-dev]

yes thats true for what snspla said. thats probably why vbox has their own icons

[snslpa]

Probably, some Parallels and VMWare uses genuine logos, not generic but are paid apps, maybe with rights. But elegant generic is OK.

[f1shy-dev]

how it look?

[f1shy-dev]

vmware uses their own icons

[f1shy-dev]

looks custom too, but this could be a old version, its just from a google.

[snslpa]

how it look?

Not so clean as previously. It needs more refinement, more Apple Style.

[f1shy-dev]

Which parts? I didn't know what to do for the like bottom info section. If you could guide me a bit as I'm not sure apple doesn't have much on listviews/ info views for macOS.

[snslpa]

What do you think about this?, without squares.

I'm not sure about display more info at this part, I think that it's better when you press the settings button, its cleaner for non-experienced people.

[snslpa]

Even, it can be simplified with small and elegant icons

[f1shy-dev]

I was also thinking about a fusion like design, with just a big picture and basic info on the VM view and the more detailed stuff in settings

[f1shy-dev]

like this?

[snslpa]

Look at my Parallels and my VirtualBox: Complete different. I think UTM is a Qemu machine and should be more like what you are doing, similar to Virtual Box but with more macOS style and elegant.

[f1shy-dev]

hows my new design

[f1shy-dev]

also heres a pic of fusion for reference

yea what you are saying. It needs to be like vbox, but more fitting with macOS

[snslpa]

like this?

This one looks very nice the only thing is the icons in the corner, not sure about the style. Also the trash is close to the settings so it can be accidentally touch

[f1shy-dev]

there would be some sort of verification before deleting?

[f1shy-dev]

1 min let me change the button style

[f1shy-dev]

or do we put the buttons in the toolbar ?

[f1shy-dev]

i like this one

[snslpa]

Good point and the trash down in the corner, also a play button un the center of the os that when is paused can be converted into sleep button such as a moon or zzz

[f1shy-dev]

ok 2 mins

[f1shy-dev]

wait if we put a play button do we move the vm text down to below the image or put the play button below the Windows 10

[snslpa]

I think that trash should be separated, in the corner or inside the setting.

[f1shy-dev]

hmm, i guess its in settings now