Create a Drupal poster/leaflet

Here's my first take. DO NOT check the content, just give +1 or -1 on the design direction.

Some of my suggestions:

- use cutouts or blockquotes to emphasise certain facts (GPL in my example). They also live up the text-centric pages.

- list of Drupal sites: quality, not quantity. Explain certain site types and provide 1-2 examples.
People rarely type urls from paper-based materials, so just make sure you provide a quicklink on bottom of the page (drupal.org/sites or drupal.org/casestudies).

- as you can see, we can not list too many features (if we provide descriptions for them). Again, quality is essential. Just list the "unique" or "better-than-others" features.

- People like screenshots, even in print.

fixing the attachment

Here is a quick draft of some content:

------

Drupal Is:

Free:

Drupal is licensed under the GPL, making it free for anyone to use and customize.

Supported:

There is an active developer and user community that participates in mailing lists, forums (driven by drupal of course), and IRC.

There are several consultants that offer paid support and development using drupal, and several ISPs that specialize
in hosting drupal sites.

Powerful:

There are over a 100 modules in the standard release and contributed areas combined. These
include such applications as:

• Forum
• Calendar
• Blog
• Image Gallery
• Moderated story discussion
• Static pages
• Collaborative book authoring
• News aggregation

Cutting across these modules are core architectural services such as:

• search
• menus
• module configuration
• internationalization
• content categories ("taxonomy")
• authentication and access control
• themes

Flexible:

The site administrator can pick and choose between which of the many modules to enable.
She can also customize the style and layout almost without restriction, positioning
the dynamic "blocks" at will.

Standards Compliant:

• Our generated sites are XHTML compliant, and leverage CSS for styling.
• We can read and generate RSS.

Portable:

• Uses PHP, with MySQL or Postgresql.

Well-Engineered:

• We aren't afraid of you looking under the covers at the source code.
• We generate API documentation directly from our source code.
• We bring out formal releases with QA regularly enough that non-developers are not driven to rely on CVS.

My take on "Drupal diagram", started on http://buytaert.net/temporary/drupal-poster.jpg

What pieces should be "foundation" and what "flying pieces"?

From the designer:
[ dutch original ]
Ik ben heel 'brutaal' geweest zoals je kunt zien;

1. Ik ben niet met 'platte vlakken' gaan werken zoals op de site, de
huisstijl, maar meer "3D". Geen 'plastic look' maar... een meer 'business
look' proberen op te zoeken.

2. Tekstueel gezien meer business look, suits look.

(3. Auto interieur? 'Suits, suits, suits')

Hij is dus nog niet af, ik weet namelijk niet of iedereen er blij mee gaat
zijn, misschien dat ik de enigste ben, dat kan. Ik hoop het niet. Ik heb
iniedergeval een wat volwassener en zakelijk 'approach' proberen te
creeeren, wat naar mijn weten vrij goed gelukt is. Enige negatieve
danwelniet positieve opmerkingen, aanmerking of lovende kritieken zijn
welkom... ai-ai-ai.
[/ dutch original ]

My translation:
I have been quite impudent as you can see.

1. I did not use 'flat areas' like the site (drupal.org BK) does, the housstyle, but rather "3D". Not plastic look, but....searched for a more'buisiness look'.

2. Textual wise more buisiness look, suits look.

(3. Car interior (i think he means the background BK)'Suits, suits, suits')

He is not finsihed at all. Because I have no clue whether people will be happy with this, it might be I am the only one, possible. I don't hope so. I treids to create a corporate look. In any ways i tried to create a more grown-up look and 'approach'. As far as i know, i achieved this quite well. Negative or positive feedback is more than welcome. aiaiaia.

I think it would be good to also mention that Drupal produces 'accessible' output - making it possible to create accessible templates.

The Pushbutton template for example is Section 508 and WCAG Priority 1 compliant, see here for more info:

http://www.cortextcommunications.com/pushbutton/book/view/4

Under EU law sites must be accessible, but the reality is that few organisations care about this yet. It would however be important to suits looking for a CMS for a government organisation, accessibility is an absolute requirement, and Drupal is one of the few CMS that has this.

A small note to add to my latest post about the poster.

We discussed some issues on the colour setting and on the puzzle/blocks.

I copypasted some quickies. The result shows a bit where we might be going.

IHMO ALL Drupal promotional material should carry similar visual theme eg speak the same visual language. In current state the poster approach is far different from the leaflet style I am suggesting. Not that my style is better than others, just that we need some sort of agreement here.

Posters suggestion:

1) Make it clear and visible

Posters should be viewable and understandable from a distance, so only a BIG CLEAR textual message or graphic should be a visual and semantic centerpiece. See the attached simulation where Drupal poster is hanging on the wall viewed from a distance. What do you see? I see the big (water?) drop and the text "Drupal". What is it? A water-purification promotion?

2) Find the point we want to make

What is the poster's message, the point, the centerpiece? IHMO it can not be the Druplicon. Yes, this is part of the branding and carries our values, but target audience might be mislead. For them, Druplicon looks too "hackish", too "napster".

After some discussion/talk here are some ideas:

Kika: what are the names of the fonts you used? Are they OSS? Can you share a copy otherwise, or choose another one?
Killes: You wnat an EPS: should that be a photoshop eps or illustrator eps. note that a photoshop eps can be opened on most platforms, so can an illustrator. An illustrator EPS, however, cannot be edited.

Kika: The "simulation" you sent is not very representaive, IMHO. allthough i do agre with the fact that the font /might/ be small on screen and on an a4/a3 poster, it might very well be big enought for an a0. Another simulation will follow though. One that requires you to stand away 3 mtrs from your screen :)

All: if you see http://drupal.org/files/issues/Drupal_poster_proposal_01.jpg, and compare it to http://buytaert.net/temporary/drupal-poster.jpg you will see that they follow eachothers layout in a way. Specially if you consider that we discussed the use of the druplicon in the middle.
However: the poster at http://drupal.org/files/issues/Drupal_poster_proposal_01.jpg trys to follow dries' idea, but dit some more thingss:
It gives it a 3d look. It solves the problem of "flipping text". It is quite modern but still very corporate, without being boring. (but thats my opinion)

The highlights used in the leaflet should go to the poster. So for example the word Blogs should better be Personal websites.

people asked "what about the big" empty druplicon? well: combined with the druplicon (small, for example in a corner) it can be a just a visual element, one that kind of emphasises the shape of the pie/wings. When it is used in combination wit as smaller druplicon, the logo itself does not come out like *wham* look we have a cool litle puppet, and sectretly we are all in love with him, but rather as "we have it, it is our "corporate style element" but we only use it, we are not presneting it".

Furthermore: the druplicon shape you see in the middle was enhanced, so that the shape (roudings etc) have a better shape and create more (visual) tension.

Kika/others: Do you have the Drupal logo word in EPS/vector? OR wcan you otherwise tell the font of it? I am referring to the logo you used on the most right pane at the bottom, next to the druplicon.

> Kika: what are the names of the fonts you used? Are they OSS?
> Can you share a copy otherwise, or choose another one?

I used (c) fonts :(
"Minion Pro" for text, various fonts from "Dax" family for headers.

I think we can safely redesign the leaflet using free webfonts coming free with MS products an also available for download:

http://simplythebest.net/fonts/fonts/trebuchet_ms.html (for headers)
http://simplythebest.net/fonts/fonts/georgia.html (for body)

> Killes: You wnat an EPS: should that be a photoshop eps or
> illustrator eps. note that a photoshop eps can be opened
> on most platforms, so can an illustrator.
> An illustrator EPS, however, cannot be edited.

IHMO you got it wrong. photoshop eps is a bitmap with a lo-res preview image and a an optional cutout path, illustrator eps contains mostly vectors (with optional images). Does you software or platform opens and renders these, is really an application-specific feature.

The one and only standard for prepress is an PDF (essentially a packed and optimized eps).

BTW, when choosing a printer, Gerhard should ask for a "CMYK ICC profile" in order to provide a best color for final result.

> Kika/others: Do you have the Drupal logo word in EPS/vector

I used the same what comes with Drupal package, it is located in /misc dir

Reading all above, we need a marketing department to make sure all drupal related stuff looks the same and can be re-used; leaflets, posters, text on drupal, pressreleases etc should all be taken care by one role (person), just like http://www.mozilla.org/projects/marketing/. I'll file a feature request.

Everyone agrees that the poster and the leaflet should look like one another.

So i took some time and made a real quick n ugly mockup from the leaflet. I tried to merge the poster into it, slightly.

Next task would be to modify the poster so that it will look like the leaflet more!

Parts are missing on the left and right when I view it here so I can't comment on everything.

The only thing I noticed is:

"Druplicon is our hero. His malicious smile represents the developers' view on the world."
To me this sounds the same as "Drupal is a malicious product" or "Drupal developers are antisocial jerks"
Maybe 'mischievous' is a better word?

Also, maybe having the info@drupal.org address in it is not such a good idea: as far as I know, only 4 people get those mails, plus even now we often get questions there that should go on the forums or mailinglists instead ('can Drupal do this?' 'I can't get this module to work' etc).

As we are running out of time, I am creating the leaflet page-by-page basis.

I dropped coyrighted fonts and using freely downloadable ones

* Georgia: http://simplythebest.net/fonts/fonts/georgia.html
* Hit the Road (freeware clone of Interstate) http://www.dafont.com/en/theme.php?cat=501&page=4

Here's the page 1/6 of leaflet: User cases

I'll post text to ML for review, it needs work!

Some initial thoughts:

1. Joep/Ber's proposal looks nice visually, but (i) communicates almost nothing and (ii) does not present all required information. It is incomplete and therefor difficult to evaluate. My original mockup is visually less appealing, but at least it clearly communicates Drupal's architecture, modularity and functionality.
2. The suggested leaftlet information often emphasises on the wrong features (eg. the 'collaborative book' is the first entry which makes it the most important one -- not so) and even lists irrelevant information (eg. information about Druplicon). Furthermore, the list is a mixture of 'features' (eg. news aggregation) and 'properties' (eg. scalability).
3. Kika's use cases are the best material I've read so far. It communicates what Drupal can do in a solution driven manner without becoming a long-winded list of features and properties. The screenshots are too small though. 'Aficionado site' is a weird (uncommon) description -- aren't all websites centered around a topic, person or interest? I'd change 'community portal site' to 'community site' and I'd add 'news site' and maybe even 'campaign site' (grassroots organizing).

That last attachment is 0 bytes.

Cool, can you provide the icons (svg or png)?

At a first glance, the leaflet does misprepresent Drupal's architecture a bit. The reality is, no concrete functionality is contained in the core, it is simply a support layer to carry the modules. This is in contrast to some (stupid) module architectures where the modules don't really plug-in and where the core functionality could not be separated into modules itself. Many systems exist where you are stuck with a particular set of features and cannot turn the default things off.

However, if we were to give a 100% true picture, it would be a bit odd because most Drupal sites are certaintly going to use the basic set (taxonomy, user, node, ...).

So I rewrote bits of the text and tried to suggest that Drupal's modularity is more than just extra bits to tack on (see below). The end picture should be IMO:

Core = basic services + essential standard drupal modules (taxonomy, node, users, admin, ...)
Modules = non-essential standard modules (book, filters, ...) + contributed modules

I think the suggested visual relationships (arrows and such) are great. The highlights list on the left does look nice (great icons), but I think putting collaborative book at the top is a bit odd: the rest of the items are much more general. Perhaps we should split the one-liner highlights between generic drupal things (clean urls, extensible design, open source, active community) and specifics (collaborative book + others: post tracker, news aggregator, ...). That way we can keep the 'key features' focus specific and in-depth, while quickly mentioning out a couple of other things in the highlights.
See attachment for a very quick and dirty mockup.

========
Center text suggestion:

[Drupal Modules]
Drupal's main power comes from modules: these are pieces of functionality provided as a pluggable package. Modules can provide a wide range of features such as e-commerce, trackbacks, email notifications, syndication options, event calendars and more. Drupal comes with a basic selection of modules for most needs, but many more third-party modules are available. Modules are also easy to develop, so you can easily extend or customize Drupal as you wish.

Items:
Events, Collaborative development, E-commerce, Articles, Forums, Weblogs, Polls, Filtering, ...

[Drupal Core]
The Drupal core is the glue that binds everything together. While Drupal modules focus on specific features, the core contains common functions such as content and user management. Thanks to the rich features provided by the core, modules integrate seamlessly into Drupal. And with just a couple of mouse clicks, you can control your entire site.

Items:
Content management, Customizable user profiles, Taxonomy, Localization, Templating, Syndication

Here's my take on the frontpage

• I really like Steven's highlights -- though I think we should get both the order and the content right.
  1. Why is the 'collaborative book' the top-most item?
  2. Moreover, 'collaborative book' and 'news aggregator' are no values/properties but features. They don't belong in the list IMHO. Other properties would be 'scalability', 'standard compiant', 'supported', 'accessible', etc. For properties, complete the following sentence: "Drupal is ...". For features, complete: "Drupal supports ...".
  3. Can't we rename 'Active community' to 'Support', which includes both 'active community' and 'commercial support'. (For many, commercial support is important.)
• I like Kristjan's main page. It rocks.

Quick comments on kika's mainpage (exam in 30 minutes :P).

a) "Standard compliant" should be "Standards compliant"
b) The name Drupal and the druplicon are a bit lost below, especially because of the low contrast between the Druplicon and the background. Consider enlarging the druplicon and putting it above 'Drupal'.

