March 31, 2020

You Can Steal Design Ideas

Making good web designs is not easier. That's why the best starting point for them is usually stealing another design.

One of the many struggles I and my colleagues in NewHaven.IO face is making a website look nice. There are also the usual issues with debugging, Minecraft, and basic human interaction. But as a front-end developer, I notice the design challenges more. Just because I build the front-end doesn't mean I always know how it should look, after all.

So to help folks handle this issue, I'd planned to write some easy ways to bring good design to websites. But as I thought about it, I realized every design tip I could think of could be distilled down to the same one. The one tip is simple: steal good website designs from others.

These are the tricks I've realized I always come back to for my designs. They won't make a website amazing, but they'll hopefully keep it from causing cringes or layoffs.

It seems simple and obvious, yet utterly wrong, but hear me out if you're skeptical.

Stealing Designs isn't Different from Copying Code #

Programmers copy and paste solutions from others all the time. At least one a day, a coder will Google an issue, find a solution on StackOverflow, paste it into their code, and repeat that if they fail. There's a little stigma around this since our core job is to solve problems, and there's no point in solving a problem others already solved. It's why we use frameworks like Ruby on Rails instead of building complex apps from scratch.

Front-end designs are just another form of solutions to common problems we face. Ensuring proper typography and color contrast? Arranging content in logical orders? Invoking emotional reactions specific to a brand? Making layouts mobile responsive? At their core, these are technical problems with many solutions to choose from. Taking a design that solves them is the same as copying code that solving an ActiveRecord validation error in Rails.

My guess is this similarity is hard to notice due to the more creative aspect of front-end designs. We don't see solutions, we see bright colors and fancy styles. It feels like we're stealing someone's painting instead of their architectural template. In a way, that's also true. Design solutions are often more personal than back-end ones. But never so much that we can never use them for our design problems.

Steal the Solution, Not the Personality #

I think the best way around this dilemma is to isolate the parts of someone else's designs that solve your problem, and only steal that.

If you need a good layout and see a website with one that'd work for you, only steal that layout. If another site has fonts that match the mood of your website, only steal those. This takes away the feeling of stealing something personal from someone else. It's easier to see it as copying a solution someone already found for your problem.

Take this very website's layout. I took the previous static sidebar layout from this web template since it looked like a good blog layout. Then I read this article about the web's natural design grain and went with the simpler, single-column layout.

At no point was I using my design ideas for my own site's layout, since I was constantly stealing layout ideas from other people. But I wasn't stealing every detail, only the bits to build a foundation. I didn't steal those sites' colors, typography, images, spacing, breakpoints, or other details. Some of them I took from other websites. Others I thought of myself.

I admit my website is an amalgam of designs I stole from other sources and choices I made myself. Yet I don't feel bad about it since it's the same with copying JavaScript or Ruby code online. These are longstanding problems every designer faces with established solutions, each with their strengths and weaknesses. We're assessing the options and choosing the one that works best.

Almost all design work works like this, it's just harder to realize it.

Good Places to Steal Designs #

The next point is, of course, where are good places to steal ones' designs. Thankfully there are many options to consider.

Sites Similar to Yours #

This is the most obvious first choice to me - if one site is already solving the same problem, or at least a similar one, see how they solved it!

Just make sure it's a site made by someone you can trust is good to an extent. Copying designs from a professional web designer or developer, or a successful online business, is one thing. Copying designs from an obscure blogger with little traffic is another entirely.

So naturally, you should not use any designs you see on my website. However, I felt right borrowing some layout and tone designs from Laura Kalbag's website. I also borrowed Note's section design from the WordPress Twenty Thirteen theme.

Sites with Ready-Made Designs #

Some sites are made for the developer to steal design decisions. They know none of this is easy, so some reliable design foundations are packaged and ready-made to go.

Do you need site layouts? Try EveryLayout.dev or Grid by Example. What about color palettes? Check out Coolors, 100 Color Combinations, or Color and Fonts' palette selection. There's also FontPair and another Color and Fonts page of typography pairing for typography.

I've referenced one from each of these categories for my site. Don't think I'm the one who came up with the colors and typography you're seeing. All taken from sites more than happy to give the inspiration out. The most I had to do was decide which decisions worked well together to create the effect I wanted. That itself isn't easy, but having all those options before me helped a lot. I even steal color and typography for smaller projects, like this pen of a simple UI design.

See the Pen Single Product - 100 Accessible UI Challenge by Maxwell Antonucci (@max1128) on CodePen.


I like to think the main reason these sites exist is people are happy to give away their creativity if it means the web is a little easier to read. I'm more than happy to take them up on that offer.

Sites with Component Designs #

The examples so far are great for broader design ideas, but some design problems are more specific. They can be around displaying a list of specific content, managing complex navigation, or showing off a single product with its info. One website can have lots of targeted design issues like this, and its solutions are even trickier.

Thankfully, these design challenges have the most solutions to steal online. The hardest part is, like before, choosing the best one.

My favorite resource here is Collect UI. All of the web designers banded together to design different solutions to over 100 of the most common design challenges. I know I got the design for my writing cards somewhere on this site. Some designs can be too complex or overly-illustrated, with designers creating mocks without worrying about how they translate into code. So don't worry about copying them pixel for pixel.

If having workable code matters more, CodePen has searchable, working examples with code you can take and tweak as you please. I often go there for other card component needs, like getting the CSS code for specific box shadow effects. You can also check front-end frameworks with components like Bootstrap and Foundation, whose designs are usually even more reliable and accessible due to their widespread use.

We Already Steal Many Designs #

This post started with what I'd observed on the NewHaven.IO slack, and how stealing designs can solve much of that. But I think this solution is something we all already understand, even if we don't consciously accept it. We already steal design inspiration and decisions from those around us in many ways.

Take the new NewHaven.IO website. The developers behind it talked about using an existing Gatsby template for the code and design foundation. They mentioned any customizations they made to that template being based on emerging design trends. Take all that design foundation they took from the design world, mix in the touches of the community's colors, content, tone, and quirky touches, and you have a strong-looking website.

When you get down to it, good design is all about problem-solving. There's no point reinventing the wheel for well-established solutions, whether it comes to code or design. While design gives you more room to play and show personality, at its core it holds the same solutions. Whether we share, steal, or reinvent our designs, what's most important is we stay curious about the designs out there and keep on trying them out.