Die EUROPAEISCHE ENERGIEWENDE Com­mu­ni­ty e. V. ist ein Ver­ein, der sich dem Kli­ma­schutz in allen Lebens­be­rei­chen und der zukunfts­fä­hi­gen Gestal­tung unse­res Lebens­raums ver­schrie­ben hat. Um die­se Zie­le zu errei­chen, setzt der Ver­ein auf Bil­dung und Aufklärung.
itcv hat dazu den pas­sen­den Web-Auf­tritt gestaltet.

Der neu gegrün­de­te Ver­ein blickt auf eine inzwi­schen 10-jäh­ri­ge Geschich­te zurück: damals wur­de die gleich­na­mi­ge Face­book­grup­pe gegrün­det, die inzwi­schen über 19.000 Mit­glie­der ver­fügt. Spä­ter kam das eemag hin­zu. Hier­bei han­delt es sich um ein Online-Maga­zin mit qua­li­ta­tiv hoch­wer­ti­gen Inhal­ten zu dem oben genann­ten Themen.

Die Ver­eins­grün­dung erfolg­te, um die Tätig­kei­ten aus­zu­wei­ten und die Reich­wei­te zu erhö­hen. Vor die­sem Hin­ter­grund soll­te auch eine Ver­eins-Web­site entstehen.

Die Anforderungen an die Website

Wie jedes Web­site-Pro­jekt began­nen wir zunächst, die genaue Zie­le zu erfra­gen. Also:

Wen und was möch­te der Ver­ein kon­kret mit dem Web-Auf­tritt erreichen?

Schnell war klar, dass es im wesent­li­chen um fol­gen­de Punk­te ging:

• „Visi­ten­kar­te“ des Vereins
• Spen­den einsammeln
• Mit­glie­der werben
• Kon­takt­mög­lich­keit anbieten

Nach ein­ge­hen­der Dis­kus­si­on mit dem Kun­den haben wir dann gemein­schaft­lich beschlos­sen, auf der Start­sei­te die His­to­rie des Ver­eins unter­zu­brin­gen und den Besu­cher so zu den bei­den CTA's (Call-to-Action, Hand­lungs­auf­for­de­rung)  „Geld spen­den“, bezie­hungs­wei­se „Mit­glied wer­den“ zu führen.

Design-Aspekte der Website

Die Farbpalette

Wie bereits oben erwähnt, betreibt der Ver­ein bereits ein eta­blier­tes Online-Maga­zin zum The­ma Ener­gie­wen­de und Kli­ma­schutz. Wir haben daher vor­ge­schla­gen, die dort ver­wen­de­ten Schrif­ten und die Farb­ge­bung weit­ge­hend von die­ser Sei­te zu über­neh­men, um einer­seits die Mit­glie­der der Face­book-Grup­pe „abzu­ho­len“ (die Web­site des Ver­eins soll zunächst inner­halb der Face­book-Grup­pe bewor­ben wer­den). Der Wie­der­erken­nungs­wert beim Wech­sel zwi­schen bei­den Web­sites spricht eben­falls für die­ses Vorgehen.

Auf Basis der über­nom­me­nen Far­ben haben wir abschlie­ßend eine voll­stän­di­ge Farb­pa­let­te generiert:

Das Header-Bild

Im Ver­ein steht eine gesamt­ge­sell­schaft­li­che Betrach­tung im Mit­tel­punkt: man will sozi­al gerech­te Lösun­gen für alle Men­schen schaf­fen. Was liegt also näher, als auch auf der zu gestal­ten­den Web­site Men­schen in den Mit­tel­punkt zu stel­len? Umge­setzt haben wir dies durch ein ent­spre­chend gestal­te­tes Ban­ner, wel­ches neben dem Logo eine Anzahl Men­schen ent­hält. Ins­be­son­de­re auch Kin­der und Kin­der­wa­gen sowie Fahr­rä­der, um die Nähe zur Ver­kehrs­wen­de zu unter­strei­chen.  Selbst­ver­ständ­lich haben wir dem Kun­den zuvor eine Aus­wahl in Fra­ge kom­men­der Bil­der zur Aus­wahl vorgelegt.

Viel Dynamik – und ein Eye-Catcher!

Beschreibt man die 10-jäh­ri­ge Ent­ste­hungs­ge­schich­te eines Ver­eins, liegt es auf der Hand, dass die­ses Unter­fan­gen zunächst mal sehr text­las­tig ist. Kein Web­site-Besu­cher liest jedoch ellen­lan­ge Tex­te, also galt es, die Sache auf­zu­lo­ckern – aber wie?

Bil­der sind hier­für immer sehr hilf­reich. Zur Ver­fü­gung stan­den selbst­ver­ständ­lich der Hea­der des eemag und der Face­book-Grup­pe – bei­des nicht gera­de Bil­der, die beim Besu­cher die gro­ßen Emo­tio­nen wecken.
Wir haben daher nach einem wei­te­ren Bild gesucht, wel­ches eine Ver­bin­dung zum Ver­eins­the­ma hat, gleich­zei­tig beim Betrach­ter Emo­tio­nen weckt, im bes­ten Fall sogar in Erin­ne­rung bleibt – ein Eye-Cat­cher also!

