Branding the Drupal Association and other Drupal properties

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
Aaron Stanush's picture

During a Drupal.org redesign sprint at one of the recent cons, there was a discussion at about the branding of other Drupal properties, e.g. Drupal Association, Groups, API, etc.

Specifically, we discussed if the theme for the Association site would use the standard wordmark, or if we would create property specific wordmarks so users have a better idea of where they are. I'm pretty sure this discussion was abandoned in the interest of time and just proceed with using the same header/logo as the Drupal.org theme.

Another reason for doing this would be to give a facelift to the outdated Drupal Association member badges.

Overall, I've been pretty disappointed at the slow adoption of our new wordmark. In an order to combat this, I've create a page which allows users to download the logo while providing them with the proper usage guidelines -- drupal.org/drupal-media-kit.

I've got a few ideas that I can follow up with anybody that will listen, but I just wanted to get the conversation started.

Comments

Listening :)

leisareichelt's picture

Hi, I've actually been talking with Mark Boulton about this and we've been working on a treatment of this for the Drupal Association as a starting point. The information architecture for these sites is also an issue I'd like to resolve.

Let me see if I can get a screen grab of what we've been working on (then work out how I can share that with you here!)

leisa reichelt - disambiguity.com
@leisa

Yes Yes Yes Yes

psuway's picture

I'm working with the Association to help increase membership. This is definitely on my shortlist of things I want/need. I was on a call with jredding discussing Assn sub-branding, and he pointed me here. Along with branding, re-doing the membership badges are one of a few design changes I want to make to a.d.o. We're also looking at a few custom pages to make Association.drupal.org and Association.drupal.org/membership more visually compelling. But the ultimate look and feel depends on the sub-brand guidelines.

Personally, I'm a big fan of somewhat standardized sub-branding a la google (less work, cleaner feel). I'm a little wary of how it's going to look with such a large exclusion zone on the Drupal wordmark.

I definitely want to hear (and see!) ideas. I'm excited to help get this done and implemented!

Glad to hear it

Aaron Stanush's picture

So glad to hear that there's already been some movement in these areas. The redesign has been a huge help in bringing the Drupal brand up to date, but there's still a lot work to be done in creating new marketing copy and graphics. I'd love to be a part of these discussions and even the implementation.

@leisa: I'd love to see any mockups you have, if you're looking for feedback :)

@psuway: I too felt that the exclusion zone didn't lend itself to sub-branding, even with something basic like what Google does. By the way, Google is a great example and I think doing something similar will be the easiest/most elegant solution. I think we could definitely make an exception as long and we create guidelines for ourselves and follow them.

Proposed treatment

leisareichelt's picture

ok, so, here's a screenshot of the treatment we're proposing.

a quick summary:

  • we propose NOT to try to create word marks for each of the sub-sites. Having tried a few alternatives that varied from bad to downright hideous, we think this is the best way to preserve the integrity of the Drupal wordmark. This very simple approach (site title, I call it later) is very scalable and easily implemented.
  • remove the Drupal.org navigation from subsites - the global (primary) navigation for the subsite should go into the header, secondary navigation can go in the RHS of content pages. Don't show the dashboard on subsites. If required, include log in information either in the header as part of the global navigation or in a RHS content block. (I think the header is the better of these two solutions but I don't really mind either way)
  • add a link to Drupal.org in the header (but not the wordmark - too fighty with the site title), put a nice big 'powered by' and Drupal wordmark in the footer.

leisa reichelt - disambiguity.com
@leisa

interesting

Gábor Hojtsy's picture

Good thinking. Can you clarify one thing for me though? You propose we do not use the white tab looking navigation items on subsites at all? For example, when you go to http://drupal.org/download you see translations listed among the white tabs after core, modules, themes, etc. Now, when you click that link, it gets you to the translations site which is localize.drupal.org. So that site would do away with the white tab nav, replace the top nav, replace the logo with a text sitename (I think in this case Drupal translations or Drupal localizations). Do I get the idea clear? Thanks!

Elegant; seems good. Is the

lisarex's picture

Elegant; seems good.

Is the site title text then?

==================================
http://about.me/lisarex

yup. text.

leisareichelt's picture

yup. text.

leisa reichelt - disambiguity.com
@leisa

I'm not sold

psuway's picture

@leisa I don't think that Helvetica Neue is a strong enough solution to transfer to print work. The application of any branding decisions would be brought into other applications such as business cards, letterhead, flyers, brochures and possible promotional material in the future. Also, the kerning seems off between some of the letters.

I like the idea of moving subsite Nav to the primary nav, but I wonder what that does for traffic flow. Ideally, the assn subsite acts as a stopover for people, not a destination. Does the new nav adequately encourage people to return to d.o?

Additionally, I don't love the distance between the header and where the Drupal wordmark falls. The Drupal Association needs to maintain a close relationship with the Drupal brand, but relegating the Drupal wordmark to the footer which could be below the fold on the redesigned custom Assn page

what this is and is not...

leisareichelt's picture

ok, by way of clarification (perhaps I'm respondng to the wrong question here), this is not intended to be the outcome of a re-branding activity for the Drupal Association. This is intended to fix, quickly, an immediate problem which is that the Drupal Association website is chronically broken at the moment. (see: http://association.drupal.org/home) Without completely corrupting the integrity of the Drupal wordmark.

There's been no thinking at all about the offline or any other usage of the Drupal Association identity in this proposed solution.

If that's what we're trying to do here then, you're right, this is not the solution.
However I think this is a significant improvement on what is there right at the moment, and we can move on it right now.

@lisa - not sure how Mark intended it to be implemented, will ping him and check.

leisa reichelt - disambiguity.com
@leisa

Maybe the header could be a

drumm's picture

Maybe the header could be a different shade of blue or other color to really distinguish this from Drupal.org itself?

For logins, we have single-sign-on working very well now. One of my goals is to try gathering everything into a single *.drupal.org profile. Due to technical reasons, we won't ever truly get everything on one site, especially configuration, like subscription management. But I'd like all profile info, like picture and name, to be on Drupal.org. The login should be similar in the header.

For search, we've been trying to do *.drupal.org-wide search, but it falls down a bit for sub-site. Groups has the best, and most types, of content. Association is important, but comparatively tiny. API is a little specialized, but I do want it to be indexed with everything else. Localize is just different. So- what does the search box on each sub-site do? (This is a separate issue- how best to expose all sites on Drupal.org's search? http://drupal.org/node/955928 is kinda related.)

Paul - I think you already have a list of pages you want to see on the Association site. This site is relatively simple, so we might as well lay out what it will look like in use.

I'm still looking for what to

drumm's picture

I'm still looking for what to do with profiles and search.

Here are my mockups

Aaron Stanush's picture

Mockup: Sub-branding for Association, Groups, and API

  • Includes a main version (blue "Drupal"), black knockout, and white knockout.
  • The sub-brand uses Helvetica Neue. This seems like a fairly solid option because: A) It's a typeface already used in the branding guidelines, B) It's a simple sans-serif that does not unnecessarily distract from Drupal's unique typeface. I'm a type nerd, so I have no problem suggesting another modern sans-serif to use.
  • The space between the two words is the width of the "a" in Drupal. Note: The "TM" is not used in this calculation, which deviates from the exclusion zone outlined by Mark Boulton. I made this decision because including the TM leads to the appearance of a greater margin on the right than the left.
  • The sub-brand's capital height is equal to the height of the lowercase letters in "Drupal"

Mockup: Drupal Association w/ new logo and navigation

This mockup basically expands on Leisa's, by keeping the existing theme but using a sub-branded logo and replacing the Drupal.org primary navigation menu with pages specific to the Association site.

Sanity check

Is the long term goal for the sub-sites to appear separate from Drupal.org? Was including the same main navigation as Drupal.org an intentional decision or just a quick fix? From a business perspective, I can see the value of trying to keep everything under one umbrella, but currently I think it's extremely confusing for users to know where they are when there is this navigation bar that pulls them away to D.O. with no clear way how to return to the Association site. I also understand that this is complicated by the fact that the sub-sites need to have different domains for technical reasons.

quick fix

Gábor Hojtsy's picture

