Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Grundlagen der Gestaltung: Layout

Landing Page

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Video lernen Sie, wie Sie eine einfache Landing Page mit Adobe Muse layouten.
14:13

Transkript

In diesem Video stelle ich Ihnen vor, wie Sie eine Landing-Page im Layout erzeugen. Dafür verwende ich das Werkzeug Adobe Muse. Muse ist innerhalb der Creative Cloud-Familie relativ neu und dient als graphisches Werkzeug ähnlich wie InDesign für das Layput allerdings hier von Websites. Und genau darauf möchte ich hier den Schwerpunkt des Videos legen. Wir können also eine neue Site erstellen und legen uns ein neues Format an. Zunächst für Desktop oder Tablet oder für ein Smartphone. Das heißt, hier sind also durchaus schon Vorgaben gemacht um beispielsweise für ein Tablet, ein iPad oder ähnliche Geräte in Hochformat zu arbeiten oder relativ kleine Displays wie Smartphones. Wir nehmen die klassische Desktop-Variante. Hier gibt es auch eine Anzahl von Spalten. Wir nehmen zum Beispiel mal 12 Spalten als Herleitung. Und die Ränder und die Innenabstände lassen wir so, wie sie sind. Dazu gibt es auch noch den Hinweis, in welcher Auflösung wir arbeiten. Mittlerweile kennen wir auch in Web verschiedene Auflösungen unter anderen die normale 72-ppi-Darstellung also Standard oder HiDPI für Windows-Geräte, bei Appel-Geräte nennt man das auch Retina Displays. So wir nehmen aber hier die Standardfassung, wir wollen eine kleine Landing-Page bauen. Also legt uns Adobe Muse zunächst eine weiße Seite an und dazu eine Musterseite. Wenn Sie sich mit InDesign schon mal beschäftigt haben, dann wissen Sie, wie dieses Prinzip der Musterseiten genauer funktioniert. Wir kümmern uns aber erstmal um diese Hompepage. Wir wollen erstmal hier eine Seite anlegen. Doppelklick darauf und dann haben wir hier unser Layout Spaltenraster mit 12 Spalten und können daran natürlich Objekte orientieren. Ähnlich wie bei InDesign kann ich Dateien platzieren, die ich erstmal benötige zum Beispiel Bilddateien. Hier haben wir unsere freigestellte Dame. Die öffne ich mir hier und platziere das Ganze im Layout. Man sieht, die freigestellte Frau ist auch hier. Freigestellt, das heißt der Hintergrund ist transparent. Ich kann dahinter also etwas gestalten oder festlegen. Sobald ich etwas bewege kommen Hilfslinien im Spiel, die natürlich in Web extrem wichtig sind, sodass ich also Dinge platzieren oder miteinander ausrichten kann. In unserem Beispiel soll die Dame hier von rechts in das Format reingucken. Ich skaliere das einfach hier mal mit gedrückter Shift-Taste und wir können nun unsere graphischen Elemente, die wir für die Printfassungen verwendet haben natürlich hier auch anwenden. Zum Beispiel ein Rechteck und dadrin soll es eine Farbe geben. Dafür gibt es tatsächlich so etwas wie Farbfelder. Die sind natürlich hier etwas anders angelegt. Natürlich in RGB. Also nehmen wir hier unser Orangeton, den wir natürlich auch neu definieren können, wenn wir wollen. Und wir können das gesamte Element diesen Rechteckrahmen hier, den können wir einfach drehen. Und zwar so frei Hand. Wir haben hier den Winkel von 35º. So den kann ich jetzt einfach hier hinter die Dame legen und das Ganze funktioniert ähnlich, wie im Layout in InDesign, dass ich einfach den Hintergrund benutze. Das heißt also, ich kann hier natürlich genauso eine schräge Fläche einziehen. Allerdings berücksichtigt das natürlich auch dann hinterher die Fußzeile. Man sieht es hier im Hintergrund. Die Fußzeile wird davon betroffen oder hier berücksichtigt. Nach oben kann man das Ganze natürlich auch versetzen. Allerdings muss ich hier auch die Ränder im Layout beachten. Ich kann also nicht alle Freiheiten nutzen, die man sonst vielleicht im Print hätte. Das sind ja alles hinterher Objekte, die in Code-Form umgebaut werden müssen und so ein Rahmen hier, das wird hinterher ein div-Container mit den entsprechenden CSS-Anweisungen. Ich will aber jetzt hier keine Kontur darauf haben. Das soll alles weg. Und wir wollen natürlich große Typografie nutzen. Wir brauchen hier erstmal einen Textrahmen. Und wir wollen natürlich hier unseren Text einsetzen. Dafür gehe ich hier einfach mal in diesen Text rein und den können wir natürlich auch noch speziell formatieren. Zum Beispiel mit entsprechenden Schriften. Entweder Webschriften, die es auf jedem Computer gibt zum Beispiel Arial, Geneva, Georgie, Helvetica und ähnlichen oder wir suchen uns eine Webschrift aus und hier greift natürlich Adobe auf die eigene Web-Bibliothek zurück das nennt sich Type Kit und das ist hier mit in Adobe Muse integriert. Besonders schön ist jetzt, dass wir also Schriften über mehrere Layout-Projekte für Print und Web gleichermaßen nutzen können. Wenn wir also zum Beispiel die Source Sans, was eine Open-Source-Schrift ist, hier verwenden wollen, dann können wir das damit tun und können hier die Open Source Sans Pro nutzen von Adobe als Schriftfamilie. Dann wird das hinzugefügt, das wird hineingeladen. Und dann kann ich das hier in dem Menü Webschriften einfach direkt aufrufen und habe also alle Schrift-Style, die gesamten Schnitte zur Verfügung. Das ist besonders clever hier gelöst. Wenn ich also jetzt das Ganze hier einstelle, dann kann ich damit die Schriftgröße natürlich auch wählen und selbstverständlich ist das Ganze auch insgesamt noch weiter darstellbar und ich kann hier alles auch übereinander und untereinander anordnen. Um Ihnen das Prinzip der Typografie ein bisschen näher zu erläutern, was durchaus komplex ist auch hier bei Adobe Muse, gibt es im Menü Fenster so etwas wie die Absatzformate, es heißt natürlich so, aber das sind natürlich CSS-Anweisungen, die hinterher von Muse ausgegeben werden. Wenn ich hier ein solches neues Absatzformat einrichte und dort einen Doppelklick draufmache, dann bekomme ich hier die Formateinstellungen. Ich nenne das Ganze einfach mal Überschrift. Und dann bekomme ich dazu auch einen Tag. Und wenn Sie sich mit Webdesign ein bisschen näher beschäftigen wollen, hier muss ich natürlich den h1-Tag vergeben, damit das auch als Überschrift in der Textstruktur ersetzt und ergänzt wird. Und man sieht auch hier, wie ist der Schriftgrad, wie ist die Schriftart und der Tag. Das ist der Code, der quasi damit später erzeugt werden wird. Wenn ich nun noch weitere Formatierungen treffen will, so kann ich das natürlich auch tun, allerdings gibt es hier nicht so üppige Einstellmöglichkeiten. Dafür klicke ich hier einfach mal auf das Palettenmenü und dann kann man hier noch eine ganze Menge mehr wählen. Allerdings kann ich hier nicht einfach sagen, mal eben alles in solchen Versalien darstellen. Das heißt, das muss ich auch natürlich in Versalien schon mal eingeben. Soweit zu dieser Headline. Wenn wir noch weiteren Fließtext haben, den wir hier noch mitgestalten wollen, so können wir den natürlich auch einrichten. Das kann in demselben Textrahmen sein, kann aber auch darunter sein und dann sieht man auch, die Seite ist nach unten flexibel, wenn ich hier mit dem Rahmen weiter an den Rand andocke und den Text ja einfließen lasse, dann ist der Rahmen immer so groß, wie hier die Seite ist und die Fußzeile wird einfach nach unten gedrückt. Das heißt natürlich auch, im Web habe ich ganz andere , um was das Format oder der Umgang mit dem Format angeht. Hier wähle ich auch wieder eine Schriftgröße. 14 Punkt ist durchaus gut lesbar im Web, ergibt erstmal eine relativ gute großzügige Schrift. Man kann die Breiten natürlich jetzt auch anpassen nach den Textzeilen lohnt sich das hier vielleicht überlagern zu lassen. Und wie richte ich das Ganze insgesamt aus, vielleicht nochmal hier ein bisschen nach links oder rechts gestellt um ein bisschen mehr Luft zu haben. Wenn ich jetzt ein solches Layout hier gestalte, so kann ich natürlich auch folgendes machen: Ich kann jetzt auch ein Menü einführen. Wir wollen ja hinterher vielleicht noch weitere Seiten einsetzen. Zum Beispiel die Hompepage, die ist hier schon mal sichtbar. Und dann gibt es vielleicht noch eine Kontaktseite. Und dann gehe ich einfach auf dieses + und gibt das Ganze ein. Und natürlich brauchen wir auch immer ein Impressum auf jeder Seite. So aber wie verlinke ich jetzt von einem zum nächsten? Diese Verlinkungen, die können natürlich im Text passieren, das heißt ich habe hier irgendwo einen Text und sage, diese Textposition soll einen Hyperlink erzeugen. Dann kann ich hier einfach drauf klicken, kann den Hyperlink direkt eingeben oder ich gehe hier einfach auf die ganzen Links, dass heißt, es sind die lokalen Webseiten, die Hompage, Impressum oder Kontakt und dann kann ich direkt auf Kontakt klicken und dann ist das natürlich als Link gekennzeichnet und Sie werden es sich sicher schon vorstellen können, auch dafür kann ich natürlich wieder ein Absatz- oder ein Zeichenformat zuweisen. Aber nicht nur diese Verlinkung ist interessant, auch die Musterseite. Die haben wir noch gar nicht großartig gestaltet. Hier kann ich folgendes tun: Wenn ich dort doppelt draufklicke, sehe ich all das, was auf allen Seiten auch passiert. Wenn ich in dem Fall hier keine graphischen Anweisungen wenn ich aber jetzt ein Menü einrichten will also ein Ausklappmenü oder ein Hauptmenü, was permanent sichtbar ist, so gibt es dafür die so genannte Widgets-Bibliothek. Und die ist hier sehr sinnvoll. Da kann ich zum Beispiel ein vertikales Menü einfach per Drag and Drop rausziehen und dann habe ich es bereits hier stehen. Und wie das Menü aussieht, kann ich natürlich auch noch selber gestalten. Ich kann hier einfach mal die Höhe so angeben, sagen, das sind hier schon mal drei Elemente, die sitzen hier auf dieser Seite. Und die typografische Gestaltung kann ich dann per Doppelklick auch wieder lösen. Ebenso die Darstellform, wie das Ganze hinterher aussieht, ist hinterher in der Widgets- Bibliothek sichtbar und auch im Status. Zum Beispiel, ist das Ganze aktiv. Und bei aktiv will ich vielleicht eine gewisse Farbigkeit einsetzen. Zum Beispiel die, die wir auch sonst auf der Website nutzen. Und dann kann ich das Ganze so speichern. So jetzt gehen wir zurück auf die Homepage und da ist auch schon der erste Menü-Punkt aktiv, das heißt, hier ist ganz klar, die Homepage ist jetzt ausgewählt, das ist die Startseite. Und wenn ich auf Kontakt gehen will, so kann ich das natürlich dann auch hier später im Web tun. Die Musterseite, die brauchen wir jetzt nicht weiter. Natürlich fehlen noch Kopf- und Fußzeilen, ein Fußzeilenmenü, oder Facebook-Likes oder andere Dinge, die kann man natürlich hier einsetzen, aber strukturell haben wir jetzt also drei Seiten und man sieht auch hier, man hat hier auch die Seitenübergänge jeweils. Wenn ich also jetzt weitere Unterseiten haben will mit Impressum, Kontakt oder Anfang Skizzen, so lässt sich das alles hier drauf platzieren. Kommen wir zum nächsten Schritt. Wir wollen natürlich auch sehen, wie sieht das im Web überhaupt aus. Und wie kann ich den noch weitere Gestaltungsmerkmale machen. Wir haben ja hier auch so etwas wie ein Hintergrund. Den Hintergrund kann ich tatsächlich auch noch gestalten. Die gesamte Seitenfläche kann ich gestalten. Oder den gesamten Seitenhintergrund, nämlich die Browser-Füllung. Das heißt, was ist eigentlich da drumherum? Ist es eine Seite die quasi in nichts liegt? Oder ist da wenigstens irgendeinen Farbton drin oder ein Beige oder ein Grau? Und wenn ich das hier einrichten will, so mache ich das alles nach RGB-Tönen. Das heißt, ein Hellgrau wäre zum Beispiel hier so bei 200 in allen Kanälen. Wenn ich das also einmal speichere, bzw. die Musterseite zunächst hier verlasse, dann kann ich das Ganze als Site speichern und dann werde ich natürlich gefragt, wohin das Ganze geht. Wir sagen, das ist unser Schumann Konzert. Das wird hier in unseren Demodaten oder auf dem Schreibtisch gespeichert. Und dann kann ich das Ganze auch testen. Wir haben zunächst hier die Möglichkeit die Vorschau zu aktivieren. Dann kann ich das Ganze hier damit testen. Wir bekommen also eine Browser- Darstellung direkt in Adobe Muse. Ich klicke hier auf Kontakt oder Impressum oder Homepage und lande auch auf diesen Seiten. Und Sie sehen, das Ganze sieht ziemlich ordentlich aus, für die kurze Zeit in der wir hier gearbeitet haben. Auch der Link funktioniert. Wenn ich hier drauf klicke bin ich auf Kontakt und so weiter. Sie sehen also wie schnell das Ganze geht und es ist doch wirklich in der Qualität, so wie ich es in Adobe Muse gestalte. Das ist wirklich sehr einzigartig. Ich brauche keine Codezeile damit programmieren. Jetzt kann ich die Vorschau beenden. Und wir können später hinterher die ganze Seite als HTML exportieren. Und dieses ganze HTML-Paket, das können Sie natürlich auf Ihrem Webserver spielen und damit ist die Seite von außen auch erreichbar. Sie sehen also das Layout für Websites folgt ein bisschen anderen Regeln als in InDesign. Allerdings lassen sich auch viele Gleichheiten feststellen, wenn ich aus dem Print heraus ein Layout kenne und später hinterher im Web übertragen will. Dann ist Adobe Muse durchaus für statische Webseits oder für Landing-Pages eine gute Wahl.

Grundlagen der Gestaltung: Layout

Erfahren Sie am praktischen Beispiel, wie Sie das Layout von Magazinen, Zeitungen, Websites und weiteren Medien optimal gestalten und so zu professionellen Ergebnissen gelangen.

3 Std. 56 min (50 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!