Finding design inspiration

Ridd here 👋 Founders are constantly asking me who they should hire for web design… and over the last ~year one designer has risen to the top of my list:

👉 Benten Woodring

So for this week's featured idea I asked him to shine a light on his practice by sharing a few insights from his hit course Next Level Web Design. He's also offering a Dive Club discount so if you use the code DIVECLUB you can get $100 off!

Alright I'm going to let Benten take it from here…

As a web designer, having a system around gathering inspiration has helped me organize design ideas and have material to work with as I start new projects. I’ve systematized my process over the years and have put together a list of my top resources to spark new ideas.

Here are three tips you can use to integrate more inspiration into your workflow.

1: Know your resources

Luckily, there are a ton of resources out there to help you gather and curate inspiration for upcoming projects. These range from general inspiration sites to some less traditional options you might not have considered.

Cosmos You can browse inspiration beyond just web design here. I often gather print and brand design elements I find interesting and might want to incorporate into a web project.

One thing that helps a ton with Cosmos, is that you keep things organized by saving items to a board, and even get recommendations based on what you’ve saved. This is where Cosmos excels as a resource, in my opinion, and has fully replaced Pinterest as one of my go-to resources.

I usually create a new board for each project I’m working on. Then I’ll reference old boards I’ve created to see if I can borrow any ideas that didn’t end up getting used.

Niche inspiration sites Websites like Footer, OG Image Gallery, Storefront and Navbar Gallery are great resources for more specific inspiration.

Siteinspire

This is the site I visit the most when I’m wanting to get fresh ideas for the web. While most of these sites are on the more trendy side of the spectrum, there are of a ton of interesting approaches to web design and interaction to be found.

Awwwards

If you want to see what people are doing to push the boundaries in web design, especially when it comes to interactivity and animation, Awwwards is worth a look. Here you can find some of the most innovative websites around, with components and interactions filtered by category.

👉 Landing Pages

One Page Love, Landingfolio and Landing Love all feature one-page websites and landing pages. These are worth checking out to get a feel for tried-and-true landing page designs and popular UX patterns and layouts. Landbook and No Code Supply Co are also excellent resources.

Brand New by Under Consideration**

This one requires a small membership fee, but it is 100% worth it. While it’s more centered on brand identity, it allows you to keep a pulse on the latest in the design industry. Highly recommend adding this one to your list.

I’ve just shared a ton of inspiration websites, but there are a few other resources you can use to get those creative juices flowing.

👉 Inspect tool

A tool I like to use when looking at other websites is the Inspect tool. This is a tool built into your browser to see exactly how a live site is built. You can even edit what the site looks like on your end if you really wanted to.

I use the Inspect tool to look at type sizing, line height, and typefaces, as well as looking at button sizes, colors and spacing around elements at different screen sizes. This is a great way to learn some industry standards and see how your favorite website is designed.

👉 Swipe file

A lo-fi way to gather inspiration, is to simply grab screenshots of components or elements you come across that you’d like to explore. I really like this approach, because it prevents you from the temptation to imitate an entire web page or section. It allows to focus on small things you can explore and iterate upon to make it your own. Here’s a list we have going at Bunsen.

👉 Agencies

Finally, start following agencies that are doing work you find interesting. Lately I’ve been inspired by the work of Modem, Unseen Studio, Basic Agency, Locomotive, and Mast. Find out who did the latest big rebrand or designed an e-commerce site you use. This is a great way to stay up on industry trends and see what’s new in the design world.

2: Create, don’t imitate

I know I just shared a bunch of inspiration sites, but I want to share another approach that has helped me, especially on more complex projects, or if you’re ever feeling stuck.

👉 Sketch it out

Instead of looking at other websites to inspire you, narrow your focus and start with the design problem you are trying to solve first. Get lo-fi and use a pen and paper to sketch out your ideas, whether it’s a wireframe, component layout, or animation ideas.

I think you’ll be surprised how well this actually works. You’ll have more original ideas and will be able to think more clearly, especially if you are trying to solve a difficult design problem. See what you can come up with on your own before relying on inspiration sites.

👉 The rule of one

Next, when we do use inspiration to guide our design, we need to be careful not to borrow too much from any single design. As a guide, never borrow more than one thing from an original design, whether it’s layout, color or type.

If you see a component that has an interesting layout, be sure to use your own typography and color, for example. This is something I learned while at a previous agency. It’s stuck with me, and something I continue to practice today.

3: Look outside of web design

Even though we are working within the realm of web design, I’ve found that some of the most original ideas can actually be found in other industries.

Not only does looking outside the world of web design allow you to think about design ideas in a different context, it also allows you to make new connections that you might not have been able to make otherwise.

You’ve probably noticed that I reference the print industry pretty often. That’s because this is a design practice that has heavily influenced my own design. I got my start as a designer, as many others have, in print and marketing design.

There are so many elements and layouts we can borrow from this industry that translates well to web design, from modernist poster design to the grid layout in your favorite magazine.

Allowing yourself to be inspired outside of the usual places can help you draw new connections between industries, whether that’s at a museum, looking at packaging or print design, perusing an antique store or city alleys for unique typography, or looking at architecture or industrial design -- there are so many things that we walk by every single day that can inspire us.

The next time you visit a museum, bookstore or antique shop, take note of what inspires you and try to incorporate an element of it in your future work.

Here’s my full list of inspiration resources:

Websites:
Cosmos
Siteinspire
Landbook
Footer
OG Image Gallery
Navbar Gallery
Storefront
Rebrand
Deck Gallery
Brutal Web
Saaspo
Dead Simple Sites
Off Grid
Today in Design
Recent
404s Design
Landing Love
One Page Love
Site of Sites
Godly
Dark Mode Design
HTTPster
The Index
Curated Design
Minimal Gallery
Layers
Brand New
Landingfolio
No Code Supply Co
Studios by Spaces

Other:
Sketching
Writing
Museums
Antique stores
Magazines
Signage
Inspect tool
Agencies

👉 If you’re interested in learning more about gathering inspiration and creating cohesive web concepts, check out my course, Next-Level Web Design, where you’ll learn to master web design principles and build a portfolio-ready landing page in Figma from start to finish.