Entwerfen im Browser, um mich zu erschrecken. Nicht, weil es hart schien, aber weil ich dachte, ich würde mit einem Design enden, das aus vielen kleinen Schachteln besteht, etwas, das so allgemein und langweilig war, dass ich es am Ende in Photoshop wiederholen würde.

Diese Angst erwies sich als völlig unberechtigt. Nicht nur, dass meine Designs fokussierter wurden, ich vervollständigte sie auch schneller und ließ Kunden durch Interaktion und Diskussion früher in den Prozess einbinden.

Es ist nicht so schwer wie du denkst

Design ist Design. Es spielt keine Rolle, ob es in einer Software oder in Code geschrieben wird. Entwerfen im Browser ist nicht schwieriger als das Entwerfen in Photoshop. Wie jedes Werkzeug müssen Sie es verwenden, um es zu lernen und es schließlich zu meistern.

Design ist ein iterativer Prozess, der durch Arbeiten für Kunden erschwert wird. Es ist manchmal schwierig für Kunden, sich genau vorzustellen, was Sie beschreiben; Durch die Gestaltung im Browser können sie während des gesamten Prozesses und nicht nur während der Entwurfsphase einbezogen werden.

Die Phasen des Designs und der Entwicklung gehen ineinander über, und wenn Sie Design und Front-End-Entwicklung von Natur aus gut beherrschen, werden Sie sich im Browser so verhalten, wie eine Ente Wasser treibt.

Ein großer Vorteil des Designs im Browser ist, dass wir auf realistischen Erwartungen basieren können. Manchmal kann das Entwerfen in Software unvorhergesehene Probleme für die Front-End-Entwicklung verursachen. UI-Elemente könnten wackelig gestaltet werden oder vielleicht ergeben sie einfach keinen Sinn, es ist schwer, einem Kunden zu erklären, warum Sie etwas geändert haben, nicht weil sie es nicht verstehen, sondern weil Sie es bereits in das Design eingefügt haben genehmigt. Die Gestaltung im Browser eignet sich für die Idee der Einfachheit.

Einen Plan haben

Bevor ich überhaupt ans Design denke, muss ich einen Plan haben. Nur weil ich ein anderes Tool verwende, heißt das nicht, dass sich mein Prozess ändert. Bevor ich mit der Gestaltung beginne, möchte ich einen ziemlich soliden Plan haben, und ich muss wissen, was ich entwerfe, warum ich entwerfe, für wen ich entwerfe, den Kundenhintergrund und alle Service- oder Produktinformationen, auf die ich mich konzentrieren muss auf.

Nachdem ich diese Dinge festgestellt habe, werde ich eine bessere Vorstellung davon haben, was das Produkt ist oder was der Kunde macht, wie lange er es schon getan hat, was es von seiner Konkurrenz unterscheidet, wer seine Benutzerbasis ist und was die primäre und sekundäre Ziele der Website werden sein.

Ich persönlich möchte alles dokumentieren. In der Regel habe ich Dokumentation für die Sitemap, Inhalt, Handlungsaufforderungen und Website-Architektur. Zu der Zeit, wenn ich mit der Gestaltung beginne, sollte ich eine klare Strategie für das Design haben und alle Inhalte sollten gesammelt werden.

Skizze zuerst

Skizzieren ist der Schlüssel, wenn ich etwas im Browser entwerfen will. Ich kann Inhaltsbereiche mit Bleistift und Papier ausarbeiten, Feedback bekommen und schnell in die Grundlagen meines Designs eintauchen.

Ich skizziere ausgehend von dem oben beschriebenen Plan und stelle sicher, dass ich alle inhaltlichen Bereiche und Handlungsaufforderungen angelegt habe. Skizzieren sollte schnell sein, nicht viel Zeit damit verbringen, etwas zu perfektionieren. Es sollte solide genug sein, um einem Kunden zu zeigen, aber schlampig genug, dass Sie sie in weniger als einer Stunde fertig bekommen können.

Als nächstes möchte ich die Site aus meinen Skizzen in HTML und CSS prototypieren. Der Prototyp besteht aus vielen grauen Boxen mit Text und Bildern für Platzhalter. Die grauen Kästchen dienen als Container für Inhalte, wenn ich mit dem Entwerfen anfange. Der größte Vorteil beim Prototyping mit Code besteht darin, dass der Client mit dem Prototyp interagieren und sehen kann, wie die Site-Architektur funktioniert. Wenn also etwas fehlt oder verfeinert werden muss, können wir jetzt mit ihm umgehen und nicht erst am ersten Tag.

