Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Workflow

Schnelle und einfache interaktive Wireframes mit Bootstrap

by
Length:LongLanguages:

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Webdesign ist ein sich entwickelnder Beruf. Obwohl ein scharfes Auge für Farbe, Typografie und Layout immer wichtig sein wird, werden diese Fähigkeiten durch das Bedürfnis übertroffen, die Motivationen der Benutzer zu verstehen. Es reicht nicht aus, eine Website zu erstellen und darauf zu warten, dass der Datenverkehr eingeht. Websites müssen den Benutzern helfen, ihre Ziele mit einem Minimum an kognitiver Reibung zu erreichen. Bootstrap kann Webprofis dabei helfen, diese Ziele zu definieren und ein Killer-Erlebnis zu schaffen.

Wir machen keine Seiten, wir machen Filme

Ich möchte sagen, wir machen keine Seiten, wir machen Filme. Benutzer erwarten, dass Websites schnell geladen werden, ansprechende Inhalte und intelligente Interaktivität bieten. So wie Filme von schnellen Schnitten, Beleuchtung und Stimmung abhängen, um Benutzer anzulocken, sind Websites auf Übergänge, Interaktivität und Timing angewiesen. Diese Details gehen häufig während der Entwurfsphase verloren - oder werden schlimmer noch nie berücksichtigt. Während ein Übergang, der 0,5 Sekunden dauert, wenn er 0,25 Sekunden dauern sollte, eine Anwendung normalerweise nicht versenkt, ist es diese Detailstufe, die gut von großartig trennt.

Ich werde Ihnen zeigen, wie Bootstrap statische Drahtgitter ersetzen und diese Details früher und mit weniger Aufwand in den Vordergrund rücken kann.


Schritt 1: Projekt einrichten

Der erste Schritt besteht darin, die neuesten stabilen Bootstrap- und jQuery-Builds herunterzuladen.

Obwohl jQuery von einer Reihe von CDNs gehostet wird, ziehe ich es vor, alle Dateien lokal einzuschließen, damit ich mit oder ohne Webzugriff arbeiten kann. Richten Sie eine Verzeichnisstruktur wie die folgende ein und kopieren Sie die nicht minimierten Bootstrap-CSS-, Bootstrap Responsive-CSS- und Javascript-Dateien. Passen Sie Namen und Speicherorte nach Bedarf an. Wenn Sie diese Struktur verwenden, können Sie im nächsten Schritt auch meine HTML-Vorlage nutzen.

Jetzt wäre ein guter Zeitpunkt, um ein drittes Stylesheet zu erstellen, das ich user.css nennen werde. Diese Datei wird verwendet, um Bootstrap-Stile nach Bedarf zu überschreiben.

Directory structure for Boostrap wireframes


Schritt 2: Erstellen Sie index.html und überprüfen Sie die Pfade

Dies ist das einzige andere Setup, das erforderlich ist, um ein interaktives Drahtmodell zu erstellen. Erstellen Sie eine Datei in Ihrem Projektverzeichnis root und nennen Sie sie index.html. Nachdem Sie die Datei erstellt haben, kopieren Sie diesen Code und speichern Sie ihn.

Öffnen Sie einen Webbrowser und ziehen Sie die gespeicherte Datei index.html hinein. Wenn alle Includes ordnungsgemäß geladen sind, sollte etwas Ähnliches wie im folgenden Screenshot angezeigt werden. Wenn das Warnfeld nicht angezeigt wird, öffnen Sie die Konsole oder den Webinspektor und prüfen Sie, ob eine Datei nicht geladen werden konnte. Entfernen oder kommentieren Sie nach der Fehlerbehebung die Warnzeile in der Funktion $(document).ready am Ende der Seite und machen Sie sich bereit, Bootstrap-Drahtmodelle zu erstellen.

Web browser with Javascript alert box open


Schritt 3: Ihre grobe Inhaltsblöcken

Wenn alle erforderlichen Dateien vorhanden sind, können wir mit dem Schruppen der Hauptinhaltsblöcke beginnen. Die meisten Websites (Apps) enthalten eine Kopfzeile, eine primäre Navigation, einen Hauptinhaltsbereich, eine Seitenleiste und eine Fußzeile. Ich halte das Layout bewusst einfach, um die Leistungsfähigkeit des Bootstrap-Rastersystems schnell zu veranschaulichen.

Das einzige strukturelle Markup auf der Seite ist bisher unser Div mit der Klasse "container".

Hinweis: Dieses div ist ein erforderlicher enthaltender Block für Bootstrap. Wir werden unsere gesamte Wireframe-Anwendung darin erstellen.

Bootstrap erfordert auch den neuen HTML-Doctype und generiert seine Stilregeln mit Klassen anstelle von Tag-Namen. Diese Entscheidungen bedeuten, dass wir einige neue HTML5-Elemente verwenden können: header, navigation, section, article, aside, und footer. Wenn Sie Ihr Layout in Internet Explorer testen möchten, müssen Sie entweder Modernizr oder HTML5 Shim herunterladen und einbinden. Moderne Versionen von Firefox, Chrome und Safari unterstützen nativ den HTML5-Standard.

Bootstrap basiert auf einem 12-Spalten-Raster. Es werden zwei Klassen verwendet, row und span, um Container auf Blockebene zu erstellen. Durch Anwenden der Zeilenklasse auf einen Container wie Div oder Header wird sie automatisch über die gesamte Breite von 940 Pixel ausgedehnt. Durch Hinzufügen von Containern mit der Klasse spanN (N ist ein Platzhalter für die Anzahl der Spalten) können Sie problemlos Inhaltsvertiefungen, Seitenleisten und andere Layoutblöcke erstellen, ohne Floats oder andere Macken verwalten zu müssen.

Um schnell einsatzbereit zu sein, werde ich eine einfache Kopf-, Navigations-, Haupt-, Seiten- und Fußzeile erstellen. Ersetzen Sie "Ihr Layout wird hier angezeigt" durch den folgenden Code.

Ich habe user.css auch einige Grundregeln hinzugefügt, um die Identifizierung der Inhaltsblöcke zu erleichtern. Wenn alles gut gegangen ist, sollten Sie eine Reihe von grauen Blöcken mit schwarzem Beschreibungstext sehen.

Multiple content blocks properly floated and ordered


Schritt 4: Fest, Fluid, Responsiv!

Feste und fluide Layouts gibt es schon lange. Responsive Layouts sind relativ neu und kombinieren die besten Teile von beiden. Es bietet Designern Werkzeugs, mit denen sie ihre Designs für mehrere Gerätegrößen (Smartphones, Tablets, schmale und Breitbild-Displays) optimieren können, ohne für jede eine separate Codebasis verwalten zu müssen. Ändern Sie die Größe Ihres Browserfensters, um das reaktionsschnelle Stylesheet von Bootstrap in Aktion zu sehen, und erhalten Sie ein Gefühl für die großartige Möglichkeit, einmal zu schreiben und Drahtmodelle in einer Reihe von Umgebungen zu testen.

Browser verwenden CSS-Haltepunkte, um zu entscheiden, wie eine Seite basierend auf Messungen der minimalen und maximalen Breite gerendert werden soll. Haltepunkte in Bezug auf die Browserbreite beginnen immer mit @media (width argument) und sind sehr einfach zu lesen. Sie können auch ein zweites Argument in einer anderen Klammer enthalten, was eine große Flexibilität für mehrere Geräte ermöglicht.

Im folgenden Codebeispiel habe ich mehrere Regeln erstellt, die Hintergrundfarben für vier gängige Bootstrap-reaktionsfähige Haltepunkte definieren. Diese wurden geringfügig geändert, um einen reibungslosen Übergang von einer Farbe zur nächsten anzuzeigen.

Wir haben ein vollständig ansprechendes Layout erstellt, aber wir vermissen immer noch die guten Sachen. Der Rest dieses Tutorials zeigt Ihnen, wie Sie durch Inhalt und Interaktivität visuelles Interesse wecken können.


Schritt 5: Ton aus!

