CMS-Webdesign: Ein Leitfaden für Anwendungen mit dynamischen Inhalten

UI/UX-Techniken für die dynamische inhaltsgesteuerte Welt der Online-Medien.

Eine große Mehrheit der Webanwendungen und mobilen Apps, insbesondere im Bereich der Online-Medien, werden von Content-Management-Systemen (CMS) wie WordPress, Drupal und anderen unterstützt. Diese Systeme wurden entwickelt, um den Anforderungen eines Internetzeitalters gerecht zu werden, in dem Inhalte maßgebend und dynamisch sind und sich ständig und häufig ändern.

In der Vergangenheit waren die meisten Websites statisch – nicht darauf ausgelegt, sich nahtlos weiterzuentwickeln und zu wachsen. Heute gelten sie als lebende Systeme, und es gibt einen optimalen Weg, sie zu gestalten.

Das Folgende ist ein Leitfaden für Digitaldesigner, die ihr Repertoire über statische Websites und Zielseiten hinaus erweitern und mit dem effektiven Design für dynamische inhaltsgesteuerte Anwendungen wie Nachrichtenseiten, Blogs oder sogar soziale Netzwerke beginnen möchten, in denen Benutzer regelmäßig Inhalte veröffentlichen. Um diesen Übergang zu vollziehen, müssen Designer verstehen, wie diese Arten von Anwendungen typischerweise strukturiert sind, und im Designprozess eine „Content-First“-Denkweise annehmen.

CMS-Webdesign IA-Muster in CMS-gesteuerten Anwendungen

Designer sollten ein mentales Modell der gängigen Informationsarchitekturmuster in einer CMS-gesteuerten Anwendung haben, insbesondere wenn sie an der UX (Benutzererfahrung) arbeiten und diese von Grund auf entwerfen. Es gibt mehrere Seitentypen, die diesen Anwendungen gemeinsam und integral sind, und sie sind oft auf vorhersehbare Weise miteinander verbunden, wobei der „Beitrag“ als Kernkomponente fungiert. Die Anzahl der Stellen, die eine Bewerbung enthalten kann, ist grundsätzlich theoretisch unbegrenzt.

Titelseite

Dies ist der formelle Einstiegspunkt und oft gleichbedeutend mit der Homepage. Dies ist sehr verbreitet, insbesondere wenn auf viele Inhalte zugegriffen werden muss, da es hilft, das Wichtigste hervorzuheben oder hervorzuheben. Diese Seite zeigt normalerweise gekürzte Versionen von Beiträgen, ohne zu viele Details preiszugeben.

Seite posten

Wenn der „Beitrag“ die Kerneinheit einer CMS-gesteuerten Anwendung ist, dann werden auf der Beitragsseite alle öffentlichen Details zu einem Beitrag angezeigt. Es ist wahrscheinlich die einzige wirklich kritische Seite in der Anwendung, und es könnte eine Artikelseite oder eine Informationsseite über ein bestimmtes Ereignis, eine Person, eine Gruppe, ein Produkt usw. sein. In einigen größeren Anwendungen kann es mehrere Arten von Posts und Posts geben Seiten bezeichnet.

Listen-/Kategorieseite

Diese Art von Seite ist hilfreich, damit Benutzer durch alle verfügbaren Beiträge navigieren und sie nach Kategorie, Attributen oder anderen Kriterien filtern können. Eine Sortieroption ist auch üblich, wenn die Menge an Inhalten, durch die gescrollt werden muss, beträchtlich ist.

Suchseite

Eine eigene Seite für die Suche ist für kleinere Anwendungen nicht unbedingt erforderlich, aber immer hilfreich. Manchmal kann es mit der Kategorie-/Listenseite zusammengeführt oder integriert werden.

Benutzer-/Autorenprofil

Diese Seite ist jedem Autor oder Benutzer gewidmet, der einen oder mehrere Beiträge erstellt. Auf kleinen Nachrichtenseiten und Blogs mit einem Autor wird manchmal darauf verzichtet, aber es ist entscheidend für große Nachrichtenseiten mit mehreren Autoren, inhaltsgesteuerten sozialen Netzwerken und anderen benutzergenerierten Anwendungen. Eine gängige und hilfreiche Vorgehensweise besteht darin, eine Liste aller Beiträge des Benutzers auf dieser Seite einzufügen.

Benutzerstartseite oder Dashboard

Diese Seite zeigt Informationen (einschließlich Beiträge), die für den angemeldeten Benutzer relevant sind, häufig in Form eines persönlichen Newsfeeds oder empfohlener Inhalte, aktueller Aktivitäten und Status. Das Benutzer-Home ist für geschlossene Apps und Anwendungen in sozialen Netzwerken unerlässlich, für andere jedoch optional oder irrelevant.

Inhaltsgesteuertes UI-Design für dynamische Inhalte

Inhalt geht vor Design. Design ohne Inhalt ist kein Design, sondern Dekoration. – Jeffrey Zeldman

Wenn es an der Zeit ist, die Benutzeroberfläche einer CMS-gesteuerten Anwendung zu entwerfen, ist es wichtig, daran zu denken, dass der Inhalt immer das Design vorantreibt, nicht umgekehrt. Ein Content-First-Ansatz wurde in den letzten Jahren von immer mehr Medienunternehmen mit nachweisbaren Ergebnissen übernommen. Vor diesem Hintergrund finden Sie hier eine Liste mit Empfehlungen, die UI-Designer beachten sollten, wenn sie in diese Art von Projekten einsteigen.

Betrachten Sie den Inhalt, bevor Sie einen Stil definieren

In einer inhaltsgesteuerten Anwendung sollte der visuelle Stil den Inhalt als Ganzes unterstützen. Obwohl die Art dieser Art von Anwendungen normalerweise impliziert, dass der Inhalt variabel und nicht vollständig vorhersehbar ist, passt er meistens in ein Gesamtthema. Bei der Entwicklung der Markenästhetik können aktuelle Inhalte also eine große Inspirationsquelle sein. Gleichzeitig kann es aber auch ein Nachteil sein, wenn der Designer zu sehr an bestimmten Inhalten hängt und einen zu zielgerichteten Stil entwickelt.

Informieren Sie sich darüber, wer die Inhalte regelmäßig erstellt.

In einer CMS-gesteuerten Anwendung wird der Inhalt weitgehend von den Inhaltserstellern und nicht von den Designern bestimmt. Daher wird normalerweise erwartet, dass der Designer eine gewisse Kontrolle über das Erscheinungsbild des Produkts an Personen abgibt, die regelmäßig Inhalte veröffentlichen – nämlich Redakteure, Autoren, Administratoren oder sogar zufällige Benutzer, die Inhalte über öffentliche Formulare eingeben.

Abhängig vom vereinbarten Prozess kann der Designer einige Standards und Richtlinien für die Auswahl von Bildern, deren Vorbereitung und Zuschnitt festlegen und sogar einige Parameter für die Textgestaltung festlegen. Insgesamt liegt es jedoch in der Verantwortung des Designers, das Frontend der Anwendung so zu gestalten, dass unterdurchschnittliche Arbeiten seitens des Inhaltserstellers, wie ein schlechtes Foto oder eine sehr lange Überschrift, die Qualität nicht mindern des Designs in erheblichem Maße.

Designen Sie nach Möglichkeit mit echten Inhalten.

Da die Art der Inhalte in einer CMS-gesteuerten Anwendung stark variieren kann, ist es sinnvoll, sich Zeit zu nehmen, sich eine große Auswahl davon anzusehen. Idealerweise würde der Designer im Falle einer Nachrichtenseite oder eines Blogs ganz am Anfang des Designprozesses mit den Erstellern von Inhalten zusammenarbeiten und Beispiele für Geschichten, Produktbilder, Videos oder alles andere anfordern, das dazu beitragen kann, dass sich die Designmodelle real anfühlen wie möglich.

Die Gestaltung mit echten Inhalten ist der Verwendung von Stock-Fotos und Blindtexten vorzuziehen und kann sogar parallel zum Wireframing oder Prototyping erfolgen, da es hilft, mögliche Überraschungen zu begrenzen.

Es ist nicht ungewöhnlich, dass ein Design umwerfend aussieht, wenn ein Designer es mit sorgfältig vorgewählten oder mit Photoshop bearbeiteten Bildern und perfekt zugeschnittenen Überschriften füllt und dann sieht, wie es in die Flaute gerät, sobald es in Produktion geht.

Werden Sie nicht zu spezifisch mit dem Stil.

Wenn Sie einen visuellen Stil festlegen, ordnen Sie den Inhalt nicht in eine Schublade ein, indem Sie nur eine einzige Stimmung, ein Genre, eine Geschichte oder ein Thema widerspiegeln. Halten Sie es stattdessen einfach und universell in Bezug auf die gesamte Palette von Tönen, die im Inhalt ins Spiel kommen könnten.

