JP│KOM News-Service 1/16: Die neue JP│KOM Website

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

Transcript of JP│KOM News-Service 1/16: Die neue JP│KOM Website

  • DIE NEUE JP | KOM WEBSITEDie Agentur der Zukunft mit Storytelling im

    Web den Internetauftritt zum Erlebnis machen

    NEWS-SERVICEAusgabe #01 | Januar 2016

  • 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. Vernderungskommunikation, Kommunikationsmanagement und -controlling (Wertschpfung durch Kommunikation), digitale Unternehmenskommunikation, Organisationsentwicklung der Kommunikation, Portfoliomanagement der Kommunikation s-aktivitten: JP | KOM gehrte in den vergangenen 15 Jahren zu den Trendsettern in Strategie und Implementierung der Un ter-nehmenskommuni kation. Davon zeugen auch die Bcher und zahllosen weiteren Verffent-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 fr Dialog, die Heritage und die Vitalitt der Vernderung zweifellos wichtige Werte, doch wie attraktiv sind sie noch fr Kunden und Mitarbeiter von heute? JP | KOM tritt nun mit dem Anspruch auf, Die Agentur der Zukunft zu sein entsprechend verbindet sich knftig das Vernderungsmotiv mit digitalen Signalen und einem loftigen post modernen Ambiente/Lifestyle.

    Das Portfolio. In 22 Jahren JP | KOM wurde das Leistungsangebot stndig erweitert und unbersichtlich. Das neue Portfolio lsst wieder erkennen, worum es unseren Kunden mehr denn je geht: Strategie Content Medien. Die Website fhrt vor, wie digitale Kommuni-kation in den Geschftsprozess eingelassen ist so sehen knftige Geschftsmodelle von Agenturen aus: Nur ber die Aktivitten zu

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

    Die Methoden. Wettbewerb um Aufmerk-samkeit und Reaktanz vs. Belehrungen. Im Web muss es schnell gehen, und es muss unterhaltsam sein. Deshalb erzhlen wir jetzt absichtsvoll Geschichten. Und wir ffnen uns in vier Blogs tagtglich der Diskussion. Das Wichtigste jedoch noch mehr als bisher sind die Bilder, die Inszenierung der Leistung. So knnte die Agentur der Zukunft aussehen. Das knnte 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.

    Jrg Pfannenberg

    Geschftsfhrer

    JP | KOM News-Service # 01 | Januar 2016

  • Inhaltsverzeichnis

    Kontakt Drucken Ntzliche Links Zurck zur bersichtVideo

    JP | KOM News-Service # 01 | Januar 2016

    Ansicht vergrern

    3

  • Es heit, die Dsseldorfer Schwanenhfe waren die erste Waschmittelfabrik Europas. 1897 be gann hier die Produktion von Dr. Thompsons Seifenpulver Marke Schwan, einem der ersten Markenartikel in Deutschland. Rund 30 Jahre spter wurde das Werk von Henkel bernommen, die Marke Schwan lebte lange weiter. 2005 endete die Produk tion und das Gelnde verfiel in einen Dorn rschenschlaf. Wachge-ksst wurde es im Jahr 2010 von einem wagemutigen Architekten bro. Heute sind die Schwanenhfe in Flingern-Sd ein Campus mit Ateliers und Werksttten, Restaurants, Agenturen und Heimat einer der fhrenden Business Schools Deutschlands. []

    So beginnt die Reise auf der neuen Website von JP | KOM. Mit Geschichten und Anekdoten fhrt die Webprsenz seit Mitte Januar durch die Agentur der Zukunft, zeigt wer wir sind, wofr 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 prsentieren 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

  • JP | KOM News-Service # 01 | Januar 2016 5

  • Alle vier Rubriken enthalten regelmig aktualisierte Beitrge

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

    im News-Blog im Bereich Wissen

    und im Junioren-Blog.

    Klare Fhrung statt bunter AuswahlDer User wird linear durch die Seiten gefhrt. Die vereinfachte Navigation mit dem Scroll-Rad ermglicht ihm, jederzeit zu verweilen oder tiefer einzusteigen.

    Die Tour ffnet Raum fr Erzhlstrukturen. Das Scrollytelling ldt die Informationen emotional auf, macht Fakten durch erzhlten Content und Beispiele relevant. An die Stelle typischer Teaser-Texte tritt ein multimedialer Erzhlstrang, der Storys mit Bildern, Illustratio-nen und weiterfhrenden Links verwebt.

    Blaupause fr 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 Kanle, letztlich sogar die E-Mail-Signaturen von JP | KOM werden folgen.

    Passend zu jedem Endgert

    Als JP | KOM vor fnf Jahren den letzten Relaunch seiner Website hatte, ahnten viele schon, dass es die letzte Desktop-orientierte Seite sein wrde. Morgan Stanley hatte 2010 prognostiziert, dass es ab 2014 mehr mobile als stationre 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 lngst keine mehr. Von 3,5 bis ber 18 Zoll muss alles mitgedacht und bedient werden. Fr die neue responsive Website von JP | KOM stellt das kein Problem dar: Sie passt auf nahezu jedes Endgert auer auf Papier.

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

  • JP | KOM: Die Agentur der ZukunftVon Attila Sder und Jrg Pfannenberg

    NEUPOSITIONIERUNG DER AGENTUR

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

    JP | KOM News-Service # 01 | Januar 2016

  • Zuletzt wurden die Diskrepanzen in den Prsentationen immer grer: 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 mittelstndischen und groen 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 Bedarfslcke: die Kombination von strategischer Beratung, digitalen Medien und innovativem Content. Was muss die Agentur der Zukunft bieten? Wie kann JP | KOM diese Lcke fllen?

    Neues Portfolio trifft den Markt Digitale Leistungen sind lngst in allen Bera-tungsfeldern integriert. Bei der Entwicklung des neuen Portfolios stand deshalb fest: Die Digital-Angebote mit einer eigenen Marke auszuweisen, ist knftig nicht mehr notwendig. Im Markenauftritt konzentriert sich die Agentur knftig auf die Hauptmarke JP | KOM. Die neue Portfolio-Struktur soll dabei strker 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 Vernderungssituatio-

    nen und komplexe Themenfelder bis hin zur digitalen Transformation. Content. Storytelling ist der Knigsweg, 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 fr alle Kanle

    von Webseiten und Apps bis zu klassischen Printpublikationen.

    Urban, digital, kreativ Im Rahmen der Neu-Positionierung soll die Agentur potenziellen Kunden und Mitarbei-tern strker 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 seriser Strategie-Beratung und digitaler Avantgarde schlgt das neue Branding von JP | KOM einen gesunden Mittelweg ein. Das entspricht dem Stand vieler Kunden von JP | KOM, die ihre traditio-nellen Geschftsfelder im Zuge der Digitalisierung verndern, wie zum Beispiel Industrie 4.0, Autonomes Fahren und Smart Home. So ebnet die Website den Weg fr neue Leistungen, die JP | KOM seinen Kunden knftig anbieten wird.

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

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

  • Wie Scrollytelling mit alten Regeln der Website-Nutzung bricht

    GESCHICHTEN AUS DER FINGERSPITZE

    Wenn Multimedia, Storytelling und Touchdisplays zusammenkommen, entsteht fr 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 mglichst in einem Rutsch durchlesen. Scrollytelling bedient genau diesen Effekt. Galt in Zeiten des stationren Webs noch, mglichst alle Inhalte einer Webseite in kleinen Hppchen direkt im Bildschirm sichtbar zu machen, so kehrt sich dieser Leitsatz mit dem Siegeszug mobiler Gerte 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 einprgsa-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 verfgbare Navigation und eine Positionsanzeige geben Orientierung. Pfeile helfen, die Scrollrichtung deutlich zu machen.

    Verfgbarkeit. Multimediale Seiten knnen schnell datenintensiv werden. Durch asyn-chrones Laden tauchen die ersten Elemente

    im Blickfeld auf, whrend sptere Inhalte sich noch aufbauen. Ladehinweise halten den Nutzer im Zweifel noch ein paar Sekunden bei der Stange.

    Responsivitt. Das Design muss anpassungs-fhig wie ein Chamleon sein, sich in verschie-denen Bildschirmformaten und auf diversen

    Betriebssystemen korrekt anzeigen lassen. Reduktion. Das Screendesign beschrnkt sich auf wesentlichen Content ohne Schmuck-elemente. Statt klassischem Layout mit Header und Footer werden Inhalte bildschirmfllend dargestellt. Auch interaktive Elemente sollten mit Bedacht ausgewhlt werden, um den Nutzer und die User Experience nicht berzu-strapazieren.

    Erzhlstruktur. Vor der Gestaltung muss die inhaltliche Grundidee bestimmt sein. Die Story der Website braucht Haupt- und mglicher-weise auch Nebenstrnge. Auerdem muss die Erzhlperspektive festgelegt werden. Dank Verlinkung ist eine lineare Erzhlung nicht obligatorisch, trotz Scroll-Effekt.

    Von Sarah Weber

    Vor der Gestaltung muss

    die inhaltliche Grundidee

    bestimmt sein

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

  • Tools fr Scrollyteller (keine Programmierkenntnisse bentigt)

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

    http://shorthand.com/

    Einfache Bedienung durch WYSIWYG-Editor Plug-in fr Wordpress mit 13 Story-Komponenten

    Besonders geeignet zur Kuratierung von Social

    Media-Inhalten, lsst 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 sttzen 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 fhrt 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.

    JP | KOM News-Service # 01 | Januar 2016

    Vom Storytelling zum Scrollytelling

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

    Ereignisebene erzeugt, welche, ausgeschmckt mit Details, fr Anschaulichkeit und Glaub-

    wrdigkeit 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 groflchigen Fotos. Der Clou: Das moderne Webdesign visualisiert

    diese Stories, verortet sie und lsst den Leser eintauchen in die JP | KOM-Welt. Um die ganze

    Geschichte der Agentur der Zukunft zu erfahren, mssen sich die Leser von Story zu Story

    scrollen. Was wir machen, wie wir denken und handeln als das erfhrt der Leser dabei

    nahezu en passant.

    10

  • Scrollytelling Beispiele

    Scrollytelling fr Megatrends. Mit einer bunten Mischung aus Artikeln, Bildergalerien, Videointerviews, Cases und Statistiken bereitet das Handelsblatt das vielschichtige und teils abstrakte Thema Mobilitt 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 fr Kampagnen. Der britische Autohndler Arnold Clark erzhlt 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/

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

  • PROJEKTTAGEBUCH: WAS DIE TOOLBOX NICHT VERRT

    Schritt fr Schritt zur neuen WebsiteVon Manuel Wecker

    Den Website-Relaunch ber sechs Monate hinweg zu steuern, erforderte die richtigen Tools, Ausdauer und ein Hndchen fr gute Entscheidungen. In diesen fiktiven Tagebuch-eintrgen zeige ich kritische Pfade und Learnings auf, die einen abseits des guten Lehrbuchs voranbringen.

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

  • 25.06.2015: Am Vorabend

    der EntscheidungIch bin gespannt: Morgen um 15 Uhr entscheidet die Geschftsfhrung darber, in welchem Design sich die neue JP | KOM Website der ffentlichkeit prsentieren wird. Wir sind mit Scribbles und ersten Mock-Ups gut vorbereitet, um fr unsere Gestaltungsideen zu werben. In den Zwischenmeetings hat sich gezeigt: Kaum einer ist in der Lage, anhand von schriftlichen Ausfhrungen, 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 gebndelt auf 30 Seiten Papier, strukturiert durch vier Tools: Benchmarking von Wettbewerber-Auftritten Moodboards fr die Bildwelt, den Illustrationsstil

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

    technische Funktionsliste in Szenarios mit anschlieender 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 fr den Re-launch der Website an die Wand projiziert wurde: Wie stemmen wir dieses Projekt zustzlich zu den zahlreichen Kundenjobs? las ich die Frage in den Gesichtern des Projektteams ab. Wir mussten jetzt die organisatorischen Weichen stellen, sonst wrden sptestens in Woche sechzehn die Status-Ampeln des Activity Reports auf Rot stehen. In Abstimmung mit der Geschftsfhrung legten wir daher fest, dass der Website-Relaunch unter den internen Projekten bevorzugt behandelt wird. Selbstverstndlich bleiben Kunden-

    projekte erste Prioritt. Treten spontan Engpsse im Tagesgeschft auf, sollten jedoch die fr den Website-Relaunch vorgesehenen Kapazitten nicht angetastet werden. Auf diese Weise stellten wir sicher, dass mglichst keine Interessenkonflikte auftreten.

    Moodboards fr den Illustrationsstil

    und die Bildwelt

    SWOT-Analyse

    Activity Report

    Projektplan

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

  • 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 Fden der einzelnen Teilprojekte zusammen: Testfotos aus den Shootings im Dsseldorfer und Frankfurter Bro finden hier ebenso Platz wie Zeichnungen der Illustrato-rinnen, technische Funktionsbeschreibungen, Sprungmarken und Verlinkungen.

    Ein wichtiges Learning fr 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 abgelst 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 Hnden. Die Vision der neuen JP | KOM Webseite nimmt Gestalt an. Und neben positiven Gefhlen meldet sich gleich der Advocatus Diabolus in mir. Das braucht noch einen Feinschliff! Ich bat die Mitglieder des Projektteams, die Layouts zu kommentieren.

    Mit gezckten Stiften und bunten Post-its stehen wir vor den beschreibbaren Wnden unserer Werkstatt und lassen die kritischen Blicke ber das Screendesign wandern: Wie sollen Boxen und Ksten 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 dafr umso lnger.

    Korrekturen am Screendesign-Entwurf

    Masterdokument: Das Drehbuch

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

  • 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. Frhzeitig Kapazitten fr das zustzliche

    Projekt sichern und kontinuierlich

    bentigte Ressourcen freisperren

    4. Die Vergleichbarkeit von externen

    Dienstleistern und ihren Angeboten

    durch ein einheitliches, vorabdefiniertes

    technisches Pflichtenheft erhhen

    5. Neue Funktionselemente und ihre

    einheitliche Bezeichnung bereits beim

    Projektstart festlegen

    6. Nicht zu lange in der Konzeption

    verharren, sondern mglichst frh

    parallel dazu in die Content-Erstellung

    einsteigen

    7. Bei nderungen im Konzept sofort

    den gesamten Projektplan inkl. aller

    Projektschritte, Kapazitt und Timings

    neu berprfen

    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 hufig aneinander vorbei, verheddert in der techni-schen Fachterminologie. Diese Verstrickung hie es nun aufzulsen. Aber wie? Zum Glck hatten wir eine Idee: Funktionselemente und ihre Bezeichnungen haben wir ein fr alle Mal in einem Pflichten-heft bzw. Design Styleguide glattgezogen. Was im Drehbuch in aller inhaltlicher Breite

    ausgefhrt wurde, mussten wir nun, insbe-sondere fr die Programmierer, auf die technischen Komponenten heruntergebre-chen zudem hatte die Dienstleistersuche bereits begonnen. Unterschiedliche Funktions-verstndnisse und damit uneinheitliche Angebote, die den Vergleich erschwerten, waren die Folge. Durch ein frhzeitiges Commitment auf einheitliche Begriffe und einen Design Styleguide inkl. technischer Funktionsbeschreibungen htte dies verhindert werden knnen.

    14.01.2016: Kurz vor Go-Live

    Die Website geht bald online! Die Kollegen freuen sich auf den neuen Internetauftritt. Die Geschftsfhrung hat im Montagsmeeting in Dsseldorf und Frankfurt angekndigt: 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

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

  • 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 fhren zu den einzelnen Informationen. Statt nchterner Fakten erzhlen wir emotionale Storys ber unsere Agentur und ihre Mitarbeiter. Das beeinflusste das visuelle Konzept mageblich. Wie auf einer Erkundungstour durch die Agentur kann der Nutzer jetzt an interaktiven Infopoints kleine Geschichten inner- und auerhalb der Brorume entdecken. Zudem bebildern wir diese Stories im Augmented-Reality-Stil, ganz im Sinne der Agentur der Zukunft. Dieses Prinzip sorgt so fr einen starken Wiedererkennungswert der Marke JP | KOM im Internet.

    Was bedeutet das fr die sthetik des Auftritts? Von Anfang war die Prmisse, ein wertiges Webdesign zu schaffen. Wir haben das bestehende JP | KOM Corporate Design um wiederkehrende Layout-Elemente ergnzt, die alle in einem Design Guide festgehalten wurden. Prgnant sind hier der Einsatz von bildschirmfllenden 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

    bercksichtigt und dennoch frisch und zeit gem wirkt. Schlielich 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 fr User Interface und User Experience Designs, Farbkombinationen, Illustrationsstile, Typografie-Beispiele und Studioportrts gesammelt. Des Weiteren habe ich die Benchmark zentraler Mitbewerber visuell analysiert, um Dos und Donts fr 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 fr Fotos so viel Aufwand bentigt. Was gehrt 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 schne Architektur unserer Niederlassungen bercksichtigt. 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.

    Pltzlich werden Ideen Wirklichkeit

    Bei der Arbeit Brainstorming

    zu Beginn des Relaunch-Projektes

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

  • Sarah Webers Job Schritt fr Schritt

    1. Kick-off. Festlegung von Design- Strategie

    in Abhngigkeit 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-Anstzen 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

    Fr die Erstellung des Moodboards hat Sarah Weber Pinterest genutzt. Es war leicht zu editieren und fr 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 gengend Platz fr Illustrationen bereitzuhalten. Des Weiteren musste ich die Models (JP | KOM Mitarbeiter) hinsichtlich Kleidung briefen, weil etwa kleingemusterte oder auffllige Farben schlecht auf den Fotos ausgesehen htten. Und die Requisiten mussten parat stehen.

    Hast Du selbst fotografiert? Wir haben uns in diesem Fall fr 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 whrend des Projekts? Aufregend war der erste Blick auf die Um-setzung der Programmierer. Pltzlich werden alle Ideen Wirklichkeit. Begeistert hat mich auch das Zusammenfgen der bearbeiteten Fotos und der tollen Illustrationen.

    JP | KOM News-Service # 01 | Januar 2016

  • 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 Dsseldorf +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 mittelstndische, inhabergefhrte Kommunikationsagentur die Agentur der Zukunft. Wir stehen fr strategische Beratung, spannende Storys und hochwertigen Content in modernen Medien. In den Bros in Dsseldorf und Frankfurt untersttzen 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.

    JP | KOM News-Service # 01 | Januar 2016

    123456789101112131415161718

    Schaltflche 542: 6: Schaltflche 513: Schaltflche 514: Schaltflche 515: Schaltflche 516: Schaltflche 4018: Schaltflche 476: Schaltflche 477: Schaltflche 478: Schaltflche 479: Schaltflche 480: Schaltflche 481: Schaltflche 517: Schaltflche 471: Schaltflche 472: Schaltflche 473: Schaltflche 475: Schaltflche 612: Schaltflche 586: Schaltflche 377: Schaltflche 378: Schaltflche 505: Schaltflche 585: Schaltflche 379: Schaltflche 382: Schaltflche 383: Schaltflche 384: Schaltflche 381: Schaltflche 584: Schaltflche 442: Schaltflche 443: Schaltflche 518: Schaltflche 445: Schaltflche 519: Schaltflche 447: Popup_Longpager 4: Popup_Longpager 3: Popup_Longpager 2: Popup_Longpager 1: Schaltflche Link Blog: Schaltflche Link Spafotos: Schaltflche Link LP1: Schaltflche 583: Schaltflche Link LP2: Schaltflche Link LP3: Schaltflche 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: Schaltflche 455: Schaltflche 608: Schaltflche 474: Schaltflche 609: Schaltflche 504: Schaltflche 452: Schaltflche Link CEO-Blog: Schaltflche Link CEO-Blog 1: Schaltflche Link CEO-Blog 2: Schaltflche Link CEO-Blog 3: Schaltflche Link CEO-Blog 4: Schaltflche Link Fach-Blog: Schaltflche Link News-Blog: Schaltflche Link Junioren-Blog: Schaltflche 613: Schaltflche 554: Schaltflche 530: Schaltflche 529: Schaltflche 528: Schaltflche 527: Schaltflche Pageflow: Schaltflche Pageflow 1: Schaltflche Pageflow 2: Schaltflche Pageflow 3: Schaltflche 561: Schaltflche 562: Schaltflche 563: Schaltflche 531: Schaltflche 532: Schaltflche 534: Schaltflche 543: Schaltflche 533: Schaltflche 373: Schaltflche 368: Schaltflche 369: Schaltflche 370: Schaltflche 371: Schaltflche 372: Schaltflche 564: Schaltflche 565: Schaltflche 566: Schaltflche 573: Schaltflche 574: Schaltflche 575: Schaltflche 576: Schaltflche 577: Schaltflche 499: Schaltflche 500: Schaltflche 567: Schaltflche 568: Schaltflche 569: Schaltflche 459: Schaltflche 458: Schaltflche 457: Schaltflche 615: Schaltflche 462: Schaltflche 461: Schaltflche 460: Schaltflche 465: Schaltflche 464: Schaltflche 463: Schaltflche 535: Schaltflche 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: Schaltflche 578: Schaltflche 579: Schaltflche 580: Schaltflche 581: Schaltflche 582: Schaltflche Making-Of 1: Schaltflche Making-Of 2: Schaltflche Making-Of 3: Schaltflche Making-Of 4: Schaltflche Making-Of 8: Schaltflche Making-Of 7: Schaltflche Making-Of 6: Schaltflche Making-Of 5: Schaltflche 536: Schaltflche 539: Schaltflche 540: Schaltflche 541: Schaltflche 538: