Design/FoundationChallenge

    From The Document Foundation Wiki

    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:

    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 sizesWikipedia logo v3.svg

    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
    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

    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

    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
    WebBanner 160X600 English (Dark)
    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
    LibreOffice-The-Challenge-Banner-Paulo-v1-light.png
    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
    WebBanner 300x250 (Dark)
    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