
Ask HN: How to learn design and UX as a software engineer? - adetrest
My current designing skills are non-existent: I live in the terminal and plain text emails make me happiest. I would like to broaden my skill set and learn web design&#x2F;UX design.<p>There are plenty of resources to learn code: FreeCodeCamp, exercism, and tons of others.<p>What&#x27;s something similar for learning to design web applications, websites, and UX&#x2F;UI?
======
jmhyer123
There's lots of courses out there similar to FreeCodeCamp, etc. but I think
you'll find, like I did, that design is a different beast. It's not something
that is codified into rules that are easy to reason about. It's fluid, it's a
_feeling_ more than a rule to follow. And what's more? It changes all the
time. What was considered "trendy design" in 2005 is now old and antiquated
(although, the same could be said of the JS ecosystem, so maybe it's not all
that different after all)

That said, there are some "rules of thumb" that can be learned and applied to
your existing projects.

Some of my favorite resources for learning design as an engineer:

[https://refactoringui.com/](https://refactoringui.com/) \- The book is slated
for release soon but I've followed the authors on Twitter for a while now and
Steve in particular has some great advice for "designing" as an engineer [1].

[https://dribbble.com/](https://dribbble.com/) \- One thing I've found as an
engineer is that most people _recognize_ good design when they see it even if
they can't create it. I've spent a lot of time picking out good designs from
good designers and replicating them on my own. As I do so I try to reason
about _why_ they made that design choice versus something else. Over time I
find myself thinking things like, "OK, so you gave the card a larger border
radius because you wanted it to feel softer." It's just something you pick up
with practice and deliberate effort.

[1]
[https://twitter.com/i/moments/880688233641848832](https://twitter.com/i/moments/880688233641848832)

------
this2shallPass
Like learning to code, visual design, web design, user interface design, and
user experience design are broad topics. No one book or resource can teach you
all there is, but one resource can help you make a lot of progress.

People on HN have recommended Design for Hackers
[https://designforhackers.com/](https://designforhackers.com/)

Learn about the design process [https://www.slideshare.net/Klonowsa/design-
process-overview-...](https://www.slideshare.net/Klonowsa/design-process-
overview-4517950)

Some resources on prototyping
[https://www.productmanual.co/categories/prototyping](https://www.productmanual.co/categories/prototyping)

Some resources on interaction design
[https://www.productmanual.co/categories/interaction-
design](https://www.productmanual.co/categories/interaction-design)

This book is popular for people wanting to learn a little more about design.
It's on my list of things to read.
[https://en.wikipedia.org/wiki/The_Design_of_Everyday_Things](https://en.wikipedia.org/wiki/The_Design_of_Everyday_Things)

An application of design that is useful for projects and companies is the
Google Ventures sprint is useful
[http://www.gv.com/sprint/](http://www.gv.com/sprint/)

------
21dayhero
learning some fundamentals always help. I've done this course and found it
great for my base layer on UI/UX design: [https://www.udemy.com/design-
rules/](https://www.udemy.com/design-rules/)

some good resources overall:

DESIGN INSPO RESOURCES:

\- [https://www.calltoidea.com](https://www.calltoidea.com)

\- [https://www.dribbble.com](https://www.dribbble.com)

\- [https://www.uimovement.com](https://www.uimovement.com)

\- [https://www.goodui.org](https://www.goodui.org)

\- [https://www.awwwards.com](https://www.awwwards.com)

TOOLS:

Colorzilla - to get the colors of the website you like

[https://www.coolors.co](https://www.coolors.co) \- check which colors go well
together

[https://www.thenounproject.com](https://www.thenounproject.com) \- for icons,
black and white

[https://www.iconstore.co](https://www.iconstore.co) \- free icons set

fontfaceninja chrome addon - to find the font on the website you like

[https://www.uigradietns.com](https://www.uigradietns.com) \- generates the
gradients

------
rubenhak
You already got some comments that cover UI. I'd give you a different
perspective on the UX.

One thing is UI - "drawing" apps and web sites, a completely different area is
the UX. You should have been dealing with UX while doing software development
- writing frameworks, creating classes, etc, or during day to day life -
dealing with invalid door push/pull handles, hard to use phone apps, etc.

Just start paying more attentions to details and areas that are not as
efficient as they can be.

------
goliathvictory
In case you would be interested to explore UX/UI best practices specifically
for web applications, I have one resource.

Last weeks I've been researching patterns successful players in SaaS industry
use to improve their user experience. And ship profitable products. I've
listed these patterns and released as a collection here:
[http://minimumviabledesigns.com](http://minimumviabledesigns.com)

Might be helpful to you as an inspiration.

------
oblib
Going over Apple's work on this is probably worthwhile:

[https://developer.apple.com/design/human-interface-
guideline...](https://developer.apple.com/design/human-interface-
guidelines/macos/overview/themes/)

------
tejcirkulate
If you're willing to put in the effort for some serious study, then try these
2 books. They worked very well for me.

a. About Face 3 by Alan Cooper

b. Contextual Design by Karen Holtzblatt

These two will set you up.

------
rudimental
[https://news.ycombinator.com/item?id=12711060](https://news.ycombinator.com/item?id=12711060)

