Grundlagen der Gestaltung: Layout

Webdesign

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Mit Wireframes lassen sich Websites mittels Werkzeugen wie Balsamiq Mockup skizzieren und als interaktiver Test verwenden.
06:26

Transkript

Eine Website kann auf unterschiedlichen Art und Weisen gestaltet und layoutet werden. Natürlich in einem graphischen Modus wie bei Adobe Muse aber auch in Tools mit so genannten Wireframes. Das sind also skitzzenartige Elemente und ein Werkzeug um das zu realisieren ist Balsamiq. Balsamiq ist also eine Software, die ich hier geladen habe, die dafür verwendet werden kann. Zunächst gibt es einfach die Möglichkeit, dass ich sage, ich ziehe mich hier mein Browser-Fenster raus. Die Website, die ich gestalten will, die heißt zum Beispiel so wie meine Firma Cogneus. Und dann kann ich hinterher dieses Fenster einstellen, wie groß und wie breit soll denn diese Website aussehen. Sie sehen schon, das Ganze ist so ein bisschen comichaft skizziert und genau das soll es eigentlich auch sein. Es soll also erstmal nur diese flüchtige Idee einer Website präsentieren. Jetzt gehe ich mal hier ungefähr so auf 1000 Pixel in der Breite und ich kann natürlich auch die gesamte Darstellung erstmal umändern, damit ich auch hier alle Elemente sehen kann. Zum einen dieses ganze Bedienelement hier packe ich nach links, damit die Elemente hier angeordnet sind und die Website da können wir natürlich auch hineinzoomen und rauszoomen. So jetzt haben wir hier zum Beispiel unsere Website liegen, können die in der Länge entsprechend einstellen zum Beispiel auf großzügige 728 Pixel und dann kann ich darin die Elemente unterbringen. Zum Beispiel hier soll ein Bild hinein. Die Größe stelle ich gleich ein und man sieht sofort die Pixelanzahl. Wenn ich hier so ein Element anwähle, dann erscheint hier auf der rechten Seite dieses Ausklappmenü und dann bekomme ich Informationen wie exakt die Größe oder die Autosize-Funktion, das heißt, die Elemente können sich direkt automatisch in der Größe anpassen. Natürlich kann ich jetzt ein Bild in diesen Platzhalter reinladen oder ich will später einfach diese Skizze weiterverwenden und deswegen lasse ich das jetzt erstmal so stehen. Welche Elemente gibt es noch? Es gibt zum Beispiel Buttons. Buttons in diversen Formen zum Beispiel Menüfunktionen. Ich brauche irgendwo später mal ein Hauptmenü, also kann ich hier mein Hauptmenü einrichten zum Beispiel Startseite. Dann gibt es Produkte, dann gibt es Über uns, dann gibt es Kontakt und sicherlich Impressum. So und wenn ich das eingegeben habe, dann sitzen da automatisch fünf Buttons und warten auf Funktionalitäten. Das heißt, ich kann sogar diese hinterher klickbar machen, damit das funktioniert. Das sieht alles wie gesagt im Moment ein bisschen komisch aus, weil es so krumm und schief ist, aber das soll es halt auch sein. Dafür macht man diese Mockups und deswegen heißt das Werkzeug auch so Balsamiq Mockup. Nun können wir noch andere Dinge tun, wie zum Beispiel Bilder einplatzieren, wir können Menüs einsetzen, Button, Reiter, etc. oder natürlich auch einfache Textfelder oder Listen oder zum Beispiel solche Daten-Container. Das kennen Sie sicherlich aus vielen Elementen zum Beispiel so einer Tap-Bar, dass ich sage es gibt hier verschiedene Tap-Elemente und darin passiert irgendwas und wenn ich das jetzt hochziehe, man sieht die Hilfslinien, dann kann ich damit auch mehrere Informationen jetzt zum Beispiel in so eine Tap Reiter reinsetzen. Und wenn mir das so in der Form nicht gefällt, dann kann ich halt die vertikalen Taps benutzen. Die vertikalen Taps, die kann ich hier ebenfalls mitreinskalieren. Das interessante ist dabei, das sind ja nicht nur Grafiken, die ich hier platziere, sondern das sind Codeelemente. Das heißt, aus diesem Layout heraus kann später ein Codegerüst erstellt werden, um damit später hinterher eine Website zu programmieren. Der Code ist also schon im groben vorhanden, es fehlen nur noch die Inhalte. Und damit man sieht, wie das überhaupt sich darstellt, kann ich her die View einfach umstellen. Ich kann nämlich das so genannte Skinning tauschen. Skinning heißt, dass ich hier diesen Zeichencharakter einfach tausche auf den Wireframe Skin. Und Wireframe wird jetzt geladen und dann sieht das Ganze ein bisschen professioneller und sauberer aus und dann kann man auch sehr genau, schon pixelgenau die Sachen miteinander ausrichten, wenn man der Meinung ist, da fehlt was oder da müsste doch irgendwo was rein, das Ganze ist also viel präziser. Jetzt konnte ich natürlich auch schon die ersten Elemente hier reinladen, zum Beispiel ein Bild oder auch gleich eine ganze Bildergalerie. Wenn man ansonsten noch mehr machen möchte in Richtung Balsamiq zum Beispiel auch mobile Websites, so kann man sich hier zum Beispiel in diesen Bereichen austoben. Das heißt, hier gibt es diverse Layoutelemente aber es gibt natürlich auch die Möglichkeit ein komplettes Tablet oder ein Samrtphone aufzurufen zum Beispiel hier haben wir mal ein iPhone und das kann man natürlich auch in das Layout ziehen. Man sieht hier schon, dann hat man hier entsprechend ein so genanntes Mockup einfach sitzen und kann dann auf dieser Fläche halt weiter gestalten. Oder ich brauche ein iPad, dann habe ich das natürlich hier auch oder mal eine komplette iOS Tastatur für solche Geschichten oder ein Drop-Down-Menü. Also das ist ein Mockup Tool nicht nur für Websites, sondern natürlich auch insgesamt für Software, die programmiert oder entwickelt wird. Und da gibt eine ganze Menge von Elementen, die hier darauf warten eingerichtet zu werden. Also Sie sehen, es gibt auch andere Möglichkeiten an ein Layout zu gehen. Normalerweise traditionell hat man das im Print immer in Form von Skizzen gemacht. Kleine Handskizzen, in den diesen Boxen zum Beispiel mit einem X versehen sind. Oder Textzeilen einfach nur markiert sind. Hier machen wir das heute in modernen Werkzeugen, wie Balsamiq oder anderen, die als Wireframe Tool dienen. Das heißt, Drahtgittermodelle, die letztendlich eine Idee skizzieren sollen und später wird daraus hinterher ein reales Produkt also spricht eine Website.

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!