Design for Developers
A practical guide to improve your design skills as a dev
Nov 22, 2020
(6 min read)
(6 min read)
I’m a believer that anyone can build anything, given that they stay resourceful. Development, design, product all require similar veins of thinking. You need to think from the user’s perspective, continuously iterate, and collaborate cross functionally. Generalists who are able to do a bit of everything, or at least understand the tools of other trades have a great advantage in the industry.
Back in 2016, I was building my first few iOS apps, but didn’t know anything about design. That design bit held me back from working on more ambitious projects. I was afraid to start a new project until I had carefully produced mockups, and a clear understanding of what to build. This mindset held me back from doing the most important thing — building.
Taking the leap is really important. It means recognizing that you might not immediately have all the skills necessary to do something, but that you’ll give it a try anyway. When it comes to a developer learning how to design, taking that first leap is critical. After all, design skills don’t come through books or videos, but through application and reflection.
It’s definitely intimidating to dive into a field you’ve never explored before, but there are ways to make that transition easier. In this next section, I’ll talk a bit about some small things that have helped me be more resourceful and soak in knowledge from unexpected places.
1. Question your friends a lot
2. Question seemingly inconsequential things in your daily life.
This is a big one! Every time you use a mobile app or visit a landing page, don’t just mindlessly scroll through. It’s pretty crazy, but most of the times everything is meticulously crafted, with elements placed in certain locations for very specific reasons. Put yourself in the shoes of the person who designed that product, and think about a few things:
3. Get good at searching for answers
Here, I pretty much mean get really good at digging through Google, Reddit, and relevant forums. There are countless blog posts, videos, and threads that go really deep into even the most obscure things. If you look hard enough, you’ll find an answer, or at least another direction to look in. Searching for help instead of thinking through already solved problems and reinventing the wheel is a much better use of time.
4. Get connected
Follow blogs, newsletters, YouTube channels, Twitter accounts, whatever pertains to what you’re trying to learn. Become a daily follower of a few channels. r/design and UX Collective on Medium are always great sources for learning from other designers. I also tend to scroll through ProductHunt every morning, paying special attention to what makes successful products so usable/beautiful, and what problems plague less successful products.
For developers looking to learn design, here are a few resources I found super helpful.
If you're a developer and are looking to improve your design skills, here are a few rules I followed that quickly improved my usability and aesthetics.
1. Establish a design system early on
Investing some initial time to develop a design system saves a boatload of time down the road. Here’s an example of a basic design system. It consists of setting up font sizes/styles/colors, spacing rules, and a color palette. As you add to this system, you can build out reusable components like modals, buttons, and call to action blocks.
Make sure to reference this system constantly as you start developing! It keeps your design clean and consistent.
This one’s super important! Not all elements on the page should be treated as equal. Bump up the font size and weight for the elements that users should care more about. Typically, section titles, important statistics, or names take precedence over body text, descriptions, and metadata.
Another tip from Steve Schoger from Refactoring UI (highly recommended read): you can establish hierarchy not just from increasing the font sizes, but primarily through font weight as well. Sometimes, keeping elements scaled down with larger weights helps a lot with balancing the aesthetics of a page.
3. Use white space
White space is a powerful tool. It can be used to draw attention where you want, increase legibility, and add a sense of additional organization and hierarchy to the page.
White space in Google’s homepage here removes distractions and draws your attention to what matters — search.
Adding some white space in the form of increasing the line height for this block of body text also makes a huge difference in readability. Notice how spacing out the title and the body text helps establish that information hierarchy too.
White space is a powerful tool, just remember to be consistent! Follow that design system and play with different spacing, but based on those spacing levels defined earlier. That way, the entire app or website feels coherent.
4. Utility over design
My thoughts, stories, and ideas