HTML5 und CSS3: Wireframing im Endprodukt

Es ist ein klassischer Fall von Photoshop versus Website. Bestehende Wireframing- und Prototyping-Tools sind nicht in der Lage, die Umgebung des Webs genau abzubilden.

Sie erstellen statische Designs, die nicht über die als Webbrowser bekannte Variable sichtbar sind. Und wenn Sie die endgültige Website erstellen, werden einige Elemente nicht genau wie ihre Entwurfsgegenstücke aussehen, und der Kunde wird diese geringfügigen Unterschiede in Schriftarten, Positionierung usw. bemerken.

Möglicherweise sind Sie mit einem Grafikprogramm vertrauter und das Rendern der Design-Iterationen scheint möglicherweise länger zu dauern, wenn Sie den HTML-Code von Hand codieren müssen.

Allerdings beginnen die Vorteile der Erstellung eines Wireframes in HTML von Anfang an die Alternativen zu überwiegen: Wir haben nicht nur neue Layoutelemente in HTML5 und leistungsfähigere Selektoren und Stile in CSS3, sondern durch die Kombination dieser Elemente können wir auch ein einfaches zusammenstellen Layout schnell.

Wir hören jeden Tag ein neues Unternehmen (37Signale, Atomiq Und Andere) erklären die Einführung von HTML-Prototyping. Der Hauptgrund dafür ist, dass der Prozess überraschend einfach ist, wenn Sie über die richtigen Tools verfügen. Sie werden gleich erfahren, wie einfach dieser Prozess sein kann, und wenn Sie fertig sind, haben Sie einen Vorsprung bei Ihrem nächsten Build.

Schnelles Layout mit HTML5

HTML5 bringt eine Reihe hervorragender neuer Strukturelemente mit, die es einfacher machen, schnell ein Dokument mit weniger Klassen und IDs zu erstellen. Sobald Sie den Zweck dieser Elemente verstanden haben, können Sie in wenigen Minuten ein grobes Seitenlayout erstellen.

Wenn Sie mit diesen neuen Elementen nicht vertraut sind, finden Sie hier eine kurze Einführung. Die neuen Elemente sorgen für eine übersichtlichere Dokumentstruktur als zuvor und ermöglichen es Ihnen, auf den häufigen Einsatz von Divs zu verzichten. Lachlan Hunt beschreibt diese Elemente gut in „Eine Vorschau von HTML5”:

  • Das Artikelelement stellt einen unabhängigen Abschnitt eines Dokuments, einer Seite oder einer Website dar. Es eignet sich für Inhalte wie News- und Blogbeiträge, Forenbeiträge und einzelne Kommentare.
  • Das Abschnittselement stellt einen allgemeinen Abschnitt eines Dokuments oder einer Anwendung dar, beispielsweise ein Kapitel.
  • Das Header-Element stellt den Header eines Abschnitts dar. Überschriften können mehr als nur die Überschrift des Abschnitts enthalten. Es wäre beispielsweise sinnvoll, Unterüberschriften, Informationen zum Versionsverlauf und Verfasser einzufügen.
  • Das Navigationselement stellt einen Abschnitt mit Navigationslinks dar. Es eignet sich sowohl für die Website-Navigation als auch für ein Inhaltsverzeichnis.
  • Das aside-Element ist für Inhalte gedacht, die in tangentialem Zusammenhang mit den umgebenden Inhalten stehen, und ist nützlich zum Markieren von Seitenleisten.
  • Das Fußzeilenelement stellt die Fußzeile eines Abschnitts dar. Es enthält typischerweise Details zu diesem Abschnitt, wie den Namen des Autors, Links zu verwandten Dokumenten und Copyright-Daten.
Lesen:  Vertrautheit mit Videobearbeitungstools für Einsteiger und Profis

In meiner Beispielwebsite möchte ich eine zentrierte Seite mit einer Kopfzeile, einer Seitenleiste links, einem Bereich für den Hauptinhalt und einer Fußzeile. Ich habe HTML5-Elemente verwendet, um die Struktur zu markieren, mit einem Artikelelement, das alles enthält.

