Erstellen Sie ein responsives HTML-Drahtmodell

Seit den Anfängen der 3D-Computermodellierung haben Modellbauer eine Drahtgitteransicht eines Objekts verwendet, um ein Objekt in drei Dimensionen mit minimalen Kosten für Computerprozessoren darzustellen. Frühe Videospiele mögen Battlezone und Sturm zeigten 3D-Objekte als Drahtgitter, da frühe Heimcomputer nicht leistungsfähig genug waren, um 3D-Objekte vollständig zu rendern (und frühe einfarbige Displays konnten sie nicht anzeigen, selbst wenn sie konnten).

Jahre später begannen Software-Designer und -Entwickler, sich auf ihre Skizzen zu beziehen, die sie auch als Drahtgitter bauen wollten. Sie versuchten das Gleiche zu erreichen wie die 3D-Modellbauer: Ideen kostengünstig zu zeigen. Sie wollten Nicht-Designern und Entwicklern ein mehrdimensionales Verständnis dafür vermitteln, was sie entwerfen. Als das Web von Rich-Text-Dokumenten zu Schnittstellen wurde, die wie Software gestaltet waren, begannen auch Webdesigner mit dem Wireframing (obwohl einige in der Branche sich fragen, ob es jetzt an der Zeit ist, dies zu tun Graben Drahtgitter ).

Seit Jahren beschreibe ich meine Grundphilosophie für Wireframing mit zwei Adjektiven: billig und hässlich. Wireframes sollten etwas sein, das Sie schnell produzieren können, und Sie sollten in der Lage sein, Inhalte, Komponenten, Prioritäten und Layouts mit geringen Kosten radikal zu ändern. Drahtgitter sollten auch so stillos wie möglich sein. Das Letzte, worauf sich Kunden bei der Überprüfung von Drahtgittern konzentrieren sollen, sind die Farbpalette, Texturen, Typografie und Bilder. In diesem Fall sind Ihre Drahtgitter nicht hässlich genug oder zumindest nicht niedrig genug. Wireframes dienen nicht zum Testen des Stils. Sie dienen zum Testen Ihres Inhaltsmodells, Ihrer Architektur, Ihrer Hierarchie und Ihrer Abläufe. Betrachten Sie so etwas wie Stil Fliesen Stattdessen, wenn Sie mit Ihrem Kunden eine visuelle oder Stilsprache testen oder etablieren möchten.



Da sie jahrelang als kostengünstiges Werkzeug zum Testen von Ideen gedacht waren, waren Drahtgitter jahrelang einfach Bleistiftskizzen auf Papier mit schnell gerenderten Kästchen und verschnörkelten Linien. Schließlich stellten einige von uns fest, dass wir sie mit den Kopier- und Einfügefähigkeiten, die Computer bieten, noch schneller machen konnten, und begannen, Tools wie diese zu verwenden OmniGraffle oder Adobe Fireworks um die Dinge noch schneller zu machen. Trotzdem blieben Drahtgitter graue Kästchen und kopierte und verpasste Textteile, die auf einer festen Leinwand platziert waren. Es handelte sich um Low-Fidelity-Skizzen einer Website.

wie man ein Grafikdesigner für Filme wird

Sie müssen eine separate Rasterbreite für große Bildschirme angeben

Sie müssen eine separate Rasterbreite für große Bildschirme angeben

Da die Website-Interaktionen mit dem Aufkommen von Web 2.0 und Technologien wie Ajax sowie den Fortschritten bei HTML und CSS immer komplexer wurden, mangelte es diesen Skizzen von Websites häufig an Klarheit oder sogar an Verwirrung.

Anmerkungen zur Rettung! Das Erstellen kommentierter Skizzen unserer Websites war sehr sinnvoll, solange die Websites selbst auch in einer einzigen Größe auf einer festen Leinwand angezeigt wurden.

  • Laden Sie die Unterstützungsdateien für dieses Tutorial

Schöne neue Welt

