Tag für Tag als Designer zu arbeiten kann mühsam sein. Glücklicherweise hat sich das Feld erweitert und der Prozess ist einfacher geworden. Es gibt viele kostenlose Tools und Ressourcen.
Wireframes verleihen Designmodellen Eleganz. Sie stellen die Grundstruktur einer Website dar, ohne Farben und Verbesserungen.
Sie werden verwendet, um Designkonzepte nur auf das Nötigste zu betrachten, und sie können eine nützliche Perspektive auf jedes Projekt bieten.
Die meisten Wireframes werden in Softwarepaketen wie Adobe Photoshop und Fireworks erstellt, aber auf einigen Websites können Sie Wireframe-Bilder direkt im Browser erstellen.
In diesem Beitrag gehen wir auf die Codierung eines einfachen Wireframe-Bildes in HTML und CSS ein und sehen, wie es dem kreativen Prozess zugute kommen kann.
Warum die Mühe?
Warum Zeit damit verbringen, die Struktur einer Website zu skizzieren? In manchen Fällen mag es unnötig sein, aber es kann hilfreich sein, wenn Sie in einer Sackgasse stecken oder Schwierigkeiten haben, das große Ganze zu sehen.
Davon können sowohl Designer als auch Kunden profitieren. Bei bezahlter Arbeit sind Sie dafür verantwortlich, den Kunden zufrieden zu stellen. Die Darstellung der Grundstruktur ihrer bald zu gestaltenden Website kann den Kunden Erleichterung und ein Gefühl der Kontrolle über den gesamten Prozess verschaffen.
Wenn das Design jedoch sehr einfach ist oder eine einfache Struktur aufweist, lohnt es sich möglicherweise nicht, ein Wireframe zu erstellen. Das Ganze mit Schaltflächen und Farbe in Photoshop nachzubilden, könnte genauso schnell gehen.
Die Entscheidung, welche Schritte unternommen werden sollen, erfordert Zeit und kritisches Denken. Schließlich ist ein Wireframe lediglich ein Werkzeug. Es wird von vielen Webdesignern unterschätzt, ist aber überraschend nützlich, wenn man es einmal verstanden hat.
Prototyping von Wireframes im Code
Seit Jahren ist die Adobe-Designsoftware die führende Suite für die Wireframe-Erstellung, aber das Web hat erhebliche Veränderungen erfahren und entwickelt sich immer noch weiter.
Der Aufstieg von Codierungsstandards und die Zunahme von HTML5-Dokumentation sind große Schritte hin zu einem gemeinsamen Netz. Nun ist das Codieren eines einfachen Wireframes in HTML und CSS nicht mehr Arbeit als die Bewältigung der Aufgabe in Fireworks.
Mit Wireframes können Sie ein Projekt aus mehreren Blickwinkeln frontal angehen. Sie können sogar die Kompatibilität mit CSS2- und CSS3-Techniken und Browsern testen. Die Dinge müssen am Anfang nicht komplex sein; Ein Wireframe dient lediglich als solide Grundlage für den Beginn des Codierens.
Auch das Teilen von Inhalten wird mit einem Wireframe einfacher. Sie können alle benötigten Dateien auf jedem Webserver hosten, ein Demo-Verzeichnis einrichten und Live-Updates an Kunden und Projektleiter weiterleiten. Auch das Vornehmen von Änderungen, wie z. B. schnelle Anpassungen der Ränder und Breiten im CSS des Dokuments, ist einfach.
Standardisieren Sie den Code für die Langstrecke
Wireframes sparen Zeit im Entwicklungsprozess. Wenn die CSS-Stile für Ihre Grundelemente bereits geschrieben sind, ist der Rest nur Füllmaterial (wohlgemerkt ein wichtiges Füllmaterial).
Beginnen Sie richtig, mit dem richtigen HTML-Dokumenttyp und der richtigen Verzeichnisstruktur. Dokumenttypen unterscheiden sich nicht allzu sehr voneinander. Sie können darüber auf der lesen W3C-Spezifikationsseite. Im alten World-Wide-Web-Modell spielen sie keine große Rolle, aber HTML5 ist gründlich und ermöglicht das Wachstum Ihrer Website.
Sie müssen ohnehin die Kompatibilität auf möglichst vielen Betriebssystemen und Browsern testen, und die Wireframe-Prototyping-Phase ist dafür der perfekte Zeitpunkt, da Sie sich bereits auf die Gestaltung des Layouts konzentrieren.
Dies ist auch ein guter Zeitpunkt, um an einer mobilfreundlichen Vorlage zu arbeiten. Wenn sich die Struktur ändert, sollten Sie in der Lage sein, Ideen zu integrieren und den Code des Dokuments zu manipulieren. Die Entwicklung wird einfacher, da weniger Code Ihre mobilen und benutzerdefinierten Stile überladen könnte.
Beginn der Struktur des Dokument-Drahtmodells
Der beste Weg ist, mit einer leeren Tafel anzufangen, denn so ist die Kreativität am größten. Die offensichtlichen Elemente, die in den Code (wie in jedes andere Webdokument) einbezogen werden müssen, sind HTML, Head und Body.
Das ist das Skelett. Damit das Drahtmodell gut aussieht, benötigen Sie noch ein paar weitere Elemente. Bemerkenswert ist das div (oder die Division). Dies ist das Element, das zum Einrahmen bestimmter Bereiche der Seite verwendet wird, z. B. des Logos oder des Suchfelds.
Divs sind die Bausteine von HTML5-Wireframe-Prototypen. Alles und jedes kann in ein Div eingeschlossen werden, und das Styling ist ein Kinderspiel, wenn Sie Klassen und IDs auf Elemente anwenden. Ein Großteil Ihres Hauptcodes wird in Divs aufgeteilt, da es sich dabei um die grundlegenden Blockelemente handelt.
Mit den neuen HTML5-Spezifikationen wurde ein Element namens nav eingeführt. Dies kann mit einer ungeordneten Liste und einigen CSS-Eigenschaften kombiniert werden, um den Hauptnavigationsbereich Ihrer Website zu erstellen und zu definieren. Nachfolgend finden Sie ein einfaches Beispiel dafür, wie Sie Ihre Navigation strukturieren könnten:
Arbeiten mit Kopf- und Fußzeilenelementen
Im obigen Beispiel werden Sie feststellen, dass ich ein Div mit der ID „Header“ verwendet habe, um meine Überschriftennavigation zu trennen. Das ist vollkommen akzeptabel und am obigen Code ist nichts falsch. HTML5 bietet uns jedoch andere Optionen.
Mit dem Header-Element in den neuen HTML5-Spezifikationen können Sie Ihre Struktur weiter definieren, was vor allem für Webseiten-Crawler und Screenreader nützlich ist, die einen „Überschriften“-Teil des Inhalts abtrennen. Für Ihre Benutzer sollte es keinen Unterschied machen, außerdem bleibt Ihr Code in Form und zeigt, dass Sie wirklich verstehen, wovon Sie sprechen.
Ein weiteres interessantes Element, das hinzugefügt wurde, ist die Fußzeile. Dieselbe Idee: Verwenden Sie dieses Element anstelle eines div, um den Inhalt Ihrer Fußzeile zu trennen. Im Allgemeinen sind Fußzeilen nicht im Weg und enthalten grundlegende Informationen über die Website oder das Unternehmen.
Sie könnten der Fußzeile Links hinzufügen und einige davon mithilfe eines Navigationselements definieren, aber das wäre nicht ratsam. Das Navigationselement gibt den Hauptnavigationsbereich an, daher wäre es überflüssig, es in die Fußzeile oder an eine andere Stelle einzufügen.
In diesem Szenario ist es am besten, das Fußzeilenelement zu verwenden und die Navigationslinks als ungeordnete Liste zu trennen. Sie könnten eine spaltenförmige Fußzeile mit mehreren Spalten mit Links verwenden. Dies können separate div-Elemente sein, die nebeneinander angezeigt werden und alle in der Hauptfußzeile eingeschlossen sind.
CSS-Techniken zum Gestalten von Wireframes
Wenn Sie HTML verstehen und eine Weile mit dem Web gearbeitet haben, dann kennen Sie wahrscheinlich einige grundlegende CSS-Kenntnisse. Viele der neuen Funktionen von CSS3 dienen dem Hinzufügen von ausgefallenen abgerundeten Ecken und Schlagschatten zu Text.
Ich möchte nicht behaupten, dass CSS-Stil nicht wichtig ist, aber das Kernlayout und die Positionierung machen letztendlich die Struktur Ihrer Website aus. Mit CSS definieren Sie Breite, Rand und Abstand. Dies sind die grundlegenden Eigenschaften der meisten Webelemente und der letzte Schritt bei der Erstellung eines wirklich herausragenden Wireframes.
Wenn Sie von den neuen Eigenschaften und Selektoren von CSS3 fasziniert sind, schauen Sie sich die Erweiterungssammlung von Webdesigner Depot an. Es enthält im gesamten Web Leitfäden zu den neuen Funktionen in CSS3.
Clearfix zu Styles hinzufügen
Wenn Sie mit der Clearfix-Technik nicht vertraut sind, tun Sie es einige Recherchen. Es handelt sich um eine beliebte Klasse, die Sie einem Div-Container hinzufügen würden, der zwei oder mehr schwebende Blöcke enthält.
Wenn Sie noch nie von Clearfix gehört haben, mag es verwirrend erscheinen, aber das Konzept ist einfach. Stellen Sie sich ein Container-Div vor, das zwei Divs enthält, die beide nach links schweben. Standardmäßig stellen die meisten Browser die beiden Spalten so dar, dass sie sich direkt berühren, und das enthaltende Div wird auf der Seite nach unten erweitert, um in die längste Spalte zu passen.
Durch das Hinzufügen einer Clearfix-Klasse zu Ihrem Container passen beide Spalten problemlos in das Container-Div, das weit genug nach unten erweitert wird, um beide Elemente aufzunehmen. Dies löst viele Probleme beim Wireframe-Prototyping, insbesondere bei zweispaltigen Layouts (dh dem Hauptinhalt und der Seitenleiste). Diese Methode funktioniert auch für drei- und sogar vierspaltige Layouts, wobei jede Spalte nur in einen kleineren Raum passen muss.
CSS anzeigen: Stile extern beibehalten
Eine weitere wichtige Entscheidung ist, was mit der CSS-Platzierung geschehen soll. Professionelle Webdesigner und -entwickler empfehlen einfach, eine unabhängige CSS-Datei getrennt von Ihrem HTML-Code aufzubewahren.
Auf diese Weise befindet sich die Struktur in einem Dokument und das Layout und Design in einem anderen. Beide sind für Wireframes gleichermaßen wichtig, erfüllen jedoch unterschiedliche Aufgaben.
Ihr gesamter HTML-Code ist streng strukturell. Sie können Links in Absätze innerhalb von Container-Divs in anderen Containern usw. einfügen. Der Stil steuert die Größe, den Abstand, die Ränder und die Beschriftung von Absätzen und Links, und das Drahtmodell definiert die Breite von Containern und deren Platzierung auf der Seite.
Seitenelemente liefern weitere Beispiele. Sie würden die div-Container für Inhalt und Seitenleisten codieren, sie aber mithilfe von CSS formatieren und positionieren. Für einen Designer ist das Verständnis, wie man Inhalt und Stil trennt, der Schlüssel zur Beherrschung von Wireframes.
Implementieren Sie dynamische Platzhalter für Seitenelemente
Ausgefallene jQuery-Effekte und Ajax-basierte Webelemente scheinen in aller Munde zu sein. Die Trends nehmen zu und fast alle beliebten Websites bieten dynamische Inhalte. Es ist wichtig, darüber nachzudenken. Wenn sie das Design ergänzen, warum nicht auch Blöcke in Ihr Wireframe integrieren?
Die Entwicklung eines kompletten Back-End-Systems für eine dynamische Anmeldebox ist möglicherweise nicht praktikabel, aber die Kenntnis der benötigten JavaScript-Bibliotheken ist ein guter Anfang. Sie könnten auch Stile codieren, die dieses Feld strukturieren und die Dinge für später festlegen, wenn Sie Farbe und Details hinzufügen würden.
Diese Themen können auf viele Schnittstellenelemente angewendet werden. Sie könnten Suchvorschläge ähnlich denen von Google verwenden oder Notizen in Ihrem Code hinterlassen, um eine dynamische Nachrichten- oder Twitter-Feed-Box zu implementieren. Beides würde Ihr Wireframe dynamisch machen und eine elegante Möglichkeit bieten, ein Solid-State-Objekt anstelle von dynamischem Inhalt darzustellen . Während der Prototyping-Phase ist das ohnehin alles, was Sie brauchen.
Häufige Fehler bei der Wireframe-Entwicklung
Es ist schwierig, einen Fehler zu machen, wenn Sie gerade erst anfangen, die Grundstruktur einer Website zu programmieren, aber behalten Sie bestimmte Details im Hinterkopf.
Denken Sie daran, dass der Zweck eines Wireframes darin besteht, ein Framework ohne viele Details darzustellen. Dies ist in der Anfangsphase der Planung der Seitenelemente nützlich. Sie können tief in Ihre Website eintauchen und das Gesamtbild sehen.
Halten Sie die Dinge einfach und in Ordnung. Dies zu übersehen ist ein häufiger Fehler und beeinträchtigt Ihre Fähigkeit, Fristen einzuhalten. Ein Wireframe muss nicht annähernd perfekt sein; Es soll ein grober Überblick über die Website sein. Auch ein reines HTML- und CSS-Drahtmodell sollte nur aus Seitenelementumrissen bestehen.
Vermeiden Sie Umwege, indem Sie sich auf Ihre Hauptziele konzentrieren. Denken Sie daran, warum Sie den Prozess überhaupt mit einem Wireframe begonnen haben!
Wireframes können auch viele Probleme lösen, die den Designprozess belasten. Das Codieren eines Prototyps in HTML und CSS ist der beste Weg, um einem Webprojekt, ob groß oder klein, einen Vorsprung zu verschaffen. Es ist eine einfache und effiziente Möglichkeit, Ihren Ideen Gestalt zu verleihen.
Eine Menge Artikel im Internet beziehen sich auf den Wireframing-Prozess. Ich habe die Codierungs- und Entwicklungsseite der Dinge behandelt, aber um mehr über Wireframing zu erfahren, lesen Sie weiter. Die Designtipps sind da draußen; Du musst sie nur finden!
Dieser Beitrag wurde exklusiv für Webdesigner Depot geschrieben von Jake Rocheleau, ein leidenschaftlicher Webdesigner und Social-Media-Enthusiast. Jake liebt es, über die neuesten digitalen Internettrends zu lesen und zu schreiben und sich in der Design-Community zu vernetzen. Schauen Sie sich ihn auf Twitter an @jakerocheleau für mehr über seine Arbeit.
Welche Erfahrungen haben Sie mit dem Wireframe-Prozess gemacht? Arbeiten Sie zuerst im Code oder in einer anderen Art von Software? Was sind Ihrer Meinung nach die Vorteile, zuerst Prototypen im Code zu erstellen?
