Branding

[chrism]

Now we have a name I’m starting to investigate some ideas for logos.

Thought I’d use this issue to share progress and explorations.

[chrism]

Exploration 1

To kick off with I’ve been looking into a clean san-serif face that will look good both for the abbreviation UWE and the full name Universal Web Editor.

Won’t bore you with all the tests but have a few possible options with some different concepts now.

One thing during that process that became clear is that I’d like to try to find a way to make the full name sit in a way that seems balanced as a potential extended logo.

So far this is one path I’m taking which I feel pretty excited by so would like some early feedback.

This is an example of the 'full' logo with both acronym & full text.

Going to explain my thinking and how I got here.

Firstly, the length of Universal is close, but a bit shorter than, Web Editor. When trying out different type variations I felt like it was a struggle to find something which didn’t seem a little awkward stacked on two lines for this reason.

But something else I noticed was that using a slight italic with some typefaces gave an incline similar to the difference in widths.

Now it’s maybe a bit of a cliche to use italics to show something is fast... but in this case I think it is pretty restrained and more a useful tool so that shapes sit together well.

Keeping that angle led to using it to define a background for the acronym, so it has some more strength and can sit on any background.

It’s clean but I think the slightly trapezoid shape gives it some originality.

You can see in the example how the logo could either sit large, taking up most of the space, or sit smaller and have the background and border extend to the width of the content.

I could sit this working nicely for maybe headers on a wide display for example.

Anyway, thats some of the thinking behind this first concept.

Just to finish I also tried to think about how it could work with some color—maybe there would not be a need for the border like the monochrome version, for example

Anyway, it is all very early stuff—maybe this is not at all what you had in mind so feel free to be completely open about your feedback!

[tmpfs]

This is great mate, I really like the direction and thanks for sharing your creative process :+1: It feels very strong; a lot of impact.