Wir sind jetzt in eine schöne neue Welt eingetreten, in der unsere Websites auf einer Vielzahl von Geräten mit verschiedenen Bildschirmgrößen, Auflösungen und Interaktionsmustern leben. Die feste Leinwand gehört der Vergangenheit an. Also, was war unsere Lösung? Zum größten Teil wählen wir zwei bis drei Bildschirmgrößen (die normalerweise den ursprünglichen zwei iOS-Geräten von Apple und einer zufälligen Desktopgröße entsprechen) und wiederholen den Vorgang für jede. Alles skizzieren, alles kommentieren, profitieren!

Angenommen, wir lernen ein wenig von der Größe, mit der wir beginnen, sollten wir dies manchmal in weniger als der dreifachen Zeit tun können, die unsere alten Drahtgitter nur für Desktop-Geräte haben, oder? Falsch. Nach meiner Erfahrung nehmen Anmerkungen und Verwirrung mit diesem Ansatz zu. Wir verbringen auch Zeit damit, Dokumente zu erstellen, die versuchen, alle Bildschirmgrößen zu verstehen, und diese Skizzen unserer Website in verschiedenen Größen so darzustellen, dass Kunden sie leicht verstehen und verarbeiten können.

Ohne eine festgelegte Breite erbt der große Bildschirm die kleine Rasterbreite

Ohne eine festgelegte Breite erbt der große Bildschirm die kleine Rasterbreite

Abgesehen von der Tatsache, dass wir unsere Zeitinvestition in Wireframing mindestens verdoppelt haben, haben wir wahrscheinlich auch eine Reihe wichtiger Entscheidungen ignoriert, die irgendwann getroffen werden müssen. Manchmal malen wir uns sogar in eine Ecke, aus der wir uns mit HTML und CSS nur schwer entwickeln können. Wenn unsere beiden Endpunkte 320 Pixel breit und 1400 Pixel breit sind, gibt es 1.080 verschiedene mögliche Breiten dazwischen, bei denen verschiedene Inhalte, Komponenten oder sogar Interaktionstypen unterbrochen werden können. Hierher kommt schließlich der Begriff 'Haltepunkt'. Wireframing auf diese Weise verursacht zusätzliche Kosten, selbst wenn wir der Meinung sind, dass wir unsere Wireframes mit drei Breiten schneller als andere Methoden erhalten können.

Geben Sie das reaktionsschnelle HTML-Drahtmodell ein

Viele Designer hatten aus verschiedenen Gründen Angst oder waren nicht bereit, den Sprung zur Erstellung reaktionsfähiger HTML-Drahtmodelle zu wagen. Was folgt, ist eine kurze Liste der häufigsten Dinge, die Designer dazu gesagt haben, und einige Gedanken zu jedem. Dies sind jeweils sehr berechtigte Fragen und vernünftige Bedenken, daher werde ich auf jede Frage einzeln antworten. Ich kann Sie vielleicht nicht überzeugen, etwas Neues auszuprobieren, aber ich hoffe, ich kann ein paar Missverständnisse darüber zerstreuen, was ich meine, wenn ich sage, dass eines meiner neuen Ergebnisse in meinem Entwurfsprozess reaktionsschnelle HTML-Drahtmodelle sind.

  1. 'Ich mache seit Jahren statische Drahtgitter mit meinem Toolset und bin schnell verrückt geworden. Ich möchte diesen Geschwindigkeitsvorteil nicht aufgeben.' Das Erstellen von HTML-Wireframes kann in der Tat Zeit für Ihren Prozess ab dem Zeitpunkt des Beginns des Wireframings bis zu dem Zeitpunkt verlängern, an dem Sie die Genehmigung des Kunden haben. Dies kann jedoch die zusätzliche Kommunikation und Arbeit nach der Genehmigung Ihrer Drahtgitter verringern, da statische Drahtgitter häufig viele Steine ​​unversehrt lassen. Wenn Sie mit dem Wireframing für eine immer größere Anzahl von Bildschirmgrößen und Interaktionstypen beginnen, werden Sie wahrscheinlich entweder mehr Wireframes oder zusätzliche Anmerkungen benötigen, die schnell außer Kontrolle geraten können. Die Maximierung der Geschwindigkeit ist nicht das einzige Ziel beim Wireframing.
  2. 'Ich denke nicht in HTML und CSS. Um Layout- und Designideen zu erstellen, benötige ich ein Canvas-basiertes Tool. ' Dies ist eines der häufigsten Missverständnisse darüber, was viele Leute als 'Entwerfen im Browser' bezeichnen. Obwohl mein Client-Ergebnis zu reaktionsschnellen HTML-Drahtmodellen geworden ist, skizziere ich immer noch als Teil meines Prozesses, und ich denke, Sie sollten dies häufig tun.
  3. 'Ich kenne HTML und CSS, aber ich bin kein erfahrener Frontend-Entwickler. Ich habe keine Zeit, mich mit Medienanfragen zu befassen und reaktionsschnelle Bildschirme zu erstellen. ' Die gute Nachricht hier ist, dass Sie nicht Ethan Marcotte sein müssen, um reaktionsschnelle HTML-Drahtmodelle zu erstellen. Es gibt eine Reihe von Frameworks, die praktischen, wiederverwendbaren Code bereitstellen, damit Sie Komponenten und Layouts zusammensetzen können, die Ihren Ideen und Skizzen entsprechen.

