Mit diesen Tipps wird deine Publikation fantastisch aussehen!
Noch nie gab es so viele Möglichkeiten zur benutzerdefinierten Anpassung auf Medium
von Elizabeth Tobey, Head of Community Management, übersetzt von Medium Deutsch
Seit heute gibt es jede Menge neuer Möglichkeiten zur benutzerdefinierten Anpassung von Publikationen.
Zwar ist nicht jeder ein Designer (oder hat ein künstlerisches Auge für visuelle Dinge— ich weiß, wovon ich hier spreche), aber jeder kann seine Medium-Publikation so gestalten, dass sie einzigartig und professionell aussieht. Man muss nur ein paar wenige grundlegende Prinzipien in Bezug auf folgende Dinge beachten:
Migration
Publikationen können auf Medium von Grund auf neu gestaltet werden oder man migriert bestehende Arbeiten von einer anderen Plattform auf Medium. In unserem Help Center gibt es eine Anleitung, die dir dabei helfen wird, deine Arbeit auf Medium zu migrieren (wie auch deine benutzerdefinierte Domain, falls es das ist, was du dir wünschst).
Logos, Avatare und Header
Das Wichtigste zuerst: Als erstes entwirfst du ein schickes Logo, einen Avatar und einen Header.
Hier stehen dir nun erweiterte Möglichkeiten zur Verfügung: Wir haben neue Optionen geschaffen und die alten verbessert.
Verwende transparente PNG-Dateien für Logos, Avatare und Header. Damit sieht dein Logo mit allen Hintergründen und Headern gut aus. Du brauchst dafür ein Bearbeitungsprogramm wie Photoshop oder GIMP.
- Das Logo für die Publikation (das Logo, das über jeder Geschichte angezeigt wird) sollte nicht mehr als 600px breit und 75px hoch sein.
- Der Avatar (das Symbol, das neben dem Namen der Publikation und am Ende jedes Posts erscheint) sollte eine Größe von 60x60px haben.
- Für den Header kannst du als Größe “small”, “medium” oder “large” wählen. In einen großen Header kannst du auch ein Hintergrundbild einfügen. Das Verhältnis beträgt hier 2:1 mit einer Mindestgröße von 1500px Weite und 750px Höhe.
Mehr zu Headern
Da Header ganz neu sind, gibt es eine Reihe verschiedener Möglichkeiten, wie du durch das Ausprobieren verschiedener Optionen ein personalisiertes und einzigartiges Design erreichst.
Größe und Bildoptionen bei Headern
Der Header für deine Publikation kann klein, mittel oder groß sein. Wenn du dich für klein oder mittel entscheidest, kannst du nur die Hintergrundfarbe auswählen.
Bei einem großen Header kannst du auch ein Hintergrundbild auswählen. Das Bild muss mindestens 1500px breit und 750px hoch sein. Wir empfehlen außerdem dass du ein größtmögliches Bild mit einem Verhältnis von 2:1 wählst (d. h. es ist doppelt so breit wie hoch).
Große Header-Bilder können entsprechend des Sichtbereichs auf dem Desktop oder mobilen Gerät zugeschnitten werden, sodass du den Fokus so anpassen kannst, dass der Teil des Bildes, von dem du willst, dass die Leute ihn sehen, immer da ist, wo er hingehört.
Logos und Header
Wenn du ein Logo in deinem Header haben möchtest, verwende am besten ein möglichst hochauflösendes Logo, das überall gut aussieht.
Wir gehen davon aus, dass alle Logos im Retina-Modus hochgeladen werden, d. h., dass die Größe, in der das Logo hochgeladen wird, doppelt so groß ist wie die Größe, in der es angezeigt wird. Wenn du ein 2000px breites und 1000px hohes Logo hochlädst, interpretiert Medium dies als 1000px breit und 500px hoch. Das machen wir so, damit Logos überall toll aussehen: auf dem Smartphone ebenso wie auf einem riesigen Retina-Bildschirm.
Logos werden in deinem Header automatisch verkleinert, wenn sie eine höhere Auflösung haben als der Bereich, der für Logos vorgesehen ist. Falls die Logos kleiner sind als der Logobereich werden sie allerdings nicht automatisch vergrößert.
Fazit: Verwende so hochauflösende Logos wie möglich. Wähle die Größe, die du gerne hättest, dann verdoppele sie.
Layout-Optionen für Header
Neben der Größe kannst du deinen Header auch individuell mit einem Logo, einem Text oder beidem anpassen.
Dein Logo oder Text kann links oder mittig in deinem Header angeordnet werden. Probier am besten ein bisschen mit verschiedenen Größen und Farben herum, um zu sehen, was am besten aussieht. Die Welt (bzw. eher der Header) gehört dir.
“Those People” z. B. haben sich für einen Medium-Header mit einem kleinen, quadratischen Logo und zwei Zeilen Text für den Titel entschieden und alles links ausgerichtet:
Header-Farben und wie sie deine Publikation beeinflussen
Für die Hintergrundfarbe für dein Header-Bild stehen dir alle Farbschattierungen des Regenbogens zur Auswahl. Das Tool erfordert nur, dass es eine hex-Farbe ist (hex-Farben sind eine Mischung aus Zahlen und Buchstaben, die der Website verraten, welche Farbe du haben willst). Du kannst auch zwischen den Optionen “dezent” (subtle) und “kräftig” (bold) wählen. Bei “bold” erscheint die von dir gewählte Farbe überall in deiner Publikation in einem auffälligerem, kräftigerem Ton und bei “subtle”, wie der Name schon sagt, etwas subtiler.
Du willst die perfekte Farbe für deinen Header finden und auch gleich die entsprechende hex-Farbe? Dann ist die fantastische Seite Color Hex genau was du brauchst.
Experimentiere mit dieser Farbpalette. Deine Auswahl bestimmt dann alle Farben innerhalb deiner Publikation (einschließlich Highlights, Buttons und andere Teile der Benutzeroberfläche), wobei komplementäre Farbschattierungen gewählt werden, sodass alles gut zusammenpasst.
Dieses Beispiel zeigt noch einmal, warum es wichtig ist, für dein Logo ein transparentes .pngs zu wählen. Transparente .pngs erscheinen in der gleichen Farbe wie die gewählte Hintergrundfarbe, wodurch deine Publikation professionell aussieht.
Eventuell musst du die Datei deines Logo bearbeiten, damit dies möglich ist (was aber leicht über Photoshop, GIMP oder ein anderes Bildbearbeitungsprogramm erledigt werden kann).
Tags
Du kannst auch die Navigation der Homepage deiner Publikation anpassen, und zwar mithilfe der Tags, die du in deiner Publikation verwendest. Du kannst dir die Tags als verschiedene Abschnitte deiner Publikation vorstellen. Talkback zum Beispiel könnte Feedback, Updates und Tipps verwenden, damit die Leser die verschiedenen Posts, die sie suchen, schnell finden können. Suche dir also Tags aus, die du im Navigationsbereich deiner Homepage angezeigt haben möchtest — du kannst bis zu sieben Tags auswählen. “About” ist als Tag voreingestellt, das gilt es beim Layouten zu beachten.
Favicons
Findest du es nicht auch toll, wenn bei einer Website ein cooles Symbol in deinem Browser-Tab erscheint und du eine bestimmte Seite damit auf einen Blick erkennen kannst?
Wir auch.
Du kannst jetzt für deine Publikation dein individuelles Favicon bekommen. Dieses Feature gibt es für Publikationen mit benutzerdefinierter Domain (“custom domain”). Du möchtest wissen, wie du eine benutzerdefinierte Domain für deine Publikation bekommen kannst? Kein Problem, dazu gibt es einen Artikel in unserem Help Center.
Du hast oder willst kein Favicon? Das ist auch völlig ok. Du kannst unseres verwenden.
Layout deiner Publikation
Auch wenn es kein neues Feature ist, ist das Layout die wohl wichtigste Funktion beim Erstellen einer Publikation.
Das Tab zum Layouten deiner Homepage ermöglicht dir die Anordnung, das Layout und den Look deiner Publikation anzupassen.
Die Optionen sind schier endlos.
Beginnen wir mit dem Layout: Artikel können nebeneinander als Gallerie (“Grid”), als Stream (wie der Feed auf deiner Homepage) oder als Liste angezeigt werden. Bei der ersten Option entscheide ich mich dafür, einen Abschnitt zu haben, in dem die Posts nach Datum geordnet neben- und untereinander angezeigt werden.
Wenn Publikationen größer werden, brauchen sie oft mehr Anordnungsmöglichkeiten als in diesem ersten Beispiel. Die Organisation der Beiträge ist außerdem wichtig, um die Möglichkeit, Tags im Header deiner Publikation zu nutzen, otpimal zu nutzen.
Für die Organisation der Beiträge kannst du verschiedene Abschnitte einrichten, um bestimmte Artikel hervorzuheben oder deinen Stream nach Veröffentlichungsdatum, Tags oder wichtigsten Posts (“trending posts”) anzuordnen.
Jetzt probieren wir mal etwas ausgefalleneres aus, einverstanden?
In diesem Beispiel lasse ich im ersten Abschnitt meine “Featured”-Artikel anzeigen und hebe damit zwei meiner liebsten Talkback-Posts hervor. Der Rest meiner Artikel wird weiter unten als Raster (“Grid”) angezeigt.
Bereits kleine Änderungen im Layout haben große Auswirkungen auf den Look deiner Publikation. Im folgenden Beispiel habe ich mein Layout so geändert, dass ich keine Ränder mehr habe und der Text auf den Bildern angezeigt wird.
Der Unterschied ist gewaltig (und in diesem Fall, war die Änderung keine gute Idee).
Wie ich schon sagte: Die Welt (der Publikationen) gehört dir.
Fang an und mach sie dir zu eigen!
