ViewComponent needs a logo!

[joelhawksley]

Steps to reproduce

Go to https://blog.cloud66.com/hotwire-viewcomponents-and-tailwindcss-the-ultimate-rails-stack/.

Look at this picture:

Think about how cool it would be if we had a logo!

Expected behavior

ViewComponent has a logo.

Actual behavior

We don't.

References

It might be nice to figure this out as part of https://github.com/github/view_component/issues/505.

[dylanatsmith]

Designer-developer checking in. Would love to help out with this.

Have you thought much about possible concepts or anything yet?

[joelhawksley]

@dylanatsmith let's do it!

We don't have much in the way of concepts, but generally speaking, ViewComponents are used to create building blocks of UI, so I could imagine something along those lines symbolically.

Perhaps we could catch up over a Zoom? Hit me up with some days and times that would work for you: joelhawksley@github.com

[dylanatsmith]

I caught up with @joelhawksley earlier today and wanted to drop a few notes from our conversation.

• ViewComponent is currently too plain, but overbranding should also be avoided
• Similarly, branding should be neither too generic nor too distinct; blending in with the ecosystem would be positive
• Litmus test: Does the logo fit alongside other frameworks' logos (as in the screenshot above or on sites like Storybook)?
• Branding should lend an air of maturity and gravitas to the project
• "Building blocks" may be too cliché as a visual metaphor, but could lead to more interesting ideas
• A nod to Ruby would be welcome

[romashamin]

Hello everyone from Martian designers! @palkan shared a link and asked us whether we can help here.

As a quick idea, we could take a ruby, split it into two pieces, and get styled V and C. Like this:

The result is close to the building blocks idea cause we actually assemble the logo from parts. And it’s a hidden link to Ruby, as you wanted 🙂

What do you think?

[joelhawksley]

@romashamin thanks for taking a crack at the VC logo! This is a fun concept.

I wonder how it might look at smaller sizes, such as a favicon or added to this list on the Storybook site:

[romashamin]

@joelhawksley for example:

The geometric nature of the logo accurately fits a pixel grid in favicon sizes:

[boardfish]

There's something unsatisfying about the difference in heights and angles. The C looks too tall to be a C.

Does it look any better if you position what you've got there like this?

Excuse the rush job - it'd be nice to have the top of the V align with the 'curve' of the C at that angle.

[BlakeWilliams]

I like the inspiration and idea behind the logo!

I have a few thoughts though. I agree with @boardfish about the proportions. I think the V is much wider than a standard V and the C is also a bit short width wise which I think throws off some of the balance. I also find it a bit difficult to distinguish in the smaller formats.

Unrelated to any specific design, In my mind, view components are all about encapsulating your views (translations, CSS, JS, logic, etc.) so maybe there's some inspiration to be found there as well?

[boardfish]

I was thinking about this just now and scribbled up an idea. It'd be nice to have the point of the gem representing a V somehow, but I figured we could make a C from the outline. In a way, I feel like that sort of represents the encapsulation view_component gives, because it almost completely surrounds the gem here.

I realize this doesn't quite fit the theme of "building blocks", but hopefully it'll inspire something good.

[dylanatsmith]

A few observations on the above:

The gem shape is very simple, sturdy, and balanced. The concepts riffing off that come from an interesting place but, by nature of deconstructing the gem, we immediately lose the qualities that make it work so well.

Taking a look at the list of framework logos, there are many commonalities. Many are similarly "sturdy" to the gem shape above, and many are symmetrical or at least the visual weight is very balanced. There's something to learn from that.

Also worth noting that many share similar shapes. Angular, HTML5, Web Components, Marko, Preact, and Stimulus all have hexagonal angles or badge-type shapes reminiscent of a gem. Given the thoughts about "fitting in" with the framework ecosystem, this might be something to lean into or an opportunity to buck that trend (a la Tailwind's curves) if there's no way to keep it fresh.

[dylanatsmith]

Inspired by the above, I was playing around with gem shapes and stumbled on this direction.

A typical illustration of a gem from a top perspective...

...with lines added to create a central box shape (representing building blocks, encapsulation, etc)...

...then other lines removed to leave an abstract box in the corner of a room.

I played around with a bunch of slight variations on this. It's starting to feel like I took the scenic route to creating a generic box but maybe someone with fresh eyes can chime in. Any threads worth pulling on?

[boardfish]

You might've accidentally recreated Webpack there. :joy:

[dylanatsmith]

At least I feel validated. 😂

[dylanatsmith]

I played around with a bunch more hexagon explorations, mostly turning them into the letter V. Is this anything?

[boardfish]

I'm a fan of the Tall V ones, especially because of the implicit V for ViewComponent, hexagonal shape and diamond on the right that both allude to Ruby.

[dylanatsmith]

That's probably how I would have pitched this if I was trying to convince a client haha. Nicely done.

The diamond was a happy accident; I didn't notice it until I read your comment. I like that, though, and for that reason I'm more drawn to the versions on the right side of that row. The gap highlights the shape. My implementation, however, skews the diamond so here are a few adjusted versions that preserve it.

I think I'm most drawn to the versions in the left two rows right now (two-tone red and the solid, single-colour variants). Something in me really wants the rounded versions to work but I'm worried they make the diamond look a bit awkward sat beside the left section.

There's something about the flat edge on the bottom in these versions that makes it feel "sturdy" as well. It takes up more of a square compared to the "Wide V" explorations. Both feel like you can view them as some allusion to a box as well. But the "Box" explorations are probably still too close to my earlier ideas and thus Webpack et al?

Just for fun, here's what the "Tall" versions would look like with the diamond turned into a gem.

The bottom ones are kind of neat — part hexagon, part checkmark, overt Ruby reference, and almost a V. But maybe trying to do too much?

@nshki mentioned a similarity between the "Tall V" style and GitLab's logo. I personally don't think it'd be too close to worry about confusion, especially in contexts where the ViewComponent is likely to be used.

In the above, I think the closest logo is actually Angular, mostly because of their use of two-tone cherry colouring in a shield shape. The giant "A" clear things up quite a bit, though. Using any colour other than deep red — or at least not incorporating it as an accent in some way — would do a pretty big disservice to the goal of associating with the Ruby ecosystem.

[dylanatsmith]

A few more pulling on the same thread:

The wider gap seems to distance this version from any of the similar logos mentioned so far, and also emphasises the diamond shape. Scales down well, too.

Something about this is making me look for a shape or letter in the negative space, though, that isn't there. For example, a slight modification makes it look like a white U shape with dark shadows:

Here's another direction playing on the diamond idea. This is sort of like "moving Ruby forward" with the arrows. We lose the "V" idea.

The leftmost and rightmost concepts are probably too generic but I kind of like the box-looking 2 and box/chevron 3. 2 doesn't play well as a single colour, so might struggle in situations like Joel's initial screenshot at the top of the thread.

One thing to think about is if the diamond shape is obvious enough as a Ruby reference. It was nice as a happy accident in the earlier version but not be a strong enough motif on its own. Maybe that doesn't matter.

[dylanatsmith]

One good thing about these shapes is that they're super quick to iterate on. 😅

I'd love to hear what everyone's thoughts are so far.

To reiterate the direction discussed earlier:

• ViewComponent is currently too plain, but overbranding should also be avoided
• Similarly, branding should be neither too generic nor too distinct; blending in with the ecosystem would be positive
• Litmus test: Does the logo fit alongside other frameworks' logos (as in the screenshot above or on sites like Storybook)?
• Branding should lend an air of maturity and gravitas to the project
• "Building blocks" may be too cliché as a visual metaphor, but could lead to more interesting ideas
• A nod to Ruby would be welcome

Some feedback prompts:

• Are any versions standing out as particularly strong visually?
• Do you feel strongly (positively or negatively) about any particular visual concepts?
  • Hexagonal shape
  • Box metaphor
  • Abstract letter V
  • Arrows
  • Diamond
• If you don't think we're there yet, why not? Is there something about logos you like that you think we're missing?
• Do we think some shade of Ruby red is the right colour?

[boardfish]

• Are any versions standing out as particularly strong visually?

I'm a fan of the last one you posted, particularly the version that's in the sidebar. The thing I like about this one is that the negative space sort of implies that it's the top-right corner of a ruby, and the chevron also sort of represents ViewComponent as a component that extends Ruby. However, as I'll go on to mention, the hexagon style means this feels a bit less original.

I also like this one - it feels the most original and the diamond as an allusion to Ruby is very strong, but the negative space in the other one I've talked about here makes it a lot stronger at a smaller size.

• Do you feel strongly (positively or negatively) about any particular visual concepts?
  • Hexagonal shape
  • Box metaphor

I'm on the fence about both of these, since they feel like they've been used a lot in the tech space in general.

• Abstract letter V

I like this idea, but I think it's quite hard to execute well. It's the kind of thing we could definitely look to include in negative space, or a C.

• Arrows

These have some potential, but I'm not sure they're as exciting as a diamond.

• Diamond

Strongly in favor of including this, or all or part of some other gem as a Ruby allusion.

• If you don't think we're there yet, why not? Is there something about logos you like that you think we're missing?

I feel like we're much closer, especially thanks to the work you've done here. :sparkling_heart: But I personally don't feel huge attachment to what's here so far. I think the last example in particular has shown that we can do lots to make the logos look striking at any scale.

• Do we think some shade of Ruby red is the right colour?

I think we should be careful not to close off options by getting too attached to it, but it looks great in what we've seen so far.

If you want to answer these questions more easily, copy this template:

``` > * Are any versions standing out as particularly strong visually? > * Do you feel strongly (positively or negatively) about any particular visual concepts? > * Hexagonal shape > * Box metaphor > * Abstract letter V > * Arrows > * Diamond > * If you don't think we're there yet, why not? Is there something about logos you like that you think we're missing? > * Do we think some shade of Ruby red is the right colour? ```

[jaredcwhite]

A few more pulling on the same thread:

FYI, just happened to notice this today…

FWIW, I like the latest set of 3D boxes and lines of negative space.

[dylanatsmith]

FYI, just happened to notice this today…

Nice catch, @jaredcwhite. Really helpful to have lots of people familiar with other logos to prevent a parallel thinking accident.

[joelhawksley]

Wow! Thank you all for your feedback and to @dylanatsmith for the design iterations.

As I'm not a designer myself, I enlisted the eye of several colleagues for reviewing what we have so far. We came to the agreement that this option is the strongest:

Here's why we like it:

• The arrow created by the negative space reads clearly, even at a small size. It reads most clearly pointing right, not upwards or downwards.
• The parallelogram (leftmost form) reads like a gem, a nice nod to ViewComponent's Ruby nature.

@dylanatsmith would you be willing to provide some explorations around shading, rounding, and any other permutations you might want to consider?

[dylanatsmith]

Thanks @joelhawksley, appreciate the thought that went into that review. I agree with those points.

With shape narrowed down I should be able to explore some additional options inside of the next two weeks and add them here for consideration.

[Spone]

Closing since this has been addressed by #1108.