Feedback on my desktop app welcome screen
I'm developing an app that allows quickly prototyping UIs through configuration files (and in the future also with a no-code editor) for a desktop toolkit.
I'm not very good at front end stuff, but I'm quite passionate about it, I like designing UIs.
I would really appreciate it if someone with more experience than me could take a look at the welcome screen of my app and give me some feedback.
Info and context:
- I'm using Material Design 3
- Font is Montserrat (mostly using Medium, SemiBold and Bold)
- On the left there's a welcome message with the app's logo on top
- On the right there is a Grid showing the last modified files. There's also an input field to quickly filter them if there are too many. On the bottom there are two buttons, which are disabled when no card is selected. The one with the eye is going to open the Live Preview tool. It's basically a read-only view of the UI. The one with the pen is the Editor tool, which is not yet implemented and will allow dragging components around, set their properties with sidebars, etc...
Edit: I though it was worth mentioning that in the future I may also need to add buttons for settings and theme mode
Edit 2: for comparison, here's how the welcome screen looks now Image
29 Replies
your ui is missing any way to select or see which ui was selected and is currently in use
it also is very unintuitive
what's the eye and edit button for?
how do i add a new ui?
how do i remove an ui?
and the 2nd screen is confusing
what is it for? how do i get there?
is it to edit? add?
That is not really necessary as every time the user goes back to the welcome screen the currently open project is disposed/closed
If you mean some kind of style to indicate which card is selected and therefore going to be loaded, then it will be included of course. I'm not showing such minor details in the prototype
I explained it in the post, read it again
those minor details are the most important
those are what separate ass from class
I'm probably going to add a bin icon to the cards that shows only on mouse hover
As for adding UIs, I will probably add another button at the bottom and activate DnD on the Grid
that is horrible. what if i dont have a mouse, like on a tablet or phone?
dont hide options just for "sleek" looks
I edited the post, sorry
That is what the current welcome screen looks like
The issue with this one is that if I add the logo above the welcome message, the window ends up taking almost all the screen. Too much vertical space used, imo
i though it was a 2nd screen, to edit the templates
I agree, but what I'm mostly concerned about is the layout
The style is pretty straightforward
Sorry, I should have mentioned that this is exclusively a desktop app
what about a windows tablet?
thats a desktop os and those dont have mice
also, what about people with motor skill deficiencies?
I could make the icon transparent to not obstruct the card's content
that works, but dont know how well it will look like
but i can see it causing some issues for people who have visual impairments
What would you suggest?
having it always visible
you can take the top-right corner and add the buttons to edit and delete there
and the select too
like how would do in transparent, but not transparent in this case
What about this?
I did not add the buttons to all the cards but you get the idea.
I also expanded the image to take all the space, slightly brightened the cards background and added a subtle border
Oh and I also added a button to add projects near the search bar
honestly, it looks a lot more functional
The cards are not too tall now in your opinion?
honestly, i don't think so
the empty bar looks weird af
You mean on the other two?
yup
it's missing something
I agree, I did not add the buttons just to prototype faster, but the idea is that all cards will show the actions
sounds perfect to me
i like that you used different colors, and that color isn't the only thing conveying meaning
Thanks!
I still have much to learn in my frontend journey 😅
we all do, so, don't worry
I feel like there's no need to make the welcome screen for logo and description that big
Would you change the layout too or just the size?
those are what separate ass from classwill be using this
Oh right, here's the final result guys
that looks SO MUCH BETTER