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

9 pointsoblomovshchina6y ago7 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.

7 comments

Nilef6y 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

oblomovshchinaOP6y ago

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

0bit6y 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

headsclouds6y 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/

oblomovshchinaOP6y ago

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

justusthane6y 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.

throwaway130006y ago

https://cssbattle.dev/

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

j / k navigate · click thread line to collapse