Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory

Ansprechbares Webdesign

by
Length:LongLanguages:
This post is part of a series called Design School for Developers.
Video in Web Design
Design School for Developers: It's a Wrap!

German (Deutsch) translation by Valentina (you can also view the original English article)

Sofern Sie nicht völlig neu in der Branche sind oder unter einem Felsen in den fernen Ländern eines anderen Planeten gelebt haben, haben Sie von Ansprechbarem Webdesign gehört. Selbst wenn Sie es nicht vollständig verstehen, ist es bestimmt etwas, auf das Sie auf die eine oder andere Weise gestoßen sind oder mit dem Sie interagiert haben.

Kurz gesagt, Ansprechbares Webdesign ist die Kunst, Websites für eine Vielzahl von Bildschirmgrößen und Geräten zu entwerfen, damit jeder Benutzer bei jeder möglichen Größe ein optimales Erlebnis hat.

Ansprechbares Webdesign ist am besten, wenn es geräteunabhängig ist. wenn Sie nicht für bestimmte Auflösungen oder Größen entwerfen möchten, z. B. nur für iPhone- oder iPad-Größen. Stattdessen sollten Sie darauf abzielen, den Inhalt und das Design im Auge zu behalten und wie dieser Inhalt fließt und sich an die verschiedenen Umgebungen anpasst, in denen er möglicherweise gesehen oder verwendet wird.


Entwerfen für ein Ansprechbares Webdesign

Früher war es so, dass Sie für den Zugriff auf das Internet einen (normalerweise sehr großen) Computer ausprobieren mussten, wobei die bekannten Geräusche des Modems während der Verbindung erklangen. Jetzt können Sie jedoch über Computer, Laptops, Mobiltelefone, Smartphones, Tablets, Fernseher und Spielekonsolen auf das Internet zugreifen - die Liste fühlt sich fast endlos an.

Responsive Web Design, written by Ethan Marcotte and published by A Book Apart, is a brilliant introduction to the principles of Responsive Web Design.
Ansprechbares Webdesign, geschrieben von Ethan Marcotte und veröffentlicht von A Book Apart, ist eine brillante Einführung in die Prinzipien von Responsive Web Design.

Einerseits sind dies großartige Neuigkeiten. Mehr als je zuvor können wir jederzeit und an jedem Ort mit dem Internet verbunden sein. Während dies für selbstverständlich gehalten wird, ist es für viele auch notwendig. Und mit der Notwendigkeit und dem Zugang werden wir auch oft mit Ungeduld und der Notwendigkeit konfrontiert, dass Dinge funktionieren und schnell arbeiten.

Da Ansprechbare Websites immer mehr zum Mainstream gehören, hat selbst die breite Öffentlichkeit (also jeder außerhalb der Web- und Kreativbranche) dies fast erwartet, wenn sie im Internet surfen. Alles in allem ist ansprechbares Webdesign definitiv eine große Sache.

Die Herausforderungen, die ein ansprechbares Web mit sich bringt

Die Arbeit mit Ansprechbarem Design ist nicht ohne Herausforderungen. Erstens gibt es eine solche Vielzahl von Geräten und Bildschirmgrößen, die wir berücksichtigen müssen. Von extragroßen bis zu großen Bildschirmen, von kleinen bis zu mittleren (und allem dazwischen) gibt es viel zu überlegen. Und wie Sie sicher bereits als Entwickler wissen, kann die Arbeit mit reaktionsschnellem Design auf technischer Seite auch zum Albtraum werden und äußerst schwierig zu handhaben sein.

The mediaqueri.es website offers lots of inspiration for some top-notch responsive web designs.
Die Website mediaqueri.es bietet viele Inspirationen für einige erstklassige reaktionsschnelle Webdesigns.

Wie bei jedem Projekt müssen Sie beim Ansprechbaren Webdesign vor allem über den Inhalt der Website nachdenken, wie dieser Inhalt in das Design passt und wie der Inhalt von Seite zu Seite fließt. Sie müssen sich ansehen, wie die verschiedenen Designelemente zusammenarbeiten, und sicherstellen, dass sich alles zusammenhängend und konsistent anfühlt.

Der Unterschied zum ansprechbaren Webdesign besteht darin, dass Sie auch darüber nachdenken müssen, wie all dies von einer Größe zur anderen funktioniert, unabhängig davon, ob dies auf Breite oder Höhe basiert. Sie müssen sorgfältig darüber nachdenken, wie all dies zu einem kleineren oder größeren Bildschirm führt und wie all Ihre Designelemente, Ihr Inhaltsfluss und alles andere funktionieren. Sie müssen die Erfahrung konsistent halten, unabhängig von der Größe der Website.


Arbeiten mit Kunden und Verwalten von Erwartungen

