© best_vector/Shutterstock.com
Windows Developer
Design- und Entwicklungsprinzipien für ein besseres Frontend

Frontend-Strategien

Moderne Frontends sollen gut zu warten und zukunftsfreundlich sein, unabhängig vom Gerät oder Browser gut aussehen und performant sein. Es gibt eine Reihe von Design- und Entwicklungsprinzipien, die dabei helfen, diese Ziele besser zu erreichen. In diesem Artikel sollen einige Prinzipien vorgestellt werden, die sich in der Praxis als tragfähig erwiesen haben. Dabei treffen wir neben alten Bekannten wie Responsive Webdesign und Mobile First auch auf neuere Ansätze wie Atomic Design und Pattern Libraries.

Ute Mayer


Als Tim Berners-Lee ab 1990 den Grundstein für das World Wide Web legte, ging es ihm darum, eine Möglichkeit zu schaffen, Dokumente miteinander zu verlinken und zugänglich zu machen. Deshalb ist es nicht verwunderlich, dass sich das Web historisch gesehen von Büchern ableitet und stark dokumentenbasiert ist. Auch am Vokabular, das im Zusammenhang mit dem Web verwendet wird, lässt sich diese starke Verknüpfung erkennen: Dazu gehören etwa die Begriffe Page, (Web-)Seite oder auch Paginierung, Lesezeichen und Ähnliches. Zu Beginn des Webs waren Webseiten oft nichts anderes als die digitale Version eines analogen Dokuments. Der Bezug zum Buch erleichterte den Benutzern die Interaktion mit dem neuen Medium und prägte die Art und Weise des Interfacedesigns.

Das Web im Wandel der Zeit

Doch es wird schnell klar, dass die Buchanalogie dem Medium Web nicht gerecht wird. Die wenigsten Webseiten existieren als abgeschlossene Einheit, vielmehr sind moderne Webanwendungen wesentlich komplexer. Sie sprengen den Charakter einer gedruckten Seite, die einfach nur digitalisiert wurde. Dazu kommt, dass moderne Webtechnologien eine viel größere Bandbreite an Möglichkeiten zur Gestaltung mitbringen. Zusätzlich haben wir es in der Gegenwart mit einer Vielzahl von Geräten und Bildschirmgrößen zu tun, auf denen Webanwendungen sich darstellen lassen. Es liegt auf der Hand, dass der UI-Code aufgrund dieser Bedingungen immer komplexer wird. Dies bedeutet einerseits, dass auch die Art und Weise, wie User Interfaces entworfen und implementiert werden, diesen neuen Herausforderungen gerecht werden muss. Der UI-Code sollte sich so wenig komplex und so wartungsfreundlich wie möglich gestalten. Andererseits heißt es auch, dass der Einsatz von Entwicklungsprinzipien, die seit Langem schon in der Backend-Entwicklung ihren Platz gefunden haben, in der Frontend-Entwicklung Einzug halten sollten. Dieser Artikel versucht, einen Weg aufzuzeigen, wie das gelingen kann.

Design- und Entwicklungsprinzipien

Wir widmen uns in diesem Abschnitt einigen Design- und Entwicklungsprinzipien, die bei der Gestaltung und Implementierung des visuellen Teils von modernen Webanwendungen eine Rolle spielen. Neben dem reinen Designprinzip Mobile First existieren Prinzipien, die sowohl im Design als auch in der Programmierung eine Rolle spielen. Zu diesen zählen Responsive Webdesign [1] und Atomic Design. Als reines Entwicklungsprinzip wäre der komponentenbasierte Entwicklungsansatz zu nennen.

Responsive Webdesign

Respon...

Windows Developer
Design- und Entwicklungsprinzipien für ein besseres Frontend

Frontend-Strategien

Moderne Frontends sollen gut zu warten und zukunftsfreundlich sein, unabhängig vom Gerät oder Browser gut aussehen und performant sein. Es gibt eine Reihe von Design- und Entwicklungsprinzipien, die dabei helfen, diese Ziele besser zu erreichen. In diesem Artikel sollen einige Prinzipien vorgestellt werden, die sich in der Praxis als tragfähig erwiesen haben. Dabei treffen wir neben alten Bekannten wie Responsive Webdesign und Mobile First auch auf neuere Ansätze wie Atomic Design und Pattern Libraries.

Ute Mayer


Als Tim Berners-Lee ab 1990 den Grundstein für das World Wide Web legte, ging es ihm darum, eine Möglichkeit zu schaffen, Dokumente miteinander zu verlinken und zugänglich zu machen. Deshalb ist es nicht verwunderlich, dass sich das Web historisch gesehen von Büchern ableitet und stark dokumentenbasiert ist. Auch am Vokabular, das im Zusammenhang mit dem Web verwendet wird, lässt sich diese starke Verknüpfung erkennen: Dazu gehören etwa die Begriffe Page, (Web-)Seite oder auch Paginierung, Lesezeichen und Ähnliches. Zu Beginn des Webs waren Webseiten oft nichts anderes als die digitale Version eines analogen Dokuments. Der Bezug zum Buch erleichterte den Benutzern die Interaktion mit dem neuen Medium und prägte die Art und Weise des Interfacedesigns.

Das Web im Wandel der Zeit

Doch es wird schnell klar, dass die Buchanalogie dem Medium Web nicht gerecht wird. Die wenigsten Webseiten existieren als abgeschlossene Einheit, vielmehr sind moderne Webanwendungen wesentlich komplexer. Sie sprengen den Charakter einer gedruckten Seite, die einfach nur digitalisiert wurde. Dazu kommt, dass moderne Webtechnologien eine viel größere Bandbreite an Möglichkeiten zur Gestaltung mitbringen. Zusätzlich haben wir es in der Gegenwart mit einer Vielzahl von Geräten und Bildschirmgrößen zu tun, auf denen Webanwendungen sich darstellen lassen. Es liegt auf der Hand, dass der UI-Code aufgrund dieser Bedingungen immer komplexer wird. Dies bedeutet einerseits, dass auch die Art und Weise, wie User Interfaces entworfen und implementiert werden, diesen neuen Herausforderungen gerecht werden muss. Der UI-Code sollte sich so wenig komplex und so wartungsfreundlich wie möglich gestalten. Andererseits heißt es auch, dass der Einsatz von Entwicklungsprinzipien, die seit Langem schon in der Backend-Entwicklung ihren Platz gefunden haben, in der Frontend-Entwicklung Einzug halten sollten. Dieser Artikel versucht, einen Weg aufzuzeigen, wie das gelingen kann.

Design- und Entwicklungsprinzipien

Wir widmen uns in diesem Abschnitt einigen Design- und Entwicklungsprinzipien, die bei der Gestaltung und Implementierung des visuellen Teils von modernen Webanwendungen eine Rolle spielen. Neben dem reinen Designprinzip Mobile First existieren Prinzipien, die sowohl im Design als auch in der Programmierung eine Rolle spielen. Zu diesen zählen Responsive Webdesign [1] und Atomic Design. Als reines Entwicklungsprinzip wäre der komponentenbasierte Entwicklungsansatz zu nennen.

Responsive Webdesign

Respon...

Neugierig geworden?


    
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang