Ein Fall für die Codierung Ihrer Wireframes

Als Designer Tag für Tag zu arbeiten, kann mühsam sein. Zum Glück hat sich das Feld erweitert, und so ist der Prozess einfacher geworden. Viele kostenlose Tools und Ressourcen sind da draußen.

Wireframes bringen Eleganz in Design-Modelle. Sie sind die Grundstruktur einer Website, mit entfernten Farben und Verbesserungen.

Sie werden verwendet, um Design-Konzepte mit dem Nötigsten zu betrachten, und sie können eine nützliche Perspektive für jedes Projekt bieten.

Die meisten Wireframes werden in Software-Suites wie Adobe Photoshop und Fireworks erstellt, aber einige Websites ermöglichen es Ihnen, Drahtgitterbilder direkt im Browser zu erstellen.

In diesem Beitrag werden wir ein grundlegendes Wireframe-Bild in HTML und CSS codieren 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 einigen Fällen ist es möglicherweise unnötig, aber es kann helfen, wenn Sie in einer Furche stecken oder kämpfen, um das große Bild zu sehen.

Es kann sowohl den Designern als auch den Kunden zugute kommen. Bei bezahlter Arbeit sind Sie dafür verantwortlich, den Kunden zufrieden zu stellen. Die Grundstruktur ihrer bald zu entwerfenden Website zu zeigen, kann den Kunden Erleichterung und ein Gefühl der Kontrolle über den gesamten Prozess geben.

Aber wenn das Design sehr einfach ist oder eine einfache Struktur hat, lohnt es sich nicht, ein Drahtmodell zu erstellen. das ganze Ding in Photoshop mit Knöpfen und Farben zu verspotten, könnte genauso schnell sein.

Zu entscheiden, welche Schritte zu ergreifen sind, erfordert Zeit und kritisches Denken. Schließlich ist ein Drahtmodell nur ein Werkzeug. Es wird von vielen Webdesignern unterschätzt, aber überraschend nützlich, wenn man es einmal verstanden hat.

Prototyping Wireframes in Code

Seit Jahren ist die Adobe-Designsoftware die erste Suite für die Drahtgittererstellung, aber das Web hat sich stark verändert und entwickelt sich immer noch weiter.

Der Anstieg der Codierungsstandards und Erhöhung der HTML5-Dokumentation sind große Schritte in Richtung eines gemeinsamen Webs. Jetzt ist das Codieren eines grundlegenden Drahtmodells in HTML und CSS nicht mehr erforderlich als das Anwenden des Auftrags in Fireworks.

Mit Wireframes können Sie ein Projekt aus mehreren Blickwinkeln frontal angreifen. Sie können sogar auf Kompatibilität mit CSS2 und CSS3 Techniken und Browsern testen. Die Dinge müssen am Anfang nicht komplex sein; Ein Drahtgitter dient einfach als solide Grundlage, um mit der Codierung zu beginnen.

Das Teilen von Inhalten wird auch mit einem Drahtmodell einfacher. Sie können alle benötigten Dateien auf jedem Webserver hosten und ein Demo-Verzeichnis einrichten und Live-Updates an Kunden und Aufseher Ihres Projekts weiterleiten. Änderungen, wie z. B. schnelle Änderungen an den Rändern und Breiten im CSS des Dokuments, sind ebenfalls einfach.

Standardisierungscode für den Langstreckenverkehr

Wireframes sparen Zeit im Entwicklungsprozess. Wenn die CSS-Stile für Ihre grundlegenden Elemente bereits geschrieben sind, dann ist der Rest nur Füller (wichtig, Füllstoff, wohlgemerkt).

Beginnen Sie richtig mit dem richtigen HTML-Dokumenttyp und der richtigen Verzeichnisstruktur. Dokumententypen unterscheiden sich nicht zu sehr voneinander. Sie können über sie auf der W3C Specs Seite . Im alten World-Wide-Web-Modell spielen sie keine Rolle, aber HTML5 ist gründlich und lässt Ihre Website wachsen.

Sie müssen die Kompatibilität auf so vielen Betriebssystemen und Browsern wie möglich testen, und die Prototyping-Phase für das Drahtmodell ist dafür der perfekte Zeitpunkt, da Sie sich bereits auf die Anordnung des Layouts konzentrieren.

Dies ist auch eine gute Zeit, um an einer für Mobilgeräte optimierten 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 es weniger Code gibt, um Ihre mobilen und benutzerdefinierten Stile zu überladen.

Beginn der Struktur des Dokument-Drahtmodells

Der beste Weg, um zu beginnen, ist mit einem unbeschriebenen Blatt, weil es Ihnen die meiste Kreativität bietet. Die offensichtlichen Elemente, die in den Code aufgenommen werden sollen (wie in jedem anderen Webdokument) sind html , head und body .

Dies ist das Skelett. Sie benötigen einige weitere Elemente, damit das Drahtgitter gut aussieht. Das div (oder Teilung) ist bemerkenswert. Dies ist das Element, mit dem bestimmte Bereiche der Seite, z. B. das Logo oder das Suchfeld, gesperrt werden.

Divs sind die Bausteine ​​von HTML5-Drahtmodell-Prototypen. Alles und jedes kann in einem div , und Styling ist ein Kinderspiel, wenn Sie Klassen und IDs auf Elemente anwenden. Ein Großteil Ihres Hauptcodes wird aufgeteilt nach divs weil sie die grundlegenden Blockelemente sind.

Mit den neuen HTML5-Spezifikationen wurde ein Element aufgerufen nav wurde vorgestellt. Dies kann mit einer ungeordneten Liste und einigen CSS-Eigenschaften kombiniert werden, um den Hauptnavigationsbereich Ihrer Website zu erstellen und zu definieren. Im Folgenden finden Sie ein einfaches Beispiel, wie Sie Ihre Struktur strukturieren können nav :

Arbeiten mit header und footer Elemente

Sie werden im obigen Beispiel feststellen, dass ich a div mit einer ID von header um meine Überschriftennavigation zu trennen. Dies ist vollkommen akzeptabel und nichts ist falsch mit dem obigen Code. HTML5 bietet uns jedoch andere Möglichkeiten.

Das header Element in den neuen HTML5-Spezifikationen ermöglicht es Ihnen, Ihre Struktur weiter zu definieren, was vor allem für Crawler und Screenreader nützlich ist, die einen "Überschrift" -Teil des Inhalts trennen. Es sollte für Ihre Benutzer keinen Unterschied machen, und es hält Ihren Code in Form und zeigt, dass Sie wirklich verstehen, worüber Sie sprechen.

Ein weiteres interessantes Element, das hinzugefügt wurde, ist footer . Gleiche Idee: Verwenden Sie dieses Element anstelle von a div um den Footer-Inhalt zu trennen. Im Allgemeinen sind Fußzeilen nicht im Weg und enthalten grundlegende Informationen über die Website oder das Unternehmen.

Du könntest Links zur Fußzeile hinzufügen und a nav Element, um einige von ihnen zu definieren, aber das wäre schlecht beraten. Das nav element gibt den Hauptnavigationsbereich an, also wäre es überflüssig, es zur Fußzeile oder anderswo hinzuzufügen.

In diesem Szenario verwenden Sie die footer Element und Trennen der Navigationslinks als eine ungeordnete Liste ist am besten. Sie könnten eine Säulenfußzeile mit mehreren Spalten mit Links verwenden. Diese könnten getrennt sein div Elemente nebeneinander angezeigt, alle in der Hauptfußzeile eingewickelt.

CSS-Techniken für das Styling von Wireframes

Wenn Sie HTML verstehen und eine Weile mit dem Web gearbeitet haben, kennen Sie wahrscheinlich ein wenig CSS. Viele der neuen Funktionen von CSS3 dienen zum Hinzufügen von abgerundeten Ecken und Schlagschatten zu Text.

Ich möchte nicht vorschlagen, dass das CSS-Styling 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 sie sind der letzte Schritt bei der Erstellung eines wirklich herausragenden Drahtmodells.

Wenn Sie von den neuen Eigenschaften und Selektoren von CSS3 fasziniert sind, dann schauen Sie sich Webdesigner Depot an Sammlung von Erweiterungen . Es enthält Anleitungen im gesamten Web über die neuen Funktionen in CSS3.

Hinzufügen clearfix zu Stilen

Wenn Sie mit der Clearfix-Technik nicht vertraut sind, tun Sie einige Recherchen . Es ist eine beliebte Klasse, die Sie zu einem hinzufügen würden div Container, der zwei oder mehr schwimmende Blöcke enthält.

Wenn Sie noch nie von Clearfix gehört haben, mag es verwirrend erscheinen, aber das Konzept ist einfach. Denken Sie an einen Container div das hat zwei div s drinnen schwebten beide nach links. Standardmäßig würden die meisten Browser die beiden Spalten so darstellen, dass sie einander und das Containing direkt berühren div würde die Seite erweitern, um zu der Spalte zu passen, die am längsten ist.

Durch Hinzufügen von a clearfix Klasse zu Ihrem Container, passen beide Spalten glücklich in den Container div , die weit genug nach unten expandiert, um zu beiden Elementen zu passen. Dies löst viele Probleme beim Wireframe-Prototyping, insbesondere bei zweispaltigen Layouts (dh dem Hauptinhalt und der Seitenleiste). Diese Methode funktioniert auch für Layouts mit drei oder sogar vier Spalten, wobei jede Spalte nur in einen kleineren Platz passen muss.

CSS anzeigen: Stile extern halten

Was mit CSS-Platzierung zu tun ist, ist eine weitere wichtige Entscheidung. Professionelle Webdesigner und Entwickler empfehlen einfach, unabhängig zu bleiben .css Datei, getrennt von Ihrem HTML-Code.

Auf diese Weise ist die Struktur in einem Dokument und das Layout und Design in einem anderen Dokument. Beide sind gleichermaßen wichtig für Drahtmodelle, aber sie erfüllen unterschiedliche Aufgaben.

Ihr gesamter HTML-Code ist streng strukturell. Sie können Links innerhalb von Absätzen innerhalb des Containers platzieren div s in anderen Containern und so weiter. Das Design steuert die Größe, den Abstand, die Ränder und die Beschriftung von Absätzen und Verknüpfungen. Das Drahtgitter definiert die Breite von Containern und deren Platzierung auf der Seite.

Seitenelemente liefern weitere Beispiele. Du würdest das codieren div Container für Inhalt und Seitenleisten, aber Sie würden sie stylen und mit CSS positionieren. Für einen Designer ist das Verstehen, wie Inhalte und Stil getrennt werden, der Schlüssel zur Beherrschung von Wireframes.

Implementieren Sie dynamische Seitenelement-Platzhalter

Fancy jQuery-Effekte und Ajax-ified-Web-Elemente scheinen in aller Munde zu sein. Die Trends wachsen und fast alle beliebten Websites bieten dynamische Inhalte. Es ist wichtig, darüber nachzudenken. Wenn sie das Design ergänzen, warum nicht Blöcke in Ihrem Wireframe?

Die Entwicklung eines vollständigen Back-End-Systems für eine dynamische Log-in-Box ist möglicherweise nicht praktisch, aber die JavaScript-Bibliotheken, die Sie benötigen, sind ein guter Anfang. Sie könnten auch Stile kodieren, die diese Box strukturieren, und Dinge für später festlegen, wenn Sie Farben und Details hinzufügen möchten.

Diese Themen können auf viele Oberflächenelemente angewendet werden. Sie könnten ähnliche Vorschläge wie Google oder Notizen in Ihrem Code verwenden, um eine dynamische Nachrichten- oder Twitter-Feed-Box zu implementieren, die Ihren Wireframe dynamisch macht und eine elegante Möglichkeit bietet, ein Solid-State-Objekt anstelle von dynamischem Inhalt darzustellen . Während der Prototyping-Phase ist dies alles, was Sie ohnehin brauchen.

Häufige Fehler bei der Wireframe-Entwicklung

Es ist schwierig, Fehler zu machen, wenn Sie gerade damit beginnen, die grundlegende Struktur einer Website zu programmieren, aber bestimmte Details im Hinterkopf behalten.

Denken Sie daran, dass der Zweck eines Drahtmodells darin besteht, einen Rahmen ohne viel Detail darzustellen. Es ist nützlich in den Anfangsphasen der Planung der Seitenelemente; Sie können tief in Ihre Website eintauchen und das große Bild sehen.

Halte die Dinge einfach und in Ordnung. Dies zu übersehen, ist ein häufiger Fehler und wird Ihre Fähigkeit zur Einhaltung von Fristen verkrüppeln. Ein Drahtmodell muss nicht annähernd perfekt sein; es soll ein grober Umriss der Website sein. Selbst ein reines HTML- und CSS-Drahtmodell sollte nur aus Seitenelementkonturen bestehen.

Vermeiden Sie Umwege, indem Sie sich auf Ihre Hauptziele konzentrieren. Denken Sie daran, warum Sie den Prozess mit einem Drahtgitter an erster Stelle gestartet haben!

Wireframes können auch viele Probleme lösen, die den Entwurfsprozess bedrohen. Die Codierung eines Prototyps in HTML und CSS ist der beste Weg, um einen Vorsprung bei einem großen oder kleinen Webprojekt zu erhalten. Es ist ein einfacher und effizienter Weg, um Ihren Ideen Gestalt zu geben.

EIN Tonnen von Artikeln im Web beziehen sich auf den Wireframing-Prozess. Ich habe die Codierungs- und Entwicklungsseite der Dinge behandelt, aber um mehr über das 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 liest und schreibt gerne über die neuesten digitalen Internet-Trends und Networking in der Design-Community. Überprüfe ihn auf Twitter @jakerocheleau für mehr über seine Arbeit.

Welche Erfahrungen haben Sie mit dem Wireframe-Prozess gemacht? Arbeiten Sie zuerst in Code oder in einer anderen Art von Software? Was sind Ihrer Meinung nach einige Vorteile für das Prototyping in Code?