Nachdem das Gerüst vorhanden ist, können wir mit dem Hinzufügen von Inhalten beginnen. Ich halte diese Ansichten absichtlich generisch - graue Kästchen mit minimalen Stilen ermutigen Beta-Benutzer, sich voll und ganz auf die Interaktion zu konzentrieren und sich nicht zu sehr auf den visuellen Stil einzulassen.

Die Hero Unit wurde entwickelt, um einen Front-and-Center-Aufruf zum Handeln zu erstellen. Code-Downloads, neue Anwendungen oder aktuelle Nachrichten sind gute Kandidaten. Für unsere Zwecke werde ich es verwenden, um ein größeres Software-Upgrade anzukündigen. Ersetzen Sie die vorhandenen h2- und p-Tags im Hauptinhalt durch den folgenden Code und aktualisieren Sie Ihren Browser, um den Helden in Aktion zu sehen.

Die Heldeneinheit ist ein guter Anfang, aber die Leute wollen sehen, wohin ihre Zeit und ihr Geld gehen werden. Eine Bildergalerie ist eine starke Fortsetzung und lässt sich schnell implementieren. Bilder werden mit demselben spanN-Raster angelegt, das Layoutblöcke definiert, und können problemlos um Überschriften, Tags, Beschriftungen oder Mikrodaten erweitert werden. Im Moment werden wir Placehold.it verwenden, um drei graue Kästchen unter unserer Heldeneinheit zu generieren.

Ich bin ein großer Anhänger des semantischen Markups, daher werden wir die HTML5-Tags figure und figcaption für mehr Kontext verwenden. Selbst wenn keiner Ihrer Benutzer mit einem Screenreader oder einem anderen Hilfsmittel surft, ist das beschreibende Markup eine bewährte Methode für die UX- und Front-End-Entwicklung.

Fügen Sie eine ungeordnete Liste und einige Bilder in den Hauptinhalt unterhalb Ihres Heldenelements ein:

Eine weitere Browseraktualisierung sollte im Breitbildmodus ein ähnliches Layout ergeben.

Hero unit and 3 inline images


Schritt 6: Navigation mit Registerkarten

Die Heldeneinheit und die Bilder sorgen für großes visuelles Interesse, heben jedoch unsere nächste Herausforderung hervor: Die Aufzählungszeichen-Links stehen für ein geeignetes Navigationselement.

Bootstrap verfügt über mehrere integrierte Navigationsstile, daher sollten Sie experimentieren. Ich werde hier die Navigation mit Registerkarten hervorheben. Unsere erste Aufgabe ist es, die grundlegende Navigationsliste zu ersetzen:

Als nächstes entfernen wir den grauen Hintergrund aus unseren header- und nav elementen. Fügen Sie die folgenden vier Zeilen am Ende Ihrer Datei user.css hinzu.

Wir müssen auch den Hauptinhalt gut aktualisieren. Ich habe dem section element eine Klasse von tab-content hinzugefügt und den Helden und die Bilder in ein div mit class="tab-pane active" und id="tab1" eingeschlossen. Ich habe unten drei zusätzliche div-Elemente hinzugefügt, deren IDs mit den Navigationslink-Tags übereinstimmen. Diese drei Blöcke sind Stubs, die später ausgefüllt werden müssen, aber zum Testen nützlich sind. Aktualisieren Sie das section-Markup und aktualisieren Sie den Browser. Wenn alles richtig läuft, sollten Sie in der Lage sein, zwischen den Registerkarten zu wechseln und den gestoppelten Inhalt anzuzeigen.

Tab 4 Contact Us selected to show navigation functionality


Schritt 7: Werkzeugtips und Popovers

Tabs sind cool, aber sie sind auch nur ein Anfang. Obwohl das Internet schnell segmentiert und anwendungsähnlich wird, wird es immer noch durch Links von einer Ressource zur anderen gesteuert. Links werden verwendet, um Seiten miteinander zu verknüpfen, zusätzlichen Kontext bereitzustellen und manchmal sekundäre Funktionen zu speichern. Werkzeugtips und Popover sind gute Beispiele für sekundäre Funktionen. Sie lassen sich leicht mit benutzerdefinierten Datenattributen implementieren.

Was sind Datenattribute? Per John Resig, der 2008 klar über diese Geräte schrieb:

