#Design & Content

Designen mit dem DeviceLab

Die große Welt des Internets entwickelt sich immer weiter, so auch die internetfähigen Endgeräte. Früher musste man nur den PC beachten, heute sind es hunderte verschiedene Geräte; vom 4k Fernseher bis hin zur Smartwatch.

Jetzt sagt man sich, „Na gut, man gestaltet einfach drauf los, der Entwickler macht das dann smooth und responsive." Ganz so einfach ist das allerdings nicht. Die Seiten sollen ihre Komplexität behalten und mit der Gestaltung sollen möglichst viele Inhalte dargestellt werden können, ohne überladen zu wirken.

Wie kann man möglichst integrativ arbeiten?

Wir arbeiten nicht mehr nur am Mac und gestalten unsere Webseite an unseren 5k Bildschirmen, sondern wir arbeiten mit verschiedenen Geräten. Es gibt mittlerweile einige Firmen, die genau für diesen Anspruch Überlegungen angestellt haben, um das Arbeiten angenehmer zu machen. Meist waren die Endgeräte auf dem Tisch verstreut. Jetzt organisierten wir uns in stylischen Stands. Wir nutzen das GhostLab von VANAMCO. Eine Möglichkeit, verschiedene Endgeräte vor der Entwicklung systematisch und planvoll zu benutzen. Adobe Photoshop CC bietet mittlerweile von Haus aus eine Lösung an, um die Bildschirme zu synchronisieren. Diese Schnittstelle nennt sich Adobe Preview CC. Sie ist jedoch momentan leider nur für Apple Geräte von Nutzen. Android ist von allen etwas außen vor. Wir sind sicher, dass sich das zukünftig ändern wird.

Uns geht es in erster Linie gar nicht mal darum jedes Endgerät, das auf dem Markt ist, vor uns zu haben. Es geht vielmehr darum, ein Gefühl für den Gebrauch einzelner Geräte zu bekommen. Wie wirken unsere Elemente im Zusammenspiel kleinerer Bildschirme, oder vielleicht auch mit ganz großen? Das kann man sich deutlich besser vorstellen, wenn man während der Gestaltung auch mal ein Smartphone in der Hand hat.

Im Zusammenspiel mit Adobe Preview CC, haben wir eine Oberfläche für unsere Geräte geschaffen, mit der wir arbeiten. Darunter sind verschiedene iPhone und iPad Generationen. Auf dieser Vorlage bauen wir das Design auf.

Auf was muss man achten?

Bei der Gestaltung gibt es einen Faktor, den man unbedingt beachten sollte. Bei den Retina Displays werden Grafiken um den Faktor 4 vergrößert bzw. neuinterpretiert. Wenn man allerdings eine Webseite auf dem iPhone anschaut, wird sie nur in einem Viertel der Auflösung ausgegeben. Echte Auflösung des iPhones z.B. ist 1334 x 750 px, die Webseite wird aber nur mit 667 x 375 px ausgegeben.

Praxis

Hat man sich erst einmal praktische Vorlagen eingerichtet und Voraussetzungen geschaffen, wie z.B. Adobe Preview CC und die Endgeräte auf die Vorlagen ausgerichtet, kann man mit der Gestaltung anfangen. Ist die Grundgestaltung erst einmal fertig, setzen wir verschiedene Elemente und Inhalte und schauen, wo Problemzonen auf unseren mobilen Geräten liegen. Wie sieht es mit der Usability aus? Kann man mit einer Hand navigieren? Wird alles klar und in den richtigen Proportionen dargestellt? Interaktiv geht es über Adobe Preview CC leider nicht. Doch für den ersten Eindruck reicht es alle Male.

Fazit

Mit der gegenwärtigen in house Lösung von Adobe lässt sich mittels kleiner Vorbereitungen unkompliziert eine Oberfläche erschaffen, mit der man seine mobile Gestaltung direkt vorab an einem Smartphone oder Tablet begutachten und ein Gefühl für das spätere fertige Produkt entwickeln kann. Das GhostLab bringt den Komfort für die Arbeit, leider noch etwas eingeschränkt. Auf iOS Geräten hat man mit einem großen DeviceLab tolle Möglichkeiten, um sich bereits vor der Entwicklung ein Bild über das finale Ergebnis zu machen. Das hilft bei der Entscheidung, ob das angestrebte Ergebnis stimmt oder auch nicht.