Create a logo for Surface

[paulstatezny]

My ideas from Slack:

• Maybe see if Surface logo can nod at the Phoenix logo in some way
• Involve the look of a 3D wireframe "surface":

[moderntimesmedia]

What about a mesh/polygon-based variation on the Phoenix logo? Something sorta like this, but as close to the original logo as copyright allows (and perhaps in a different color).

It would do a good job indicating that Surface is intimately tied to Phoenix, and deals with its 'surface'.

[olivermt]

A phoenix smeared across the surface of something?

Think bugs on windscreens!

(I am not allowed to contribute to any of my wifes work, unfair no?)

[batate]

I like simple... like three horizontal wavy lines in the shape of an S or a wave, like the surface of a river. Then, the favicon is simple and recognizable. Think of three of these: ~ flipped and turned 90 degrees.

Something like the attached.

[batate]

Or this one:

Rough but you get the idea

[darraghenright]

I've been thinking about this a bit as well. When I think of Surface, and the component based approach to building UIs in general, I think of layers and interlocking units. To that end, I had an image of an isometric cube comprised of various smaller pieces (the sum of which make up the whole I suppose!). Obviously the balance would be in creating something interesting that's not too complicated.

I'm no designer but I will try to sketch this out for what it's worth.

[batate]

yes... kind of like this: https://www.brandcrowd.com/logo-design/details/42467

I would think favicon and go from there.

[darraghenright]

Hi Bruce! Yeah, coincidentally enough that's quite similar to what I was thinking.

I haven't had time to whittle this up on the computer just yet but I already sketched out a first draft on my dirty old whiteboard — pardon the roughness!

I tried to take the general angle bracket shape to compose a cube that would also suggest the characters SF in isometric. I can work some better, digital representations of this over the long weekend.

EDIT: my thinking is that the geometry would be represented by colour (and possibly also some negative space) rather than lines as shown in the sketch, which I think would be more favicon friendly.

[Malian]

@darraghenright Thanks for the suggestion! I like the idea :) Here are some thoughts:

• I like the "S" on the left, but the right side does not seem to have a meaning, does it? :sweat_smile:
• Maybe we could have a "S" on every faces

[darraghenright]

Thanks @Malian 😄 Yeah, the sketch is very rough. But I discovered today that Affinity Designer has a cool isometric mode so I will try to get a better example and some variations together this week. I'll try a multi-faced S as well, thanks for that suggestion!

[krns]

I also like the design and thought the right side should outline a "F".

[darraghenright]

That's pretty much the plan. Hopefully this will be a lot more clear with proper digital versions (and colouring). There are definitely a few variation ideas to play with.

[msaraiva]

Thank you all for the suggestions so far. Cool stuff!

If we go with the isometric SF cube, should we change Surface's file extension from .sface to .sf? I wouldn't mind. 😁

[oleksify]

I will add my 5 cents :)

The idea was to use a sf as suggested above, to reference the "possible" file extension for template. The inspiration was successful and memorable logotypes from Adobe for their software products (which were used quite often to develop for the web).

Light blue color already has association with Surface because of documentation website. I made it a bit lighter. It's coming from Open Color open-source color scheme.

Font (also open-sourced) is creating an optical 3D effect, which resonate with the "feeling of surface".

Also, it will be easy to print on a t-shirt using different technics (I used to work in print).

I'll try to think of other cases, like favicon, file icons (for example how it will look in VS Code), etc.

---

Quick prototype for the above cube version:

Simplified cube version:

[paulstatezny]

Personally I find the "SF" in some of these concepts confusing. Because SF isn't an acronym for Surface. If the library were named "San Francisco" I could see it though ;-)

[oleksify]

@paulstatezny I had the same thought. Mainly because macOS font is called San Francisco. 🤔 🤔 🤔

[paulstatezny]

That said, I think these are some cool graphical ideas!

[justin-m-morgan]

Maybe a design that expresses the contrast of complexity behind simplicity. Like if the cube idea had a face of a clean typographical stamp while the other visible face partially disclosed the complexity "beneath the surface".

[justin-m-morgan]

Or an iceberg.

[mrchypark]

my first suggestion is mask of phoenix.

It means sur"face" of phoenix.

second one is mosaic of phoenix(elixir package) logo like phoenix lego.

It means component system of phoenix(elixir package).

I'm not designer but want to help. thank you.

[mrchypark]

How about simple version one of these?

It means "surface" and component system

[moderntimesmedia]

would it perhaps make sense to make the Surface logo/type look more similar to Nx and LiveBook?

[simonmcconnell]

I prefer the density of this sketch to the vectors graphics. I don't think a logo requires any deep meaning or has to obviously spell out the name of a product, it just needs to look nice in various sizes. This is my fav so far.

[msaraiva]

Hi everyone!

Now that v0.5 has finally been released, I'll be able to address other pending issues, starting with this one :)

I'll review the discussion and suggestions we have so far. I should get back to you by the end of the week with updates.

Thank you all for you patience and effort. You're amazing! ❤️

[davydog187]

I am a fan of the sf version designed by @devilcoders, although I'd like to see a lowercase version :)

[darraghenright]

Wow, a lot has happened here in the last while — and to Surface itself! I was just reading though the 0.5 changelog, lots of really great stuff in there.

Since it's been referenced a few times, I tried my hand at fleshing out that isometric box sketch properly, and I ended up disliking it (most probably because I didn't have the skills to make it work) and felt it was a bit too chunky and busy.

@paulstatezny made a really good point about "SF" too — the F isn't really that meaningful so maybe it could be dropped which could make for simpler ideas.

I still like the thought of matching and interlocking shapes, the idea of components working together to create something bigger out of simple pieces. I started thinking a bit more about this and kicked a few ideas around.

Here's one example — could be worked on a bit more, but I think I like this because it ticks the previously mentioned boxes, and it's nice that there's an S in the negative space (although I don't think it's overtly obvious). Presented in grey because I don't have any strong opinions about colours at the moment, but there'd be a bit to play with there — both pieces could be the same colour, or different.

[batate]

Wow, a lot has happened here in the last while — and to Surface itself! I was just reading though the 0.5 changelog, lots of really great stuff in there.

Since it's been referenced a few times, I tried my hand at fleshing out that isometric box sketch properly, and I ended up disliking it (most probably because I didn't have the skills to make it work) and felt it was a bit too chunky and busy.

@paulstatezny made a really good point about "SF" too — the F isn't really that meaningful so maybe it could be dropped which could make for simpler ideas.

I still like the thought of matching and interlocking shapes, the idea of components working together to create something bigger out of simple pieces. I started thinking a bit more about this and kicked a few ideas around.

Here's one example — could be worked on a bit more, but I think I like this because it ticks the previously mentioned boxes, and it's nice that there's an S in the negative space (although I don't think it's overtly obvious). Presented in grey because I don't have any strong opinions about colours at the moment, but there'd be a bit to play with there — both pieces could be the same colour, or different.

This is the bomb. Simple, iconic, immediately recognizable. Great shape; great brand.

[darraghenright]

Thanks @batate — I really appreciate that. I think it could be tweaked, the two pointy corners might look better rounded off for example. I just semi-randomly picked the Ubuntu font as well, so the font is definitely that could continue to be explored.

[batate]

I think it could be tweaked...

Agreed. We're talking rough ideas.

-bt

[paulstatezny]

@darraghenright I like it!

• Unique and easy to recognize.
• Simple / lacking fine details.
• Monochrome.

These ensures it works in various scenarios, especially where limited to a few colors. (E.g. print, banners, etc)

[msaraiva]

Here's one example — could be worked on a bit more, but I think I like this because it ticks the previously mentioned boxes, and it's nice that there's an S in the negative space (although I don't think it's overtly obvious). Presented in grey because I don't have any strong opinions about colours at the moment, but there'd be a bit to play with there — both pieces could be the same colour, or different.

@darraghenright I just loved it! ❤️

Basically for the same reasons pointed out by @paulstatezny.

These ensures it works in various scenarios, especially where limited to a few colors. (E.g. print, banners, etc)

Speaking of colours, at least for the website, I can just use a white version of the logo and it'd work just fine. However, since we're already discussing logos, identity, etc., do you think we should choose a different colour for the website? Would if be nice to somehow reference Phoenix, picking up a similar colour for Surface?

I'm not an expert on the subject but sometimes I find the orange~red colour harder to compose with other colours, making it the task of defining a nice palette a bit of a challenge. But again, I'm not an expert so I might be just saying nonsense here :)

For the record, the blue colour we have now was just a random template I picked up at the time so I'm not attached to it in any way.

Thank you again!

[paulstatezny]

Picking a single brand color makes sense to me. Blue is always the safe choice; it's considered to give off a professional/trustworthy vibe. But matching Phoenix might be a nice way to indicate that Surface "goes with" Phoenix.

Would there be a problem with directly using Phoenix's shade of orange? Perhaps someone could reach out to McCord.

[darraghenright]

We could play around with some colours. I can make some time to come up with a homepage mockup with a few colour variations, that could be useful?

[msaraiva]

@darraghenright I'm totally fine to keep using our current blue theme. I was more like just trying to get some opinions from people with more expertise on the subject than me :)

So if you feel there's any value changing colours for any reason, you can certainly play around with some alternatives, otherwise, we can just go to the next step, which I believe would be for you to tell us when we can start using it and how do you intend to license the logo and any other related source file. I'm sure there must be some kind of bureaucracy involved. Right?

[darraghenright]

@msaraiva Not sure what the usual procedure is with graphics but I can enquire. As far as I am concerned if you are happy with the logo then it's all yours. I've had a great experience with Surface, so this is just my small way of saying thanks for all the work you've done!

[msaraiva]

Awesome!

So I'll do the same thing that Ecto did, which was to add a section to the README with information about the logo's copyright. See https://github.com/elixir-ecto/ecto#logo.

Since we don't have a specific organisation for Surface (yet?), I believe I'll have to hold the copyright as an individual. So I guess something like this should be enough:

Logo

The Surface logo was designed by Darragh Enright and donated as Copyright (c) 2020 Marlus Saraiva.

---

@darraghenright could you export a couple of variants of the the logo? Like, an SVG version of it. Maybe a transparent PNG with just the logo without the name, etc. This way we could start using it right away in different places, like profile pics, icons and so on.

I also want to thank everyone again for all the wonderful suggestions and valuable comments on this issue. I'm extremely glad that Surface has managed to get enough attention at the point that so many talented people decided take their precious time to contribute to the project. Cheers.

❤️ ❤️ ❤️

[batate]

Probably a favicon too.

-bt

On Tue, Jul 6, 2021 at 10:28 AM Marlus Saraiva @.***> wrote:

Awesome!

So I'll do the same thing that Ecto did, which was to add a section to the README with information about the logo's copyright. See https://github.com/elixir-ecto/ecto#logo.

Since we don't have a specific organisation for Surface (yet?), I believe I'll have to hold the copyright as an individual. So I guess something like this should be enough: Logo

The Surface logo was designed by Darragh Enright https://github.com/darraghenright and donated as Copyright (c) 2020 Marlus Saraiva.

@darraghenright https://github.com/darraghenright could you export a couple of variants of the the logo? Like, an SVG version of it. Maybe a transparent PNG with just the logo without the name, etc. This way we could start using it right away in different places, like profile pics, icons and so on.

I also want to thank everyone again for all the wonderful suggestions and valuable comments on this issue. I'm extremely glad that Surface has managed to get enough attention at the point that so many talented people decided take their precious time to contribute to the project. Cheers.

❤️ ❤️ ❤️

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/surface-ui/surface/issues/287#issuecomment-874810385, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABFDOMBTPYB7LMCJYT7IS3TWMHJPANCNFSM4ZCG5BMA .

--

Regards, Bruce Tate CEO

https://bowtie.mailbutler.io/tracking/hit/f8218219-d2a8-4de4-9fef-1cdde6e723f6/c7c97460-016e-45fb-a4ab-0a70318c7b97

Groxio, LLC. 512.799.9366 @.*** grox.io

[darraghenright]

@msaraiva Looks good to me!

And I'll get a pack together ASAP in a few different formats. I'll ask a designer buddy what's good to include here.

Oh, and a favicon, good call @batate!

[stefanchrobot]

Doesn't it look too close to Shazam's logo?

[darraghenright]

Interesting. Totally open to opinions on this as my perspective on this will probably be biased — I don't use Shazam so wasn't aware of their logo.

Looking at it now, I would say that there are definitely similarities but also some key differences. Their logo includes an enclosing circle, has rounded edges and makes a tight S shape. The proposed logo doesn't have these, and is also quite a bit more elongated. When we introduce colour I think they will also be more distinct.

The questions I'd ask everyone to consider given the above points are: 1. do they think this is different enough? 3. is there a conflict here? I'd say yes and no respectively but obviously it's not up to me. More than happy to tweak what we have if there's consensus on doing that.

[batate]

Lots to discuss. It is Apple, and they are aggressive, so there's that.

Trademarks are shades of grey. It's probably more of an issue if you choose blue, and more still if you choose white over blue, and more still if you choose a side by side orientation instead of the logo over the surface. I would say with a different color, steering clear of white on blue, it might be worth it?

e.g.

s shazam

  s

surfaceui

versus

s shazam s surfaceui

Not a lawyer though.

-bt

On Fri, Aug 6, 2021 at 7:09 AM Darragh Enright @.***> wrote:

Interesting. Totally open to opinions on this as my perspective on this will probably be biased — I don't use Shazam so wasn't aware of their logo.

