Settings

Theme

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

9 points by oblomovshchina 7 years ago · 7 comments · 1 min read


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

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/

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.

Keyboard Shortcuts

j
Next item
k
Previous item
o / Enter
Open selected item
?
Show this help
Esc
Close modal / clear selection