Blog & Design, Blog-Relaunch
Kommentare 6

DIY Blog Relaunch #5: Erste Schritte in Adobe Muse | Die Seitenstruktur

Ich mache es kurz: Keine Mammut-Beiträge mehr. Von nun an gehen wir kleine Schritte. Außerdem wird es ab jetzt ein bisschen technischer. Du siehst mehr Screenshots und weniger ambientige Bilder. Denn ab jetzt arbeiten wir mit der Muse. Und die hat es in sich. Versteh mich nicht falsch. Man braucht keinen Fitzel HTML- oder CSS-Code zu schreiben, um eine Website zu gestalten. Muse funktioniert rein auf Optik, wie ein Baukasten – und ich bin begeistert. ❤

Ein bisschen durchhalten müssen wir aber doch, wenn es um die Bildsprache der Muse-Relaunch-Beiträge geht. Dafür gelangen wir sicher irgendwann an den Punkt, an dem ich Dir erste Prototypen des neuen Blogs zeigen kann. Wie cool ist das? 😀 Du siehst dann also den Blog, bevor er tatsächlich online geht.

Vielleicht streue ich zwischendurch einfach ein paar Katzenfotos für das Ambiente ein 😀 Wie das hier:

Motte – für mehr Ambiente in technischen Posts

Amigurimi-Katzenspielzeug-Cute-Cat-Mohntage

Das ist meine Katze Motte, die mit ihrem neuen liebsten Spielzeug schmust. Das Spielzeug ist selbst gehäkelt und die Anleitung wird ein Gastbeitrag bei einer ebenso wollverrückten Bloggerkollegin. Sneaky peaky … ❤

Aber: Zurück zu Muse!

Vielleicht ist dieses einfache Basteln im Baukasten, von dem ich so begeistert bin, der Grund, wieso man nicht EIN Tutorial findet, das sich einfach nur mal mit den Grundlagen befasst. Videos sind in diesem Fall bedingt hilfreicher als die schriftlichen Tutorials. Aber auch bei den Videos muss man viel aussortieren, aufpassen wie ein Fuchs und super oft zurückspulen, um sich genau die Schaltflächen anzuschauen, die angeklickt werden (müssen). Ein weiteres Problem: Die Videos sind alle in englischer Sprache. Ich verstehe zwar alles, aber ich muss mir jedes Mal die deutsche Schaltfläche oder Funktion übersetzen und herleiten. Klar. Ich könnte auf Englisch umstellen, aber das will ich nicht.

Gute deutsche Tutorials gibt es auch ab und an. Die beziehen sich aber selten auf reine Grundlagen, sondern setzen bereits Kenntnisse voraus und laufen schlimmstenfalls noch mit veralteten Muse-Versionen. Alles nicht so wirklich hilfreich.

Klare Sache: Wir brauchen ein Newbie-Tutorial!

Du wirst nun sicher verstehen, wieso ich mich für kleine Schritte und das Erklären jedes einzelnen davon entschlossen habe. Ich bin kein gelernter Webdesigner und ich habe nun wirklich keinen Dunst von HTML, CSS oder Ähnlichem. Aber: Vielleicht geht es Dir ja genauso. Vielleicht kriegen wir auf diesem Weg eine gute, ausführliche, deutschsprachige Anleitung hin. Und vielleicht hast Du danach ja auch Lust, Deinen Blog mit Adobe Muse selbst zu gestalten. 🙂 Wir könnten eine DIY-Blogtheme-Bewegung lostreten. Das wäre ganz schön cool, oder?

Also: Nochmal tief durchatmen und …

Los geht’s

Blog-Relaunch-Adobe-Muse-Start

Wenn Muse das erste Mal geöffnet wird, hat man die Möglichlkeit, auf Ressourcen, Tutorials usw. zuzugreifen oder eine neue Seite zu erstellen. Irgendwann, wenn wir schon gut dabei sind und unsere Seite hoffentlich regelmäßig ab- bzw. zwischenspeichern, tauchen sie unter „Zuletzt verwendete Seiten“ auf. Wir wollen aber erstmal eine neue Seite erstellen. Daher: Klick auf „Neu erstellen“ und „Site“.

Responsive soll’s sein | Variable Breite

Die Voreinstellungen von Muse sind eigentlich schon fast perfekt. Die Muse geht davon aus, dass Du – genauso wie ich – ein responsive Design haben möchtest.

Aber was bedeutet „responsive“?

Responsive bedeutet grob zusammengefasst, dass sich die Website oder der Blog inkl. seiner Inhalte automatisch dem Endlesegerät anpasst. Die Seite ist also auf dem Desktop genauso gut lesbar wie auf einem Tablet oder einem Smartphone-Display, ohne dass man zoomen muss, um alles lesen zu können. Die Elemente auf der Website, Schriften inkl. Schriftgröße, Icons, Bilder, Textfelder usw. verschieben sich je nach Endlesegerät in eine lesefreundliche Optik. Das erspart elendes Rein- und Rauszoomen.

So legst Du in Muse das Responsive Design fest

Blog-Relaunch-Adobe-Muse-Neue-Seite-Responsive-Design

Wenn wir auf „Neue Seite“ bzw. „Site“ geklickt haben, legen wir erstmal die Parameter für die Seite fest. Wer möchte, kann auch eine feste anstelle einer variablen Breite wählen. Das wäre dann aber eine reine Desktop-/PC-Ansicht und auf Smartphones oder Talets nicht/ schwerer lesbar, weil sich nichts anpasst, sondern alles statisch bleibt.

Wir machen auf jeden Fall mit der Variablen Breite weiter. Die voreingestellte maximale Seitenbreite kannst Du ebenso stehen lassen wie die Ränder und die übrigen Werte. Allein bei den Spalten würde ich mit mehr als nur einer arbeiten, denn die Spalten helfen beim Wireframing. Und da es sich um simple Hilfslinien handelt, die man später nicht sieht, macht es rein gar nichts, wenn da ein paar mehr sind. Ein Textkasten, ein Bild oder ein Kommentarfeld kann ja schließlich auch mehrere Spalten breit sein. 🙂

Ich habe mich übrigens für 10 Spalten entschieden. So kann ich später genau sehen, welche Elemente in welchem Abstand zueinander schön aussehen. Und dieser Abstand ist dann auch noch genau gleich. Ha! 😀

Planung & Entwurf der Seitenstruktur

Blog-Relaunch-Adobe-Muse-Seitenstruktur-anlegen

Wenn Du alle Eingaben getätigt hast, erscheint die Homepage und eine Musterseite (beide werden immer angezeigt). Die Homepage ist unsere Ausgangsseite. Du kannst entweder nur mit dieser einen Seite arbeiten für eine simple Blogstruktur, oder – wie in einem Baumdiagramm, neue Seiten gleicher oder untergeordneter Ebene hinzufügen, wenn Du mehr Kategorien hast oder weitere Seiten wie ein Impressum, About me usw. anlegen willst. Natürlich kannst Du direkt in Muse herumprobieren, es lohnt sich aber auch, sich vorab mit Bleistift und Papier Gedanken über die Struktur, die Navigation der Seite(n) und deren Titel zu machen.

Im Laufe der Gestaltung werden wir übrigens hauptsächlich zwischen den Reitern Planung und Entwurf (oben rechts im Bild) wechseln. Die Planung zeigt Dir die gesamte Struktur Deiner Planung, der Entwurf zeigt Dir die jeweilige Seite im Detail. Auf ihr kannst Du bauen und gestalten, so wie die Seite später aussehen soll. Und hier siehst Du auch die zuvor erwähnten Hilfslinien der Spalten, die wir vorher festgelegt haben:

Blog-Relaunch-Adobe-Muse-Neue-Seite-Entwurf-Ansicht

Seitenstruktur & SEO-Optimierung

Bevor wir uns an die Gestaltung wagen (auch wenn das extrem verführerisch ist), legen wir erstmal eine Seitenstruktur an. Die ist übrigens nicht in Stein gemeißelt. Solltest Du Dich im Gestaltungsprozess umentscheiden, kannst Du die einzelnen Seiten jederzeit umbenennen, per Drag & Drop verschieben oder wieder löschen. Die Muse hilft Dir dabei und bietet Dir neben den + und – Schaltflächen auch Hinweise als Mouse-Over-Effekt an, wie beispielsweise „Seitenreihenfolge durch Ziehen ändern“. Probier es einfach mal aus. Es kann überhaupt nichts passieren. Notfalls machst Du ungewollte Änderungen einfach rückgängig.

Das ist übrigens meine (vorläufige) Seitenstruktur 🙂

Blog-Relaunch-Adobe-Muse-Seitenstruktur-veraendern

Du siehst, da ist ganz schön was zusammen gekommen. 🙂 Aber wer weiß, ob das alles bis zum Ende bestehen bleibt. Es sind Gedanken, mit denen ich spiele und die ich in Muse visualisieren kann, um sie auszutesten. ❤ Yay, Muse!

Die Titel der Seiten sind übrigens auch die Titel, die später auf Deiner Website zu sehen sind. Aber selbst hier kannst Du bis zum Schluß Änderungen vornehmen. Adobe hält hier übrigens einen netten Trick bereit, selbst bei allgemeinen Kategorien wie „Food“ oder „DIY“, das Suchmaschinenranking etwas zu Deinen Gunsten zu beeinflussen. Dazu klickst Du mit der rechten Maustaste auf die Masterpage, gehst auf Seiteneigenschaften und dann Metadaten. Dort gibst Du unter Suffix ein Leerzeichen, ein | und den Namen Deines Blogs/ Deiner Website ein. So ist der Name Deiner Website stets mit den Kategorien Deines Menüs verbunden, was das Suchmaschinenranking (wohl) positiv beeinflusst. Hmm… 🙂

Blog-Relaunch-Adobe-Muse-Musterseite-Seiteneigenschaften-SEO-Optimierung-Mohntage

Stay tuned for more …

So. Das war es für heute. Beim nächsten Mal machen wir uns daran, jede Seite einzeln zu entwerfen und mit Inhalt zu füllen. Das wäre allerdings mit ziemlichem Aufwand verbunden, wenn ich daran denke, dass bestimmte Elemente – beispielsweise die Social-Media-Icons – auf jeder Seite erscheinen sollen.

Dazu hat sich meine Muse aber auch etwas überlegt: Die Musterseite. Auf ihr kannst Du alle Designelemente platzieren, die auf jeder Seite gleichermaßen erscheinen sollen. Sie ist quasi (D)eine Schablone für die Gestaltung weiterer (Unter-)Seiten. Und wie Du so eine Musterseite einrichtest, das zeige ich Dir im nächsten Beitrag.

Na? War doch für den Anfang eigentlich ganz cool und gar nicht so einschüchternd, wie ich anfangs noch vermutet hatte. Das kann aber auch daran liegen, dass wir gerade mal den Fuß in die Tür geschoben haben und versuchen, durch den schmalen Spalt zu erspähen, was sich dahinter so alles verbirgt.

Ich hoffe Du bleibst dabei, auch wenn die nächsten Posts etwas technisch sind – mit mehr Screenshots und weniger ambientigen Bildern. Ach komm… wir schauen uns Motte nochmal an 😀 Ambiente in 3… 2… 1…

Amigurimi-Katzenspielzeug-Cute-Cat-Mohntage

Und ganz wichtig: Wenn Du Fragen oder Anmerkungen hast … oder vor dem Bildschirm sitzt und denkst: Wieso macht die das denn sooooo! XY ginge doch viel einfacher mit Z. Dann raus damit!

Ich freue mich auf Deine Kommentare, Kritik, Anmerkungen, Ideen und Anekdoten aus dem Leben eines (Nicht-)Webdesigners 😀

Würdest Du Deinen Blog komplett selbst gestalten oder bist Du mit den Themes, die man kaufen kann bzw. umsonst bekommt zufrieden?

Mach Lärm, Du weißt wo und wie das geht ❤

 

 

 

 

6 Kommentare

  1. Hey, das ist wieder ein toller Beitrag geworden und gerade richtig dosiert! 😉 Vorallem die Katzenfotos machen echt gute Laune! 😀

    Ich hab ein gekauftes Theme, da ich grafisch einfach nicht besonders talentiert bin, aber mit deiner Anleitung schaut es echt machbar aus!

    Ich freu mich schon auf weitere Beiträge! 🙂

    Alles Liebe,
    Jules

    Gefällt 1 Person

  2. Ich finde das so toll, wie viel Mühe du dir mit diesem „technischen Kram“ gibst. Eines Tages, wenn ich meinen Blog umbauen will, schaue ich mir das alles gaaaaaanz genau an. Es ist so schön, dass jemand sich die Arbeit macht und uns so viel Mühe des Learning by Doing erspart. Vielen lieben Dank dafür. LG Undine

    Gefällt 1 Person

    • Liebe Undine, es tut wirklich gut, das zu hören und ich freue mich immer sehr über dein tolles Feedback! Das war der Plan hinter der Relaunch-Serie. Ich habe mich nämlich immer gefragt, wie so ein Relaunch bei anderen abläuft und was dahinter steckt. Es kann ja neben Spaß und Erfolg manchmal auch echt entmutigend sein. Man glaubt, ein zu großes Stück abgebissen zu haben, das man jetzt nicht kauen kann. Und wer weiß, was bei mir noch kommt 😀 (Momentan läuft es gut, die Daumen sind gedrückt, hoffen wir, dass es so bleibt ^^) Ich finde es gerade deshalb immer sehr angenehm, wenn man weiß, dass man da nicht allein durch muss, sondern dass andere auch schon einmal in derselben Situation gesteckt haben. Vor ein paar Wochen hatte ich beispielsweise doch noch eine Logokrise. Ich war sogar kurz davor die Domain zu kippen… ein Glück habe ich drüber geschlafen und es gelassen. Dazu schreibe ich auch noch einen Post. Aber: Genau sowas zu teilen finde ich wichtig. Denn dann wirkt ein Relaunch nicht mehr so einschüchternd bzw. man kriegt nicht so leicht das Gefühl „easy-peasy-bei-anderen-wieso-nicht-bei-mir“ 😉 Liebe Grüße ❤

      Gefällt 1 Person

Macht Lärm!

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s