Design | t3n News News, Infos, Tipps und aktuelle Artikel zu Design 2015-09-05T09:47:57Z t3n Redaktion http://t3n.de/tag/design Styleguides leicht gemacht: Mit Jade und SCSS zur perfekten Corporate-Identity http://t3n.de/news/styleguides-637033/ 2015-09-05T09:47:57Z
Styleguides sind eines der essentiellen und grundlegendsten Dinge, das ein Unternehmen für seine Corporate Identity benötigt. Mit den Styleguides von HUGE wird dieser Prozess optimiert und erhält …

Styleguides sind eines der essentiellen und grundlegendsten Dinge, das ein Unternehmen für seine Corporate Identity benötigt. Mit den Styleguides von HUGE wird dieser Prozess optimiert und erhält die nötige Professionalität. Wir schauen uns an, was das Toolkit auf dem Kasten hat.

Styleguides sind Gestaltungsrichtlinien, die definieren, wie eine Marke oder ein Unternehmen sich präsentiert und regeln somit das einheitliche Erscheinungsbild. Egal ob Webseite, Visitenkarten oder Produkte  – die Assoziationen zur Marke oder zum Unternehmen müssen immer gewährleistet sein.

Styleguides: Die Installation

Der Styleguide von HUGE ist ein Toolkit, das auf dem lokalen Client installiert werden muss. Es basiert auf Node.js und Harp.js und kann somit auf Mac, Windows und Linux laufen. Damit auch Terminal-Neulinge mit der Installation nicht überfordert sind, gibt es für den Mac ein Installations- und Export-Tool (Windows und Linux werden folgen). Harp.js ist hingegen für einen lokalen Server zuständig. Sprich sobald wir das Toolkit gestartet haben, können wir den lokalen Server über localhost:9241 aufrufen und unseren Styleguide begutachten.

Zuerst müssen wir das benötige Installations-Paket von der offiziellen Seite laden. Die Pakete sind vom Umfang her gleich, nur beim Mac-Paket liegt der zusätzliche Installer und Exporter bei. Somit können alle Mac-Nutzer die Installation über das beiliegende Programm Start.app durchführen. Anschließend wird automatisch der lokale Server gestartet und im Browser geöffnet.

Für alle, die lieber mehr Kontrolle haben wollen oder keinen Mac besitzen, können diese Schritte natürlich über die Kommandozeile oder das Terminal durchgeführt werden. Händisch installieren wir Node.js und Harp.js. Jetzt müssen wir die Kommandozeile oder das Terminal öffnen und uns in den Ordner styleguide-master/styleguide/structure/_node-files navigieren und folgendes Kommando ausführen:

npm install

Das veranlasst die Installation von allen abhängigen Node.js-Paketen, die gebraucht werden. Jetzt müssen wir nur noch den Harp-Server starten:

node watch.js

Darauf sollte sich im Browser jetzt localhost:9241 öffnen und uns die Preview unseres Styleguides liefern.

Styleguides: Die Inhalte hinterlegen

Die Inhalte des Styleguides sind natürlich noch nicht angepasst und somit erhalten wir die Demo-Ansicht. Um jetzt unsere Inhalte anzulegen, müssen wir im Verzeichnis styleguide-master/styleguide unsere Daten hinterlegen. Zuerst sollten wir die Grundeinstellungen bearbeiten und anpassen, die wir in der _data.json-Datei finden. Hier können Sprache, Version und mögliche Responsive-Breakpoints definiert werden.  Im Ordner assets können wir unsere Fonts und Logos hinterlegen. Das Verzeichnis structure ist für die Basis-Elemente und Funktionen zuständig. Hier werden Icons, Footer, Header, Sidebar und vieles mehr definiert – es ist nicht notwendig, in diesem Ordner Änderungen vorzunehmen.

Ordnerhierarchie der Stylguides. (Screenshot: Mac)
Ordnerhierarchie der Styleguides. (Screenshot: Mac)

Viel mehr sollte uns das Verzeichnis modules interessieren. Hier wird mit einer Ordnerhierarchie unsere Navigation gegliedert, dabei ist die Namensgebung der Dateien ausschlaggebend. Eine Durchnummerierung der Ordner ist Pflicht, auch die Benennung unterhalb dieser Ordner ist vorgegeben. In der Datei _data.json werden die Inhalte und Einstellungen zu diesem Kapitel hinterlegt. Somit dient die _data.json als Datenquelle, die wiederum von der .jade-Datei ausgelesen wird.

Wer noch keine Erfahrungen mit der Jade-Template-Engine hat, kann sich einen ersten Eindruck auf der offiziellen Jade-Seite verschaffen. Die .jade-Datei muss mit einem Unterstrich beginnen und den Ordnernamen tragen. Hier können wir jetzt die Informationen, die wir in der _data.json hinterlegt haben, auslesen und verarbeiten. In der dazugehören SCSS-Datei können wir unser Kapitel gestalterisch anpassen.

Wollen wir beispielsweise ein neues Kapitel in unserem Styleguide anlegen, erstellen wir im Ordner modules einen Unterordner mit dem Namen 9_beispiel. In diesem Ordner hinterlegen wir die Dateien _data.json, _beispiel.jade und jade.scss. Also Vorlage können wir natürlich die Demo-Dateien nutzen und bearbeiten. Wir können jederzeit unseren localhost:9241 aufrufen und uns eine Preview unseres Styleguides anschauen.

Styleguides: Das Exportieren

Sobald wir den vollständigen Ordner modules mit unseren Gestaltungsrichtlinien gefüllt haben, müssen wir ihn nur noch exportieren. Natürlich können wir diesen lokalen Server, der direkt die .jade, .scss und alle weitere Funktionen ausführt, auch in unserem lokalen Netzwerk verteilen oder die Installation auf einem externen Server ausführen, um den Styleguide direkt bereitzustellen.

In den meisten Fällen bietet es sich aber an, die Dateien in ihre Ursprungsform umzuwandeln – HTML und CSS. Das bringt mehr Flexibilität, da wir keine Server oder Programm-Abhängigkeiten mehr benötigen und wir diesen Styleguide auf jeder erdenklichen Plattform verteilen können.

Der fertige Styleguide-Export mit dem www Ordner. (Screenshot: Mac)
Der fertige Styleguide-Export mit dem www Ordner. (Screenshot: Mac)

Um unser erstelltes Projekt zu exportieren, navigieren wir uns wieder über die Kommandozeile oder Terminal in den Ordner styleguide-master und geben folgende Befehle ein:

cd styleguide/structure/_node-files && node write-date-exec.js
cd ../../.. && harp compile

Alle Mac-Benutzer können in diesem Fall natürlich wieder die beiliegende Compile.app ausführen, um diese Schritte zu vereinfachen. Somit sollten wir jetzt einen neuen www-Ordner in unserem styleguide-master besitzen. In diesem Ordner befindet sich der fertige Export. Dieser Ordner ist unabhängig von allen Programmen und Software, es wird nur noch ein Browser benötigt, um den Styleguide aufzurufen. Die pragmatischste Lösung ist sicher, diese Dateien auf einem Webserver bereitzustellen. Sollten wir Änderungen durchführen müssen, bearbeiten wir nur das erstellte Projekt und exportieren es erneut.

Styleguides: Das Fazit

Mit den Styleguides von HUGE können wir schnell und einheitliche Styleguides erstellen. Mit ein paar Kenntnissen in Jade und SCSS können wir professionelle Styleguides erstellen, ohne das Rad neu erfinden zu müssen. Natürlich benötigt es Ehrgeiz sich von Lösungen wie einem PDF-Styleguide zu verabschieden. Doch sollte die Gewohnheit überwunden sein, kann nichts mehr schief gehen.

Wie erstellt ihr eure Styleguides? Und habt ihr schon unseren Artikel „Styleguides als PDF waren gestern: Frontify stellt praktisches Online-Tool vor“ gelesen?

]]>
Jonathan Schneider
„Stoppt die Entwicklung des Web! Zuviel Innovation schadet nur“ http://t3n.de/news/web-innovation-637185/ 2015-09-05T07:31:25Z
Es war die Design-Diskussion des Sommers. Und auch wenn sich die Aufregung mittlerweile gelegt hat, sind die aufgeworfenen Fragen noch lange nicht beantwortet. Bekommt das Web zu viel Innovation?

Es war die Design-Diskussion des Sommers. Und auch wenn sich die Aufregung mittlerweile gelegt hat, sind die aufgeworfenen Fragen noch lange nicht beantwortet. Bekommt das Web zu viel Innovation? Brauchen wir einen Feature-Stopp für Browser? Wäre ein zwölfmonatiges Moratorium für die Implementation neuer Funktionen ein taugliches Mittel, Webentwicklung nachhaltig erfolgreicher zu machen? Oder geht die Entwicklung im Gegenteil viel zu langsam vonstatten und könnte statt einer Bremse ein weiteres Gaspedal gebrauchen? Diskutiert mit ...

Stoppt das Web! Oder doch nicht? (Bilder: Pixabay / Montage: t3n)
Stoppt das Web! Oder doch nicht? (Grafik: Pixabay / Montage: t3n)

Peter-Paul Koch: „Browserhersteller, stoppt den Einbau neuer Features für die nächsten 12 Monate“

Peter-Paul Koch, in der Branche wohlbekannt als ppk, ist ein Frontend-Entwickler aus den Niederlanden, der ein Pionier der Entwicklung für mobile Geräte ist und mittlerweile seit mehr als einer halben Dekade zu den Spezialisten auf diesem Gebiet gehört. Was er zu sagen hat, wird nicht nur auf der unteren Ebene der Web-Schrauberei gehört, sondern hat durchaus Einfluss bis in die Leitungsebenen der Industrie.

Peter-Paul Koch: „Stop pushing the web forwardl.“

Ende Juli platzte ppk der Kragen. In einem umfangreichen Beitrag auf seinem QuirksBlog rief er die Browserhersteller auf, mit der Implementation neuer Features in ihre Software aufzuhören. „Stop pushing the web forward“, forderte er.

In seiner Analyse des Status Quo kommt ppk zu dem Schluss, dass die Geschwindigkeit, mit der Browser neue Webtechnologien implementieren, halsbrecherisch ist. Schon jetzt sei es nicht mehr möglich, den Überblick zu behalten, welcher Browser welches Feature wie unterstützt. Ebenso wenig sei es möglich, im Kopf zu behalten, welche Features es überhaupt gibt, von der Umsetzung mal ganz abgesehen. Und selbst bei den Features, von denen man weiß, dass es sie gibt und von denen man ebenfalls weiß, wie man sie umsetzen muss, wisse man vielfach nicht, welche Polyfills oder anderen Tools man zum Einsatz bringen muss, um wiederum für eine konsistente Nutzererfahrung über alle relevanten Browser zu sorgen. Die Situation sei, bedingt durch eine massive Überkomplexität, nicht mehr im Griff zu behalten.

Für die Zukunft sieht ppk eine weitere Verschlechterung voraus, da das Web durch die wachsende Konkurrenz seitens nativer Apps immer stärker in Richtung app-ähnlicher Präsentation gehe. Es würden Features favorisiert, die das Verhalten von Web-Apps dem Verhalten nativer Apps angleichen können, damit der Endnutzer keinen Grund mehr hat, native Apps den Web-Ablegern vorzuziehen.

Aus Sicht von ppk ist diese Entwicklung unnötig. Eine Annäherung der Nutzererfahrung von Web-Apps und nativen Apps hält er für nicht zielführend. Die daraus entstehende zusätzliche Komplexität der mobilen Websites sei komplett vermeidbar.

Stattdessen sollten sich die Browser-Hersteller einem freiwilligen Moratorium unterziehen und für einen Zeitraum von zwölf Monaten nur schon existierende Features nachhaltig in ihre Produkte implementieren. Alle neuen Ideen solle man um ein Jahr verschieben. So hätten nicht nur die Browserhersteller Zeit, die Integration aktueller Features sauber vorzunehmen. Vielmehr hätten auch die Webentwickler Zeit, sich endlich mal wieder zuverlässig auf den Stand der Technik zu bringen. Derzeit gleiche der fortdauernde Lernprozess eines Webentwicklers einem Wettlauf gegen die Zeit. Man erreiche nie den Punkt, an dem man weiß, was es derzeit zu wissen gibt.

Von Blödsinn bis „Ja, aber...“: Die Gegenpositionen

In den Tagen und Wochen nach Veröffentlichung seines Artikels blies ppk der Wind bisweilen heftig ins Gesicht. Bis hin zu persönlichen Anfeindungen ging die Reaktionspalette der teils erbosten Entwicklergemeinde. Ich beschränke mich im Folgenden auf die qualifizierteren Einlassungen zum Thema.

Der deutschsprachige News-Podcast für Webdesigner und -entwickler „Working Draft“ befasste sich in seiner Ausgabe 229 sehr ausführlich mit dem Beitrag ppks. Sehr ergiebig für die Diskussion ist das Gesagte mithin nicht. Man war sich im Wesentlichen eher einig, dass ppk hier eben Blödsinn von sich gegeben habe. Das sei zwar sonst eher nicht seine Art, aber näher beschäftigen müsse man sich mit dem Thema nicht.

Operas Bruce Lawson: „Mobile Apps müssen sich nativen Apps so nah wie möglich anpassen“

Fruchtbarer war da schon die Replik aus dem Hause Opera, die von Bruce Lawson formuliert wurde. Lawson stimmte den Aussagen ppks durchaus in weiten Teilen zu, zog aber andere Schlussfolgerungen.

Opera für Windows (Bild: Opera)
Opera für Windows. (Bild: Opera)

