HTML und CSS für Designer

Layout und Gestaltungsraster

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Bevor sich blindlings in die Umsetzung eines Design gestürzt wird, gibt es bestimmte Abfolgen und Vorarbeiten wie etwa die Erstellung eines Gestaltungsrasters, an denen man sich entlangtastet.

Transkript

Stellen Sie sich vor, Sie sitzen in einer Besprechung, wo es darum geht ein Printprodukt, ein Magazin, ein Reisemagazin für die Zukunft in ein Online- Magazin zu überführen. Also zum Beispiel eine Website. Genauso wie Sie bei der Planung des Printproduktes vorgehen werden, also bspw. rufen Sie ein Gestaltungsraster auf oder gestalten eins in einem Programm, das ihnen lieb ist, und dabei gehen Ыie nach ganz normalen klassischen Grundsätzen vor. Man macht sich Gedanken über Abstände, über Typographie über die Platzierung von Grafikmaterial, geht vielleicht sogar nach goldenem Schnitt und ähnlichen Regelwerk vor und erhält hinterher ein schönes fertiges Printprodukt. Im Großen und Ganzen vollzieht man die Entwicklungsarbeit für ein Online-Magazin oder eine Website auf gleiche Weise nur, dass ich das Gestaltungsraster ändern muss. Es ist klar, dass wir ganz anders ein Dokument betrachten, wenn wir auf den Bildschirm schauen als wenn es vor uns liegt in Form eines gedruckten Magazins. Und ein solches Gestaltungsraster bei modernen Webseiten könnte zum Beispiel so aussehen: Wir haben einen Header Bereich, einen großen Bereich und der übernimmt tatsächlich eine vergleichbare, ähnliche Funktion wie das Deckblatt eines Magazins. Das soll Interesse wecken, Aufmerksamkeit wecken Bei einem Magazin soll es mich dazu animieren überhaupt die Hand auszustrecken und es aufzuschlagen. und bei einer Website soll es dem Betrachter oder den Besucher einer solchen Seite überhaupt erstmal dazu animieren, länger wie eine oder zwei Sekunden zu verweilen und im Idealfall sogar in die Inhalte hineinzugehen. Das heißt, irgendwohin zu klicken oder zu scrollen. Dann erfolgt die eigentliche Umsetzung der Inhalte in Form von Texten von Bildplatzierungen und auch typografisches, alles, was mit schriftlichem Regelwerk zu tun hat, findet bei der Web-Entwicklung Anwendung. Egal, ob dabei Texte von einem Texter oder Texterin übersetzt werden oder ob man das alles selber macht, oder mit Blindtexten arbeitet. Hier ist der Berührungspunkt schon sehr, sehr groß. Solch eine Umsetzung, solch eine Planung nennt man aus dem Entwicklungsbereich Wireframe oder Mockup und solch ein Mockup können Sie im Grunde mit jedem beliebigen Programm verwirklichen, wo Sie gestalten können. Dabei verwendet man üblicherweise oder setzt man üblicherweise eine Kombination zwischen Vektorprogramm, Grafikprogramm oder Bildbearbeitungsprogramm und Satzprogramm ein. Da ist es vollkommen egal, von welchem Hersteller das kommt, Hauptsache, man ist in der Lage. die eigene Idee, die man im Kopf hat, zumindestens als Mockup, als Planungsvorgabe zu setzen.

HTML und CSS für Designer

Steigen Sie als Designer ein in HTML und CSS. Sie gestalten ein responsives Reisemagazin und erleben dabei, dass der Workflow beim Gestalten nicht anders ist als gewohnt.

3 Std. 9 min (39 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!