In der Spezifikation für benutzerdefinierte Datenattribute heißt es einfach, dass jedes Attribut, das mit "data-" beginnt, als Speicherbereich für private Daten behandelt wird (privat in dem Sinne, dass der Endbenutzer es nicht sehen kann - es hat keinen Einfluss auf das Layout oder Präsentation).

Dies bedeutet, dass wir unseren Link-Tags benutzerdefinierte Daten hinzufügen können und Bootstrap diese entsprechend behandelt.

Angenommen, unsere Bildergalerie besteht aus technischen Informationen. Die Beschreibungen können eine Terminologie enthalten, die für den durchschnittlichen Benutzer unklar ist. Aktivieren Sie QuickInfos, indem Sie den HTML-Code der Bildergalerie ersetzen, beginnend mit der ungeordneten Liste, und am Ende der Seite eine Funktion jQuery $(document).ready und die Werkzeugtip-Funktion von Bootstrap hinzufügen.

Aktualisieren Sie mit HTML und Javascript den Browser und fahren Sie über die Galerie-Links, um Ihre Werkzeugtips anzuzeigen.

Basic search typeahead functionality

Wir werden jetzt unsere Bildergalerie (zumindest drahtgebunden) mit Popovers teilen. Popovers werden aktiviert, indem Datenattribute in Ihr Markup und ein weiteres JavaScript-Snippet aufgenommen werden.

Fügen wir zunächst jeder unserer Bildunterschriften eine Schaltfläche zum Teilen hinzu. Fügen Sie den Codeblock direkt unter dem abschließenden paragraph-Tag in jeder figcaption hinzu.

Es mag seltsam erscheinen, jedes Element in eine eigene Zeile zu setzen, aber ich habe festgestellt, dass Bootstrap in Bezug auf wohlgeformte Markups ziemlich wählerisch ist und es einfacher ist, Fehler zeilenweise zu erkennen. Wir müssen ein paar Zeilen JavaScript schreiben und die Popovers sind fertig.

Dieses Mal haben wir eine allgemeine Linkfunktion hinzugefügt, um zu verhindern, dass unser Bildschirm springt, wenn Benutzer auf die Schaltfläche "Teilen" klicken. Ohne zu weit in Einzelheiten zu gehen, registriert jede Aktion auf einer Webseite ein Ereignis, das wir hier als Funktionsargument 'e' erfassen. Wenn Sie dieses Ereignis abfangen und durch unser benutzerdefiniertes JavaScript ersetzen, bleibt die Seite dort, wo sie sollte, und unser Popover wird wie erwartet angezeigt.

Basic share functionality shown in a small popover


Schritt 8: Modales Windows erstellen

Wütend. Nachdem werden modale Fenster ein Kinderspiel sein. Bootstrap stellt modale Fenster zur Verfügung, indem oben am Container ein HTML-Block und eine Schaltfläche oder ein Link mit einer href hinzugefügt werden, die der ID des modalen Fensters entspricht. Erstens das modale HTML.

Das einzige andere, was Sie tun müssen, ist unseren Auslöser hinzuzufügen. Da dies eine Anwendung ist, können wir zu Recht davon ausgehen, dass es eine Anmeldesequenz gibt. Ich habe die header geändert, um den Bannerbereich zu verkürzen, und unsere Anmeldeschaltfläche neben dem Suchfeld hinzugefügt. Ändern Sie den folgenden HTML-Code und fügen Sie das CSS am Ende Ihrer Datei user.css hinzu.

Aktualisieren Sie und klicken Sie auf die Schaltfläche Anmelden. Sie sollten mit einer schnellen Animation und dem modalen Fenster mit Front und Mitte belohnt werden.

Hero unit and 3 inline images


Schritt 9: Wie finde ich noch etwas?

Dieses interaktive Drahtmodell kommt gut voran. Wir haben eine funktionierende Navigation, viele Blöcke zum Hinzufügen von Inhalten, Interaktivität und ein ansprechendes Layout. Was wir nicht haben, ist eine Möglichkeit, nach Dingen zu suchen, selbst im Sinne eines Benutzertests. Bootstrap hat uns wieder einmal abgedeckt.

