Inspirierte Designentscheidungen: Ernest Journal

Wenn Sie längere Zeit im Designbereich arbeiten, ist es natürlich, Gewohnheiten zu bilden. Es ist nicht ungewöhnlich, einem vorhersehbaren Prozess zu folgen oder vertraute Muster zu verwenden. Diese Wiederholung kann fabelhaft für Ihre Produktivität sein, aber wenn jedes Design Ihrem letzten sehr ähnlich sieht, können Sie sich schnell erschöpft fühlen. Neugierig zu bleiben ist das beste Mittel gegen dieses Gefühl.

Nachdem ich achtzehn Jahre lang ein kleines Studio geführt hatte, war meine Müdigkeit überwältigend geworden. Ich fürchtete jede neue E-Mail-Benachrichtigung und jeden Anruf. Kundenprojekte boten zwar Möglichkeiten, kreativ zu sein, aber sie raubten auch meine Energiereserven und jegliche Kapazität, die ich hatte, um Ideen zu entwickeln.

Für jemanden, dessen Geschäft – und Selbstwertgefühl – davon abhängt, was ich mir ausdenke, war das niederschmetternd. Ich gestand meiner Frau, dass ich erschöpft war, nichts mehr zu geben hatte und nicht mehr weitermachen konnte, weil das Geschäft, das wir zusammen begonnen hatten, zur Last geworden war. Ich musste mich aufladen, mich wieder mit meiner Kreativität verbinden und meine Begeisterung für die Arbeit im Design neu entfachen.

Als mir ein Unternehmen in Sydney eine Interimsstelle anbot, habe ich nicht gezögert. Sie schienen freundlich zu sein, die Arbeit war interessant und das Leben in Australien war etwas, was ich erleben wollte. Noch wichtiger ist, dass mir die freie Zeit ermöglichte, Aspekte des Designs zu erforschen, die für mich neu waren, weg von dem erdrückenden Druck, den ich während der Führung meines Unternehmens aufgebaut hatte.

In Australien zu arbeiten bedeutete, kreative Wege zu finden, um die Produkte und Dienstleistungen des Unternehmens zu verkaufen, sowie neue Ansätze für das Design der Produkte selbst zu erforschen. Ich war neugierig, ob Grafikdesign und visuelles Geschichtenerzählen ein digitales Produkt überzeugender machen könnten.

Da ich Bildende Kunst und nicht Kunstrichtung oder Grafikdesign studiert hatte, wusste ich sehr wenig über ihre Prinzipien, berühmten Namen oder ihre Geschichte. Ich war lernbegierig, und da der Druck, mein Geschäft zu führen, nachließ, hatte ich die Energie und die Zeit zum Lernen. Ich gründete eine Zeitschriftensammlung, studierte Bücher über Art Direction und Grafikdesign und entdeckte Art Directors, darunter Alexey Brodovitch, Neville Brody, Bea Feitler und Tom Wolsey. Ihre Arbeit hat mich fasziniert, und ich war neugierig, warum wir online so wenig davon sehen.

Diese Neugier führte mich in unerwartete Richtungen, und mein Kopf platzte bald vor Ideen. Von Alexey Brodovitch und Bea Feitler habe ich gelernt, wie man Bilder und Text spannender kombiniert. Tipps, wie ich meinen typografischen Designs mehr Wirkung verleihen kann, habe ich mir von Neville Brody geholt, und Tom Wolsey hat mir beigebracht, wie ich selbst das kleinste Designelement interessanter gestalten kann. Ich habe mich mit den Grundsätzen des Redaktions- und Magazinlayouts beschäftigt, und anstatt sie einfach zu kopieren, fand ich Wege, sie für das Web anzupassen, um Produkt- und Website-Layouts überzeugender zu gestalten.

Die Auszeit hat mir geholfen, meine Begeisterung für Design wiederzuentdecken. Obwohl es immer noch verlockend ist, in vorhersehbare Muster zu verfallen – in Verhalten und Design –, habe ich seit meiner Rückkehr nach Hause erkannt, wie wichtig es ist, neugierig zu bleiben, andere Medien zu studieren und offen zu bleiben für die Lektionen, die wir daraus lernen können.

Neugier hält einen kreativen Geist offen für neue Möglichkeiten, und genau darum geht es beim Magazin Ernest Journal – der Inspiration für diese Ausgabe.

Ernest Journal: Neugier und Abenteuer

Trotz des kleineren Formats zog es mich bei meinem letzten Besuch in meinem Lieblingsmagazinladen zum Ernest Journal. Ernest ist „eine Zeitschrift für forschende Köpfe. Es ist für diejenigen gemacht, die überraschende und mäandrierende Reisen schätzen, die eher von Neugier als von Adrenalin angetrieben und von zufälligen Begegnungen geleitet werden.“

Wenn Sie Ernest Journal zum ersten Mal öffnen, werden Sie sofort von seinem Inhalt und nicht von seinem Design angezogen. Es gibt wunderschöne Fotografien und auffällige grafische Designs, die oft groß genug präsentiert werden, um sich von einer Seite zur nächsten auszubreiten.

Das Design von Ernest Journal ist einfach, aber nicht minimalistisch. Es schöpft maximalen Wert aus nur einer kleinen Anzahl von Assets, insbesondere aus den beiden dominierenden Schriftarten Freight Big Pro und Gill Sans Nova.

Freight Big Pro ist eine kontrastreiche Serifenschrift von Joshua Darden – dem Gründer der Schriftgießerei Darden Studio – der auch Jubilat und Omnes entworfen hat, zwei Schriftarten, die ich regelmäßig verwende. Freight Big Pro ist eine Familie von zwölf Stilen und verfügt über eine Vielzahl von OpenType-Funktionen, darunter schöne Ligaturen, eine Funktion, die von Ernest Journal für Überschriften und sogar sein Logo verwendet wird. Gill Sans war zwar nie ein besonderer Favorit von mir, aber die Designer von Ernest Journal haben sie für zeitgemäß aussehende Überschriften und andere typografische Details gut eingesetzt.

Das Layout von Ernest Journal besteht hauptsächlich aus zwei und drei Spalten, aber es ist ihre durchdachte Verwendung, die dazu beiträgt, dass sich das Gesamtdesign trotz der Vielfalt an Inhalten und Stilen im Magazin verbunden anfühlt. Ich werde Ihnen später in dieser Ausgabe beibringen, wie Sie abwechslungsreiche und dennoch zusammenhängende Designs erstellen können.

Ernest Journal ist ein hervorragendes Beispiel dafür, wie Farbe und Typografie verwendet werden können, um Konsistenz über eine gesamte Publikation hinweg zu schaffen. Gleichzeitig verbinden ihre Designer durch die Auswahl von Farben aus Grafiken und Fotografien für Überschriften, Zitaten und andere Details dieses Gesamtdesign mit individuellen Geschichten. Das sorgt für Abwechslung und macht die Geschichten, die Ernest Journal erzählt, noch fesselnder.

Magazin Anatomie

Die Web Hypertext Application Technology Working Group (WHATWG) mit dem nicht ganz so schnippischen Namen hat Tausende von Websites untersucht, bevor sie sich auf Namen für neue Elemente wie Kopf- und Fußzeilen geeinigt hat. Zeitschriften haben ihre eigene Terminologie für Teile einer Seite, die Sie verwenden können, um Produkt- oder Website-Komponenten zu benennen:

Wenn Sie das nächste Mal an einem Zeitschriftenladen vorbeikommen, schauen Sie vorbei und suchen Sie nach einer Ausgabe des Ernest Journal. Es mag klein sein, aber Sie werden es voller Ideen finden, die Sie bei Ihrem nächsten Projekt verwenden können.

Inspiriert von Ernest Journal

Viele Leute machen Frameworks einschließlich Bootstrap für die homogenen Layouts verantwortlich, die wir allzu oft im Web sehen, aber das Problem liegt in unserem Denken, nicht im Framework. Die kalte, harte Wahrheit ist, dass Bootstrap keine einfallslosen Designs erstellt. Faule Designer schon.

Der Großteil des Inhalts von Ernest Journal ist in einem symmetrischen Raster platziert, das mit den zwölf Spalten eines Rahmens leicht für das Web reproduziert werden kann. Der Inhalt wird einfach mit einer Mischung aus zwei und drei Spalten angeordnet. Doch im Gegensatz zu vielen Websites, die mit einem Framework erstellt wurden, sind die Seiten von Ernest Journal aufregend und abwechslungsreich. Es gibt keinen Grund, warum Frameworks nicht verwendet werden können, um Layouts zu erstellen, die so ansprechend sind wie Ernest Journal. Alles, was es braucht, ist ein Verständnis für Layout-Design und Vorstellungskraft.

Vielfalt ist ein entscheidender Teil des Erfolgs des Designs von Ernest Journal und eine Lektion, die wir auf Produkte und Websites anwenden können. Einzelne Spalten werden seit Generationen von Buchdesignern verwendet und darauf basierende Designs sehen klassisch aus. Raster mit zwei symmetrischen Säulen wirken ordentlich. Sie können eine enorme Menge an Inhalten aufnehmen, ohne überwältigend zu werden. Kombinieren Sie Weißraum mit drei oder mehr Spalten, und Ihre Designs erhalten sofort ein redaktionelles Gefühl, das an eine hochwertige Druckpublikation wie das Ernest Journal erinnert.

Entwerfen mit Frameworks

Der ursprüngliche Fiat 500 war ein winziges Auto, das einen großen Eindruck auf die Automobilindustrie machte. Er war enorm beliebt und wurde zum Vorbild für eine Generation von Kleinwagen. Für dieses Design über den Aufstieg dieses ikonischen kleinen Autos möchte ich einen ähnlich großen Eindruck hinterlassen, indem ich eine große Tafel mit einer Überschrift und einem Bild fülle. Dieses Panel nimmt zwei Drittel der Breite meiner Seite ein – acht meiner zwölf Spalten. Der Fließtext auf der rechten Seite nimmt vier Spalten ein, und seine Breite wird durch den gegenüberliegenden ersten Absatz ergänzt, wodurch diese asymmetrische Komposition ins Gleichgewicht gebracht wird.

Durch die Verwendung einer Vielzahl von verbundenen, aber unterschiedlichen Layouts können Sie Geschichten ansprechender gestalten und das Interesse der Leser wecken. Mein nächstes Design basiert auf demselben Zwölf-Spalten-Raster, sieht aber völlig anders aus. Hier belegt das große Bild sechs Spalten, die halbe Breite und die volle Höhe meiner Seite. Der Text verläuft in der Mitte über zwei Spalten, und unterstützende Informationen – einschließlich einer Zeitachse der Fiat 500-Modelle – entsprechen seiner Breite, obwohl ich sie in einem viel breiteren Feld platziere.

Nun, ich weiß, dass einige von Ihnen sich fragen werden, wie man solche Designs an kleinere Bildschirme anpassen kann. Proportional schmale Textspalten machen bei wenig Platz keinen Sinn, daher nutze ich die gesamte Bildschirmbreite. Anstatt die Leute zu bitten, an einem großen Bild vorbeizublättern, lege ich den Fiat 500 auf die Seite innerhalb eines horizontalen Bildlauffelds.

Auch mit nur zwei oder drei symmetrischen Spalten können Sie eine überraschende Vielfalt an Layouts erstellen. Damit sich Ihr Design auf allen Seiten verbunden und vertraut anfühlt, entwickeln Sie ein System zur Verwendung dieser Spalten. Sie können drei Spalten für Fließtext verwenden, um Ihrem Design ein redaktionelles Gefühl zu verleihen, und zwei Spalten für Bilder.

Alternativ können Sie zweispaltigen Text für ein geordnetes Gefühl und drei Spalten für Bilder verwenden. Diese erhöhte Wiederholung von Formen trägt dazu bei, dass sich eine Komposition dynamischer anfühlt.

Das Ändern der Platzierung von Bildern in drei Spalten ist eine einfache Möglichkeit, das Erscheinungsbild eines Designs zu variieren. Mein nächstes Design setzt ein großes Bild auf zwei Drittel der Seite und ein kleines Bild auf das verbleibende Drittel. Aber Bildproportionen sind bei weitem nicht so interessant wie die Position des Bundstegs zwischen Bildern und wie sie den Bundsteg zwischen darunter liegenden Textspalten versetzt.

Auf mittelgroßen Bildschirmen ist noch Platz für ein spannendes Nebeneinander von zwei und drei Spalten. Aber was ist mit kleinen Bildschirmen?

Zweispaltiger Fließtext würde bei einer so schmalen Breite keinen Sinn machen, aber Sie müssen nicht auf die Vorteile von Leerraum verzichten, selbst wenn dieser begrenzt ist. Für dieses Design für kleine Bildschirme platziere ich Bilder in einem horizontal scrollenden Bedienfeld. Dann verwende ich eine schmale Spalte, um den laufenden Text einzurücken.

Verbundene Layouts gestalten

In der letzten Ausgabe habe ich Ihnen den Schweizer Künstler und Typografen Karl Gerstner und das „Mobile Grid“ vorgestellt, das er entworfen hat, um Inhalte im Capital-Magazin einheitlich und ohne Einschränkungen darzustellen. Dieselben Prinzipien gelten auch für die Platzierung von Inhalten, die von Ernest Journal inspiriert wurden.

Ein einzelnes Modul, das die gesamte Breite der Seite ausfüllt, verlangsamt die Benutzer und ermutigt sie, beim Inhalt zu verweilen. Es ist nicht notwendig, jedes Pixel zu verwenden, und ich widme ein Viertel dieser Komposition dem weißen Raum, um diesem Design ein Gefühl von Luxus zu verleihen.

Die Struktur eines zweisäuligen Layouts hat etwas Beruhigendes, daher gebe ich diesen klassischen Autos für dieses Design den gleichen Platz. Um zu verhindern, dass dieses Design vorhersehbar wird, verwende ich zusätzliche Spalten für größere Autos und setze Dachrinnen ein, um den Beginn meiner Überschriften und Absätze zu versetzen.

Es ist möglich, Energie in die Struktur eines symmetrischen Drei-Säulen-Designs zu pumpen. Für dieses nächste Design verwende ich diese drei Säulen auf zwei verschiedene Arten, zuerst mit einer Draufsicht auf den Fiat 500, dann ein kleineres Modul für jedes der verbleibenden Autos.

Designs mit einer ungeraden Anzahl von Spalten und Zeilen können überzeugend sein, insbesondere wenn sie in einem modularen Raster angeordnet sind. Dieses Design verlangt Aufmerksamkeit, nicht nur, weil es optisch interessant ist, sondern auch, weil es sich so sehr von anderen Seiten unterscheidet. Es ist eine ausgezeichnete Wahl, um den Leserhythmus zu unterbrechen, damit sich jemand auf einen bestimmten Inhalt konzentriert.

Kontrolle des Leserhythmus

Das Tempo, in dem sich jemand durch ein Produkt oder eine Website bewegt, ist ein wesentlicher Faktor für seine Erfahrung. Dieses Prinzip ist auf dem kleineren Bildschirm eines Mobiltelefons genauso nützlich wie auf einem größeren.

Am langsamsten

Langsamer

Schleppend

Schnell

Schneller

Am schnellsten

Verbindungen schaffen

Eine der attraktivsten Funktionen von Ernest Journal und eine Technik, die Sie schnell an die von Ihnen gestalteten Websites anpassen können, ist die Verwendung einer aus Bildern ausgewählten Akzentfarbe. Sie können Akzente für Überschriften, Anführungszeichen und andere typografische und Details verwenden, um sie mit Grafiken und Fotos zu verbinden.

Wählen Sie aus, auf welche Elemente diese Akzentfarbe angewendet werden soll, und gestalten Sie sie dann auf Ihrer gesamten Website, um Kontinuität zu schaffen. Verwenden Sie nur einen Akzent – ​​oder Tönungen dieser Farbe – pro Artikel, um jedem Artikel seinen eigenen unverwechselbaren Stil zu verleihen.

In diesem ersten Artikel wähle ich ein dunkles Pink aus den Lichtern des Fiat 500 und verwende es für meine Überschrift, Standfirst und Daten in meiner Chronik. Für den zweiten Artikel probiere ich ein warmes Hellbraun aus dem Koffer auf einem Foto eines anderen Fiat 500. Es gibt viele Tools, die online verfügbar sind, um Ihnen zu helfen, Farben von Bildern zu probieren, aber mein Favorit ist immer noch Adobe Color.

Die Verwendung großer Farbblöcke kann Ihnen helfen, zwischen Inhaltstypen zu unterscheiden, und die Wahl derselben Farbe für Bedienfeldhintergründe und typografische Elemente wie Initialen wird eine subtile Verbindung zwischen ihnen aufrechterhalten.

Ich verwende ein warmes Dunkelbraun für meine Initialen, Überschriften und Pull-Zitate sowie für den Hintergrund des Panels, das diese Seiten dominiert. Die gelben Umrisse in der Illustration, Ränder und Titel in der Timeline sind eine Farbe, die ich verwende, um mehrere Seiten zu verbinden.

Für die zweite Seite verwende ich ebenfalls das gleiche Hellbraun wie zuvor, um eine Farbpalette und Einheitlichkeit für alle meine Designs zu schaffen.

Grundlegende Stile

Farben tragen dazu bei, einen charakteristischen Stil zu schaffen, der ein Design unvergesslich machen kann. Farbe verbindet Inhalte mit einer Marke, schafft Verbindungen zwischen Bild und Text. Sie definieren die Persönlichkeit eines Produkts oder einer Website und letztendlich eines ganzen Unternehmens, daher ist es entscheidend, eine Reihe von Farben zu entwickeln, die Sie in Ihren Designs verwenden können.

Aber Farbe ist nicht der einzige Aspekt eines Designs, der dazu beitragen kann, diese überaus wichtige Konsistenz aufrechtzuerhalten. Sie können charakteristische typografische Elemente erstellen, darunter Blockzitate, Datumsangaben und Initialen sowie Rahmenstile und Bildbehandlungen, die sich auf den Seiten wiederholen.

Wenn diese Stile die Grundlage für Ihr Design bilden, können Sie Farb- und Typvariationen verwenden, um jedem Artikel sein eigenes, einzigartiges Aussehen zu verleihen.

In diesem Design bedeckt eine Hintergrundfarbe die gesamte Seite. Einfach diese Farbe zwischen den Artikeln zu ändern, während das Layout und der Typografiestil beibehalten werden, fügt Abwechslung hinzu und erstellt eine Reihe von Seiten, die zwar unterschiedlich sind, sich aber so anfühlen, als würden sie zusammengehören.

Experimentieren Sie mit einem Tool wie Adobe Color mit analogen und komplementären Farben. Das Erstellen einer Farbfamilie aus Grafiken und Fotos und deren Verwendung in mehreren Kombinationen ist eine einfache Möglichkeit, eine Vielzahl von Designs für Abschnitte auf Ihrer Website zu erstellen.

Das Design von Ernest Journal ist erfolgreich, denn obwohl jeder Artikel seine eigenen unverwechselbaren Elemente hat, die den visuellen Stil mit dem Inhalt verbinden, verwenden diese Artikel ein konsistentes Rastersystem und grundlegende Stile. Diese Konsistenz trägt dazu bei, dass sich Ernest Journal wie ein einheitliches Ganzes und nicht wie eine Sammlung einzelner Teile anfühlt.

Lesen Sie mehr aus der Serie

• Inspirierte Designentscheidungen: Avaunt Magazine
• Inspirierte Designentscheidungen: Dringende Angelegenheiten
• Inspirierte Designentscheidungen: Alexey Brodovitch
• Inspirierte Designentscheidungen: Bea Feitler
• Inspirierte Designentscheidungen: Neville Brody
• Inspirierte Designentscheidungen: Otto Storch
• Inspirierte Designentscheidungen: Herb Lubalin
• Inspirierte Designentscheidungen: Max Huber
• Inspirierte Designentscheidungen: Giovanni Pintori
• Inspirierte Designentscheidungen: Emmett McBain
• Inspirierte Designentscheidungen: Bradbury Thompson

NB: Smashing-Mitglieder Smashing-Mitglieder haben Zugriff auf ein wunderschön gestaltetes PDF des Magazins Andy's Inspired Design Decisions und vollständige Codebeispiele aus diesem Artikel. Sie können das PDF und die Beispiele dieser Ausgabe sowie alle anderen Ausgaben direkt auf Andys Website kaufen.