Klein und groß werden zentriert, sofern nicht die nicht zentrierte Klasse verwendet wird

Klein und groß werden zentriert, sofern nicht die nicht zentrierte Klasse verwendet wird

Betreten Sie das Framework

Angenommen, ich habe Sie überzeugt, bei Ihrem nächsten Projekt Ihre Zehen im HTML-Wireframing-Wasser zu befeuchten, lassen Sie uns über Frameworks sprechen. Frameworks bieten im Allgemeinen ein integriertes Rastersystem, Basisstile und vorgefertigte, wiederverwendbare Komponenten (Navigation, Diashows usw.). Sie bieten aufgrund ihrer weit verbreiteten Verwendung und Dokumentation auch eine Community hilfreicher Personen und wurden in verschiedenen Browsern vorab getestet. Es gibt verschiedene Frameworks mit jeweils Vor- und Nachteilen. Hier ist eine Liste von nur wenigen:

Ich habe Foundation ausgewählt, um Ihnen eine kurze Anleitung zum Erstellen eines reaktionsschnellen HTML-Drahtmodells zu bieten, da es beliebt ist, zuerst mobil ist, optional semantisch ist (was bedeutet, dass Sie Ihre klassenbasierten Aufgaben mit Sass als semantisch betrachten können) und viele Funktionen bietet von vorgefertigten Vorlagen und Komponenten, und es ist in der aktiven Entwicklung. Grundsätzlich ist es eines der einfachsten Frameworks, um den Überblick zu behalten, das auch verwendet werden kann, um Ihre Drahtgitter in ein Endprodukt zu verwandeln.

Mit der Klasse size-offset-x können Sie die Anzahl der zu versetzenden Rasterspalten auswählen

Mit der Klasse size-offset-x können Sie die Anzahl der zu versetzenden Rasterspalten auswählen

Erste Schritte mit Foundation

Um Ihr erstes Drahtmodell mit Foundation zu erstellen, gehen Sie einfach zu http://foundation.zurb.com und klicken Sie auf den Download-Link. Sie gelangen zu einer Seite, die eine Reihe von Optionen zum benutzerdefinierten Anpassen Ihres Pakets bietet. In diesem Beispiel klicken wir jedoch einfach auf Laden Sie Foundation CSS herunter Link und los geht's. Die anderen nützlichen Links sind Dokumentationsseite der Stiftung und Vorlagenseite Für fertige Muster können Sie sie in Ihren Drahtgittern wiederverwenden.

Nachdem die ZIP-Datei heruntergeladen wurde, entpacken Sie sie in einen beliebigen Ordner auf Ihrem System, in dem Sie Ihre Wireframes speichern möchten, und geben Sie dem Ordner einen neuen Titel, z. acme-projekt . Wenn Sie den Ordner öffnen, sollte darin ein angezeigt werden help.html Datei, ein index.html Datei A Menschen.txt Datei A robots.txt Datei und Ordner für CSS, Bilder und JavaScript. Öffne das index.html Datei und verwenden Sie es als Ausgangspunkt. Sie können einfach den gesamten Beispielinhalt innerhalb der Body-Tags löschen. Auf diese Weise erhalten Sie Ihre grundlegende Seitenstruktur, die Sie benötigen. Die wichtigen Dinge, die Sie beachten sollten, wenn Sie Ihre eigenen machen .html Datei sind unten aufgeführt:

  • Ergänzen Sie die normalize.css zu deinem Kopf:
  • Ergänzen Sie die Foundation.css zu deinem Kopf:
  • Hinzufügen modernizr.js zu deinem Kopf:
  • Fügen Sie die jQuery und verschiedene Foundation-Skripte am Ende Ihres Dokumententexts hinzu (siehe Beispiel) index.html Datei für diese).

Das Foundation Grid System

Das erste und wahrscheinlich wichtigste, was Sie verstehen möchten, um Foundation zu verwenden, ist das Rastersystem. Es ist ein 12-Spalten-Raster, vollständig verschachtelbar und flüssig. Sie können sehr schnell arbeiten, indem Sie Rasterbreiten zuweisen, indem Sie einem Element einfach eine Klasse hinzufügen (z. B. class = 'klein-12 groß-8 Spalten' ).

Mit push-x und pull-x können Sie die Darstellungsreihenfolge des Rasters ändern

Mit push-x und pull-x können Sie die Darstellungsreihenfolge des Rasters ändern

Wenn Sie das Raster verwenden, um einem Element eine Breite zuzuweisen, können Sie eine Breite sowohl für kleine als auch für große Bildschirme zuweisen (die beiden in Foundation integrierten Standard-Haltepunkte). x ist die Anzahl der zugewiesenen Rasterspalten. Zum Beispiel auf einem kleinen Bildschirm, Small-X-Spalten oder auf einem großen Bildschirm, große x-Spalten . Sie können eine neue Instanz des Rasters erstellen, indem Sie die Reihe Klasse für ein Wrapper-Element. Im folgenden Beispiel haben wir also ein Element, das auf kleinen Bildschirmen die gesamte Breite und auf großen Bildschirmen nur die Hälfte der Breite umfassen sollte.

...

Über einen Menü-Symbol-Link kann der Benutzer auf tippen, um ein Menü auf kleinen Bildschirmen anzuzeigen

Über einen Menü-Symbol-Link kann der Benutzer auf tippen, um ein Menü auf kleinen Bildschirmen anzuzeigen

In unserem oben skizzierten Beispiel-Drahtmodell haben wir einen legalen Textbereich, der sich auf kleinen Bildschirmen über die gesamte Breite erstreckt, auf großen Bildschirmen jedoch nur über die Hälfte. Dies würde wie folgt erreicht werden:

Es ist auch erwähnenswert, dass die kleine Rasterbreite die einzige ist, die Sie zuweisen müssen, da das Grid der Foundation zuerst mobil ist. Wenn Sie nur eine kleine Breite zuweisen, wird die kleine Zuordnung durch die große Bildschirmgröße einfach beibehalten oder übernommen. Im folgenden Beispiel hätte das Element eine Breite von acht Spalten sowohl bei kleinen als auch bei großen Bildschirmgrößen.

...

Durch die Verwendung einfacher Klassen können Sie auch Dinge wie Versetzen, Zentrieren und Drücken oder Ziehen ausführen, um gegen die Reihenfolge der Quellen zu entwerfen. Im folgenden Beispiel würde das Element auf kleinen Bildschirmen die gesamte Breite umfassen, auf großen Bildschirmen jedoch 10 Spalten, dies jedoch für die Spalten 2 bis 11.

Im folgenden Beispiel würde das Element die ersten neun von zwölf Spalten auf kleinen Bildschirmen umfassen. Auf großen Bildschirmen würde es die Breite von neun Spalten überspannen, aber zentriert sein.