Benutzer sind es gewohnt, dass das Suchfeld in der oberen rechten Ecke von Desktop-Displays und in schmaleren Displays direkt unter der Überschrift angezeigt wird. Wir beginnen damit, das header-Element in zwei Blöcke zu unterteilen und dem kleineren eine einzelne Eingabe hinzuzufügen:

Wir werden der Datei user.css auch einige Zeilen CSS hinzufügen, um das Suchfeld oben auf der Seite zu verschieben.

Wir werden auch etwas mehr JavaScript schreiben, damit der Typeahead ordnungsgemäß funktioniert. Ich werde es auf ein Minimum beschränken und erklären, was jedes Skript tut.

Ich stelle mir vor, einige von Ihnen denken: „Ich bin ein Web-Designer, kein Entwickler. Fairer Punkt, aber wir müssen zumindest die JavaScript-Gewässer testen, um die volle Leistung von Bootstrap freizuschalten. Und außerdem: Kunden sind begeistert, wenn ein Eingabefeld Ergebnisse vom ersten eingegebenen Buchstaben zurückgibt.

Fügen Sie das JavaScript-Snippet unten zu Ihrem vorhandenen Skript-Tag hinzu und klicken Sie auf Aktualisieren. Wenn es richtig funktioniert, sollte ein Dropdown-Menü mit vorgeschlagenen Ergebnissen angezeigt werden, nachdem Sie einen oder mehrere Buchstaben in das Suchfeld eingegeben haben.

Okay, hier ist, was der Code tut. Die var search = $('input#search') weist jQuery an, einen Verweis auf das Suchfeld in der search nach benannten Variablen zu speichern. Dann rufen wir die jQuery-Funktion für unsere Suchvariable auf oder rufen sie auf und rufen auch die Bootstrap-Typeahead-Methode auf. In der Typeahead-Klammer sehen Sie eine sich öffnende und schließende, schnörkellose Klammer { }. Diese Klammern werden verwendet, um ein JavaScript-Objekt zu erstellen und einige Informationen zu unserem Suchfeld zu speichern.

Die erste Information ist das source array. Im einfachsten Fall ist ein Array eine geordnete Liste von Dingen. Hier ist eine Liste der Gitarristen. Jeder dem Array hinzugefügte Gitarrist ist als Ergebnis unserer Sucheingabe verfügbar. Der zweite Teil des Objekts, items: 5, teilt dem Suchfeld die maximale Anzahl der anzuzeigenden Ergebnisse mit.

Dies sind nur zwei von mehreren verfügbaren Optionen. Ich empfehle Ihnen, sich die Dokumentation zum Bootstrap-Typeahead anzusehen und mit verschiedenen Konfigurationen zu experimentieren. Der letzte Bildschirm für diesen Schritt sollte ungefähr so aussehen:

Basic search typeahead functionality


Schlussfolgerung

Bootstrap ist zu einem festen Bestandteil meines Front-End-Workflows geworden. Es ermöglicht mir zu testen, wann Iterationen relativ schmerzlos sind, und mehrere verschiedene Ansätze gleichzeitig auszuprobieren. Diese Entdeckungen helfen dabei, endgültige Entwurfsentscheidungen zu treffen und zeitaufwändige Änderungen während des gesamten Entwicklungszyklus zu vermeiden. Indem ich Drahtgitter als einen kritischen Teil der Benutzererfahrung betrachte, kann ich Werkzeugs erstellen, die sich natürlicher anfühlen und erfreulicher sind.

Ich habe gerade die Oberfläche von Bootstrap zerkratzt und was mit seinem Teilesatz möglich ist. Wireframes sind ein großartiger Ort, um sich mit den Vor- und Nachteilen vertraut zu machen. Sie sollen Lo-Fi-Modelle sein, frühe Testmodelle für zukünftige Anwendungen. Kunden und Kollegen können unsere Annahmen testen und uns dabei helfen, schnell und mit minimalem Zeitverlust zu verfeinern.

Ich hoffe, hat Ihnen dieses Tutorial gefallen, danke für das Lesen!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.