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.

Gestaltungsgrundlagen für Webdesigner

Header-Elemente im Einsatz

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Hier gibt Ihnen Christoph Luchs einen Überblick über verschiedene Typen der Navigation: Header, Menü oder Slider.
12:27

Transkript

In diesem Video zeige ich Ihnen, wie Sie ein Menü oder auch einen Header Ihrer Seite gestalten können. Das Ganze beginnen natürlich irgendwo mit einem festen Bereich. Ich hab hier meine Seite soweit eingerichtet, hab ein Dokument mit 1280 mal 800 Pixeln angelegt und ein inneren Bereich von 960 Pixeln genutzt. Wie hoch ist nun dieser Header-Bereich? Darin sollen aufgenommen werden Menü und Logo. Wenn ich jetzt diesen Header hier einsetze, dann kann ich hier auch die Größe in InDesign bestimmen, natürlich auch mit einem anderen Programm. Fangen wir mal mit 80 Pixeln an. Was passiert, wenn ich jetzt 80 Pixel nehme? Nun zunächst brauche ich vielleicht auch noch eine Farbe. Das Ganze muss vielleicht erst mal weiß werden oder leicht hellgrau, damit ich dann auch den Unterschied sehen kann zum Untergrund. Ist das schon groß genug? Wenn ich jetzt ein Logo platziere, so muss das Logo natürlich hier in der Größe irgendwie eingepasst werden. Deswegen schauen wir uns das mal ganz genau an. Ich habe hier ein Logo vorbereitet, einmal in der positiven wie in der negativen Fassung. Und das Logo mit dem gesamten Umraum, mit dem Schutzraum sozusagen, das kopiere ich mir hier einfach mal und platziere das hier in meine Header-Dokument. An dieser Stelle soll das eingepasst werden und man sieht natürlich sofort, es ist es viel zu riesig, ich muss es verkleinern. Das machen wir jetzt auch. Wenn ich das jetzt allerdings hier auf, sagen wir mal, 80 Pixel in der Höhe skaliere, dann bleibt natürlich hier vom Untergrund nicht mehr viel übrig, selbst wenn ich jetzt hier das Ganze noch ein bisschen noch einziehe. Und wenn wir uns dass im gesamten Screen gerade angucken, hier in der Vorschau, dann wirkt das Logo doch hier wirklich sehr sehr winzig, Das heißt, die Höhe von dem Header begrenzt natürlich auch die Fläche von dem Logo und die Logofläche kann ich natürlich jetzt nicht einfach irgendwo anschneiden, sondern da brauchen wir wieder den Schutzraum. Also, alles wird von dieser Höhe natürlich abhängig gemacht. Also werde ich die hier ein bisschen erhöhen, wir gehen auf 120 und jetzt können wir dieses Element hier einfach auch platzieren, beziehungsweise halt mal nach unten schieben und geringfügig auch vergrößern. Ich gehe einfach mal in zehn Prozentschritten vorwärts, das macht das Ganze ein bisschen einfacher und schneller und dann haben wir jetzt vielleicht schon eine ganz gute Größe. Das im InDesign abzuschätzen, ist manchmal etwas schwierig, deswegen kann man immer mal wieder in den Vollbildmodus gehen mit der Taste Shift+W und damit wird komplett der Seiteninhalt auf meinem Monitor möglichst vollflächig dargestellt. Jetzt haben wir also diesen Untergrund soweit und ich habe hier diesen grauen Header-Bereich und wir brauchen natürlich noch ein Menü. Was kann ich machen? Ich kann jetzt entweder neue Textrahmen aufziehen oder ich gebe einfach mit dem Textwerkzeug direkt meine Menübegriffe hier in diesen grauen Rahmen hinein. Und das Ganze ist viel einfacher, als Sie denken. Und das brauche ich natürlich noch mit einer entsprechenden Schriftgröße. Sagen wir mal 22 Punkt, was in dem Fall auch 22 Pixel Schriftgröße im Web hier entspricht. Was haben wir dort? Wir haben natürlich unsere Startseite oder unsere Home-Seite. So, geben wir das hier ein. also wir haben hier unsere Startseite. Dann gibt es natürlich als nächsten Unterbegriff vielleicht die Orte, Dann haben wir die Position der Stimmen, und vielleicht noch der Aktionen, dann gibt es im Menü noch den Kontakt und natürlich wie immer Impressum. So, jetzt das einmal hier oben eingestellt. Jetzt muss ich das Ganze natürlich noch ein bisschen ausrichten und dafür kann ich wunderbar mit den typografischen InDesign-Werkzeugen hier arbeiten, einmal das Ganze rechtsbündig ausgerichtet. Jetzt möchte ich es vertikal ausrichten, dafür gibt es die Textrahmenoptionen und dann kann ich mit aktiven Vorschau sagen, ich will das Ganze einmal zentrieren. Das ist die Grundeinstellung, so ähnlich würde es im Web ungefähr auch aussehen und ich brauche noch einen Innenabstand, den habe ich hier eben vergessen, also noch mal die Textrahmenoptionen, und rechts kann ich da vielleicht einen Innenabstand von 20 Pixel einstellen oder grundsätzlich gleich drumherum. So, wie sieht das jetzt aber aus in den Zwischenräumen? Hier habe ich jeweils einen kleinen Leerraum, ein Leerzeichen jeweils gesetzt, das ist natürlich viel zu wenig. Wenn wir hier einen schönen Umraum haben wollen, so müssen wir eigentlich ein Geviert dazwischen setzen und dann haben wir schöne breite Zwischenräume und dann kann man diese Menübefehle später natürlich auch sehr gut erreichen, im Hauptmenü. Das passt sogar hier sehr gut mit dem Logo zusammen. Hier haben wir jetzt erst mal die Desktop-Darstellung und wir können natürlich noch typografisch gleich weiter arbeiten. Ich werde hier zunächst mal eine andere Schrift wählen und werde mal gucken, wie das hinterher wirkt, wenn wir hier die Merriweather Sans Bold verwenden, die ist ja auch recht groß, können wir ruhig ein bisschen kleiner nutzen. Und das ist natürlich dann gleich ein passendes Hauptmenü. Also, das sieht schon mal ganz freundlich und ganz angenehm aus. Warum habe ich jetzt eigentlich so große Abstände gewählt? Nun, das liegt einfach schlichtweg daran, dass natürlich auch ein Drop-down-Menü eventuell fällig ist. Das heißt, wenn ich jetzt sage, ich habe hier zum Beispiel Orte, dann muss hier natürlich auch irgendwo ein Button drumherum sitzen und der Button hat vielleicht noch eine Kontur und deswegen sind hier die großen Abstände jeweils nach links und rechts gesetzt, weil es nämlich sonst ziemlich komisch aussieht. In der Höhe bin ich jetzt hier bei so einem Button bei 33 Pixel. Wenn ich jetzt noch ein Untermenü dazu setzen wollte, einfach mal als Beispiel, wie das dann hinterher aussieht, macht es Sinn, vielleicht diesen Rahmen so zu benutzen, 33 Pixel in der Höhe, hab ich gesagt und ich hab hier vielleicht dreimal so viele Einträge, also sage ich, das ist ganze 99 Pixel hoch und natürlich als Ausklappmenü kann das deutlich breiter werden, kriegt selbstverständlich auch eine Flächenfarbe, dann sieht man auch gleich, dass es quasi im Vordergrund liegt und da drin kann ich dann natürlich die Unterseiten einrichten, das sind dann zum Beispiel die Illuminationen, (Tastatureingaben) dann die öffentlichen Gebäude (Tastatureingaben) und die gewerblichen (Tastatureingaben) und vielleicht die Aktionsorte. (Tastatureingaben) So, diese Befehle sozusagen, oder diese Punkte, die werden hier aufgerufen. Aktionen werde ich erst mal hier streichen, das kommt vielleicht noch in ein anderes Untermenü. Drei Elemente und dann kann ich das Ganze einfach hier in InDesign relativ schnell mit dem vertikalen Keil einstellen und mit Abständen von oben und unten jeweils einrichten, zum Beispiel erst mal zehn Pixel, das ist vielleicht nicht schlecht und von links natürlich auch noch mal zehn Pixel, sodass das Ganze schön eingerückt wirkt. So, vielleicht etwas weniger, 6, dann fluchtet es hier mit den anderen Begrifflichkeiten oben und unten. Nehmen wir vielleicht mal 18. Das war etwas zu viel, nehmen wir 12. Und jetzt sieht das so aus, als ob hier diese drei Elemente auch wirklich so breit sind, dass man hier problemlos ebenfalls wieder die Merriweather Sans nutzen kann. Warum ich diese Schrift verwende, es ist ein Google Font, sodass diese Schrift natürlich auch im Web verwendbar ist. So, dann habe ich hier diese drei Menüpunkte und natürlich gibt es irgendwo noch einen Hover, das heißt, einen Zustand, dass man sieht, dieser Punkt ist ausgewählt. Man kann das unterstreichen, man kann das hinterlegen mit einer Fläche. Da gibt es also viele viele Möglichkeiten. Ich verwende hier einfach mal einen Balken, der sagt, das ist 33 Pixel hoch und der ist vielleicht erst mal auf schwarz gestellt, aber mit einer Flächentransparenz vielleicht von 20 Prozent, sodass man hinterher sich vorstellen kann, dass ich gerade hier mit der Maus über Orte gegangen bin und dann auf Öffentlich gegangen bin. Ich mache das gerade in Graustufen, damit ich erst mal neutral mein Layout aufbereite und danach geht es dann weiter. So und jetzt kommt noch ein letzter wichtiger Punkt, das ist natürlich der Header oder der Slider. In diesem Slider-Bereich, das kann man in den Hintergrund legen, da passieren natürlich große schöne Bilder, die das Ganze vielleicht emotional auffangen sollen und dieser Slider-Bereich, der hat natürlich auch seine gewisse Höhe, 1280 mal, sagen wir mal 640. sodass hier im unteren Bereich dann auch die Informationen sichtbar sind. Und der Header hat vielleicht mehrere Texte und Bilder, die darüber fliegen und wir haben vielleicht auch tatsächlich einen Titel. Das heißt über dem Header wird nachträglich auch noch Bild und Text eingeblendet. Und dann kann man das so gestalten, dass man sagt, hier gibt es eine Überschrift, zum Beispiel: Unsere Aktionen in 2017 (Tastatureingaben) So, das Ganze soll natürlich eine möglichst große Schrift werden. Hier verwende ich wieder die Merriweather, in dem Fall hier in der Regular-Fassung, aber mit einem recht hohen Schriftgrad, das soll natürlich eine Überschrift werden, zum Beispiel ungefähr so, 32 Pixel. Und auch dieser Kasten hier, diese Box, die ich hier baue, die hat natürlich dann einen anderen Umbruch, das kann man hier in InDesign sehr gut einstellen über den Flattersatzausgleich und natürlich gibt es im Web erst mal pauschal keine Silbentrennung für solche Elemente, also sieht das Ganze so aus. Nun brauche ich ja auch noch meinen Innenabstand zum Beispiel von links zehn Pixel und von oben zehn Pixel und von unten. Warum ich das jetzt so kompliziert mache, ich kann einfach diesen Rahmen automatisch verkleinern und da sieht es schon ein bisschen charmanter aus und dazu gibt es vielleicht wieder ein Transparenzeffekt, sodass man sagen kann, die weiße Fläche wird leicht transparent in 80 Prozent, sodass man später ein Bild dadurch sehen kann. Und last but not least einen Button an dieser Stelle, damit auch klar ist, es hier geht es jetzt weiter. Diesen Button werde ich jetzt mit einer Kontur versehen. Einfach nur eine Kontur nach innen, zwei Pixel, einen Text da rein, (Tastatureingaben) Typischer Text dafür, für so einen solchen Button, heißt Weiter..., (Tastatureingaben) und auch hier die Merriweather. Ich verwende hier ausschließlich eher wenige Schriftgrade, das ist auch sehr wichtig, damit das Ganze auch übersichtlich bleibt und die Seite trotzdem auch schnell geladen wird. Und hier das Ganze in diesem Button jeweils zentriert in der Versalhöhe und dann sieht das schon mal ziemlich hübsch aus. So, das heißt, ich habe hier relativ schnell meinen gesamten Kopfbereich meiner Website eingerichtet und im Vollbildmodus, mit der Taste Shift+W kann ich meine gesamte Website einmal begutachten.

Gestaltungsgrundlagen für Webdesigner

Lassen Sie sich die Grundlagen guten Webdesigns anhand eines Praxisbeispiels näherbringen.

2 Std. 30 min (20 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:27.07.2017

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!