rome / tools

Unified developer tools for JavaScript, TypeScript, and the web
https://docs.rome.tools/
MIT License
23.71k stars 660 forks source link

Logo #1

Closed sebmck closed 4 years ago

sebmck commented 4 years ago

The current logo is OK but it would be nice to have something a lot simpler. It was created with an SVG I purchased which was modified with illustrator and the lines smoothed out and color with shading added.

sejr commented 4 years ago

Galea SVG source

fredericbonnet commented 4 years ago

I was about to open an issue about the logo :)

The current logo is a Greek helmet, not a Roman one. The logo proposed by @sejr is correct.

I like the middle design BTW.

kimstacy commented 4 years ago

@sebmck What are your thoughts on a laurel wreath? Is the Roman helmet a cemented desire?

Example of what I mean: spqr

Source


I also discovered a more simplistic rendition at the site linked above. See here.

svgrepo

MaggieAppleton commented 4 years ago

👋 If you need some help with this, I'm up for it.

I'm the AD/illustrator for egghead and have some experience with tech logos 👉 https://maggieappleton.com/

For branding projects I like the approach of have a well illustrated graphic for website headers and promotions (stickers, podcast covers, etc.), and then a matching simplified SVG for small-scale menu bars, favicons, etc. Gives you a good range across all future use cases.

Just to help explain the tactic, here's a simple/complex pair I did for Pure React:

image image

Happy to go do some roman cultural symbols / helmet research and come back with a round of sketches. The laurel wreath idea is a nice addition. Same question as @kimstacy - is the helmet important to keep? Completely fine if so, but just curious about exploring other options (roman coins, pots, architecture)

sgwilym commented 4 years ago

Given the namesake:

Rome gets its name from proverbs such as "All Roads Lead to Rome", "Rome wasn't built in a day" and "When in Rome, do as the Romans do". This refers to the expansive scope and the desire for conformity across the project. It started as a joke at the office.

A focus on militaristic imagery seems off-key. To me it makes sense to somehow symbolise Rome's fixation on infrastructure and their engineering feats.

Imagery like an aqueduct, maybe? It represents infrastructure well, has a pleasing internal visual rhythm, and has a great silhouette:

image

My Sketches 9 - 2020-02-27 10 46 00

Though I realise the above also looks a bit like the coliseum.

(err... please don't judge me by the sketch above -- just think it's better to think in rough sketches so early on).

iraycd commented 4 years ago

@MaggieAppleton I think it's great, but I personally prefer square than rectangular logos.

sebmck commented 4 years ago

Thanks for the logo designs and suggestions everyone! I've had a few other people privately reach out so I'll wait for any additional contributions and we can make a decision in a few weeks.

@fredericbonnet

I was about to open an issue about the logo :) The current logo is a Greek helmet, not a Roman one.

We are aware. The README explicitly mentions this:

Rome has a logo of an ancient Greek spartan helmet. It's not very relevant since it's not Roman, but it looks cooler than a Galea.

matiasngf commented 4 years ago

I found @sgwilym idea interesting..., so I tried to made something based on that:

Rome-Logo

sebmck commented 4 years ago

The helmet isn't important to keep at all. In fact I'd strongly be in favor of getting rid of it.

JGarnerDev commented 4 years ago

A focus on militaristic imagery seems off-key. To me it makes sense to somehow symbolise Rome's fixation on infrastructure and their engineering feats.

I think this is the ticket, as recent criticisms have highlighted its vulnerability to alluding to Rome's violent past and all it entails. While I disagree with that interpretation within the context of this project, it would be doubtlessly beneficial to not provide an inch of argumentative grounds within the logo as well. Rome was an Empire that was profoundly interested in art and constructs; I can think of no better symbol for this that is uniquely "Roman" than the composite order of columns.

image

Why is this a great idea? It's a functional weight-bearing element of some of Europe's most prized historical structures. People seem to think it's beautiful. Getting the right one in your logo also shows that you've done thoughtful research. It also draws inspiration from Egyptian and Greek architecture, which is to say that it reaches to other cultures to make something new and great. Not only is it without inference to violence, it is with inference to structure, beauty, tradition, and cosmopolitanism.

I'll dust off my InkScape and see what I can do in terms of a tasteful and memorable logo - in the meantime, let me know what the core principles of what your logo's message should be and I'll likewise try to incorporate them.

Update: found a flimsy logo website on my bus ride, here's what I'm gesturing at ---

logoROME

binarybaba commented 4 years ago

Can have an aerial view of the colloseum. Gives you a circular subtle base which fits on a square. Once you have these concentric circles, you can add more ideas. People always picture it from below. They usually dont visualize it from above. Can iintroduce cogs? To represent a gear too? Just food for thought for designers.

image image

jonasgrilleres commented 4 years ago

Given the namesake:

Rome gets its name from proverbs such as "All Roads Lead to Rome", "Rome wasn't built in a day" and "When in Rome, do as the Romans do". This refers to the expansive scope and the desire for conformity across the project. It started as a joke at the office.

A focus on militaristic imagery seems off-key. To me it makes sense to somehow symbolise Rome's fixation on infrastructure and their engineering feats.

Imagery like an aqueduct, maybe? It represents infrastructure well, has a pleasing internal visual rhythm, and has a great silhouette:

image

My Sketches 9 - 2020-02-27 10 46 00

Though I realise the above also looks a bit like the coliseum.

(err... please don't judge me by the sketch above -- just think it's better to think in rough sketches so early on).

I think the Colosseum represents Rome even better. Viaducts would be great for a devops/infrastructure project :)

I like the analogy between the robust architectural structure and the purpose of this new toolchain 👍

lucagentile commented 4 years ago

I was about to open an issue about the logo :)

The current logo is a Greek helmet, not a Roman one. The logo proposed by @sejr is correct.

I like the middle design BTW.

Agree. Praetorian helmets are cool, no need to use a Greek's one. As other people suggested, there are also other things from Roman civilization to use as inspiration. So why use something historically inaccurate?

https://www.google.com/search?q=roman+civilization+vector&tbm=isch&ved=2ahUKEwiV14SB7oboAhUFLOwKHWGdCrwQ2-cCegQIABAA&oq=roman+civilization+vector&gs_l=img.3...6559.8704..8758...0.0..0.105.481.5j1......0....1..gws-wiz-img.......0i19.XcA8tJAC3yQ&ei=kMliXpXPHoXYsAfhuqrgCw&bih=876&biw=1680

Or @sgwilym point of view is quite good. They were geniouses in engineering.

Given the namesake:

Rome gets its name from proverbs such as "All Roads Lead to Rome", "Rome wasn't built in a day" and "When in Rome, do as the Romans do". This refers to the expansive scope and the desire for conformity across the project. It started as a joke at the office.

A focus on militaristic imagery seems off-key. To me it makes sense to somehow symbolise Rome's fixation on infrastructure and their engineering feats.

aarjithn commented 4 years ago

The phrase "all roads lead to Rome" is a reference to the Milliarium Aureum—the point to which all roads were said to lead. This is the remains of the same. There are couple of interesting symbols here - could this be simplified and used as logo?

image

sebmck commented 4 years ago

Wanted to resurrect this issue since I'd be amazing to have a finalized logo for when we have a release to really cement the project from the beginning.

I really like the laurel wreath idea (suggested by @kimstacy) and the Milliarium Aureum symbols (suggested by @aarjithn) also look really interesting.

I think we definitely don't want something like a helmet, spear etc. I think it would be interesting to invoke more classical elements which would let us theme the website in a lot of interesting ways, eg. having illustrations on the website in a classical style.

I would expect the logo to define the color scheme and style of the website. Possibly incorporating a shade of "JavaScript Yellow", ie. unofficial JS logo and Babel.

EduardoLopes commented 4 years ago

Let's see. I'm up do this.

Before start to working on the logo idea i made this to try to capture a mood, see shapes and try a color palette. On this one i tried the "javascript yellow", as you said above.

Yellow

On this one i tried a color palette going more towards the Rome flag colors.

Rome Scapes - flag

Looking forward on the feedback on these, to see if i'm in the right track. I'll start to work on the logo and come back with some ideas.

EduardoLopes commented 4 years ago

Just to update. I'm still working on this, but not ready to post just yet.

EduardoLopes commented 4 years ago

I finally finished. It's a logo inspired by the arch in the romam architecture, the arch is all over the place in their constructions and it's pretty important. The shape of the arch is more clear when you see it in the pattern, with the logo repeated.

The yellow used is the one in the rome flag. I can try others colors if necessary!

I hope the community like it!

01 - Rome - Logo Mark 02 - Rome - Logo Type 03 - Rome - Darkbackgrond 04 - Rome - Inspirations 05 - Rome - Pattern 06 - Rome - Font 07 - Rome - ASCII 08 - Rome - Sizes 09 - Rome - Colors

lucagentile commented 4 years ago

It's cool! Really like it.

Black definitely gives a more modern look. Common colors in ancient Rome are purple (the Senate), green, white, gold, blue, and obviously red. I don't think is that kind of necessary to have everything in a logo related to Rome, there are already plenty of references on that logo and the idea doesn't convince me. Some modern vibe is appreciated. I would try only another shade of gold or blue*caerelum* (that also reminds water?).

Great.

sebmck commented 4 years ago

Wow nice! I like it. It looks awesome as a pattern. I asked a few people for their thoughts and this was some of the more critical comments:

first reaction is it looks like a college or university logo after reading the inspiration i like it a lot more Yeah I was just saying the yellow and dark gray feels very enterprisey to me, but I don't mind the white on dark gray you know what it actually reminds me of? It looks like a mandalorian helmet straight forward looks like a car brand like Tesla it looks great as a pattern without any context you don't know what it is and i assumed it was like ram horns or something It's super yonic

jamiebuilds commented 4 years ago

So personally I think we should avoid doubling down on Rome imagery, because I don't think we should be trying to invoke the literal "Rome: The City". We're trying to invoke "Rome: The Tool".

I think we should take a step back and ask what we want out of Rome's identity:

Note: Replace these with whatever you feel the most important things are

And then we should look for inspiration out of what Rome is actually doing:

"Rome: The Place" should a lower priority thing that we only integrate if we can do so in a clever way.

Otherwise it's gonna keep feeling like we're forcing "Rome: The Place" onto the something that has little to do with it.

EduardoLopes commented 4 years ago

@lucagentile Yeah, i was going for something modern. I stick to yellow because @sebmck mentioned above, but i don't think the js logo yellow fits well in this logo, so i prefere to use the yellow from the rome flag. And use blue to remind water is cool, since the arch was heavily used in the aqueducts as well.

Here's other colors: Other Colors (3 is the yellow from the JS logo)


@sebmck

This is good feedback. Now i can't unseen the car brand. But, i don't think it looks yonic (learned this word today), but i'd agree it looks a bit like a womb/uterus. When i designed it, i tried to see others shapes, this didn't came to my mind, but i see a "T" and horns as well.

I didn't want the logo to have a obvious shape of an arch like the image below, it's too simple. Split the arch in half and realize it would works great for a pattern, got me excited. Artboard 12


@jamiebuilds

Even though i agree with you, when you say we should think less about Rome: The Place and more about what the tool is actually doing, i think the arch concept fits well Rome, since it changed, for the better, how Romans build structures.

It's easier to extract shapes from architecture, that's why i was going for that (and most suggestions were related to architecture as well).

From the inspirations you said, the only one i can think of any shape is:

Converging many different tools into one

A box or square or something that holds things inside (this being Rome), and shapes inside this, representing the tools inside Rome

Hitting the reset button on the JavaScript ecosystem

I have shape ideas from this, because of the "button" word, but i think It's too abstract for a logo.

I'll think more about these

EduardoLopes commented 4 years ago

Definitely there's room to improve the logomark/symbol! No comments on the logotype/font, then we can keep that. We're half way there.

I'm here to try new ideas and see if it works. Feedback is pretty important, so i know where to go. I was in a dark room with a candle trying to find stuff, now the light is on (it's low light, though) haha


Here's some explorations i did over the arch concept! When looking for shapes, i try even the silly ideas, so, don't mind that. Rome Arch Exploration

EduardoLopes commented 4 years ago

I just made this logo compilation so it can bring some insights to mind!

js logos

fredericbonnet commented 4 years ago

Rome is a toolchain, right? So how about taking inspiration from Roman engineering tools, such as the Roman crane? Here is an example of such a crane used to build an aqueduct. I think that's an idea worth trying.

https://www.quora.com/How-did-the-Romans-lift-the-30-foot-high-pillars-on-to-the-foundation image

sebmck commented 4 years ago

@EduardoLopes

I didn't want the logo to have a obvious shape of an arch like the image below, it's too simple. Split the arch in half and realize it would works great for a pattern, got me excited.

logo

Oh awesome, I prefer this logo a lot more than the T. I've shown it to a few people and so far they've agreed. I think it could be improved by maybe thickening up the lines since there's a lot of whitespace in the middle. If the pattern is useful then we could definitely still use the T logo for it since it's close enough to this one. What do you think?

Thanks for sharing the other sketches, it's great to see the evolution. @jamiebuilds pointed out that the all caps ROME looks like a fashion brand but the current Rome text you've got looks great. The serif font definitely lends well to it, and I can't think of another project logo that uses a serif font so it's definitely unique.

ljharb commented 4 years ago

Somewhat related, please express all copyright years in Roman numerals, so the branding is cohesive.

jamiebuilds commented 4 years ago
Screen Shot 2020-05-08 at 2 33 13 PM

I would like to play around more with the weight and detail to make it feel more substantive

sebmck commented 4 years ago

I asked for some feedback on Twitter and a lot of people seem to feel that the T logo resembles a helmet (I don't see it).

rickhanlonii commented 4 years ago

If you want to make the arch feel more substantive you could add a keystone, romans were the first to start using keystones and Rome is sort of the keystone of your infra.

ljharb commented 4 years ago

@sebmck specifically, it looks like the shadow part of a helmet - i think the form is called "chiaroscuro"?

EduardoLopes commented 4 years ago

The reflected version is discarded for me. The arch is not clear that way. People sees all sorts of things, but not a arch. The pattern created by the logo is cooler than the logo, that's not right!

I had the keystone idea while finishing that one, but decided i would try if that one was rejected. I think it looks nice!

I think the diagonal lines make it looks a bit like a helmet, so i remove it!

Here's more iterations: arch explorations

orta commented 4 years ago

Just wanted to say I like this black & orange theme, and these arch shapes feel real night

sebmck commented 4 years ago

Woah sweet, they look great. I really like the second and third row. Notably the last two of row three.

EduardoLopes commented 4 years ago

Woah sweet, they look great. I really like the second and third row. Notably the last two of row three.

I like those too


Here's with sans-serif fonts Sans-serif

EduardoLopes commented 4 years ago

I'm sure about two things:

EduardoLopes commented 4 years ago

by the way extra bold

EduardoLopes commented 4 years ago

exploration

sebmck commented 4 years ago

@EduardoLopes

I love the fourth one "smooth edges Biryani Black", it's definitely my favourite so far.

logo

I'm almost tempted to commit to using it. What do you think? I've shown it to a bunch of people so far and they think it's great. The arch is obvious with the keystone while staying geometric and simple.

sebmck commented 4 years ago

@EduardoLopes This one looks good. I actually spent so long looking at it that after looking at the solid lines in the one above it looked weird.

Screenshot from 2020-05-08 21-51-11

@jamiebuilds pointed out that the two chunks next to the keystone look too small. Maybe join them and move the other break up a bit like this?

like this

(Excuse the awful edit. I don't have access to any better image editor at the moment.)

EduardoLopes commented 4 years ago

@sebmck

What do you think?

I really like it, but i think the font Biryani extra bold is better, because it keeps the width consistent.

And, yeah. it looks a lot better like this. This is the logo already remade with all the metrics consistent. 02 - Rome - Logo Type - 001 01 - Rome - Logo Mark - 001 Metrics

I'll need some feedback on kerning. It's the distance between each letter! All letters should look like have the same space between each other. It needs to be done by eye, we can't use metrics to make it look right. But i've been looking at this for too long, i don't even know anymore.

It looks good to me. When i say a logo is done, i like to spend some time not looking at, if i like it after one day, it's good!

sebmck commented 4 years ago

Nailed the arch! Looks perfect. I think the kerning there looks really wide. The previous versions look a lot closer which looks better.

sebmck commented 4 years ago

Also might be good to try it out with sharp instead of soft edges. I think I preferred the serif font a lot more too.

ooflorent commented 4 years ago

I agree with the serif font usage, i think it’s better looking. I also like the latest proposal but I’m worried that it could have too much details for low resolution: 16x16 or 32x33 would not have a crispy sharp look.

sebmck commented 4 years ago

It’s not uncommon to reduce detail as you scale a logo. I imagine if we needed it that small we would just eliminate the stroke gaps.

EduardoLopes commented 4 years ago

Kerning was actually smaller. but i made it even smaller. These are smooth and sharp edges, and smaller versions of the logomark.

Artboard 13

16px x 16px lose detail. but looks like chrome and firefox doesn't use 16px x 16px icons by default anymore.

These screenshots lose quality when exported, but here's link 1 and link 2 (i know this icon will not be used like this, but anyways)

sebmck commented 4 years ago

Nice! I think I prefer a combination of the soft and hard edges. Soft edges for the keystone but hard for the stroke. The hard edges convey accuracy, precision etc more. I think it pairs particular well with the previous serif font which I definitely prefer.

Untitled-1

It might also be worth modifying the text shape to make the edges and stroke width more even.

The logomark looks legible at smaller sizes so I don't think that will be an issue either.

EduardoLopes commented 4 years ago

I was already getting used to sans-serif. But i like the serif font at lot! At first i choose a serif font because at the front of the pantheon there's uppercase serif letters, and serifs fonts gives me ancient vibes. Maybe people will find it weird, since there's no other javascript logo with serif letters (that we know). It's not common, at least.

Here's side by side:

Side by SIce

I think is not necessary modify the text shape, since it can mess up the balance of the font (i like typography, but i'm not a expert to modify that in a good way). I tried others two fonts, i think the best is the one already shown above.

Here's sharps edges for the letters too, since there's sharp edges in the symbol

serif
EduardoLopes commented 4 years ago

Smooth edges on the edges close to the keystone

02 - Rome - Logo Type - 001

The others edges here, are just a little bit rounded.

02 - Rome - Logo Type - 001
sebmck commented 4 years ago

First one looks good to me! I'm a fan of the hard edges on the bottom but soft on and next to the keystone. If you're happy with it feel free to submit a PR with the source files to the assets folder!

Thinking about licensing, would you feel comfortable with the CreativeCommons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0) license? It doesn't allow commercial usage of the logo and requires attribution for derivatives. You can copy the license text here and put it in assets/LICENSE if it's good for you.