So bestätigt Lawson ppks Eindruck, das mobile Web orientiere sich sehr stark an den Konzepten nativer Apps. Anders als ppk kommt Lawson aber zu dem Schluss, dass diese Ausrichtung nicht etwa unnötig und aufzugeben sei. Vielmehr sei es wichtig, genau diesen Weg fortzusetzen, denn die Kunden, die Nutzer der Websites, würden das Verhalten, die Nutzererfahrung schlichtweg erwarten. Wenn das mobile Web als solches eine Chance haben solle, müsse man dieser Erwartung der Besucher gerecht werden, egal, ob man bestimmte Features als Webentwickler nun für überflüssig halten würde.

Bruce Lawson: „Der Besucher erwartet das Verhalten nativer Apps auch von Web-Apps.“

In den am schnellsten wachsenden Märkten sei es überdies so, dass App-Nutzung nicht dabei sei, mobilen Websites den Rang abzulaufen. Das hat natürlich mit der dort in der Breite vorhandenen Hardware und deren Limitationen zu tun. Hier habe das mobile Web die Chance, auch auf Dauer der wichtigste Informationsgeber zu bleiben, wenn man eben nicht die Geschwindigkeit des technologischen Fortschritts reduziere.

Vielmehr müsse man befürchten, dass man nicht nur Nutzer, sondern vor allem auch Anbieter relevanter Dienste an das native App-Ökosystem verliere, wenn erkennbar würde, dass das Web schlicht nicht mehr mithalten kann oder will.

Generell sind Webstandards nach Lawsons Beobachtung immer darauf ausgerichtet, die Entwicklung zu vereinfachen. Insofern sei jeder Fortschritt in dieser Richtung ein Schritt auf dem Weg zur weiteren Vereinfachung. Ein Innehalten würde der Vereinfachung quasi im Wege stehen. Das sei doch eine Situation, die man nicht ernsthaft wollen könne.

Einen der wesentlichen Vorteile mobiler Web-Apps im Vergleich zu ihren nativen Alternativen sieht Lawson in der unmittelbaren Verfügbarkeit. Sobald der Entwickler eine Änderung an der Web-App live stellt, ist sie für alle Verwender der mobilen Website unmittelbar aktiv. Das sieht in der Tat in den App-Stores dieser Welt anders aus. Hier kann es Stunden, Tage, manchmal Wochen dauern, bis ein vom Entwickler längst frei gegebenes Update tatsächlich den Verwender erreicht.

Schlussendlich sieht Lawson gerade Opera besonders von etwa eintretendem Stillstand gefährdet. Immerhin verkaufe Opera weder ein Betriebssystem, noch ein mobiles Device und sei daher viel stärker an einem schnellen Wachstum der Plattform Internet als solcher interessiert als es andere Hersteller, wie etwa Apple, sein müssten.

Googles Jake Archibald: „Stillstand ist Rückschritt“

Entwickler und Google-Chrome-Evangelist Jake Archibald hat natürlich eine ebenfalls vollkommen konträre Sicht der Dinge. Wenn man weiß, dass es gerade Chrome ist, der mit der höchsten Geschwindigkeit neue Features implementiert und bedenkt, dass ein Funktionsmonster von Browser die einzige Chance für den Absatz der sich immer noch recht bescheiden verkaufenden Chromebooks ist, sollte das nicht weiter überraschen. Tatsächlich bereichert Archibald die Diskussion nur mäßig.

Ein Chromebook: ohne Chrome weitgehend wertlos. (Bild: Pixabay)
Ein Chromebook: ohne Chrome weitgehend wertlos. (Bild: Pixabay)

Zwar sieht er im Vergleich zu den 90ern ebenfalls eine steigende Komplexität der über das Web möglichen Lösungen. Diese seien dabei jedoch einfacher umzusetzen als früher. Per Saldo bliebe also eine Vereinfachung.

Zudem sei es nicht erforderlich, alle Webtechnologien nebst konkreter Einsatzstrategien immer parat zu haben. Es reiche doch in den meisten Fällen, wenn man wisse, dass es generell eine Lösung für das Problem X gebe. Im Bedarfsfall, also in einem konkreten Projekt, könne man sich immerhin noch näher damit befassen. Alternativ mag es jemanden im Team geben, der für das entsprechende Thema der Experte sei. Nicht alles wissen zu können, sei kein Krisenfall für das Web, sondern der Normalzustand und könne als solcher nicht als Begründung für einen Stillstand gereichen.

Jake Archibald: „Stillstand ist Rückschritt.“

Auch Archibald sieht native Apps als Innovationstreiber und will, dass das mobile Web möglichst Schritt halten kann. Er erkennt dabei aber nicht nur die Vorteile der nativen Entwicklung, sondern hält auch ihre negative Aspekte für fruchtbare Anregungen auf dem Weg zur Fortentwicklung der Webplattform. Nur mit dem mobilen Web sei ein offenes, für jedermann frei zugängliches Informationssystem überhaupt zu gewährleisten.

Nicolas Bevacqua: „Das Web an sich trägt keine Schuld“

Der argentinische Entwickler Nicolas Bevacqua bringt einen weiteren Gesichtspunkt in die Diskussion ein. Nach seiner Auffassung ist es nicht die Technologie als solche, die zu suboptimalen Nutzererfahrungen und übermäßigem Gebrauch potenziell überflüssiger Tools führt. Er gibt den Entwicklern selbst die Schuld.

Beispielhaft stellt er Facebooks neue Funktion der „Instant Articles“ in den Fokus seiner Betrachtungen. Hier hinterlegen Medienanbieter Beiträge in einem von Facebook definierten Datenformat so, dass sie auf Facebook ansprechend dargestellt werden können. Auf diese Weise sei die Nutzererfahrung am Ende besser, als wenn die Besucher die Websites der Medienanbieter selbst besuchen würden, denn diese seien bepackt mit überflüssigem Gewicht.

Bis zu rund 270 Requests für die Darstellung einer einzigen Seite seien erforderlich, die meisten davon ohne Bezug zum eigentlichen Inhalt. Mehr als ein Dutzend Analytics-Provider würden bespielt, Ad-Server kontaktiert und haufenweise Skripte gezogen. Bevacqua ruft dazu auf, sich über diese Verfahrensweisen Gedanken zu machen, bevor man die Entwicklungsgeschwindigkeit des Web kritisiert. Sauber umgesetzte, auf die Inhalte fokussierte Seiten seien mit heutigen Technologien einfach und schnell zu realisieren. Das Problem sei nicht bei den Entwicklern und ihren Technologien zu suchen, sondern in den rein betriebswirtschaftlich orientierten übrigen Unternehmensbereichen.

