How to save website design inspiration you can find again
Capture just the part you like, such as a pricing table or a sign-up form, not the whole page. Name it with the site and the part, file it in a folder for that kind of part, and write one line on why it works.
By Manish Kalyan, who makes Screenshots Clipboard. .
Why do inspiration folders stop being useful?
They fill up with whole-page screenshots named by date. Without the part you liked and the reason, you can’t find it later or remember why you saved it.
How do I capture just one part of a page?
In Chrome, right-click the part, choose Inspect, then right-click its line in DevTools and pick Capture node screenshot. Or drag a box with Win+Shift+S on Windows or Cmd+Shift+4 on a Mac.
How should I organise a swipe file?
By the kind of part, not by site, because you’ll look for “pricing tables” long after you’ve forgotten where you saw one.
- One folder per part: pricing, sign-up, navigation, empty states, onboarding, footers.
- Name each shot by site, part and state: “example.com, pricing, yearly toggle”.
- Save the states too: hover, error, empty and the phone layout.
- Add one line on why it works: “Plan names say who each plan is for.”
- Keep the date and the link, because sites change.
What should I collect first?
The screens you have to design next. If a pricing page is on your list, save ten pricing tables this week and compare them side by side.
Is it OK to copy a design I saved?
Use references to learn patterns, not to copy someone’s layout, pictures or words. Take ideas from several sites and make the result your own.
Where Screenshots Clipboard helps
Screenshots Clipboard is a Chrome extension made for this: choose Area, then hover until the part you want lights up, like a card or a table, and click it. You can scroll the page while you pick. Shots go into collections, with folders inside folders, and you can search them by title or site. It’s free; with Plus, you can download a whole collection as one .zip. Plus is $2.99 a month or $19 a year.
Questions
Should I save screenshots or links?
Both. The screenshot keeps what you saw, because sites change, and the link takes you back to see it move.
How many references do I need?
Five to ten for the screen you’re working on is enough to see the patterns. Past that, you start collecting instead of designing.
Over to you
Which part of a website do you collect most?
Write to us, and a person replies. Write to us