Einstieg in Muse CC

Adobe Muse CC ist ein Grafikprogramm zum Erstellen von Websites, ohne dass Anwender für die Nutzung HTML-, CSS- oder JavaScript-Kenntnisse benötigen. Mit Muse CC können hochwertige visuelle Prototypen oder funktionsfähige Websites mit semiprofessionellem Anspruch erstellt werden. Das Programm bietet sich für kleine Kundenprojekte bzw. für private Projekte an.

Adobe hat (überraschend) angekündigt, dass das Programm Muse CC ab sofort nicht mehr weiterentwickelt wird und, dass die Software zum März 2019 vollständig eingestellt wird. Begründet wird dies mit den veränderten Anforderungen der Design-Welt.

Designer von großen, individuellen und komplexen Websites arbeiten zunehmen mit modernen UI-/UX- und Prototyping-Tools wie Sketch, Adobe XD, Framer oder InVision.

Designer, die in kleinen Projekten sowohl die Gestaltung als auch die Technik übernehmen, greifen zunehmen auf Baukästen und Themes zurück.

Projekte erstellen und einrichten

Allgemein

Site erstellen

Über Datei > Neue Site kann ein neues Projekt erstellt werden. Hier werden globale Einstellungen festgelegt.  Wichtig sind in diesem Bereich Breite des Dokuments, die Sprache, sowie der fixierte Footer. Auch das Raster ist interessant – das Raster gilt global für alle Breakpoints.

Alle Einstellungen können auch im Nachhinein über Datei > Site-Eigenschaften verändert werden.

Dialog für die Erstellung einer neuen Site (Projekt)
Dialog für die Erstellung einer neuen Site (Projekt)

Die Site-Eigenschaften

In den »Site-Eigenschaften« können im Abschnitt »Layout« alle Einstellungen verändert werden, die beim Anlegen einer neuen Site definiert wurden. Darüber hinaus können im Abschnitt »Inhalt« u.a. Standard-Link-Farben, Schriftarten etc. definiert werden. Auch ein Favicon kann hier hochgeladen werden. Im Abschnitt »Erweitert« werden Einstellungen festgelegt, die nicht direkt sichtbar sind, sich aber auf die Handhabung bzw. die Optimierung der Website beziehen. Alle Voreinstellungen in diesem Bereich sind sinnvoll gewählt.

muse-cc-site-eigenschaften
Die Site-Eigenschaften im Abschnitt »Inhalt«

Seiteneigenschaften

Die »Site-Eigenschaften« dürfen nicht mit den »Seiteneigenschaften« unter Seite > Seiteneigenschaften verwechselt werden. Die Einstellungen sind sehr ähnlich, beziehen sich aber einmal auf die globale Site (also das Projekt) und einmal auf die Seite (also die Unterseite).

muse-cc-seiteneigenschaften

In den Seiteneigenschaften können und sollten wichtige Einstellungen zur Suchmaschinenoptimierung festgelegt werden. Im Reiter »Metadaten« hat man die Möglichkeit eine Beschreibung (meta description), Schlüsselwörter (meta keywords) und eigenen HTML-Code für den <head>-Bereich der Website einzufügen. Die Einstellungen sollten selbstverständlich für jede Unterseite individuell festgelegt werden.

Ansichtsoptionen

Der Planungs-, Gestaltungs und Vorschau-Modus von Muse CC

Planungs-Modus

Sitemap

Im Planungsmodus wird die Seitenstruktur (Sitemap) erstellt. Die Ansicht kann vertikal oder horizontal verlaufen und über einen Rechtsklick können Hierarchieebenen zusammengefasst werden. Die Titel der Unterseiten bestimmen dabei den späteren Namen in der URL, sowie in der (automatisierten) Navigation.

Mastervorlagen

Über Mastervorlagen können verschiedene Vorlagen für verschiedene Arten von Unterseiten erstellt und per Drag & Drop auf die gewünschten Seiten angewendet werden. Mastervorlagen können auch auf anderen Mastervorlagen basieren.

Sitemap-Struktur in Muse CC
Sitemap-Struktur in Muse CC

Design-Modus

Im Design-Modus wird die Website gestaltet. Der Design-Modus lässt sich unterteilen in die Symbolleiste (rot), die Steuerung (gelb), die Bühne (grün) und die Bedienfelder (blau). Weitere Bedienfelder können über Fenster hinzugefügt werden.

Der Design-Modus von Muse
Der Design-Modus von Muse

Vorschau-Modus

Der Vorschau-Modus zeigt eine Vorschau direkt in Muse an. Verlässlicher sind jedoch die Vorschauoptionen unter »Datei > Seitenvorschau im Browser« und »Datei > Site-Vorschau im Browser«.

Die Bühne in Muse CC

Die Bühne einrichten

Auf der Bühne werden die verschiedenen Elemente gezeichnet und positioniert. Die Bühne hat eine variable Höhe und Breite und kann mit den blauen Hilfslinien in Kopfzeile und Fußzeile, sowie Seitenanfang und Seitenende unterteilt werden. Diese Einstellungen werden üblicherweise in einem Master-Template vorgenommen. Sie können auch numerisch in den Seiteneigenschaften festgelegt werden.

Wenn ein Objekt auf der Bühne angeklickt wurde, stehen links zwei weitere Anfasser zur Verfügung. Diese ermöglichen es das Objekt horizontal zu verschieben. Alle nachfolgenden Elemente werden automatisch mit verschoben.

