NEWS-SERVICE - JP|KOM · DIE NEUE JP | KOM WEBSITE „Die Agentur der Zukunft“ – mit Storytelling im Web den Internetauftritt zum Erlebnis machen NEWS-SERVICE Ausgabe #01 | Januar

DIE NEUE JP | KOM WEBSITE„Die Agentur der Zukunft“ – mit Storytelling im

Web den Internetauftritt zum Erlebnis machen

NEWS-SERVICEAusgabe #01 | Januar 2016

http://www.jp-kom.de/https://www.facebook.com/JP-KOM-1709241752650981/https://twitter.com/jp_komhttps://www.instagram.com/agentur_jpkom/http://de.slideshare.net/JPKOMDigitalhttps://www.xing.com/companies/jp|komgmbhhttps://www.youtube.com/user/JPIKOMDigitalhttps://www.linkedin.com/company/jp%E2%94%82kom

Die Zukunft kann man nicht fotografieren – man muss sie sich vorstellen. Wir als JP | KOM haben den Anspruch, die Zukunft der Kommunikation mit zugestalten. Da sind Phantasie und Ideen gefragt. Der Anspruch. Veränderungskommunikation, Kommunikationsmanagement und -controlling („Wertschöpfung durch Kommunikation“), digitale Unternehmenskommunikation, Organisationsentwicklung der Kommunikation, Portfoliomanagement der Kommunikation s-aktivitäten: JP | KOM gehörte in den vergangenen 15 Jahren zu den Trendsettern in Strategie und Implementierung der Un ter-nehmenskommuni kation. Davon zeugen auch die Bücher und zahllosen weiteren Veröffent-lichungen.

Die Marke. „Die besten Stories in modernen, attraktiven Medien – entwickelt und realisiert mit Management-Tools“. Das bisherige Leistungs versprechen von JP | KOM reicht

angesichts der digitalen Transformation nicht mehr aus. Das Markensymbol „Das rote Sofa“ und die Meereswellen in den Abbildungen standen für Dialog, die Heritage und die Vitalität der Veränderung – zweifellos wichtige Werte, doch wie attraktiv sind sie noch für Kunden und Mitarbeiter von heute? JP | KOM tritt nun mit dem Anspruch auf, „Die Agentur der Zukunft“ zu sein – entsprechend verbindet sich künftig das Veränderungsmotiv mit digitalen Signalen und einem loftigen post modernen Ambiente/Lifestyle.

Das Portfolio. In 22 Jahren JP | KOM wurde das Leistungsangebot ständig erweitert – und unübersichtlich. Das neue Portfolio lässt wieder erkennen, worum es unseren Kunden mehr denn je geht: „Strategie – Content – Medien“. Die Website führt vor, wie digitale Kommuni-kation in den Geschäftsprozess eingelassen ist – so sehen künftige Geschäftsmodelle von Agenturen aus: Nur über die Aktivitäten zu

sprechen, reicht nicht mehr aus, wenn Kom-munikation zur zen tralen Komponente der Wertschöpfung wird.

Die Methoden. Wettbewerb um Aufmerk-samkeit und Reaktanz vs. Belehrungen. Im Web muss es schnell gehen, und es muss unterhaltsam sein. Deshalb erzählen wir jetzt absichtsvoll Geschichten. Und wir öffnen uns in vier Blogs tagtäglich der Diskussion. Das Wichtigste jedoch – noch mehr als bisher – sind die Bilder, die Inszenierung der Leistung. So könnte die Agentur der Zukunft aussehen. Das könnte sie machen. Und diese Mitarbeiter arbeiten schon jetzt dort. Wir laden Sie ein, bei uns auf Entdeckungsreise zu gehen.

Die Agentur der Zukunft

„Digitale Transformation“: Die Zukunft der Kommunikation wird tiefer in Unter nehmen hineinwirken.

Jörg Pfannenberg

Geschäftsführer

JP | KOM News-Service # 01 | Januar 2016

mailto:[email protected]://www.xing.com/profile/Joerg_Pfannenberg$$$/Dialog/Behaviors/GoToView/DefaultURL

Inhaltsverzeichnis

Kontakt Drucken Nützliche Links Zurück zur ÜbersichtVideo


Ansicht vergrößern

3

Es heißt, die Düsseldorfer Schwanenhöfe waren die erste Waschmittelfabrik Europas. 1897 be gann hier die Produktion von „Dr. Thompson’s Seifenpulver Marke Schwan“, einem der ersten Markenartikel in Deutschland. Rund 30 Jahre später wurde das Werk von Henkel übernommen, die Marke „Schwan“ lebte lange weiter. 2005 endete die Produk tion und das Gelände verfiel in einen Dorn röschenschlaf. Wachge-küsst wurde es im Jahr 2010 von einem wagemutigen Architekten büro. Heute sind die Schwanenhöfe in Flingern-Süd ein Campus mit Ateliers und Werkstätten, Restaurants, Agenturen und Heimat einer der führenden Business Schools Deutschlands. […]