Ein sehr spezifisches Erscheinungsbild ist manchmal für eine Anwendung akzeptabel, die ein Nischenpublikum anspricht, kann aber auf dem heutigen Markt oft als veraltet und wenig attraktiv erscheinen. Darüber hinaus kann dies potenziell die Aussichten für Wachstum und Expansion in neue Branchen in der Zukunft einschränken.

Um sicherzustellen, dass ein Design für eine breite Palette von Inhalten funktioniert, ist es normalerweise eine gute Idee, es zu testen, indem Sie eine oder zwei zusätzliche Versionen derselben Seite mit deutlich unterschiedlichen Themen erstellen, die sich immer noch im thematischen Bereich dessen befinden, was veröffentlicht werden kann.

Gestalten Sie jede Seite als Vorlage für unterschiedliche Inhalte

Stellen Sie sich jeden Seitentyp in der Anwendung als Vorlage oder Blaupause für verschiedene Medienelemente (Bilder, Widgets, Videos, Textblöcke usw.) zum Ausfüllen vor und wissen Sie, welche Elemente geändert werden und welche unverändert bleiben können .

Richten Sie klare Regeln und Konsistenzen ein.

Nur weil der Inhalt von einer Seite zur nächsten stark variieren kann, heißt das nicht, dass es keine einheitlichen Formate geben sollte, in denen die Inhalte präsentiert werden.

Kopfzeilen und Bildgrößen vorhersagbar zu halten und eine logische Informationshierarchie von oben nach unten innerhalb einer Seite einzuhalten, hat viele Vorteile, unter anderem schafft es ein Gefühl der Harmonie in der gesamten Anwendung und hält den Benutzer richtig orientiert.

Um dies einfacher zu erreichen, entwickeln Sie einen modularen, wiederverwendbaren Satz von Stilkomponenten für so viele Teile der Benutzeroberfläche wie möglich, einschließlich Überschriften, Trennlinien, Schaltflächen, Widgets und anderer Elemente innerhalb eines Designprogramms. Verwenden Sie diese Komponenten wiederholt und in einem logischen Schema und halten Sie die Variationen auf ein Minimum. Dieser Artikel von Toptal Designer Wojciech Dobry präsentiert eine nette Anleitung zum Erstellen einer UI-Bibliothek in Sketch.

Geben Sie Beiträgen KEINE individuellen Designbehandlungen.

Versuchen Sie zu vermeiden, Posts innerhalb desselben Abschnitts einer Seite zu viele Unterschiede in Stil und Format zu geben. Dazu gehören das Ändern der Bildabmessungen, das Hinzufügen spezieller Textlayouts oder Schriftarten oder das Aufblähen einzelner Bilder mit benutzerdefinierten Verzierungen oder Grafiken. Dies neigt nicht nur dazu, die visuelle Harmonie zu zerstören, sondern ist im Allgemeinen eine Verschwendung von Ressourcen und eine Belastung für Leistung und Wartung aus Sicht eines Entwicklers oder Content-Managers.

Gehen Sie NICHT davon aus, dass Inhalte immer in einen bestimmten Bereich passen.

Eines der unvermeidlichen Ergebnisse der dynamischen Natur einer CMS-gesteuerten Anwendung ist, dass die Textmenge, die in einem bestimmten Anzeigebereich angezeigt wird, unterschiedlich lang sein kann. Oft können im CMS Zeichenbeschränkungen für Text festgelegt werden, um die Dinge vernünftig zu halten, aber der Designer sollte niemals blind davon ausgehen, dass ein Textblock immer auf eine bestimmte Anzahl von Zeilen passt.

Nicht nur die einzelnen Zeichenbreiten variieren, es ist auch nicht üblich, die Kreativität der Autoren stark einzuschränken, indem man eine sehr niedrige Zeichengrenze durchsetzt. Aus diesem Grund ist es immer gut, ein Design wie oben beschrieben mit echtem Inhalt zu testen und jeden Bereich mit verschiedenen Textbeispielen zu überprüfen.

Um im schlimmsten Fall sicher zu sein, fügen Sie vorübergehend eine Folge von breiten alphabetischen Zeichen ein (z. B. „w“, wenn der Inhalt auf Englisch ist), bis eine vereinbarte Zeichenbegrenzung erreicht ist.

Lassen Sie den Inhalt hervorstechen

Bei einer Content-getriebenen Anwendung sollten Inhalte stets im Vordergrund stehen und stilistische Branding-Elemente generell zurücktreten.

Umgeben Sie dynamische Inhalte mit sauberen, hellen, neutralen Hintergrundfarben.

Weiß oder gebrochenes Weiß ist normalerweise vorzuziehen. Dadurch können viele verschiedene Arten von Bildern, hell und dunkel, von der Seite abgehoben werden, ohne dass sie überschattet werden.

Machen Sie Bilder groß und eindrucksvoll.

Große Bilder, insbesondere Fotos, ziehen die Aufmerksamkeit des Besuchers effektiver auf sich als alles andere.

Halten Sie Überschriften und Fließtext groß und gut lesbar.

Wählen Sie für textlastige Seiten Webfonts, die gut lesbar sind, und stellen Sie sie in einer großen, komfortablen Größe auf allen Geräten bereit – Desktop, Handy und Tablet.

NICHT überdesignen.

Oft setzen Digital- und Printdesigner gerne kreative Verzierungen ein oder lassen Branding-Elementen in ihren Designs freien Lauf. Im Allgemeinen können bestimmte visuelle Effekte zwar manchmal ein inhaltsgesteuertes Design verbessern, aber auch leicht vom Inhalt ablenken, was die Benutzer wirklich interessiert, wenn sie eine Nachrichtenseite oder einen Blog besuchen.

Solche Effekte können auch das Erscheinungsbild der Anwendung weniger vorhersehbar machen, wenn sich Bilder ändern. Es ist im Allgemeinen eine bewährte Methode, dekorative Schriftarten, kräftige Muster, Illustrationen, überlappende Bilder, halbtransparente Bilder und ausgefallene Rahmen um Bilder zu überprüfen. Schließlich sollten Sie das Logo im Vergleich zu den vorgestellten Inhalten relativ klein halten.

Verwenden Sie KEINE farbigen Hintergründe in der Nähe dynamischer Bilder.

Kräftige, leuchtende Farben sind im Moment angesagt, aber es ist normalerweise am besten, große Mengen an gesättigten Farben oder einen farbigen Hintergrund um Bilder zu vermeiden, die Änderungen unterliegen, da dies zu unvorhersehbaren Ergebnissen führen kann, einschließlich Farbkollisionen und Überstimulation. vom Inhalt ablenken.

Verwenden Sie keine dunklen Hintergründe, um ganze Textseiten zu bedecken.

Studien zeigen, dass bei inhaltslastigen Anwendungen heller Text auf dunklem Hintergrund die Augen stärker belastet als dunkler Text auf hellem Hintergrund. Ein dunkler Hintergrund kann gut für einen speziellen Abschnitt einer Seite oder einen Diashowbereich funktionieren, in dem nur eine begrenzte Textmenge vorhanden ist, ist aber nicht gut geeignet, um lange Textblöcke abzudecken.

Verstehen Sie, wie Bilder und andere Medien im Backend funktionieren

Content-Management-Systeme können unterschiedlich mit Medien wie Bildern, Videos und Animationsdateien umgehen, und manchmal legt ein Entwickler aus Effizienzgründen absichtlich Einschränkungen für die Medien fest.

Beispielsweise kann es Beschränkungen geben, wie Bilder skaliert und zugeschnitten werden und wie viele Größen und Zuschnitte generiert und angezeigt werden können. Daher ist es wichtig, sich mit dem Anwendungsentwickler oder den Content-Managern zu beraten, um festzustellen, was praktikabel ist (und wofür sie bereit sind, zusätzliche Entwicklungsressourcen zu investieren), bevor sie mit einem Design vorankommen.

Finden Sie heraus, welche Medienformate unterstützt werden.

Obwohl es normalerweise eine Selbstverständlichkeit ist, dass eine Anwendung Bilder unterstützt, ist es eine gute Idee, sich mit den Inhaltsmanagern darüber zu beraten, welche Arten von Video-, Audio- und anderen Multimediadateien gespeichert und angezeigt werden können und inwieweit sie visuell angepasst werden können.

Es hilft beispielsweise herauszufinden, ob ein benutzerdefinierter Videoplayer erstellt wird oder ob das Einbetten eines YouTube- oder Vimeo-Videos auf einer Seite die einzige Option ist. Im Fall von YouTube gibt es spezifische Standards und Einschränkungen dafür, wie Videos eingebettet, skaliert und geskinnt werden können.

Bestimmen Sie nicht viele verschiedene Zuschnitte und Größen für Bilder.

Obwohl es technisch oft machbar ist, viele separate Zuschnitte für ein Bild zu erstellen, hat dies normalerweise negative Auswirkungen. Beispielsweise generiert das WordPress-CMS standardmäßig automatisch mehrere Größen eines hochgeladenen Bildes in einem einzigen Verhältnis, bietet jedoch nur die Option, ein separat zugeschnittenes Miniaturbild zu erstellen.

Das Zuschneiden jedes Bildes auf zusätzliche Verhältnisse erfordert nicht nur die Installation eines speziellen Plugins oder die Entwicklung eines speziellen Tools im Voraus, sondern stellt auch zusätzliche Anforderungen an die Redakteure, da sie für jedes hochgeladene Bild zusätzliche Arbeit leisten müssen. Manchmal erschwert dies auch die Auswahl eines geeigneten Bildes, was den Arbeitsablauf weiter verlangsamt.

Stellen Sie fest, ob Legacy-Inhalte unterstützt werden müssen.

Beim Redesign einer Legacy-Anwendung stehen manchmal noch weniger Möglichkeiten zur Verfügung als beim Neuaufbau einer Anwendung. Dies liegt daran, dass es bereits ein vorhandenes Medienrepository gibt und die Migration aller Medien in ein neues Format aus Entwicklungssicht oft ein teurer oder unpraktischer Vorgang sein kann.

Bieten Sie Content-Editoren eine Vielzahl von Möglichkeiten, Text zu formatieren

Textinhalte sind ein Schlüsselelement einer CMS-gesteuerten Anwendung, und insbesondere auf einer Nachrichtenseite oder einem Blog wird man feststellen, dass Redakteure oder Autoren, wenn sie sich selbst überlassen sind, nach Möglichkeiten suchen, Text zu gestalten und zu formatieren, um ihn hervorzuheben bestimmte Punkte, brechen Inhalte auf, fügen Zitate hinzu, erstellen Listen, verlinken auf andere Inhalte und erledigen eine Reihe anderer Aufgaben.

Viele beliebte CMS-Plattformen wie WordPress bieten standardmäßig Textformatierungsoptionen, aber wenn der Designer nicht plant, wie diese Stile an sein Design angepasst werden, wird das Ergebnis etwas Zufälliges, Einfaches oder Unerwünschtes sein.

DO-Design für alle gängigen Arten, wie Text formatiert werden kann.

Besonders für Blogs und Nachrichtenseiten lohnt es sich, sich die Zeit zu nehmen, dem Entwickler Stilregeln für alle gängigen Arten der Textformatierung zur Verfügung zu stellen, darunter: fetter und kursiver Text, Überschriften und Unterüberschriften, nummerierte und Aufzählungslisten, Blockzitate, Bildunterschriften , und Hyperlinks.

Geben Sie den Erstellern von Inhalten NICHT zu viel stilistische Kontrolle.

Es ist im Allgemeinen keine gute Idee, den Redakteuren zu viel Designkontrolle einzuräumen. Ihnen zu erlauben, ihre eigenen Layouts innerhalb von Seiten zu erstellen oder Text auf mehr als eine Weise zu färben, kann für manche Menschen entmutigend oder zeitaufwändig sein und bei anderen zu hässlichen, inkonsistenten Ergebnissen führen.

Zukünftige Muster des inhaltsgesteuerten Designs

Mit dem Aufkommen neuer Technologien wie Augmented Reality (AR) sind neue Paradigmen für inhaltsgesteuertes Design entstanden. CMS-gesteuerte Anwendungen im Augmented/Mixed-Reality-Bereich, die derzeit noch in den Kinderschuhen stecken, verwenden reale Objekte und/oder Szenen als wesentlichen Bestandteil des Inhalts.

Die Betrachtungsumgebung, die Lichtverhältnisse und die physische Nähe eines bestimmten mobilen Benutzers in Bezug auf Text und eingefügte 3D-Objekte können alle das Endergebnis beeinflussen. Dies verändert den Begriff der Inhaltskuration erheblich und fügt eine zusätzliche Ebene der Unvorhersehbarkeit hinzu, die im Designprozess berücksichtigt werden sollte.

CMS-Webdesign ist ein bisschen anders

Design für CMS-gesteuerte Anwendungen bedeutet, dass der Inhalt an erster Stelle steht, der Stil an zweiter Stelle. Es bedeutet auch, Variabilität und Unvorhersehbarkeit in den Inhalten, um die herum man entwirft, zu planen und zu akzeptieren. Die Fähigkeit, unzählige potenzielle Ergebnisse zu berücksichtigen, wird im CMS-Webdesign noch wichtiger, da neue Technologien die Art der Inhalte selbst verändern.