Texte

Das Buch »Deutsch für junge Profis« von Wolf Schneider gibt wertvolle Tipps für einen guten und lebendigen Schreibstil. Auf dieser Webseite finden sich ein paar Notizen dazu.

Das Intro (Teaser) eines Artikels oder Projekts sollte max. zwei Sätze oder 300 Zeichen umfassen und prägnant, zielgerichtet und verständlich formuliert sein (»Worum geht es? Warum sollte ich das lesen?«).

Anführungszeichen und Textformatierung

  • Diese »Anführungszeichen« (Guillemets) verwenden [Mac: Option + Shift + Q bzw. Option + Q]
  • und diese ›einfachen‹ Anführungszeichen bspw. zur Hervorhebung von Begriffen oder
    wissenschaftlich unüblichen Bezeichnungen (wie Umgangssprache) [Mac: Option + Shift + N bzw. Option + Shift + B]
  • Gedankenstriche mit Halbgeviertstrich »–« (statt Trennstrich »-«) [Mac: Option + »-«]

Abbildungen

Bilder (png & jpg vs. webp)

Achtet darauf, eure Grafiken für das Web zu optimieren

Grafiken nach Möglichkeit in einer Breite von 1920 px exportieren.
Cover-Motive vorzugsweise in 1920 × 1080 px (16:9) anlegen.
Bitte speichert Grafiken als .WEBP ab:

  • WEBP ist ein Web-optimiertes Dateiformat, welches auch Transparenz (wie bei .PNG) unterstützt,
  • die Dateigröße ist dabei bis zu 78% kleiner als bei anderen Formaten.

Alternativ könnt ihr auch .JPG/.JPEG verwenden (Für Grafiken ohne Transparenz):

  • Achtet bitte auf eine sinnvolle Komprimierung (Grafiken, die kein Titelbild/Banner sind, sollten 300 KB oder weniger haben)

Logos und Icons bei Möglichkeit als Vektoren speichern, PNG ist auch möglich.
Bewegtbilder bei Möglichkeit in ein WEBP umwandeln (anstatt GIF).

Ausführliche Quellen für mehr Informationen

Adobe (Englisch)

WEBP Praxisbeispiel

SVG

SVG-Abbildungen wie folgt exportieren:

Einstellung Wert
Stil: Interne CSS
Schrift: In Konturen verwandeln
Bilder: Einbetten
Objekt-IDs: Ebenennamen (Ebenen entsprechend benennen)
Dezimalstellen: 4
Minifizieren: ✓
Responsiv: ✓

Videos

Videos in Full-HD (1920 × 1080 px) im MP4-Format ohne Abspann anlegen. Credits stattdessen als Text an anderer Stelle im Artikel bzw. Projekt aufführen/nennen. Bitte auf die Größe achten, komprimieren bis die Datei nur noch wenige MB groß ist (Bitrate geringer als 7 MBPS). Die Dauer der Videos auch möglichst kurz und den Inhalt prägnant halten.
Im Adobe Media Encoder könnt ihr mit Jochen’s Vorlage eine gute Kompression erzielen:
Ihr findet den Download ganz unten, unter »Video Authoring«, dann »- Video«

Jochen’s Video Preset

Alternativ gibt es folgendes Online-Tool, bei welchem ihr:

  • den Container auf MP4 setzt,
  • den Codec auf H.264 oder H.265,
  • die »Constant Quality« auf »Constant Bitrate (CBR)« (Das findet ihr ganz unten im Dropdown-Menü),
  • die Bitrate dann auf »Custom«,
  • und mit dem Slider dann einen Wert geringer als 7000 KBPS einstellen.
  • Falls noch nicht getan: »Resize« auf 1920x1080 und »Frame rate« auf 25 stellen.

    Convertio

Grafiken

Als Schrift für Diagramme etc. Work Sans (in Regular, Italic oder Bold) verwenden.

Wer Zugang zu Adobe Fonts hat, sollte unsere ›Hausschrift‹, die Covik Sans Mono von James Edmondson (Oh No Type) (in Regular, Italic oder Bold) nutzen. Die Entstehungsgeschichte der Covik Sans beschreibt James in diesem Blogartikel.

Covik Sans Mono

Grafiken in Schwarz-Weiß anlegen. Für Hervorhebungen bzw. Auszeichnungen unser 0t1-Rot verwenden.

H355/S80/B100
#FF3344

Wortmarke

Ihr könnt unsere Wortmarke im Vektorformat herunterladen…

0t1-Logo

oder als SVG-Code verwenden.

<svg id="0t1" xmlns="http://www.w3.org/2000/svg" width="666.1179" height="250" viewBox="0 0 666.1179 250">
  <g id="0t1_group">
    <path id="1" d="M455.9744,245.9767V189.614c32.606,0,57.1653,3.6237,76.8921,10.8709V57.5683C515.1514,74.88,492.607,87.36,469.2566,95.41L447.1152,38.6475,561.0461,4.43h40.26V189.614h64.8123v56.3627Z"/>
    <path id="t" d="M320.78,53.5417H433.1024v54.7507c-33.4153,0-79.31-.8027-112.3223-9.2589v61.5949c0,26.168,11.6752,37.8416,34.2212,37.8416,6.0383,0,11.6736-.4,16.9058-.8027,2.418-13.2855,2.418-28.183,2.418-38.2446h59.58c-.4,59.983-22.1415,90.5773-88.5673,90.5773-51.1271,0-92.9952-17.3088-92.9952-78.9037V103.4631h-25.765V53.5417h25.765V4.43H320.78Z"/>
    <path id="0" d="M109.9043,0c64.01,0,103.4631,28.9856,103.4631,120.7752C213.3674,204.5115,177.1345,250,105.0734,250,39.8565,250,0,222.6263,0,132.4487,0,46.7007,36.2329,0,109.9043,0ZM79.3084,62.4009c-5.234,20.5294-6.8443,42.2711-6.8443,61.1919,0,39.45,5.234,69.6449,37.8432,69.6449,6.8443,0,14.8942-.403,23.3488-4.0266,4.8309-16.5062,6.8442-33.815,6.8442-56.7624,0-50.3211-5.2339-74.88-39.4519-74.88C94.6072,57.5683,86.554,59.5833,79.3084,62.4009Z"/>
  </g>
</svg>

Andere Inhalte

Downloads

So könnt ihr Dateien zum Download bereitstellen:

  1. Datei (bspw. .zip, .pdf) unter Dateien/Files hochladen
  2. Als Inhaltsblock »Markdown« wählen
  3. Datei verlinken:

Einfacher Download-Link:
(file: tutorial.zip text: Tutorial-Dateien herunterladen)

Tutorial-Dateien herunterladen

Download-Button:
(file: doku.pdf class: uk-button uk-button-secondary text: Dokumentation (PDF))

Dokumentation (PDF)

Beispielseiten

Als Orientierung könnt ihr euch folgende Seiten genauer anschauen. Dort werden die Unterschiede im Layout zwischen Blog-Seite und Projekt-Seite sichtbar.

Projekt-Seite

Für Projekte aus dem Bereich UX/UI

Das Layout der Projekt-Seiten ist komplexer und es wird darum gebeten, dies auszunutzen. Es können abwechslungsreiche Raster oder Bildergalerien verwendet werden. Um die folgenden Links zu öffnen müsst ihr bei 0t1 angemeldet sein.

Blick ins Backend

Zur Beispiel-Projekt-Seite

Blog-Seite

Für Tutorials und Artikel

Das Layout der Blog-Seiten ist weniger komplex, da sie hauptsächlich aus Textparagraphen mit begleitenden Bildern im vertikalen Fluss bestehen. Um die folgenden Links zu öffnen müsst ihr bei 0t1 angemeldet sein.

Blick ins Backend

Zur Beispiel-Blog-Seite