Stil Fliesen

Bevor wir mit dem Design beginnen können, brauchen wir eine Art Stil, von dem unser Design ausgehen kann. Wir müssen die Farben und Schriftarten bestimmen, die wir für mögliche Texturen und Muster verwenden. Hier kommen Stilfliesen ins Spiel.

Stil Fliesen wurden von Samantha Warren kreiert und ich benutze sie seit einiger Zeit. Sie helfen Kunden dabei, einen frühen und sehr einfachen Stilführer zu sehen, mit dem wir mit dem Entwurf beginnen können. Ich mag es, mehrere davon zu erstellen, um zu sehen, welchen der Klient es vorzieht. Ich finde, dass diese auch im Genehmigungsverfahren sehr wichtig sind und hilft, Ablehnung zu vermeiden.

Design

Jetzt können wir mit dem Design beginnen. Wenn Sie es gewohnt sind, in einer Software wie Photoshop oder Sketch zu arbeiten, ist das nicht viel anders. Mit unserer Prototyp-Datei beginnen wir, in unserem Markup Mock-Content hinzuzufügen. An diesem Punkt wissen wir genau, was in den einzelnen Inhaltsabschnitten im Markup enthalten ist, und das Raster wurde bereits definiert. Es sollte also nicht so lange dauern.

Jetzt beginne ich damit, Stile für meine Inhalte zu überlagern. Ich werde Basisstile für Farbe, Typografie und Layout hinzufügen. Sobald die Basisstile fertig sind, werde ich weggehen und es anschauen. Ich fotografiere gern bestimmte Teile des Designs, um später darauf zu verweisen.

Raffinesse

Sobald ich mit der Basisschicht zufrieden bin, mache ich mir gerne Notizen, was zu verfeinern ist. Basierend auf diesen Notizen werde ich höchstwahrscheinlich verwenden Photoshop oder Skizzieren Textur oder irgendetwas mit einem greifbaren Gefühl hinzufügen. Photoshop und Sketch sind großartige Werkzeuge, um komplexe UI-Elemente schnell zu verfeinern, sodass ich alles, was beim Schreiben mehr als nur ein Problem sein könnte, speichern kann

Der Grund, warum ich das tue, ist, weil ich möchte, dass meine Codebasis schlank und sauber ist und je mehr Sie programmieren, kommentieren und löschen, desto schlampiger und aufgeblähter wird Ihre Codebasis.

Speichern und wiederverwenden Sie gängige Muster

Wenn Sie jedes Mal im Browser von Grund auf neu entwerfen mussten, scheint es so, als würden sie ewig dauern, aber wenn Sie von einer benutzerdefinierten Basis, einem Framework, ausgehen, können Sie sich wiederholende Schritte eliminieren. Zu Beginn habe ich eine benutzerdefinierte Version von Initialisierer das verwende ich mit einem benutzerdefinierten Responsive Grid in Sass (http://sass-lang.com/) gebaut. Die Verwendung eines benutzerdefinierten Frameworks gibt mir einen Vorsprung für das Prototyping und Design.

Eine Bibliothek mit allgemeinen UI-Mustern ist auch eine gute Möglichkeit, einen schnellen Prototyp zu erstellen, und das Design im Browser wird effizienter. ich benutze Erhabener Text zu codieren und eine Sache, die ich gelernt habe zu nutzen, sind die benutzerdefinierten Snippets, die Sie erstellen können. Ich habe meiner Snippet-Liste verschiedene Navigationsvariationen, Listen, Seitenleisten und andere allgemeine Elemente hinzugefügt, sodass ich sie mit einer einfachen Aktion schnell in mein Markup einfügen kann. Ich benutze auch Konten auf Codepen und JSFidel um Muster zu speichern. Dan Cederholm hat ein tolles WordPress-Theme zum Speichern gebräuchlicher Muster erstellt Birnen . Es verwendet Posts, um Code zu speichern, den Sie live im Front-End bearbeiten können, um Änderungen zu testen und in der Vorschau anzuzeigen.

Fazit

Praxis und praktische Anwendung werden Sie besser im Browser gestalten. Wenn Sie irgendeine Art von Front-End-Entwicklung durchführen, haben Sie wahrscheinlich bereits ein Basis-Framework, von dem aus Sie starten können, und Sie haben bereits einige gebräuchliche Muster zu verwenden.

Jetzt müssen Sie nur noch mit dem Entwurf im Browser beginnen und Sie werden schließlich einen Workflow finden, der effizient ist und innerhalb Ihres Prozesses funktioniert. Mit Übung wirst du nur schneller werden.