Looking at it now, I would say that there are definitely similarities but also some key differences. Their logo includes an enclosing circle, has rounded edges and makes a tight S shape. The proposed logo doesn't have these, and is also quite a bit more elongated. When we introduce colour I think they will also be more distinct.

The questions I'd ask everyone to consider given the above points are: 1. do they think this is different enough? 3. is there a conflict here? I'd say yes and no respectively but obviously it's not up to me. More than happy to tweak what we have if there's consensus on doing that.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/surface-ui/surface/issues/287#issuecomment-894186631, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABFDOIPBJWGIMXTBTC3XPLT3O7HXANCNFSM4ZCG5BMA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email .

--

Regards, Bruce Tate CEO

https://bowtie.mailbutler.io/tracking/hit/f8218219-d2a8-4de4-9fef-1cdde6e723f6/c7c97460-016e-45fb-a4ab-0a70318c7b97

Groxio, LLC. 512.799.9366 @.*** grox.io

[mfilej]

See also

[msaraiva]

@darraghenright maybe we could add more details to help to differentiate them. For instance, what if we try to have something related to the UI part of Surface UI. Like:

I'm not a designer so that probably doesn't look exactly as it should but it gives the initial idea. The goal would be to have S, u and i.

The body of the i could even go all the way following the curve, making the u more explicit.

I believe with some small changes like that we can get more than enough differences from any of those mentioned logos.

WDYT?

[batate]

good idea... I like the premise of that change.

-bt

On Mon, Aug 9, 2021 at 4:56 PM Marlus Saraiva @.***> wrote:

@darraghenright https://github.com/darraghenright maybe we add more details to help to differentiate them. For instance, what if we try to have something related to the UI part of Surface UI. Like:

https://user-images.githubusercontent.com/457237/128770751-a34e2a1d-cbec-488f-af67-8b77db143ca7.png

I'm not a designer so that probably doesn't look exactly as it should but it gives the initial idea. The goal would be to have S, u and i.

The body of the i could even go all the way following the curve, making the u more explicit.

I believe with some small changes like that we can get more than enough differences from any of those mentioned logos.

WDYT?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/surface-ui/surface/issues/287#issuecomment-895539097, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABFDOL5KDWNFZ4WRDKF2Z3T4A6GNANCNFSM4ZCG5BMA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email .

--

Regards, Bruce Tate CEO

https://bowtie.mailbutler.io/tracking/hit/f8218219-d2a8-4de4-9fef-1cdde6e723f6/c7c97460-016e-45fb-a4ab-0a70318c7b97

Groxio, LLC. 512.799.9366 @.*** grox.io

[darraghenright]

Hi folks.

Apologies about the delay — just back from a couple of weeks holiday. @msaraiva yeah, I had some thoughts along similar lines, I think even a very small change will do the trick. Smaller the better to try and maintain the simplicity, as long as it has the desired effect. I have a specific idea in that regard so I will make time to try it this week and post the result.

One one hand I do feel that there is arguably enough difference already, but it's definitely worth trying evolving the current design and see how we feel then? This gives us options.

[msaraiva]

Apologies about the delay — just back from a couple of weeks holiday

@darraghenright Nice! No need to apologize at all!

And since you're back, here's an updated version of the idea I was talking about, which can represent the S + ui.

[fceruti]

While I like the options provided by @msaraiva, I think we could do something more distinctive. Here are a couple of other tech logos with S than somewhat collide with the design:

Here is an exploration of phoenix-frontend's strongest value proposition: live. I'm by no means a designer, I'm sharing a concept more than a final design.

[stefanchrobot]

Since Surface is about components, how about this for some inspiration: Japanese Wood Joinery.

How about the "S" letter or some version of the Phoenix logo made out of perfectly fitting wood shapes of different colors or textures?

[olivermt]

Didnt Chris Mccord take up wood working? We could even comission him to make the logo for us in real materials!

[darraghenright]

Hi @msaraiva

Been a while — apologies! I had a look at implementing your suggestion and found it a little tricky, especially in a way that looked good at different sizes. I really liked the idea of incorporating the UI part, and was keen to find a way to make it work.

I had another think and figured it would be interesting to remove the negative space, instead treating the two component pieces as two-tone interlocking pieces, and finally add the "i" dot.

This is what I came up with — it's in greyscale purely for illustrative purposes, I didn't want to be prescriptive about colour. I think we could find a nice colour scheme for the shapes if the general idea works:

A bonus is that it is far less similar to the Shazam logo (although I still think the original design was different enough tbh). But more different is better :)

Thoughts welcome!