Ein Rückblick zum ADC Kongress 2015

Vom 19.-22. Mai 2015 veranstaltete der Art Directors Club für Deutschland e.V. (ADC) sein alljährliches Treffen der Kreativen in Hamburg. Das zeroseven Designteam sammelte beim hochkarätig besetzten ADC Kongress viele Inspirationen zum Thema „Creating the Digital Hype“.

Im Reeperbahn Club Schmidt’s Tivoli referierten internationale Branchengrößen wie Kevin Alloca von YouTube, Rob Newlan von Facebook Creative Shop und Iain Tait von Wieden + Kennedy über die Herausforderungen und Trends der digitalen Welt. Was kann ich von YouTube-Stars lernen und für die Markenkommunikation produktiv einsetzen? Wie differenziere ich meine Online-Kampagne vom Wettbewerb? Und mit welchem Content generiere ich die Aufmerksamkeit meiner Zielgruppe?

Antworten gaben die Referenten vor allem anhand erfolgreicher Cases. Andy Azula hatte seine „Unskippable Ads“ für das amerikanische Versicherungsunternehmen GEICO im Gepäck. Mit einer einfachen, aber genialen Idee entwickelte sein Kreativteam eine Reihe von Pre-Roll Spots, die innerhalb von 5 Sekunden die zentrale Werbebotschaft vermitteln – also in der Zeit, in der die Videos nicht übersprungen werden können. Gleichzeitig machen die Spots neugierig darauf weiterzuschauen und gelten deshalb als aktuelles Best Practice Beispiel für YouTube-Werbung.
Zum Video

Rob Newlan stellte als besonders kreative und innovative Facebook-Kampagne die Kronkiwongi-Videos von LEGO vor. Dabei handelt es sich um kurze Clips, in denen Kinder eine Figur aus LEGO-Steinen bauen, die sie sich unter dem Fantasienamen Kronkiwongi vorstellen. Der abschließende Appell „Build your #Kronkiwongi“ fordert Facebook-User dazu auf, Bilder und Videos mit Interpretationen eigener Kronkiwongis bzw. die ihrer Kinder zu posten. Damit löste LEGO, in Zusammenarbeit mit Facebook Creative Shop, eine riesige Welle von User-generated content aus, welcher heute als eines der wirksamsten Werbemittel im Web gilt.
Zum Video

Mit Sweetie präsentierte Mark Woerde ein Projekt, welches sich weitab von den anderen, in erster Linie werblichen Themen bewegte. Mit seiner Agentur Lemz entwickelte er für Terre des Hommes Netherlands eine Kampagne gegen Kinderprostitution im Web. Durch modernste 3D-Technologie wurde ein philippinisch aussehendes, täuschend echtes Mädchen geschaffen, welches online unter dem Pseudonym Sweetie auftrat und von zahllosen Pädophilen per Webcam missbraucht wurde. Mit dieser Aktion generierte Lemz nicht nur weltweit Aufmerksamkeit für das weitgehend unbekannte Problem, sondern überführte in wenigen Wochen über 1000 Täter.
Zum Video

Ein spannender Tag mit viel Input ging für uns wie im Flug vorbei. Einige Vorträge behandelten leider Themen, die für die Branche nicht neu waren oder deren Aussage schwierig auf den Alltag von Kreativen übertragbar war. Zusammenfassend lässt sich aber sagen, dass uns vor allem die Redner, die hier kurz vorgestellt wurden, wirklich begeistert haben! Auch die dazugehörige Ausstellung im Millerntor-Stadion war ein genialer Ideengeber.

ADC-Kongress-2015_02

ADC-Kongress-2015_03

ADC-Kongress-2015_04

ADC-Kongress-2015_05

ADC-Kongress-2015_06

ADC-Kongress-2015_07

ADC-Kongress-2015_08

ADC-Kongress-2015_09

ADC-Kongress-2015_10

ADC-Kongress-2015_11

ADC-Kongress-2015_12

Dynamische Text-Farbe, abhängig vom Hintergrund mit SASS.

Ein Beispiel:

Über CSS sollen Statusmeldungen oder Buttons auf Ihrer Website in vier unterschiedliche Layouts erstellt werden. Diese erhalten jeweils eine unterschiedliche Hintergrund-Farbe:

  • Success: #CBFC90 (Grün)
  • Info: #2EB9CC (Blau)
  • Warning: #FCFA90 (Gelb)
  • Danger: #CC532E (Rot)

Nun stellt sich nur noch die Frage nach der Text-Farbe innerhalb der Box: Hell oder Dunkel? Schwarz oder Weiß?

Mit Hilfe von SASS können Sie diese Entscheidung getrost der lightness()-Funktion überlassen. Diese berechnet über den RGB-Durchschnittswert die Helligkeit in einem Wert zwischen 0 – 100. Je höher die Zahl, desto heller die Farbe.

Um einen guten Kontrast zu gewährleisten wird dank einer kleinen Funktion in SASS der Text dunkel, wenn die Hintergrund-Farbe heller ist als 50%. Bei dunkleren Farben wie zum Beispiel Blau, wird der Text weiß gefärbt.

Die Hintergrund-Farben der Statusmeldungen oder Buttons können nun jeder Zeit angepasst werden. Ihre kleine und smarte Lösung kümmert sich um den Rest:

SASS

// FUNKTION ZUR BERECHNUNG DER TEXT-FARBE
@function setColorByBackground($backgroundColor) {
    @if (lightness($backgroundColor) > 50) {
      @return #000000;
    }
    @else {
      @return #FFFFFF;
    }
}

$success-color: #CBFC90;
$info-color: #2EB9CC;
$warning-color: #FCFA90;
$danger-color: #CC532E;

.infobox-success {
	padding: 20px;
	margin: 20px;
	font-size: 1em;
	background: $success-color;
	color: setColorByBackground($success-color);
}
.infobox-info {
	@extend .infobox-success;
	background: $info-color;
	color: setColorByBackground($info-color);
}
.infobox-warning {
	@extend .infobox-success;
	background: $warning-color;
	color: setColorByBackground($warning-color);
}
.infobox-danger {
	@extend .infobox-success;
	background: $danger-color;
	color: setColorByBackground($danger-color);
}

HTML

<div class="infobox-success">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
<div class="infobox-info">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
<div class="infobox-warning">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
<div class="infobox-danger">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>

HTML kann ganz schön schräg sein.

Wie bekommt man schräge Flächen in HTML und CSS?

Beinahe alle Websites haben eines gemeinsam: Klare, rechteckige Formen.
Allerdings gibt es tolle Möglichkeiten sich mit schrägen Flächen und Kanten und Trapez- oder Skew-Effekten und Dreiecken abzuheben.

Dazu sind keine Bildgrafiken nötig, sondern man kann mit den richtigen Methoden das Ganze direkt über CSS und HTML lösen. Der Vorteil: Größen und Farben lassen sich leicht und schnell verändern, Unterstützung von Retina-Displays und geringere Ladezeiten.

HTML kann ganz schön schräg sein. weiterlesen

Wenn einer eine Reise tut …

Wenn einer eine Reise tut, dann kann er was erzählen. Diese Weisheit trifft sicherlich in vielen Fällen zu. Wenn wir Kreative reisen, nehmen wir immer möglichst viele Inspirationen mit. Kaum eine andere Stadt wie New York bietet hier so viele Möglichkeiten sich inspirieren zu lassen. Egal ob Typografie, Grafik Design oder Architektur. New York bietet in diesen Bereichen alles. Wenn einer eine Reise tut … weiterlesen

Relaunch Website der zeroseven design studios

Ein Relaunch der Website einer kreativen Agentur stellt immer eine ganz besondere Herausforderung dar. Auf der einen Seite sollte die Website am besten alle technischen Möglichkeiten ausschöpfen und darüber hinaus Grafisch möglichst eine Vorreiter-Rolle spielen. Und umgesetzt werden sollte sie am besten auch noch. Relaunch Website der zeroseven design studios weiterlesen

Responsive Webdesign (RWD) am Beispiel der Website der zeroseven design studios

Was bedeutet eigentlich Responsive Webdesign (kurz: RWD genannt) und welche Grundlagen sind für die Entscheidung, ob eine Seite Responsive Webdesign unterstützen soll oder nicht, erforderlich? Mit Responsive Webdesign ist das ansprechbare oder auch reaktionsfähige Webdesign gemeint. Responsive Webdesign (RWD) am Beispiel der Website der zeroseven design studios weiterlesen

Augmented Reality

Unter dem Begriff Augmented Reality können sich die wenigsten etwas vorstellen. Wikipedia beschreibt Augmented Reality als „Wird als erweiterte Realität der visuellen Darstellung von Informationen verstanden, also die Ergänzung von Bildern oder Videos mit computergenerierten Zusatzinformationen oder virtuellen Objekten mittels Einblendung/Überlagerung.“. Augmented Reality weiterlesen

Responsive Webdesign

Eines der wichtigsten Begriffe, die uns im Bereich Webdesign dieses und nächstes Jahr begleiten wird ist „Responsive Webdesign“. Mit dem Einzug des Smartphones und des Tablett-PCs in den Alltag der User wird die Anforderungen an zukünftiges Webdesign und Website-Entwicklung die sein, dass sich die Inhalte einer Website an die Gegebenheiten der Endgeräte automatisch anpassen. Die Seiten sollten jederzeit benutzbar sein, egal ob Smartphone oder 27″ Monitor. Responsive Webdesign sagt dabei nichts anderes aus als reaktionsfähiges Webdesign.

Durch den Einzug von HTML5, CSS3 und JavaScript ist man in der Website-Entwicklung nun in der Lage, der Website eine gewisse Intelligenz mitzugeben. Dies hat aber nichts damit zu tun, dass die Zeilenbreite an den Monitor angepasst wird, so wie es vor knapp zehn Jahren gehandhabt wurde. Moderne Grid-Systeme wie das 960° Grid ermöglichen der Website auf Basis der Monitorauflösung und der Browsergröße unterschiedliche Layouts anzuzeigen. So kann zum Beispiel eine Internetseite auf dem Smartphone in einer Spalte untereinander angeordnet sein und auf einem Tablett-PC ist dieselbe Seite mit vier Spalten aufgebaut. Dabei kann sich die Darstellung der jeweiligen Spalten zur Monitorauflösung noch unterscheiden. Die Entwicklung geht hier soweit, dass Sie beim Verändern der Browsergröße das Layout der Seite neu anordnet. Auch die Schriftgröße kann sich hierbei wiederum der Auflösung anpassen.

Die modernen Grid-Systeme ähneln in Ihrer Darstellung und Umsetzung teilweise einem Raster-System wie wir diese aus dem klassischen Print-Bereich kennen. Die Anordnung der Inhalte wird hierbei starr nach einem festen Raster vollzogen.

Eine gut und sauber geplante Website kann nun im Kern über ein CMS-System wie zum Beispiel TYPO3 gepflegt und verwaltet werden. Die Programmierung auf einem modernen Grid-System ermöglicht die flexibelste Darstellung der Seite auf vielen Endgeräten. Selbst eine Web-App könnte hier noch in einer Entwicklung abgedeckt werden.

Technologien wie jQuery unterstützen und vereinfachen durch Ihre fertigen Bibliotheken die Programmierung erheblich.

Über die neuen Möglichkeiten in der Programmierung können zukünftig mit einer Website verschiedene Auflösungen abgebildet werden. Früher wären es unterschiedlichste Templates mit unterschiedlichsten Layouts gewesen. Was dies in der Betreuung und Pflege im Vergleich zu flexiblen Layouts bedeutet, steht in keinem Verhältnis.

Beispiele Responsive Website
http://isotope.metafizzy.co/

Beispiele Grid-Systeme und Frameworks
http://www.designinfluences.com/fluid960gs/
http://960.gs/
http://www.blueprintcss.org/
http://www.yaml.de/
http://bluetrip.org/
https://developer.yahoo.com/yui/grids/
http://csswizardry.com/inuitcss/

Hilfetool
http://gridr.atomeye.com/
http://grids.heroku.com/
http://www.gridsystemgenerator.com/
http://www.1kbgrid.com/
http://developer.yahoo.com/yui/grids/builder/
http://www.designbygrid.com/tools

Firefox Grid-Xtension
http://www.puidokas.com/portfolio/gridfox/

Technologien
http://jquery.com/
http://jqueryui.com/themeroller/

Leuchtschrift Reklame Tutorial

In diesem Tutorial werde ich euch zeigen wie man nur durch Ebenenstile einen überzeugenden Leuchtschrift-Effekt erzielen kann. Solltet Ihr Fragen zu einem der gezeigten Schritte haben – zögert nicht und schreibt uns.

Dann starten wir mal mit dem Tutorial | Schwierigkeitsstufe: mittel

Hier der Link zum verwendeten Font

Adobe Digital Publishing Suite (ADPS)

Seit nicht all zu langer Zeit hat Adobe nun mit dem Update der Creative Suite auf Version 5.5 die Digital Publishing Suite in InDesign integriert. Alle User, die nicht auf eine aktuelle InDesign Version 5.5 updaten möchten, haben auch die Möglichkeit mit einer InDesign 5.0 Version in den Genuss des Digital Publishing für iPads zu kommen. Das setzt allerdings voraus, dass Sie über den Adobe Extension Manager die Adobe Folio Producer Tools installieren. Dies umfasst die InDesign-Plugins “Overley Creator”, “Folio Builder” sowie den “Content Viewer”.

Welche Funktionen stecken nun hinter diesen neuen Erweiterungen?

Nach der Installation einer aktuellen InDesign Version oder der Folio Producer Tools sind Sie nun in der Lage, innerhalb von InDesign “.folio-Dateien” zu erzeugen. Die Folio-Dateien kann man sich wie eine Art “Zip-Datei” vorstellen, die alle notwendigen Inhalte wie zum Beispiel Bilder, Videos und Sound über eine XML-Datei verwaltet. Hierbei muss besonders darauf geachtet werden, dass bei der Erstellung solcher Folio-Dateien jeweils für das Querformat am iPad als auch für das Hochformat eine eigene Datei erstellt wird. Die fertiggestellte Folio-Datei wird dann über die “Adobe Cloud” auf dem iPad publiziert. Adobe hat speziell für das digitale Publishing aus InDesign heraus einen Dienst zur Verfügung gestellt, wo jeder Producer die erstellten Folio-Dateien verbreiten kann. Hierfür ist es lediglich notwendig, dass Sie über “acrobat.com” eine Adobe-ID anlegen und die Folio-Dateien dann hier publizieren. Adobe stellt über den iTunes-Store die kostenlose App “Adobe Content Viewer” zur Verfügung. Über diese App können sie dann Ihre produzierten interaktiven Magazine abrufen und verbreiten. Je nach Programm, das Sie als Kunde oder Agentur wählen, ist es dann natürlich auch möglich, dass jeweils eine eigene App mit eigenen Icon über den iTunes-Store publiziert wird. In dieser App werden dann auch nur Ihre digitalen Magazine geladen.  Die Verbreitung von interaktiven Inhalten über den Cloud-Dienst von Adobe ist selbstverständlich kostenpflichtig. Hierbei bietet Adobe unterschiedliche Lizenzen an. Neben einer Single-Edition gibt es die Professional- und Enterprise Edition. Je nachdem in welchem Umfang Sie zukünftig Inhalte produzieren möchten, kommt jeweils eine andere Lizenz in Frage. Für Verlage zum Beispiel lohnt es sich in der Regel, die Enterprise Edition zu wählen. Alles in allem entscheidet einfach die Anzahl der digitalen Produktionen, welche Lizenz für Sie die Richtige ist.

Die Idee zukünftig aus einer Quelle mehrere Kommunikations-Kanäle zu bedienen, rückt immer näher. Adobe ist wahrlich schon ein sehr flexibles Publishing-Tool, um Inhalte digital zu publizieren oder auch automatisierte Katalogproduktion zu betreiben. Die Erweiterung der Folio Producer Tools bietet jeder Agentur und jedem Publisher neue Möglichkeiten. Geschäftsberichte oder auch Unternehmensbroschüren können nun direkt aus InDesign für das iPad produziert werden. Dieser Weg wird in Zukunft eine entscheidende Richtung sein. Das Benutzer- und Leseverhalten der User wird sich mit dem iPad nochmals verändern. Das iPad bietet jedem Menschen nun die Möglichkeit, alle seine wichtigen digitalen Inhalte just in Time dabei zu haben. Bücher, Filme, Musik oder auch Broschüren sind griffbereit auf dem iPad. So müssen Sie zukünftig nicht mehr ein 300 Seiten starkes Buch mit sich herumtragen, sondern haben auf dem iPad gleich eine Vielzahl von Büchern in der Hand. Wie genial zum Beispiel Prospekte für das iPad produziert werden können, zeigen reihenweise die Automobilhersteller wie BMW, Audi oder Porsche. Das interaktive Erlebnis von Produktbroschüren ermöglicht dem User vielfältige Betrachtungsweisen der Produkte.