Sich anpassendes Design

Und die Rolle der Entwicklung im Design

Dies ist ein tiefer Einblick in die Rolle der Entwicklung im Designprozess, mit einem Fokus auf responsives Design. Es richtet sich an Designleiter / -manager und -entwickler, die mit Designteams zusammenarbeiten, sowie an visuelle Designer, die bessere Webdesigner werden möchten. Ich werde versuchen, die Probleme zu erläutern und praktische Lösungen vorzuschlagen. Ich hoffe, es hilft.

Sich anpassendes Webdesign. Eine dunkle Kunst?

Es ist 2018. Warum reden wir immer noch über Responsive Design?

Das erste Mal habe ich Responsive Design im Jahr 2011 gelernt. Zuerst habe ich Ethan Marcottes Buch "Responsive Web Design" gelesen.

Eine dunkle Kunst des Webdesigns?

Responsive Design ist seit ungefähr 8-9 Jahren ein Thema. Am Anfang war es wirklich beeindruckend, eine responsive Website zu sehen! Fast eine "dunkle Kunst" des Webdesigns. Aber das ist schon lange her.

In meiner Rolle als Designer oder Entwickler finde ich es seltsam, dass ich immer noch von Kunden, Agenturen und Designern gefragt werde:

"... eine responsive Website ..."

Mein erster Gedanke ist immer:

'Gut Offensichtlich…'

Aber ein Großteil meiner freiberuflichen Webentwicklungsarbeit besteht darin, Dinge reaktionsschnell zu machen. Designer bitten mich, ihnen eine Website zu erstellen, und senden mir dann ein Modell einer Desktop-Website. Und meine erste Frage ist immer:

„Wie sieht das auf dem Handy aus? Auf dem Tablet? "

Denken Sie über den Desktop hinaus

So zitieren Sie aus Ethans Buch:

Denken Sie über den Desktop hinaus und entwerfen Sie Entwürfe, die den Bedürfnissen Ihrer Benutzer entsprechen, unabhängig davon, wie groß oder klein die Anzeige ist.

Ich habe die Erfahrung gemacht, dass visuelle Designer dies auch jetzt noch nicht tun. Oder zumindest nicht gut genug.

Eine Horrorgeschichte über falsches Webdesign

Als Kontext möchte ich meine schlimmste Erfahrung mit falschem Webdesign teilen. Offensichtlich werde ich keine Namen nennen. Ich möchte nur sagen, dass die Website einen erheblichen Datenverkehr verzeichnet hat, einschließlich eines hohen Mobilfunkaufkommens. Und dass das Geschäft von Verkäufen von ihrer Website abhängig war. Es war also eine große Sache, dies richtig zu machen!

Ein Unternehmen hatte über drei Monate und weit über 100.000 US-Dollar für eine massive Neugestaltung seiner Website aufgewendet. Sie hatten einige schöne Konzeptarbeiten erstellt, aber sie waren weit davon entfernt, ein fertiges Design zu entwickeln, und ein fester Starttermin rückte schmerzhaft in greifbare Nähe.

Das Team hatte nicht einmal darüber nachgedacht, wie es jenseits des Desktops funktionieren würde. Und als ich das zuständige Team fragte, wie etwas in anderen Größen funktionieren würde, bekam ich nur leere Ausdrücke zurück, als hätte ich verrückte Fragen gestellt! Sie sahen es wirklich nicht als Teil ihrer Arbeit an, über diese Dinge nachzudenken.

Sie hatten nur ein hübsches Bild einer Website entworfen. Nichts, was gebaut werden könnte.

Ich behaupte nicht, dass es sich nicht lohnt, eine Phase der Erforschung von Designkonzepten in Angriff zu nehmen, bevor das Design serienreif ist. Aber sie hatten fast die gesamte Projektlaufzeit ausgeschöpft, und der Bau lag nun weit hinter dem Zeitplan (oder besser gesagt, dem Zeitplan zurück.) hatte nicht angefangen).

Als ich ihre erste PSD öffnete, stellte ich fest, dass der Website-Container ungefähr 1.750 Pixel breit war. Wenn Sie noch nicht nach Luft schnappen, wäre diese Breite nur für 1-5% des Verkehrs geeignet!

Nach einigem Graben wurden die Gründe dafür klar:

Seit Monaten gab es ein Team von Grafikdesignern, die liebevoll Pixel für sich entwickelten, unabhängig von Personen mit Reaktions- oder Entwicklungskenntnissen.

Bezeichnenderweise hatten sie ihre Arbeiten auf großen Fernsehbildschirmen überprüft und Modelle auf kleine Zettel gedruckt, die an einer Studiowand befestigt waren. Erstaunlicherweise hatte während dieses Prozesses niemand darüber nachgedacht, wie es in einem Webbrowser tatsächlich aussieht, geschweige denn auf kleineren Bildschirmen und Mobilgeräten.

Am Ende starteten sie (etwas) zum Stichtag. Da jedoch nur die Hälfte der Website erstellt wurde, gab es unzählige Probleme und viele sehr unglückliche Stakeholder, die verärgert fragten:

"Wie ist es passiert?!"

Die Entwickler werden es herausfinden

So denken leider viele Designer.

Ich habe an unzähligen Projekten gearbeitet, bei denen ich ein Desktop-Design in eine funktionierende, baubare und reaktionsfähige Website verwandeln musste.

Als Designer fülle ich die Lücken in der Arbeit anderer Designer. Als Entwickler gehe ich jedoch über das hinaus, was der Designer haben sollte.

* Hinweis: Ehrlich gesagt, ich mag diese Herausforderung (manchmal) als kreativer Entwickler. Das ist mehr zu sagen; Ihr durchschnittliches Entwickler- / Entwicklungsteam wird dies nicht zu schätzen wissen.

Was können wir dagegen tun?

Ich glaube, es kommt auf eine Änderung der Denkweise an:

  • Reaktionsschnell denken.
  • Um Ihren Designprozess zu überdenken.

Später in diesem Artikel werde ich einige Dinge behandeln, die ich mit Designteams ausprobiert habe, mit denen ich gearbeitet habe und die sich als erfolgreich erwiesen haben. Aber zuerst; Der umstrittenste Teil dieses Artikels… Mach dich bereit…

Der Fall für Designer, die das Programmieren lernen

Ich stecke meinen Hals hier raus ... Aber flipp nicht aus! Lesen Sie weiter für meine volle Begründung. Es ist nicht so "schwarz und weiß", wie Sie vielleicht denken ...

Diese Einstellung von „Die Entwickler werden es herausfinden“ ist nicht gut genug.

Ein erfahrener Designer ist jedoch mehr als in der Lage, ein guter responsiver Webdesigner zu sein, wenn er responsiv denkt.

Es ist nicht so schwarz und weiß wie "Designer sollten codieren". Es ist nicht. Aber es hilft.

Wenn Sie nicht wirklich verstehen, wie etwas funktioniert, werden Sie es nur wirklich probieren. Die Entwickler möchten jedoch nicht, dass Designer es versuchen und dann herausfinden, wie es tatsächlich funktioniert.

Wir alle müssen es besser machen - unabhängig davon, ob Designer das Programmieren erlernen oder mit visuellen Designern zusammenarbeiten, um ihnen beizubringen, wie sie bessere, reaktionsschnelle Websites erstellen.

Es handelt sich um einen Stich aus dem 16. Jahrhundert, den der italienische Bildhauer Domenico del Barbiere „Zwei enthäutete Männer und ihre Skelette“ nannte.

Dieses Kunstwerk steht stellvertretend für italienische Renaissancekünstler wie Leonardo da Vinci und Michelangelo, die tote menschliche Körper präparierten, um ein besseres Verständnis für die Funktionsweise von Muskeln zu erlangen und realistischere Gemälde und Skulpturen zu schaffen.

Diese Praxis ist ein unglaubliches Beispiel für die Hingabe an Ihr Handwerk. Ich schlage nicht vor, dass wir damit beginnen, die Benutzer unserer Website oder Webentwickler zu sezieren! Aber es ist ein guter Anlass zum Nachdenken darüber, wie:

Ein besseres Verständnis dafür, wie etwas funktioniert, ist von entscheidender Bedeutung, um Ihre beste Arbeit zu leisten.

Eine populäre Analogie zerlegen

Wenn Sie jemals darüber diskutiert haben, ob Designer Code mit visuellen Designern kennen, haben Sie wahrscheinlich die folgende Zeile gehört:

"Aber Architekten wissen nicht, wie man baut!" Gotcha!

Nun, nein. Die meisten Architekten können kein Gebäude bauen. Aber ein guter Architekt wird eine gute Vorstellung davon haben, was dahinter steckt. Sie zeichnen nicht nur hübsche Bilder von Gebäuden. Sie erstellen Schaltpläne. Sie kennen sich mit den verwendeten Materialien aus - wie sie aussehen, sich anfühlen, auf unterschiedliches Licht reagieren usw.

Mein Vater war ein Mengenmesser. Zu seinen Aufgaben gehörte die Risikobewertung und die Preisgestaltung für die oft unrealistische Vision eines Architekten. Und verständlicherweise mochte er einige Architekten, mit denen er zusammengearbeitet hatte, nicht! (Kennen Sie die Beziehung zwischen visuellen Designern und Entwicklern?)

Aber die besten Architekten, mit denen er zusammengearbeitet hat - diejenigen, die ihr Handwerk wirklich kannten - haben realistischere, baubarere Gebäude entworfen, die allen viel Zeit und Geld sparten. Und er liebte es, mit diesen Architekten zu arbeiten! Genau wie Entwickler es lieben, mit Designern zu arbeiten, die sich auskennen. Das sorgt für eine gesündere Arbeitskultur und ein besseres Endprodukt.

Mein ehrlicher Rat ist:

Erfahren Sie, wie Sie Ihre Entwürfe erstellen. Es macht Sie einfach zu einem besseren Webdesigner. Ich denke, Sie werden überrascht sein, wie sehr Sie es genießen. Es macht Spaß und ist sehr befriedigend, eigene Kreationen zum Leben zu erwecken und im Browser zu verbessern!

Aber wenn das nicht gelingt:

All dies bedeutet nicht, dass visuelle Designer keine guten Webdesigner sein können oder dass ihnen Responsive Design beigebracht wird. Sie müssen nur lernen, reaktionsschnell zu denken - wie ein Entwickler zu denken, ohne den Code zu kennen.

Zwei Möglichkeiten, sich an responsives Webdesign zu wenden

Es gibt zwei Arten, wie ich an Webdesign herangehe, aber der Denkprozess - diese Vorstellung von reaktionsschnellem Denken - ist immer derselbe. Welches, glaube ich, ist der Schlüssel.

Wie viel ich tatsächlich visuell entwerfe (d. H. Detaillierte Modelle erstelle), hängt im Wesentlichen davon ab, wer es erstellt.

Ansatz 1: Wenn jemand anderes bauen wird, was ich entwerfe

In diesem Fall als Designer:

  • Ich entwerfe jeden Haltepunkt.
  • Ich stelle sicher, dass alle Szenarien und Zustände abgedeckt sind.
  • Ich liefere responsive Template Designs.
  • Ich liefere einen Styleguide, der alles abdeckt, was in den visuellen Designs nicht offensichtlich ist, wie z. B. Schwebezustände usw.

Und das Endprodukt sieht ungefähr so ​​aus:

Design-Fallstudie der Adobe Portfolio-Marketing-Website (2016)

Ansatz 2: Wann baue ich das, was ich selbst entwerfe?

Im Gegensatz zu dem, was ich über das Abdecken aller Haltepunkte und Szenarien gesagt habe - in diesem Fall - erstelle ich nur für den Desktop. Aber ich denke immer darüber nach und stelle mir vor, wie es auf kleineren Bildschirmen aussehen könnte. Da ich derjenige bin, der es erstellt, greife ich so schnell wie möglich auf den Browser zu, um meine Ideen zu überprüfen.

Ein Beispiel für diesen Ansatz ist mein persönliches Projekt, Club of the Waves:

Fallstudie zum Club of the Waves-Design

Wie Sie oben sehen können, habe ich nur die Kernseiten auf dem Desktop verspottet.

Mein Designprozess verlief ungefähr so:

  • Dies war eine Neugestaltung einer bestehenden Website. Daher habe ich mit Google Analytics herausgefunden, unter welcher Browsergröße "die meisten Personen" die Website anzeigen. Dann habe ich meine Desktop-Modelle so entworfen, dass sie zu dieser Größe passen.
  • Von dort aus habe ich den Rest im Browser entworfen - Code geschrieben - und gesehen, wie meine Änderungen live durchgeführt wurden. Auf diese Weise kann ich die Größe, den Abstand, das Layout und die Animation nach Herzenslust anpassen.
  • Und ich kann es bei verschiedenen Browsergrößen testen und dabei alle erforderlichen Haltepunkte und Medienabfragen hinzufügen.

Ein weiteres Beispiel für diesen Ansatz beim Webdesign ist die Website von Owl Studios. Ich habe es auf dem Desktop verspottet, wie unten gezeigt:

Owl Studios Design-Fallstudie

Und dann hatte ich Spaß damit, im Browser:

Ich hatte keinen wirklichen Plan, wie die Website animiert werden würde. Ich habe es nur ausprobiert, Code geschrieben und den Browser aktualisiert, bis ich damit zufrieden war. Es war sehr viel "eine Entwicklungssache", aber zu 100% Teil des Designprozesses.

Das gleiche "Design im Browser" -Verfahren gilt für alle Haltepunkte. Unten sehen Sie Screenshots davon, wie es auf dem Handy ausgesehen hat:

Die Frage der Feinabstimmung

Ich habe gerade beschrieben, wie ich ein Design im Browser verfeinere - indem ich Animationen hinzufüge, Größen und Abstände ändere usw.

Überlegen Sie, wie einfach, effizient und schnell dies für einen kreativen Entwickler ist. Stellen Sie sich nun einen Designer vor, der versucht, diese Änderungen an einen Entwickler weiterzuleiten.

  • Versorgen Sie sie mit einer Runde nach der anderen per E-Mail?
  • Jagdst du sie auf Slack?
  • Reichen Sie Dutzende von GitHub-Problemen ein?
  • Liefern Sie ihnen eine neue Designdatei, in der die Änderungen mehrmals hervorgehoben werden?
  • Oder setzt du dich neben sie und sagst ihnen, was sie tun sollen?
Ich verspreche Ihnen, kein Entwickler möchte einen Designer über die Schulter fahren!

Wie auch immer Sie es tun, dieser Hin- und Her-Vorgang kann für alle sehr zeitaufwendig, ineffizient und frustrierend sein.

Entwicklung ist Design

Designer, Produktmanager, Designmanager und sogar Entwickler müssen aufhören, die Entwicklung als vom Design getrennt zu betrachten.

Und das muss nicht heißen:

  • "Designer sollten codieren."
  • Oder; "Entwickler sollten gestalten."

Es bedeutet; Wir sollten zusammenarbeiten.

HTML, CSS und sogar JavaScript sind heutzutage Teil des Designprozesses.

Das Design hört nicht auf, wenn Sie Sketch, Photoshop oder XD verlassen. Oder wenn Sie eine Website oder ein Produkt gestartet haben.

  • Wir optimieren unsere Designs im Browser.
  • Wir testen unsere Designs mit echten Menschen,
  • Dann arbeiten Designer und Entwickler zusammen, um das Design zu durchlaufen.

Die Website-Animation ist vielleicht das offensichtlichste Beispiel dafür, wie Entwicklung Design ist. Unsere Branche ist von der Animation von Websites besessen. Aber ein Designer macht das nicht *, ein Entwickler schon.

* Und ich spreche nicht von Designern, die ausgefallene Design-Prototyping-Software verwenden, um Videos und Simulationen zu erstellen, die Lastzustände und Interaktionen imitieren. Es tut uns leid. Das ist nicht real. Ein Entwickler muss immer noch nachvollziehen, was der Designer - so realistisch wie möglich - innerhalb des Budgets und der Zeitlinie getan hat.

Epicurrence №6 und Basic Culture, dargestellt in: „Digitale Produkte zum Leben erwecken“

Wenn das Entwickeln von Dingen wie dem oben genannten nicht als kreativ oder als Teil des Designprozesses angesehen wird, dann weiß ich nicht, was das ist.

Also, in Bezug auf die Rolle der Entwicklung im Design:

Machen:

Beziehen Sie Front-End- und Creative-Entwickler in den Designprozess ein. Holen Sie sich frühzeitig Ihre Meinung und beseitigen Sie Probleme, bevor es zu spät ist.

Nicht:

Geben Sie die Entwürfe am Ende des Prozesses einfach an die Entwickler weiter und hoffen, dass alles in Ordnung ist. Oder Sie werden mit einer Horrorgeschichte enden, die meiner Konkurrenz schon früher Konkurrenz macht!

Du bist ein Team, benimm dich wie eines

Eine einfache Möglichkeit, Designer und Entwickler zu einer besseren Zusammenarbeit zu ermutigen, besteht darin, dass Ihre Design- und Entwicklungsteams zusammenarbeiten. Oder zumindest nahe beieinander. Trenne sie nicht voneinander.

  • Die Aufteilung Ihres Teams setzt unnötige Grenzen.
  • Schafft eine spaltende Kultur.
  • Und erschwert die Zusammenarbeit.

Ich habe das schon so oft bei großen Unternehmen und Designagenturen erlebt. Es ist nicht gesund.

Reaktionsschnell denken

Kein Designer will Entwickler verärgern, aber manchmal entwerfen sie versehentlich Dinge, die nicht funktionieren oder die nicht alle Grundlagen abdecken. Als jemand, der codiert, verstehe ich das, aber Designer, die sich nur auf Visuals konzentrieren, tun das oft nicht. Sie müssen lernen, wie man reaktionsschnell denkt - wie ein Entwickler.

Wie bringen wir visuellen Designern bei, reaktionsschnell zu denken?

Die Antwort ist nicht, sie anzuschreien, wenn sie Fehler machen. Es geht darum, sie zu erziehen, damit sie in ihrem Designprozess und Denken bessere Gewohnheiten entwickeln.

Im Folgenden sind 5 Dinge aufgeführt, die ich mit Designteams in NYC ausprobiert habe und die sich als effektiv erwiesen haben:

1) Gestalten Sie mit reaktionsschnellen Vorlagen

Hier ist eine Skizzenvorlage, die ich in einem früheren Job für ein Team von Designern erstellt habe:

Dieser Ansatz ist eine gute Methode, um Designern beizubringen, alle Szenarien zu durchdenken und ihre Entwürfe reaktionsschneller zu gestalten.

Eine gute responsive Vorlage beinhaltet:

  • Eine Zeichenfläche für jeden Haltepunkt.
  • Jeweils mit dem ansprechenden Raster gut sichtbar.
  • In diesem Fall entsprechen die Haltepunkte in etwa einer "großen" und einer "kleinen" Desktop-Ansicht, einem Tablet (Hochformat) und einem Mobilgerät.

Nun sollte ich sagen; Ich denke, es ist wichtig, eine Website nicht nur als Desktop-, Tablet- und Mobilwebsite zu betrachten. Oder "Haltepunkt 1", "Haltepunkt 2" und so weiter ... Aber es ist eine effektive Möglichkeit, es für nichttechnische Personen zu gestalten. Und gut genug für einen visuellen Designansatz wie diesen.

Ich denke, die wichtige Lektion hier ist:

Stresstest

Es ist unwahrscheinlich, dass Sie jedes reaktionsfähige Problem mit einem solchen Modellansatz lösen, aber es bietet Designern zumindest eine vereinfachte Möglichkeit, ihre Entwürfe einem Stresstest zu unterziehen. Und mit etwas Glück entdecken Sie Fehler im Design, bevor Sie es einem Entwickler übergeben.

2) Es ist keine "Version"

Ich denke, eine wichtige Erkenntnis für manche Menschen ist, dass man Mobile und Tablet nicht mehr als „Version“ betrachtet.

  • Es ist keine Version.
  • Es ist dieselbe Website.
  • Es ist derselbe HTML-Code.
  • Nur das CSS hat sich geändert.

"Version" ist ein traditioneller Begriff aus einer Ära, in der der mobile Datenverkehr auf eine völlig andere Website umgeleitet wurde, die sich an mobile Benutzer richtet - eine Ära, in der reaktionsschnelle Websites abgelöst wurden. Wir müssen von diesem alten Begriff abweichen.

Ich denke, diese „Version-Denkweise“ hält einige Designer davon ab, reaktionsschnell zu entwerfen.

"Jemand anderes wird die andere Version herausfinden ..."

Oder;

"Nicht so viele Leute werden es auf dem Handy sehen ..."

Nun, diese Einstellung ist nicht mehr gut genug. Weil die "andere Version" viel mehr Aufmerksamkeit erhält, als manche erkennen oder denken. Es gehört zur Aufgabe des Designers, über den Desktop hinauszudenken.

3) Entwerfen Sie für alle Szenarien, nicht nur für das Best-Case-Szenario

Stellen Sie sich ein responsives Layout vor als:

  • Eine Benutzeroberfläche, die so gut wie unmöglich zu knacken ist.
  • Es kann eine beliebige Menge an Inhalten und Zeichen enthalten.
  • Und es funktioniert in jeder Breite und Höhe des Browsers.

Zu oft sehe ich Designs, die nur für eine begrenzte Anzahl von Zeichen funktionieren, aber Sie können garantieren, dass der Kunde mehr Wörter in die Überschrift schreibt als "Lorem Ipsum".

Entwerfen Sie nicht mit einer geeigneten Anzahl von Zeichen, die zu Ihrem Design passen.

Denken Sie an das Design und den Inhalt als etwas, das zusammenarbeitet. Nicht unabhängig voneinander.

Entwerfen Sie keine Dinge, um Ihre Designerfreunde zu beeindrucken, eine Auszeichnung zu gewinnen oder Dribbble zu mögen. Errichten Sie Ihre Arbeit in der Realität und gestalten Sie mit realen Inhalten und Daten - oder in enger Annäherung.

4) Denken Sie in Prozent und nicht in Pixel

Möglicherweise entwerfen Sie in Ihrer Konstruktionssoftware eine Breite von 100px. Im Browser sind diese 100 Pixel jedoch eine prozentuale Breite des Containers. Wenn die Breite des Browsers kleiner wird, werden Ihre 100px immer mehr 80px, 60px, 40px und so weiter.

Denken Sie jetzt über den Inhalt nach, den Sie in diesem 100px-Bereich haben…

  • Funktioniert es bei einer Breite von weniger als 100px?
  • Wenn nicht, müssen Sie entweder das Layout oder den Inhalt überdenken.
  • Oder erstellen Sie einen Haltepunkt, um abzudecken, was passiert, wenn es nicht mehr funktioniert.

Ich betone diesen Punkt des Denkens in Prozenten und nicht in Pixeln, weil dies das ist, womit die visuellen Designer bei meinem letzten Job am meisten zu kämpfen hatten. Sie konnten sich einfach nicht mit diesem Konzept beschäftigen, dass die Dinge proportional enger werden, und warum ist das ein Designproblem?

Ich habe dieses kurze Modell (oben) erstellt, um den jüngeren (und älteren) visuellen Designern diesen Punkt bei meinem letzten Job zu demonstrieren, was sich als sehr effektiv erwies!

  • Es zeigt dasselbe 12-Spalten-Raster bei 2 verschiedenen Browserbreiten.
  • Es zeigt deutlich, wie eng die Rasterspalten werden,
  • Und welche Auswirkung dies auf denselben Text hat, der sich in beiden Szenarien über dieselben 4 Spalten erstreckt.

Manchmal glaubt das Sehen. Das Demonstrieren von Dingen wie diesem, in einem Design-Modell oder einer kurzen Demo im Browser (über einen Dienst wie Codepen) kann der Schlüssel zum Verständnis der Menschen sein.

5) Zeigen Sie Designs im Browser oder auf einem Gerät an

Zurück zu meiner Horrorgeschichte: Fehler werden leicht gemacht, wenn wir unsere Arbeit nicht in der Realität begründen. So:

  • Überprüfen Sie Ihre Arbeit nicht (nur) auf großen Monitoren oder Fernsehbildschirmen.
  • Drucken Sie (nur) keine Modelle aus und sehen Sie sie an der Wand an.

Keines von beiden gibt eine genaue Darstellung dessen, was der Endbenutzer sehen wird. Welches ist wirklich das einzige, was zählt.

Seien Sie auch vorsichtig beim Entwerfen auf Retina-Bildschirmen und kleinen Laptop-Bildschirmen. Das Entwerfen einer Website auf einem MacBook oder einem Laptop ist beispielsweise schwierig, da in der Entwurfssoftware wahrscheinlich nicht die gesamte Seitenbreite angezeigt wird. Sie zoomen also hinein und heraus, um die Arbeit während des Entwurfs anzuzeigen. Das Problem ist jedoch, dass nur Sie, Ihre Designer-Freunde und Ihre Dribbble-Anhänger Ihre Arbeit so sehen. Der Endbenutzer wird es nicht tun.

Hoffentlich zeigt dies meinen Standpunkt:

Auf der linken Seite befindet sich Ihr Webseiten-Design-Modell. Ihr Team überprüft es als Ganzes, zusammenhängendes Design, ähnlich wie Sie es bei einem Stück Grafikdesign tun würden.

Auf der rechten Seite sieht der Benutzer jedoch tatsächlich - im Browser -, wie er blättert. Es gibt einen großen Unterschied! Sie müssen diese Realität also mehr berücksichtigen als die Seite als Ganzes.

Dies ist kein Grafikdesign, sondern Webdesign.

Eine gute Möglichkeit, dieses Problem zu vermeiden, besteht darin, so schnell wie möglich zu einem gebauten Prototyp zu gelangen. Oder, das nächstbeste, so etwas wie ein InVision-Prototyp. Auf diese Weise kann Ihr Team die Arbeit im Browser überprüfen, so wie es Ihre Endbenutzer tun würden ... oder in ihrer Hand auf einem mobilen Gerät.

Es ist wichtig, die Perspektive beizubehalten und Ihre Entwürfe in der Realität zu verankern.

Update: 2019. Ich habe ein Buch über Systemdesign und Richtlinien für digitale Marken geschrieben! https://designsystemfoundations.com