Warum Vorausdenken im Webdesign entscheidend ist

Der Unterschied zwischen dem Aufbau einer großartigen und einer mittelmäßigen Website wird normalerweise sehr früh festgestellt. Es geht oft darum, dass ein Webdesigner sein Projekt in eine virtuelle „Ecke“ malt. An dieser Stelle wird ein Design unflexibel und kann verschiedene Anwendungsfälle nicht berücksichtigen.

Dies geschieht in der Regel in der Prototyping-Phase. Wir investieren viel Zeit und kreative Energie in eine Idee, die großartig aussieht. Unsere Kunden werden es vielleicht genauso lieben wie wir. Aber erst wenn wir tatsächlich anfangen, es zu bauen, beginnen wir, die Konsequenzen vollständig zu verstehen.

Ein Design-Mockup dient als Kompass für unsere Website-Projekte. Wenn wir nicht vorausdenken, was bestimmte Elemente erfordern, kann dies bedeuten, dass wir in einer schlechten Situation stecken bleiben. Das Endergebnis ist eine Website, die einige ernsthafte Kompromisse eingehen muss, um auf verschiedenen Geräten und Browsern zu funktionieren. Dies kann sich negativ auf die Zugänglichkeit, Leistung und Einhaltung von Best Practices auswirken.

Zum Glück hilft Ihnen etwas Planung, einen unordentlichen Build-Prozess zu vermeiden. Werfen wir einen Blick auf einige wichtige Punkte, die Sie berücksichtigen sollten, bevor Sie Ihre Ideen mit einem Kunden teilen.

Anpassung von Elements an verschiedene Bildschirme

Es gibt einen Grund, warum im Webdesign so viel von einem „mobile first“-Ansatz gesprochen wird. Im Wesentlichen ermöglicht uns dies, mit dem Nötigsten einer Website zu beginnen. Von dort aus können wir hinzufügen und verbessern, wenn das Ansichtsfenster größer wird.

Dennoch hat jeder von uns seine eigenen Vorlieben für den Bau von Prototypen. Für diejenigen, die immer noch einen Desktop-basierten Ansatz verwenden, ist es wichtig, darüber nachzudenken, wie all diese ausgefallenen Designelemente auf einem Telefon funktionieren.

Wenn Sie planen, CSS Grid oder Flexbox zu implementieren, werden sie Ihnen sehr dabei helfen, die verfügbare Bildschirmfläche optimal zu nutzen. Aber andere Elemente erfordern möglicherweise mehr Aufwand, um zu funktionieren.

Große Schieberegler können beispielsweise auf kleinen Bildschirmen sehr schwierig zu bedienen sein. Komplizierte Bilder sind möglicherweise nicht so wirkungsvoll und Text kann Grenzen überschreiten. Die Leistung kann auch zurückbleiben.

In diesem Fall müssen Sie möglicherweise entscheiden, ob es sich lohnt, den Slider überhaupt auf dem Handy anzuzeigen. Oder vielleicht könnte es umgestaltet werden, um sich besser an die Arbeit in allen Situationen anzupassen.

Auswirkungen auf die Barrierefreiheit

Das Design beginnt mit der Auswahl der geeigneten Schriftarten und Farben. Beide sind eng mit Branding und Barrierefreiheit verbunden.

Schriftarten sollten klar und leserlich groß sein. Auch wenn ausgefallene Schriften und Zierschriften schön aussehen können, müssen sie groß genug sein, um sie lesen zu können, und auf die Verwendung in Überschriften beschränkt sein. Wenn diese Anforderungen nicht angemessen erfüllt werden können, ist es möglicherweise am besten, sie ganz aus Ihrem Projekt zu streichen.

Darüber hinaus sollte auch der Farbkontrast ein wichtiges Anliegen sein. Hintergrund- und Vordergrundfarben müssen ein akzeptables Kontrastverhältnis erreichen, um als zugänglich zu gelten. Außerdem ist es einfach eine gute Übung.

Wenn Sie sich bezüglich Ihrer Palette nicht sicher sind, verwenden Sie ein Online-Tool, um ihre Eignung zu bestimmen. Manchmal ist sogar eine geringfügige Anpassung alles, was nötig ist, um die WCAG AA-Standards zu erfüllen.

Abgesehen von diesen beiden Elementen ist es auch gut, einen Plan zu haben, wie Sie Elemente wie Symbole anzeigen. Sind sie intuitiv? Werden sie von Text begleitet?

Abwärtskompatibilität

Nicht jede Website muss beispielsweise mit Internet Explorer 9 vollständig kompatibel sein. Und ältere Browser sollten uns nicht unbedingt davon abhalten, das neueste CSS oder JavaScript zu verwenden. Aber man sollte sich Gedanken über die Abwärtskompatibilität machen.

Besonders besorgniserregend sind Designelemente, die eine Website in älterer Software völlig unbrauchbar machen. Selbst wenn ein bestimmter Browser einen kleinen Prozentsatz der Besucher Ihrer Website ausmacht, bleiben immer noch einige potenzielle Conversions auf dem Tisch.

Es lohnt sich, darüber nachzudenken, welche Auswirkungen Designentscheidungen auf diese Benutzer haben werden. Die verfügbaren Fallbacks für eine bestimmte Technologie könnten ausreichen, um die Dinge anständig und brauchbar aussehen zu lassen. Noch besser ist, dass sie ziemlich einfach zu implementieren sind.

Früher wurde von Designern erwartet, dass Elemente in allen Browsern genau gleich aussehen und funktionieren. Das ist heutzutage vielleicht zu viel verlangt. Solange ein Benutzer Inhalte auf etwas der älteren Software navigieren und konsumieren kann, könnte das gerade ausreichen.

Szenarien, die noch nicht eingetreten sind

Selbst die kleinsten Websites müssen sich im Laufe der Zeit weiterentwickeln. Wenn neue Arten von Inhalten hinzugefügt werden, müssen sie im Design berücksichtigt werden. Wenn Sie nicht vorbereitet sind, könnte die Implementierung dieser Elemente mit dem in Konflikt geraten, was bereits vorhanden ist.

Denken Sie zum Beispiel daran, eine Reihe von Videos hinzuzufügen. Auch wenn das Hinzufügen dieser Inhalte recht einfach sein mag – wie passt es in das Erscheinungsbild, das Sie bereits erstellt haben? Werden Sie eine standardmäßige Browser-Benutzeroberfläche verwenden oder etwas erstellen, das zu Ihrem Branding passt?

Auch wenn Sie die Zukunft nicht immer vorhersagen können, können Sie alle möglichen Möglichkeiten einplanen. Dies ist ein Teil dessen, was Sie mit einem Designsystem erreichen können. Indem Sie von Anfang an einige Standardrichtlinien festlegen, können Sie leichter mit zukünftigen Ergänzungen umgehen.

Die Realität ist, dass sich das, was wir heute entwerfen, in Zukunft wahrscheinlich ändern wird. Daher lohnt es sich, auf diese Eventualität vorbereitet zu sein.

Beim ersten Mal richtig bauen

Bei der Herstellung dieses ersten Modells geht es um so viel mehr, als nur darum, die Dinge gut aussehen zu lassen. Es geht sogar darüber hinaus, Ihre Kunden zu beeindrucken. Tatsächlich ist es eine Übung, die uns zwingt, unser Projekt als Ganzes zu betrachten.

Die Ästhetik muss dem Auge gefallen. Aber das Design muss auch zugänglich sein und sich an verschiedene Bildschirme anpassen können. Außerdem muss es möglicherweise verschiedene Arten von Inhalten berücksichtigen, wenn sich die Dinge weiterentwickeln.

Wenn das überwältigend klingt – atmen Sie tief durch. Hier können Ihre Erfahrung und Ihr Fachwissen helfen. Auch die richtigen Tools können helfen.

Denken Sie darüber nach, was in Ihren vergangenen Projekten funktioniert hat (und was nicht). Suchen Sie nach Wegen, um ausfallsichere Funktionen zu implementieren. Tun Sie das und Sie sind auf dem Weg zu einem erfolgreichen Projekt!