DEV Community

Cover image for I tried 15 logos for my devtool. Every one looked like another devtool
Orvi Das
Orvi Das

Posted on

I tried 15 logos for my devtool. Every one looked like another devtool

I'm building an open source (MIT) tool that watches the live responses of APIs you don't own and tells you when a field disappears, changes type, or starts coming back null. Even when the API still returns 200 OK.

It needed a logo. Here's what I learned getting there, plus a 10-minute test you can run on your own.

The category is a sea of the same shapes

Look at API and devtool logos and you'll see the same shapes over and over: shields (security), curly braces (code), upward arrows (growth), triangles and blue gradient blobs.

My first rounds were all of that, done slightly differently:

  • Four bars with one misaligned: looked like a "text align" icon
  • Two overlapping tiles: looked like the "duplicate" icon
  • A triangle split in half: looked like Vercel
  • A lightning bolt: looked like Supabase

Each one was clean and technically fine, and each one could have been any company's.

What finally worked: a character with one idea in it

The product is basically a guard dog for your integrations. So: a dog.

But a dog alone could be any brand. The twist is the eyes: a minus and a plus, the two markers every developer knows from a diff. A guard dog that reads diffs.

The 10-minute logo stress test

Steal this. It killed most of my concepts, and it was right to.

  1. The 16px test. Shrink it to favicon size. If the idea disappears, the silhouette has to carry it. My dog's eyes merge at 16px, but the floppy ears still say "dog".
  2. The "whose logo is this?" test. Put it next to five logos from your category. If it blends in, it's not done. Half my concepts failed here.
  3. The UI glyph test. Does it look like an icon people already know (menu, copy, pause, align)? If yes, users will read it as that icon, not as you.
  4. The one-colour test. Make it solid black, then solid white on dark. If it needs a gradient to work, the shape is weak.
  5. The name test. Show it with your name. Does the symbol explain any part of the name? Mine covers "Guard" (the dog) and "Diff" (the eyes).

Help me pick

A is blue: on-brand, calm. B is orange: louder, stands out next to every other blue devtool.

Drop A or B in the comments, and tell me if a mascot makes a dev tool feel less serious to you.

If you work with JSON payloads, the free JSON Diff tool is the same engine, no account needed. The project is APIDiffGuard on GitHub.

Top comments (1)

Collapse
 
hellomathieup profile image
Mathieu Poli •

B for me. Next to all the blue devtools, orange is what makes you look like yourself, which is the whole point of your test.