4 ms·
Ask HN: I cannot make a decent looking GUI from scratch. How do I learn?
A lot of UI guides/courses I’ve ran into go deep into the why (which I think is obvious) but never the how. I need a course or guide that covers the how.
Not how as in how to use figma, but how as in how to create a neat looking, easy to understand UI.
Whether if it’s manually drawn, made in figma or written in code, how do I make things look good?
- rolph 2y agohttps://en.wikipedia.org/wiki/Graphic_design https://en.wikipedia.org/wiki/Graphic_design https://en.wikipedia.org/wiki/Design https://en.wikipedia.org/wiki/Design
- troymc 2y agoIt's not easy, that's for sure. These days, big organizations tend to develop an internal "Design System" along with some implementations. Many of those design system implementations are, in fact, open, so you might just use those. Example 1: Google has "Material Design". Here are some key resources: 1. Material Design Components (MDC): - For Android: MDC-Android - For iOS: MDC-iOS - For Web: MDC-Web 2. Material Design for Flutter: A set of widgets implementing Material Design for Flutter apps. 3. Material-UI (MUI): While not created by Google, it's a popular React library that implements Material Design. 4. Material Theme Editor: A tool for creating and customizing Material themes. 5. Material Icons: Official Material Design icons. 6. Material Design Guidelines: Comprehensive documentation on implementing Material Design. You can find these resources and more on the official Material Design website (material.io) or Google's developer documentation. Example 2: Microsoft has "Fluent 2". Google it. Example 3: The UK Government has the "GOV.UK Design System". See https://design-system.service.gov.uk/ https://design-system.service.gov.uk/ Example 4: Adobe's official design system is called "Adobe Spectrum." Google it.
- wonger_ 2y agoYou can immediately learn a lot from the "Refactoring UI" series: https://youtube.com/watch?v=S6-q5BheEYU https://youtube.com/watch?v=S6-q5BheEYU These tips seem good too: https://lobau.io/design-tips/ https://lobau.io/design-tips/ A lot of UI design is about spacing elements properly and consistently. Humans subconsciously notice when spacing is off. This video does a decent job showing examples: https://youtube.com/watch?v=9ElrcTtAxzA https://youtube.com/watch?v=9ElrcTtAxzA Here's a good tool for making spacing and sizing scales in CSS: https://utopia.fyi/ https://utopia.fyi/ https://every-layout.dev/ https://every-layout.dev/ will show you the right CSS for common web layouts. They have a few free examples. Try practicing by coding some single page HTML/CSS experiments, or sketching some wireframes, or redesigning someone else's webpage. Use color palette generators unless you want to study color theory. Use other people's design systems if you want to ship something instead of just practice. Material Design, Pico CSS, component libraries, whatever looks good with minimal fuss.
- bpmedley 2y agoI’m working through https://uimastery.design/ https://uimastery.design/
- preciousoo 2y agoThat’s expensive as hell, but I see my company listed as one of their customers. Going to see about getting a seat lol