I have been mulling over Unified and Unity rather than Universal and I think now is a good time to mention it as you are investing time into the logotype. My thinking is that Universal could be construed to mean that you can edit any type of file (which certainly won't be the case initially but maybe something we could aim towards); for us Universal means that anybody should be able to use the editor.

I think that Unity is too similar to the game engine but I quite like Unified however it would affect your design and TBH I am not totally sure and would appreciate your thoughts. Also open to UniWeb Editor too but don't think that works as well with natural language marketing copy.

What do you think?

[chrism]

Huh, thought I’d replied—maybe never sent it sorry!

So yeh... tbh I didn’t really see Universal as a problem because my instinct was that it was Universal, as in, for everyone... not about specific file formats.

Personally like you say I’d avoid Unity (because of the software) and Unified doesn’t really chime with me.

FWIW I like Universal as a word too...

On the overall view of the branding that is great! I have some more ideas to take the idea further and will crack on when I have some time.

[tmpfs]

Hi @chrism,

Sorry for the slow reply to this and I know you have been working on the branding/design etc. I would love to check out and discuss what you have been working on whenever you feel is good; I have been a bit too focused on the code - apologies!

One small detail I would like to polish relatively soon is the powered by functionality. I wonder how this would work in practice so the branding is on point, maybe we load an SVG from an absolute URL on our servers?

[chrism]

Hey @tmpfs

So yeh–I'm sharing where I am at so far to see what you think.

Bottom line is I was happy with some parts of the branding, but not others. So I've been reworking it based on some of your feedback and trying to solve some of the issues I had.

Going to try to walk you through my thinking.

First thing to note: no color yet. I know you seemed happy with the previous treatments for the color but I'm not sure if it is going to be punchy enough for what I'd like. But, for now I have just focused on the shapes and alignment in black and white.

UWE logo badge :

So this I am kind of happy with already–the letter treatment enclosed in a shape to make a badge.

All I have really done is tidy up the characters slightly and fixed the skew to an exact 8 degrees–this is important because I think this element is something that could be used throughout designs to add something unique (or, at least, more original).

Universal Web Editor Badge :

This is something new, though. I was not really happy with the strapline treatment in the first iteration so have worked on this. What I wanted was a kind of negative reverse imagine of the logo as the space for the strapline.

Using slightly heavier weight for universal and certain alignment tricks has resulted in being able to use the same space with the same margins as the UWE logo. tbh I am much, much happier with this approach now.

Universal Web Editor Badge (Reversed) :

Here is the reversed treatment using a keyline instead, which will be the typical usage for the strapline to contrast with the logo.

Stacked logo :

Here is a stacked version of the logo, centred which I think gives a nice dynamic feel to the combination of the two elements.

Horizontal logo :

Here is a more typical approach of them aligned horizontally together. I think this works but is a bit passive.

Horizontal logo extended :

With the background and keyline extended it matches the original treatments and seems to work a bit better.

Horizontal logo with bg :

But this is one way of adding much more dynamism–to use the background with that 8 degree angle to knockout the strapline.

Horizontal logo with bg extended :

Alternative with the same full extended treatment.

---

Stacked logo with bg extended :

This kind of combination of two approaches also works very well I think, with a kind of stacked alignment where the two text blocks follows the 8 degree angle as well.

Horizontal logo with bg offset :

By slightly offsetting the two horizontal elements this is another way to add a bit more movement to the logo. I also think this approach could work well in certain applications.

Overall, I think I'm now at a place where the logo is defined enough–and there are enough possiblities–to start to try some color treatments.

What do you think?

Finally, as you brought up the 'powered by' treatment, I tried a few variations but this is a quick example of how that might work using this new system.

tbh I am also much happier with this approach, too and think that it demonstrates that there is enough flexibility with the elements we now have.

[tmpfs]

This is amazing @chrism, so many options I feel like a kid in a candy store :smile:

My impression is that the treatment has a lot of impact and I see you have spent some time getting the details just right. I think the logo and badges (examples 1-3) are particularly strong due to their minimalism which appeals to me a lot. The stacked logo I am not so fond of, I can't put my finger on exactly why; I prefer the subsequent horizontal logo maybe because it is more passive.

The horizontal logo extended variant I need to spend some time with.

I like all of the other treatments with a background but my preference is for the non-extended versions (Horizontal logo with bg and Horizontal logo with bg offset).

I have been thinking for the powered by graphic that maybe the language should be Made by UWE or even Made with UWE. Happy to be guided by you on this if you think the traditional Powered by approach is better. I think the variation you have done would work well at the bottom of a page, but wonder how it would work when used with a fixed position in the bottom right-hand corner of the screen. For that use case I imagine losing the angle on the right hand-side and pinning it with no margin, but if that does not work for you and we cannot find a workable solution I am also happy to lose the fixed position variant.

Looking forward to seeing what you come up with on the color treatments and keen to know how we should handle color customization for the Powered by graphics; I am guessing to KISS (and on brand!) we just allow people to set a light or a dark variation for the Powered by graphic.

Thanks for all your effort on this and really, really excellent stuff :+1: :raised_hands:

[tmpfs]

Hi @chrism, couple of quick comments.

I have made the change you suggested to the powered by functionality so it is now opt-in, people just need to call {{powered}} wherever they want to embed the badge. If you think another name like {{badge}} or {{uwe}} or something else is preferable let me know! Just need to add some info to the website to encourage people to use it...

Another place where I can see horizontal logo with bg offset being really useful is for the open graph image for when a link to the site is shared on social websites; I imagine Signal/Slack use this as well but will need to check.

[chrism]

Hey! So after all my jawboning I think its only fair that I crack on too and try to be productive on the stuff I need to do 😄 .

I've been progressing with the styleguide based on the core concepts visual.

Thought I'd share the work so far to check that its along the lines we spoke about and that you are happy with everything so far. You can also view all this stuff on Figma but I've exported the frames here for convenience.

First, the logo work–these are now components which use variants to give multiple combinations of logotype/styling.

These are composed versions combined together in the two main formats

This is the colour palette I've been working on–along with the highlight colours taking the navy blue and building a set of shades to use, and how it looks on dark/light backgrounds.

And here is the typography–using the bold titling down to the small body text, and with the code styling.

So long as you are happy with all of this I think its about ready to start using to build out pages to see how it will look now...

[tmpfs]

Well I enjoyed the jawboning - thanks, you raised many valuable points again :+1:

I think it all looks absolutely fantastic, the flames gradient is growing on me - gives it some lift!

Question, would you imagine us updating the blueprints to use our brand colors or is it better to leave them vanilla?

[chrism]

Hey @tmpfs glad you like it!

Not sure about the blueprints–its a tricky one but I feel like there probably needs to be some styling... not sure how to make it clear that its to be deleted though.

For now I was thinking more for the website and documentation are priority.

[tmpfs]

Totally agree, not a priority, lets think about it later after the website/docs!