How do you actually use design references without just copying them?

by•

I think finding good design references is the easy part. Figuring out what to take from them is much harder.

For example, you find a dashboard with a really clean layout. But is it good because of the spacing, the information hierarchy, or simply because it has less data than your product?

I've been thinking about a few things worth checking before borrowing a design pattern:

  • Context: What problem is this design solving, and is it similar to ours?

  • Structure: Does the layout still work when the content gets longer or more complex?

  • Interaction: What happens in empty states, errors, or when users need to go back?

  • Tradeoffs: What did this product simplify or leave out to make the experience feel clean?

One thing I find interesting is that screenshots rarely tell you why a design decision was made.

A table might look great with five rows, but what happens with 500? A simple navigation might work perfectly until you add multiple user roles and permissions.

I'm curious how other designers approach this.

Do you have a process for breaking down references before using them? Or a small detail you always check that other people tend to miss?

8 views

Add a comment

Replies

Best

Your point about screenshots hiding the why has a twin: screenshots also hide the states. When I rebuilt the on/off switch in my Flutter app to match the current iOS one, I measured it off the system Settings app instead of copying a mockup: a 62 by 28 track, a capsule thumb of 37 by 24 inset 2 on every side. The detail no static reference showed was that the thumb gets 5 points wider while a finger is on it. You only see that by pressing the real thing and holding. So if the reference is a live product, I would use it with my own hands before taking anything from it, and write down the numbers, not the impression.