Re:Ask HN: How do you manage UI/UX for your side projects?
by hbosch on Friday December 07, 2018 @01:49PM
(#18630376)
To add to this, another great design tool is Figma – it's browser based, but just as capable as Sketch. Although working in the browser often feels like a toy, the bonus is that it's cross-platform unlike Sketch.
Also, for color help, the Material Design Color Tool is a fantastic little site for helping develop color schemes quickly and visually. https://material.io/tools/color/
- Draw out a design using Sketch, draw.io or any other similar tool.
- Find a color scheme, I typically google for "flat UI colors" since I like them most. Adobe color wheel is also a great tool for finding complementary / shades of colors: https://color.adobe.com/create/color-wheel/
- Then I start prototyping my ideas, typically in react, using a CSS-in-JS lib such as styled-components, this allows for quick iteration.
- I do research. For example, I look at how other websites or UI component libraries do things. Examples are material UI, ant design, semantic UI.
The most important thing is refinement. You start with a rough sketch, prototype in react or HTML and then start playing around with the CSS. Learning all the css attributes definitely helps. Don't try and learn them all from a list, but just google them as appropriate and you'll start picking them up. For example, you might think: "How do I center the children elements both vertically and horizontally on different screen sizes?". A quick google search will suggest to use display: flex, justify-content: center, and align-items: center.