Erstellen von Wireframes für Websites in Adobe Muse

Suchen

Zuletzt aktualisiert am

Erfahren Sie, wie Sie in Adobe Muse Prototypen oder Wireframes für Ihre Websites erstellen können.

Hinweis:

Adobe Muse wird nicht mehr um neue Funktionen ergänzt und der Support wird am 26. März 2020 eingestellt. Detaillierte Informationen und Unterstützung erhalten Sie bei den Häufig gestellten Fragen (FAQ) zum Ende der Produktlebensdauer von Adobe Muse.

Adobe Muse ist nicht nur sehr intuitiv zu bedienen, es hilft Ihnen auch dabei, mühelos Prototypen für Webprojekte zu erstellen, die Sie online anzeigen können. Dadurch, dass Sie Test-Sites erstellen können, können Sie die Links Ihren potenziellen Kunden zur Verfügung stellen, damit sie die Prototypen in dem Browser online überprüfen können, in dem sie auch die endgültige Version der Site anzeigen werden. Auf diese Weise erhalten Kunden eine Vorstellung davon, wie die fertige Site aussehen wird.

fig01 — Wireframes umfassen Platzhalter, um die Position von Seitenelementen anzugeben.

Lesen Sie weiter, um zu erfahren, wie Sie Wireframes entwerfen, eine strukturierte Planungsansicht aufbauen und Platzhalterelemente für Ihre Site erstellen. Die Platzhalterelemente können Sie durch echte Seitenelemente ersetzen, nachdem Sie den Inhalt finalisiert haben.

Arbeiten mit Wireframes

Die Wireframes zeigen die Seitenlayouts für die Site und ermöglichen es Ihnen, die Links anzuklicken, um den „Verlauf“ der Site zu prüfen. Gehen Sie nach der Arbeit mit den Wireframes zur fertigen Live-Site, um die Wireframes mit der Endversion zu vergleichen. Beachten Sie, wie die Platzhalterelemente in den Wireframes durch die Grafiken der endgültigen Site-Version ersetzt wurden.

Wenn Sie sehen möchten, wie die Wireframes erstellt wurden, laden Sie die Beispieldateien herunter (ZIP, 4,5 MB). Entpacken Sie die ZIP-Datei, öffnen Sie den Ordner und gehen Sie zur Datei „KevinsKoffeeKartWire.muse“. Doppelklicken Sie darauf, um die Wireframes in Adobe Muse zu öffnen. Verwenden Sie die Planungsansicht, um herauszufinden, wie die Seiten in verschiedenen Stufen angeordnet werden, woraus sich die Sitemap ergibt. Doppelklicken Sie auf die einzelnen Seiten, um sie in der Designansicht zu öffnen, und herauszufinden, wie sie entwickelt wurden.

Adobe Muse bietet viele Funktionen, die Ihnen bei der Erstellung von Wireframes helfen:

Die Entwurfsansicht enthält ein optionales Spaltenraster, um Layoutelemente auszurichten.
Flexible Zeichenwerkzeuge erleichtern es Ihnen, die Platzhalterformen für Grafiken zu erstellen.
Das Elementebedienfeld enthält Funktionen, mit denen Sie die Platzhalterbilder aktualisieren können.
Adobe Muse optimiert, segmentiert und exportiert alle Bilddateien, wenn Sie eine Site veröffentlichen oder exportieren.
Textüberschriften und Absatzformate helfen Ihnen dabei, mühelos strukturierte Seiten zu erstellen und Textformatierungen zu ändern.
Mit dem Befehl „Platzieren“ können Sie das Logo Ihres Kunden direkt aus dem Browser heraus speichern und dann in Ihrer Adobe Muse-Datei platzieren.

fig02 — Wählen Sie „Datei“> „Platzieren“, um schnell Marken-Elemente in Wireframes einzufügen.

Entwickeln von Wireframes zur Genehmigung durch Kunden

Nach einer anfänglichen Besprechung mit Ihrem Kunden können Sie ein Wireframe der Site erstellen, um die Positionierung und Funktionalität von Seitenelementen aufzuzeigen, ohne die endgültigen Grafiken und Textformatierungen zu verwenden. Das Ziel des Wireframes ist es, das Grundgerüst jeder Seite widerzuspiegeln und somit eine Simulation der Webdarstellung ohne Ablenkung durch Farben oder visuelle Inhalte zu erstellen. Als Platzhalter werden Rechtecke verwendet, um die Position von Bildern zu markieren; mit Handschriften bzw. generischen Schriftarten werden die Bereiche einer Seite angezeigt, in denen Textinhalte stehen werden.

Wireframes bieten die folgenden Vorteile:

Sie ermöglichen es Kunden, sich auf die Struktur einer Site zu konzentrieren und die Seitenlayouts zu verstehen.
Sie bieten ein interaktives Live-Erlebnis, sodass es Kunden leichter fällt, die Sites zu überprüfen und zu genehmigen.
Sie dienen als Kommunikationsmittel, um das Design und die Funktionalität der Site zu verdeutlichen.

Adobe Muse ist nicht nur ein Webdesign-Werkzeug, sondern auch ideal zum Erstellen von Prototypen für Projekte. Sie können unmittelbar eine Live-Test-URL erstellen und diese per E-Mail an Ihre Kunden senden, um den Genehmigungsprozess zu vereinfachen. Dies ist jedoch nicht der einzige Vorteil vom Erstellen von Wireframes-Modellen mit Adobe Muse.

Wireframes in Adobe Muse bieten eine bessere Produktivität als dies mit anderen Designwerkzeugen möglich ist, da die produktübergreifenden Bildbearbeitungsmöglichkeiten und bearbeitbaren Absatzformate es den Webdesignern leicht machen, die .muse-Datei schnell zu aktualisieren und die genehmigten Wireframes in die endgültige Live-Version zu konvertieren. Anstatt nach Genehmigung des Kunden die Wireframes zu entsorgen und das Projekt von Grund auf neu zu gestalten, können Sie direkt damit beginnen, die genehmigten Wireframes zu aktualisieren, indem Sie den eigentlichen Webinhalt hinzufügen und die endgültige Version erstellen. Währenddessen können Sie eine beliebige Anzahl an Test-Sites veröffentlichen, um die verschiedenen Fassungen zu dokumentieren, und Ihren Kunden die Links zu den verschiedenen Versionen des Site-Designs zur Verfügung stellen.

Mit diesem grundlegenden Workflow können Sie Sites mit Wireframes erstellen:

Sie erstellen die Wireframes und veröffentlichen eine kostenlose Testversion.
Der Kunde prüft die Live-Site, indem er über die Links die Seiten durchläuft.
Der Kunde fordert Änderungen an oder fragt nach einer Erläuterung des Designs.
Nachdem Sie alle erforderlichen Änderungen vorgenommen haben, zeichnet der Kunde die Wireframes ab.
Sie aktualisieren die Wireframes-Site, indem Sie grafische Elemente und Farben hinzufügen.
Sie aktualisieren Absatzformate, um den Text zu formatieren.
Der Kunde prüft die aktualisierte Version der Site und fordert weitere Änderungen an.
Sie nehmen die gewünschten Änderungen vor.
Der Kunde genehmigt die Version.
Sie führen ein Upgrade der Site durch, richten die Domäne ein und starten die fertige Site.

Überprüfen der Site-Struktur in der Planungsansicht von Adobe Muse

Um herauszufinden, wie die Seiten der Site in einer Hierarchie platziert werden, wodurch die oberen und darunter liegenden Stufen der Navigationslinks definiert werden, öffnen Sie die .muse-Datei der Wireframes in Adobe Muse und analysieren Sie sie. Wenn Sie das Projekt öffnen, wird zunächst die Planungsansicht angezeigt, in der sich alle Seiten der Site befinden.

fig03 — Die Seiten der Wireframes werden in der Planungsansicht angezeigt.

Beachten Sie, dass es zwei Stufen gibt – eine obere Ebene und eine Unterebene –, die die Hierarchie der Sitemap widerspiegeln. Sie können jederzeit während der Entwicklung und Wartung der Site auf diese Seiten klicken und sie ziehen, um sie innerhalb der Site-Struktur neu zu positionieren.

So erstellen Sie neue Seiten:

Klicken Sie auf das Pluszeichen (+) rechts von oder unter den vorhandenen Seiten und dann auf das Namensfeld der Seite, um den Namen einzugeben.

Der Seitenname sollte so aussagekräftig wie möglich sein.
Klicken Sie mit der rechten Maustaste auf eine Seitenminiatur und wählen Sie eine der daraufhin angezeigten Menüoptionen zum Duplizieren, Löschen oder Umbenennen.

Sie können auch mit der Maus auf eine Seite zeigen und auf das x-Symbol in der oberen rechten Ecke klicken, um sie zu löschen.
Versuchen Sie nun Seiten hinzuzufügen, neu zu positionieren und zu löschen, um die Sitemap zu ändern. Wählen Sie „Bearbeiten“ > „Rückgängig“, wenn Sie die Wireframe-Site wiederherstellen möchten.

Die Benutzeroberfläche der Planungsansicht ist intuitiv bedienbar und Adobe Muse verzeichnet alle Seitennamen und behält die Verknüpfungen in den Menü-Widgets bei. Alle Änderungen werden automatisch aktualisiert, um sicherzustellen, dass die Verknüpfungen nicht unterbrochen werden.

Verwenden von Grafikstilen zum Erstellen von Platzhalterelementen mit gemeinsam genutzten Attributen

Wie bei Adobe Illustrator und Adobe Photoshop hilft Adobe Muse Ihnen, Grafikstile zu erstellen, um ein einheitliches Erscheinungsbild zu erzeugen, das sie auf verschiedene Elemente anwenden können. Dies ist hilfreich für die Arbeit mit Wireframes (sowie die Gestaltung von Seiten), da Sie einen vorhandenen Grafikstil ändern können, um mühelos alle anderen Seitenelemente zu aktualisieren, die diesen angewendeten Stil aufweisen. Sie können auch vorhandene Stile kopieren, um Variationen davon zu erstellen.

So verwenden Sie Grafikstile, um Attribute auf Formen anzuwenden und Platzhalter für Bilddateien in einer Wireframe-Site zu erstellen:

Verwenden Sie das Rechteckwerkzeug, um in der Entwurfsansicht drei Rechtecke auf einer Seite zu zeichnen.
Wählen Sie ein Rechteck aus und bearbeiten Sie es, indem Sie die Konturfarbe, Füllfarbe und Deckkrafteinstellung festlegen und grafische Effekte wie Schlagschatten hinzufügen.
Klicken Sie bei ausgewähltem Rechteck am unteren Rand des Grafikstilebedienfelds auf „Neuer Grafikstil“. Der Stil basiert auf der Formatierung des ausgewählten Rechtecks. Doppelklicken Sie auf den neuen Grafikstil, um ihm einen aussagekräftigen Namen zu geben.
Wählen Sie eines der anderen Rechtecke aus und wenden Sie den gleichen Grafikstil an, indem Sie auf den Namen des Stils klicken. Wiederholen Sie diesen Schritt, um den Stil auf das dritte Rechteck anzuwenden, sodass alle drei Rechtecke denselben Stil verwenden.
Wählen Sie ein Rechteck aus und bearbeiten Sie es, um den Stil leicht zu ändern. Beachten Sie, dass ein Pluszeichen (+) im Grafikstilebedienfeld neben dem bearbeiteten Namen des Stils angezeigt wird.
Klicken Sie mit der rechten Maustaste auf den Namen des Stils im Grafikstilebedienfeld und wählen Sie die Option „Format neu definieren“. Die anderen beiden Rechtecke werden nun aktualisiert, um dem neuen Stil zu entsprechen, und das Pluszeichen (+) wird nicht mehr angezeigt.
Mit Grafikstilen können Sie schnell Formen formatieren, um konsistente Wireframes zu erstellen und einen Satz Site-Elemente mühelos zu aktualisieren, wenn ein Kunde Änderungen anfordert.

Erstellen von strukturierten Webseiten und Formatieren von Text mit Absatzformaten

Beim Erstellen einer Wireframe-Site können Sie das Textwerkzeug verwenden, um Textrahmen zu erstellen und Platzhaltertext („Lorem ipsum“) hinzuzufügen, den Sie später ersetzen. Wenn Ihr Kunde über eine vorhandene Website verfügt, können Sie den Text auch direkt aus einem Browser kopieren und ihn in die Textrahmen einfügen. Nachdem Sie Textelemente erstellt haben, können Sie über das Textbedienfeld den Text formatieren.

Mithilfe von Absatzformaten können Sie Überschriftentext und Absatztags definieren, um den Textinhalt der Seite zu strukturieren:

Verwenden Sie in der Designansicht das Textwerkzeug, um einen Textrahmen auf die Seite zu ziehen. Geben oder fügen Sie Text in den Textrahmen ein, um es zu füllen.
Verwenden Sie das Textbedienfeld oder die Optionen im Steuerungsbedienfeld am oberen Rand des Entwurfsansicht-Arbeitsbereichs, um Formatierungsoptionen, wie Schriftart, Schriftgröße, Schriftfarbe und andere Eigenschaften, festzulegen.
Klicken Sie am unteren Rand des Absatzformatebedienfelds auf „Neues Absatzformat“, um ein neues Absatzformat zu erstellen. Doppelklicken Sie auf den Namen des neuen Formats, um ihm einen aussagekräftigen Namen zu geben.
Klicken Sie mit der rechten Maustaste auf das Format und wählen Sie „Formatoptionen“. Verwenden Sie das Absatz-Tag-Menü, um das Absatzformat festzulegen, um ein bestimmtes HTML-Tag wie P, H1, H2 oder H3 anzugeben.

Klicken Sie im Absatzformatebedienfeld mit der rechten Maustaste auf einen Formatnamen und wählen Sie dann im Dialogfeld „Formatoptionen“ für das Format ein bestimmtes Überschriften- oder Absatz-Tag aus.
Erstellen Sie weitere Textrahmen mit Text. Beachten Sie Folgendes: Wenn Sie auf den Namen des Absatzformats klicken, während ein Textrahmen ausgewählt ist, wird die Formatierung des Absatzformats auf den ausgewählten Textrahmen angewendet. Wenn Sie einen der Textrahmen mit einem angewendeten Absatzformat später auswählen und das Format ändern, wird im Absatzformatebedienfeld neben dem Namen des Formats ein Pluszeichen (+) angezeigt. Dies bedeutet wie bei Grafikstilen, dass das Format geändert wurde.
Um automatisch alle Textrahmen mit dem gleichen Format zu aktualisieren, klicken Sie mit der rechten Maustaste auf den Namen des Formats im Absatzformatebedienfeld und wählen Sie „Format neu definieren“.

Wie Sie anhand dieses kurzen Beispiels sehen können, können Sie verschiedene Textcontainer erstellen und sie so einrichten, dass bestimmte Formate verwendet werden, um ein einheitliches Layout zu erstellen. Wenn Sie dann die Wireframes aktualisieren, um die endgültige Version der Site zu entwickeln, ist es einfach, die Stile und Formate gemäß den Anforderungen des Kunden zu aktualisieren. Das Erstellen von strukturierten Webseiten mit Textcontainern ist eine bewährte Vorgehensweise, da dadurch auch die Positionierung im Rahmen der Suchmaschinenoptimierung verbessert wird.

Hinweis:

Legen Sie beim Gestalten von Seiten mit einfarbigen Hintergrundfarben die gleiche Füllfarbe für den Textrahmen fest. Auf diese Weise kann Adobe Muse den Textinhalt effizienter veröffentlichen. Wenn die Hintergrundfarbe unbekannt ist, ist das Aliasing des veröffentlichten Texts weniger glatt, da Adobe Muse die Hintergrundfarbe des Textrahmens auf transparent setzt. Wenn der Seitenhintergrund Verläufe oder Bilder enthält, setzen Sie die Füllfarbe des Textrahmens auf „Ohne“.

Aktualisieren von Platzhalterbildern mit den fertigen Site-Grafiken

Nachdem der Kunde die Wireframes genehmigt hat, können Sie mühelos die Site mit den eigentlichen Bilddateien aktualisieren.

Wählen Sie einen Bildplatzhalter auf der Seite aus.
Öffnen Sie das Elementebedienfeld, um das ausgewählte Seitenelement zu suchen.
Klicken Sie mit der rechten Maustaste auf das Seitenelement. Das daraufhin angezeigte Menü enthält zwei Optionen, die Ihnen dabei helfen, die Bilddatei zu aktualisieren, je nachdem, wie Sie die Wireframe-Site erstellt haben.

Wenn Sie eine Datei in Adobe Photoshop oder Adobe Fireworks erstellt und sie auf der Seite platziert haben, können Sie „Original bearbeiten“ wählen, um die Originaldatei in der Anwendung zu bearbeiten, in der sie erstellt wurde. Wenn Sie die Musterdatei speichern und zu Adobe Muse zurückkehren, werden die platzierten Instanzen der Datei automatisch in der Site aktualisiert.

Wenn Sie Platzhalter für Bilddateien in Adobe Muse mit dem Rechteckwerkzeug erstellt haben, wählen Sie „Alle Instanzen erneut verknüpfen“ und wählen Sie eine Datei auf Ihrem Computer aus, um eine Platzhalterdatei durch das endgültige Bild zu ersetzen.

Klicken Sie mit der rechten Maustaste auf den Namen des Elements und wählen Sie „Original bearbeiten“, um das Masterbild einer Platzhalterdatei in dem Bildbearbeitungsprogramm zu öffnen, mit dem es erstellt wurde.
Wiederholen Sie diese Schritte, um alle Platzhalterbilder auf der Seite durch die eigentlichen Bilddateien zu ersetzen.

Hinweis:

Wenn Sie mit der rechten Maustaste auf den Namen eines Elements im Elementebedienfeld klicken, können Sie auch die Option „Gehe zu Element“ wählen. Diese Option weist Adobe Muse an, die Seite zu öffnen, die das ausgewählte Element enthält, damit Sie es schnell aktualisieren können.

Zugreifen auf die mit Adobe Muse erstellten optimierten Bilddateien

Zusätzlich zum Veröffentlichen der erstellten Adobe Muse-Sites auf dem Hostserver, können Sie die gesamte Site exportieren, um den Ordner mit segmentierten und exportierten Bilddateien zu erhalten:

Wählen Sie „Datei“ > „Exportieren als HTML“.

Das Dialogfeld „Exportieren als HTML“ wird angezeigt.
Wählen Sie den Speicherort auf Ihrem Computer aus, um die Site-Dateien zu exportieren, und klicken Sie dann auf „OK“.

Nachdem dieser Vorgang abgeschlossen wurde, exportiert Adobe Muse die Dateien und speichert sie im lokalen Ordner, den Sie angegeben haben. Navigieren Sie zum Ordner und öffnen Sie den Bildordner, um auf die optimierten Bilddateien zuzugreifen. Sie können diese Bilddateien erneut einsetzen, um Newsletter, mobile Apps, Seiten für soziale Netzwerke und andere Projekte zu erstellen.

Bei Ihrem Konto anmelden