Need help with font and colors for a single-page site
I am making a website which is an automatic code generator, with the input parameters being buttons. I am pretty new to ui designing so I have made a mediocre looking UI. If anyone can help me make this site aesthetically pleasing and modern looking it is appreciated. Figma link here https://www.figma.com/file/wbVWbfcgNwXDQIulcbLcbQ/Piano-Design?type=design&mode=design&t=v9qAYuWwrzR6zlkY-1
9 Replies
Instead of using true/false buttons I would use a slider
Make the piano keys interactable instead of having the pressed section
You can checkout the changes in your figma file
I used the Material Theme Builder and the Material Design Kit as a helper
Figma
Material 3 Design Kit
Figma Community file - Introducing Material Design 3
Meet Material Design 3, Material Design’s most personal design system yet. The Material 3 Design Kit provides a comprehensive introduction to the design system, with styles and components to help you get started.
Visualize dynamic color in your UI
The Material 3 Des...
Figma
Material Theme Builder
Figma Community plugin - The Material Theme builder is built to assist in exploring the possibilities of dynamic color, harmonizing brand colors, and providing a type scale. All with implementation in mind to bridge designer and developer workflows.
Generate accessible light and dark color schemes from a user’s device w...
Cool! Thank you that looks way better
I will try to implement that
here's another variation i threw together. I think you should focus primarily on reducing all your fonts down to just 1 font until you are more comfortable choosing them
my advice is to always use Poppins until you know why a different font would actually be a better option
and I would say to focus on your visual hierarchy. I made the piano much bigger and the same width as the header since it should be (I think) the most prominent thing on the page. And modern design is super into large font titles right now, so I made one as wide as the piano which will scale nicely as you move between screen sizes
and also, your figma file is super complicated for a beginner, and I can't imagine how long it took you to build all this extraneous scaffolding. I would recommend just making super simple mockups in Figma so you can get to coding faster. Unless you are planning on becoming a full time UI/UX Designer, you dont' need all these frames and sections and such
Yeah i get it. The thing is i am not that into UI/UX but i try to get the hierarchy right. Since it can give an idea of how the code should be implemented. I just did a real sloppy job of renaming frames and groups. But thanks for the heads up. Ill try that out