Share
Das wird oft gedacht Gestaltung im Browser ist ein moderner Ansatz für Webdesign. Vor dem Aufkommen von Tools wie Photoshop gab es kaum eine andere Wahl. Erst in den letzten Jahren, seit dem Beginn des responsive Designs, sind Designer zu ihren Wurzeln zurückgekehrt und haben angefangen, im Browser zu entwerfen.
Ich sage nicht, dass jede Website im Browser zum Leben erweckt werden sollte, aber da Websites jetzt anpassungsfähiger sein müssen als je zuvor, scheint es sinnvoller, diesen Weg zu gehen. Das Entwerfen in Photoshop (oder einer ähnlichen Anwendung) kann Vorteile haben, die ich später betrachten werde, aber auch Nachteile. Schauen wir uns einige davon an.
Eine Frage, die mir bei der Arbeit häufig von UI-Designern gestellt wird, lautet: "Wie groß darf das Design maximal sein?". Die Antwort, die ich immer auf diese Fragen gab, war "Erstellen Sie das Design um 960 Pixel". Wenn ich heute gefragt werde, sage ich ihnen, dass es keine feste Breite gibt und dass sie sich vorstellen sollten, dass das Design in jeder Breite funktionieren sollte.
Angesichts der großen Nachfrage nach Reaktionsfähigkeit ist es wichtig, dass dies bei der Gestaltung von Websites von Anfang an berücksichtigt wird und nicht nur im Nachhinein eingesetzt wird. Wenn Smartphones zum ersten Mal auf den Markt kamen, erstellten viele Designer in Photoshop ein Design mit fester Breite für den Desktop und dann ein weiteres für Smartphones (normalerweise um die 960px-Breite für Desktop und 320px für Mobilgeräte). Diese Vorgehensweise hat zwar eine Weile gedauert, ist aber aufgrund der großen Bandbreite an Gerätebreiten, die auf die Bahn zugreifen, nicht mehr plausibel. Die einzige Möglichkeit, ein Gefühl für die Funktionsweise, das Erscheinungsbild und die Funktionsweise von responsiven Websites zu erhalten, besteht darin, sie im Browser zu gestalten.
Die Konsistenz wird auch groß sein. Ich hoffe, in Bezug auf wiederverwendbare Teile zu denken, um die Dinge einfach und konsistent zu halten - Chris Coyier über die Neugestaltung von CSS-Tricks
Es mag zwar zutreffen, dass Besucher (in den meisten Fällen) eine Website nicht für ihr Design besuchen, sondern stattdessen sie für ihren Inhalt besuchen. Durch die Gestaltung im Browser können wir uns auf den Inhalt einer Website konzentrieren und das Design darauf aufbauen.
Bei der Gestaltung in Photoshop wird das Design oft als erstes und der Inhalt als zweites betrachtet. In manchen Fällen wird der Inhalt überhaupt nicht berücksichtigt. Wie oft haben Sie in Photoshop ein Design erstellt und den Inhalt gerade mit einer Fülle von Lorem Ipsum gefüllt? Wir haben es alle gemacht, aber es scheint ein seltsamer Ansatz zu sein, wenn der Inhalt eine der höchsten Überlegungen sein sollte. Das Entwerfen im Browser ermöglicht dies.
Wenn Sie sich für diesen Ansatz entscheiden, bevor Sie direkt in Ihren bevorzugten Code-Editor springen, ist es wichtig, eine genaue Vorstellung davon zu haben, welche Elemente und Komponenten Ihre Website enthalten wird. Auf diese Weise können Sie wiederverwendbare Komponenten mit demselben HTML-Markup und CSS erstellen. Alle Änderungen, die Sie vornehmen, können einfach durch Ändern einiger Codezeilen geändert werden.
Einer der Hauptgründe, den Sie möglicherweise im Browser entwerfen möchten, ist, dass Sie sehen können, wie ein responsives Design in Echtzeit aussehen kann. Bevor Sie damit beginnen, ist es möglicherweise eine gute Idee, einige vordefinierte Haltepunkte für Medienabfragen festzulegen, und dann sollte alles zwischen diesen Haltepunkten fließend sein.
Denken Sie über Ihr Website-Layout nach und passen Sie die beste Lösung an. Wenn Sie beispielsweise ein 4x4-Fotorastensystem haben, planen Sie, an welchem Haltepunkt das 4x4-Raster für kleinere Auflösungen nicht mehr geeignet ist, und ändern Sie das Raster in ein geeigneteres Format, z. B. ein 2x8-Rastersystem.
Ok, Sie denken also, dass Photoshop in diesem Artikel einiges getan hat, aber Photoshop hat immer noch Zeit, selbst beim Entwerfen im Browser zu glänzen. Es gibt Zeiten, in denen CSS das Styling einfach nicht schneidet, und für mehr dekorative Elemente müssen Sie zu Photoshop zurückkehren. Sie sollten Photoshop zusammen mit Ihrem Code-Editor verwenden.
Websites wie die oben genannte sind im Browser schwer zu gestalten, da sie stark illustriert sind. Das Design im Browser wäre für Websites wie diese nicht der beste Ansatz.
Heutzutage ist es nicht ungewöhnlich, dass UI-Designer eher ein Moodboard eines Website-Designs präsentieren als eine tatsächliche Darstellung davon. Diese Moodboards können Dinge enthalten wie
Auf diese Weise wird das Design immer noch gut durchdacht, ist aber nicht so restriktiv wie ein herkömmliches Photoshop-Mockup-Design.
Wenn Sie noch nicht mit dem Entwerfen im Browser versucht haben und sich darin festsetzen möchten, finden Sie hier einige nützliche Tools, die Sie bei der Entscheidung für diesen Ansatz unterstützen.
Es gibt viele IDEs, aber hier ist eine online, die das Design im Browser auf eine völlig neue Ebene bringt. Die Verwendung einer Cloud-basierten IDE hat den Vorteil, dass Sie Dateien mit Kollegen oder anderen Personen, die an einem Projekt arbeiten, problemlos gemeinsam nutzen können.
Stilfliesen können als beschrieben werden
ein Design, das aus Schriftarten, Farben und Oberflächenelementen besteht, die die Essenz einer visuellen Marke für das Web vermitteln.
Damit können Sie eine Markenidentität für eine Website erstellen, die ihr einen Stil verleiht, ohne das Erscheinungsbild des fertigen Designs zu sehr einzuschränken. Wenn Sie diese noch nicht verwendet haben, finden Sie hier eine gute Einführung.
Live Reload aktualisiert die Browserseite automatisch, sobald Sie ein HTML / CSS / Javascript oder eine andere Datei speichern. Dadurch sparen Sie Zeit und müssen nicht ständig auf die Taste F5 drücken.
Die Typumwandlung eignet sich hervorragend zum Erstellen von Typografie im Browser. Damit können Sie im Browser schnell einen Stil eingeben und die Lesbarkeit und das Rendern während der Arbeit überprüfen.
Zum Zeitpunkt des Schreibens hat Adobe ein kleines Werkzeug in der Pipeline, das vielversprechend aussieht. Es wird "Edge Reflow" genannt und ermöglicht Ihnen, gleichzeitig für alle Bildschirmgrößen zu entwerfen, ohne die Qualität oder Leistungsfähigkeit zu beeinträchtigen. Es ist ein wirklich nützliches Werkzeug für die Gestaltung responsiver Websites, da im Gegensatz zu Photoshop keine Leinwand mit fester Breite verwendet wird. Es gibt keine Neuigkeiten über den Zeitpunkt der Veröffentlichung, aber Sie können sich anmelden, um über die Veröffentlichung informiert zu werden.
Leider kann das Design im Browser einen negativen Nebeneffekt haben. Als Webdesigner und -entwickler suchen wir immer nach Wegen, unseren Webdesign-Workflow zu beschleunigen. Beim Entwerfen im Browser können wir uns so in die Funktionalität verwickeln und sicherstellen, dass sie bei jeder Auflösung funktioniert, sodass wir manchmal vergessen können, dem Design die Liebe und Aufmerksamkeit zu geben, die es verdient. Wir nehmen Abkürzungen und versuchen, uns das Leben leicht zu machen, was alles dazu beitragen kann, zu vernachlässigen.
Lehnen Sie sich nicht einfach zurück und nehmen Sie den "einfachen Ausweg". Es gab viele Male, als ich eine Datei für ein Design erhalten habe, mit einem Blick und dem Gedanken, dass nicht viel davon in CSS erstellt werden kann, es wird eine bildlastige Seite nur für das Layout 'sein. Wir alle wissen, dass Bilder Aufblähen verursachen, und versuchen Sie, sie so wenig wie möglich zu verwenden. Dies kann jedoch manchmal unvermeidlich sein, wenn zum Beispiel an stark gestalteten Markeninhalten gearbeitet wird. Bei vielen Disziplinen ist es dasselbe. Sie müssen einen sinnvollen Kompromiss zwischen Form und Funktion eingehen. Zu viel Form und zu wenig Funktion führen zu einer schlechten Website und umgekehrt.
Es war noch nie so wichtig, flüssige, responsive Websites zu entwerfen, die sich verschiedenen Auflösungen anpassen. Aufgrund dieser Anforderungen sind Tools wie Photoshop weniger nützlich als früher für das Webdesign.
Da das responsive Design nicht mehr wegzudenken ist, könnte sich das Erscheinungsbild von Websites ändern, und es werden neue Tools und Lösungen für einige der heutigen Probleme gefunden. Wenn eine Website mehr auf Branding und Design ausgerichtet ist, ist Photoshop natürlich immer Ihr wichtigstes Werkzeug. Einige Websites sind eher designorientiert als inhaltsbezogen.
.
Accentsconagua