Feedback wanted: Otter Color, an image color matching tool
Otter Color is a web app that, as the tagline says, lets you bring your colors into any image. Specifically, it takes the color scheme from one image and applies it to a bunch of others. My hope is that it would be useful to people who manage social media feeds for brands, or otherwise want a coherent and distinctive look to their graphics assets.
I'd love to get your feedback on the the concept, the landing page, and/or the app itself. Also, if you are aware of any communities that would be interested in this sort of tool, please point them out.
P.S. if anyone is interested in a free account, please reach out and I'll gladly set you up :-)
Hey Ron,
I think the landing page could be improved a bit. Maybe simpler and clearer would be a good direction. You could also provide a quick aha moment right in your landing (I love what @marclou has been doing with https://habitsgarden.com).
I elaborate a bit more with a few audio messages here if you're interested: https://www.vero.fm/page/rec0j8fXvd410R21n/
Hope that helps,
Go Otter Color!
Thank you Ben! This is super helpful, and I'll try to act on all your suggestions.
I definitely agree that the explanation of what the tool does needs to be clearer. I'll work on improving that.
I'm less clear what you mean when you say the page should be "simpler" - is it something you could elaborate on?
Yep sure! It is a bit hard for me to convey the meaning in writing. Have you had the chance to access the Vero I sent you?
Yes, I listened to your audio feedback. Very nifty! I'll go listen to all of it again :-)
Let me try it out: your landing feels a bit like an app without being the app.
Haha 😂 I m sorry this is far from clear. Pretty hard to convey. Maybe the best thing I can say is the habit garden website. He succeeds in giving one core event in the app, but it still looks like a simple landing page.
I see what you mean regarding Habits Garden. It's slick and satisfying for sure! I'll see if I can come up with an analogue.
Angel Ben is back with kick-ass audio feedback!
Hahahaha! That’s an habit now, you know 😛
Hi Ron! What an interesting idea. Here's some thoughts for you:
Thank you Mike! Really appreciate this valuable feedback and I'll make sure to act on it.
I agree with you regarding the color scheme. I used the same design for the marketing content as for the app, and that's probably a mistake. The app needs to use muted colors so as not to distract the user from their work.
Happy to help!
re: color scheme - another direction you could potentially take this is to use a completely desaturated design (fully black and white) across the site, except for anywhere you're demonstrating how the software works. That might serve to really highlight the power of using/switching/choosing colors.
I think the page is already quite simple and easy to understand—although the paragraph may need another line break, maybe. The animation looks great!
I understood that it colors images according to an existing color palette, but I was briefly confused whether it's the other way around (generating a palette based on an image).
Thanks - that makes sense. There are quite a few tools and sites for extracting palettes from images. Not nearly as many for applying a color distribution to an image. I'll work on clarifying this.
Hey Ron,
Cool app! One quick thought:
We read from top to bottom, I would put the color palette up, the image down.
My first thought was "I can extract colors from images" because of the positioning.
Keep it up!
Thank you Marc! I'll work on making the animation better.
I have a couple of static illustrations to try and demonstrate the process:
One here: https://twitter.com/ottercolorapp/status/1491544947589148674
and one here: https://ottercolor.com/blog/getting-started/
Are these any more helpful? If so I could build a landing page animation that looks more like them.
Yep, those illustrations are great and clearer :)
Oh yes, please! Do you offer a js library or api? I’m a developer so I like having the option to automate tasks like this.
Design-wise it feels like Material UI, so not particularly good or bad. Do watch your color contrast—the white on yellow button fails WCAG2.0 accessibility guidelines.
It’d be fun to see more examples on your social media.
I’d like more info about the different color algorithms—what’s 1, 2, and 3 really? That would help build a mental model of how the algorithm would look across a variety of different photos.
All great points, thank you very much!
I made sure to separate the algorithm from the UI, so it'll be straightforward to package it as an API service, if the demand is there. As for a JS library, that I already have, but I'm not sure how I could sell it, as opposed to giving it away for free. Would love to hear any suggestions.
Material UI: Indeed. This is my first substantial web dev project, and I ended up going with MUI, but I'm not married to the library. Is there something clearly superior out there? I'd switch to it in a heartbeat. Either way, I'll replace the yellow buttons as you advise.
I plan to add a couple of posts to the blog to discuss the different algorithm configurations and the skin-tone preservation feature. Loosely speaking, the configurations affect the number of representative colors the algorithm identifies in each input, and whether or not it uses luminance data when planning the transformation. In the current set, #2 is fairly aggressive in matching the palette, #3 is the least aggressive, and #1 is a middle-of-the-road approach.
I'm just realizing that IH doesn't have a direct messaging system. If you provide me with an email address to use via another channel - the contact form, for example - I can set up an account for you.
I usually see the API route when it’s a data product. However, I see the library route in two cases: when the product uses images or video (shifting the hosting cost to the consumer) or when the product is complex and has options better suited for programmers.
You can open source your product under the copyleft license like AGPL, and charge for a commercial license. For example, see ghostscript, a popular software for printing.
Other libraries, like sheetjs simply charge for access to their library.
Personally, as a user, I significantly prefer a library over an API.
Looking forward to reading it! That already makes choosing the right algorithm easier—tooltips / labels with that info would help a lot.
Eh, not really. MUI and TailwindUI are the only libraries I recommend these days. I say MUI when you just need a UI done fast with sane defaults, especially for dashboards. Use something like TailwindCSS when you need custom designs.
Sent! Thank you 😄