Beispiel

>

Diese Elemente und Divs sind dimensionslos und unsichtbar, es sei denn, Sie legen Stilattribute fest oder platzieren Inhalte darin. Um sie funktionsfähig zu machen, müssen wir ihnen vorübergehend Höhen zuweisen. Wir sollten auch die HTML-Elemente auf display: block; damit der Browser sie erkennt (für den IE ist zusätzliche Arbeit erforderlich).

Artikel, Kopfzeile, Navigation, Seite, Abschnitt, Fußzeile { display: block; Mindesthöhe: 100 Pixel; }

Bevor wir die Elemente positionieren, müssen wir in der Lage sein, das Layout zu visualisieren. Die ideale Lösung zur Visualisierung der Struktur ohne Inhalt wäre später leicht zu entfernen und hätte keinen Einfluss auf das Design.

Option 1: Umrisse

Der Gliederung Die Einstellung ist mit allen modernen Browsern kompatibel und hat keinen Einfluss auf die Breite von Elementen, während dies beim border-Attribut der Fall ist.

Artikel, Kopfzeile, Navigation, Seite, Abschnitt, Fußzeile { Gliederung: 1px solid #000; }

Option 2: HSLa

Mit HSLa (oder sogar RGBa) erhalten Sie eine bessere Darstellung der Hierarchie der Elemente, da die Deckkraft überlappende Elemente dunkler erscheinen lässt. Wenn Sie jedoch vorhaben, im Modell grundlegende Hintergrundfarben zu verwenden, funktioniert diese Methode möglicherweise nicht gut.

Artikel, Kopfzeile, Navigation, Seite, Abschnitt, Fußzeile { Hintergrund: hsla(200, 30%, 30%, .4); }

Positionierung

Die Methode zur Positionierung von Elementen hängt von Ihren persönlichen Vorlieben ab und Sie haben zahlreiche Optionen: Messwerkzeuge im Browser oder Betriebssystem, Hintergrundbilder mit Raster (die ich ausgewählt habe), CSS-Frameworks mit Raster- und Layoutunterstützung oder ähnliche Software Traumweber. Die Positionierung ist der wichtigste Teil und muss von Anfang an richtig funktionieren. Der Code, den Sie hier schreiben, wird höchstwahrscheinlich im Endprodukt verbleiben.

Lesen:  Die besten Möglichkeiten, eine außergewöhnliche Lösung für die Lohn- und Gehaltsabrechnung zu finden

In meinem Beispiel habe ich der Seite eine feste Breite gegeben, mit einer Seitenleiste links und Inhalt rechts, jeweils zwischen Kopf- und Fußzeile.

Körper > Artikel { Breite: 760px; Rand: 0 automatisch; } Artikel Artikel { Überlauf: versteckt; Breite: 750px; Rand: 20px 0; Polsterung: 5px; } beiseite { width: 150px; schweben: links; } section { float: right; Breite: 590px; }

Während des gesamten Prozesses kann ich jeden Abschnitt sehen und sehen, wo er angezeigt wird. Hier ist das Ergebnis:

Machen Sie sich keine Gedanken über die Browserkompatibilität, bis Sie zum Endprodukt gelangen. Ich empfehle dringend, Notizen über CSS-Kommentare zu hinterlassen und zu markieren, zu welchen Bereichen Sie zurückkehren müssen (das sind in erster Linie die Selektoren und Attribute, die bei bestimmten Browsern besondere Sorgfalt erfordern).

Prototyping-Inhalte

Wenn das Layout fertig ist, müssen Sie möglicherweise Beispielinhalte hinzufügen. Die heute gebräuchlichste Methode besteht darin, Stücke von Lorem Ipsum und mit Wasserzeichen versehene Stockfotos auf die Seite zu werfen. Warum das Rad neu erfinden?

HTML-Ipsum ist eine ausgezeichnete Website, die Lorem Ipsum-Texte in gemeinsames Markup einbettet. Es könnte nicht einfacher sein, alles auf einer Seite zu erfassen.

PlaceHold.it bietet Platzhalterbilder in jeder gewünschten Größe, indem jedes Bild über eine URL-Anfrage aufgerufen wird (z. B. https://placehold.it/350×150, wobei der erste Wert die Breite und der zweite die Höhe ist):

PlaceKitten Funktioniert genau wie PlaceHold.it, außer mit niedlicheren Bildern:

Anstatt erweitertes JavaScript für Karten hinzuzufügen, können Sie eine einfache Karte als Bild über importieren Google Statische Karten. Es ist ein API-Schlüssel oder eine eindeutige Signatur erforderlich, aber Sie müssen diese trotzdem erhalten, wenn das Endprodukt eine Karte enthalten soll.

Verhalten simulieren

Moderne Websites enthalten Funktionen, die über statische Wireframes nur schwer zu kommunizieren sind: Erweitern und Reduzieren von Elementen, Übergänge, Drag & Drop, dynamische Menüs usw. Irgendwann müssen Sie sowieso eine JavaScript-Bibliothek verwenden, also laden Sie jetzt eine Bibliothek und arbeiten Sie in einigen Fällen mit Skripten Grundfunktionen würden nicht schaden.

Lesen:  Was werden die Menschen im letzten Moment tun, wenn die Erde zerstört wird?

Sie können einen Download vermeiden, indem Sie jQuery aus seinem Content-Netzwerk laden. Imitieren Sie das beabsichtigte Verhalten mit ein paar Funktionen, anstatt den eigentlichen Code zu schreiben. Wenn beispielsweise ein Element angezeigt werden soll, wenn auf einen Link geklickt wird (z. B. ein Anmeldefenster oder ein Kontaktformular), erstellen Sie ein schnelles Drahtmodell des Fensters, blenden Sie es standardmäßig aus und verwenden Sie dann jQuery, um es beim Klicken anzuzeigen.

Solange Sie gerade genug Arbeit leisten, um das Verhalten nachzuahmen, kann der Kunde das Ergebnis selbst sehen, anstatt sich mit einer Reihe von Flussdiagrammen oder Erklärungen herumschlagen zu müssen.

Zustände simulieren

Wenn Sie Wireframes für eine Webanwendung und nicht für eine Website erstellen, möchten Sie möglicherweise schnell mehrere Zustände einer einzelnen Seite anzeigen können. Sie können verschiedene Kopien des Drahtmodells erstellen, die jeweils so geändert werden, dass sie einen bestimmten Zustand anzeigen, oder Sie können Folgendes verwenden PolyPage.

PolyPage ist ein jQuery-Plug-in, mit dem Sie Klassen in Ihrem Markup verwenden können, um Elemente darzustellen, die für verschiedene Zustände vorhanden wären (z. B. angemeldet und abgemeldet). Sie können jeden Status mit einem Link umschalten und so dem Kunden die Unterschiede einfach demonstrieren, ohne mehrere Seiten zu benötigen.

Abschließende Gedanken

Während die Originaldesigns auf Papier oder im PDF immer großartig aussehen, hat die Erstellung der HTML-Seiten von Anfang an mehrere Vorteile.

Sie sparen die Zeit, die Sie für die Neuerstellung des Designs im Code aufgewendet hätten. Sie vermeiden die Verwirrung, sich zu fragen, warum das Endprodukt nicht genau wie das Original aussieht. Und Sie sparen sowohl Ihnen als auch dem Kunden Zeit, Geld und Nerven.

Michael Botsko ist Webentwickler und Webtechnologielehrer in Portland, Oregon. Es macht ihm Spaß, sowohl am Kunden als auch am Arbeitsplatz zu arbeiten Open Source Projekte mit Botsko.net, GMBH. Wenn er nicht arbeitet, verbringt er gerne Zeit mit seinen beiden Kindern und seiner wunderbaren Frau.

Welche Rapid-Layout- und Prototyping-Tools habe ich übersehen? Welche Vorteile hat es, zuerst zu entwerfen und später zu bauen?

Aktuelle Artikel:

Empfohlen