Und ganz am Rande gebe es natürlich Themen, in denen das Web dringenden Nachbesserungsbedarf habe. Es gebe bekannte Mängel, die schon seit Urzeiten bestünden und die einfach nicht ordentlich gelöst würden. Diese würden aber ein Moratorium keinesfalls rechtfertigen.

]]>
Dieter Petereit
Schriftarten vergleichen: Mit dem Font-Flame-Tool geht das jetzt super schnell http://t3n.de/news/font-flame-tool-schriftarten-637269/ 2015-09-04T17:47:24Z
Mit Font-Flame bekommen Designer ein nützliches Tool an die Hand, um Schriftarten zu vergleichen. Das steckt dahinter.

Mit Font-Flame bekommen Designer ein nützliches Tool an die Hand, um Schriftarten zu vergleichen. Das steckt dahinter.

Die richtig Schrift für das eigene Web-Projekt zu finden, kann etwas Zeit verschlingen – vor allem, wenn die Kombination aus zwei Schriftarten das Ziel ist. Die Suche im Ordner kann dann schon etwas nerven. Einfacher geht das mit einem neuen Tool, das wir euch vorstellen wollen: „Font Flame“.

Font Flame: Verschiedene Schriftarten gegenüberstellen

Geliebt Schriftarten - doch welche ist jetzt die beste? (Screenshot: Frontflame.com)
Geliebt Schriftarten - doch welche ist jetzt die beste? (Screenshot: Fontflame.com)

Auf der gleichnamigen Webseite FontFlame.com bekommt ihr jeweils zwei Schriftarten in schwarzer Farbe auf weißem Untergrund präsentiert. Anwender können die Beispiele für sich bewerten: „Hate“ und „Love“ stehen zur Verfügung. Typo-Kombinationen, die mit „Love“ bewertet wurden, finden sich anschließend im „My-Type“-Bereich. Dort könnt ihr sie schlussendlich ein zweites Mal abgleichen.

Sobald ihr euch entschieden habt, braucht ihr nur auf die Namen der Schriftarten klicken und sie euch runterladen. Nach dem Klick werdet ihr direkt in die kostenlose Google-Fonts-Library weitergeleitet. Ebenfalls hilfreich ist die Möglichkeit, in die Karten einen eigenen Text einzugeben. In einigen Fällen steht der ja schon fest, bevor es an die Suche der passenden Schriftart geht.

Font-Flame will Design-Influencer ins Boot holen

Font-Flame bietet auch einen Curated-Bereich an. (FontFlame.com)
Font-Flame bietet auch einen Curated-Bereich an. (FontFlame.com)

Font Flame ist noch ziemlich jung, doch obwohl der norwegische Designer Jan Wennesland das Projekt erst vor kurzem an den Start gebracht hat, hat er schon einiges an Aufmerksamkeit bekommen – beispielsweise auf Product Hunt.

Und Wennesland will weiter daran feilen. Ein wesentliches Herzstück der Seite soll ein Bereich sein, in dem Influencer ihre liebsten Kombinationen kuratieren können. Den Anfang macht derzeit Jeremiah Shoaf alias @Typewolf.

]]>
Andreas Weck
HORIZONT-Ranking: Das sind die 25 größten Designagenturen http://t3n.de/news/horizont-ranking-25-designagenturen-636939/ 2015-09-04T12:38:59Z
Wenn eine deutsche Designagentur derzeit einen Lauf hat, dann ist es wohl Meta Design. Im exklusiv von HORIZONT erhobenen Ranking der umsatzstärksten CD/CI-Agenturen im Jahr 2014 verteidigt der in …

Wenn eine deutsche Designagentur derzeit einen Lauf hat, dann ist es wohl Meta Design. Im exklusiv von HORIZONT erhobenen Ranking der umsatzstärksten CD/CI-Agenturen im Jahr 2014 verteidigt der in Berlin und Düsseldorf ansässige Dienstleister den Spitzenplatz.

Kann sich freuen: Arne Bremenfeld, Vorstand bei Meta Design (Foto: Meta Design)
Kann sich freuen: Arne Bremenfeld, Vorstand bei Meta Design (Foto: Meta Design)

Meta Design gibt unter den Designagenturen den Ton an

Mit einem Honorarumsatz in Höhe von 13,4 Millionen Euro kann sich Meta Design deutlich von den Verfolgern KMS Team und KMS Blackspace (10,6 Millionen Euro), Mutabor (7,15 Millionen Euro) und Strichpunkt (7 Millionen Euro) absetzen. Unter dem Strich zeigt sich, dass die Zuversicht in den Etagen deutscher Branding-Agenturen zurückgekehrt ist. Eine überraschend gute Auftragslage, die internationale Zugkraft deutschen Designs und der schwache Euro sorgen nach Jahren der Flaute für Zuversicht. Viele sprechen bereits von Trendwende.

Agentur, Hauptsitz und deutsche StandorteHonorarumsatz CD/CI 2014 in Mio. € 
Meta Design, Berlin, Düsseldorf13,40
KMS Team und KMS Blackspace, München10,60
Mutabor Design, Hamburg7,15
Strichpunkt, Stuttgart, Berlin7,00
Martin et Karczinski, München5,25
Kochan & Partner, München, Berlin4,92
Eden Spiekermann, Berlin, Stuttgart4,60
Wir Design, Braunschweig, Berlin4,45
Syndicate, Hamburg4,34
DMC Group, München, Düsseldorf4,20
Fuenfwerken, Wiesbaden, Berlin4,06
HW Design, München (vormals Häfelinger + Wagner)3,96
Realgestalt, Berlin3,63
Jung von Matt und Brand Identity, Hamburg3,30
Ligalux, Hamburg, München3,00
Zeichen & Wunder, München3,00
Moskito, Bremen, Berlin, Hamburg2,40
Heine, Lenz, Zizka, Frankfurt am Main, Berlin2,30
Independent Medien-Design, München2,18
Gerasch Communication, Darmstadt2,00
GfG Gruppe für Gestaltung, Bremen1,70
Incorporate, Berlin1,60
Kopfkunst, Münster, Bremen1,59
Kleiner und Boldt, Berlin1,21
Stan Hema, Berlin1,07

Die Zahlen des Design-Rankings, das HORIZONT zum 17. Mal exklusiv erhoben hat, belegen: Einbußen beschränken sich auf wenige Anbieter. Spitzenreiter Meta Design konnte in seinen Kernkompetenzen Corporate Design (CD) und Corporate Identity (CI) ein Plus von knapp 10 Prozent verbuchen. Zusammengenommen haben die 25 größten deutschen Branding-Agenturen in ihren Geschäftsfeldern CD und CI einen Honorarumsatz von 106 Millionen Euro erzielt. Das entspricht einem Zuwachs von 2 Prozent. Sämtliche Geschäftsbereiche eingeschlossen, erreichen die Top-25-Agenturen ein Gross Income von 130 Millionen Euro.

Jochen Rädeker (Screenshot: Horizont)
Jochen Rädeker (Screenshot: Horizont)

Das Ranking zeigt zudem: Langfristige Kundenbeziehungen sind im Branding Business nicht mehr die Regel. Allenthalben werden Etats gesplittet, die Projekte stets kleinteiliger. Für Audi etwa arbeiten derzeit drei CD-Agenturen. Einst betreute allein Meta Design den Ingolstädter Autobauer in allen Fragen des Corporate Design – vom Logo bis zum Manual.