muse-cc-elemente-vertikal-verschieben

Breakpoints (Haltepunkte)

Oberhalb der Bühne können mit einem Klick auf das Plus-Icons Breakpoints gesetzt werden. Der Breakpoint wird immer da gesetzt, wo der horizontale Schieberegler sich befindet. Wenn ein Muse-Dokument Breakpoints beinhaltet, können Elemente auf der Bühne für jeden Breakpoint separat positioniert und konfiguriert werden.

adobe-muse-breakpoints
Breakpoint-Graph von Adobe Muse

Mit einem Doppelklick auf das Breakpoint-Icon können die Eigenschaften geöffnet werden. Hier können zahlreiche Werte numerisch festgelegt werden. Darüber hinaus kann zwischen variablen und festen Breakpoints gewechselt werden. Feste Breakpoints sind für Scrolling-Effekte notwendig.

muse-cc-breakpoints

Steuerung & Optionsleiste

In der Steuerung stehen Einstellungen zum momentan ausgewählten Element zur Verfügung. Welches Element ausgewählt ist, steht links in der Steuerung. Folgende Einstellungen sind besonders wichtig/häufig benutzt:

Die Symbolleiste

sybolleiste

In der Symbolleiste stehen die verschiedenen Werkzeuge zur Auswahl:

Bedienfelder

Es existieren zahlreiche Bedienfelder um verschiedene Einstellungen vorzunehmen. Folgende Bedienfelder und Einstellungen besonders wichtig/häufig benutzt:

Absatzformate/Aufzählungszeichenformate

Abstand

Ausrichten

Farbfelder

Bibliothek

Ebenen-Bedienfeld

Bildlauf/Scrolling-Effekte

Grafikstile

Inhalt

Status

Transformieren

Umfluss

Widget-Bibliothek

Bilder hinzufügen und bearbeiten

Links und Anker können in der Steuerungsleiste gesetzt werden. Dazu muss der Text markiert werden, anschließend können andere Seiten im Projekt, manuelle Links oder zuvor definierte Anker als Ziel angegeben werden.

Sprungmarken (Anker) können über die Werkzeugleiste gesetzt werden. Anschließend stehen sie als Link-Ziel zur Verfügung.

Icon-Fonts in Adobe Muse nutzen

Icon-Fonts sind sehr hilfreich um die Gestaltung einer Website zu optimieren und gleichzeitig die Optimierung für hochauflösende Displays und Performance nicht zu vernachlässigen.

In Muse CC können Webfont-Iconsätze wie beispielsweise Font Awesome unkompliziert eingerichtet werden:

  1. Icon-Font herunterladen. Das Download-Paket sollte Schriften in den Formaten *.eot, *.ttf, *.woff, *.svg und *.eot enthalten
  2. Der TrueType-Schriftsatz (*.ttf) muss lokal auf dem Computer installiert werden, da Muse CC diese Schrift als lokalen Fallback zwingend benötigt
  3. In Muse CC kann der Webfont im Bereich der Schriftauswahl hinzugefügt werden. Es muss »selbstgehosteter Webfont« ausgewählt werden
  4. Anschließend stehen die Zeichen im Bedienfeld »Glyphen« zur Verfügung.
muse-cc-glyphen-webfont-icons

Suchmaschinenoptimierung und Analyse

Die Semantik von HTML-Elementen ist eine große Schwachstelle in Muse CC. Widgets beinhalten teilweise HTML5-Elemente doch Rechtecke werden immer als <div> gerendert und sind somit für Suchmaschinen nicht sonderlich wertvoll.

Texte können über das Bedienfeld »Text« in Überschriften und Absätze unterteilt werden.

Über »Objekt > HTML einfügen« kann eigenes HTML eingefügt werden. Beispielsweise ein <iframe>.

<title> und URL ergeben sich automatisch aus der Sitemap. In den »Seiteneigenschaften« (Seite > Seiteneigenschaften) können allerdings Meta-Daten sowie Präfixe für den <title> festgelegt werden. An gleicher Stelle kann auch HTML-Code für den <head> der Seite (z.B. Google Analytics) eingeschleust werden.

In Browser-Editing

Wenn in den »Site-Einstellungen« die Synchronisation für Daten aktiviert wurde, können hochgeladene Projekte über die Website inbrowserediting.com inhaltlich verändert werden.

Aktualisierungen der Website sind somit über den Browser möglich. Beim erneutem Öffnen des Projekt in Muse, können die Anpassungen korrigiert oder angewendet werden.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 2 Kommentare

  1. Heike
    schrieb am 20.06.2023 um 14:58 Uhr:

    Hallo Jonas,
    da Du Dich so gut mit Adobe Muse auskennst, ist meine Frage, ob du eine Lösung hast, wie man Typekit von Adobe Muse lösen kann. Ich habe auf meinen Seiten nun Schriften lokal eingebunden und alle Typekit-Schriften entfernt, kann aber keine HTML-Datei mehr schreiben, weil Muse eine Typekit-Verbindung herstellt und die Datei nicht exportiert. Hast Du dafür eine Lösung?
    Viele Grüße, Heike

    Antworten
    • Jonas Hellwig
      schrieb am 20.06.2023 um 16:24 Uhr:

      Hallo Heike, dazu kann ich leider nicht weiterhelfen. Muse wird seit geraumer Zeit nicht mehr weiterentwickelt. Daher bin ich hier nicht mehr im Thema und kann auch nicht mehr nachschauen.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →