Share
Heute habe ich für alle Netzliebhaber ein besonderes Vergnügen! Khoi Vinh (eine der führenden Behörden für typografische Rastersysteme im Webdesign) und Peachpit haben zugestimmt, einen Auszug aus Khois neuem Buch über Rasterdesign veröffentlichen zu lassen: Bestellstörung: Grid-Prinzipien für Webdesign. In diesem Auszug beschreibt er die Prinzipien, die jeder Designer beim Entwurf einer Website in einem Raster beachten sollte.
Das Raster ist seit langem ein unschätzbares Werkzeug, um aus dem Chaos für Designer aller Art Ordnung zu schaffen - von Stadtplanern über Architekten bis hin zu Schriftsetzern und Grafikern. In den letzten Jahren haben auch Webdesigner die bemerkenswerte Kraft entdeckt, die ein gitterbasiertes Design leisten kann, um intuitive, immersive und schöne Benutzererlebnisse zu schaffen.
Ordering Disorder liefert eine definitive Vorstellung von Rastern und dem Web. Es bietet sowohl die großen Ideen als auch die Brass-Tacks-Techniken des netzbasierten Designs. Die Leser werden mit Sicherheit ein umfassendes Verständnis für die Leistungsfähigkeit von Netzen sowie die Entwurfswerkzeuge erhalten, die zu ihrer Implementierung für das World Wide Web erforderlich sind.
Das Folgende ist ein Auszug, aber wie Sie lesen, ist das gesamte Buch so geschrieben, dass es in jedem Kapitel aufgegriffen werden kann und trotzdem sinnvoll ist. Dies ist also ein perfekter Ort, an dem Sie einsteigen können.
Wir haben auch einen speziellen 35% Rabatt auf den Promo-Code für unsere Leser, die das gesamte Buch abholen möchten (am Ende der Post).!
Die Bilanz dieses Buches konzentriert sich darauf, wie Sie ein Raster erstellen, einschließlich einer Übersicht über die Schritte zu einer funktionierenden Lösung. Bevor wir jedoch beginnen, ist es nützlich, Prinzipien zu beschreiben, die jeder Designer beachten sollte.
Ein Raster sollte sich zunächst auf die Problemlösung und zweitens auf die Ästhetik konzentrieren. Ein Raster kann jedes Design so verführerisch und ästhetisch aufwerten, dass es versucht ist, sich auf seine Schönheit statt auf seinen Nutzen zu konzentrieren. Viele Designer beschäftigen sich mit der Schönheit des Gitters und verzerren den Inhalt oder die Funktionalität, um es einzuprägen, unabhängig davon, wie unkomfortabel oder ungeeignet es ist. Die erfolgreichsten Netze werden jedoch für genau definierte Probleme entwickelt. Unabhängig davon, ob es sich um Kommunikationsprobleme, Organisationsprobleme oder Transaktionsprobleme handelt, ein Netz erhält seine Schönheit daraus, wie gut es diese Herausforderungen löst.
Ein Raster ist ein Bestandteil der Benutzererfahrung. Ein Grid ist kein Werkzeug, um die Benutzererfahrung einer Website vollständig zu kontrollieren. Ein Raster ist vielmehr ein Rahmen, in dem der Benutzer seine eigenen Erfahrungen steuern kann. Designer sollten nicht jedes Element und jede Interaktion zwingen, innerhalb des Gitters aufzutreten, und auch nicht zulassen, dass die Benutzererfahrung unformiert und unvorhersehbar ist. Es ist die Aufgabe des Designers, bestimmte Entscheidungen für den Benutzer zu treffen - nicht jede Entscheidung, aber genug, damit der Benutzer seine Ziele ungehindert erreichen kann. Das Raster ist ein Werkzeug für diesen Job.
Je einfacher das Raster ist, desto effektiver ist es. Die in diesem Buch beschriebenen Prinzipien können verwendet werden, um Raster aus sechzehn, zwanzig oder sogar mehr Einheiten in einer beliebigen Kombination von Spalten mit einheitlicher oder unregelmäßiger Breite zu erstellen. Tatsache ist jedoch, dass der Designer immer danach streben sollte, ein möglichst einfaches Raster zu erstellen. Wie wir sehen werden, ist mathematische Präzision ein Schlüsselelement für ein gutes Gitterdesign, aber der mathematische Nutzen ist ebenso wichtig. Die Formeln, die Sie verwenden, um kombinierte Einheiten und Spalten zu berechnen, sollten ziemlich unkompliziert sein, sogar einfach genug, um sie in Ihrem Kopf auszuführen oder einem Kollegen schnell zu erklären. Je einfacher ein Netz ist, um zu nutzen und zu erklären, desto mehr Benutzer werden von diesem Netz profitieren.
Hier sind also die wichtigsten Schritte beim Entwurf einer Grid-Lösung:
Denken Sie daran, dass unser Prozess zwar streng sein muss, unser Prozess aber nicht sein muss. Obwohl die Reihenfolge, in der ich diese Schritte vorgestellt habe, für mich nützlich war, funktioniert sie nicht unbedingt für alle
Designer Nicht jeder Schritt muss in genau derselben Reihenfolge, für eine bestimmte Zeit, auf eine bestimmte Weise oder sogar überhaupt befolgt werden. Zum Beispiel ist Schritt 3, Vorbereitendes Design, ein Satz von drei verschiedenen Aktivitäten
Dies geschieht oft gleichzeitig, wobei der Designer bei Bedarf zwischen Bleistift und Papier, Software und der Rückseite des Kuverts wechselt. Was zählt, ist nicht die erneute Wiederholung dieser Schritte, sondern die folgenden
die Grundsätze eines guten Netzdesigns.
Trotzdem lohnt es sich im Vorfeld, zwei kritische Schritte in diesem Prozess zu erörtern. Die erste ist Forschung und die zweite ist Skizzieren.
Wirklich gutes Design beurteilen wir zunächst nicht an seiner Schönheit, an ihrer Innovationskraft oder an seiner Effizienz, sondern daran, wie gut es auf sein ursprüngliches Problem reagiert. Erfolgreiche Lösungen verlangen, dass die Designerin das an sie gerichtete Problem und die Einschränkungen, unter denen sie arbeitet, verstehen. Der Designer muss die Antwort auf folgende Fragen stellen und verstehen: Wer ist das Publikum, in welchem Kontext, wann wird die Lösung gefunden, wie wird die Lösung verwendet und warum ist die Lösung notwendig??
Diese Fragen können schwer zu beantworten sein, und die Antworten selbst sind oft unklar oder schwer zu analysieren. Ein Designer muss hartnäckig darin sein, sie zu fragen, auf gute und genaue Antworten zu drängen und diese Antworten gründlich zu prüfen und zu verstehen.
Da ein Grid einen solchen Vorsprung bei der Erstellung von Lösungen haben kann, kann es verlockend sein, auf diese Phase des Prozesses zu verzichten. Sobald ein Designer die Grundlagen von Gittern beherrscht, ist es viel einfacher, den mechanischen Prozess des Bauens von Einheiten und Säulen zu beginnen, als die harte Arbeit, diese Fragen zu stellen und zu beantworten.
Nahezu jedes Designproblem erfordert jedoch eine sorgfältige Studie, bevor die Suche nach einer Lösung beginnt. Ohne ein klares Gefühl der Herausforderung zu haben, wird jegliche Designarbeit - einschließlich der Entwicklung des Gitters - vergeblich gemacht. Es ist eine viel produktivere Zeit, um zu Beginn eines Projekts zu recherchieren, als direkt zum Design zu springen.
Gitterbasierte Designs unterscheiden sich nicht. Je vollständiger das Problem untersucht wird, desto besser ist das Netz. Gut recherchierte Raster maximieren die kreativen Möglichkeiten, die dem Designer zur Verfügung stehen. Sie antizipieren und vermeiden auch die Fallen vorzeitig aufgebauter Netze: unangemessen strukturierte Einheiten und Säulen, Netze, die für einige Aspekte des Problems gut sind, für andere jedoch unangemessen sind, Netze, die Einschränkungen nicht berücksichtigen, die anfangs nicht offensichtlich sind, Gitter Dies erweist sich als so unbrauchbar, dass sie zu unangemessenen Zeiten wieder aufgebaut werden müssen, und Netze, die sich für Mitarbeiter als unbrauchbar erweisen.
Nach welchen Einschränkungen sollte der Designer suchen? Sie fallen in drei Hauptkategorien:
Natürlich werden sich Designer über die Unannehmlichkeiten von Einschränkungen beklagen oder über die Dornigkeit einiger der besonderen Einschränkungen, mit denen sie konfrontiert werden müssen. Wenn nur diese Einschränkungen aufgehoben würden und das Problem nur geringfügig anders wäre, wäre die Lösung viel einfacher oder eleganter.
Diese Einschränkungen sind jedoch mit einem silbernen Rand versehen: In gewisser Weise können sie ein Problem schwieriger machen, sie können jedoch auch das Erreichen eines Entwurfs erleichtern. Umfassende Lösungen wie Netze können oft von einer oder zwei nicht verhandelbaren Beschränkungen profitieren, unbewegliche Anforderungen, die während des Entwurfsprozesses nicht leicht geändert werden können. Zunächst können sie die Proportionen eines Gitters, die Größen der Einheiten, Spalten und Regionen, die der Designer erstellt, direkt beeinflussen. Diese Art von Einschränkungen scheinen die Möglichkeiten eines Designers einzuschränken. Sie haben oft auch die Wirkung, den Erfindergeist eines Designers zu steigern. Je weiter ein Design-Problem offen ist und je weniger Einschränkungen es gibt, desto weniger wahrscheinlich wird ein Designer diese aufschlussreichen Sprünge der Logik machen, die das Markenzeichen eines großartigen Designs sind. Nicht verhandelbare Einschränkungen können dazu beitragen, dass ein Designer dies tut. Ob das Sperren in einer bestimmten Dimension, ein technologischer Imperativ, eine Werbeeinheit oder ein anderer Faktor, den ein Designer umgehen muss, anstatt ihn bequem an seine eigenen Bedürfnisse anzupassen - eine unbewegliche Anforderung zu haben, kann enorm nützlich sein.
Nach so vielen Absätzen, wie wichtig es ist, ein Problem gründlich zu recherchieren, kann ich den nächsten Punkt noch präziser formulieren: Das Zeichnen auf Papier ist ein unverzichtbares Werkzeug für die gründliche Problemlösung von Konstruktionen und besonders hilfreich bei der Entwicklung von Rastern. Der einfache Vorgang, schnell und locker spekulative Kombinationen von Säulen und möglichen Layouts herauszuarbeiten, kann enorm viel Zeit sparen und führt häufig zu viel kreativeren, fruchtbareren Rasterlösungen, als einfach mit dem Entwerfen oder Codieren eines Rasters zu beginnen.
Ich kann die Kraft und Nützlichkeit der Verwendung von altmodischem Bleistift und Papier nicht genug betonen, um Probleme herauszufinden, um mögliche Lösungen zu finden und um vielversprechende oder gar nicht so vielversprechende Ideen zu erkunden, deren Prüfung zu kostspielig oder zeitaufwendig ist Andernfalls. In der Tat ist der wichtigste Aspekt beim Skizzieren nicht so sehr, dass Markierungen auf Papier gemacht werden, sondern dass viele Ideen schnell und mit geringen Kosten durchlaufen werden können. Denken Sie daran, Sie haben nicht die Erwartung, dass die Skizzen mehr als nur Skizzen sind. Skizzen müssen nicht hübsch sein.
Wie bereits erwähnt, muss auch beachtet werden, dass das Skizzieren keine diskrete Phase des Aufbaus eines Gitters sein muss, das an bestimmten Punkten beginnt und endet. Das Skizzieren kann in jeder Phase des Projekts erfolgen, und zwar auf mehreren Ebenen der Fertigstellung. Natürlich ist es am nützlichsten, früher zu skizzieren, damit mehr Ideen und Möglichkeiten sehr schnell durchlaufen werden können. Einen Bleistift und ein Stück Papier immer griffbereit zu haben, ist von unschätzbarem Wert.
Das Vokabular, das die verschiedenen Komponenten eines Gitters beschreibt, mag einfach erscheinen, aber auch überraschend unspezifisch sein. Zum Beispiel: Der Begriff einer Spalte scheint recht einfach zu sein, aber auf einer Seite, die auf einem achtspaltigen Raster basiert, erstellt ein Designer möglicherweise ein Layout mit nur zwei Textspalten, wodurch die Bedeutung dieses Begriffs ungenau wird. Sogar Bücher über das Handwerk des gitterbasierten Designs stimmen nicht immer mit der Terminologie überein, wobei einige Begriffe (z. B. Regionen, Felder) verwendet werden, die anderen fehlen. Für die Zwecke dieses Buches ist es daher wichtig, einige gemeinsame Terminologie festzulegen, während wir uns mit praktischen Diskussionen über Gitter befassen.
Der Baustein eines Gitters, einer Einheit, ist die kleinste vertikale Unterteilung der Seite (d. H. Einheiten werden in der Breite gemessen), auf der Spalten aufgebaut werden. Einheiten sind normalerweise zu eng, um den meisten Textinhalt unterzubringen.
Spalten sind Gruppen von Einheiten, die zusammengefügt werden, um funktionsfähige Bereiche für die Präsentation von Inhalten zu erstellen. Die meisten Textspalten erfordern zum Beispiel, dass zwei oder mehr Einheiten bearbeitet werden können. Ein Gittersystem von beispielsweise sechzehn Einheiten kann in zwei Spalten mit jeweils acht Einheiten oder vier Spalten mit jeweils vier Einheiten usw. kombiniert werden.
Regionen sind Gruppierungen ähnlicher Spalten, die Teile der Seite bilden. In einem vierspaltigen Gitter bilden die ersten drei Spalten von links möglicherweise einen einzigen Bereich für die Anzeige einer Art von Inhalt, und die verbleibende Spalte kann einen anderen Bereich bilden.
Felder sind horizontale Unterteilungen der Seite (d. H. Felder werden in der Höhe gemessen), die einem Designer helfen, die Platzierung von Elementen auf der Y-Achse visuell zu beschleunigen. Felder können auf viele Arten berechnet werden, aber die Verwendung des Goldenen Schnittes ist eine der effektivsten Methoden.
In der traditionellen Typografie ist die Basislinie die unsichtbare Linie, auf der die Buchstabenformen ruhen, z. B. liegt der untere Rand eines Kapitels E auf der Basislinie, während der Abstieg eines Kleinbuchstaben p unter die Basislinie fällt. Das Grundlinienraster wird durch eine gleichmäßige Wiederholung der Grundlinien von oben nach unten gebildet, die entsprechend dem Abstand der Zeilenvorschübe oder des Zeilenabstandes voneinander beabstandet sind.
Diese Konzepte sind notorisch leicht zu verwechseln (eine Einheit kann je nach vew Punkt als horizontale oder vertikale Unterteilung einer Seite betrachtet werden), daher bezieht sich dieses Buch auf das Spaltenraster (in der Breite gemessene Unterteilung der Seite) ) und das Grundlinienraster und -regionen (Abteilungen der Seite in Höhe gemessen).
Dachrinnen sind die leeren Räume zwischen Einheiten und Säulen. Wenn Einheiten zu Säulen zusammengefasst werden, enthalten sie die Zwischenrinnen zwischen ihnen, nicht jedoch den Abstand links von der linken Einheit und den Abstand rechts von der rechten Einheit.
Ränder sind der Raum außerhalb einer Einheit oder Spalte. Auffüllung ist der Raum innerhalb einer Einheit oder Spalte. Ränder werden im Allgemeinen zum Erstellen von Rinnen verwendet, während das Auffüllen im Allgemeinen zum Erstellen eines kleinen, sichtbaren Einschubs in einem Textblock in einer Spalte verwendet wird.
Ein Element ist eine einzelne Komponente eines Layouts. Beispiele sind eine Überschrift, ein Textblock, ein Foto oder eine Schaltfläche.
Module sind Gruppen von Elementen, die kombiniert werden, um einzelne Inhalts- oder Funktionsblöcke zu bilden. Ein Registrierungsformular ist beispielsweise ein Modul, das aus mehreren Bestandteilen besteht, wie z. B. einer Beschriftung, einem Formularfeld, einer Schaltfläche usw..
Dies ist ein einziges Kapitel aus dem Buch? Wenn ihr den Rest des Buches lesen wollt, könnt ihr es bei peachpit.com kaufen. Die gute Nachricht ist, dass wir einen speziellen Promotion-Code für unsere Leser haben. Erhalten 35% auf den Preis durch Eingabe des Codes "KHOI"während des Bestellvorgangs auf peachpit.com. Oh, und die USA. Versand innerhalb Deutschlands ist kostenlos!
Accentsconagua