Design/FoundationChallenge

TDF LibreOffice Document Liberation Project Community Blogs Weblate Nextcloud Redmine Ask LibreOffice Donate

Banners for the Foundation Challenge

To support the foundation challenge, which aims to collect (in sum) 50.000 EUR donations to set up the foundation, there is a need for web banners to announce / advertise this activity. The banners will be used on both the LibreOffice web infrastructure, and the web in general.

Related pages:

Offical Funding Website: "LibreOffice 50.000 Euro Challenge" challenge.documentfoundation.org/
Idea Collection: Foundation Fundraising

Note: Discussions do take place at the LibreOffice Website Mailing List.

Required Items

Name	Importance	Rationale	Requirements	Status	Request	Resources
Website Header Banner	High			Preliminary version used	Mail by Florian 2011-02-11	Implementation: Mail by Matt 2011-02-14
Website Download Graphic	???	Inform people when downloading LibreOffice			(general requests)
Wiki Header Banner	???			Text links are used preliminary	Mail by Florian 2011-02-17
Banner for German Publisher	Very High	A German publisher offered free banner advertising	Language: German Size of 600 height, 160 width	Done	Mail by Florian 2011-02-14	Sent to Florian via private mail, source see Web Banner
Community Banners	Very High	Spread the word via the community	Proposed sizes: 728x90 px 468x60 px 300x250 px 180x150 px 125x125 px See Web banner#Standard sizes⁠	In progress.	(general requests)	See Web Banner
German Print Advertisement	High	Advertisement in magazine	Language: German English Format 1 / 2 page horizontal: 210mm wide, 148mm high Motif inner-at least 5mm, (even better) 10mm distance to the page border, on the left side (due to the minding) min. 10mm, better 15mm additional 3mm bleed (for a total of 216x154mm) CMYK color model (RGB is okay, but won't be 100% color proof) Trim: This is an extension of the design background, which is necessary because neither print nor subsequent edge cutting work exactly. It should not alter the motiv if parts are missing or visible. German Format 1/2 Seite quer: 210mm breit, 148mm hoch. Motiv rundum innen mindestens 5mm, besser 10mm von der Formatkante entfernt, auf der linken Seite (liegt im Heftbund) min. 10mm, besser 15mm. rundum zusätzlich 3mm Beschnittzugabe (also insgesamt 216x154mm). Farbmodell CMYK (RGB geht zwar auch, ist aber im Druck nicht 100% farbtreu). Beschnittzugabe: Das ist eine Erweiterung des Motivhintergrunds, die notwendig ist, weil weder Druck noch anschließender Kantenbeschnitt auf den Millimeter genau funktionieren. Es darf also das Motiv bei Wegfall und Sichtbarkeit nicht stören.	Done	Private Mail	Source File (SVG)

Requirements and Constraints

General Requirements

It should be understandable to non-community members what the funding collection is about (Christoph)
It should contain a graphical progress indicator and not only text (Florian)
It should be different to standard banner advertisement (Nik, Christoph)
If used within the LibreOffice website, the banner should stand out (David)
If the banner is not used within LibreOffice/TDF infrastructure, it should still be recognizable that we talk about LibreOffice (Christoph), see LibreOffice branding guidelines
It should be possible to easily localize/translate the banner (Several People)
It should be possible to automate the progress indicator and the day counter
If the banner is used externally (or: especially), it should contain the LibreOffice logo (Bernhard)

Hints for Good Banner Design

In one of the mails, I quickly summarized how to evaluate if a banner (or any other element used on a website) will suit the needs:

Draw attention to the element/banner --> form, color, ...
Get interest concerning its content --> text, graphics, ...
Visualize that it is "active" (clickable) even before users have to spend effort by trying --> text, button layout, ... (usability: "affordance" character)
Make sure that people want to click and understand where the journey goes to --> tell what to expect in the next step and what they will gain, directly show URL
Provide feedback if the action can be done --> usual mouseover effects
Make it easy to click the banner --> make a large area click sensitive

Development

Decisions

Topic	Question / Issue	Answer / Discussion	Decision
Core Message	What core message will be communicated?	This has been decided by "the matter of time", so we'll go for the "LibreOffice 50,000 Euro Challenge"	"Challenge"
Core Rationale	What rationale will be provided to users to attract them?	Proposal Bernhard: "Support us to establish our independent foundation! To create the optimum legal entity we need 50 Thousand Euro until March 21st!" Proposal Christoph (for end-users): "Help us to face the Foundation challenge! Donate to create an effective, efficient, transparent, and inclusive community" Proposal Nik: "Help us to become a registered foundation!" Proposal Florian (see Wiki page): "Join the 50.000 Euro challenge! Help us funding the foundation!"	See Text Development (Mail by Bernhard)
Unique Color	What branding color to use for this activity?	Proposal Bernhard: red Proposal Christoph: yellow (or blue) Proposal Nik: blue	Different to the banner on our website I'd like to see the main color green. It's a reference to our community, and most of the other websites are not as green based as ours, so it contrasts quite well, I think. Details in other colors (blue?) could be re-used in an update of our internal banner. (Mail by Bernhard)
Logo TDF Subline	The banner should contain the LibreOffice logo - I'm not quite sure if in this special case the full logo with subline "The Document Foundation" would be reasonable, even if the SC prefers external references by a logo without that line.	Christoph: I assume that the SC is fine with this use, since the reference to the funding challenge is quite clear in the banners.

Text Development

Language	Text Short	Text Middle	Text Long	Comment
English	Join the Challenge! Help Us Fund the Foundation!	The Challenge: EUR 50 000 for the Foundation Donate now for an independent LibreOffice community!	The LibreOffice Challenge: EUR 50 000 for the Foundation Donate now for an effective, efficient, transparent, and inclusive community!	Okay
Spanish	Únase al Desafío! Ayúdenos a Financiar la Fundación!	El Desafío: 50.000 euros para la Fundación Done ahora para una comunidad LibreOffice independiente!	El Desafío LibreOffice: 50.000 euros para la Fundación Haga una donación para una comunidad efectiva, eficiente, transparente e inclusiva!	...
German	Machen Sie mit: Helfen Sie uns, die Stiftung zu gründen!	Die Herausforderung: 50.000 EUR für die Stiftung Spenden Sie für eine unabhängige LibreOffice Community!	Die LibreOffice-Herausforderung: 50.000 EUR für die Stiftung Spenden Sie jetzt für eine offene, leistungsstarke und unabhängige Community!	Needs proofreading
...	...	...	...	...

Technical Information

tbd

Proposals

Author	Proposal	Source	Comments
Bernhard	Website banner 468x60.png	Mail by Bernhard 2011-02-12	The version currently in use on the LibreOffice website.
Bernhard	Website banner 625x75.png	Mail by Bernhard 2011-02-15	What I did: enlarge the banner to 625x75 px remove the countdown add a symbolic link to the donation page (in fact the entire banner should link there, but people might follow a textual link easier). add the request to support us add more details why we need this sum and until when (text is quite clunky in my eyes - so it needs some proofreading) In general I think it is too much text now - but perhaps we can use it as a common basis to improve it...
Christoph	2011-02-13 Christoph Idea Foundation Donation Banner Website.png	Mail by Christoph 2011-02-15 Source file (SVG)	Here is the summary: provide both required money and remaining days introduce the user to the "challenge" we currently use on the page explain the user "why this is important" right from the start the "graphic" in the middle serves two purposes: it divides the space it forms a triangle that mimics our document symbol triangle most important: it is a stack of 5 triangles - each row represents 10k and will get "filled" until we reach our goal simulate a clickable area (the whole banner should be hyperlinked) The "triangle stack" could be enlarged and re-used on the donation website - soit gets its own key visual for this activity. Of course, just in case the idea is worth considering.
Nik	FundraisingBanner.jpg	Mail by Nik 2011-02-17 Source file (PSD)	I think it is important to create a /pleasant/ atmosphere around the progress-meter (which the blue will do nicely, and red, for me at least, is creating uneasiness and certainly not a positive association), not a sense of panicked-urgency even /if/ that is the case. I also think it shouldn't be contained in a conventional box/banner because people have become immune to top-banner ads, there is a greater chance they will ignore it if it looks like an advertisement.
DRodriguez	LibreOffice FoundationChallenge Greyscale Banner.png	Added to the wiki	Maybe something colorless to attract attention (I am not a designer just dare to try something)
Nik	Donation preview.png	Mail by Nik 2011-02-18 Source file (SVG)	In the mean time, people mentioned images for the donations pages would be helpful. I've created 2 "cartoon" images that might be useful (or maybe not =). It's a piggy-bank and a coin-stack, they aren't great or many, but it's all I could get done in a couple of hours =( Hope you find a use for them somewhere (on donation webpages/banners). If they are useful I'll make more. If you do use them, make sure they are small otherwise the subtle flaws will be more visible. 2011-02-19 Christoph: Added a clover leaf ...
Paulo		Source file (SVG)	Skyscraper 160x600 One more. A banner at Wide skyscraper format (160x600px). This time I only had time to make the dark version. It uses the great Nik's cartoons and some elements from the first banners. As usual, all effects are in separated layers, so it can be done so simpler than is needed. Also Spanish and German texts in respective layers.
Paulo		Source file (SVG)	Also I did an initial try on the banners on the size of Medium Retangle (300x250px). I think I made it simple and not very much Branding related. Hide/show the layers to get German and Spanish versions. I hope I've formated these versions correctly.
Paulo		Source file (SVG)	Same as above but with dark theme.

Results

Web Banner

Source file: File:LibreOffice FoundationChallenge Banner.svg

Name	Size	English	German>	Spanish	Source
Leaderboard	728x90	WebBanner 728x90 English	WebBanner 728x90 German	WebBanner 468x60 Spanish WebBanner 728x90 Spanish
Skyscraper	160x600	todo	WebBanner 160x600 German	WebBanner 160x600 Spanish

LibreOffice Frontpage

Source file: File:2011-07-31 LibOWebsiteBanners Donation Conference.svg

Name	Size	English	Source
Donation	440x64	LibOWebsiteBanners Donation English.png	see above
Paris 2011 Conference	440x64	LibOWebsiteBanners Conference English.png	see above