Discussion: evolving the JAMstack branding design

[philhawksworth]

When the team at Netlify first created the branding for the jamstack.org site, its needs were rather different. In the time since then, jamstack has grown to include:

• Dozens of community meetup groups
• JAMstack Conferences
• Adoption into the parlance of many services and organisations
• References in technical writing
• A community slack

...and much more.
As the category scales, so too should the identity.

This issue exists to:

• Share the criteria and requirements for an updated logo and branding for JAMstack.
• Share some of the design iterations and thinking
• Invite feedback
• Show the current work in progress

Logo mark requirements and considerations

1. Logo artwork needs to be versatile, and hold up at a variety of sizes and applications (digital, print, embroidery, screen printing, etc)
2. Logo color considerations:
   • Logo needs to work in flat color (no gradients or halftones)
   • Logo needs to have both a two-color version with a one-color alternate.
   • Logo should also support knockout applications (white logo on dark backgrounds)
3. Logo needs to have both a jewel (think) and the wordmark (think the world "Apple").
4. Logo needs to be designed to allow for three variations when considering the jewel of the logo and the wordmark of the logo:
   • Jewel to the left, wordmark to the right (horizontal version)
   • Jewel centered above the wordmark (vertical version)
   • Jewel alone, independent of the wordmark (simple "favicon" version)
5. Jewel of the logo should allude in some manner to a stack of three components
6. Logo needs to be vector shapes only, to support SVG format for web / digital and EPS format for print applications.
7. Logo should feel modern, as JAMstack is a modern approach to building web applications
8. Logo should feel at home alongside jamstack ecosystem logos as well as logos for enterprise services like AWS.
9. Logo shape should not be confusingly similar to other logos in the general ecosystem
10. Logo colors should be fairly unique in the space. (In our ecosystem research, blues, greens, purples, and reds seemed to be the most widely used among ecosystem partners.)

[philhawksworth]

Sharing some work in progress - typography exploration for the wordmark

There has been some interesting discussions contributing to this work in progress. One thought relating to the emphasis of JAM and the discussion about how much emphasis to give to the original acronym (#279) - a word mark which is entirely lowercase is less likely to influence/confuse the issue than using either Jamstack or JAMstack. The same logic might apply to an all caps wordmark.

[philhawksworth]

Sharing some work in progress - colour exploration for the jewel

Whatever colour emerges as the primary theme/accent colour, the wordmark and jewel will need to be able to function on lights and dark backgrounds, and when used in many sites where it might appear on other coloured backgrounds. A strong silhouette is important for that.

[colbyfayock]

throwing out another idea i put together. it doesnt have a specific jewel as that one does, but in case it sparks any ideas. would need to probably be tightened up a bit

if it's liked, the jewel could be a shortened version using just the JAM, though would probably need to be adjusted to look better on its own

it also turned out pretty nice as a holo sticker imo

[philhawksworth]

So cool that you made holo stickers of that, @colbyfayock!
We might want to be a little cautious about echoes of Amp.

[philhawksworth]

Here are Some more explorations about how a logomark might work on backgrounds of different colours and textures, so that it can be used within the context of other brands and sites.

And also some experiments for how meetup groups could get autogenerated assets for their cities.

[jameesy]

This is looking so good @philhawksworth

[matbrgz]

JAMstack is definily not a good name, how about functional + api + markup?

https://community.netlify.com/t/how-about-functional-api-markup/403/3

[philhawksworth]

I'm afraid that changing this name is not in the scope of this discussion, or something that we are considering, @MatheusRV.

[philhawksworth]

We should consider how the discussion about reaching a consistent way to write "Jamstack" might factor in on this design too. #279

[gabbibrooks]

I am by no means a graphic designer but this is a mockup I made of something I thought would be a fun concept for JAMStack.

I've seen the jar of jam being used a bit for talks and meetups and I also think it makes it a little unique. It also could have the jar cut into the 3 parts of the stack with say a center bit that the jar picture that I used kind of has. I thought it went along the lines of something like how React has the atom as their logo. I also think a jar of jam fits well for a jewel of the logo.

[philhawksworth]

Thanks @brooksztb!

I've seen a number of literal "jam" visualisations. Netlify have been down that road too for various events and short run stickers. They can be fun!

I wonder how distinctive this would be when used in different colourways and as a monochromatic version for punch-outs over different colors and textures.

Regardless of how much this may or may not be suitable for professional and enterprise settings too, I'd personally be quite taken with some similar things out in the world. Even if informal nods to Jamstack if not the official logo.

[bigash42]

Sharing the next round of logo iterations based on recent feedback. Changes include:

• Updated wordmark to reflect the decision in Discussion: jamstack word treatment #279 .... You'll see the new logo version reflects a capitalized Jamstack which will help drive consistency in the naming convention.
• Fixed spacing between icon and wordmark
• Adjusted sizing of icon in ratio to wordmark
• More color explorations to show flexibility of design

We're almost there with the logo thanks for all the useful feedback so far!

[TSFoster]

Hi, I just stumbled across this while browsing the issues page, so I hope I'm not barging in among regular contributors.

I like the new branding! I wondered if you had considered making the spacing between the segments that make up the 'J' in the icon a little larger? The two lines that are formed between the gaps seem a little small compared to the rest of the forms in the icon, and I think they get a bit lost, particularly in smaller sizes.

[bigash42]

Hey @TSFoster - always welcome and thanks for chiming in. This is a really great point and mockup.

We did explore the line weight in some early rounds and I thought we ended up somewhere closer to the 7px. Working on a new round right now to fix. Thank you!

[philhawksworth]

Closing this discussion now that the new jamstack.org has launched.
Specific issues, suggestions, and discussions are of course welcome.

[iaeiou]

Nice!
What is the license of this logo?