Muse Kompakt Kurs – Lektion 1 – Was ist Muse?

Herzlich willkommen bei meinem Adobe  Muse Kurs.

In dieser ersten Lektion möchte ich dir eine Übersicht geben, was Muse ist, was Muse kann und auch was es nicht kann. Du wirst die Vorteile von Muse kennenlernen aber auch sehen wo die Grenzen dieses Tools sind. Ich werde dir ausserdem grob die wichtigsten Alternativen vorstellen, damit du Muse bei den Tools leichter einordnen kannst.

 

Für welches Tool der Umsetzung soll man sich nun entscheiden?

Wenn man sich für die Umsetzung einer Webseite entscheidet dann steht man vor der Wahl vieler verschiedener Tools um das  Vorhaben Wirklichkeit werden zu lassen. Du bist hier zwar in einem Muse Kurs, ich möchte dir aber trotzdem grob die verschiedenen Varianten vorstellen. Damit bekommst du eine besser Übersicht über die Grenzen von Muse und kannst selbst entscheiden, ob Muse auch wirklich für dich und dein aktuelles Projekt geeignet ist.

Wenn du technisch aufgeschlossen bist, dann kannst du eine Website direkt in HTML, CSS und Javascript erstellen. Wenn du weniger mit Technik zu tun haben willst, dann bieten sich diverse online Baukastensysteme zum Webseiten bauen an. Auch der Einsatz von unterschiedlichen Content Management Systemen ist eine Möglichkeit um eine Website umzusetzen. Eines der bekanntesten ist zum Beispiel WordPress, dass  sicher schon viele zumindest gehört haben. Und dann gibt es noch Drag&Drop Tools, die am eigenen Computer laufen, wozu Muse gehört.

 

Alle Freiheiten mit HTML & Co

Auf der einen Seite beeinflusst die Entscheidung das was der Webauftritt später können sollen, auf der anderen Seite entscheidet aber auch dein technisches Wissen welches Tool du am besten einsetzt. Möchte man eine Webseite mit HTML und Co. selbst umsetzen, dann benötigt man doch einiges an Vorwissen. Bei den Programmen hat man eine grosse Auswahl. Um eine Webseite mit HTML selbst umzusetzen genügt im Prinzip schon ein einfacher Texteditor. Es gibt aber auch eine Menge HTML Editoren die einem das Leben etwas einfacher machen.

Adobe hat zum Beispiel das Tool Dreamweaver um HTML-Seiten selbst umsetzen zu können. Die Software bietet vielfältige Möglichkeiten um relativ rasch zu einem Ergebnis zu kommen.  Mit einem Standard Framework für Response Seiten (z.B. Bootstrap) lassen sich damit auch leicht mobile Seiten erstellen.

Trotz der einfachen Möglichkeit arbeitet man im Hintergrund immer noch mit HTML, CSS und Javascript. Deshalb hat man auch alle technischen Möglichkeiten bei der Umsetzung.

Mein neuer Favorit ist übrigens das Programm Pinegrow. Dieses Tool bietet in der kommenden Version 3 sogar einiges mehr an Funktionen als Dreamweaver an und ist sogar um einiges günstiger.

 

Was aber ist jetzt Muse?

Obwohl diese Tools relativ einfach zu verwenden sind, benötigt man immer noch einiges an Einarbeitungszeit und Bereitschaft mit der Technik umzugehen. Ganz das Gegenteil zu Adobe Dreamweaver oder Pinegrow ist Adobe Muse. Hier hat man nichts mit den Sprachen HTML, CSS und Javascript zu tun. Obwohl im Hintergrund ganz normale HTML-Seiten erstellt werden kann der User mit Adobe Muse die Seiten einfach mit Drag and Drop erstellen.

Die Zielgruppe von Adobe sind eindeutig Grafikdesigner, die zum Beispiel schon mit  dem Adobe Tool InDesign arbeiten. Diese werden feststellen dass die Bedienung beider Programme sehr ähnlich ist. Der große Vorteil den Adobe Muse hat, ist aber auch gleichzeitig sein Nachteil. Denn bei Muse fehlt der direkte Zugriff auf die darunter liegenden Sprachen. Möchte man also Dinge einfügen die Muse nicht direkt anbietet dann stößt man als nicht Techniker bei diesem Programm schnell an die Grenzen. Einen Großteil der Anforderungen kann man mit Muse allerdings problemlos umsetzen.

Sollte man Dinge benötigen die nicht direkt im Programm integriert sind dann bietet das Programm noch die Möglichkeit, mit sogenannten Widgets zu arbeiten. Einige davon sind bereits integriert. Wenn man mit den bestehenden nicht auskommt, dann gibt es noch die Möglichkeit neue Widgets hinzuzufügen. Diese gibt es im Internet entweder kostenlos oder zum Teil gegen geringes Entgelt. Verschiedene Anbieter wie zum Beispiel Muse Themes bieten die Möglichkeit für einen Jahresbeitrag auf das komplette Widget Portfolio zuzugreifen. Bei Muse Themes bekommt man zusätzlich auch noch einige Vorlagenseiten um die Umsetzung noch rascher durchführen zu können. Diese Quellen für Erweiterungen werde ich dir in diesem Kurs noch vorstellen.

 

Sind Online Baukasten Systeme eine Alternative zu Muse?

Ähnlich wie bei Adobe Muse, kannst du mit Online Webbaukasten System, wie zum Beispiel Jimdo oder Wix Webseiten ganz einfach ohne viel technisches Wissen zusammenbauen. Der wesentliche Unterschied zu Muse ist, dass du die Webseiten online, also im Web Browser erstellst. Das bedeutet, dass du von jedem Computer, der einen aktuellen Browser installiert hat, deine Website erstellen und verändern kannst. Die Abrechnung erfolgt bei diesen Tools mit einer monatlichen Gebühr, die aber auch gleichzeitig den Webspace beinhaltet. Damit ist auch schon ein kleiner Nachteil verbunden, denn du kannst dir nicht aussuchen, wo deine Seiten liegen, sie müssen immer bei diesem Anbieter liegen. Will man wechseln, dann muss man in der Regel die Webseiten komplett neu erstellen. Dafür hat man aber ein recht umfangreiches Paket an Vorlagen dabei um rasch eine Website real werden zu lassen. Vom Funktionsumfang kommen diese Online Baukasten Systeme bei weitem nicht an Muse heran. Auch das Thema responsive Design, ist bei diesen Baukasten Systemen im Gegensatz zu Muse nur sehr einfach umgesetzt. Willst du also Drag & Drop mit vielen Freiheiten und Möglichkeiten, dann bist du bei Muse besser aufgehoben.

 

Und was ist mit einem CMS?

Wir haben also zwei Gegensätze visuelle HTML Editoren wie Dreamweaver mit der Möglichkeit direkt HTML Code bearbeiten zu können und Muse mit der Möglichkeit per Drag and Drop seine Seiten zusammenstellen zu können. Der Vollständigkeit halber möchte ich noch auf das Thema CMS eingehen.

Der große Unterschied zu den beiden vorhin genannten Varianten ist, dass man bei einem CMS eine aufwändigere Konfiguration des Webservers benötigt. Bei einem CMS muss der Webserver eine Serversprache wie zum Beispiel PHP beherrschen und zusätzlich ist eine Datenbank für die Ablage der Daten notwendig. Je nach verwendeten CMS ist daher eine höhere Anforderung an die Leistung des Webservers erforderlich. Da CMS meist recht komplexe Softwareprodukte sind haben diese auch die Gefahr dass durch Fehler in der Software andere Benutzer auf das System zugreifen können die das nicht sollen. Dadurch ist ein solches System für Hacker Angriffe immer eine größere Gefahr als statische HTML-Seiten.

 

Die Entscheidung liegt bei Dir

Hier noch eine kurze Übersicht der wichtigsten Tools für statische und dynamischen Webseiten:

 

Tools für statische Webseiten

Tools für statische Webseiten

Tools für dynamische Webseiten

Tools für dynamische Webseiten

Das war jetzt einmal eine grobe Übersicht, der verschiedenen Möglichkeiten. Damit hast du jetzt eine grobe Übersicht, welche Möglichkeiten es gibt, um seine Webseiten umzusetzen. Die Entscheidung, welche der Varianten man nehmen soll, hängt auf der einen Seite vom Projekt ab und auf der anderen Seite wie sehr du dich mit den technischen Details der Website Erstellung beschäftigen willst.

Mit Muse hast du mit Sicherheit die Möglichkeit sehr rasch ein Projekt umzusetzen ohne dich vorher Tage lang einarbeiten zu müssen. Dieser Muse Kompakt Kurs wird dir die notwendigen Funktionen vorstellen, mit denen du einen Grossteil deiner Projekte umsetzen kannst.

 

Muse im Detail

Steigen wir jetzt noch ein wenig tiefer in die Möglichkeiten und Grenzen von Muse ein.

Zuerst einmal die wesentlichen Eigenschaften von Muse

 

Websites erstellen ohne Code

Adobe Muse ist Web Design ohne die darunter liegenden Sprachen, wie HTML, CSS und Java Script lernen zu müssen. Die Zielgruppe sind in erster Linie Grafik Designer, die schon mit anderen Tools von Adobe, wie InDesign gearbeitet haben. InDesign selbst ist das Tool um Inhalte zu erstellen, die für den Druck gedacht sind und Muse im Gegensatz dazu um Online Inhalte zu erstellen. Muse ist, wenn man es so ausdrücken möchte InDesign für Webseiten. Auch von der Bedienung lehnt sich Muse sehr stark an InDesign an.

Die Zielgruppe von Muse, sind aber nicht nur Grafik Designer, sondern auch „normale“ Endanwender, die eben ohne Technik ansprechende Websites erstellen wollen.

 

Ideal für Prototypen

Durch die einfache Drag & Drop Bedienung lassen sich die Seiten in kurzer Zeit umsetzen und verändern. Das ist auch ein Grund warum manche Web Designer und Web Entwickler – da zähle ich mich auch dazu – Muse für Web Prototypen einsetzen. Selbst, wenn man die Seiten dann selbst mittles HTML umsetzt, kann man für Kunden oder zur eigenen Vorstellung rasch eine funktionierende Website erstellen.

 

Vor allem für kleinere Websites

Geeignet ist Muse vor allem für kleinere Websites. Ich persönlich würde Muse nicht für sehr grosse Projekte verwenden. Was für mich vor allem gegen grosse Projekte spricht, ist das Problem, dass es schwer ist als Team gemeinsam an einem Muse Projekt zu arbeiten. Dazu aber etwas später mehr.

 

Tolles Planungstool

Muse ist auch sehr gut für die Planung, also die Erstellung der Struktur einer Website geeignet. In der Planungsansicht, kann man sich in einer Baumstruktur seinen kompletten Webauftritt zusammenstellen und diesen sehr leicht durch herumschieben der Seiten anpassen.

Wenn man Menüs von Muse automatisch erzeugen lässt, dann wird diese Planung als Basis verwendet.

Muse Planungsansicht

Muse Planungsansicht

Einfache Wiederverwendung

Durch sogenannte Musterseiten, lassen sich Inhalte, die auf verschiedenen Seiten immer wieder vorkommen, sehr leicht erstellen. Damit muss zum Beispiel der Kopf einer Seite, der das Logo und das Menü erhält, nicht immer neu auf jeder Seite erstellt werden. Noch sinnvoller sind die Musterseiten bei Änderungen. Einmal auf der Musterseite durchgeführt, sind die Änderungen sofort auf allen Seiten, wo diese Musterseite verwendet wird aktiv. Man kann mehrere Musterseiten erstellen und diese dann den Seiten zuweisen, wo sie verwendet werden sollen. Musterseiten selbst können auch wieder Musterseiten als Basis haben, womit eine Verschachtelung dieser Vorlagen möglich ist.

 

Interaktive Elemente / Parallax Scrolling

Eine Funktion, die bei Drag & Drop Tools sehr selten zu finden ist, sind die sogenannten parallax Scrolling Effekte. Das sind jene Effekte auf einer Website, wo sich Inhalte beim Scrollen unterschiedlich schnell bewegen und damit die Seiteninhalte 3D erscheinen lassen.

Auch zu diesen Effekten – Adobe nennt diese übrigens Bildlaufeffekt – gehören Inhalte, die sich beim Scrollen ein- oder ausblenden bzw. beim Scrollen bewegen.

Diese Effekte können, wenn man sie sparsam und sinnvoll einsetzt eine Webseite sehr schön aufwerten.

 

Visuelles responsive Design

Lange Zeit, war einer der größten Kritikpunkte, dass Adobe Muse kein echtes responsive Design konnte. Es gab zwar die Möglichkeit für Desktop, Tablet und Mobile eigene Seiten zu erstellen, die dann aber auch getrennt zu bearbeiten waren. Man hat also wirklich 3 komplette Websites erstellt. Wenn man Inhalte verändern wollte dann musste man das in allen 3 Layouts machen. Zwar hat Adobe später einigen Elementen die Funktion gegeben, dass die Inhalte sich in allen Layouts anpassen, aber so echt optimal war das nicht.

Jetzt unterstützt Muse „echtes“ responsive Design und geht sogar soweit, dass man nicht, wie bei der Umsetzung mit HTML, an gewisse Einschränkungen, wie die Grid Layouts gebunden ist, sondern bei jedem Haltepunkt, die Inhalte frei anordnen kann. Adobe nannte das auf einem Vortrag übrigens visuell responsive Design. Wählt man beim Projekt „variable Breite“ aus, dann hat man auch ein echtes flüssiges Layout. Allerdings dann mit der Einschränkung, dass die vorhin genannten Bildlaufeffekte nicht funktionieren. Mehr zum Thema responsive Design gibt es dann in einer eigenen Lektion.

 

Ideale Zusammenarbeit mit anderen Adobe Produkten

Wenn man das komplette Abo von Adobe inkl. Photoshop hat, dann kann man auch direkt ein Photoshop File in Muse einbinden. Dieses wird dann auf der Website in ein webtaugliches Bild umgewandelt. Man kann allerdings in Muse mit der rechten Maustaste auf das Bild klicken und es als in Photoshop weiter bearbeiten. Auch die Zusammenarbeit mit Adobe Comp – dem mobilen Wireframe / Mockup Tool – funktioniert genial. Einfach das Wireframe nach Muse übertragen (über die Adobe Cloud) und schon hat man ein bearbeitbares Muse Projekt. Auch diese Funktionen zeige ich euch noch in einer späteren Lektion

 

Erweiterbar mit Widgets

Was es in Muse standardmässig nicht gibt, kann man meistens durch hinzufügen von externen Widgets ergänzen. Wie bereits erwähnt, gibt es eine Reihe von Quellen im Internet, wo man solche Widgets findet. Wenn man sich in die Technik einarbeitet, dann kann man Muse Widgets sogar selbst entwickeln.

 

Man muss mit den Grenzen leben

Einer der Nachteile von Muse ist mit Sicherheit, dass die Grenzen, wenn vorhanden nur schwer überschritten werden können. Sind die Funktionen nicht in Muse integriert und auch nicht als externes Widget vorhanden, dann wird es schwer die Funktion oder Inhalte einzufügen. Muse exportiet normale HTML, CSS und JavaScript Dateien. Diese könnte man auch mit einem beliebigen externen Editor anpassen. Davor rate ich aber auf jeden Fall ab. Denn wenn man das tut, dann bekommt man die Änderungen nicht mehr zurück nach Muse und kann das Projekt dann nicht mehr in Muse erweitern oder ändern.

 

Kein echtes CMS

Adobe hat eine sehr intelligente Variante gefunden, damit User auch ohne Muse zu besitzen, die Inhalte anpassen können. Das funktioniert mit der Inline Editing Funktion von Muse. Dabei können Content, wie Texte und Bilder relativ leicht über den Browser ausgetauscht werden. Das schöne daran, ist, dass die Änderungen wieder in Muse zurückgespielt werden können. Die Funktionen sind allerdings auf den Austausch von Inhalten beschränkt. Es können damit keine neuen Inhalte hinzugefügt werden. In den meisten Fällen reicht diese Funktion allerdings aus.

 

Nicht für Teamarbeit

Ich habe vorhin schon erwähnt, dass es mit Muse nicht wirklich möglich ist, als Team an einem Projekt zu arbeiten. Zwar können Grafiker Bild Inhalte unabhängig aufbereiten, aber an den Webseiten selbst kann im Prinzip nur eine Person gleichzeitig arbeiten. Der Grund dafür ist, dass Muse nur eine einzige Datei benutzt, diese hat die Endung „.muse“. Da es aber eben nur diese eine Datei gibt und nicht wie bei „echten“ HTML Projekten eine Reihe von Ordnern und Dateien ist eben diese Einschränkung vorhanden. Auf der anderen Seite vereinfacht diese eine Datei auch die Organisation auf der eigenen Festplatte und die Weitergabe, denn es gibt nur diese eine Datei und die beinhaltet alle Inhalte inkl. der verwendeten Bilder.

 

Änderungen im Code nicht möglich (sinnvoll)

Ich habe es bereits bei den Grenzen angesprochen, dass es bei Muse zwar möglich ist, den entstehenden HTML Code nachzubearbeiten, aber sinnvoll ist es nicht, da diese Änderungen nicht mehr zurück nach Muse kommen können und daher verloren gehen, wenn man mittels Muse Anpassungen macht und diese wieder hochlädt.

 

Probleme mit Barrierefreiheit

Ein letzter Punkt, den ich noch erwähnen möchte, ist die Barrierefreiheit. Vieles liegt natürlich am Designer, wie etwa das alternative Bezeichnen von Bildern und das verwenden von Überschriften. Ein wesentlicher Punkt ist aber zum Beispiel auch die Reihenfolge der Textelemente. Denn für blinde User werden die Texte so vorgelesen, wie sie im HTML Code vorkommen. Ist die Reihenfolge verkehrt, dann werden die Inhalte durcheinander vorgelesen. Genau das ist ein Problem bei Muse, den diese Reihenfolge kann nicht beeinflusst werden und war bei mir schon bei einigen Projekten falsch.

Adobe behauptet, dass Muse laut amerikanischen Richtlinien alle Auflagen erfüllt und dass dies kein Fehler sei. Das mag sein und vielleicht ist die Reihenfolge in den USA egal. Bei uns in Europa, ist die Reihenfolge ein wichtiger Punkt zur Erfüllung der Richtlinien. Wenn man also Webseiten machen möchte, die Barrierefreiheit unterstützen müssen, dann hat man mit Muse schlechte Karten.

So das war es einmal mit den wichtigsten Eigenschaften, Vor- und Nachteilen von Muse.

 

Zusammenfassung

Wenn du dich mit der Umsetzung von Webseiten beschäftigen willst und technisch noch wenig bis keine Ahnung hast, dann ist Muse sicher ein guter Einstieg. Du hast mit diesem Tool sehr viele Freiheiten und kannst diese rasch Realität werden lassen. Aber auch, wenn du selbst Webseiten programmieren willst, kann Muse als Prototyping Tool eine gute Wahl sein.

Wenn Du die Grenzen kennst, diese für dich kein Problem sind und Barrierefreiheit keine Pflicht ist, dann ist Muse sicher eine gute Wahl zur Erstellung von Websites.

 

Wie geht es weiter im Kurs

