Ask HN: How to help non-technical designers work with CSS?

9 points by oblomovshchina 7 years ago | 7 comments

One of my coworkers is a graphic designer/illustrator kind of guy. He knows colors and how to draw and how to make things look neat and ordered, but he lacks an explicit understanding of UX and the technical knowledge to work with CSS. Lately, he has expressed an interest in wanting to help me with the styling of websites, which I would welcome, since I am not a visual person.

I would be grateful if you guys could recommend some resources (books, websites, etc) that I could give my designer friend to help him get started with understanding CSS and understand UX/UI patterns.

Maybe even a WYSIWYG app he could use while we transition him to directly dealing with the css files. I'm looking for a kind of friendlier Chrome DevTools he could fire up, not something like Dreamweave.

Thanks.

Nilef 7 years ago |

A really good way (for me anyway) was to start by using a tool like Webflow.com - It's visually designing websites, but using proper CSS concepts (flexbox, margin, padding etc.) - and so teaches the building blocks at a very accessible and productive level

oblomovshchina 7 years ago | |

Thank you. This is more or less perfect for my purposes.

0bit 7 years ago |

“CSS In Depth” from Manning[0] is an excellent resource to learn how to go from unstyled pages to properly styled ones.

[0]: https://www.manning.com/books/css-in-depth

headsclouds 7 years ago |

Similar to Webflow — which is an excellent intro to styling websites for non-technical folks — there's a WordPress plugin called Oxygen[1] which I really recommend checking out as it is more-less the same as Webflow, just built on top of WordPress which you can use locally, or whatever.

[1]: https://oxygenbuilder.com/

oblomovshchina 7 years ago | |

Thank you, friend. I’ll look into this.

justusthane 7 years ago |

Does he want to learn CSS? I'm neither a front-end dev nor a designer, but I think typically how this would go is he would design the site in some sort of mockup software (or even Photoshop, if that's what he's comfortable with), and then it's your job to build that into a website.

throwaway13000 7 years ago |

https://cssbattle.dev/

This is good for practice. Was on HN two days ago.