Die Stimmung bei vielen Agenturchefs hat sich seit 2014 aufgehellt. Nicht nur bei Meta Design. Große Aufgaben warten. Vor allem die digitale Transformation von Marken ist das Thema. Sie beschäftigt Agenturen und Unternehmen gleichermaßen, wie Strichpunkt-Chef Jochen Rädeker erläutert: „Digital Branding und Storytelling sind weiter auf dem Vormarsch und davon profitieren wir Corporate Designer nachhaltig.“

]]>
HORIZONT Online
Der neue Apple-Campus von oben: Drohnen-Video zeigt Aufnahmen von der Mega-Baustelle http://t3n.de/news/apple-campus-von-oben-drohnen-video-637124/ 2015-09-04T09:45:07Z
Vier Minuten in der Luft über dem neuen Apple-Campus. Seit dem Baubeginn hat sich viel getan. Mit einer Drohne zeigt ein Amerikaner monatlich den Baufortschritt des Riesen-Bauprojekts.

Vier Minuten in der Luft über dem neuen Apple-Campus. Seit dem Baubeginn hat sich viel getan. Mit einer Drohne zeigt ein Amerikaner monatlich den Baufortschritt des Riesen-Bauprojekts.

Nachdem noch Steve Jobs 2009 den neuen Apple-Campus angekündigt hatte und viel Zeit mit der Planung ins Land gezogen ist, sind die Bauarbeiten seit einigen Monaten im vollen Gange. Wie so eine Mega-Baustelle aussieht, zeigen die monatlichen Drohnen-Videos von Duncan Sinfield.

Ein Rundflug über den neuen Apple-Campus: So sieht die Baustelle aktuell aus

12.000 Personen soll der neue Apple-Campus beherbergen. Der Bau, der einen Großteil seiner Energie über Solarflächen auf dem Dach bekommen soll, ist ein Mega-Bauprojekt mitten in Cupertino. Neben dem großen runden Gebäude sollen etwa 1.000 Bäume ihren Platz auf dem Gelände finden. Vor zwei Jahren gab es detaillierte Modelle des Baus und im letzten Jahr hat der Stadtrat von Cupertino den Bau des Apple-Campus 2 genehmigt.

Duncan Sinfield fliegt mit seiner DJI Inspire 1 jeden Monat einmal über die Baustelle und hält die Fortschritte fest. Spannend sind dabei auch die Vergleiche, die er zu den jeweiligen Vormonaten zieht und mit Bildern belegt. Das aktuelle Video aus dem September zeigt knapp vier Minuten den Campus, von den Tiefgaragen über das Event-Center bis zum Bürobau.

Fertiggestellt sein soll der neue Apple-Campus 2016, bis dahin wird uns Duncan Sinfield sicher noch viele spannende Videos vom Fortschritt zeigen, der bis dahin noch passieren muss, damit alle Apple-Mitarbeiter das Gebäude beziehen können.

]]>
Johannes Schuba
Jeden Tag ein UI-Element: Designer legt 100-Tage-Sprint hin http://t3n.de/news/tag-ui-element-designer-legt-637041/ 2015-09-04T08:52:25Z
Kreativität passiert nicht auf Knopfdruck. Man muss sie ausleben, wenn sie einen überkommt. Paul Flavius Nechita hat gerade so einen Moment – und der dauert ziemlich lange: Er designt jeden Tag …

Kreativität passiert nicht auf Knopfdruck. Man muss sie ausleben, wenn sie einen überkommt. Paul Flavius Nechita hat gerade so einen Moment – und der dauert ziemlich lange: Er designt jeden Tag ein UI-Element.

Ist es Eigen-PR, ist es Selbstgeißelung oder doch nur ein unglaublicher Kreativitätsschub, der offen ausgelebt wird? So genau wissen wir es nicht. Vermutlich spielt das alles ein wenig mit rein. Wenn ein Designer wie Paul Flavius Nechita sich dazu entscheidet, 100 Tage lang 100 UI-Elemente zu kreieren, ist das in jedem Fall sehenswert – und zwar nicht nur für Kenner seines Fachs. Selbst Laien erahnen, dass da eine aufregende Leistung hinter steckt.

100 Tage, 100 UI-Elemente: Vom Beme-iOS-Konzept bis zum True-Detective-Video-Player

Paul Flavius Nechita präsentiert  jeden Tag ein neues UI-Element. (Screenshot: 100daysui.com)
Paul Flavius Nechita präsentiert jeden Tag ein neues UI-Element. (Screenshot: 100daysui.com)

Hauptberuflich arbeitet Nechita für Bitdefender, doch seit Anfang Sommer macht der Rumäne mit dem Nebenprojekt von sich reden. Am 29. Juni 2015 veröffentlicht er sein erstes Stück, ein schlichtes Login-Formular in blau-schwarzer Optik mit Foto-Hintergrund bildet den Startpunkt seines Sprints. Seitdem ist einiges passiert. Inzwischen sind 67 Elemente entstanden. Heute müsste also planmäßig das 68. erscheinen. Ob er abliefert?

Nechita ist nicht nur bezüglich seiner Designs, sondern auch thematisch kreativ. In seinem Portfolio finden sich unter anderem Benutzeroberflächen für Spracheinstellungen, ein Konzept für die iOS-App von Beme oder eine Idee für einen Videoplayer, der True Detective abspielt. Ein Talent, keine Frage. Er wird sicher abliefern.

Der Ort des Geschehens ist übrigens 100daysui.com. Die Webseite ist in schlichtem Card-Style gehalten, ein Vorschaubild des jeweiligen Tagwerkes führt per Klick auf Dribble.com. Dort werden seine UI-Designs von der Community bewertet, kommentiert und auf die Machbarkeit und mögliche Probleme seiner Ideen überprüft. An Interaktionen mangelt es nicht.

200 Logos in 2 Monaten – auch das gibt's!

Jeden Tag ein UI-Element – die Idee ist nicht neu. Natürlich wissen wir das. Kürzlich hat beispielsweise der Logo-Designer Mats-Peter Forss einen ähnlichen Sprint hingelegt und 200 Logos in zwei Monaten erstellt. Einige seiner Ergebnisse hat er sogar als kostenlose Templates für Interessierte ins Web geladen. Unseren Artikel dazu findet ihr hier.

]]>
Andreas Weck
13 schicke HTML- und WordPress-Templates für deine Webvisitenkarte http://t3n.de/news/webvisitenkarte-template-html-589561/ 2015-09-03T13:30:17Z
Nicht jeder braucht gleich eine eigene umfangreiche Homepage. Den meisten fehlen dafür auch schlicht die Inhalte. Aber für viele Webworker empfiehlt es sich, zumindest eine Webvisitenkarte …

Nicht jeder braucht gleich eine eigene umfangreiche Homepage. Den meisten fehlen dafür auch schlicht die Inhalte. Aber für viele Webworker empfiehlt es sich, zumindest eine Webvisitenkarte anzulegen, die die elementaren Informationen, wie Kontaktdaten, Foto und Tätigkeitsfeld beinhaltet. Dafür gibt es haufenweise Templates, die unkompliziert angepasst und eingerichtet werden können. Dreizehn davon stellen wir hier vor:

1. MetroMe

Bildschirmfoto 2015-09-03 um 12.27.21
(Screenshot: Themeforest)
Bildschirmfoto 2015-09-03 um 12.28.38
(Screenshot: Themeforest)

Bei MetroMe lassen sich alle Farben und Icons anpassen. Das Template kommt mit 28 Hintergründen und beschränkt sich auf die wesentlichen Informationen, die kompakt dargestellt werden. Das Template kostet neun US-Dollar.

Mehr Informationen / Live-Demo

2. Frittata

Bildschirmfoto 2015-09-03 um 11.39.31
(Screenshot: Themeforest)
Bildschirmfoto 2015-09-03 um 11.41.24
(Screenshot: Themeforest)

Das Frittata-Template hat zwar eine Blog- und Portfolio-Seite, bietet sich aber auch perfekt als Webvisitenkarte an. Die Übersicht der Kontaktmöglichkeiten, Skills und Arbeitsproben werden in Kacheloptik dargestellt. Das Template gibts für 16 US-Dollar.

Mehr Informationen / Live-Demo

3. FlexyVcard-Responsive Vcard Template

templates wordpress webvisitenkarte
(Screenshot: Themeforest)

Das Responsive-Design-Template ist kompatibel mit Bootstrap, hat Anpassungsmöglichkeiten bei der Farbauswahl, den Hintergründen, Seitenanimationen und beim Seitenaufbau. Es beinhaltet einen Blogbereich, unterstützt Google Fonts und hat ein integriertes Kontaktformular.

Mehr Informationen / Demo

4. Strokes

webvisitenkarten template vcard 1
(Screenshot: Themeforest)

Stroke ist ein Single-Page-Template für eine Webvisitenkarte. Hier kannst du einen About-me-Text unterbringen, sowie ein kleines Portfolio, deine Socialbuttons und ein Kontaktformular. Es gibt drei Farbvarianten, zwischen denen man wählen kann. Das Template kostet 10 US-Dollar.

Mehr Informationen / Live-Demo

 5. Who I am – Webvisitenkarte/ Portfolio

wordpress template webvisistenkarte vcard
(Screenshot: Themeforest)
template wordpress vcard webvisistenkarte
(Screenshot: Themeforest)

Das „Who I Am“-Theme ist sowohl als WordPress-Theme, als auch als HTML-Version erhältlich. Der Onepager eignet sich nicht nur als reduzierte vCard, sondern auch als umfangreiche Portfolioseite, wenn man alle Features ausnutzt. Es gibt eine helle und eine dunkle Variante.

Mehr Informationen / Demo

6. My Story

vcard template
(Screenshot: Themeforest)

Das vCard-Template „My Story“ hat vier Ansichten: Kurzvorstellung, Lebenslauf, Erfahrung und Kontakt. Es kostet 13 US-Dollar.

Mehr Informationen / Live-Demo 

7. Gentleman

v card v card 2
(Screenshot: Themeforest)

Gentleman ist ein minimalistisches HTML5-Template im Responsive Design. Es bietet Platz für einen ausführliches Lebenslauf, Testimonials und ein Kontaktformular. Das Template kostet 13 US-Dollar.

Mehr Informationen / Live-Demo

 8. Premium Layers: HTML-vCard & Resume Template

wordpress theme template vcard webvisistenkarte
(Screenshot: Themeforest)

Das Template ist etwas reduzierter, hat aber alles, was man von einer Webvisitenkarte erwartet. Es besteht aus acht Masken, auf denen du Farben und Schriften anpassen kannst. Es ist ebenfalls responsiv. Das Template unterstützt Font Awesome Icons.

Mehr Informationen / Demo

9. The Compass – klassische Webvisitenkarte

vcard templates webvisistenkarten wordpress html
(Screenshot: Themeforest)
wordpress templates vcard webvisitenkarten
(Screenshot: Themeforest)

Compass ist eine sehr reduzierte Webvisitenkarte (WordPress/ HTML), ebenfalls ein Onepager. Es stehen drei Farbsets zur Verfügung und zwei Optionen für Animationen. Font Awesome Ions und Google Fonts werden unterstützt.

Mehr Informationen / Demo

10. Libero – Responsive vCard Portfolio Template

wordpress html template vcard webvisistenkarte
(Screenshot: Themeforest)

Libero ist ein One-Page-HTML-Template. 20 Farbanpassungen sind möglich und du kannst zwischen einer hellen und einer dunklen Version wählen. Schöne Features: Skills-Box und Google-Maps-Addon für die Kontaktinformationen.

Mehr Informationen/ Demo

11. Typbig

Bildschirmfoto 2015-09-03 um 13.03.49
(Screenshot: Themeforest)

Typbig ist ein Template im Responsive-Webdesign, das druckoptimert ist – so können Interessenten sich deinen Lebenslauf auf der Seite direkt ausdrucken. Das Template kostet zehn US-Dollar.

Mehr Informationen / Live-Demo

12. Motion

Webvisitenkarte vcard theme html wordpress template
(Screenshot: Themeforest)

Motion ist ein responsives HTML5-/CSS3-Template. Gewählt werden kann zwischen zehn Farben, mit denen Links, Buttons und das Menü angepasst werden kann. Es stehen acht Hintergründe zur Auswahl.

Mehr Informationen/ Demo

13. Bookcard (WordPress/ HTML)

Bildschirmfoto 2015-01-21 um 13.03.38 Bildschirmfoto 2015-01-21 um 13.04.01
(Screenshot: Themeforest)

Bookcard gibt es sowohl als Responsive-WordPress- als auch als HTML-Template. Es besteht aus der Coverseite und drei scrollbaren Seiten im inneren des Folders. Anpassungsmöglichkeiten gibt es bei der Farbe, beim Style und für die Animationen. Zudem ist es mit neun Dollar relativ günstig.

Mehr Informationen/ Demo

Eine Webvisitenkarte reicht euch nicht? Dann ist vielleicht hier was für euch dabei: 10 WordPress-Themes für dein Portfolio

Du möchtest so wenig wie möglich selbst machen? Dann lies auch: Drei Dienste für schicke und simple Web-Visitenkarten

Dies ist eine Überarbeitung eines Artikels vom 3. September 2015.

]]>
Melanie Petersen
UI vs UX: „So sieht es aus“ vs. „So fühlt es sich an“ http://t3n.de/news/ui-ux-sieht-vs-fuehlt-635734/ 2015-09-03T08:42:59Z
In einer Welt voller ungeschützter Berufsbezeichnungen fliegen falsch genutzte Fachwörter und Buzzwords durch Meetings und das Web. So wird beispielsweise UI („User-Interface“) mit dem …

In einer Welt voller ungeschützter Berufsbezeichnungen fliegen falsch genutzte Fachwörter und Buzzwords durch Meetings und das Web. So wird beispielsweise UI („User-Interface“) mit dem Anwendererlebnis UX, der „User-Experience“ gleichgesetzt. Wo der Unterschied liegt, lest ihr in diesem Artikel. Sowohl das UI als auch die UX sind entscheidende Faktoren dafür, wie eine Website, ein Produkt oder eine App beim Nutzer wahrgenommen wird, und – in weiterer Folge – ob die Website et cetera den angestrebten Zweck erfüllt.

Mittlerweile wird UX aber dermaßen inflationär eingesetzt, dass man sich als Spezialist schon hüten muss, es in den Mund zu nehmen, um nicht wie der letzte Laberkopf dazustehen. Aber was ist der Unterschied, und warum ist das Anwendererlebnis so wichtig?

UI-Design: So sieht etwas aus

Auf den Punkt: Das User-Interface-Design beschäftigt sich mit der Gestaltung der Oberfläche (dem Interface) einer App, einer Website oder deinem Lieblingsprogramm für Tabellen-Kalkulationen.

Ein UI-Designer wird häufig mit Navigations-Leisten, Sidebars, Pagina, Icons und Eingabe-Feldern zu tun haben. Er kümmert sich um die Fassade des Hauses, welche Fenster genutzt werden, wie die Türen aussehen und welcher Fußboden verlegt werden soll.

Form follows Function

Dabei ist UI-Design nicht so zu verstehen, dass es dazu dient, eine Oberfläche „schön“ zu machen. „Form Follows Function“ ist die Devise: Ein Interface wird schön durch gelungene Benutzbarkeit. Dass sich UI-Design somit rudimentär mit der Usability beziehungsweise der Software-Ergonomie beschäftig, ist nur logisch. Ästhetik bringt nichts, wenn das Interface nicht gut zu bedienen ist.

Kurzum: Wie sieht etwas aus.

website
Design-Prozesse sind iterativ – egal ob für UX- oder UI-Design. (Foto: © Rawpixel - Fotolia.com)

UX-Design: So fühlt sich etwas an

Das Anwendererlebnis ist eher strategisch ausgelegt. Wie fühlt ich die Website, das Produkt oder die App bei der Nutzung an?

Ein gutes Beispiel für gute Anwendererlebnisse ist Apple – es gibt kaum frustrierende Momente bei der Nutzung von Geräten und Software. Als ich vor Jahren zu Apple wechselte, waren meine größten Probleme mit Microsoft-Produkten der Wartungsaufwand und die ewigen Bluescreens des Betriebssystems. Bei Apple hatte ich beides nicht. Ich konnte mich auf meine eigentliche Arbeit konzentrieren. Inzwischen hat sich meine Meinung zu Apple aber geändert.

Das Anwendererlebnis hat somit auch einen Bezug zur Informations-Architektur – also wie Informationen beispielsweise auf einer Website, dargestellt werden können. Anwendungen, die über eine „intuitive“ Bedienung – der vermeintliche Ritterschlag von gutem Design – verfügen, weisen automatisch ein gutes Anwendererlebnis auf – der Nutzer fühlt sich einfach wohl während er das Interface nutzt.

Um auf das oben genannte Beispiel zurück zu kommen: Auf dieser Ebene wird entschieden, ob es sich um ein Hochhaus oder eine Mietwohnug handelt. Ist das innere aufgeräumt, handelt es sich um eine Glas- oder eine Stahl-Beton-Konstruktion, die im Foyer mit einem Springbrunnen einen WOW-Effekt auslösen soll?

Das Anwendererlebnis ist also die Summe von UI-Design, Informations-Architektur, der Nutzung von Heuristiken und von guter Usability. Je besser die einzelnen Teile umgesetzt wurden, desto höher ist das gesamte Anwendererlebnis.

Kurzum: Wie „fühlt“ sich etwas an.

Fazit: Lösungen für Probleme finden

Design löst Probleme – egal ob auf der Ebene des Interfaces oder auf der Ebene des Nutzererlebnisses. Das Ziel von gutem Design ist es nicht, „schöne Kunst“ herzustellen, sondern praktische Antworten auf virtuelle (Kommunikations-)Probleme zwischen Nutzer und der digitalen Welt zu finden.

Wie löst ihr Design-Probleme?

]]>
Mario Janschitz
Klassiker des Logo-Designs: Kickstarter-Kampagne lässt altes Grafikhandbuch der NASA wieder aufleben http://t3n.de/news/nasa-design-logodesign-636220/ 2015-09-02T12:01:45Z
Das „NASA Graphics Standards Manual“ war der Grundpfeiler für das Design der amerikanischen Raumfahrtbehörde zwischen 1974 und 1992. Jetzt könnt ihr einen Nachdruck des Buches auf Kickstarter …

Das „NASA Graphics Standards Manual“ war der Grundpfeiler für das der amerikanischen Raumfahrtbehörde zwischen 1974 und 1992. Jetzt könnt ihr einen Nachdruck des Buches auf erwerben.

NASA: Dieses Logo nutzte die Weltraumbehörde fast 20 Jahre lang. (Foto: Kickstarter)
NASA: Dieses Logo nutzte die Weltraumbehörde fast 20 Jahre lang. (Foto: Kickstarter)

NASA: Der Weg zum legendären Logo der 1970er

1974 setzte sich auch innerhalb US-amerikanischer Regierungsbehörden die Einstellung durch, dass sie eine klare visuelle Identität besitzen sollten. Dazu wurde mit dem „Federal Graphics Improvement Program“ sogar ein eigenes Programm aus der Taufe gehoben. Im Rahmen dieser Entwicklung bekam auch die NASA ein neues Logo und einen eigenen Design-Leitfaden. Das neue Logo wurde aufgrund seiner Linienführung auch als „der Wurm“ bezeichnet und war deutlich moderner als das vorherige.

Entworfen wurden die heute legendäre Wortmarke und der dazugehörige Design-Leitfaden von der damals noch jungen Agentur Danne & Blackburn. In dem Ringordner wurde ausführlich beschrieben, wie NASA-Materialen auszusehen haben. Von der genutzten Schrift über Farben und ihrer Anwendung auf Kleidung, Flugzeugen, Satelliten und natürlich Raketen wurde alles detailliert in dem Dokument erfasst.

NASA: Designmaterialien landen auf Kickstarter

Nach fast zwei Jahrzehnten mit dem Wurmlogo wurde es 1992 wieder durch das ursprüngliche NASA-Logo ersetzt. Dennoch hat die Arbeit von Richard Danne und Bruce Blackburn auch heute noch ihre Fans. Das beweist nicht zuletzt eine aktuelle Kickstarter-Kampagne, die den Design-Leitfaden von 1974 in Form eines Hardcoverbuches wieder auf den Markt bringen will.

Das ursprüngliche Ziel von 158.000 US-Dollar hat die Kampagne längst hinter sich gelassen. Derzeit steht sie bei über 250.000 US-Dollar und die Summe dürfte bis zum Ende der Kampagne am fünften Oktober 2015 noch weiter steigen. Wer sich ebenfalls dafür interessiert, kann das Buch auf Kickstarter für 79 US-Dollar bestellen. Ausgeliefert werden soll es im März 2016.

Ebenfalls interessant in diesem Zusammenhang ist unser Artikel „Houston, wir haben euren Quellcode: NASA veröffentlicht 1.000 Programme unter Open-Source-Lizenz“.

via mashable.com

]]>
Kim Rixecker
Easter-Eggs im neuen Google-Logo: Die ersten Reaktionen auf das Redesign http://t3n.de/news/google-logo-redesign-636071/ 2015-09-02T08:17:45Z
Ein neues Google-Logo wird vorgestellt und das Netz läuft über. Kaum ein Medium, dass sich nicht zu dem Redesign äußert. Doch wie kommt es an? Wir haben uns umgeguckt.

Ein neues Google-Logo wird vorgestellt und das Netz läuft über. Kaum ein Medium, dass sich nicht zu dem Redesign äußert. Doch wie kommt es an? Wir haben uns umgeguckt.

Das neue Google-Logo: Was sagt das Netz?

Kaum hatte Google gestern in seinem Blog das neue Google-Logo vorgestellt, ging rund um die Welt die Nachricht über den Ticker. Nachdem sich das Unternehmen selbst kürzlich in Alphabet umbenannt hatte, ist jetzt auch das eigentliche Kernprodukt des Konzerns an der Reihe und wird zumindest neu gestaltet.

Zwar ist es nicht das erste Mal, dass Google alias Alphabet das Logo seiner Suchmaschine überarbeitet, doch immer wieder sorgt ein solches Redesign für einigen Aufruhr. Und jetzt? 2015? Wir kommt das neue Google-Logo im Netz an? Was sagen Designer und andere, die sich berufen fühlen, zum neuen Branding?

Easter-Eggs im Google-Logo?

Vielleicht eins vorweg: Das Google-Logo wäre nicht das Google-Logo, wenn der Konzern nicht ein paar Easter-Eggs darin versteckt hätte. Das zumindest haben die Kollegen von The Verge rausgefunden. Doch jetzt zum Design. Auffällig ist bei einem Blick auf Twitter, wie groß für einige Nutzer doch die Ähnlichkeiten zwischen dem neuen Google-Logo und denen anderer Konzerne sind:

Kleine Variante mit 305 Bytes

Doch es gab auch ganz pragmatische Gründe für Google, sein Logo neu zu gestalten, wie Jacob Kastrenakes schreibt: „Es scheint eines der wichtigsten Ziele gewesen zu sein, dass das Logo auch auf kleinen Bildschirmen gut aussieht. Der neue, einfachere Schriftzug ist dafür gemacht, sich besser auf kleine Größen skalieren zu lassen, was dafür sorgt, dass die Wortmarke eindeutiger und besser zu lesen ist. Und: Google hat das Logo so optimiert, dass es auch bei langsamer Internetverbindung schnell lädt, immerhin hat der Konzern eine Variante auf nur 305 Bytes gebracht.

google-logo-redesign

Abseits der Tatsache, dass Google bei seinem neuen Schriftzug auf die Serifen verzichtet und seinen eigenen Font „Product Sans“ eingesetzt hat, ist das neue Logo jedoch vor allem eins: animiert. „Wie viele andere Unternehmen auch, haben sie sich von dem statischen Paper-first-Logo verabschiedet, zugunsten einer dynamischen, animierten Figur, die nur auf Bildschirmen funktioniert“, so Mark Wilson. Auch das ein Statement für ein Unternehmen, das von der Suchmaschine bis hin zum selbstfahrenden Auto extrem vielfältige, aber vor allem digitale Produkte im Portfolio hat. Und, so Wilson weiter: „Sie haben sich für nichts weltbewegendes entschieden [...], aber es ist geschmackvoll, flexibel und vor allem: sehr Google.“ Zwar sind längst nicht alle Reaktionen so positiv, doch insgesamt scheint Google viel richtig gemacht zu haben mit seiner Entscheidung.

Adobe-Designer Khoi Vinh: „Google hat Design begriffen“

Für den Designer Khoi Vinh indessen ist das Google-Logo nur das Ende einer Entwicklung, die der Konzern hinter sich hat: „Das ist ein großartiges Beispiel dafür, dass Google Design schlicht begriffen hat.“ Und auch Derreck Johnson von Slate ist der Meinung: „Es ist unglaublich, was ein paar Serifen weniger ausmachen können.“ Für ihn sei das Logo perfekt für Google. „Ich sehe sechs Buchstaben, die für eine junge, dynamische Kreativität stehen – eine Haltung, auf der Google aufgebaut wurde.“ Und Robert Hof von Forbes schreibt: „Erstaunlicherweise sieht das neue Logo nach mehr als als die üblichen, leeren Design-Übungen.“ Und weiter: „Dieses Logo ist die erste echte digitale Verkörperung dieses Konzerns.“

„Das neue Logo: technisch sauber, überaus praxistauglich, aber seelenlos.“

Auch die Reaktionen deutscher Medien fallen überwiegend positiv aus. Andreas Donath von Golem beispielsweise schreibt: „Im Vergleich zum neuen sieht das alte Logo, das mit leichten Überarbeitungen seit 1999 verwendet wurde, recht altbacken aus, obwohl der angestaubte Schlagschatten schon vor einigen Jahren beseitigt wurde.“ Und Stephan Dörner schreibt in der Welt: „Das Logo verändert sich daher in dieselbe Richtung wie zuletzt die gesamte Designsprache auf Computern: Wie bei den mobilen Betriebssystemen iOS und Android wird das Design ‚flacher‘. Statt feiner Verschnörkelungen und 3D-Anmutung herrschen einfache, flache Formen vor.“ Diese Meinungen werden auch von einer Umfrage des GoogleWatchBlog gestützt. Ein Großteil seiner Leser ist vom neuen Design begeistert.

Beim Designtagebuch hingegen mischen sich auch Zweifel in das Urteil: „Meines Erachtens widerlegt das nun präsentierte Logo eindrücklich, dass Google ein unkonventionelles Unternehmen sei, wie es ihre Gründer gerne betonen“, heißt es dort. Und weiter: „Das neue Logo schaut aus wie das Ergebnis eines von Google-Entwicklern erschaffenen Algorithmus: technisch sauber, überaus praxistauglich, aber seelenlos.“

Und wie fällt euer Urteil aus? Oder hätte euch eins der Logos, die es nicht geschafft haben, besser gefallen?

]]>
Florian Blaschke