Photoshop ist dir ein Begriff? «Bestimmt!» Jetzt stell dir mal vor, du könntest deine Webseite nach dem Prinzip eines Design-Tools zusammenstellen, indem du einfache Formen erstellst und per Drag and Drop Bilder platzierst. Genau das kann nämlich das Programm von Adobe namens Muse und ein paar verwandte Anbietern, die du in dieser Liste findest.
Die meisten sind, sowie Muse auch, kostenpflichtig. Wenn man allerdings bedenkt, dass die Umsetzung einer professionellen Webseite schnell mal gleich viel kostet wie ein Kleinwagen, sind die Abokosten der Tools im Gegensatz dazu Peanuts.
Eine intensive Auseinandersetzung mit dem Programm und seinen Anwendungsmöglichkeiten ermöglicht dir, mit wenig Aufwand eine coole Webseite auf die Beine zu stellen. Was dabei herauskommen kann, siehst du hier:
Bei der Umsetzung auf gute Videotutorials zurückzugreifen ist für viele unverzichtbar. Derzeit befindet sich, bis auf die Tutorials von Adobe, allerdings nur wenig hilfreicher Content zu Muse auf dem Web. Die nachstehenden Tutorials dienen dazu, dieser Schwachstelle Abhilfe zu schaffen und sollen dir als kompakter und kompetenter Guide zur Seite stehen, beim Kennenlernen von Muse und seinen Fertigkeiten.
LOSLEGEN
- Adobe Muse starten
- Auf den Button «Neu» klicken (oder Datei, «neue Site»)
- Variable Breite auswählen
- Anzahl Spalten eingeben (dient dem Layout)
THEMES/TEMPLATE
Muse bietet eine Vielzahl an Themes, jedoch ist nur eines davon kostenlos erhältlich. Sollte kein Treffer für dich dabei sein, kannst du jederzeit die Themes verschiedener Autoren auf Google durchstöbern. Besonders empfehlenswert ist der Entwickler Qooquee, der auch viele Widgets gratis zur Verfügung stellt – aber dazu später mehr.
- Adobe Muse Seite besuchen
- Durchstöbern und auswählen
- Downloaden
- Ausführen der Datei im heruntergeladenen Zip mit Doppelklick auf das Muse-Dokument
- Das Theme wird automatisch als neues Dokument in Muse geöffnet
WIDGETS
Genau gleich gehst du auch vor, wenn du ein Widget installieren möchtest, was im Grunde genommen das Gleiche ist wie ein Plugin. Falls du nach einem konkreten Widget suchst, solltest du für die Suche genügend Zeit einplanen. Nur selten findest du nämlich auf Anhieb genau das, was du suchst. Auch hier steigt Qooqee als einer der Sieger unter den Anbietern aus dem Ring.
- Im Web nach Widgets suchen
- Widget downloaden
- Installieren mit Doppelklick auf das Dokument
- Das Widget befindet sich nun auf der rechten Seite in der Bibliothek
- Das Widget an den gewünschten Ort auf deiner Site ziehen
MUSTERSEITE MIT MENÜ ERSTELLEN
Die Menüelemente werden anhand der festgelegten Sites erstellt. Das heisst, beim Erstellen des Widget-Menüs erhältst du so viele Menüelemente wie du Sites erstellt hast und diese haben denselben Namen wie die Sites. Das Menü platzierst du idealerweise auf der Musterseite, damit es sich auf allen Sites wiederholt. Alles was du auf der Musterseite vorgibst, wird automatisch auf die Sites übertragen – vorausgesetzt du wählst die Musterseite nicht ab.
- Gewünschte Anzahl Seiten bereitstellen
- Seiten benennen
- Auf der Musterseite über die Widget-Bibliothek das Menü auf die Site ziehen
- Einstellungen vornehmen für deine Menüelemente
- Wählst du die Checkbox «Gemeinsam bearbeiten» werden alle Elemente gleichzeitig bearbeitet
- Du kannst jederzeit zurück zum Einstellungsfenster. Wähle dafür mit einem Klick das Widget aus, so dass oben rechts der kleine blaue Button erscheint, auf den du wiederum erneut klickst.
- Falls Du jedes Menüelement einzeln bearbeiten möchtest, gibst du in dem Einstellungsfenster bei Menütyp «manuell» an. Wenn du dich für diesen Weg entscheidest, musst du anschliessend die Elemente manuell mit den Sites verlinken. Wie das geht, sieht du hier:
MENÜELEMENTE BEARBEITEN
In Adobe Muse kannst du ganz einfach Menüelemente erstellen, ihre Grösse, Form und Farbe ändern, die Schrift verändern und typografische Einstellungen wie Metrik und Kerning vornehmen, wie du es vielleicht bereits aus Photoshop & Co kennst.
Eine multiple Auswahl erhältst du, indem du auf die gewünschten Elemente klickst und dabei die Shift-Taste gedrückt hältst.
Tipp: Anders als in Photoshop verzerrst du die Elemente in Muse, indem du die Tastekombination Shift & Alt (Windows) beim Verändern der Menüelemente anwendest. Das heisst, proportional skalieren passiert ganz eigenständig ohne das Betätigen einer Tastenkombination.
Mit Schein, Schatten und abgeflachten Kanten hast du die Möglichkeit, den Elementen einen 2D-Look zu verleihen. Es gilt damit eher zurückhaltend zu sein, denn es wirkt schnell unästhetisch und übertrieben. Besser du arbeitest mit den Status, die im nächsten Schritt beschrieben werden.
Das beste Ergebnis für einen tollen Effekt erzielst du mit der abgeflachten Kante. Setze dafür den Abstand auf 2 oder kleiner herunter.
STATUS FÜR HOVER & ONCLICK
Du kannst den User beim Navigieren unterstützen, indem du den Elementen je nach Status unterschiedliche Farben zuordnest. Am besten gestaltest du den Hover und den Onclick etwas dunkler oder heller, behältst aber den zuvor vergebenen Farbton bei.
TEXTFELDER EINBAUEN
Die Textfelder lassen sich exakt gleich anwenden wie in Photoshop oder Illustrator. Sie verhalten sich standardmässig responsive – was super ist – denn so musst du dich nicht mit dem Unterschied zwischen EM und REM rumschlagen. Das sagt dir nichts? Kein Problem, das klärt Muse ganz selbständig mit sich allein.
Tipp: Achte bei der Auswahl der Schrift unbedingt darauf, dass du eine Webfont verwendest. Weitere Webfonts kannst du entweder über den Webkit von Adobe hinzufügen oder sie im Web herunterladen und installieren. Beachte: Nicht alle Schriften, die sich als webtauglich ausgeben, was sie versprechen!
RESPONSIVENESS
Responsivness nimmt in der Welt der Programmierer und Designer einen immer wichtigeren Stellenwert ein. Responsive bedeutet, dass sich die Elemente beim Skalieren an die jeweilige Bildschirmgrösse anpassen. Die User sehen sich den Content auf verschiedenen Endgeräten an, wobei vor allem die Nutzung von mobilen Geräten steigt und steigt. Dies bedeutet, dass die Webentwickler/innen verschiedene Ansätze für Design und Inhaltselemente prüfen und in die Konzeption miteinbeziehen müssen, was nicht immer einfach ist. Adobe Muse hat dafür eine sehr anwenderfreundliche und attraktive Lösung.
Ganz am Anfang haben wir bereits die Grundpfeiler für ein responsive Design gelegt, indem wir der Site eine variable Breite zuweisen. Die einzelnen Elemente müssen allerdings erneut als «variabel in Breite und Höhe» (oder falls gewünscht nur in der Breite) festgelegt werden.
- Element auswählen
- Rechtsklick
- Skalieren, «Responsive Breite und Höhe» oder nur «Responsive Breite» auswählen
Ein weitere Möglichkeit besteht darin, ein Elemente auf der Site zu fixieren. Diese Einstellung findest du ebenfalls unter dem Rechtsklick, «Auf Seite verankern», dann «flexibel, mittig, links oder rechts» auswählen. Sie macht dann Sinn, wenn sich die Position eines Elementes, zum Beispiel beim Drehen eines Endgerätes, nicht verändern soll.
Wie du prüfen kannst, ob sich deine Elemente wirklich responsive verhalten, erfährst du im nächsten Schritt.
VORSCHAU IM BROWSER
Du kannst deine Arbeit jederzeit als Vorschau im Browser anschauen. Damit du auch die Verlinkung der verschiedenen Sites testen kannst, solltest du im Programm Muse zwingend alle Sites geöffnet haben.
- Datei, «Site-Vorschau im Browser»
Und das kann unsere Site bereits nach geringem Aufwand:
TEXT ANIMIEREN
Wenn dir die unbewegte Schrift zu langweilig ist, findest du eine einfache Lösung in verschiedenen Animations-Widgets. Diese lassen sich ganz einfach auf deinen Text anwenden, entweder indem du das Widget auf deinen Text ziehst oder den Text manuell in das Einstellungsfenster des Widgets eingibst. Die wenigsten Widget-Entwickler bieten dir die Möglichkeit die Animation individuell anzupassen.
EXPORT
Die HTML-, CSS- und JS-Dateien lassen sich einfach exportieren und auf unterschiedliche Weise auf den Server laden. Adobe gibt dafür den hosteigenen Server business-catalyst vor, der deine Site allerdings nur zwei Wochen gratis hostet. Wer deine Webseite in Zukunft hosten wird, entscheidest du selbst. Für den Export und den Upload auf den Server gehst du wie folgt vor:
- Datei, «Als HTML exportieren…»
- Deine URL eingeben
- Den lokalen Pfad (den gewünschten Speicherort) für den Export angeben
- Upload mittels Filezilla oder ähnlichem Servermanager
ZUKUNFTSMUSIK
Websites gewinnen in einer zunehmend digitalisierten Welt an Bedeutung. Sie werden zum Dreh- und Angelpunkt eines jeden Unternehmens. Eine Website muss nicht nur benutzerfreundlich sein, sondern auch Spass machen. Spass bedeutet nicht, dass sich viele lustige Sätze und Bilder verstecken, sondern dass sich der Besucher von einer freundlichen Professionalität empfangen und somit wohl fühlt. Nur beherrschen nicht alle die Kunst des Programmierens. So sehen sich viele gezwungen den Auftrag extern an eine darauf spezialisierte Unternehmung zu geben und müssen dafür oftmals viel Geld in die Hand nehmen.
Muse bietet vor allem designaffinen Personen die Möglichkeit, ihre Webseite eigenständig zu gestalten und auszuführen ohne dabei tief in die Tasche greifen zu müssen. «Wenn das mal nicht nach Zukunft riecht!»
Muse hält aber noch nicht in allen Belangen einen tadellosen Lösungsansatz bereit. Dass sich damit schnell und einfach das Grundgerüst für eine Webseite bauen oder ein einfacher Onepager herstellen lässt, das haben wir im Beitrag mitverfolgen dürfen. In Sachen Responsiveness und Interaktivität kann Muse noch nicht von sich behaupten, die ersetzende Kraft für eine vollumfängliche Programmierlösung zu sein. Aber wie heisst es so schön: «Niemand ist perfekt!». Geben wir Muse und den Programmen also die Zeit, die sie brauchen, bis auch sie die letzten Kinderkrankheiten beseitigt haben. Ein Freund in der Not, auf den du jederzeit zurückgreifen kannst, wenn es heisst «Hilfe, wir brauchen eine Webseite!», ist Muse auf jeden Fall.
(ae)