Du hast deine E-Commerce-, Digitalisierungs- und OPENAI-Experten gefunden.
Understanding the Modern Web Design Approach For Responsive Solutions
Responsive Weblösungen und Mobile Apps erfordern einen völlig neuen Design-Entwicklungsprozess. Richtig gute Designs entstehen interdisziplinär und über die gesamte Realisierungsphase eines Projektes hinweg. Mit einem statischen Design in Photoshop berauben Sie Ihr Projekt allen Chancen, überhaupt jemals begeistern zu können. Und denken Sie jetzt nicht, dass das Design mit Ihnen nichts zu tun habe. Ganz im Gegenteil, Sie sind der Chef und damit inmitten des Geschehens. Aber keine Angst, im modernen Design-Prozess können Sie sich zum ersten Mal wirklich wertvoll einbringen. Wir zeigen Ihnen, wie Designs entstehen, die nicht nur modernen Lösungen gerecht werden, sondern Ihre Kunden umhauen!
Web Layout evolved.
Nur ein paar wenige unserer Kundinnen und Kunden haben keine konkreten Vorstellungen, wie das Design einer Weblösung oder Mobile App entsteht. Alle anderen haben es schon erlebt, meist aber nach dem altbekannten Muster: Erstellung eines Screendesigns mit einer bestimmten Minimal-Auflösung im Photoshop, Präsentation desselben als Abfolge statischer Bilder, Einarbeitung des (einmalig entgegengenommenen) Kundenfeedbacks, Präsentation des finalen Designs, Design-Freeze. Und dann kam die pixelgenaue Umsetzung in allen Browsern, die den Kunden Geduld und die Web-Agentur des Internet Explorers wegen haufenweise Nerven und kaum verrechenbare Zeit kostete.
Und genau so entstehen keine guten, responsiven Designs. Es braucht zur Entwicklung von Designs eine neue Philosophie, ein neues Verständnis, einen neuen Ansatz und eine viel engagiertere Interaktion mit dem Auftraggeber. Dieser Beitrag skizziert den Weg zu Designs, welche die Auftraggeber und insbesondere die Endkonsumenten, welche die Lösung nutzen werden, wirklich begeistern. Lesen Sie, wie Sie zu einem Design kommen, das durch eine neue, iterative Vorgehensweise das Beste aus der geplanten Lösung holt. Sie stehen im Zentrum des neuen Prozesses, insbesondere wenn Sie gerade dabei sind, eine neue Web- oder Mobile-Lösung zu konzipieren.
Es ist uns ein Anliegen, alle in einem Projekt involvierten Personen für den neuen Prozess der Design-Entwicklung sensibilisieren zu können. Es betrifft bei weitem nicht nur die Marketing-Abteilung, sondern auch die Verantwortlichen für die Business-Prozesse und letztendlich auch die Business Owners.
Dieser neue Prozess muss von den Inhabern und CEOs der Firmen unserer Kundinnen und Kunden verstanden und verinnerlicht werden. Gemeinsam müssen wir dafür sorgen, dass die neuen Lösungen nicht in einzelnen Abteilungen Komponente für Komponente entstehen, sondern dass die neue Design-Entwicklung ein paralleles Zusammenspiel der verschiedenen Disziplinen ist. Die Entwicklung eines guten Designs geht Hand in Hand mit der funktionalen Entwicklung der Lösung.
Für die optimale Unterstützung des modernen Design-Prozesses finden Sie darum im letzten Teil noch ein paar spannende Tipps und Regeln, wie der Design-Prozess auch für komplexe und umfangreiche Lösungen straff geführt und bestens kontrolliert werden kann.
Es hilft zu wissen, was Menschen im Internet alles so tun, wenn man dafür ein optimales Design bereitstellen will. Grundsätzlich werden drei Dinge getan:
Die Typografie bestimmt Ihr Design.
Wenn Bilder und Videos im Vollbildformat konsumiert werden, unterstreicht dies die Wichtigkeit der Typografie von Inhalten. Der dritte Punkt impliziert viel Gewicht auf alle Aspekte des Interaction Designs und der User Experience im Generellen, damit Einkäufe reibungslos abgewickelt werden können.
Egal, was für eine Weblösung oder App Sie realisieren möchten, Ihre Kundinnen und Kunden werden diese drei Dinge tun. Und sie werden es da tun, wo sie möchten. Ihre Lösung muss darauf ausgelegt werden, damit sie es genau dort auf die einfachst mögliche Weise tun können. Die Zielformulierung lautet daher:
Wenn wir uns also überlegen, wie moderne Lösungen gestaltet werden müssen, dann tun wir gut daran, zu berücksichtigen, wozu das Internet ursprünglich entworfen wurde: Die DNA des Internets ist HTML, eine Markierungssprache für die flexible Darstellung von einfach zu verlinkenden Inhalten mit einer vorgegebenen typografischen Hierarchie (H1 bis H6 waren von Anfang an mit dabei). Das Internet wurde entworfen, damit Menschen Inhalte einfach lesen, finden und teilen können.
Die DNA ist dem Internet bis heute geblieben. Geändert haben sich die Werkzeuge, mit denen wir das Internet nutzen. Es sind neben den Desktop-PCs und MacBooks haufenweise mobile Devices hinzugekommen, die alle einen Screen mit einer bestimmten Auflösung und Grösse haben. Ein solcher Display wird häufig mit „Viewport“ bezeichnet.
Die Werkzeuge definieren, wie ein Inhalt angezeigt werden muss, natürlich nicht umgekehrt. HTML war schon immer dafür gedacht, sich flexibel an die Grösse eines Devices anzupassen. Den Erfindern war klar, dass das Web nicht durch die gleichen Parameter wie eine klassische A4-Seite definiert ist. HTML wurde dafür ausgelegt, der Flexibilität des Webs gerecht werden zu können.
Die typografische Hierarchie gehört zur DNA des Internets.
Da es aber in den ersten 10 Jahren zu wenig Möglichkeiten gab, flexible Design-Elemente gestalten zu können, war die Angst gross, vom vorgegebenen Corporate Design abzuweichen. Die Möglichkeit der fixen Tabellen, die von den Web-Erfindern wirklich nur für die Aufstellung numerischer oder anderer Werte konzipiert wurden, wurde daher umgehend und überall zur Fixierung von Layoutvorgaben missbraucht. Das Unverständnis manifestiert sich auch heute noch in der Terminologie: Eine Webpage hat mit Page im klassischen Sinne einfach nichts zu tun. Eine Webpage hat keine Haptik, keine Ränder und keine fixe Grösse – es ist keine Seite.
Schon 2001 gab es immer wieder redliche Bemühungen aufzuzeigen, wie Websites eigentlich konzipiert werden müssten:
Make pages which are adoptable. Make pages which are accessible, regardless of the browser, platform or screen that your reader chooses or must use to access your pages. This means pages which are legible regardless of screen resolution or size or number of colors… This means pages which adapt to the needs of a reader.“
Heute sind die responsiven Zeiten angebrochen. Die bestehenden Konzepte funktionieren nicht mehr. Es ist Zeit für ein Umdenken. Und weil Sie eine neue Lösung konzipieren oder realisieren, müssen Sie das verstehen, denn Sie befinden sich inmitten des Geschehens.
Auch heute noch denken viele in veralteten Mustern, nämlich beispielsweise, dass Design das Problem von Designern sei. Und dass das Design zuerst erstellt werden müsste, am besten von Design-Profis, damit dann die Lösung implementiert werden kann. Vergessen Sie das gleich jetzt.
In Tat und Wahrheit sind Sie der Chef. Es ist Ihre Lösung, die geboren wird und sich entwickelt, und Sie bestimmen mit, wohin die Reise führt. Damit Sie den neuen Design-Prozess für responsive Lösungen verstehen, müssen Sie begreifen, dass die Entwicklung eines responsiven Designs nicht mehr länger als kreativer Prozess alleine oder als Implementierungs-Herausforderung für sich verstanden werden kann, sondern eine interdisziplinäre Business-Herausforderung ist.
Design ist nicht das Problem von Designern. Es ist Ihres.
Im Zentrum stehen Ihre Produkte und Dienstleistungen und die damit verbundenen Services. Und genau diese individuellen Inhalte bestimmen das Design Ihrer Lösung, nicht ein Grafik-Büro.
In den bisherigen Design-Entwicklungsprozessen konnte sich der Kunde kaum einbringen: Es wurden Vorgaben gesammelt, dann wurde ein Design erstellt, welches wenig später am grossen Tag dem Kunden als fixfertige Lösung präsentiert wurde. Der Kunde konnte den Daumen hoch oder runter halten, verstand die geplante Interaktion aber ohnehin nicht, fokussierte das Unwesentliche und äusserte sich dazu, dass „Lorem ipsum“ der falsche Text sei und dass der Farbton des Logos sich im letzten Halbjahr einen Tick ins Blau verschoben hätte.
Gutes Design kann nicht von Funktionalität entkoppelt werden.
Stochastisch gesehen war es unmöglich, mit dieser Präsentation die Erwartungen erfüllen zu können. Beide Seiten mussten daher in einer Tuning-Runde Kompromisse eingehen und am Schluss waren beide Parteien dann lediglich zufrieden, und eben nicht begeistert, was eigentlich beide Parteien erreichen wollten.
Das Design war immer losgelöst von der funktionalen Lösung. Vergleichen Sie es mit einem Film. Sie möchten einen Spielfilm drehen und geben zu Beginn zu Protokoll, wie Sie sich diesen in etwa vorstellen. Dann sehen und hören Sie nichts, bis der Filmemacher den fixfertigen Film aus der Post-Production holt und Ihnen zeigt. Wenn Sie nun eine Änderung wünschen, dann kann man nochmals von vorn beginnen. Doch auch dann werden Sie wieder nicht involviert.
Fixfertige Screendesigns in Photoshop sind nicht nur unvorteilhaft, sondern nicht zu gebrauchen. Dies aus den folgenden Gründen:
Akzeptieren Sie keine Screendesigns auf Ebene Photoshop. Sie sind unbrauchbar.
Presenting static visuals is like bringing a knife to a gun fight.
Ich will Photoshop und die damit verbundene Arbeit nicht gänzlich wegschreiben. Es gibt durchaus noch Einsatzbereiche, auch bei der Entwicklung eines Screendesigns, jedoch nicht mehr in der bisherigen Fülle und Detaillierung. Wenn es aber darum geht, die Atmosphäre zu kreieren, mit Filtern und Effekten zu spielen, Farbkombinationen zu variieren, dann führt kaum ein Weg an Photoshop vorbei.
Das Design besteht nicht nur aus Layout. Es gehört immer noch die ganz individuelle Stimmung dazu, die Atmosphäre, in welche eine Lösung verpackt werden soll. In Photoshop kann diese Atmosphäre bestens generiert und variiert werden. Es ist dann aber darauf zu achten, dass man nicht zu lange im Photoshop verweilt, sondern umgehend wieder in den Browser geht und sich die Lösung auf die Art anschaut, wie sie wirklich wird.
Design ist heute also direkt an Code gebunden. Responsiv Design ist nur im Browser funktional und kann ohne Code dem Kunden nicht gezeigt werden.
Wichtig: Photoshop-Dateien oder andere Grafiken nützen Ihnen als Kunde nichts, sie vermögen der Lösung im Browser nicht gerecht zu werden.
Designer sind heute auch Coder.
Wenn Sie also ein Projekt planen und dabei einen Lieferanten einbinden, der Ihnen ein erstklassiges Photoshop-Design verspricht, dann müssten alle Ihre Alarmglocken in greller Lautstärke erklingen: Die klassischen Photoshop- (only) Designer sind dabei, ihre Skills zu verbessern. Sie wissen, dass ihre Skills von damals in unseren responsiven Zeiten ohne HTML5 und CSS3 nicht mehr reichen.
Wenn die bisher üblichen Designs in Photoshop an Gewicht verlieren, weil sie der Responsivness nicht mehr gerecht werden können und einen iterativen Entstehungsprozess verhindern, worauf ist dann zu achten, damit es ein gutes Design wird?
Zuerst stellt sich die Frage, in welcher Beziehung ein Viewport zum Inhalt steht. Schaut man sich die aktuellen Lösungen, insbesondere im Mobile-Bereich an, dann gibt es sehr unterschiedliche Implementierungen. Sie lassen sich in die folgenden Gruppen einteilen:
Die meisten Apps und Anwendungen lassen einen in der Vertikale scrollen. Navigationen werden häufig von der Seite her eingeschoben, womit das Dokument auch in der Horizontalen scrollbar ist. Einige Lösungen passen ihren Inhalt natürlich dem zur Verfügung stehenden Platz an, andere lassen sich in allen Dimensionen anschauen.
Obschon der erst genannte Punkt wohl die am weitesten verbreitete Lösung repräsentiert, kann man gutes Design nicht an dieser Beziehung festmachen, da es für alle hier genannten Beziehungsarten zwischen Viewport und Content sehr gute Beispiele gibt.
Es gibt immer wieder Versuche, das Design an rein geometrisch-mathematischen Axiomen festzumachen. Doch dann, wenn man die universal gültige Formel gefunden zu haben meint, sieht man, dass mit der Umkehrung des Formats, sprich dem Drehen des Devices um 90°, alles auseinanderfällt. Es ist uns mindestens bis heute keine allgemeingültige Formel bekannt, mit der auf diese Weise beispielsweise die jeweils optimale Schriftgrösse ermittelt werden kann.
Wenn also mit formalen Gesetzesmässigkeiten keine guten Designs herleitbar sind, hilft es vielleicht, wenn wir (einmal mehr) den User ins Zentrum rücken: Aus Usability-Tests und verschiedenen Typografie-Studien wissen wir, dass eine Zeile Text dann am besten lesbar ist, wenn Sie zwischen 45 und 75 Zeichen enthält. Wenn wir also davon ausgehen, dass ein Dokument mehrere Spalten haben kann, dann sollte dieser Wert auf jede einzelne Spalte zutreffen. Damit machen wir den Text für den User lesbar.
Die Anzahl Zeichen pro Zeile ist tatsächlich ein universeller Wert.
Im Bereich der Stylesheets und insbesondere der Media-Stylesheets sind in den letzten Jahren viele neue Masseinheiten und Möglichkeiten dazugekommen. Es ist heute darum möglich, relative Abhängigkeiten definieren zu können, beispielsweise die Schriftgrösse in Relation zum Titel oder der Abstand zu einem Bild in Relation zum Zeilenabstand.
Wenn wir daher heute Minimal- und Maximalgrössen für die einzelnen Schriften und parallel dazu die Verhältnisse zwischen den einzelnen Elementen definieren (jeweils ausgehend von der möglichst optimalen Grösse der gewünschten Standardschrift), zur Umsetzung auf den verschiedenen Devices fluide grids (flexible Raster) einsetzen und auch den Details wie dem Zeilenabstand genügend Beachtung schenken, dann gelangen wir zu einer soliden Grundlage für ein wunderbar ästethisches Design.
Sie sehen damit, dass die Typografie für ein gutes Design der wichtigste Faktor ist. Wir erinnern uns: Ihr Zielpublikum konsumiert Bilder, Audio oder Video mit Vorliebe im Vollbildmodus, den wir ihnen nicht verwehren wollen. Dann bleiben für das Design lediglich noch die Inhalte, die Ihr Zielpublikum lesen will, und zwar auch dann, wenn sie etwas kaufen wollen. Die Typografie ist dabei elementar, die Atmosphäre, sprich alles am Design, was nicht wirklich Layout ist, nicht unwichtig, für den Erfolg aber wohl nicht matchentscheidend.
Was trotz optimalen Grössenverhältnissen und bestmöglicher Typografie jedoch keinesfalls vergessen werden kann, ist der allerwichtigste Teil der soliden Lösung: Der grossartige Inhalt! Überlegen Sie sich in diesem Kontext bei mehrspaltigen Designs auch, welches die führende Inhaltsspalte ist. Dieses Konzept sollte dann konsequent angewendet werden.
Entwickler hatten im bisherigen Design-Prozess jeweils auf ihren Startschuss gewartet: Der Design-Freeze ist mit dem Kunden vereinbart worden und darum können sich nun endlich die Entwickler an die Arbeit machen. In unserem modernen Design-Prozess macht das keinen Sinn mehr. Das Design muss ausgehend von der Typografie iterativ entstehen und die vorhandenen und während dem Projektverlauf ändernden Anforderungen konsequent berücksichtigen. Die Entwicklung des Designs ist kein der Entwicklung der Lösung vorgeschalteter Prozess mehr, sondern ein kontinuierlicher Prozess parallel und verzahnt in die Entwicklung der Lösung. Neue Begebenheiten bei der Entwicklung haben stets einen Einfluss auf das Design, die mit genannter Vorgehensweise berücksichtigt werden können.
Unseren Kundinnen und Kunden erklären wir diesen Design-Prozess. Wir zeigen auf, was sie erwartet, mit welchen Unterschieden sie konfrontiert werden könnten und stimmen gemeinsam unsere Erwartungen ab.
Man könnte nun denken, dass die Designentwicklung als kontinuierlicher Prozess über die gesamte Projektdauer hin ein Fass ohne Boden sein muss. Oder, dass er ein Projekt unnötig verlangsamen wird. Damit das nicht passiert, haben wir die folgenden Regeln eingeführt:
No Shows = No Vote
Wir unterscheiden zwischen Device- und Design-Testing. Beim Design-Entwicklungsprozess setzen wir den Fokus primär auf das Design-Testing. Es sind Fragen zu diskutieren, ob nun das Warenkorb-Symbol in der Grösse noch genügend sichtbar ist, ob es in der Übersichtsliste wirklich ausgeblendet werden kann und anderes mehr.
Das Device-Testing geniesst beim finalen Abschlusstext Priorität. Hier schauen wir Version für Version der definierten Betriebssysteme durch und prüfen, ob es irgendwo zu Problemen kommt. Diese Art des Testings ist sehr entwicklungsnah und ist mehr als Kontrolle, denn als kreativer Prozess zu verstehen. Das Device-Testing muss nicht während der gesamten Realisierungszeitspanne stattfinden.
Während das Device-Testing eher algorithmisch angegangen werden kann, braucht es für das Design-Testing eine besondere Affinität zu responsiven Lösungen. Umfangreiches Hintergrundwissen darüber, wer in welcher Form mit welchen Devices interagiert, wie die Geräte gehalten werden, in welcher Umgebung sie eingesetzt werden und dergleichen mehr erachten wir als Basis dafür, dass wir Sie optimal begleiten und das Optimum aus Ihrer neuen Lösung herausholen können.
Der allgemein übliche Design-Ansatz wird modernen Lösungen nicht mehr gerecht. Die Zeiten, in denen fixfertige Designs mit fix definierter Breite in Grafikformaten am grossen Tag präsentiert wurden, sind vorbei. Der bisherige Design-Prozess im Wasserfall-Modell kommt aus dem Print-Bereich und hat an und für sich nie in den Web- und Mobile-Bereich gepasst. Und weil es Web- und Mobile-Lösungen niemals möglich ist, alle Anforderungen direkt im ersten Design-Entwurf berücksichtigen zu können, braucht es einen iterativen Prozess, welcher sich im Übrigen bestens mit einer agilen Projektleitungsmethode verbinden lässt.
Ihr Designer zeigt Ihnen die Lösung in Photoshop? Schicken Sie ihn nach Hause.
Während im alten Design-Prozess Änderungen im Projektverlauf kaum mehr möglich sind, ist der neue Prozess auf die Berücksichtigung von Veränderungen ausgelegt. Nur schon der vielfältigen Devices wegen ist der alte Prozess nicht mehr tragbar, da kurz vor Launch der Lösung ganz sicher noch ein neues Gerät auf den Markt kommt, dessen Dimensionen und Fähigkeiten im Initialdesign nicht berücksichtigt werden konnten, weil’s das Gerät noch gar nicht gegeben hatte.
Natürlich bleibt die Planung der Funktionen und des Interaction Designsein wesentlicher Bestandteil des Prozesses. Nur ist er eben nicht mehr abgeschlossen, sondern – unter Berücksichtigung der oben genannten Regeln – open end. Der Vorteil für unsere Kunden, das Design im gesamten Entwicklungsprozess den gemachten Befunden adäquat anpassen zu können, ist immens.
Der Design- und der Entwicklungsprozess müssen zusammengeführt werden. Es darf keine Abnahmen mehr geben, bei denen bestimmte Designs fixiert werden. Hinterfragen Sie immer auch den Einsatz von Werbe-Agenturen für die Erstellung von Screendesigns. Meist macht das keinen Sinn. Engagieren Sie die Werbe-Agentur, wenn Sie dies möchten, für die Kreation der Atmosphäre, nicht für das Design oder Interaction Design der Lösung.
Solide Designs entstehen interdisziplinär. Und niemals durch Designer alleine.
Gemeinsam mit unseren Kundinnen und Kunden holen wir auf diese Weise das Beste aus den neuen Lösungen: wir arbeiten iterativ und eng zusammen, gestalten, testen, gestalten neu, skizzieren, testen, und so weiter. Damit dies reibungslos möglich ist, muss der Projektleiter das Setup neu kreieren. Es kann keine Design-Abteilung mehr geben, die einen losgelösten Arbeitsschritt alleine im Vorfeld macht. Designer, Entwickler und der Kunde müssen eng zusammenarbeiten.
Comments are closed.
Du hast deine E-Commerce-, Digitalisierungs- und OPENAI-Experten gefunden.
Michel
Tolles Posting….
Vorallem der Satz “Ihr Designer zeigt Ihnen die Lösung in Photoshop? Schicken Sie ihn nach Hause.” gefiel mir.
Zeitgemässe Umsetzung passiert im Testing und in der Usability.
Gruss Michel
Philipp Sprecher
Hoi Michel!
Danke für die Blumen, die ich von Dir als Pro ganz besonders schätze.
Einen schönen Freitag noch!
Bis bald und lieber Gruss,
Philipp
Beat
WOW! Ich bin überwältigt.
Super finde ich, dass Sie mich vor unserem 1. Meeting am kommenden Montag auf diesen Artikel aufmerksam machten.
Dem Comment von Michel kann ich mich nur anschliessen. Auch ich habe mir diesen Satz mit grünem STABILO BOSS als wichtigstes Statement hervor gehoben.
Vielen Dank, bis am Montag,
Beat