I think what we have now is a quick fix. We clearly had the theme ready, and we deployed it on subsites even before of the main site. I don't think we had any pre-planning for how subsites should look. And the main Drupal.org redesign included queues to features that we have on groups.drupal.org for example integrated as part of the main design, so we went with navigation jumping around different sites as needed. That is I think OK if there is a clear navigation back and forth, but looks like there is none. Also, the sites do not share a lot of the tiny details, like input formats, which make it very confusing that they look all the same.

Sub-sites weren't part of the brief

lisarex's picture

Leisa and I spoke about this in Chicago. Sub-sites weren't part of the brief given to Mark and Leisa. So yes, the subsite should have their own primary navigation in the primary navigation area.

The possible exception is Groups, but given that it's a very separate site, with separate functionality from drupal.org, I would be in favor of using the same subsite nav treatment, for now at least.

If g.d.o. looks like you is within d.o., it might confuse people why they can't vote up/vote down on other d.o. pages.

==================================
http://about.me/lisarex

Drupal Assn is go

psuway's picture

@leisa It took me seeing a little bit more cleaned up version (and some fivesecondtest-ing) of your proposal to agree.

I think the nav bar changes are great. Taking the Drupal.org nav off allows us to fix a few things:
-Drupal Association header bug (click on association.drupal.org and then another page on the subsite)
-It gives us more space by removing the subnav

@Aaron I really really like the idea for the sub brand. The Drupal Association is ready to adopt your sub branding ideas. I'm going to create issues for Neil Drumm to work on them. I'd like for this extension of the Drupal.org redesign to be rolled out as soon as possible.

original looks good

Gábor Hojtsy's picture

I think the original looks best. IMHO. For the sub-branding, "Drupal X" works well for the association, API, groups. I think it will work good for security and possibly other sites too. Now, localize.drupal.org could be an exception there. "Drupal Localize" does not sound too good IMHO. "Drupal Translations" would be, but that is not at all in line with the domain :| What do you think about this, and possibly other domains that we have and which escape me...

List of properties

Aaron Stanush's picture

Thanks Gábor, I was about to ask for a list of all the different sub-domains. So far we have:

Are there any others?