In den nächsten Lektionen geht es dann praktischer weiter. Wir sehen und Schritt für Schritt die Funktionen von Muse an, die für die Umsetzung eines Web Projektes benötigt werden. Du bekommst damit eine Übersicht, welche Funktionen es gibt und wofür man diese einsetzen kann. Wir werden dabei wirklich mit der Basis beginnen und uns ansehen, wie man ein Projekt richtig startet, plant , dieses dann umsetzt, testet und am Schluss auch veröffentlicht.

Ich freue mich schon, dich bei der nächsten Lektion zu sehen.

Bis dahin – Liebe Grüße
Andreas – Dein WebDesign-Coach

Comments

  1. Hallo Andreas,
    da ich schon seit geraumer Zeit mit MUSE arbeite, bin ich auf deinen Kurs gespannt, vielleicht lerne ich ja noch etwas dazu.
    Als Grafikdesigner / Künstler, finde ich MUSE sehr gut, weil ich großen WERT auf das Design lege, sprich Farbgestalung, Typographie etc. pp. Responsives Design ist ja nun auch mit MUSE machbar und erzielt sehr gute Ergebnisse.

    Hinzu kommt, das ich keine Templates mag, wie WordPress o.ä. diese Templates, sehen unterm Strich alle irgendwie gleich steril aus … s.h. das lebt NICHT.

    Ich habe WordPress, Jimdo etc. ausprobiert, und fand das alles recht ( un ) kompliziert und das man die Seiten nur Online bearbeiten kann… nervt ebenfalls. Na ja und CMS, ist auch nur bedingt notwendig, kommt auf das Unternehmen an.

    Und kleine Änderungen wie ein „News“ text etc. lassen sich ja nun ebenfalls mit MUSE im Browser ändern.

    Von Paralax halte ich auch nicht sehr viel, ich finde dies sollte sparsam eingesetzt werden, ist ebenfall ziemlich nervig, wenn sich alles auf einer Seite andauernd verschiebt … na und in MUSE, ist dies ( responsive/paralax ) auch wieder möglich, indem man die Haltepunkte ( mehrere ) fixiert.
    Und größere Webseiten sind ebenfalls machbar, siehe Bespiel : http://www.thomasmuff.ch/index.html

    Für mich zählt letztendlich, das eine Website – schnell lädt ( Handy ), gut aussieht und übersichtlich ist ( weniger ist mehr ). Ja und mit den „Widgets“ lassen sich auch tolle Effekte erzielen plus sebstgehostete WEB Schriftarten, bieten ebenfalls ein hohes Gestaltungsmerkmal.

    Mein Fazit : Think mobil and Design … take MUSE ! 😉

    Liebe Grüße

    Ferdinand

    • Hallo Ferdinand

      ich kann dir inhaltlich nur voll zustimmen.

      Ich bin gespannt, ob ich dir in diesem Kurs noch einiges Neues erzählen kann. Mich würde auf jeden Fall deine Meinung zu den Inhalten interessieren.

      Falls du in Facebook bis, würde es mich freuen, dich auch in der Gruppe begrüßen zu können.

      Liebe Grüße und noch viel Spass bei den Kurslektionen
      Andreas

  2. Hallo Andreas,

    ich bin 53 Jahre und da ich kein Facebook habe, schreibe ich Dir hier mal meine Anmerkungen.
    Zur Info, ich bin ein privater Anwender und habe ein paar einfache Homepages erstellt. Ich habe Grundkenntnisse in HTML und habe bisher Internet Designer, Hompeagebaukästen und NetObjects Fusion in verschiedenen Versionen benutzt.

    In diesem ersten Teil betonst Du richtigerweise, dass man kein HTML können und verstehen muss.
    Für den erfahrenen Nutzer wäre aber wichtig, hier auch darauf hinzuweisen, dass man in Muse unter „Objekt/HTML einfügen…“ auch eigenen Codezeilen einbauen kann.

    Gruß
    Thomas

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.