So beginnt die Reise auf der neuen Website von JP | KOM. Mit Geschichten und Anekdoten führt die Webpräsenz seit Mitte Januar durch die „Agentur der Zukunft“, zeigt wer wir sind, wofür wir stehen und wie wir arbeiten.

Im Kern: schlank und flexibel Von der ersten Idee bis zum Relaunch vergin-gen nur sechs Monate – dank schlankem Projektsetups. Das Ergebnis kann sich sehen lassen: modernes Webdesign, das statt auf eine komplexe Seitenstruktur und Navigation auf lediglich vier Scroll-Seiten setzt. Die Longpager präsentieren den Kern von JP | KOM: Agentur, Leistungen, Wissen, und Karriere.

DIE NEUE WEBSITE VON JP | KOM

JP | KOM begleitet seine Kunden bei der digitalen Transformation der Unternehmenskommunikation. Nun legt sich die Agentur endlich selbst den passenden Look zu. Das Konzept der neuen Website: Scrollytelling.

Storytelling im Web

JP | KOM News-Service # 01 | Januar 2016 4

http://www.jp-kom.de/http://www.jp-kom.de/http://www.jp-kom.de/agenturhttp://www.jp-kom.de/leistungenhttp://www.jp-kom.de/wissenhttp://www.jp-kom.de/karriere


http://www.jp-kom.de/leistungen#fach-bloghttp://www.jp-kom.de/agentur#mitarbeiterhttp://www.jp-kom.de/agenturhttp://www.jp-kom.de/leistungenhttp://www.jp-kom.de/wissenhttp://www.jp-kom.de/karriere

Alle vier Rubriken enthalten regelmäßig aktualisierte Beiträge

im CEO-Blog im Bereich Agentur, im Fach-Blog,

im News-Blog im Bereich Wissen

und im Junioren-Blog.

Klare Führung statt bunter AuswahlDer User wird linear durch die Seiten geführt. Die vereinfachte Navigation mit dem Scroll-Rad ermöglicht ihm, jederzeit zu verweilen oder tiefer einzusteigen.

Die „Tour“ öffnet Raum für Erzählstrukturen. Das „Scrollytelling“ lädt die Informationen emotional auf, macht Fakten durch erzählten Content und Beispiele relevant. An die Stelle typischer Teaser-Texte tritt ein multimedialer Erzählstrang, der Storys mit Bildern, Illustratio-nen und weiterführenden Links verwebt.

Blaupause für die digitale Erlebniswelt Das modernisierte, visuelle Erscheinungsbild macht vor keinem der bekannten JP | KOM Eigenmedien halt. Mit der Website als Blaupause hat auch dieser News-Service eine Auffrischung erfahren. Die Bildwelt, die Social Media Kanäle, letztlich sogar die E-Mail-Signaturen von JP | KOM werden folgen.

Passend zu jedem Endgerät

Als JP | KOM vor fünf Jahren den letzten Relaunch seiner Website hatte, ahnten viele schon, dass es die letzte Desktop-orientierte Seite sein würde. Morgan Stanley hatte 2010 prognostiziert, dass es ab 2014 mehr mobile als stationäre Internet-Nutzer geben wird. Im Mai des vergangenen Jahres kam erstmals die Mehrheit der Google-Suchanfragen von Tablets und Smartphones.

Inzwischen ist die Diskussion „Desktop vs. Mobile“ längst keine mehr. Von 3,5 bis über 18 Zoll muss alles mitgedacht und bedient werden. Für die neue responsive Website von JP | KOM stellt das kein Problem dar: Sie passt auf nahezu jedes Endgerät – außer auf Papier.

Zur Erinnerung: So sah sie aus – die letzte Desktop-orientierte Startseite von JP | KOM.

http://www.jp-kom.de/agentur#ceo-bloghttps://gigaom.com/2010/04/12/mary-meeker-mobile-internet-will-soon-overtake-fixed-internet/https://gigaom.com/2010/04/12/mary-meeker-mobile-internet-will-soon-overtake-fixed-internet/http://adwords.blogspot.de/2015/05/building-for-next-moment.htmlhttp://adwords.blogspot.de/2015/05/building-for-next-moment.htmlhttp://www.jp-kom.de/leistungen#fach-bloghttp://www.jp-kom.de/wissen#news-bloghttp://www.jp-kom.de/karriere#junioren-blog

JP | KOM: Die Agentur der ZukunftVon Attila Söder und Jörg Pfannenberg

NEUPOSITIONIERUNG DER AGENTUR

JP | KOM positioniert sich neu im Markt. Das Portfolio konzentriert sich auf die drei Felder Strategie, Content und Medien.


Zuletzt wurden die Diskrepanzen in den Präsentationen immer größer: Zwischen medialem Feuerwerk tauchten ruhige Ozean-bilder auf. Das bekannte, gehobene, gesetzte Erscheinungsbild von JP | KOM passte nicht mehr so recht zu den emotionsorientier-ten Leistungen, die die Agentur verkauft.

Zwischen mittelständischen und großen Netzwerk-Agenturen, Change-Beratung und digitaler Avantgarde war das Profil von JP | KOM zunehmend unscharf geworden. Die Analyse der relevanten Segmente im Agenturmarkt zeigte gleich eine deutliche Bedarfslücke: die Kombination von strategischer Beratung, digitalen Medien und innovativem Content. Was muss die „Agentur der Zukunft“ bieten? Wie kann JP | KOM diese Lücke füllen?

Neues Portfolio trifft den Markt Digitale Leistungen sind längst in allen Bera-tungsfeldern integriert. Bei der Entwicklung des neuen Portfolios stand deshalb fest: Die Digital-Angebote mit einer eigenen Marke auszuweisen, ist künftig nicht mehr notwendig. Im Markenauftritt konzentriert sich die Agentur künftig auf die Hauptmarke JP | KOM. Die neue Portfolio-Struktur soll dabei stärker an den Bedarfen heu tiger Unternehmen ausgerichtet sein.

Strategie. JP | KOM begleitet seine Kunden durch alle Aufgaben der Kommunikation, beginnend beim Aufbau der Unternehmens-kommunikation über Veränderungssituatio-

nen und komplexe Themenfelder bis hin zur digitalen Transformation. Content. Storytelling ist der Königsweg, um Botschaften zu vermitteln. Texter und Grafik-Designer arbeiten bei JP | KOM Hand in Hand, um komplexe Inhalte in bewegende Geschichten, ausdrucksstarke Formate und digitale Kampagnen zu verwandeln.

Medien. Unternehmen sind heute immer auch Medienproduzenten. JP | KOM entwi-ckelt hochwertige Medien für alle Kanäle –

von Webseiten und Apps bis zu klassischen Printpublikationen.

Urban, digital, kreativ Im Rahmen der Neu-Positionierung soll die Agentur potenziellen Kunden und Mitarbei-tern stärker als bisher ihren urbanen, digita-len und kreativen Footprint vermitteln. Die neue Website nimmt den User auf einen Spaziergang durch die Niederlassungen mit, sie integriert zahlreiche Storys von und über die Agentur und illustriert sie mit Augmented-Reality-Motiven.

Zwischen seriöser Strategie-Beratung und digitaler Avantgarde schlägt das neue Branding von JP | KOM einen gesunden Mittelweg ein. Das entspricht dem Stand vieler Kunden von JP | KOM, die ihre traditio-nellen Geschäftsfelder im Zuge der Digitalisierung verändern, wie zum Beispiel Industrie 4.0, Autonomes Fahren und Smart Home. So ebnet die Website den Weg für neue Leistungen, die JP | KOM seinen Kunden künftig anbieten wird.

Management-Tools, die funktionieren. Hier die Botschaften-Pyramide des neuen JP | KOM Brandings.


Wie Scrollytelling mit alten Regeln der Website-Nutzung bricht

GESCHICHTEN AUS DER FINGERSPITZE

Wenn Multimedia, Storytelling und Touchdisplays zusammenkommen, entsteht für Online-Nutzer ein Erlebnis, das in Erinnerung bleibt. Genau das hat JP | KOM mit seiner neuen Website umgesetzt. Wer ein gutes Buch liest, kennt das: Man kann es einfach nicht aus der Hand legen und muss die Geschichte möglichst in einem Rutsch durchlesen. Scrollytelling bedient genau diesen Effekt. Galt in Zeiten des stationären Webs noch, möglichst alle Inhalte einer Webseite in kleinen Häppchen direkt im Bildschirm sichtbar zu machen, so kehrt sich dieser Leitsatz mit dem Siegeszug mobiler Geräte inzwischen um. Mit der Fingerspitze auf den Displays entdecken die

Nutzer die weite Welt dahinter. Das Ergebnis sind lange, multimedial aufbereitete Seiten zum Scrollen.

Damit solche Websites zu einem einprägsa-men Nutzererlebnis werden, sollten konzepti-onelle und gestalterische Grundregeln beachtet werden:

Übersicht. Auf den langen Seiten kann der Nutzer leicht den Überblick verlieren. Die immer verfügbare Navigation und eine Positionsanzeige geben Orientierung. Pfeile helfen, die Scrollrichtung deutlich zu machen.

Verfügbarkeit. Multimediale Seiten können schnell datenintensiv werden. Durch asyn-chrones Laden tauchen die ersten Elemente

im Blickfeld auf, während spätere Inhalte sich noch aufbauen. Ladehinweise halten den Nutzer im Zweifel noch ein paar Sekunden bei der Stange.

Responsivität. Das Design muss anpassungs-fähig wie ein Chamäleon sein, sich in verschie-denen Bildschirmformaten und auf diversen

Betriebssystemen korrekt anzeigen lassen. Reduktion. Das Screendesign beschränkt sich auf wesentlichen Content ohne Schmuck-elemente. Statt klassischem Layout mit Header und Footer werden Inhalte bildschirmfüllend dargestellt. Auch interaktive Elemente sollten mit Bedacht ausgewählt werden, um den Nutzer und die User Experience nicht überzu-strapazieren.

Erzählstruktur. Vor der Gestaltung muss die inhaltliche Grundidee bestimmt sein. Die Story der Website braucht Haupt- und möglicher-weise auch Nebenstränge. Außerdem muss die Erzählperspektive festgelegt werden. Dank Verlinkung ist eine lineare Erzählung nicht obligatorisch, trotz Scroll-Effekt.

Von Sarah Weber

„ Vor der Gestaltung muss

die inhaltliche Grundidee

bestimmt sein

“


Tools für Scrollyteller (keine Programmierkenntnisse benötigt)

http://pageflow.io/ http://aesopstoryengine.com/ https://storify.com/

http://shorthand.com/

Einfache Bedienung durch WYSIWYG-Editor Plug-in für Wordpress mit 13 Story-Komponenten

Besonders geeignet zur Kuratierung von Social

Media-Inhalten, lässt sich in Webseiten einbetten

Die einzelnen Komponenten einer Geschichte

werden gleich auf Twitter gepostet

9-99€/Monat kostenlos kostenlos Ab 6 US$/Monat

Korrespondenz. Die technischen Effekte sollten im Einklang mit der Story stehen, sie stützen und nicht überlagern. Will man etwa einen linearen Ablauf darstellen, so eignet sich eine interaktive Zeitleiste mit multimedi-alen Fragmenten oder eine sogenannte Scroll-Activated-Animation – eine durch Scrollen aktivierte Animation.

Diese Leitprinzipien beeinflussten die Gestaltung der neuen Website von JP | KOM. Statt der ehemals über 100 Einzelseiten gibt es ab jetzt nur noch vier.

Multimedial führt die Seite die Besucher an den wichtigen Passagen ihres Interesses vorbei. Auf der Agenturseite begegnen ihnen Anekdoten zu Themen beim Mittagstisch, animierte Infografiken zu unseren Werten oder Bildergalerien der Mitarbeiter.


Vom Storytelling zum Scrollytelling

Storys haben eine Ereignisebene und eine Bedeutungsebene. Letztere wird implizit durch die

Ereignisebene erzeugt, welche, ausgeschmückt mit Details, für Anschaulichkeit und Glaub-

würdigkeit sorgt – und dem Leser deshalb so viel Spaß macht.

Viele kleine Storys sind auf der neuen JP | KOM Website integriert – und das nicht einfach so.

Sie verstecken sich in den großflächigen Fotos. Der Clou: Das moderne Webdesign visualisiert

diese Stories, verortet sie – und lässt den Leser eintauchen in die JP | KOM-Welt. Um die ganze

Geschichte der „Agentur der Zukunft“ zu erfahren, müssen sich die Leser von Story zu Story

scrollen. Was wir machen, wie wir denken und handeln – als das erfährt der Leser dabei

nahezu „en passant“.

10

http://shorthand.com/https://storify.com/http://aesopstoryengine.com/http://pageflow.io/dehttp://pageflow.io/dehttp://aesopstoryengine.com/https://storify.com/http://shorthand.com/

Scrollytelling Beispiele

Scrollytelling für Megatrends. Mit einer bunten Mischung aus Artikeln, Bildergalerien, Videointerviews, Cases und Statistiken bereitet das Handelsblatt das vielschichtige und teils abstrakte Thema Mobilität greifbar auf.

http://media.handelsblatt.com/handelsblatt/specials/ mobilitaet-der-zukunft/#Start

Scrollytelling an der Schnitt-stelle zum Film. Mit jeder Fingerbewegung treibt der Nutzer den Prozess der Kaffeeherstellung visuell voran.

http://forbetter.coffee/

Scrollytelling für Kampagnen. Der britische Autohändler Arnold Clark erzählt die Story einer Kundenkampagne in animierten Infografiken. Originelle Vergleiche und ansehnliche Motive machen das ansonsten trockene Geldthema zur guten Unterhaltung.

http://www.arnoldclark.com/challenge/


http://forbetter.coffee/http://www.arnoldclark.com/challenge/http://media.handelsblatt.com/handelsblatt/specials/mobilitaet-der-zukunft/#Starthttp://media.handelsblatt.com/handelsblatt/specials/mobilitaet-der-zukunft/#Starthttp://www.arnoldclark.com/challenge/

PROJEKTTAGEBUCH: WAS DIE TOOLBOX NICHT VERRÄT

Schritt für Schritt zur neuen WebsiteVon Manuel Wecker

Den Website-Relaunch über sechs Monate hinweg zu steuern, erforderte die richtigen Tools, Ausdauer und ein Händchen für gute Entscheidungen. In diesen fiktiven „Tagebuch-einträgen“ zeige ich kritische Pfade und Learnings auf, die einen abseits des guten Lehrbuchs voranbringen.


25.06.2015: Am Vorabend

der EntscheidungIch bin gespannt: Morgen um 15 Uhr entscheidet die Geschäftsführung darüber, in welchem Design sich die neue JP | KOM Website der Öffentlichkeit präsentieren wird. Wir sind mit Scribbles und ersten Mock-Ups gut vorbereitet, um für unsere Gestaltungsideen zu werben. In den Zwischenmeetings hat sich gezeigt: Kaum einer ist in der Lage, anhand von schriftlichen Ausführungen, einer Excelliste oder einigen Bildern die neue Webseite vor seinem inneren Auge entstehen zu lassen. Durch grobe Strukturlayouts machen wir unsere Ideen anschaulich. So sollte es klappen!

Die Entscheidungs-PPT liegt jetzt ausge-druckt vor mir – viele Stunden Denkarbeit und Diskussion gebündelt auf 30 Seiten Papier, strukturiert durch vier Tools: Benchmarking von Wettbewerber-Auftritten Moodboards für die Bildwelt, den Illustrationsstil

Pre-Voting der Grafikdesigner anhand transparenter Kriterien Markenarchitektur, Leistungsportfolio und

technische Funktionsliste in Szenarios mit anschließender SWOT-Analyse

01.06.2015: Kick-off

Wie bei jedem Kick-off lag auch heute Spannung in der Luft. Zu Vorfreude und Euphorie gesellte sich eine Prise Unruhe, als der sechs Monate umfassende Projektplan für den Re-launch der Website an die Wand projiziert wurde: „Wie stemmen wir dieses Projekt zusätzlich zu den zahlreichen Kundenjobs?“ – las ich die Frage in den Gesichtern des Projektteams ab. Wir mussten jetzt die organisatorischen Weichen stellen, sonst würden spätestens in Woche sechzehn die „Status-Ampeln“ des Activity Reports auf Rot stehen. In Abstimmung mit der Geschäftsführung legten wir daher fest, dass der Website-Relaunch unter den internen Projekten bevorzugt behandelt wird. Selbstverständlich bleiben Kunden-

projekte erste Priorität. Treten spontan Engpässe im Tagesgeschäft auf, sollten jedoch die für den Website-Relaunch vorgesehenen Kapazitäten nicht angetastet werden. Auf diese Weise stellten wir sicher, dass möglichst keine Interessenkonflikte auftreten.

Moodboards für den Illustrationsstil

und die Bildwelt

SWOT-Analyse

Activity Report

Projektplan


07.09.2015: Das gesamte Drehbuch

Wie ein Regisseur die Dramaturgie seines Films bis hin zur letzten Feinheit schleift, so arbeiteten auch wir in den letzten Wochen die Gestaltung der JP | KOM Website bis ins Detail aus – mit Hilfe eines „Drehbuchs“. In ihm laufen die Fäden der einzelnen Teilprojekte zusammen: Testfotos aus den Shootings im Düsseldorfer und Frankfurter Büro finden hier ebenso Platz wie Zeichnungen der Illustrato-rinnen, technische Funktionsbeschreibungen, Sprungmarken und Verlinkungen.

Ein wichtiges Learning für uns: Tools setzen sich nur dann im Team durch, wenn sie auch visuell ansprechend sind. Die Mastersitemap, die wir zuvor in Excel angelegt hatten, wurde schnell vom Drehbuch-Dokument abgelöst – das ist einfach übersichtlicher und anschaulicher.

18.08.2015: Kommentierung des Basislayouts

Heute halte ich zum ersten Mal einen finali-sierten Layout-Vorschlag unserer Grafikdesigner in den Händen. Die Vision der neuen JP | KOM Webseite nimmt Gestalt an. Und neben positiven Gefühlen meldet sich gleich der Advocatus Diabolus in mir. Das braucht noch einen Feinschliff! Ich bat die Mitglieder des Projektteams, die Layouts zu kommentieren.

Mit gezückten Stiften und bunten Post-its stehen wir vor den beschreibbaren Wänden unserer „Werkstatt“ und lassen die kritischen Blicke über das Screendesign wandern: Wie sollen Boxen und Kästen animiert sein? Welche Bilder bleiben beim Parallax-Scrolling fest im Hintergrund verankert? Und wie bewegen sich welche Elemente beim Scrollen mit? Seitenaufteilung, Bildformate und Schmuckelemente – am Ende des Meetings blieben keine Fragen offen, die To-Do Liste war dafür umso länger.

Korrekturen am Screendesign-Entwurf

Masterdokument: Das Drehbuch


Die zentralen Learnings

im Überblick

1. Die inhaltliche und zeitliche Erwartungs-

haltung der internen Auftrag geber von

Beginn an klar definieren

2. Teilprojektpartner wie Grafik, Text und

Programmierung stark in die Mitverant-

wortung nehmen

3. Frühzeitig Kapazitäten für das zusätzliche

Projekt sichern und kontinuierlich

benötigte Ressourcen freisperren

4. Die Vergleichbarkeit von externen

Dienstleistern und ihren Angeboten

durch ein einheitliches, vorabdefiniertes

technisches Pflichtenheft erhöhen

5. Neue Funktionselemente und ihre

einheitliche Bezeichnung bereits beim

Projektstart festlegen

6. Nicht zu lange in der Konzeption

verharren, sondern möglichst früh

parallel dazu in die Content-Erstellung

einsteigen

7. Bei Änderungen im Konzept sofort

den gesamten Projektplan inkl. aller

Projektschritte, Kapazität und Timings

neu überprüfen

Bei JP | KOM sprechen wir die Sprache der Programmierer. Der Weg bis zum einheitlichen Wording war jedoch lang. In unserem heutigen Meeting sprachen wir viel zu häufig aneinander vorbei, verheddert in der techni-schen Fachterminologie. Diese Verstrickung hieß es nun aufzulösen. Aber wie? Zum Glück hatten wir eine Idee: Funktionselemente und ihre Bezeichnungen haben wir ein für alle Mal in einem Pflichten-heft bzw. Design Styleguide glattgezogen. Was im Drehbuch in aller inhaltlicher Breite

ausgeführt wurde, mussten wir nun, insbe-sondere für die Programmierer, auf die technischen Komponenten heruntergebre-chen – zudem hatte die Dienstleistersuche bereits begonnen. Unterschiedliche Funktions-verständnisse und damit uneinheitliche Angebote, die den Vergleich erschwerten, waren die Folge. Durch ein frühzeitiges Commitment auf einheitliche Begriffe und einen Design Styleguide inkl. technischer Funktionsbeschreibungen hätte dies verhindert werden können.

14.01.2016: Kurz vor Go-Live

Die Website geht bald online! Die Kollegen freuen sich auf den neuen Internetauftritt. Die Geschäftsführung hat im Montagsmeeting in Düsseldorf und Frankfurt angekündigt: Morgen ist es endlich so weit! Eines steht jetzt schon fest: Die Arbeit der letzten Monate hat sich gelohnt.

14.09.2015: Vorbereitung des Dienstleisterbriefings


Was ist besonders an dem visuellen Konzept der Website? Die neue Website integriert die relevanten Infos auf wenigen Longpagern statt wie bisher auf vielen Subsites. Sprungmarken führen zu den einzelnen Informationen. Statt nüchterner Fakten erzählen wir emotionale Storys über unsere Agentur und ihre Mitarbeiter. Das beeinflusste das visuelle Konzept maßgeblich. Wie auf einer Erkundungstour durch die Agentur kann der Nutzer jetzt an interaktiven Infopoints kleine Geschichten inner- und außerhalb der Büroräume entdecken. Zudem bebildern wir diese Stories im Augmented-Reality-Stil, ganz im Sinne der „Agentur der Zukunft“. Dieses Prinzip sorgt so für einen starken Wiedererkennungswert der Marke JP | KOM im Internet.

Was bedeutet das für die Ästhetik des Auftritts? Von Anfang war die Prämisse, ein wertiges Webdesign zu schaffen. Wir haben das bestehende JP | KOM Corporate Design um wiederkehrende Layout-Elemente ergänzt, die alle in einem Design Guide festgehalten wurden. Prägnant sind hier der Einsatz von bildschirmfüllenden Bildern, die klare minimalistische Typografie mit zwei Schrift-schnitten, der elegante Einsatz anthrazit-farbener Elemente und der rote Kachel-Look bei Mouseover. Es handelt sich weniger um eine Revolution, mehr um eine Evolution, die das bestehende Corporate Design

berücksichtigt und dennoch frisch und zeit gemäß wirkt. Schließlich haben wir uns als Agentur auch weiterentwickelt und nicht komplett umgekrempelt.

Was hat Dich bei der Entwicklung inspiriert? Es ist nicht so, dass ich gewartet habe, bis mir die guten Ideen zufliegen. Ich bin da systematisch herangegangen. Zu Beginn des Projekts habe ich ein Moodboard angelegt, um das Look-and-Feel der neuen Website zu bestimmen. Dort habe ich Beispiele für User Interface und User Experience Designs, Farbkombinationen, Illustrationsstile, Typografie-Beispiele und Studioporträts gesammelt. Des Weiteren habe ich die Benchmark zentraler Mitbewerber visuell analysiert, um Do´s und Dont´s für das neue Website-Konzept zu bestimmen. Um den State-of-the-Art im Webdesign zu kennen, durchforste ich auch privat Fach-medien wie Page, t3n, Designmadeingermany oder Smashing Magazine.

Manche Kunden fragen sich ja, warum es für Fotos so viel Aufwand benötigt. Was gehört alles dazu? Die Liste ist wirklich lang. Auch hier kam wieder das Moodboard als Entscheidungs-Tool zum Einsatz. Wir wollten einen freundlichen, authentischen Look, der sowohl den Arbeits-alltag in der Agentur als auch die schöne Architektur unserer Niederlassungen berücksichtigt. Zudem sind wir mit offenen

Grafik-Designerin Sarah Weber hat das visuelle Konzept der neuen JP | KOM Website entwickelt und implementiert. Im Interview spricht sie über Systematik bei der Design-Entwicklung, die Koordinierung anderer Experten und die Begeisterung über die Ergebnisse.

Plötzlich werden Ideen Wirklichkeit

Bei der Arbeit Brainstorming

zu Beginn des Relaunch-Projektes


https://dk.pinterest.com/sarahweber175/webdesign/http://page-online.de/http://t3n.de/http://www.designmadeingermany.de/sites-we-like/https://www.smashingmagazine.com/

Sarah Webers Job Schritt für Schritt

1. Kick-off. Festlegung von Design- Strategie

in Abhängigkeit von Informationsarchitektur,

Technik und Content

2. Gestaltungsrichtung. Entscheidung

auf Basis von Moodboards und exem-

plarischer Screendesigns

3. UI/UX-Design. Definition auf Basis

eines Benchmark von Navigationsprinzipien

und User-Experience-Ansätzen und Briefing

der Programmierer

4. Umsetzung Bildwelt. Steuerung von

Fotografen/Illustratoren bei Konzeption und

Realisierung

5. Usability-Test. Beobachtung bei der

Bedienung von Klick-Dummies; Weiter-

entwicklung des Designs

6. Finalisierung. Übertragung des

Screendesigns auf alle Seiten und Steuerung

der Programmierer bis zur fertigen Website

Für die Erstellung des Moodboards hat Sarah Weber Pinterest genutzt. Es war leicht zu editieren und für Kollegen gut einsehbar.

http://tiny.cc/x0f37x

Von ersten Ideen zum fertigen Ergebnis einer Illustration.

Augen und der Handykamera durch die Agentur gezogen, auf der Suche nach Schokoladenseiten. Die Bildmotive waren vordefiniert, entsprechend den Augmented-Reality-Objekten innerhalb der Bilder. Wichtig und zugleich aufwendig war es, eine detaillierte Motivliste zu erstellen, um die Stories zu integrieren und genügend Platz für Illustrationen bereitzuhalten. Des Weiteren musste ich die Models (JP | KOM Mitarbeiter) hinsichtlich Kleidung briefen, weil etwa kleingemusterte oder auffällige Farben schlecht auf den Fotos ausgesehen hätten. Und die Requisiten mussten parat stehen.

Hast Du selbst fotografiert? Wir haben uns in diesem Fall für einen externen Fotografen entschieden. Ich war aber beim Shooting dabei und habe mich mit ihm durchgehend hinsichtlich der Motive und Stimmungen abgestimmt.

Was war Dein Lieblingsmoment während des Projekts? Aufregend war der erste Blick auf die Um-setzung der Programmierer. Plötzlich werden alle Ideen Wirklichkeit. Begeistert hat mich auch das Zusammenfügen der bearbeiteten Fotos und der tollen Illustrationen.


http://tiny.cc/x0f37x

Im Schaffensprozess der Website gab es einige Highlights. Sehen Sie selbst:

Das Making-of

IMPRESSUM Verantwortlich Anja Montag JP | KOM GmbH Galeriehaus, Erkrather Str. 228b, 40233 Düsseldorf +49 211 687835-24 Kostenloses Abo und Abbestellung über [email protected]. Bei Änderung Ihrer E-Mail-Adresse, Anregungen oder Fragen klicken Sie bitte hier.

Über JP | KOM ist eine mittelständische, inhabergeführte Kommunikationsagentur – die Agentur der Zukunft. Wir stehen für strategische Beratung, spannende Storys und hochwertigen Content in modernen Medien. In den Büros in Düsseldorf und Frankfurt unterstützen 38 Mitarbeiter Kunden aus Maschinen-bau und Technik, Chemie, Banken/Versicherungen, Healthcare und anderen Branchen auf dem Weg ins neue Kommunikationszeitalter. Wir gestalten den digitalen Wandel – auch in traditionsreichen Unternehmen. Als Mitglied des International PR Network (IPRN) hat JP | KOM weltweit mehr als 40 Kooperationspartner.

AbbildungenJP | KOM; Fotos: Falco Peters Titel © Pixeden; S. 2 © Tomas Florian; Macro-vector/Shutterstock, S.6 © tovovan/Shutterstock, S.15 © Pixeden

Mehr Fotos gibt es auf unserer neuen Website.


http://www.jp-kom.de/blog/leistungen/making-der-jpkom-website mailto:[email protected]://www.jp-kom.de/http://falcopeters.com/mailto:[email protected]

123456789101112131415161718

Schaltfläche 542: 6: Schaltfläche 513: Schaltfläche 514: Schaltfläche 515: Schaltfläche 516: Schaltfläche 4018: Schaltfläche 476: Schaltfläche 477: Schaltfläche 478: Schaltfläche 479: Schaltfläche 480: Schaltfläche 481: Schaltfläche 517: Schaltfläche 471: Seite 2: OffSeite 31: OffSeite 42: OffSeite 53: OffSeite 64: OffSeite 75: OffSeite 86: OffSeite 97: OffSeite 108: OffSeite 119: OffSeite 1210: OffSeite 1311: OffSeite 1412: OffSeite 1513: OffSeite 1614: OffSeite 1715: Off

Schaltfläche 472: Seite 2: OffSeite 31: OffSeite 42: OffSeite 53: OffSeite 64: OffSeite 75: OffSeite 86: OffSeite 97: OffSeite 108: OffSeite 119: OffSeite 1210: OffSeite 1311: OffSeite 1412: OffSeite 1513: OffSeite 1614: OffSeite 1715: Off

Schaltfläche 473: Seite 2: OffSeite 31: OffSeite 42: OffSeite 53: OffSeite 64: OffSeite 75: OffSeite 86: OffSeite 97: OffSeite 108: OffSeite 129: OffSeite 1310: OffSeite 1511: OffSeite 1612: OffSeite 1713: Off

Schaltfläche 475: Seite 2: OffSeite 31: OffSeite 42: OffSeite 53: OffSeite 64: OffSeite 85: OffSeite 96: OffSeite 107: OffSeite 128: OffSeite 139: OffSeite 1510: OffSeite 1611: OffSeite 1712: Off

Schaltfläche 612: Schaltfläche 586: Schaltfläche 377: Schaltfläche 378: Schaltfläche 505: Schaltfläche 585: Schaltfläche 379: Schaltfläche 382: Schaltfläche 383: Schaltfläche 384: Schaltfläche 381: Schaltfläche 584: Schaltfläche 442: Schaltfläche 443: Schaltfläche 518: Schaltfläche 445: Schaltfläche 519: Schaltfläche 447: Popup_Longpager 4: Popup_Longpager 3: Popup_Longpager 2: Popup_Longpager 1: Schaltfläche Link Blog: Schaltfläche Link Spaßfotos: Schaltfläche Link LP1: Schaltfläche 583: Schaltfläche Link LP2: Schaltfläche Link LP3: Schaltfläche Link LP4: 1 li 4: 4 li 3: 3 li 2: 2 li 1: 4 re 1: 3 re 4: 2 re 3: 1 re 2: Schaltfläche 455: Schaltfläche 608: Schaltfläche 474: Seite 6: OffSeite 71: OffSeite 82: OffSeite 93: OffSeite 104: OffSeite 125: OffSeite 136: OffSeite 157: OffSeite 168: OffSeite 179: Off

Schaltfläche 609: Schaltfläche 504: Schaltfläche 452: Schaltfläche Link CEO-Blog: Schaltfläche Link CEO-Blog 1: Schaltfläche Link CEO-Blog 2: Schaltfläche Link CEO-Blog 3: Schaltfläche Link CEO-Blog 4: Schaltfläche Link Fach-Blog: Schaltfläche Link News-Blog: Schaltfläche Link Junioren-Blog: Schaltfläche 613: Schaltfläche 554: Schaltfläche 530: Schaltfläche 529: Schaltfläche 528: Schaltfläche 527: Schaltfläche Pageflow: Schaltfläche Pageflow 1: Schaltfläche Pageflow 2: Schaltfläche Pageflow 3: Schaltfläche 561: Schaltfläche 562: Schaltfläche 563: Schaltfläche 531: Schaltfläche 532: Schaltfläche 534: Schaltfläche 543: Schaltfläche 533: Schaltfläche 373: Schaltfläche 368: Schaltfläche 369: Schaltfläche 370: Schaltfläche 371: Schaltfläche 372: Schaltfläche 564: Schaltfläche 565: Schaltfläche 566: Schaltfläche 573: Schaltfläche 574: Schaltfläche 575: Schaltfläche 576: Schaltfläche 577: Schaltfläche 499: Schaltfläche 500: Schaltfläche 567: Schaltfläche 568: Schaltfläche 569: Schaltfläche 459: Schaltfläche 458: Schaltfläche 457: Schaltfläche 615: Schaltfläche 462: Schaltfläche 461: Schaltfläche 460: Schaltfläche 465: Schaltfläche 464: Schaltfläche 463: Schaltfläche 535: Schaltfläche 614: Popup Making-Of 1: Popup Making-Of 2: Popup Making-Of 3: Popup Making-Of 4: Popup Making-Of 5: Popup Making-Of 6: Popup Making-Of 7: Popup Making-Of 8: Schaltfläche 578: Schaltfläche 579: Schaltfläche 580: Schaltfläche 581: Schaltfläche 582: Schaltfläche Making-Of 1: Schaltfläche Making-Of 2: Schaltfläche Making-Of 3: Schaltfläche Making-Of 4: Schaltfläche Making-Of 8: Schaltfläche Making-Of 7: Schaltfläche Making-Of 6: Schaltfläche Making-Of 5: Schaltfläche 536: Schaltfläche 539: Schaltfläche 540: Schaltfläche 541: Schaltfläche 538:

Documents

NEWS-SERVICE - JP|KOM · DIE NEUE JP | KOM WEBSITE „Die Agentur der Zukunft“ – mit Storytelling im Web den Internetauftritt zum Erlebnis machen NEWS-SERVICE Ausgabe #01 | Januar