Learning Design as a Developer: Just This One Tip to Get Started

kinopyo avatar
kinopyo

Whenever you find a design, a layout, an animation, a typography, a scenario that wow (or urgh) you, take a screenshot and write down just one sentence why you feel that way. Verbalize the intangible feeling, put them into plain words no matter how not smart they sound like.

Allow yourself to be imperfect. You're practicing to break down your sensations into smaller components so you can understand it better and learn one at a time, just like starting a new programming language or framework. We learn incrementally by chapters, modules, and small code snippets.

Later on, from your collections you'll identify different patterns, when to use them, why it makes sense, what details you need to be aware of. Make your first step light, and progress with more steps.


Here are some one-line notes I took for various products and personal websites I bumped into.

notion.so landing page
notion.so landing page

The simple illustrations play such a vital role for notion.so, making the entire product so vivid. I literally just hang around to see more of them. (Check out the migrating from Evernote page, what a sad elephant!)

matejlatin.co.uk
matejlatin.co.uk

Great use of bold title and large white spaces, it really shines.

sivers.org
sivers.org

The seemingly lack of a design is a design. "It’s my minimalist desire for only what’s needed." Design doesn't always mean adding more.

medium.com/about
medium.com/about

A great use of the split view. The heading "advertisers" with red strikethroughs shows what it's not for. Good awareness of current web & tech atmosphere, such copywriting appeals to me.

www.smashingmagazine.com tilt animation
www.smashingmagazine.com tilt animation

A simple tilt animation, makes the whole site so playful. Also the square avatar with rounded corner is refreshing, we're being over-exposed to circle avatars all over the internet.

Slack: save changes animation
Slack: save changes animation

I really like the smooth animation. It's the small things that add up.

bluebed.net/about -  Roman Muradov's portfolio website
bluebed.net/about - Roman Muradov's portfolio website

Humor.

jivesoftware.com/blog empty profile page
jivesoftware.com/blog empty profile page

I like the copywriting "Just getting settled in," that's what we do when we join a new community - settling in.


Let's see some anti-patterns that really irritate me.

a disturbing "please stop your adblocker" overlay
a disturbing "please stop your adblocker" overlay

Red background with bright white and the inverted action labels?! Don't worry, I will stop. Stop visiting your site at all.

businessinsider, yes it's busy
businessinsider, yes it's busy

Browser notifications and newsletter signup popups stand in the way. How many more should I dismiss so I can finally read the content? Web is already too busy for this.


Hope I've showed you how easy it is to get started.

If you enjoy such UX details, you might also want to check out littlebigdetails.com.

And if you want to make it a habit, I would recommend this blog post and a podcast to further boost your confidence: