.png)
Developer | Spring'19
Anyone can build anything given that they stay resourceful.
Development, design, and product all require similar veins of thinking: we 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.
In the first part of our continuous series "Being Resourceful", LavaLab alumni Roland shares his experience in bringing his product design ideas to life while having a developer's background.
(Editor's Note: The following article has been edited and condensed.)
Back in 2016, I was a self proclaimed iOS developer, knowing how to build simple apps. However, my lack of knowledge in design became a huge bottleneck. 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.
When being resourceful, 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:
It’s easy to fall in the trap of the false consensus effect, where we believe everyone sees things the same way we do. But the fact is those around us, even those closest to us, probably perceive things very differently.
That’s something we should take advantage of: naturally, it’s a free resource that’s incredibly accessible to us! When unsure about how you should approach a problem or novel idea, ask a friend. They don’t need to be an expert in that field — in fact, I think it’s better if they weren’t an expert. Get their opinion on how they would design a search box, then make adjustments as you see fit. Others’ unbiased approaches to a problem or their years of expertise can teach you a whole lot.
2) Question seemingly inconsequential things in your daily life:
This is an important 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:
- Why choose this color for their buttons?
- Why use certain fonts?
- Why use this style of wording?
- Why this graphic style?
3) Explore and search for resources:
Being resourceful also means getting good at finding those resources. I encourage you to 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.
Using resources and exploring options can be a much better use of time instead of thinking through already solved problems and reinventing the wheel.
4) Get connected:
Following blogs, newsletters, YouTube channels, Twitter accounts can help you learn more about what you didn't know you didn't know. This might entail becoming 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:
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.
Or, if you don’t want to build a design system from scratch, use a framework like Tailwind CSS or Bootstrap which gives you a set of components out of the box.
Want even more customizability? Run with a prebuilt design system like Blueprint by Palantir or Evergreen by Segment.
Make sure to reference this system constantly as you start developing! It keeps your design clean and consistent.
Pay attention to hierarchy:
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.
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.
Most importantly, 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.
Utility over design
We learned a few tips to freshen up your UI design, but the most important thing to keep in your mind is to always prioritize utility over design. Something beautiful that people don’t understand just isn’t useful to anybody. Choose a traditional font for your body text. I love Inter, Helvetica, PT Serif if you want a sans serif font. They’re clear and legible.
Make sure there’s enough foreground and background contrast. Make sure text is clearly visible, and think about accessibility when it comes to people who might have some form of colorblindness. Here’s a pretty great tool to see if your colors have enough contrast: