Interaktives Design

Ein Überblick über konsistente Designs im Web

Die visuelle Sprache einer Website beeindruckt den Besucher weit über den ersten Blick hinaus.

Wenn Sie die besten Websites beobachten, bemerken Sie, dass die kleinen Details unbewusst zu Ihnen sprechen und dass Konsistenz Ihre Erfahrung der Website verbessert und Sie dadurch eher zurückkommen werden.

In diesem Artikel werden wir untersuchen, was ein Design konsistent macht , und wir werden einige der konsistentesten Website-Designs präsentieren.

Bitte äußern Sie sich am Ende des Artikels über die Konsistenz dieser Websites und fühlen Sie sich frei, Links zu anderen hinzuzufügen, die diesem Prinzip folgen.

Was verstehen wir unter Konsistenz im Design? Gemäß diese Definition Konsistenz kann definiert werden als: "Eine harmonische Einheitlichkeit oder Übereinstimmung zwischen Dingen oder Teilen."

Ihr Ziel als Designer ist es, Ordnung zu schaffen, um es den Benutzern zu erleichtern, die Informationen zu finden, die sie suchen. Konsistenz kann Ihnen helfen, dieses Ziel zu erreichen.

Checkliste der Details

Lassen Sie uns zunächst die Kriterien definieren, anhand derer wir feststellen, ob die Websites, die wir hier überprüfen, konsistent sind. Das Festlegen von Kriterien für sich selbst würde auch der eigenen täglichen Designarbeit zugute kommen. Wie ich gerne sage, wird gutes Design zuerst mit guter Beobachtung geschaffen . Hier sind unsere Kriterien:

Typografische Konsistenz:

  • Gibt es einen gleichbleibenden vertikalen Rhythmus?
  • Ist die typografische Ausrichtung konsistent?
  • Sind die Schriftartwahlmöglichkeiten konsistent?
  • Ist die typografische Navigation auf Seiten vorhersehbar?

    Grafische Konsistenz:

    • Vermitteln die Bilder der Website eine einheitliche Stimmung?
    • Stimmen die Farben in den Bildern überein?
    • Sind die Texturen der Bilder konsistent?
    • Stimmen die Größen der Bilder mit der Gesamtstruktur der Website und einander überein?

      Farbkonsistenz:

      • Werden Farben konsistent über die Seiten hinweg verwendet?

          Symbol- und Schaltflächenkonsistenz:

          • Sind die Symbole der Website von derselben Familie?
          • Stimmen die Symbole in der Größe überein?

          Eine Website muss diese Kriterien nicht erfüllen, aber die Liste ist ein guter Ausgangspunkt, um Ihre eigenen Designs konsistent und harmonisch zu gestalten.

          Okay, wir haben jetzt eine nette kleine Checkliste zum Spielen. Lassen Sie uns unsere Websites überprüfen, von ihnen lernen und sich inspirieren lassen!

          52 Wochen UX

          Was sind einige der Highlights dieser Website:

          • Der Leerraum in der Kopfzeile ist gleichmäßig aufgeteilt.
          • Die Typografie ist konsequent ausgerichtet, bündig links mit einer gezackten Rechten.
          • Die persistente paginierte Navigation an der Spitze ist clever und vertraut.
          • Bilder für Beiträge sind immer schwarz und weiß.

          Nun, da dieser Artikel über Details handelt, möchte ich auf zwei kleinere Probleme mit dieser Website hinweisen, sowohl in der Fußzeile als auch in der Fußzeile: Beachten Sie zunächst, wie der "Go" -Suchknopf eine Reflektion hat, während die anderen Elemente auf der Website dies nicht tun (vergleiche zum Beispiel den RSS-Button oben).

          Zweitens, beachten Sie, dass der Abstand zwischen den Überschriften und Text in der Fußzeile im Vergleich zum Rest der Website viel enger ist.

          Ribbons von Rot

          • Das wichtigste Element der Website: das rote! Schön und konsequent verwendet vom Logo zu den Kopfzeilen zu den Links zu den Tasten.
          • Als nächstes ist die Textur der Schaltflächengrafik die gleiche wie für das Logo.
          • Beachten Sie auch, dass die Schaltflächen visuell alle der gleichen Familie angehören, auch die sozialen Symbole ganz unten.
          • Der Display-Typ ist eine nette Slab-Serifen-wieder, die konsistent vom Logo zu den Kopfzeilen zu den Tasten verwendet wird.
          • Schließlich sind die Textelemente auf der gesamten Website einheitlich ausgerichtet, linksbündig und rechts gezackt.

          Yaron Schoen

          • Das erste, was auffällt, ist, wie die Illustration im Header mit der Tiefe spielt. Selbst die vier Grafikelemente unten tauchen aus ihren Containern auf und spielen auf dieselbe Weise mit der Tiefe.
          • Die Typografie ist perfekt in einem Raster ausgerichtet.
          • Die Schrift ist gut gewählt und ausgeführt. Die Homepage und andere Seiten weisen ebenfalls Kontinuität auf.
          • Die Farben sind auch sehr konsistent und spielen gut mit dem Dunkelblau bis zum Blaugrün, vom Kopf bis zum Fuß.

          Fuzzco

          • Sehen Sie sich die Textur in der oberen Navigation an. Es wird auch für die Bilder in der Nähe des Bodens verwendet.
          • Überprüfen Sie den Typ in der Kopfzeile auf Seiten; schön gemacht mit benutzerdefinierten Flash, gibt es ein kreatives Gefühl.
          • Die Serifen sind auf der Startseite konsistent, auf internen Seiten ist sie jedoch etwas zerbrochen.
          • Die Farben in der oberen Navigation stimmen mit der Fußzeile überein und harmonisieren und rahmen den Inhalt.

          Stilboost

          • Die Größe macht diese Website definitiv konsistent: groß . Große Tasten, große Bilder (alle einheitlich groß), große Schrift, große weiße Fläche.
          • Die Farbe wird auf ein Minimum reduziert und gut genutzt. Das Hellblau erhält Harmonie und das Sekundärgrau spielt mit Tiefe und Hierarchie.
          • Die Knöpfe sind alle groß und einheitlich. Sie sind ebenfalls leicht gerundet und entsprechen dem Suchfeld.
          • Die Gitterstruktur ist einfach und sagt Ihnen, was als nächstes kommt. Selbst die Fußzeile ist in Proportion, die dem Goldenen Schnitt nahe zu sein scheint.

          Köstliches Monster

          Diese Website ist nicht neu, aber es ist schön, wie es über die Jahre konsistent geblieben ist und nicht ein wenig gealtert ist. Die Liebe zum Detail hat geholfen.

          • Beachten Sie die Texturen. Die Website wird von einem Holzregal umrahmt, das an das Thema der von der Firma angebotenen Software anknüpft.
          • Die grafischen Elemente wie Gras und Pflanzen erhalten die Harmonie.
          • Jeder Bereich hat abgerundete Ecken, sogar die Slideshow-Buttons.
          • Das grünlich-gelbe dominiert die Seite und lädt Sie ein, diese phantasievolle und denkwürdige Welt zu betreten.

          Richard Meier & Partner Architekten.

          Es wurde entworfen von Massimo Vignelli , der dafür bekannt ist, das Raster zu beherrschen und moderne, konsistente und logische Designs zu produzieren.

          • Beachten Sie die Ausrichtung von Grafikelementen. Der linksbündige Typ im Menü stimmt mit den folgenden Bildern überein.
          • Die horizontale Regel unterhalb der Subnavigation ist persistent und hilft Benutzern, sich auf der Website zu orientieren.
          • Der Abstand zwischen Navigation und Körperinhalt ist konsistent und gibt dem Auge einen klaren Weg.
          • Und die Typografie ist einfach, bündig links und serifenlos, fällt gleichmäßig ins Raster.

          Das Team dahinter Informationsarchitekten hat auch Einfachheit, Rasterdesign und Konsistenz gemeistert.

          • Beachten Sie, wie die Navigation oben mit dem Body-Inhalt unten ausgerichtet ist.
          • Die Farbpalette ist einfach und konsistent: rot, weiß und schwarz.
          • Die Textelemente sind gleichmäßig ausgerichtet. Beachten Sie, wie der Abstand zwischen den horizontalen Regeln auf der Seite konsistent ist.

          Wilson Miner

          • Die Daten und der Meta-Inhalt sind in der ersten Spalte ausgerichtet, gefolgt vom Body-Inhalt.
          • Beachten Sie, wie die Navigation oben in das Raster fällt und sich an den Inhalt anpasst.
          • Die Typografie ist ein einfaches Weiß und Schwarz: Weiß für Abschnittstitel, Schwarz für Körperkopie.

          Tapbots

          • Das erste, was mir ins Auge fällt, ist die ausgezeichnete Verwendung von Leerraum, insbesondere der gleichmäßige Abstand zwischen dem Logo und der Navigation, sowohl oben als auch unten.
          • Die Ikonen scheinen alle aus derselben Familie zu stammen und schaffen Harmonie.
          • Die Verwendung der Tiefe, von der oberen Grafik bis zur Fußzeile, ist ebenfalls konsistent.
          • Die Farben stimmen über die Seite überein: das Schwarz oben entspricht der Fußzeile; Der rote Knopf oben entspricht dem Suchknopf darunter; und die graue Navigation entspricht der grauen Leiste in der Fußzeile.

          Aufwickeln

          Konsequentes Design erfordert viele Werkzeuge und kann schwierig zu erreichen sein.

          Ein Tipp, den ich anbieten kann, ist, mit einem schönen Gitter zu beginnen und dann ein Drahtmodell darauf zu bauen. Dadurch erhalten Sie einen Überblick über die grafischen Elemente und deren Beziehung zueinander.

          Die oben genannten Beispiele sollten Ihnen Denkanstöße für die Ausführung Ihres Designs geben. Konsistenz besteht aus vielen Teilen, die alle wesentlichen Bestandteile des Prozesses sind.


          Geschrieben exklusiv für Webdesigner Depot von Noam Almosnino, einem Webdesigner in Brooklyn, New York. Folge Noam auf Twitter oder besuchen Sie seine Website hellonoam.com .

          Kennen Sie andere konsistente Websites, die Sie mit uns teilen möchten? Bitte poste sie in den Kommentaren!


          Design Web-Design Konsistenz