Wir als Designer und Entwickler in einer so schnelllebigen Branche haben ziemlich viel Glück. Wir arbeiten an erstaunlichen Projekten und arbeiten normalerweise immer an der Spitze neuer und aufkommender Technologien. Die Arbeit mit ansprechbarem Webdesign ist nur eines der aufregenden Dinge, die wir tun müssen, aber das bringt einen Preis mit sich.

The Greenbelt Festival is a great example of responsive web design. Screenshots provided courtesy of mediaqueri.es.
Das Greenbelt Festival ist ein großartiges Beispiel für responsives Webdesign. Screenshots mit freundlicher Genehmigung von mediaqueri.es.

Denken Sie zurück an den Artikel über Trends und denken Sie an die Schlussfolgerung, die Sie möglicherweise selbst gezogen haben, ob sie gut oder schlecht sind. Denken Sie auch an Schlagworte. Diese Worte, die Sie auf Geschäfts- oder Nachrichten-Websites über diese neuen, aufregenden und aufkommenden Technologien sehen. Einige der Kunden, die Sie erhalten, sind möglicherweise ein wenig über das Web informiert und verstehen es. Sie können sogar selbst im Web arbeiten und benötigen zusätzliche Hilfe. Einige Ihrer Kunden sind jedoch möglicherweise nicht so gut über das Internet informiert und sehen diese Schlagworte möglicherweise als wesentlich an, egal was passiert. Ich werde in diesem Abschnitt kurz auf diese Art von Kunden eingehen.

Festlegen, was ein Kunde möchte

Zu Beginn eines Designprojekts sollten Sie versuchen, genau festzustellen, was Ihr Kunde aus dem Projekt herausholen möchte und welche Ergebnisse er erwartet. Das Verwalten der Erwartungen Ihrer Kunden kann schwierig sein, aber es ist wichtig, dass Sie sich daran halten, um sicherzustellen, dass Ihre Kunden Ihren Prozess vollständig verstehen.

A beautiful example of responsive web design in action can be seen on the Modern Green Home website. Screenshot courtesy of mediaqueri.es.
Ein schönes Beispiel für reaktionsschnelles Webdesign in Aktion finden Sie auf der Modern Green Home-Website. Screenshots mit freundlicher Genehmigung von mediaqueri.es.

Wenn es um responsives Webdesign geht und insbesondere wenn sie mit einem dieser Schlagworte zu Ihnen kommen, müssen Sie versuchen, Ihre Kunden zu schulen. Sehr oft wurden diese Schlagworte im Vorbeigehen gehört oder falsch dargestellt, und es liegt an Ihnen, sicherzustellen, dass Ihr Kunde das Thema richtig versteht.

Manchmal kommen sogar potenzielle Kunden zu Ihnen und sagen, sie wollten eine Website, die auf „iPhone und iPad“ funktioniert. In diesem Fall würde ich sagen: "Nun, das ist vollkommen in Ordnung - aber was großartig wäre, ist, dass wir uns stattdessen darauf konzentrieren können, Ihnen eine perfekt ansprechende Website zu erstellen, die auf jedem Gerät funktioniert und nicht nur auf diese beiden beschränkt ist." Das ist ein großartiger Eisbrecher zu diesem Thema und es ist etwas, das es für Sie sehr offen lässt, weitere Erläuterungen zu den Planungsphasen vorzunehmen.

Wenn Ihr Kunde Ansprechbares Webdesign richtig versteht, kann ich mir vorstellen, dass er mit dem Projekt zufriedener ist.

The Stuff & Nonsense website is a great example of responsive web design, also introducing different illustrations at different screen sizes. Screenshots provided courtesy of mediaqueri.es.
Die Stuff & Nonsense-Website ist ein hervorragendes Beispiel für reaktionsschnelles Webdesign, bei dem auch verschiedene Illustrationen mit unterschiedlichen Bildschirmgrößen vorgestellt werden. Screenshots mit freundlicher Genehmigung von mediaqueri.es.

Wenn Sie sich die Zeit nehmen, den Kunden richtig zu schulen, kann dies nur zu Ihren Gunsten funktionieren. Zum Beispiel versuche ich bei meiner eigenen Arbeit immer sicherzustellen, dass meine Kunden das Gefühl haben, mit ihnen zu arbeiten, und nicht nur für sie. Dies erleichtert die Arbeit mit Ihren Kunden beim Entwerfen für das ansprechbare Web.


Tipps und Techniken für RWD

Es ist schön und gut, wenn ich darüber spreche, warum es wichtig ist, Kunden zu schulen und Ihnen Dinge zu erzählen, die Sie möglicherweise bereits über ansprechbares Webdesign wissen. Nun zum Nitty-Gritty, wo ich Ihnen die besten Möglichkeiten zum Entwerfen reaktionsfähiger Websites erläutern kann.

The Great Discontent are well known for their interviews - and their website is a great example of magazine design on the web, as well as being a brilliant example of responsive web design. Screenshots provided courtesy of mediaqueri.es.
The Great Discontent sind bekannt für ihre Interviews und ihre Website ist ein großartiges Beispiel für Magazindesign im Web sowie ein hervorragendes Beispiel für ansprechbares Webdesign. Screenshots mit freundlicher Genehmigung von mediaqueri.es.

Und die Antwort? Nun, leider gibt es nicht wirklich einen richtigen! Es tut mir leid, wenn Sie nicht danach gesucht haben, aber wie Sie wahrscheinlich bei Ihrer Entwicklung und Codierung verstehen werden, sind alle Prozesse unterschiedlich und niemand scheint auf die gleiche Weise zu funktionieren. Dies ist auf seine Weise großartig, da wir immer neue Arbeitsweisen finden können.

Keine Sorge, ich werde Ihnen einige Top-Tipps zum Entwerfen ansprechbarer Webdesign Websites geben, die Sie ziemlich einfach in die Tat umsetzen sollten. Wählen Sie aus all diesen Optionen aus und kombinieren Sie sie dort, wo Sie es für angemessen halten. Experimentieren Sie auch! Probieren Sie viele verschiedene Möglichkeiten aus, um ansprechbare Webdesign Websites zu entwerfen und herauszufinden, was am besten zu Ihnen passt.

Modelle

Das Erstellen eines Modells für eine Website mit statischer Breite in Photoshop (oder einer anderen Grafiksoftware) war früher die Art und Weise, wie die meisten Menschen Websites entworfen haben, und für einige ist dies immer noch der Fall. Das ist absolut in Ordnung! Wenn Sie mit der Verwendung einer Grafik-App vertraut sind, um das Erscheinungsbild Ihrer Website zu gestalten, ist dies in Ordnung.

The UX London 2013 website is a beautiful example of design that scales from small to large gracefully. Screenshots provided courtesy of mediaqueri.es.
Die UX London 2013-Website ist ein schönes Beispiel für Design, das sich elegant von klein nach groß skalieren lässt. Screenshots mit freundlicher Genehmigung von mediaqueri.es.

Versuchen Sie jedoch nicht, ein Modell für jede einzelne Auflösung oder Breite zu entwerfen. Sie würden verrückt werden und sehr lange dort sein. Denken Sie stattdessen an den Wireframing-Artikel zurück. Überlegen Sie, wie wir den Inhaltsfluss für diese Wireframes betrachtet haben und wie wir beschlossen haben, dass alles zusammenpassen sollte. Versuchen Sie, dies in Ihre Entwürfe zu übersetzen, und überlegen Sie, wie diese Elemente fließen und sich bewegen, wenn sich die Bildschirmgröße ändert.

Einige dieser Änderungen werden von großer Bedeutung sein, und für diejenigen, die dies tun, ist es möglicherweise geeignet, ein kleines Modell zu erstellen, um dies zu zeigen. Für andere Änderungen, wie z. B. die Anpassung von Text, würde ich mich jedoch auf diese Art von Dingen in der Liste beschränken Browser, sobald Sie mit dem Codieren von Prototypen beginnen. Wenn Sie es vorziehen, ein Modell für jede wichtige Phase Ihres Entwurfs zu entwerfen, sollten Sie auf jeden Fall die Zeit berücksichtigen, die sich daraus für Ihr Projekt ergibt.

Entwerfen im Browser

Nun zu ein bisschen Kontroverse. Sie haben vielleicht von dem Ganzen gehört Entwerfen in der Browser-Debatte, die seit einigen Monaten im Umlauf ist, wenn nicht sogar länger.

The WWF website is a gorgeous example of web design that works brilliantly responsively as well. Screenshots provided courtesy of mediaqueri.es.
Die WWF-Website ist ein großartiges Beispiel für Webdesign, das auch hervorragend reagiert. Screenshots mit freundlicher Genehmigung von mediaqueri.es.

Das Entwerfen im Browser erfolgt, wenn Sie von einer Wireframe-Phase (falls Sie dies getan haben) direkt in den Browser wechseln, um die Entwurfsphase zu starten, anstatt mit einer Grafiksoftware zu arbeiten. Wenn Sie viele Online-Werkzeugs verwenden, um verschiedene Elemente Ihrer Designstruktur zu erstellen (z. B. um Raster zu erstellen oder Ihre Typografie zu verfeinern), kann dies sehr gut funktionieren.

Viele Designer haben jedoch das Gefühl, dass sie Schwierigkeiten haben, im Browser zu entwerfen, insbesondere wenn sie eher Designer als Programmierer sind. Der Grund dafür ist, dass sie das Gefühl haben, dass dies ihre Kreativität ein wenig mehr einschränkt, was es für sie schwieriger macht, das Gefühl zu haben, kreative, einzigartige und visuell aufregende Ideen zu entwickeln.

The Next Web manages to display content in a way that is easy to digest and follow, even down to small screens. Screenshots provided courtesy of mediaqueri.es.
Das Next Web schafft es, Inhalte auf eine Weise anzuzeigen, die leicht zu verdauen und zu verfolgen ist, selbst auf kleinen Bildschirmen. Screenshots mit freundlicher Genehmigung von mediaqueri.es.

Als Entwickler werden Sie mit Code höchstwahrscheinlich sehr vertraut sein. Daher ist es möglicherweise eine gute Idee, mit dem Design im Browser herumzuspielen und zu sehen, welche Ergebnisse Sie erzielen.

"Entscheiden" im Browser

Dies ist wahrscheinlich mein persönlicher Favorit. Wenn Sie sich für den Browser entscheiden, müssen Sie ein wenig in der Grafiksoftware und ein wenig im Browser arbeiten. Persönlich denke ich, dass Sie erst dann ein besseres Ergebnis davon erhalten können, wie ein Design funktioniert, wenn es im Browser selbst vorhanden ist. Typografie wird in Grafik-Apps immer anders gerendert als im Browser. Wenn Sie sich im Browser befinden, ist es viel einfacher, Prototypen zu erstellen und die Entwurfsphasen schnell zu durchlaufen (obwohl sich dies mit der Einführung von Anwendungen wie z Ara).

The Microsoft website cleverly makes use of moving content and cropping images depending on the size of the viewport. Screenshots provided courtesy of mediaqueri.es.
Die Microsoft-Website nutzt geschickt das Verschieben von Inhalten und das Zuschneiden von Bildern, abhängig von der Größe des Ansichtsfensters. Screenshots mit freundlicher Genehmigung von mediaqueri.es.

Wenn Sie sowohl mit einer Mischung aus Modellen als auch mit browserbasierter Arbeit arbeiten, können Sie Ihrem Design und den Entscheidungen, die Sie treffen müssen, viel Flexibilität verleihen. Der Schlüssel zu diesem Begriff „im Browser entscheiden“ liegt jedoch beim ersten Wort. Obwohl in der Grafiksoftware viele wichtige kreative Entscheidungen getroffen werden können, können Sie im Browser Ihre endgültige Entscheidung treffen.

Wenn ich auf diese Weise arbeite, stelle ich fest, dass ich häufig eine Mischung aus Modellen, entworfenen Musterbibliotheken (in Grafiksoftware und in HTML & CSS) und vollständigen HTML & CSS-Prototypen habe. Eine Mischung ist großartig und zeigt die Entwicklung der Website von Anfang an bis hin zu einer hoffentlich vollständigen Website.

Content-First, Mobile-First oder Desktop-Down?

Wenn Sie noch nicht aus meinen Artikeln im Abschnitt "Bevor Sie beginnen" gelernt haben, arbeiten Sie immer zuerst an Ihren Designs. Dies bedeutet lediglich, dass Sie mit echten Inhalten und den Inhalten arbeiten, die auf der von Ihnen gestalteten Website verwendet werden sollen.

Philip House is a great example of how you can shift and move layouts when working with responsive web designs. Screenshots provided courtesy of mediaqueri.es.
Philip House ist ein großartiges Beispiel dafür, wie Sie Layouts verschieben und verschieben können, wenn Sie mit ansprechbarem Webdesign arbeiten. Screenshots mit freundlicher Genehmigung von mediaqueri.es.

Zweitens liegt es ganz bei Ihnen, ob Sie zuerst mobil (beginnend mit kleineren Layouts) oder Desktop-down (beginnend mit Desktop-Layouts in voller Breite) arbeiten. Es gibt viele Online-Debatten darüber, aber das ist wirklich Ihre eigene Entscheidung. Wenn Sie sich kreativer fühlen, wenn Sie von einer größeren Größe zu einer kleineren wechseln, auch wenn Sie es auf die entgegengesetzte Weise bauen, ist das in Ordnung. Wie das Gegenteil, und von klein nach groß!


Werkzeuge, mit denen Sie ansprechbar gestalten können

Lassen Sie uns die Dinge mit einigen nützlichen Ressourcen abschließen. Es gibt so viele Werkzeugs, die Ihnen beim Entwerfen ansprechbarer Websites helfen können. Schauen Sie sich Folgendes an:

Gitter

Typografie

Style Guides & Pattern Libraries

Fallstudien

Verschiedenes

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.