Designhinweise

Wenn Sie uns Designvorgaben liefern, ist es für uns hilfreich, wenn bestimmte Richtlinien eingehalten werden. Damit gestalten Sie unsere Zusammenarbeit reibungsloser. Sie können und sollten sich daran orientieren, müssen es aber natürlich nicht. Je genauer Ihre Vorgaben aber sind, desto präziser und kostengünstiger können wir für Sie arbeiten und desto weniger Rückfragen und Aufwand gibt es auf beiden Seiten.

Checkliste Barrierefreiheit
Werfen Sie doch auch einmal einen Blick auf unsere Checkliste zur Barrierefreiheit. Sie hilft Ihnen, eine Einschätzung des Grades der Barrierefreiheit Ihrer Website vorzunehmen.

Kurz & knapp

Wir freuen uns, wenn wir Designvorlagen in Dateiform wie folgt geliefert bekommen

  • Designvorlagen vorzugsweise als PSD oder PNG)
  • Styleguide (sofern der Inhalt nicht vollständig in den Designvorlagen definiert ist)
  • Verwendete Schriftarten (sofern eingesetzt)
  • Verwendete Animationen (sofern vorhanden und nicht von uns erstellt)
  • Favoriten-Icon (in den Größen 16x16 und 32x32)
  • Inhalte (sofern von uns einzupflegen)
    • Texte
    • Bilder (hier auch JPG möglich)
    • Dokumente (bspw. PDFs u.ä.)

Der Idealfall

Im Idealfall stellen Sie uns das Design in einer Photoshop-Datei (Farbmodus RGB, kein Color-Management-Profil) vereint zur Verfügung. Diese enthält alle Gestaltungsebenen und Seiten- bzw. Inhaltsvariationen. Für jede dieser Variationen oder Unterseiten existiert eine klar benannte Ebenenkomposition (siehe Bild 1) und alle Gestaltungsebenen und Ebenengruppen haben zudem verständliche Namen und Struktur (Bild 2). Besondere Eigenheiten und Funktionen der Seite sind als Notizen in die Seite eingebunden (sehr komplexes Verhalten von Seiten, Animationen, etc. sollte darüber hinaus mit uns direkt abgesprochen werden oder über einen Prototypen vermittelt werden). Des wWeiteren sind Ebenen mit Hilfsobjekten (z.B. Gestaltungsraster) rot zu markieren, Ebenen, die nur bei Interaktionen sichtbar sind, gelb. Weitere für das Layout benötigte Dateien wie Schriftarten und Flash-Animationen werden als eigene Dateien mitgeliefert.

Alternativerweise kann uns auch jedes Layout auch in mehreren einzelnen Photoshop- oder PNG-Dateien (kein JPG!) geliefert werden. In jedem Fall brauchen wir dabei mindestens eine Datei mit vorhandenen Ebenen, sofern die Seite nicht sehr einfach gestaltet ist (z.B. einfarbiger Hintergrund und ausschließlich viereckige Elemente ohne Transparenzen).Sollen die Inhalte durch den Kunden gepflegt, ergänzt oder verändert werden oder wenn das Aussehen jeder möglichen Unterseite nicht bereits durch das Layout definiert ist, brauchen wir einen Styleguide, der das Aussehen des Inhalts festlegt (siehe übernächsten Abschnitt).

Und auch wenn es schön aussieht – ein Bild von einem Browserfenster, dass das Layout umrahmt, sollte nicht Teil der Vorlage sein.

Der Styleguide

Der Styleguide legt fest, wie der Inhalt der Seite typographisch und visuell gestaltet ist. Der Styleguide umfasst das Aussehen der folgenden Elemente:

  • Überschriften (bis maximal 6 Inhaltsebenen)
  • Absätze
  • Textauszeichnungen (z.B. fett, kursiv, kapitalisiert, vergrößert, verkleinert)
  • Geordnete Listen (1., 2., 3.,… a., b., c.)
  • Ungeordnete Listen (mit Aufzählungszeichen)
  • Links
  • Normale Links
  • Besuchte Links
  • Links über denen der Mauszeiger schwebt
  • Tabellen
  • Bilder (textumflossen, als Block, mit oder ohne Bildunterschrift)
  • Pullquotes
  • Trennlinien

Definiert werden diese Werte mit den folgenden Eigenschaften:

  • Farben (idealerweise als Hexdezimal-Code, z.B.: „#5100FF“)
  • Abstände
  • Schriftart
  • Schriftschnitt
  • Zeilenabstände
  • Hintergrundfarbe

Es müssen nur die Elemente definiert werden, die auch auf der Seite Verwendung finden sollen. Mit Ausnahme von Überschriften und besonderen Auszeichnungen (z.B. Pullquotes) sollten ausschließlich Systemschriften verwendet werden. Einen Beispiel-Styleguide haben wir unter diesem Link bereitgestellt.

Abseits des Idealfalls

Wir sind selbstverständlich flexibel und liefern auch professionelle Umsetzungen von anderen Vorlagen. Allerdings kann hier das Auftreten von Abweichungen oder eine Verlangsamung unseres Workflows zu einer erhöhten Entwicklungszeit und größerem höherem Kommunikationsbedarf führen. Bitte kontaktieren Sie uns vor Lieferung der Daten, wenn Sie abweichende Formate nutzen wollen.

Relativ unproblematisch ist die Verwendung anderer Rastergrafikformate (TIFF, BMP, Corel Photo Paint) sofern die Grafiken im RGB-Farbraum erstellt worden sind und uns komplexe Elemente, wie Hintergründe oder teiltransparente Logos, separat geliefert werden. JPG-Dateien sind aufgrund ihrer Verlustkompression als Vorlagen ungeeignet.Auch mit Vorlagen im Vektorformat (Adobe Illustrator, InDesign, PDF, Corel Draw) können wir umgehen. Hierbei benötigen wir aber eine genaue Bemaßung des Layouts (Breite und Höhe aller wichtigen Elemente in Pixeln). Alle Textelemente, die nicht in einer Systemschrift (Arial, Verdana, Times New Roman, etc.) gesetzt sind, müssen in Pfade umgewandelt sein oder die entsprechenden Schriften müssen mitgeliefert werden.