9 Clever Ways To Find Web Design Inspiration - UIDB.io

9 Clever Ways To Find Web Design Inspiration

Posted on September 2, 2016 by joe

The truth is this: what you’re designing now has probably been designed before. User interfaces have been designed and coded for the web for over 15 years now – you’re without a doubt designing something that is out there already, why not use it for inspiration?

The problem with this statement is that it assumes you know where to look for that inspiration…

Here are 9 easy and quick ways for you to find web design inspiration online for your next project. There are a few extra special tricks thrown in for good measure borrowed from my days as an SEO consultant.

Table of contents:
  1. Know how to Google properly
  2. Using competitors for design inspiration
  3. Other industries
  4. Crayon.co
  5. B2B testimonials, integrations, and customers
  6. Design communities (Dribbble, Behance, et al)
  7. Brief your colleagues
  8. Product Hunt
  9. Always be bookmarking

1. Know how to Google properly

This should be an obvious one to anyone on the web. With Googling, though, it’s not what you do… but how you do it.

Let’s say we’re looking to design a pricing table for a SaaS company. You could search “examples of SaaS pricing table“, and you’d get some decent ‘listicle’ type posts:

Screenshot 2016-09-02 08.03.30

You can find some decent inspiration in this set of results, but the majority of the examples you find will be regurgitated and reused across many different articles. If you take a look at some of the articles in the results above, you’ll see what I mean.

The other problem with this broad search strategy is that you can’t truly define industry or business type.

A better way to Google for inspiration

Using search operators to be more specific will give you far better results. Google search operators give users a way of modifying the search results they get back by being more specific about the results that you expect.

For example, if I’m looking to find more ’roundup’ or ‘listicle’ style posts then I can try something like:

Title-specific keywords

Example: allintitle:”examples of pricing tables”

This is telling Google to only show results where the phrase “examples of pricing tables” appears exactly matched in the <title> tag. This brings back less results (only 28), but they’re all super specific to the search:

download (59)

Whereas the original “examples of SaaS pricing table” search returned things like “SaaS pricing strategies”, the previous search made the results laser-focussed on actual examples instead.

URL-specific keywords

Example: inurl:plans-pricing

This is telling Google to only show results with the exact string “plans-pricing” somewhere in the URL. It could be example.com/plans-pricing/, or it could be anywhere else in the URL. For example example.com/blog/plans-pricing-saas-companies. More often than not, this search will give you thousands of examples right from the source.

Here’s what the SERPs (search engine ranking positions) look like for this:

Screenshot 2016-09-02 09.49.23

Combining Google search operators

One awesome thing about Google search operators is that they can (and should) be combined together to form a bigger search query. This can be especially useful if you want to only include a certain type of page.

Let’s say I’m designing a “newsletter signup” page for a web design company. I’d then combine the inurl operator with an exact match query to make this:

Example: inurl:/newsletter/ “web design” -inurl:blog

Screenshot 2016-09-02 10.41.37

Quick plug for UIDB, but something that Googling won’t enable you to do is find examples of ‘newsletter signup modals’. That’s where UIDB comes in: http://uidb.io/search?q=Newsletter+signup%2Cmodal

This is also super useful if you want to find discussion on a particular topic.  For example, if I’m researching the difference between Photoshop and Sketch, then I can do this:

Example: inurl:forum “photoshop or sketch”

Screenshot 2016-09-02 10.40.16

Action: if you’re designing a specific page, such as a team page or pricing page, go to Google and use a search operator right now to find inspiration. Here’s a link to get you started: inurl:plans-pricing

2. Using competitors for design inspiration

An obvious one, but definitely worth noting. Ideas often come from what our competitors are doing. You’ll no doubt know who your closest competitors are, and in fact are probably already familiar with their UIs.

I would recommend screenshotting your competitors best bits of UI and adding them all to a folder, printing them, or even better – adding them to a UIDB collection.

Here’s a good tip for finding out who Google thinks your competitors are. Use Google’s autocomplete to get it to suggest competitors. For example, start typing “[company name] or”, and Google will do the rest:

Screenshot 2016-09-02 10.48.58

3. Other Industries

Another useful place to look is within different verticals to your own. For example, if you’re designing a new ‘search results’ page for a marketplace company such as Gumtree (A UK equivalent to Craigslist), you actually have plenty of options for inspiration from other industries.

First of all I would check out my competitors and see what they do. Then, particularly for a location-specific business such as real-estate, I would search geographically for various examples on Google.

For example, if you’re a London-based real-estate company, then you likely won’t have ever visited a Californian real-estate website. Think outside of your own bubble. For example, “apartments for rent san francisco“.

I specifically chose San Francisco in the example above because it is, arguably, the most forward-thinking place on Earth with respect to web design and innovation. You’re pretty likely to find some funky new UI if you look specifically at San Fran startups.

You can then apply the real-estate industry’s “way” of doing search filtering into your own design for your Gumtree marketplace design.

London real-estate filtering examples:

Screenshot 2016-09-02 11.01.53 Screenshot 2016-09-02 11.02.04

San Francisco real-estate filtering examples:

Screenshot 2016-09-02 11.03.21

Screenshot 2016-09-02 11.03.32

Screenshot 2016-09-02 11.03.39

Screenshot 2016-09-02 11.03.45

Screenshot 2016-09-02 11.03.56

4. Crayon.co

Crayon.co is probably UIDB’s closest competitor, but what they do, they do really well.

On crayon you can search for page types by industry. E.g. “meet the team pages in financial service” or “b2b pricing pages”.

If you don’t find the exact UI you’re looking for there, you’ll always strumble across new websites with great designs that you didn’t know existed.

Definitely worth checking them out when you’re looking for inspiration next.

5. B2B testimonials, integrations, and customers

Go to startups/websites that provide B2B services and check out their websites for inspiration.

A couple of industries come to mind, but generally I find that there is good design in the “live chat” SaaS industry. These websites are usually very forward thinking and ahead of the curve with regards to design.

Here are some sites for inspiration:

I like this one because it often results in you stumbling across new companies that you’ve never heard of, that are of at least a decent size/reputation.

“Our customers”

If you go to LiveChatInc’s “our customers” section you’ll find plenty of examples of companies who are using their solution that you can go and look at for inspiration:

Screenshot 2016-09-02 11.38.42

You can do the same by going to BoldChat’s “case studies” page.

The great thing about using this method is that you’re also going to stumble across examples of live chat being used on live sites.

download (63)

Keep doing this across multiple industries and you’ll quickly rack up a list of sites to get inspiration from.

6. Design communities (Dribbble, Behance, et al)

One of the reasons I built UIDB, despite solutions like Dribbble being around, is because I wanted to be able to interact with UI that I was getting inspiration from.

These sites are indeed amazing, but a lot of the examples submitted to them is conceptual and not actually live on the web.

Here’s an example from Dribbble: https://dribbble.com/search?q=pricing+table

download (64)

The second shot/example in the grid above is a screenshot of Heap Analytics. The screenshot only covers a small portion of the pricing table, and there is no option or emphasis on actually visiting the page in question.

I definitely recommend using these sites, and for some people visiting the actual UI example on a page isn’t a necessity. But for me, I’d rather be able to click around the UI than look at what is predominantly concept work. Using these sites might be better perhaps at the start of your design process, when you’re not trying to be super detailed.

7. Brief your colleagues

Again, this is another obvious one, but there’s a couple of ways you can do it. Just asking for some help and making your colleagues aware of what you’re trying to achieve can help massively.

Quick briefs

Brief your colleagues on the exact thing you’re trying to design, and ask everyone to have a crack at it in their downtime. In return, offer to work on something that they’re stuck on – an “inspiration exchange” – if you will.

Ask them to spare 30 minutes or so coming up with some concepts for you to jog your brain a bit. In your (brief) brief (yes keep it short – you don’t want them having to spend 10 minutes reading or listening to your brief) ask them if they’ve designed something similar before; what the best/worst examples of this UI are; where they might go to look for inspiration; and so on.

If you work in a design team together in an office, consider doing this at 2pm on a Friday when everyone is on wind down mode.

Sharing is caring

Just sharing what you’re working on with other designers is likely to entice a response along with some inspiration. You don’t have to ask for a deliverable or put any challenge forward.

I was recently working on designing a “meet the team” page. I happened to mention it to a designer friend of mine, and it just so happened that he had recently designed something similar. I then not only had his work to look at, but also had his brain to pick about the examples he found along the way.

Previous work (agency?)

It’s always a possibility that the piece of UI that you’re designing has previously gone through a few rounds of design and concept – especially if you’re new to the company.

Ask if the UI you’re working on has been designed before, or if any agencies have had a stab at it.

8. Product Hunt

For those who don’t visit PH obsessively on any single day, it’s the place to go to see new products and startups being launched.

Similar to what I said with San Fran based companies above, startups are usually the most forward-thinking in terms of design. Pretty much 100%  (that’s not a verified stat!) of startups launch on ProductHunt these days. Seriously, it’s the place to go if you want to stay abreast of who’s launching what.

Here’s what PH looks like today:

download (65)

It’s worth doing a search for your industry to see what other companies exist and have already launched there. You’re bound to find a few that you’ve never heard of.

Examples:

If you’re not already on ProductHunt, then check it out!

9. Always be bookmarking

Get into the habit of bookmarking nicely designed websites.

Whenever I see a nice design these days, as well as adding it to UIDB, I’ll also chuck it into a bookmark folder for safe-keeping. Here’s what mine looks like now:

Screenshot 2016-09-02 12.27.21

This post is a work-in-progress: more methods to gain inspiration will be posted regularly 🙂

Let me know in the comments if you have any tips or advice on how to get design inspiration!

Thanks

Get more articles like this into your inbox Join the awesome UIDB newsletter