Design wordmark + icon for Netable

[ehyleong]

Seems appropriate to track this in an issue here rather than on slack, so here goes:

Recap:

• What is Netable? It's an intentionally simple tool for connecting to APIs in our iOS apps.
• Target audience: other iOS developers
• Visual metaphors: connections, networking, links, globe, endpoints, a-> b
• Colours: orange/yellow (Swift colours)
• What's needed: a wordmark and icon for the example app

Initial pass:

[ehyleong]

Another pass on the wordmark here:

• Made some variations on the typeface, as well as colours
• I'm liking the look of Montserrat (especially the alternate "t") -- and I think the contrast of the navy vs. orange/yellow gradient is strong

Some icon passes as well:

• While this doesn't match the wordmark exactly per se, it might be nice to use the nodes in the wordmark to evoke an N (like, N stands for Netable!)

Any thoughts/preferences for these? Or suggestions on where to take this further? @brendanlensink @apike

[brendanlensink]

I like Montserrat as well!

I'm curious what the logo would look like with the words in the red-orange gradient but with a blue o-o.

If you tried that and think it looks weird, I'm pretty happy with red-orange everything as well.

[ehyleong]

Thanks @brendanlensink! I did try that -- though I didn't really like it as much. 🤔 Here's how that looks:

[apike]

The orange Montserrat one is nice. ⭐ It would be cool if the "link" had a bit more contrast without going all the way to navy – maybe just flipping the left/right gradient direction inside the "link" shape?

[ehyleong]

Thanks again for the feedback folks, here's another pass on this:

• I like the yellow/orange gradient too but after looking at it for a while the way the gradient was set up seemed muddy, so I've redone it so that each letter is a different step of the gradient. The result looks cleaner and more vibrant, IMO.
• Also experimented more with alternate letters. Montserrat has straight/tilted e's and straight/looped l's. The straight e/l's are a bit more "serious" while the looped/tilt are more friendly. Maybe the middle could be a good balance of both?
• A couple ways for adding contrast -- making the nodes either solid red or the flipped gradient. I think the red one works pretty well.

[brendanlensink]

Top left is my favourite! :shipit:

[ehyleong]

Update!

• To recap from our design sync: the top row is definitely the winner in terms of type. Allen prefers the gradient, while Brendan and I like the red node. What I didn't like about the gradient was how dramatic it was, so I tried softening it here -- but I think I still prefer the red as it has more contrast by comparison.

• For the example icon, since we're not gonna pursue the navy, here's a couple options:

  

• And how it looks on device:

  

• I like the orange background but its also pretty close to the iBooks one. So maybe the bottom-right? 🤔

[brendanlensink]

My vote still goes for the red node, and icon 3 ⭐️

[ehyleong]

Cool! Happy to go with those two. Here are the final assets for both: https://www.dropbox.com/sh/intpxu29pg64yh5/AADhav2rgf8_Ujsmmi9UQm6Da?dl=0

[brendanlensink]

Done!