Abschlussprojekt an der Werbeakademie ­čÜú

Abschlussprojekt an der Werbeakademie ­čÜú

Als Abschlussprojekt an der Werbeakademie habe ich ein Logo, die Website, ein Magazin und noch vieles mehr f├╝r meine Kundin standuppaddeln.at gestaltet. Das will ich euch im folgenden gerne pr├Ąsentieren.

Dokumentation (Download)

Ich habe mein Projekt ausf├╝hrlich in einer sch├Ân gestalteten Dokumentation beschrieben: Hier downloaden

Danksagung

Ich will mich bei den Trainer:innen des Kurses f├╝r die Unterst├╝tzung bedanken. Ich habe f├╝r sie diese Animation in Blender erstellt:

Mein gr├Â├čter Dank geht an Sabine, die bis dato die beste Trainerin ist, die ich je gehabt habe und an Stefan, der mich in der Endphase des Projekts sehr unterst├╝tzt hat.

Ausgangssituation

Das ist die alte Website:

alte Website

Es gab die folgenden Probleme:

  • Hauptnavigation zu umfangreich (Ziel: Reduktion auf 6-7 Punkte)
  • ├ťberschriften in Gro├čbuchstaben (schlecht lesbar)
  • Zeilen zu lang

altes Logo:

altes Logo

SWOT-Analyse

Bei der SWOT-Analyse werden die St├Ąrken (S=Strength), Schw├Ąchen (W=Weakness), Chancen (O=Opportunities), und Risiken (T=Threats) analysiert. Zu den St├Ąrken der Kundin z├Ąhlt, dass sie eine erfolgreiche Sportlerin und damit echte Expertin ist. Damit hebt sie sich von der Konkurrenz ab. Schw├Ąche ist, dass das Interesse am SUP-Sport in der k├Ąlteren Jahreszeit zur├╝ckgeht:

Google Trends

Suchbegriffe

Zu den wichtigsten Suchbegriffen z├Ąhlen:

  • Anf├Ąnger lernen
  • SUP mit Hund
  • Ausr├╝stung

Zielgruppe

Als Zielgruppe habe ich Erwachsene bis 50+ identifiziert, v.a. Frauen. Sinus-Milieus von der konsumorientierten Basis ├╝ber die b├╝rgerliche Mitte bis zu postmateriellen/Performern/digitalen Individualisten:

Sinus-Milieus

Personas

Um die verschiedenen Gruppen abzubilden habe ich 2 Personas entworfen. Die ├ähnlichkeit zu meinen Trainer:innen ist rein zuf├Ąllig ­čśë Persona 1 bildet die untere Mittelschicht ab (breiteres Billigboard vom Discounter) und Persona 2 die mittlere Mittelschicht bzw. Oberschicht (l├Ąngeres Touring- bzw. schmales Racing-Board):

Logo-Herleitung 1

Der Kundin haben alte Reiseposter gefallen bzw. wollte ich auch die Emotionen der Zielgruppe ansprechen, die durchaus auch ├Ąltere Personen beinhaltet.

Folgende Elemente habe ich integriert:

  1. Fernrohr: wie durch ein Fernrohr blickt man auf das n├Ąchste Paddel-Ziel
  2. Diorama: die Elemente der Szene ist wie bei einem Dioaram in 2,5d hintereinander angeordnet
  3. Kompass: das Board zeigt wie eine Kompassnadel zur n├Ąchsten Tour
  4. Dia: wie bei einer Diaprojektion werden die verschiedenen Landschaften durchgeschaltet
  5. Gucki: man kann wie bei einem Gucki (Plastikop) die verschiedenen Bilder durchschalten (halbkreisf├Ârmig)

Logo-Herleitung 2

Das Logo ist eine Kombination aus Board/Paddel (Kompassnadel), Landschaft
(austauschbar wie in einem Plastikop/Diaprojektor) und Sonne/Wasser:

Logo-Herleitung 2

Varianten: Emblem

Ich habe vom Logo verschiedene Varianten erstellt: Farbe (4c), 1-farbig (1c), positiv, negativ, hell und dunkel.

Logo-Varianten (alle reingezeichnet)

Das Logo ist ein Emblem (Vintage/Retro-Logo). Nach unten hin findet man Varianten mit weniger Details (f├╝r kleinere Druckgr├Â├čen bzw. das Favicon).

Varianten Teil 2

Zus├Ątzlich habe ich das Logo noch im Lok-, Star-, Schub- und Inselprinzip gesetzt:

Lok-, Star-, Schub- und Inselprinzip

Das war wichtig f├╝r die Homepage, da das Logo als Emblem oder im Starprinzip auf der Homepage zu viel Platz einnimmt.

Vorher/Nachher-Vergleich

Das Foto (links) habe ich beim Briefing mit der Kundin aufgenommen und daraus einen Mockup erstellt (rechts). Das hat ihr sehr gut gefallen!

Vorher- und nachher-Vergleich

1c und Goodies

Zus├Ątzlich Mockups f├╝r passende 1c-Anwendungen des Logos:

1c-Anwendungen und Goodies

F├╝r die Pr├Ąsentation habe ich diese Mockups auch in den Webshop der Website gegeben, d.h. man k├Ânnte sie in Zukunft auch im Rahmen eines Fanshops verkaufen.

Visitenkarte (4c)

Die Visitenkarte wurde quadratisch gesetzt im Format 55 x 55 mm.

quadratische Visitenkarte

Magazin (20-seitig)

  • Das Magazin soll zun├Ąchst einmal als E-Book ver├Âffentlicht werden
  • es ist ein Gratisgeschenk, wenn man sich f├╝r den E-Mail-Newsletter anmeldet
  • sp├Ąter kann es auch in Hochglanz im Webshop verkauft werden

Die Schrift wurde f├╝r die bessere Lesbarkeit am Bildschirm gr├Â├čer gesetzt (12 Punkte). Wird es im Format A5 gedruckt, ist die Schrift ca. 8 Punkte gro├č (und damit nicht zu gro├č).

Magazin als Download am Ende der Dokumentation: hier klicken

Infografik

Eine Herausforderung im Magazin war, den langen Text zu k├╝rzen bzw. wenn m├Âglich durch Bilder zu ersetzen. Hier ist ein Beispiel:

Info-Grafik

Social Media

Logo-Animation

Die Logo-Animation habe ich in AfterEffects gemacht. Hier sieht man hoffentlich gut, wie aufwendig sie ist:

SVG Animation

Zus├Ątzlich habe ich noch eine SVG-Animation gemacht. Hier sieht man, dass ich sehr viele Masken und Clipping-Pfade verwendet habe, damit der Hintergrund durscheint bzw. damit ├╝berhaupt der Fernrohr-Effekt entstehen kann:

Der Vorteil von SVG ist u.a., dass der Text direkt eingebettet werden kann (also nicht umgewandelt werden muss in Kurven). D.h. er kann von Suchmaschinen gelesen werden und braucht wenig Speicherplatz! Gerne selber oben ausprobieren und den Text markieren!

Video

Das Imagevideo soll in der Hero Section der Website laufen:

Ich habe es mit Premiere (Schnitt und Sounds) bzw. After Effects (Retro-Effekte) gemacht.

Website (80 Seiten)

Die Website kann gerne ├╝ber diese Link betrachtet werden: hier klicken

Ich habe sie mit dem neuen Site-Editor (WordPress ab Version 6) und mit Gutenberg gestaltet.

Funktionen der Website:

  • Full Screen Hero Section
  • Sticky Men├╝
  • Animiertes SVG Logo (Responsive)
  • Suchfunktion
  • Kontakt-Formular
  • Newsletter
  • Landkarte mit den Touren zum Anklicken
  • Webshop mit WooCommerce
  • Social Icons

Fazit & Danksagung

F├╝r mehr Details darf ich noch einmal auf meine schriftliche Projekt-Dokumentation verweisen: Hier downloaden

Gerne beantworte ich Fragen und freue mich ├╝ber Anregungen in den Kommentaren.

Abschlie├čend m├Âchte ich mich noch einmal mit einer Blender-Animation f├╝r die Unterst├╝tzung durch meine Trainer:innen vom WIFI bedanken:

3D Animation stand zwar nicht am Lehrplan. Trotzdem freut es mich, dass ich mir mit Hilfe von Linkedin Learning (ein Zugang war im Kurs inklusive) w├Ąhrend der Kurszeit auch dieses Programm beibringen konnte, um eindrucksvoll animierte Mockups zu bauen!

Ich hatte im Kurs zuerst Cinema 4D f├╝r meine Mockups verwendetÔÇŽ da aber meine 14-t├Ągige Trial-Periode abgelaufen ist, bin ich auf Blender umgestiegen, was ja gratis ist!


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht ver├Âffentlicht.