von Emma Berry
Das Schöne an Articulate Rise ist, dass man in Sachen Entwicklung nicht immer alles im Voraus planen muss. Sie können sich frisch an einen leeren Kurs setzen und im Handumdrehen Blöcke hinzufügen, umsortieren und löschen, Interaktionen einbauen und einfach ausprobieren, was funktioniert und was nicht.
Diese Flexibilität und Geschwindigkeit ist es oft, was viele an solchen intuitiven Autorentools begeistert. Ideen mit ein paar Klicks zum Leben zu erwecken, und das ohne etwas vom Programmieren verstehen zu müssen.
Bei der Struktur eines Kurses kann dieser experimentelle Ansatz richtig gut funktionieren, beim Design ist aber in der Regel ein bisschen mehr Planung geraten.
Theoretisch sind Ihrer gestalterischen Kreativität in Rise kaum Grenzen gesetzt, aber diese Offenheit kann sich auch wie lähmende Führungslosigkeit anfühlen. Das führt dann oft zu einer von zwei Reaktionen: Die einen sind begeistert von der Freiheit, alles gestalten zu können, quetschen dann aber zu viele verschiedene Stile in den Kurs; die anderen sind völlig überfordert und produzieren dann, um auf der sicheren Seite zu bleiben, einen langweiligen, hässlichen Retortenkurs.
Mit ein bisschen Planung können Sie diese beiden Fallstricke zum Glück umgehen und einen ansprechenden, intuitiven Kurs erstellen, auch ohne Designdiplom.
Aus einem Guss
Warum sollten Sie ihr visuelles Design planen, bevor Sie mit der Entwicklung loslegen? Nicht, weil es darum ginge, irgendetwas Hochkomplexes zu schaffen oder stundenlang an einer Figur rumzubasteln, die dann doch nur auf einer einzigen Folie auftaucht. Nein, es geht um Konsistenz.
Ein einheitlicher Look spielt eine wichtige Rolle beim ersten Eindruck des Kurses auf die Lernenden. Dabei ist es leider wie so oft: Gutes Design wird kaum wahrgenommen, aber schlechtes fällt sofort ins Auge. Selbst Kleinigkeiten wie stilistisch unterschiedliche Symbole einzubauen oder plötzlich von Illustrationen zu Fotos zu wechseln, können Unruhe oder sogar Verwirrung auslösen. Sie können vom Inhalt ablenken und sich damit tatsächlich negativ auf die wahrgenommene Qualität der Inhalte und auch auf den Lerneffekt auswirken.
Überlegen Sie mal: Bestimmt sind Sie auch schon mal auf einer Website gelandet, von der Sie gleich beim ersten Anblick abgetörnt waren. Haben Sie die dort angebotenen Produkte oder Dienstleistungen eingekauft? Vermutlich nicht.
Die Qualität, aber eben auch die Konsistenz des Designs wirken sich unmittelbar auf die wahrgenommene Professionalität, aber auch auf die mentale Last bei der Kursteilnahme aus. Wir wollen ja, dass unser Design die Lernerfahrung unterstützt, nicht von ihr ablenkt. Hier vor dem Entwicklungsstart ein paar Minuten in die Designplanung zu stecken, lohnt sich also.
Wie geht man diese Planung jetzt am besten an? Hier ist meine Empfehlung dazu:
1. Moodboard anlegen
Das können Sie mit jedem beliebigen Programm machen. Es muss nicht InDesign sein, MS Word oder PowerPoint reichen völlig. Miro ist auch eine gute Wahl. Wichtig ist einfach, dass es unkompliziert ist und Sie genug Platz haben, um Ihre Ideen niederzulegen, denn das Moodboard wird sich während der Planungsphase weiterentwickeln.
2. Branding berücksichtigen
Wenn Sie den Kurs für ein bestimmtes Unternehmen entwerfen, gibt es mit Sicherheit ein paar Branding-Richtlinien. Das können Schriftarten oder Farbpaletten sein, aber auch Bildstile. Diese Richtlinien sind oft umfangreiche PDF-Dokumente. Nehmen Sie sich also am besten ein bisschen Zeit und ziehen Sie alles raus, was für Ihr Design relevant ist.
Notieren Sie in Ihrem Moodboard auch separat, welche Schriftarten für Überschriften und welche für Fließtexte geeignet/vorgeschrieben sind. Ein kleiner Blindtextabsatz kann Ihnen hier helfen, das Ergebnis zu visualisieren. Auch Informationen zur Schriftgröße können Sie schon mal notieren.
Als nächstes kommt die Farbpalette. Ich packe am liebsten einfach ein paar Rechtecke mit den entsprechenden Farben nebeneinander ins Moodboard. Daneben schreibe ich den HEX- oder RGB-Code der Farbe, damit ich keine Zeit verliere und keine Fehler mache, wenn ich mit der Entwicklung loslege. Eine gute Idee ist auch, neben die Farben zu schreiben, wo und wie sie eingesetzt werden sollen (z. B. Überschrift, Fließtext, Akzente, Symbole …). Manche Branding-Richtlinien beinhalten verschiedene Farbpaletten für unterschiedliche Zwecke. Hier lohnt es sich, kurz mit den Auftraggebern zu sprechen und sie zu bitten, sich auf maximal 4-5 Farben festzulegen. Sonst wird es unübersichtlich.
3. Auf Barrierefreiheit prüfen
Jetzt, da Sie Schriftarten und Farben beisammen haben, ist es wichtig, sie mit Barrierefreiheits-Empfehlungen abzugleichen. Die beziehen sich hauptsächlich auf die Schriftgröße und auf den Farbkontrast (besonders für den Kontrast von Schrift zu Hintergrund). Ich versuche immer, mindestens zwei kontrastreiche Farbpaare in der Palette zu haben.
Ordnen Sie die entsprechenden Farben auf Ihrem Moodboard in Paaren an und beschriften Sie sie.
Auch Schriftarten spielen eine Rolle in der Barrierefreiheit. Ausgefallene, geschwungene Schriften mögen attraktiv wirken, sind aber unter Umständen schlechter lesbar. Bei 44-Punkt-Überschriften mag das weniger ein Problem sein, bei 16-Punkt-Fließtext schon deutlich mehr.
Standardschriftarten wie Poppins, Arial oder Open Sans eignen sich gut für Fließtext, haben aber auch Bold- und Black-Alternativen für Überschriften.
4. Stilentscheidungen treffen (für Fotos, Illustrationen, Symbole)
Es mag kleinlich wirken, aber plötzliche Stilwechsel bei Symbolen können wirklich ins Auge stechen. Legen Sie also einen Bereich „Symbole“ auf Ihrem Moodboard an und fügen Sie ein paar Beispielsymbole mit einheitlichem Stil ein. Wenn Sie sich unsicher sind, durchstöbern Sie Websites wie flaticon.com. Dort finden Sie bestimmt welche, die Ihnen gefallen. Entscheiden Sie sich, ob die Symbole farbig oder schwarz-weiß, ausgefüllt oder nur Umriss, detailliert oder abstrakt sein sollen.
Ein Besuch der Website des Auftraggebers kann hier bei der Entscheidung helfen. Wenn Sie über ein paar Beispielsymbole im Moodboard hinausgehen möchten, können Sie auch einen separaten Symbolordner anlegen und dort Symbole ablegen, von denen Sie annehmen, dass Sie sie in dem Kurs verwenden. Wenn Sie dann mit der Entwicklung loslegen, haben Sie die Symboldateien direkt zur Hand. Notieren Sie sich auch auf jeden Fall, woher Sie die Symbole haben. So finden Sie schneller weitere im selben Stil.
Bei Fotos und Illustrationen gibt es mit einiger Wahrscheinlichkeit Vorgaben vom Auftraggeber. Egal, ob bei Figuren für Szenarien oder rein dekorativen Hintergrundfotos, ist auch hier Einheitlichkeit gefragt.
Websites mit lizenzfreiem Bildmaterial gibt es wie Sand am Meer. Als Articulate-360-Abonnent können Sie aber natürlich auch ganz bequem auf die Content Library 360 zurückgreifen. Bei Fotos erstreckt sich Einheitlichkeit auf den Hintergrund, die Art der Aufnahme (Nahaufnahme vs. Totale), Farbigkeit und Posen. Persönlich versuche ich, allzu gestellte Fotos, bei denen Personen direkt in die Kamera blicken, zu vermeiden. Szenen, in denen die gezeigten Menschen tatsächlich zu interagieren scheinen, können natürlicher, und damit ruhiger, wirken. Achten Sie bei den gezeigten Personen auch auf eine gesunde Diversität (Alter, Geschlecht, Hautfarbe, …).
Machen Sie auch hier wieder einen Bereich mit Beispielbildern auf Ihrem Moodboard.
Bei Figuren für Szenarien und Illustrationen kann es etwas kniffliger werden, die gewünschte Einheitlichkeit zu erreichen. Auch hier können Websites mit lizenzfreiem Material wie Storyset.com (oder natürlich wieder Articulates Content Library 360) helfen. Auf Storyset können Sie die Illustrationen sogar einfach umfärben, ganz ohne Grafikdesignsoftware.
5. Inspiration für Layouts und Interaktionen sammeln
Wussten Sie schon, dass Website-Designs eine hervorragende Inspirationsquelle für Rise-Kurse sind?
Durch das scrollbare One-Page-Layout von Rise fühlt sich ein solcher Kurs sehr ähnlich wie eine moderne Website an. Sie können vielleicht nicht alle Funktionen und interaktiven Elemente von Websites kopieren, aber vom Design können Sie sich einiges abgucken.
Oder geben Sie einfach Suchbegriffe wie „Website UI-Design Inspiration“ bei Google oder Pinterest ein. Sehen Sie sich bei den Suchergebnissen an, wie der Text verteilt ist, wie Farben und Formen verwendet werden und wie und wo Bilder eingesetzt werden. Hier finden Sie oft auch Inspiration für Trennelemente, Hintergründe und vieles mehr.
Machen Sie Screenshots von Layouts, die Ihnen gefallen, und fügen Sie sie unter der Überschrift „Layout-Inspiration“ ins Moodboard ein.
6. Prüfen, ob alles zusammenpasst
So, jetzt haben Sie alle Teile des Design-Puzzles beisammen, aber das Wichtigste kommt natürlich noch: Gucken, wie alles zusammenpasst. Was meine ich damit?
Sehen Sie sich alle Elemente im Verbund an und überlegen Sie, ob sie gut sind, um die intendierte Botschaft zu transportieren. So wäre ein Moodboard voller warmer Gelb- und Orangetöne und Fotos von lächelnden Menschen für einen Kurs zum Thema Online-Betrug eher ungeeignet. Ebenso wenig passen würden zum Beispiel geschwungene, weiche Schriftarten zu seriösen Schwarz-weiß-Fotos.
🌟 Alle Elemente müssen gezielt ausgewählt sein und im Verbund stimmig wirken.
Versuchen Sie, auch Begründungen für Ihre Design-Entscheidungen zu formulieren. Wenn Sie dabei merken, dass Sie nicht recht sagen können, warum Sie sich für eine bestimmte Schriftart, Illustration oder Symbolkategorie entschieden haben, ist das ein starker Hinweis darauf, dass es vielleicht nicht die richtige Wahl war.
Fazit
Mit diesen 6 Schritten haben Sie ein Moodboard entworfen, das Sie Auftraggebern vorlegen, mit Kolleginnen und Kollegen teilen und selber als kohärenten Ausgangspunkt für die eigentliche Entwicklung Ihres Rise-Kurses nutzen können.
Noch mal zur Erinnerung: Ein Moodboard muss kein perfekt durchgestyltes Dokument sein. Es soll Ihnen einfach als gebündelte Inspirationsquelle dienen und dabei helfen, bei der Entwicklung die visuelle Konsistenz zu wahren. Damit Sie einen Rise-Kurs erschaffen, der weder langweilig noch orientierungslos wirkt.
