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

Inhaltselemente nutzen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Dieses Video zeigt verschiedene Typen der Informationsdarstellung im Überblick: Abschnitt (Hintergrund), Spalten, Text, Bild, Text/Bild-Kombination sowie Buttons.
10:00

Transkript

In diesem Video zeige ich Ihnen, wie Sie ganz genau Inhalte in Form von Abschnitten in Spalten und weiteren Boxen unterteilen können. Das mache ich hier mit dieser Datei. Die ist zunächst natürlich auch gar nicht so vom Format dafür geeignet, dass hier noch weitere Inhalte dadrunter passen, aber das lässt sich relativ leicht einstellen. Ich nehme nämlich hier das Seitenwerkzeug in InDesign und kann die Höhe hier um ein Vielfaches erhöhen, zum Beispiel 4 mal 800, dann sind wir schon bei 3200 Pixel. Das macht nichts, da haben wir nämlich hier oben unseren Header jeweils mit einem Titelbild und da darunter können weitere Boxen beginnen und das Ganze scrollt hier nach unten. Das heißt, je mehr Inhalt wir auf der Seite verteilen, umso mehr können wir die Seite nach unten auch verlängern. Kommen wir mal zu diesem Bereich hier. Also wir sind hier im Layoutbereich, das ist dieser Boxbereich, also der Content-Bereich, 960 Pixel, und dort stelle ich zunächst einfach mal eine weitere Box ein, und zwar ist das hier in dieser Form einfach ein Farbfeld zum Beispiel mit einem zehnprozentigen Grauton, und zwar nicht auf der Kontur, sondern auf der Fläche. So, diese Box, die ist also hier in dem Fall auch 600 Pixel hoch, so stelle ich die ein, 1280 breit, 600... Nehmen wir mal 640 hoch, dann haben wir ein schönes zwei zu eins-Verhältnis. Und jetzt können wir weitere Inhalte dadrin integrieren. Und das werden wir hier mit den Boxen machen und das werde ich hier einfach so machen, dass ich sage, innerhalb des Inhaltsbereiches sollen drei Boxen nebeneinander liegen. Wenn ich hier die Pfeiltasten nach rechts bewege, kann ich hier drei Boxen gleichzeitig aufziehen. Und die erhalten jetzt eine weiße Farbe, damit ich sie vom Untergrund auch erst mal grob unterscheiden kann. Ganz genau hundertprozentig muss das jetzt natürlich in dieser Form noch nicht sein. Und im nächsten Schritt haben wir hier innerhalb einer solchen Box natürlich einen Innenabstand und einen Außenabstand. Innenabstände lassen sich natürlich am besten mit Textrahmen gestalten, also klicke ich hier mal hinein und sage, hier ist eine Headline, und diese Headline hat vielleicht erst einmal eine gewisse Größe, zum Beispiel 22 oder nehmen wir mal 24 Pixel, zentriert. Und damit kann dieser Textrahmen auch einen Innenabstand bekommen, über die Textrahmenoptionen, sagen wir auch hier 10 Pixel von unten links und von rechts. Die Typografie der Headline, die lasse ich im Moment außen vor, das ist im Moment nicht wichtig. Wichtig ist mir jetzt die weitere Strukturierung von Inhalten, und zwar werden wir jetzt hier noch ein Bild einfügen, das heißt, hier an dieser Stelle haben wir irgendwo ab einer gewissen Position ein Bild und wir kommen natürlich dann damit auch in die Fragestellung: Wie sind denn die Bildformate überhaupt geeignet? Welche Bildformate sind am besten und welche weniger? An dieser Stelle werde ich hier einfach nur ein Bild erst mal integrieren. Nehmen wir mal an, das wäre jetzt einfach mal blau, damit wir sehen, da passiert auch gleich was, wenn wir später ein Bild hier einfügen, und dieses Bild bekommt hier eine Breite. Alleine durch den Inhalt, durch diese Box und durch den Innenabstand haben wir natürlich hier irgendwo auch eine gewisse Breite eingerichtet, sodass sich hier dieser Rahmen natürlich auch daran hier orientieren kann. So, jetzt muss ich das Ganze noch ein bisschen verbreitern. Ach, ein weiteres Pixelchen... So, und jetzt haben wir es deckungsgleich und die Box ist 293 Pixel breit und wir wollen Sie auch in der Höhe einstellen. Doch welches Höhen- und Seitenverhältnis empfiehlt sich hier? Zum einen sind Quadrate gar nicht so schlecht, weil Höhe und Seitenverhältnis natürlich neutral sind, aber im Web gibt es doch immer wieder die Ausrichtung, dass das Ganze querformatig besser funktioniert, und grundsätzlich im Zwei-zu-drei- oder Drei-zu-vier-Verhältnis. Das heißt also, wir nehmen diese 293 in der Höhe und können hier ein bisschen damit rechnen. Im Moment ist das ein Quadrat, und dann sage ich, das Ganze ist durch drei und danach mal zwei. Jetzt habe ich ein Zwei-zu-drei-Verhältnis für diesen Rahmen auf der Basis der Breite 293. Das ist natürlich ein sehr krummer Wert, deswegen mache ich den ganzzahlig auf 195 Pixel. So, dieser Rahmen, der hängt jetzt hier drin, und ich kann als nächsten Schritt noch eine weitere Textbox integrieren beziehungsweise auch einen Textrahmen einfach dadrüber ziehen, das geht natürlich auch, und den erst mal mit Platzhaltertext füllen, damit wir überhaupt was sehen. So, dieser Rahmen, den setze ich jetzt einfach mal direkt unter das Bild. Warum jetzt ausgerechnet direkt dadrunter? Nun, das hat einfach den unschlagbaren Vorteil, dass ich über die Innenabstandeinstellungen wiederum sagen kann, dass der Textrahmen nach oben einen Abstand zum Beispiel von zehn Pixel hat. So haben wir immer wieder dieselben Werte innerhalb des Layouts, ohne dass ich die Rahmen dann extra einstellen muss. Verschieben sich beide oder verschiebt sich diese Höhe, so bleibt dieser Abstand gleich und man ist einfach schneller in der Gestaltung. So, wir haben noch keine weitere Typografie, das ist hier irrelevant, aber wir brauchen noch einen Button als Abschluss. Wir wollen nämlich quasi eine Anleserbox erstellen, sodass hier an dieser Stelle eine Ankündigung ist mit einem Bild und einer kleinen Textnachricht und da dadrunter kommt natürlich der Button. So, den Button werde ich jetzt allerdings nicht in der vollen Breite einstellen und auch nicht in der vollen Höhe, sondern hier lasse ich ein bisschen Platz, und zwar von unten können wir dann einfach mal rechnen, minus -- zum Beispiel -- 20 Pixel und der Button selbst ist 40 Pixel hoch. 40 Pixel ist ungefähr ein recht gutes Maß, um solche großen Schaltflächen darzustellen. Das kann man natürlich auch in der Programmierung später noch genauer beeinflussen. So, und das Ganze vielleicht mit einer zwei Punkt starken Kontur nach innen und wir brauchen natürlich noch so was wie einen Anreißer. Warum soll jetzt jemand hier auf diese Fläche klicken? Da muss natürlich was rein und man kann hier natürlich einen Text eingeben, und zwar hier in die Box. Und so klicke ich mit dem Textwerkzeug einfach in die Box hinein und sage: "Weiter..." Die genauere Ausformulierung, die lässt sich natürlich noch differenzieren. Das macht durchaus Sinn, hier nicht alles immer nur nach "Weiter..." zu markieren, aber fürs Erste, für das Layout, für den Layoutaufbau, kann ich damit sehr gut arbeiten. So, das Ganze noch einmal vertikal zentriert, Sie sehen, das ist eine sehr häufige Funktion, die ich hier immer wieder in InDesign auch anwende, die auch tatsächlich im Webdesign sehr häufig vorkommt, dass man etwas vertikal in einer Box ausrichtet, sodass man hinterher recht schnell weiterarbeiten kann. Und hier nehme ich einfach noch eine andere Schrift, damit sich das schon mal von der normalen Schrift hier unterscheidet, und auch die Größe wird hier differenziert im Gegensatz zur Lesegröße. Jetzt habe ich eine komplette Komponente erstellt, das heißt, wir haben hier eine Box mit einem Bild, wir haben einen Text darunter und wir haben einen Button. Und wenn sich jetzt zum Beispiel etwas ändern sollte, dass ich der Meinung bin, das Bild könnte doch noch etwas tiefer, dann kann ich das hier natürlich so einstellen und ich kann natürlich auch Box und Hintergrund ebenfalls mitnehmen, einmal gruppieren über den Tastenbefehl Strg+ oder Apfel+G und diese weiteren Boxen, die hier eigentlich daneben kommen sollten, die kann ich hier einfach schön weiter duplizieren mit gedrückter Alt-Taste. Alle Boxen sind jetzt gleich beschaffen und können damit weiter gestaltet werden. Sie sehen also, gemeinschaftliche Komponenten zu gestalten, ist sehr wichtig, um die Einheitlichkeit der Seite zu gewährleisten. Jetzt habe ich zunächst hier einen Headerbereich und ich habe jetzt hier dadrunter einen weiteren Content-Bereich. Und dieser Content-Bereich, der hat vielleicht auch noch mal so seine Raffinessen, das heißt, ich kann zum Beispiel gucken: Wie hoch ist denn jetzt der Abstand von oben und nach unten? Und dann nehme ich jetzt einfach diese Fläche und sage, ich gebe hier einfach plus 200 Pixel drauf, und jetzt weiß ich, der Abstand nach oben ist 100 und der Abstand nach unten ist auch 100, alles wird einmal zusammen gruppiert und ich schiebe das Ganze unterhalb des vorherigen Sliders. Nun kann ich die nächste Komponente aufbauen, entweder mit den selben Elementen oder mit zwei Spalten oder einfach nur eine Headline oder einen Text.

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!