Other than that it looks shiny. Kika: I suggest you come to #drupal on irc.freenode.net to discuss the leaflet.

back + first page

Here's the final version

Excellent job. This is something to be proud of. Thanks to everyone involved!

Next, onto the poster ... ;)

We are not done yet :)
#1 aftermath-task: integrate the booklet into drupal.org (frontpage)

mockup attached

Here are the final texts (for synconizing with texts in drupal.org)

---Use Cases---

Corporate Sites

Drupal works well for internal and external corporate sites because of its fl exible permissions system and easy webbased publishing.

obsidian.co.za

Community Sites

Drupal excels as a platform for news sites and other communities where stories are provided by the audience. Incoming stories are automatically voted upon by the readers and the best stories are promoted to the home page. Submissions with poorer quality or of lesser interest are hidden after enough negative votes.

ecademy.com

Campaign Sites

Due to its strong networking, collaborative, and community capabilities, Drupal is a powerful choice for grassroots political campaigns.

musicforamerica.com

Educational Sites

As an online course platform, Drupal facilitates a strong community-building environment and enhances studentcentered collaborative learning. A package for education distribution with extensive documentation is available.

drupaled.cyberdash.net

Personal Sites

Drupal is great for a personal web site where the owner can keep a blog, publish photos, and maintain a collection of links.

urlgreyhot.com

---Benefits---

Standards Compliant

Drupal uses standards-compliant methods such as XHTML, separation of content and layout through CSS and clean URLs to make sites accessible and to improve search engine ranking.

Stable

Drupal uses a database abstraction layer with support for several engines such as MySQL and PostgreSQL. Along with support for database table prefi xes, Drupal has been extensively tested under high loads (such as a “Slashdot effect”) and also includes built-in throttling and caching for optimal performance.

Supported

There is an active developer and user community that participates in mailing lists, forums, and IRC. Several consultants also offer paid support and development using Drupal, and several
ISPs specialize in hosting Drupal sites.

Here to stay

Drupal has been in continuous development for over three years. The same group of primary developers refi nes and improves the code and encourages more people to create additional modules, contribute patches, and write vital documentation. The growing momentum is evidenced by many new websites and projects committing to Drupal.

Open Source

Drupal is licensed under the terms of the GNU General Public Licence (GPL), giving the freedom to customize and redistribute the code.

---Key features---

Taxonomy

Drupal does much more than implement simple categories. Instead, Drupal’s fl exible taxonomy system allows creation of unlimited separate classifi cation schemes. Each of these schemes can be arranged as a simple list, as a tree, or as a tree with interconnected branches. Administrators can choose different schemes to associate with each content type, and users may then browse tagged content by its taxonomy terms.

Collaborative Book

The book feature organizes content into a nested hierarchy. It is particularly well-suited for manuals, Frequently Asked Questions (FAQs), and user-contributed documentation.
Comments may be posted to book pages, previous content revisions may be provided, and pages can be moved
amongst the hierarchy at any time.

Syndication

Drupal creates a syndicated RSS feed for others to gather with a “news aggregator,” such as NetNewsWire or FeedDemon. This allows your readers to view your latest content from the comfort of their desktop. Similarly, Drupal provides its own built-in web aggregator for reading and collecting news from other sites.

Localization

The Drupal interfaces can be translated to make your Drupal website accessible in one or more languages.

---Diagram---

Drupal Modules

Drupal’s architecture is truly modular. Apart from a few core modules, all plug-ins can be switched on and off as required for the chosen setup. Available modules include the following:

Forums
Event
Calendar
Weblogs
E-mail
notifications
Custom
Module Customizable
User Profiles

Drupal Core

The Drupal core is the glue that binds everything together. While Drupal modules focus on specifi c features, the core contains common functions such as content and user management. Thanks to the infrastructure provided by the core, modules integrate seamlessly into Drupal.

The integration with drupal.org mockup looks good, but I think calling it a "brochure" is more accurate and appropriate than "booklet."

Quick note: fi and fl ligatures in the above text seemed to have a space behind them. Beware when copy/pasting ;).

The brochure looks wonderful, great work!

#1 version on a0 poster in German

I think "zugnaglich" should be "zugänglich". Looks nice and it's a good attention grabber.

#2 version

- fixed typo
- emphasised drupal link

Following on Kika's request to post translations of the poster/leaflet here, here is the Hungarian version. I have tried to write text that will fit the boxes (though Hungarian text is always longer then English if translated properly and completely :).

I was wondering if anyone has had any problems printing the drupal leaflet.

For some reason whenever I try to print this thing it hangs ar precicely the same point. I thought it might have been a corrupt download - but it happens every time.

Thoughts?

andre