Empfehlungen für das Erstellen von Entwürfen im Webdesign

Grundsätzlich lässt sich alles realisieren, jedoch kann ein fachlich nicht korrekt erstellter Entwurf zu vielen Problemen führen:

Es empfiehlt sich daher, einige Regeln einzuhalten und die technische Realisierung in der Entwurfsphase mitzudenken. Hier finden Sie einige Ratschläge – wenn Sie zudem Fragen haben sollten, können Sie mich gerne kontaktieren.

Wie breit darf und sollte das Layout sein?

Die Breite der Website ist grundsätzlich von der Monitorauflösung (Größe des Displays) abhängig. Hier sollte man vom niedrigsten Standard ausgehen, den Tablets und Netbooks vorgeben: 1024 px. Davon abziehen müssen Sie jedoch noch etwas Rand, links und rechts, sowohl für die Rollleiste als auch für den visuellen Eindruck. Damit kommt man auf die im Webdesign üblichen 960 px Maximalbreite. Dieser Wert hat sich in den letzten Jahren bewährt und etabliert.

Können Schatten und andere Effekte verwendet werden?

Grundsätzlich ja, jedoch sollten Sie immer davon ausgehen, dass solche Effekte nur in Bildform verwendet werden können. Nur wenige Effekte (wie Transparenz und Schlagschatten) können direkt in CSS, also mit technischen Mitteln auf der Website dargestellt werden. Wenn Sie also einen Text mit einem Schlagschatten versehen, müsste dieser als Grafik eingebunden werden, was aus vielerlei Hinsicht nicht zu empfehlen ist. Deshalb gilt: Effekte nur bei grafischen Elementen.

Um die Effekte später sauber als Grafiken exportieren zu können, belassen Sie diese bitte in der Quelldatei (PSD) und verwenden Sie die Effekte so, dass diese leicht exportiert werden können (ein Overlay zum Beispiel lässt sich unter Umständen nicht exportieren). Zudem ist es hilfreich, wenn die Einstellungen für den Effekt einsehbar sind, um zum Beispiel Schlagschatten mit CSS abbilden zu können.

Welche Schriftglättung soll ich verwenden?

Die beste Methode die Schriftglättung unter Windows in Photoshop nachzubilden, ist Sharp. Für Text, der später als Grafik eingebunden werden soll, sollte die Schriftglättung jedoch nicht nachgebildet werden. Smooth wäre hier die richtige Einstellung.

Die beste Methode die Schriftglättung des Browsers in Photoshop nachzubilden, ist die Einstellung scharf (sharp). Für Text, der später als Grafik eingebunden werden soll (wie zum Beispiel bei Logos), sollte die Schriftglättung jedoch nicht nachgebildet werden. Hier ist weich (smooth) zu wählen.

Welche Schriftarten können verwendet werden?

Grundsätzlich alle, die ausdrücklich für die Einbindung in Websites freigegeben wurden. Kommerzielle Schriften gehören hier seltener dazu. Aber auch nicht jede kostenlose Schrift darf eingebunden werden. Um sicherzustellen, dass es nicht zu rechtlichen Verstößen gegen die Lizenzen des Urhebers kommt, können Dienste wie Google Web Fonts (alle dort verfügbaren Schriften) oder auch Font Squirrel (alle Schriften mit dem Hinweis „@font-face compatible”) verwendet werden. Diese Dienste haben zudem den Vorteil, dass die Schriften nicht mehr konvertiert werden müssen und die Einbindung dadurch sehr einfach ist (was Zeit und Geld spart).

Was muss ich bei Abständen und Maßeinheiten beachten?

Ein Entwurf wird im Webdesign immer als Vorlage (Template) angesehen und entsprechend realisiert, wobei Textformatierungen und Abstände als Vorgaben oder Stile definiert sind. Erstellt ein Benutzer dann im Content-Management-System eine Hauptüberschrift, muss er nicht erst Schriftart, Farbe, Größe usw. angeben. Die Website stellt die Überschrift automatisch so wie in der Vorlage definiert dar.

Aus diesem Grund ist es wichtig einheitliche und saubere Formatdefinitionen im Entwurf anzugeben und alle Angaben müssen auch einsehbar sein, um sie übertragen zu können. Zudem ist darauf zu achten, dass Abstände einer gewissen Logik folgen und ebenso einheitlich sind. Im Idealfall verwenden Sie Abstände in Teilschritten: 10 px, 25 px, 50 px, 100 px usw. Damit erhält Ihr Entwurf automatisch ein gewisses Raster, das auch proportionale Aspekte berücksichtigt.

Welche Informationen müssen dem Entwurf zu entnehmen sein?

Grundsätzlich alle verfügbaren, weshalb Sie Effekte möglichst nicht einrechnen oder Formatierungen „von Hand” vornehmen sollten. Sämtliche Elemente des Entwurfs sollten leicht zu exportieren und weiterverarbeitbar sein. Text, der zum Beispiel in Majuskeln (Großbuchstaben) ausgegeben werden soll, sollte auch mit der entsprechenden Funktion hierfür im Entwurf angelegt und nicht mit gedrückt gehaltener Shift-Taste geschrieben werden.

Was muss ich bei der Positionierung von Elementen beachten?

Die Tatsache, dass in Grafikprogrammen alles frei positionierbar ist, verleitet schnell dazu willkürlich Elemente im Entwurf zu platzieren. Die technische Realisierung unterliegt jedoch gewissen Regeln. Wenn Sie für das Web gestalten, gehen Sie eher von einem Textdokument und den hier gegebenen Positionierungsmöglichkeiten aus. Wenn Ihr Entwurf grundsätzlich in einem Textdokument realisierbar ist, stellt auch die Realisierung als Website keine Probleme dar.

Was muss ich bei Textboxen bzw. Textrahmen beachten?

Die Schriftgröße ist im Web grundsätzlich ein relativer Wert. Er kann vom Benutzer individuell geändert werden, um das Schriftbild zum Beispiel durch größere Schrift lesefreundlicher zu machen. Aber auch die einzelnen Betriebssysteme (Windows, Max OS X, Linux) bringen leichte Abweichungen mit sich. Deshalb sollten Schriftgrößen immer so eingesetzt werden, dass „Luft” nach oben bleibt. Passgenaue Umbrüche ergeben keinen Sinn, da der Umbruch bei Erhöhung der Schriftgröße an anderer Stelle erfolgen würde. In Textboxen bzw. -rahmen mit fester Höhe wird der Text schnell abgeschnitten oder läuft über die Abgrenzung hinaus, wenn er überraschenderweise eine weitere Zeile benötigt, da die Schrift im Browser etwas größer ausfällt als im Entwurf geplant. Letzteres können Sie übrigens umgehen, indem die Höhe solcher Textelemente nicht fix sondern flexibel realisiert wird.

­

Butterfly