As for the name "Drupal Localize" vs "Drupal Translations" -- it looks like [[http://localize.drupal.org/|localize.drupal.org]] is already using "Drupal Translations" as the page title and in the body copy. So I think it makes sense to make the logotype use this name.

right, all right

Gábor Hojtsy's picture

Yes, you are right :) I think those are the main ones yes. There is also qa.drupal.org for quality assurance / patch testing, and some more internal sites like infrastructure.drupal.org. I don't think these are critical to look at for this, and do think that QA would fit well with your scheme anyway.

Agreed

psuway's picture

I think the original Go to Drupal.org is a little stronger and fulfills the goals of the Association a little better. The Association subsite should be an informative but brief stopover for those wanting to help or learn about the Association. I want to keep it very easy to get back to Drupal.org, and I think that the first option is the most successful.

I don't think we should be

drumm's picture

I don't think we should be introducing more typefaces. Technically, would it make sense to style the text with CSS, or would that just be too inconsistent across browsers?

IA

psuway's picture

I totally agree, but don't the wordmarks with National Light and Univers Condensed look spectacular?

It looks like someone else agrees

psuway's picture

That the Assn needs a rebrand. John here is looking at redesigning the badge, which is the next step in this redesign plan.

http://gavuladesign.com/branding-blog/unofficial-drupal-association-logo-rethemeing

Thanks Paul, I really like

ecksley's picture

Thanks Paul,

I really like the work you guys have done. For what my input is worth:

-I prefer the Helvetica Neue Light treatment. I grant you its slight character might be an issue if reduced, but with such a robust font family I'm sure a bump in weight could be applied if (for example) it were used in a knockout print application. On that note, I think having alternate weights might be fruitful when it comes to handling the secondary hierarchy of the badges'.

-My only critique is that I might tighten the space between the wordmark and the sub-brand a bit. To my eye, when the sub-brand is already reduce in weight and size, it feels a little far off. Less like 'Drupal Association' and more like 'Drupal' 'Association'. Of course I wouldn't advocate for reducing clear space for co-branding, but with a sub-brand I feel like there can be a more intimate relationship.

I wouldn't die on my sword for this, but just offering my 2 cents.

-John

Hello to all

AlejandroBriz's picture

Guys great work!
I agree with John "Helvetica Neue Light" is very good, "National light" is good too !
I´m designer can I help in something?

-Alejandro

Love the mockups

lisarex's picture

Looking great! Aaron, with regards to the positioning of the link back to drupal.org, I think the original works best, simply because it stands out visually, as well as tells the person that they're leaving the site they are on when they click it.

==================================
http://about.me/lisarex

Deployed on

A big thanks

psuway's picture

to everyone who helped in this project. The header and logo look fantastic. Brilliant Brilliant Brilliant.

Agreed. That fits in very

davidhernandez's picture

Agreed. That fits in very well. Love the "go to drupal.org" link.

Design Wordmark

Jeff Burnz's picture

Hi Aaron, could we please add a wordmark for Design (design.drupal.org) re: http://drupal.org/node/1156318#comment-4576634

Drupal Design logo

Aaron Stanush's picture

The following ZIP file contains:
- An EPS file with all three variations of the logo
- A 24-bit transparent PNG for the logo in the header

http://dl.dropbox.com/u/2174644/Drupal-sub-branding/drupal-design-logo.zip

Thanks Aaron, looking great -

Jeff Burnz's picture

Thanks Aaron, looking great - very much appreciated!

localize.drupal.org

Gábor Hojtsy's picture

I'd love to integrate this to localize.drupal.org!

However, first I'd need a wordmark variation for that site. Aaron, can you provide me with one? I think we already discussed the wording above, it sounds good :)

We also need to figure out how to work out navigation. Now if you go to Download&Extend (http://drupal.org/download), there is a translations tab, which leads to localize.drupal.org. Now that site again shows all the other tabs, so it looks like a seamless transition (while it really is not :). We could use the top level nav very nicely for things like pointing to news, an about page, list of languages, projects, etc. But how do we connect the site to the "download and extend" experience is a good question.

Drupal Translations logo

Aaron Stanush's picture

The following ZIP file contains:
- An EPS file with all three variations of the logo
- A 24-bit transparent PNG for the logo in the header

http://dl.dropbox.com/u/2174644/Drupal-sub-branding/drupal-translations-...

Gábor Hojtsy's picture

Any feedback on how to make the navigation make sense? That would be great.

Translations sitemap

Aaron Stanush's picture

Do you have a list of all the landing pages, existing and non-existing? Here's a start:

Existing pages

Related pages on drupal.org

the original plan...

leisareichelt's picture

hey Gábor, sorry it's taken me a while to drop back in on this conversation.

so, the original intention from back when we were doing the d.o IA ages ago was that these sub-sites would be brought into the overall d.o architecture and not exist as separate subsites, but that they would retain their own domain eg localize.drupal.org etc. So, as it is now is pretty much as was intended (from my perspective) in that it doesn't have a separate 'sub-brand' but is just part of d.o.

Personally, I still think that is a good idea, esp. for newcomers (which is the perspective that most led the redesign), you're a lot more connected to this than I am so your opinion may be different!

Either way the template that is currently being used for Localize (and the other 'drop in' or 'landing' pages) is not really doing the job and should be redesigned so that it feels more like a special destination and so that it can better encompass the subnavigation that these subject areas required.

That's my POV, I'm sure it's one of many :)

leisa reichelt - disambiguity.com
@leisa

unclear

Gábor Hojtsy's picture

Sorry this is unclear to me. The first two paragraphs, you seem to support leaving it as-is right now. In the third paragraph on first read, you say we should change it. I realized on second/third read that you probably suggest changing the internal content of the pages being used. I'm fine with that too. In that case, applying the sub-branding like the association would not make sense. And since most other sites could somehow integrate with the IA/navigation, they would not need the sub-branding that Aaron developed if we go on integrating them.

Clearly separating them would probably help understand the subtle differences between sites (such as that you cannot use the same input methods on all sites or you have different permission levels), but for casual browsing, a unified look like it is right now could be better I think. Reading all the above I thought there is a general push to sub-brand all subsites, but looks like this was only a need for the association site?

Thanks for all your input,
Gábor

navigation as is, yes

leisareichelt's picture

yeah, I think you made sense of what I was trying to say in the end.

I think we should keep the navigation as is and not implement sub-brands for all of these individual sites but pull them into the drupal.org site (or at least, make it seem like they're all part of one site).

But yes, the lower part of the page, beneath the banner, I think could do with a bit of a re-jig. That's a separate discussion tho, right? :)

Sub-brand was only really intended for the association site - they did specifically want to operate as a separate site and I think that makes sense.

leisa reichelt - disambiguity.com
@leisa

g.d.o with sub-branding?

lisarex's picture

see my comments above: http://groups.drupal.org/node/145354#comment-511729

Basically, g.d.o. has completely different functionality than d.o. and everyone has different permissions there etc. and think it would be quite useful to keep it looking separate than the main d.o. site, to avoid confusing people. Related to that, we are a bit stalled on actually pushing any theme changes live because of this “Let's do the navigation” issue: http://drupal.org/node/1054426

==================================
http://about.me/lisarex

...

Jeff Burnz's picture

I'm not really understanding this idea to make everything look like its one site, because they are not one site, they are separate sites with very different features, permissions, input filters, profiles and so on. Just my personal experience but when I first used localize.d.o it was confusing - I actually didn't know it was sub-site and was momentarily stumped about where my profile had gone and wondered why there was a link the my profile on d.o (aren't I on d.o?). Also search is not totally integrated across sub-sites, I believe it can be but I'm not sure of exact reasons why it's not.

design.d.o is very different from any other Drupal.org site - users can upload images, there are user pictures like g.d.o, it uses path auto and a slew of other features not present on other sites. The profile is just a sub-set of the full d.o profile and for now search is contained to just the sub-site. It has its own taxonomies and content types that are not present on any other site (much g.d.o has wiki's, polls and jobs). It also looks different (the node and views designs are bespoke, to support the heavy use of images).

Also I am a little concerned about where and how would we integrate d.d.o into d.o - it would probably have to go somewhere in d.o/getting-involved, but from there on I don't know - we'd probably have to nuke the white tabs for all other pages, we can't stay bound under a tab - the site has many sections and is feature rich, it would be a little weird to be bound under a tab for the whole site.

I suppose I am struggling to see how we can cleanly integrate such different sites into an architecture that just isn't there to support such a thing, let alone deal with the vastly different feature sets of each site. To me its more clear to end users if they know they are on a different site. With unified branding I'm not really seeing the problem, but I do see many technical and usability issues with such an implementation.

I'm not saying I'm not open to it, but without a clear plan of how to make it work, I mean really really make it work well for end users, I have to favor the separate sub-branded sites. There would have to be overwhelming reasons for us to not do this, given the drawbacks.

I'm sorry if I am coming off as a bit negative, that is not the intention, I am just trying to see how this can work for us, without horribly confusing users, since they will be, in short time, be jumping around a number of these different sub-sites, all with different implementations (to support their unique features).

What's the strategy?

leisareichelt's picture

Totally understand that due to technical issues, subsites exist, permissions vary etc.
I'm also reporting a strategy that was put together probably 3yrs ago. Things change.

What is our long term goal here tho'? Is it to split Drupal.org into a dozen or more specialist subsites because we think that's what's best for the individuals who use them and the community as a whole? Or would we rather have Drupal.org as a home for all of these specialties and find ways to integrate them.

I'm totally down with the view that unless you do something outside of d.o it's difficult to get it to happen at all, but let's not confuse that with being the optimal solution. Unless it is.

Personally, I think the last thing we need is more fragmentation.

Lisa: I'll try to find some time shortly to help put with Groups nav

leisa reichelt - disambiguity.com
@leisa

Well, yes a new strategy is

Jeff Burnz's picture

Well, yes a new strategy is certainly needed, right now we're fluffing about without a strong lead. I can't say what the optimal solution is, only that right now we lack overall vision on where this should go, and currently that we lack the technical solutions to make a unified site work (such as a unified/global user profile).

As an aside I have been looking pretty hard at three other large open source projects and how they structure their communities. Now, I am not saying these models are necessarily right for us, we need our own strategy for what works for Drupal.

Take a look at the Mozilla community page - http://www.mozilla.org/community, this is a pretty cool browser for their entire ecosystem. You will note Mozilla has a lot of sites, for the most part all recognizable members of the family, but often very different designs and branding.

Heres an interesting set of sub-sites from Wordpress - http://make.wordpress.org, this is where they discuss development issues. wordpress.org itself does a fine job of integrating the codex, however for the most part the hard core developer/designer participation takes place in these sub-sites. Note the branding - its the new WP core theme TwentyTen, nothing like the main WP site.

Ubuntu takes a similar approach to what is happening in Drupal right now - take for example http://loco.ubuntu.com, this is one of quite a few sub-sites. They share branding, but not global navigation - there is no attempt to shoehorn each unique sub-site into one mega site.

Drupal has for the most part, at least on the surface, been a very centralized community, but decentralization has been there all along - there are many many Drupal communities that exist outside of d.o and g.d.o, for example the many language/country specific sites. If I only speak French (whether I'm French, Creole or West African) I'm probably going to hang out on http://drupalfr.org - because this community serves my needs.

We can easily agree to go for the utopian ideal of one mega-site, everything under one roof. However some of us are time bound, I can't wait 6 to 12 months for that to happen, it would have to happen very quickly (in Drupal time that would mean the next 6 months, in real time I need this done in two months), however we all know the wheels of change turn slowly.

Does this lead us to a sub-optimal solution in the short term, with an optimal strategy for the long term? If so, what is that sub-optimal solution?

From my own personal perspective, I favor the one-mega-site concept, but I think the questions is right to be asked - does this serve our community and the individual users - what is the optimal solution, and failing that, what is the most acceptable sub-optimal solution?

leisareichelt's picture

so, you know the two things that immediately strikes me about the three open source communities you've pulled out here:

  1. they all have paid design teams who are able to focus on exactly these kinds of problems and devise and lead great, focused, strategic initiatives for their communities & community resources.

  2. they all have to handle multiple, often competing 'products'

I think until we have (1), we're always going to have much less than optimal 'community' platforms.

Yes, this is a tangent. Carry on :)

leisa reichelt - disambiguity.com
@leisa

API and Groups?

drumm's picture

Aaron - Any chance I can get the same treatment for API and Groups? The main issue for API is http://drupal.org/node/1408622. Any chance you can provide the source file so we can add more? I think that might be all of them, but we do have a couple random ones like https://infrastructure.drupal.org/ and http://qa.drupal.org/ kicking around that might get some design help at some point.

I think we need to do some more work unifying user profiles and search before trying out fully-integrated headers again. For the Association site, deciding what the big search box should do was hard. With a different header, now it makes sense to have it search only the Association site.

I do like the idea of integrating the sites, if we do it well. It seems to work decently for API and Localize, or people are just used to it. But we just left the search box out of those and you really do have separate user profiles.

Sub-brands: API, Groups, Infrastructure, and QA

Aaron Stanush's picture

Here you go:

This is an EPS file that has all three versions of the sub-branding (color, black, and white) for each of the sub-brands you requested: API, Groups, Infrastructure, and QA. The type has all been converted to outlines, so you won't need the source typeface. Enjoy.

http://dl.dropbox.com/u/2174644/Drupal-sub-branding/Drupal-sub-brands.zip

Thanks for the quick

drumm's picture

Thanks for the quick response! I am only seeing API in Drupal Sub-brands - flat.eps, but maybe that's OSX's preview's problem.

Fixed

Aaron Stanush's picture

I fixed that file so that now if you download that same file above, you will get 4 separate EPS files, one for each of the sub-brands. I think if you want be able to manipulate the logos you'll need something like Illustrator/Inkscape instead of Preview. If you have exact sizes, I can export some PNGs for you.

A set matching

drumm's picture

A set matching https://association.drupal.org/sites/all/themes/bluecheese/images/sprite... (white on transparent) would be great.

PNGs

Aaron Stanush's picture

Here is a ZIP file containing transparent PNGs for API, Infrastructure, and QA.

http://dl.dropbox.com/u/2174644/Drupal-sub-branding/drupal-sub-brand-web...

Groups

tvn's picture

Can you please also provide png for Groups logo. This is the one we need the most now. Thank you!

Added to

drumm's picture

Added to http://bluecheese-groups.redesign.devdrupal.org/ and committed so it will be in the next deployment.