Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Analyse

Alte Zöpfe abschneiden: Webdesign und Webentwicklung werden eins

    Alte Zöpfe abschneiden: Webdesign und Webentwicklung werden eins

Webdesign und Webentwicklung rücken eng zusammen. (Quelle: Shutterstock / Redpixel PL)

Die Zeiten sind vorbei, in denen wir auf der Basis starrer Konventionen gestaltet haben. Es wird Zeit, dass wir uns das eingestehen und reagieren.

Die Anfänge des Webdesign

Diejenigen unter euch, die schon länger im Webdesign unterwegs sind, können sich vielleicht noch an die guten alten Neunziger erinnern. Wir begannen damit, Websites auf Bildschirmgrößen von 640 x 480 Pixeln (VGA) zu optimieren, wobei optimieren bedeutete, dass unsere Designs bei dieser Bildschirmbreite gut und bei kleineren fürchterlich aussehen würden.

Gegen Ende der Neunziger setzten sich so langsam aber sicher SVGA-Monitore durch und wir stellten die „Optimierung“ auf 800 x 600 Pixel um. Anfang der Nuller gab es dann einige Diskussionen um die Verbreitung des XGA-Standards. Keiner wollte so recht auf 1.024 x 768 Pixel gehen, weil die Zahl der SVGA-Verwender immer noch hoch war. Der Kompromiss bestand darin, das Design auf SVGA zu belassen und es auf dem Screen zu zentrieren. So sah es wenigstens noch halbwegs in Ordnung aus. Diese „Optimierung“ auf SVGA hielt sich recht lange und wurde nur überaus zögerlich durch XGA, also 1.024 x 768 Pixel, ersetzt.

Alle diese Bildschirmbegrenzungen hatten eines gemeinsam: Sie bildeten den fixen Rahmen für unsere Gestaltungsideen. Sie waren unsere Leinwand. Das war eine Metapher, mit der wir etwas anfangen konnten.

Webdesign entstand aus Printdesign

Die meisten von uns kamen damals aus dem Printdesign. Was logisch war, denn wo hätten so plötzlich Webdesigner herkommen können, wo das Medium an sich eben erst entstanden war? Und als solche waren wir es natürlich gewohnt, mit vorgegebenen – oder jedenfalls definierten – Maßen zu gestalten.

Design zu Fuß. (Foto: Shutterstock / Redpixel PL)

Aus eben diesem Umfeld entstanden auch alle mir bekannten Designtools. Egal, um welche Software es sich handelte – eine neue Datei musste immer unter Angabe bestimmter Maße definiert werden, ob in Zentimetern, Zoll oder später in Pixeln.

Das war nicht nur logisch, sondern auch ausgesprochen praktisch. Denn auf diese Weise konnten wir direkt mit Bezug zum Endprodukt arbeiten und mussten nicht allzu sehr abstrahieren. Niemand stellte den fixen Größenbezug infrage.

Mobile Webnutzung zerstört die Idylle

Ende der Nuller bekamen wir es dann mit Smartphones zu tun. Diese kleinen Geräte konnten ebenfalls das Netz der Netze nutzen und sollten das auch sinnvoll können. Das mobile Webdesign entstand.

Zunächst einigten wir uns darauf, eine separate mobile Seite zur eigentlich Desktop-Seite hinzuzufügen. Diese mobile Seite war typischerweise als Subdomain angelegt und übernahm nur diejenigen Inhalte aus der Hauptseite, die wir für mobil-relevant hielten. Über Design sprach niemand. Diese Seiten mussten nur funktionieren, hatten dabei aber den gestalterischen Charme eines Einkaufszettels.

Wie schnell sich dann die mobile Nutzung entwickelte, hat uns alle überrascht. Innerhalb weniger Jahre bekamen wir es mit Dutzenden und Aberdutzenden verschiedener Bildschirmauflösungen zu tun. Zudem wollten sich weder Seitenbetreiber noch Benutzer länger mit abgespeckten Mobilseiten zufriedengeben. Und tatsächlich schritt die Technologie so schnell voran, dass das auch gar nicht erforderlich war. Die Idylle war eindeutig dahin.

Mindestens drei Breakpoints gleichzeitig. (Foto: Shutterstock / Cressida Studio)

Persistierende Anachronismen, oder: Die Designtools zogen nicht mit

HTML5, mit den Bestandteilen HTML, CSS und JavaScript, erlaubt es uns, responsiv auf unterschiedliche Geräte zu reagieren und unsere Designs entsprechend anzupassen. Solange wir das recht grob angingen, also mit Media Queries für drei verschiedene, wiederum vordefinierte Bildschirmbreiten, konnten wir mit den etablierten Designtools weitermachen, als wäre nichts geschehen. Anstelle eines Mockups, wie früher, bauten wir nun eben drei für die typischerweise drei verschiedenen Geräteklassen und konnten so wieder Dateien mit Pixelgrößen definieren.

Eng wird es allerdings, wenn wir über vollständig fluides Desgin sprechen, also über voll responsive Websites. Wie gestalten wir mit Photoshop, Illustrator, Sketch und anderen Tools, wenn wir keine Dateigrößen mehr haben?

