| Here is what I typically do: - 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. |
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/