Auch hier haben wir wie­der meh­re­re Vor­schlä­ge aus­ge­wählt, wel­che wir dem Kun­den vor­ge­legt haben. Die­ser hat sich letzt­end­lich für das Motiv „Pla­net earth and blue human eye“ ent­schie­den. Übri­gens hat die NASA die Welt­kar­te dazu beigesteuert.

Die in der Abschnitts­über­schrift erwähn­te Dyna­mik haben wir durch fol­gen­de Maß­nah­men auf der Start­sei­te umgesetzt:

• Ver­wen­dung beson­ders gro­ßer Schriften
• Ein­satz des Eye-Cat­chers als Near-Hero-Shot in Ver­bin­dung mit einem Parallax-Effekt
• Dyna­mi­sche Abschnitte: 
  • Slide-In der bei­den Titel­zei­len von links, bezie­hungs­wei­se rechts
  • Wich­ti­ge Abschnitts­über­schrif­ten als Slide-Ins von links in Highlight-Farbe
  • Fade-In aller übri­gen Text­ab­schnit­te und Bil­der beim Scrollen
• Ver­wen­dung von zwei (har­mo­ni­schen) Schrift­ar­ten für Abschnittsüberschriften

Den Fade-In-Effekt der Text­ab­schnit­te haben wir auch auf den übri­gen Sei­ten weit­ge­hend beibehalten.

Zielführende Inhalte

Auf den übri­gen Sei­ten haben wir nur die wesent­li­chen Infor­ma­tio­nen unter­ge­bracht, wel­che der Besu­cher auf­grund des Titels der ange­wähl­ten Sei­te ver­mut­lich gera­de sucht.
So ent­hält etwa die Sei­te Mit­glied wer­den Infor­ma­tio­nen zu den Vor­tei­len einer Mit­glied­schaft, der Höhe des Mit­glieds­bei­trags (und wann die­ser zu zah­len ist) und der erfor­der­li­chen Vor­ge­hens­wei­se ein­schließ­lich down­load­ba­rem Mitgliedsantrag.

Sinn­ge­mäß gilt das Cre­do „Kon­zen­tra­ti­on aufs Wesent­li­che“ auch für die Sei­te Spen­den:

• War­um soll ich spenden?
• Spen­den-Wid­get (Twing­le, via GLS Bank), alter­na­tiv Bankverbindung
• Infor­ma­tio­nen zur Spen­den­be­schei­ni­gung (inkl. Down­load eines ver­ein­fach­ten Zuwen­dungs­nach­wei­ses)

Kontaktseite

Obwohl wir selbst­ver­ständ­lich dar­auf ach­ten, alle Kon­takt­da­ten im Foo­ter einer Web­site anzu­ge­ben, emp­feh­len wir unse­ren Kun­den regel­mä­ßig die Imple­men­tie­rung einer Kon­takt­sei­te. Hier­für gibt es meh­re­re Gründe:

• Eine Kon­takt­sei­te mit Kon­takt­for­mu­lar ist ins­be­son­de­re für mobi­le Besu­cher ein­fach handelbar
• Eine Kon­takt­sei­te mit Kon­takt­for­mu­lar lässt dem Besu­cher die Wahl
  Besu­cher sinbd poten­zi­el­le Kun­den, bezie­hungs­wei­se im vor­lie­gen­den Fall poten­zi­el­le Spen­der oder neue Ver­eins­mit­glie­der. Es ist des­halb immer eine gute Idee, es Besu­chern so ein­fach wie mög­lich zu machen. Die eine schreibt lie­ber eine E‑Mail, der ande­re bevor­zugt das Kon­takt­for­mu­lar. Las­sen Sie des­halb bei­des zu!
• Web­site-Besu­cher erwar­ten dass einfach!
  Bei einem unse­rer Kun­den geht das soweit, dass die­ser mehr Anfra­gen über das Kon­takt­for­mu­lar als direk­te E‑Mails erhält
• Die Kon­takt­sei­te bie­tet die Mög­lich­keit, zusätz­li­che (kor­re­spon­die­ren­de) Infor­ma­tio­nen dar­auf unterzubringen
  Sei es eine Anfahrts­skiz­ze oder – wie im vor­lie­gen­den Fall – Links zu den Social­Me­dia-Kanä­len des Ver­eins: sol­che Infor­ma­tio­nen gehö­ren auf jeden Fall auf eine Kontaktseite!

Die Menüleiste der Website

Aus den bis hier­her beschrie­be­nen Web-Sei­ten ergibt sich auch die erfor­der­li­che Menüleiste.
Ein­zi­ge Beson­der­heit: Gewünscht war die her­vor­ge­ho­be­ne Dar­stel­lung des Links zur Spen­den-Sei­te. Die­sem haben wir durch eine farb­lich her­vor­ge­ho­be­ne Dar­stel­lung als But­ton Rech­nung getragen.

Das Ergebnis

Wir hof­fen, das unse­re Pro­jekt­be­schrei­bung Sie neu­gie­rig auf das Ergeb­nis gemacht hat. Wer­fen Sie doch ein­fach selbst einen Blick dar­auf und bil­den Sie sich selbst ein Urteil über die Qua­li­tät unse­rer Arbeit! Und viel­leicht iden­ti­fi­zie­ren Sie sich ja auch mit den Zie­len des Ver­eins und wer­den selbst Mit­glied oder Spen­den einen klei­nen Betrag?