...

Im folgenden Beispiel würde das erste Element die letzten zwei von 12 Spalten umfassen, während das zweite Element die ersten 10 von 12 Spalten umfassen würde.

2 10, last

Navigation einrichten

In Foundation sind bereits einige verschiedene Navigationsmuster vorgebacken, die Sie in Ihren Drahtgittern verwenden können. Unser Drahtmodell zeigt oben auf dem Bildschirm ein Navigationsmenü mit dem Site-Namen und auf kleinen Bildschirmen einen einfachen Menü-Link. Zum Glück gibt es eine vorgefertigte Navigationskomponente, die dieser Beschreibung in Foundation entspricht. Nachfolgend finden Sie ein Beispiel, wie dies erreicht werden kann. An der Spitze unseres Körpers werden wir Folgendes hinzufügen.

Lassen Sie uns zusammenfassen, wie wir den Navigationsstil erreicht haben, den wir uns vorgestellt haben.

  1. Ein ... kreieren sind nicht Element und fügen Sie die Klasse hinzu obere Leiste dazu.
  2. Erstelle ein das Element mit der Klasse Titelbereich um unseren Site-Namen zu enthalten und das kleine Bildschirmmenü umzuschalten.
  3. Fügen Sie unseren Site-Namen als hinzu h1 innerhalb der ersten Bei der Element in unserem Titelbereich ul und fügen Sie die Klasse hinzu Name dazu.
  4. Neue hinzufügen Bei der mit dem Klassennamen Toggle-Topbar um den Menüumschaltlink für kleine Bildschirme zu enthalten.
  5. Fügen Sie die Klasse hinzu Menü-Symbol zum toggle-topbar li so dass der Menü-Link auf kleinen Bildschirmen das Menüsymbol anzeigt.
  6. Ein ... kreieren Sektion Element mit der Klasse oberer Stangenabschnitt um das eigentliche Menü zu enthalten das .
  7. Innerhalb der oberer Stangenabschnitt ein ... kreieren das mit einer Klasse von entweder richtig oder links (abhängig von unserer bevorzugten Menüausrichtung). Dies das enthält unsere Listenelemente mit Menü-Links.

Das vollständige Menü oben auf großen Bildschirmen enthält links den Site-Namen

Das vollständige Menü oben auf großen Bildschirmen enthält links den Site-Namen

Erstellen unseres Blockgitters

Unsere Drahtgitter-Skizze zeigt dann eine Rasteransicht von Portfolioelementen, die auf kleinen Bildschirmen zwei Elemente breit und auf großen drei Elemente breit ist. Foundation macht Blockgitter wie dieses ganz einfach, indem es ein vorgebackenes bereitstellt kleines Blockgitter-x und Großblock-Gitter-x Klasse, die für jedes ul-Element verwendet werden kann. Um unsere Blockrasterliste mit Portfolioelementen zu erstellen, verwenden wir das folgende Markup.



Sie werden feststellen, dass wir zuerst a definiert haben Reihe Wrapper und dann ein Container, der alle 12 Spalten umfasst. Wir tun dies, damit sich das Blockgitter nicht bis zum Rand des Bildschirms erstreckt, sondern die gleiche Auffüllung und Beibehaltung beibehält maximale Breite wie der Rest unserer Artikel in unserem Raster definiert.

Große Bildschirme zeigen drei Elemente pro Zeile. kleinere Bildschirme zeigen zwei

Große Bildschirme zeigen drei Elemente pro Zeile. kleinere Bildschirme zeigen zwei

Ich hoffe, Sie fühlen sich befähigt, HTML-Wireframing auszuprobieren. Dies ist eine wunderbare Zeit, um Webdesigner zu werden. Wir haben viele Werkzeuge zur Verfügung, um die Dinge, die wir tun, eleganter, effektiver und verständlicher zu machen.

Wörter: Jared Ponchot

Dieser Artikel erschien ursprünglich in Netzmagazin Ausgabe 246.

Filme mit Himmel im Titel