Help about UI design for a code editor
Hi everyone, i am making a code editor but i want to enhance my design because it looks old. I need some help. Thanks !
52 Replies
It looks like that :
Is it Winforms?
I think i can change my button run
yeah
Then the fact you got the menu bar red is already an achievement
Winforms is for making quick applications that consist of grey buttons and grey boxes
you have not seen my TreeView
Ohh
But, when i ask some help for the ui, it is mainly about the font used , the color...
Gotcha
Well, hard to tell from just an empty window
yeah wait
I bet it looks different with all the line numbers, file list, etc
i load a python file
i generated a python code
(for the syntax color, same thing i don't have any idea about the color to use)
(if you don't understand the comment ,it is normal because i am french)
I'd probably not use bold font for the file list
Maybe the currently open file could be bold
Font size looks a tad too big maybe
The run button has a metric ton of kinda useless whitespace around it
Ah, I see zoom is 110%, that's probably why the font looks so big
For colors, I'd say it's fine. The menu bar with black text on red background might be a little low on contrast
As a stretch goal, I'd consider a dark theme as well
For the syntax highlighting color scheme I'd say it's fine. You can look at various existing schemes and get inspiration from there. Monokai for example
yeah for the dark theme as window form has not a css, i don't know how can i do that
yeah but i don't know what can i add
Instead of adding, take away the whitespace
may be a save button
Normally, you'd see things like the debugger or the run profile there
yeah i know but i can't do a debugger
Yeah, so just remove the whitespace
how ?
i increase the button size ?
No, remove the padding, margin, or whatevet it is that creates this whitespace
Idk, row height or whatever it is
what whitespace you means ?
ok i see
better ? :
ye
ok nice and for the menu bar, which color can i use for the bg and fg ?
and font
WCAG standard defines the minimum accessible contrast to be 4.5:1
So whatever colors you pick, that should be what you aim for
For the font itself... something legible, simple as
Segoe is what Windows uses, it's a safe pick
Roboto is another, used by Android
okay i see
so for the futur, if i want to make a complex project, i will use wpf
right ?
Yeah
Or Avalonia, since it's cross-platform
but can i continue my project with win form ?
And if you want inspiration for what to add, just look at the existing editors
Sure
i can again enhance it
? or i will be blocked
Here's a bottom bar from VS Code for example, and what info it shows:
Yeah, you can chug away using Winforms, for sure
It will be an uphill battle at times, yeah
oh thx
good ideas !
But many an application has been made with Winforms before
yeah then, i am rookie in C# and it's my first "big" project with c#
so i used win form as it is simpler than wpf
For sure
$winforms
For the futur do you recommend me to use wpf ?
Or Avalonia, yes
Okay thx !
But it is really harder than window form ?
Or it is okay
initially yes
but its very much worth it to learn
Okay thanks and do you have any course to learn wpf or Alvoniz
?
My recommendation is to First do a design in photoshop or Figma, then you try to construct that design in your winform. There are some good libraries for C# that enhance the way your winform looks. I had personally used Guna framework and Livecharts. You can check them out.
i recommend starting with wpf
i dsay just start with the microsoft docs
tim corey and singleton sean on youtube are good ihear
also https://wpf-tutorial.com
ok thx
yeah i know but i dont have a good design level
but yes i know i have to do it to create a better app
there is no point in doing a design first... u need to understand how the controls and everything works in wpf first... then u can go into trying to convert a design its not exactly trivial and depending on how the design is layed it can add a lot of complexity.
the site sibber posted above gives u an idea how the general controls work in wpf
how they can be used
show templating as well as data binding
which are all important things to know with wpf