Das ist der Punkt, an dem die Trennung zwischen Webdesigner und Webentwickler endgültig zerbricht. Wer künftig als Designer nicht entwickeln kann oder als Entwickler nicht designen kann, wird es sehr schwer haben. Da nutzen auch PSD-to-HTML-Dienstleister nicht mehr. Ich schätze, diese werden recht kurzfristig vom Markt verschwinden.

Die Leinwand der Zukunft ist unendlich groß

Mit diesem Wandel werden gängige Designtools mit ihren gängigen Anwendungszwecken weniger wichtig als bislang. Wir werden keine Mockups mehr auf Hartschaumplatten kleben und dem Kunden präsentieren. (Gut, das tue ich seit rund zehn Jahren ohnehin schon nicht mehr, aber das Prinzip hat überlebt.) Wir benötigen Designansätze, die von klein bis groß gleichermaßen gut funktionieren.

Affinity Illustrator 2017: Standarddialog beim Start des Programms. (Screenshot: t3n)

Tools, die uns zwingen, eine Pixelgröße zu definieren, bevor wir einen Canvas angezeigt bekommen, können wir so nicht mehr gebrauchen. Damit werden diese Tools nicht etwa nutzlos – aber ihre Nutzung verschiebt sich in den kleinteiligeren, entwicklungsnäheren Bereich.

Künftig gestalten wir Komponenten, nicht Seiten

Anstelle einer kompletten Homepage gestalten wir künftig einzelne Komponenten, etwa den Header oder das Anmeldeformular oder was sonst der Gestaltung bedarf, individuell unter Einhaltung der Konventionen aus den immer wichtiger werdenden Styleguides.

Design versteht sich künftig immer mehr als Microdesign, etwa bei der Gestaltung der essentiell wichtigen Mikrointeraktionen, die allerdings nicht reines Design sind, sondern wegen der beteiligten Funktionalität in erster Linie Entwicklung.

Seiten gibt es, trotz aller irreführenden Metaphorik, nicht mehr. „Page” als Begriff für ein aufrufbares Web-Dokument hat ausgedient.

Frameworks werden wichtiger

Natürlich gibt es einzelne Komponenten, wie den Header oder Illustrationen irgendwo zwischendrin, die nach wie vor typische Designaufgaben darstellen. Der weitaus größere Teil einer Website wird jedoch aus Entwicklertätigkeiten entstehen, die mit „schönen Künsten” nicht viel zu tun haben.

Anstelle statischer Mockups erstellen wir dynamische Prototypen, die möglichst schnell (Stichwort: Rapid Prototyping) gebaut sind und wenigstens rudimentär funktionieren.

In diesem Prozess ist die Tool-Kategorie der Frameworks weitaus wichtiger als jene der klassischen Design-Werkzeuge. Bootstrap oder Zurbs Foundation bieten zum einen einen Rahmen für die erforderlichen Features und kommen zum anderen selbst mit einer durchdachten Sammlung vorgefertigter Elemente für den schnellen Einbau. So eignen sich diese Frameworks nicht nur als Unterbau für moderne Websites, sondern ganz besonders für das schnelle Erstellen erster Prototypen für Benutzeroberflächen.

Der Haken an der Sache ist, dass keines der Frameworks ohne Code-Kenntnisse verwendet werden kann, also nicht für den klassischen Designer-Typus geeignet ist. Nichtsdestotrotz bedarf es beim Einsatz von Frameworks der Fähigkeiten eines Designers, denn auch nicht rein optische Aufgabenstellungen, wie etwa jener der Erstellung einer vernünftigen Informationsarchitektur, müssen nach wie vor erledigt werden.

Es wird Zeit für den entwickelnden Designer oder den gestaltenden Entwickler

In großen Agenturen mögen reine Designer noch eine Zukunft haben, auch wenn sich die Schnittstelle zum Entwickler immer mehr verbreitert, also unklarer wird, was umgekehrt genauso gilt. In kleinen Agenturen werden es diejenigen Bewerber am leichtesten haben, die beide Skillsets miteinander verbinden. Der Freelancer hat eh keine Alternative.

Von daher ist es kein Wunder, dass in diesen Umbruchzeiten Dienstleister wie Webydo oder Wix erheblichen Zulauf verzeichnen. Die beiden großen Homepage-Baukästen sind in jüngerer Zeit dazu übergegangen, den professionellen Designer zur neuen Zielgruppe zu zählen. Dies soll gelingen durch haufenweise vorgefertigte Code-Module (als Entwicklerersatz) und eine Infrastruktur, die es sogar erlaubt, Rechnungen an Kunden zu schreiben. Diese Systeme wollen die Geschäftsgrundlage für reine Designer bilden.

Müsste ich eine Wette abschließen, würde ich wetten, dass dieser Ansatz vielleicht einige Jahre funktionieren, letztendlich jedoch scheitern wird, weil die Anforderungen an Websites sich auch in Zukunft immer mehr in Richtung Entwicklung verschieben werden.

Wie seht ihr das?

Quellen zum Weiterlesen

  • Atomic Design, das Baukastensystem mit dem schicken Namen | t3n
  • Making the switch to Sketch | Liquorice (mit Beispielen zum Atomic Design mit Sketch)
  • On Design Tools and Processes | Viljami Salminen (mit vielen Beispielen zur nicht erfolgten Veränderung hergebrachter Designtools)
  • Declarative Design Tools | Jon Gold (entwickelte sogar ein eigenes Tool namens Rene)
  • Designing Systems | Brad Frost

Finde einen Job, den du liebst zum Thema JavaScript, Webdesign

6 Reaktionen
David
David

@Peter

Wenn Sie ohne Javascript surfen wollen, wäre so als würden Sie aus Prinzip nur Win95 verwenden wollen.

Auch wenn Win95 ein "super" Betriebssystem war - entspricht es nicht mehr dem aktuellen Standard.
Und warum sollen Entwickler Rücksicht auf eine Minderheit nehmen, die den aktuellen - allgemein anerkannten - Standard ignorieren wollen?

Ganz klar - natürlich setzt man JavaScript voraus um die Möglichkeiten aktueller Standards nutzen zu können.

Antworten
Flolle
Flolle

Der Artikel spiegelt den bereits seit einiger Zeit andauernden Trend recht gut wider. Man sollte als Gestalter schon wissen, wie gewisse Frameworks oder Grundmechanismen funktionieren. Ich bin allerdings der Meinung, dass ein Design immer noch als Ganzes gesehen werden sollte, um das Zusammenspiel der einzelnen Elemente beurteilen zu können. Häufig entsteht für mich der Eindruck eines Flickwerkes aus diversen vorgefertigten UI-Elementen. Dem Kunden kann man häufig auch nicht mit einem reinen Styleguide oder einem groben Prototyp kommen - er versteht es schlicht nicht. Ich denke viel wichtiger - statt alles zu beherrschen - ist die Kommunikation zwischen Gestalter und Frontend-Entwickler. Es gibt ja auch (soweit ich weiß) keine Ausbildung für Frontend-Entwickler, die lt. diesem Artikel wichtige Designgrundsätze (und damit meine ich nicht klickibunti, sondern Wahrnehmung von Informationen und weitere Grundlagen) UND die klassischen Grundlagen eines Fachinformatikers vermittelt.

Antworten
Jochen

Wozu sollte man heutzutage noch ohne JS und Cookies surfen? Paranoia?

Es stimmt schon. Die reinen Pixelschubser werden es zukünftig schwerer haben, da die Spaltung Design und Code in Zukunft immer weniger existieren wird. Es wird aber auch Tools geben, die dem Webdesigner die Arbeit einfacher machen wird.

Für Rapidweaver gibt es zum Beispiel schon heute eine Lösung für Foundation, die es einem Designer ermöglicht die Schnipsel und Teile von Foundation sehr visuell zu nutzen. Heute noch in der klassischen 3 Media-Queries, aber es entwickelt sich.
Es wird schon heute nicht schaden, wenn der Designer auch programmieren kann. In der Zukunft wird sich das nicht ändern.

Antworten
peter
peter

Hallo Hans.
Ganz sicher nicht. Surfen Sie doch mal ohne Javascript und beurteilen dann mein Bemerkung. Sie werden feststellen, das es stimmt.
Abgesehen davon, wurde mein Post-Text manipuliert: Bei -Element hatte ich NoScript mit spitzen Klammern stehen. D.h Selbst bei t3n ist es unsauber programmiert. Die Spitzen klammern kann man doch ganz einfach in HTMLEl-Entities umwandeln, dann bleibt mein Post auch vollständig bestehen. Anscheinend haben andere das mangelnde Fachwissen, und das sogar bei einem Web-Fachmagazin. ;)

Antworten
peter
peter

jaja die Mausschubser. Anstatt nur im Design mit BlingBling und klicki bunti zu denken, sollte man sich sich erinnern, was eine Website ist und was sie vermitteln soll: Informationeen. Das die Information gut zu lesen ist und mit jedem internet fähigen Gerät zu erreichen seien soll, das vergessen wohl die meisten. Das sieht man heute daran, dass man JavaScript vorraussetzt, nur um einen Preloader auszublenden und um die Nutzer zu tracken. Selbst einen Hinweis bei deaktivierem JavaScript anzuzeigen bekommen die nicht gebacken, (ja, aich die großen Werbebutzn). Einfach das -Element rein hauen und gut ist! Oder die Webshops, wo ich -1 Artikel bestelle und dabei eine negative Rechnung und das Produkt erhalte. Unfassbar! Manchmal frage ich mich witklich, wer dort am Keyboard gesessen hat oder welcher Peter den Job bekommen hat (Peter Prinzip). Surft doch mal 1 Woche ohne Cookies oder Javascript, dann wisst ihr was ich meine.

Antworten
Hans Wurst
Hans Wurst

@Peter
Ihre Argumentation hinkt, liegt es vielleicht am mangelnden Fachwissen?

Antworten
Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden