Am Anfang hat jeder im Browser entworfen. Dies liegt daran, dass wir buchstäblich keine anderen Optionen hatten. Ein Texteditor und ein Browser waren die einzigen Werkzeuge, die wir hatten.

HTML selbst war ziemlich einfach. Wir haben erst ein paar Jahre nach dem ersten Browser noch Tische bekommen. Als wir es schließlich geschafft hatten, dauerte es nicht lange, bis die Leute begannen, Layouts mit ihnen zu machen. Sicher, sie wurden für Tabellendaten entwickelt, aber Regeln und Standards werden fürchterlich gebrochen, oder?

Ein paar Jahre später, transparente .gif- Dateien und PSDs später sah das übliche Webdesign-Setup so aus:

Ein Designer würde ein Interface erstellen, das in Photoshop hübsch aussieht. Es könnte nützlich sein. Auf der anderen Seite könnte es Navigationstext haben, der etwas zu gut mit dem Hintergrund verschmilzt. Das Wichtigste war, dass es irgendwie 3D mit vielen Farbverläufen und Schlagschatten aussah.

Dann würde jemand (vielleicht der Designer, vielleicht ihr Programmierer-Kumpel) diese grundlegende Schnittstelle aufteilen, mühsam alles mit Tabellen neu aufbauen und sicherstellen, dass es zumindest in IE6 funktioniert.

Kann sich irgendjemand erinnern, was passierte, als ein Kunde eine Hauptnavigationsverbindung ändern wollte und die Navigation ausschließlich aus Bildern bestand?

Mit der Zeit wechselten wir von Tabellen zu CSS. Dann wechselten viele von uns, dass sie alles in Photoshop übersprühten und wieder im Browser entwarfen. Der Kreis war geschlossen. Das Alte war wieder neu. IE6 wurde in die Feuer des Mount Doom geworfen.

Gute Zeiten.

Die anderen Design-Tools

Ich fing an, Websites irgendwo in der Mitte zu entwerfen, als die Leute in Photoshop umzogen, aber wir hatten auch Dreamweaver, Frontpage und andere Plagen, um die Sünder zu bestrafen.

Ich war ein Kind. Ich wusste es nicht besser. Ich wusste nicht, wie HTML und CSS funktionierten. Das wusste ich auch nicht:

Alles was eine Webdesign-App kann, kann Code besser machen

Einfach gesagt, wird keine visuelle Webdesign-Anwendung jemals die schiere Flexibilität bieten, die sich aus dem Schreiben von HTML und CSS selbst ergibt. Wenn Sie Ihr eigenes HTML und CSS schreiben, können Sie neue Techniken ausprobieren, den wenigsten Code schreiben und im Allgemeinen einfach bessere Websites erstellen.

Diese Apps haben tatsächlich schrecklichen Code geschrieben

Sie können nicht nur bessere Websites erstellen, indem Sie lernen, HTML und CSS zu schreiben. Diese alten Programme, FrontPage, Dreamweaver, waren alle dafür bekannt, besonders schrecklichen Code zu schreiben. Es war aufgebläht, langsam, fast unmöglich, wenn man zu einem Texteditor wechselte.

Sie waren unhandlich

Selbst wenn man das zugrundeliegende Markup und Styling abschätzte, war die Software schrecklich zu benutzen, besonders wenn man nicht wusste, wie HTML und CSS überhaupt funktionieren. Sie wissen, wie in alten Versionen von Word, schlecht platzieren ein Bild in Ihrem Dokument könnte die Platzierung aller anderen Elemente vermasseln?

Stellen Sie sich das vor, aber Sie wissen nicht, wie Sie es beheben können, denn das Löschen des Bildes scheint nicht alles dahin zurückzubringen, wo es vorher war. Fügen Sie hinzu, in der Schnittstelle zu all dem verloren, und es war nur eine schlechte Erfahrung.

Aber dann wurden sie besser

Wenn Apps mögen Ara , Webfluss , Webdy und andere kamen zuerst heraus, ich war sehr, sehr skeptisch. Und warum sollte ich nicht sein? Ich war schon vorher verbrannt worden. Außerdem war ich gerade davon entfernt, Photoshop für alles zu verwenden, und ich lernte viel durch das Entwerfen im Browser.

Aber in letzter Zeit hatte ich Grund, diese neuen Apps genauer zu betrachten und die mit ihnen erstellten Websites zu untersuchen. Gegen all meine Vorbehalte ändere ich meine Meinung.

Der Code wurde viel besser

Während ich dabei stehe, was ich ein paar Absätze oben geschrieben habe, hat sich der Code wirklich verbessert. In diese Apps sind jahrelange Erfahrung und standardbasierte Entwicklung eingeflossen. Niemand möchte auf die alten Wege zurückkehren.

Es ist kein perfekt optimierter Code. Aber dann muss es nicht sein. Niemand wird die neue Wikipedia mit Macaw oder Webydo bauen. Der Markt für diese Apps besteht aus kleinen bis mittleren Unternehmen, die nur eine anständige Werbeseite benötigen.

Wenn sie nicht täglich von Tausenden von Besuchern getroffen werden, spielt weniger perfekter Code keine Rolle.

Sie bringen die Leinwand zurück

Ich lasse mich von einer Vielzahl von Orten inspirieren, aber eine saubere, leere Leinwand ist eine der besten. Es ist nur so voll mit Möglichkeiten, mit möglichen Lösungen. Ich sitze, ich starre und dann fange ich an zu klicken.

Zumindest habe ich es so gemacht, als ich alles in Photoshop aufgespottet habe. Eine Website mit Code zu gestalten, macht es ein bisschen schwieriger, so schnell zu iterieren. Manchmal fällt es mir schwer, etwas loszulassen, in das ich gerade eine halbe Stunde CSS gesteckt habe.

Drag 'n' Drop Iteration ist nur schneller.

Sie sind gut für Anfänger

Frontpage hat meine Karriere begonnen. Ich hätte nie mit dem Webdesign angefangen, wenn ich keine (vergleichsweise) einfache GUI gehabt hätte, um mich zu starten. Ich denke, um etwas wie Webflow optimal zu nutzen, müssen Sie immer noch die Grundlagen von HTML und CSS kennen, aber sie eignen sich hervorragend, um diese Dinge zu lernen.

Und diese Branche braucht so etwas für die nächste Generation von Anfängern.

Fazit

In vielerlei Hinsicht ist es das Zeitalter des Erstellers der visuellen Website. Newbies wollen ehrlich gesagt gar nicht Git, Gulp, NodeJS lernen oder gar ein Terminal eröffnen. Sie möchten eine Nachricht auf ihre Webseite schreiben und damit fertig sein. Darüber hinaus sehen weniger Kunden den Sinn darin, für eine einfache Werbeseite 1000 Dollar oder mehr zu bezahlen.

Es ist Zeit, diese Tools für diejenigen zu nutzen, die sich das Geld oder die Zeit für spezialisiertes Webdesign und -entwicklung nicht leisten können. Die Werkzeuge sind bereit, und so ist der Markt.

Und das ist okay für mich.

Ausgewähltes Bild, Web-Design-Tools Bild über Shutterstock.