5 Tipps für bessere Screendesigns

von Dennis

In diesem Artikel verrate ich dir, worauf du bei deinem nächsten Screendesign achten solltest, um Zeit und Kosten bei der Umsetzung zu sparen.

Beim Großteil der Agenturen, mit denen wir zusammenarbeiten, gibt es eine klassische Rollenverteilung: während die Agentur sich um das Screendesign und die Kommunikation mit dem Kunden kümmert, konzentrieren wir uns auf die Design-Umsetzung in Contao.

Doch was vom Designer in Photoshop oder InDesign relativ schnell angelegt ist, kann für uns als Entwickler zwischen wenigen Stunden und mehreren Tagen Arbeit bedeuten. Dabei sind es manchmal die kleinen und vermeintlich unbedeutenden Entscheidungen der Agenturen, die die Umsetzung für uns aufwändiger und dadurch letztendlich auch teurer machen.

Um die Zusammenarbeit zwischen Agenturen und Entwicklern zu verbessern, habe ich die 5 häufigsten Tipps zusammengeschrieben, die ich Agenturen gebe, um Kosten für die Umsetzung zu sparen:

Verwende ein Grid-Layout

Als Designer kann ich gut verstehen, dass Agenturen nur ungern mit Grid-Layouts arbeiten. In einem Raster zu arbeiten bedeutet, weniger Freiheiten bei der Platzierung der Inhalte zu haben und Kompromisse einzugehen, zwischen dem was gut aussieht, und dem was ein Grid vorgibt. Websites, die auf einem Grid basieren, haben außerdem den Ruf, dass sie alle gleich aussehen.

Aber als Entwickler sehe ich auch den enormen Vorteil, wenn sich das Design an einem Grid-Layout orientiert. Gerade mehrspaltige Inhalte lassen sich mithilfe eines Grids besser platzieren und für Tablets und Smartphones einfacher optimieren.

bootstrap grid version 3

Wenn du bisher nur wenig oder keine Erfahrungen mit Grid-Layouts hast, empfehle ich dir ein Standard-Grid-Layout wie das des CSS-Frameworks Bootstrap zu nehmen.

Mehr zum Bootstrap-Grid Bootstrap-Grid als PSD

Denk an größere & kleinere Bildschirme

Eine Frage, die ich regelmäßig vor Projektbeginn stelle, ist die Frage nach der Darstellung auf größeren und kleineren Bildschirmen. Denn im Photoshop-Layout wird meist nur die Standard-Größe dargestellt. Wie aber soll sich das Layout verhalten, wenn der Browser deutlich größer ist? Und was passiert mit den Inhalten auf kleineren Bildschirmen wie Tablets oder Smartphones?

Webdesign Teaser Columns

Aber auch bei Bildern, die im Entwurf bis an den Browserrand gehen, ist es wichtig zu wissen, wie sie sich auf größeren Monitoren verhalten sollen. Hier sind 2 Arten denkbar, wie das Bild angelegt sein könnte:

Responsive Webdesign Proportional
Mockup Responsive Webdesign

Beide Darstellungsarten haben ihre Vor- und Nachteile:

Während die Bilder in Variante 1 allen Besuchern so angezeigt wie sie im Entwurf zu sehen sind, führt das aber auch dazu, dass diese auf großen Bildschirmen proportional vergrößert werden. Dadurch nehmen sie auch entsprechend viel Platz in der Höhe ein.

In Variante 2 bleibt zwar die Bildhöhe gleich, allerdings ist je nach Browsergröße unterschiedlich viel vom Bild zu sehen. Hinzu kommt, dass es die Bildersuche wesentlich schwieriger macht, da du nun Bilder im Panorama-Format benötigst.

Die beiden Varianten lassen sich teilweise auch kombinieren. Alternativ könntest du darüber nachdenken, dass das Layout nur bis zu einer bestimmten Breite bis an den Rand geht und danach zentriert ausgerichtet wird.

Benenne Ebenen & arbeite mit Ebenenkompositionen

Gerade wenn es in einem Projekt schnell gehen muss, neigen wir dazu, bestimmte Aufräumarbeiten zu vernachlässigen. Eine davon ist die richtige Benennung von Ebenen und Ordnern. Wenn du eine Datei, die du vor 2 Jahren in Eile erstellt hast, nun wieder öffnest, dann weißt du vermutlich, was ich meine.

Wir achten mittlerweile vor Angebotserstellung sehr genau darauf, ob die Ebenen verständlich benannt sind und auch ob Ebenenkompositionen angelegt wurden. Die Zeitersparnis auf unserer Seite ist innerhalb eines Projektes enorm, wenn für unterschiedliche Seiten-Layouts und Hover- und Active-Status eigene Kompositionen angelegt wurden und wir nicht von Hand die betreffenen Ebenen einblenden müssen.

Mehr über Ebenenkompositionen

Informiere dich vorab über verwendete Webfonts

Für die meisten Designer sind Webfonts ein Geschenk des Himmels. Endlich lässt sich die Hausschrift des Unternehmens oder zumindest ein individuelle Schrift fernab von Arial, Georgia und Helvetica auch auf der Website verwenden.

In dem Artikel So erkennst du gute Webfonts habe ich bereits ausführlicher beschrieben, was du bei der Auswahl von Webfonts beachten solltest. Aber neben der Schriftqualität und -lizenz gibt es auch einen technischen Aspekt, den du unbedingt beachten solltest: Die Schriftart sollte in unterschiedlichen Dateitypen vorliegen, damit du sie in allen Browsern darstellen kannst.

Mit einer Google-Suche nach "Schriftart + Problem" kannst du zumindest einen kurzen Check machen, ob andere schon über Probleme mit der Schriftart berichtet haben.

Ganz sicher wirst du leider nie sein können. Erst kürzlich habe ich es in einem Projekt erlebt, dass die von der Agentur ausgewählte Schriftart auf den 1. und 2. Blick alle Kriterien erfüllte. Erst beim späteren Testen fand ich heraus, dass die Schrift nicht im Internet Explorer 9 geladen werden konnte. Nach mehreren Tests und Mails mit dem Schriftentwickler war auch er am Ende ratlos. Uns blieb nichts anderes übrig, als für den IE9 eine Alternativschrift zu laden.

Bitte vor der Präsentation um Entwickler-Feedback

In 7 von 10 Fällen sehen wir das Design erst, nachdem es der Kunden gesehen hat. Manchmal ist es sogar schon freigegeben. Wenn wir dann mit unseren kleinen Änderungen kommen, mit denen man das Design in weniger Zeit umsetzen könnten, ist es meist schon zu spät. Gerade wenn der Weg bis zur Freigabe nicht ganz so leicht war und alle Beteiligten froh sind, wenn das Thema Design abgeschlossen ist.

Deswegen empfehle ich Dir, noch vor der Präsentation beim Kunden, das Feedback der umsetzenden Entwickler einzuholen. Sei es der Kontrollblick auf die richtige Verwendung des Grids, der Schriftarten oder der Darstellung auf mobilen Geräten.

Und nun zu Dir

Hast du noch weitere Tipps für bessere Screendesigns? Dann schreib mir per Mail oder in die Kommentare. Auch über Kritik und Anmerkungen würde ich mich freuen.

Zurück

Einen Kommentar schreiben

Kommentar von Nicolas |

Hi Dennis,
super Artikel!
Tolle Tipps für Designer die nicht viel mit Entwicklern kommunizieren oder sich im WWW nicht so gut auskennen.
Von InDesign Layouts kann ich nur abraten, dort hört der Spaß schon auf bevor es mit der Entwicklung los gehen kann!
In InDesign sind nämlich 100% nicht gleich 100% des Webviews...

Freue mich auf deinen nächsten Artikel!
Nicolas

Was ist die Summe aus 6 und 4?

Immer auf dem Laufenden bleiben

Für den Newsletter anmelden

Der Newsletter erscheint 1x im Monat