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

Werkzeuge fürs Webdesign

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Neben den "Klassikern" Photoshop und Illustrator können Sie auch Programme wie Muse heranziehen, um Websites zu gestalten.
10:39

Transkript

Wenn Sie sich noch nicht hundertprozentig im klaren darüber sind, mit welchem Werkzeug Sie eigentlich eine website gestalten wollen, so zeige ich Ihnen in diesem Video, welche Sie nutzen können. Zum Beispiel fangen wir mit Illustrator CC an. Illustrator CC hat natürlich die Option, dass wir auch mit Webgrafiken arbeiten können. Und das nicht nur einfach so als Format, sondern wir können uns erst mal zunächst ein leeres Blatt Papier sozusagen in Pixelgröße anlegen. Wir können aber auch aus vorgegebenen Vorgaben arbeiten. Das heißt, hier gibt es zum Beispiel komplette Layouts, die schon mal eine Websitestruktur, eine Landingpage zum Beispiel zeigen können. Das Ganze ist kostenlos, ist innerhalb von Adobe Stock und kann einfach so heruntergeladen werden, innerhalb der Adobe Stock-Integration in Illustrator. Das ist eine neue Technik, die es mir erlaubt, in der Creative Cloud solche Vorlagen zu verwenden. Diese Vorlagen werden jetzt hier geöffnet und dabei werden auch Typekit-Schriften verwendet und synchronisiert. Also durchaus Dinge, die automatisch im Hintergrund passieren. Das ist natürlich sehr praktisch, wenn ich hier mit solchen Vorlagen arbeite, wo ich an sich erst mal nichts weiter vorbereiten muss. Diese Vorlagen sind zum Üben mal sehr gut geeignet, eventuell auch zum Umbauen für Ihre eigenen Zwecke, damit Sie nicht von Grund auf neu arbeiten müssen. Das ist natürlich immer sehr praktisch, wenn man sich grundsätzlich im Layout bewegt, vor allem fürs Webdesign. Das heißt, hier sieht man schon, hier ist sozusagen der Layoutaufbau bereits schon passiert, so dass ich einfach nur meine Inhalte einfügen kann, zum Beispiel eine Foto-Übersicht und direkt per Drag-and-drop weiterarbeiten kann. Das Ganze ist natürlich sehr komfortabel und hier habe ich die Startseite mit einem Slider sozusagen, mit Ansichten und Services und den Footer und dann eine Unterseite mit vielen Bildern und eine Seite mit etwas größeren Bildern und kleinen Text darunter. Also, das lässt sich sicherlich bequem umarbeiten. Ähnlich ist das Ganze mit Photoshop zu handhaben. Innerhalb von Photoshop habe ich ebenfalls die Möglichkeit, eine neue Datei zu öffnen und auch hier haben wir diesen Reiter Web. Web bedeutet natürlich unter anderem in Photoshop auch, dass ich in sRGB arbeite, aber da Photoshop nun mal ein Pixel-Grafikprogramm ist, wird natürlich alles in Pixeln, also als Bildinformationen aufgegriffen. Hier gibt es tatsächlich auch wieder Vorlagen, Vorlagen, die über Adobe Stock synchronisiert werden. Zum Beispiel Webbanner, einfach Grafiken also, mit der wir kleine Werbeanimationen bauen können oder wir haben hier sogar ein modernes Layout oder sogar responsive Seitenlayouts. Und das kann ich mir einmal kurz in der Vorschau angucken. Responsive bedeutet hier natürlich, dass sich die Website in der Desktop-Darstellung sehe, aber auch eine mobile Darstellung hier nutzen kann. Und da sieht man schon, was man hinterher für Schwierigkeiten hat, in der Bildgestaltung allein. Man muss natürlich völlig andere Auschnitte wählen, vielleicht sogar andere Bilder. Und so kann man wunderbar erkennen, wie denn diese Seite aufgebaut wird und diese Grafiken kann man hinterher auch weiter verarbeiten und natürlich mit den eigenen Texten und Bildern nutzen. Auch das werde ich mal herunterladen und werden sehen, wie das funktioniert. Adobe Stock wird hier ebenfalls als Vorlage lizenziert. Wenn ich die Vorlage öffne, werden auch hier über Typekit die fehlenden Schriften aufgelöst und werden natürlich nachträglich geladen und so habe ich hier innerhalb von Photoshop zwei Zeichenflächen. Das ist hier sehr schön gehandhabt innerhalb der neuen Umgebung und wir können hier natürlich bequem reinzoomen und selbstverständlich alles überarbeiten. Diese ganzen Elemente die wir hier sehen, die lassen sich natürlich auch hier jeweils adressieren. Und wenn wir hier zum Beispiel ein Bild einfügen können, dann handelt es sich hier um ein Smartobjekt, das heißt, dieses Smartobjekt kann ich dann einfach als neue Datei öffnen. Wir sehen hier die Grafik und die Maske, die sich darauf bezieht und dann wird das Bild quasi hier wieder in diesem Titel eingebaut. Dazu auch die mobile Darstellung, wenn ich das möchte, nur für die Vergegenwärtigung und wir können, was in Photoshop einzigartig ist, das Ganze mit Device Preview synchronisieren. Das heißt, ich kann mein iPhone beispielsweise oder auch mein Tablet per USB-Kabel anschließen und hinterher synchronisieren und quasi auch schon mal ein bisschen auf dem Screen rumschieben, um zu gucken, wie die Größenverhältnisse sind, ob alles erreichbar ist. Das Ganze ist sehr simpel und kostet nichts extra. Hier gibt es eine kostenlose App von Adobe als Preview-Fassung. Diese Technik ist hier nur in Photoshop eingebaut, die hat Illustrator zum Beispiel nicht. Ein drittes Programm aus der Adobe Familie, um Websites zu erstellen, ist tatsächlich ein Programm, was genau dafür programmiert wurde. Eine Website könnte mit Adobe Muse auch programmiert werden. Adobe Muse wird schon seit geraumer Zeit angeboten und besonders für Einsteiger ist das interessant, weil ich hier nämlich sagen kann, ob ich mit variabler Breite oder mit fester Breite arbeite. Variabel bedeutet, ich arbeite mit einer responsiven Seite, responsiv heißt also, mobil, Desktop und Tablet kann ich separat adressieren oder eine feste Breite, wo ich sage, ich habe die Seitenbreite von 960, ich habe zwölf Spalten und damit ist gut. Und das Ganze soll bitte als neue Seite eingestellt werden. Nun habe ich hier allerdings eine etwas andere Darstellung, als in den anderen Programmen. Bei Photoshop geht es mehr darum, die reine visuelle Erscheinung auf einer Seite zu lösen. In Illustrator mehr die Grafiken oder auch die vektorgrafischen Techniken von Illustrator. Hier sieht es mehr nach der Seitenstruktur aus. Das heißt, ich kann hier mit relativ einfachen Mitteln Unterseiten erzeugen, die allerdings hier auf einer Art Musterseite basieren. Wenn Sie sich mit InDesign auskennen, dann wissen Sie ungefähr, was ich meine. Das heißt, Objekte, die hier auf der Musterseite liegen, werden hier auch auf die anderen Seiten verteilt. Das ist einfach so der grundsätzliche Vorgang von diesen Seiten. Hier die Homepage, also quasi die Startseite und dann kann ich hier die Unterseiten einsetzen zum Beispiel Unterseite1, Unterseite2 et cetera und die kann ich natürlich auch separat betiteln, auch da gibt es noch mal Optionen, weitere Unterseiten zu schaffen, also Strukturen zu schaffen innerhalb dieses Seitenbaums. Jede Seite kann ich dann separat öffnen per Doppelklick. dann habe ich hier mein Spaltenraster und habe hier sogar eine kleine Erklärung, wie das Ganze weiter geht. Das heißt, wir können hier ähnlich wie in InDesign auch Objekte einfach aufziehen, nach diesen Spaltenrastern ausrichten, jeweils die Fläche und Kontur wählen, als Beispiel können mit Farben auch natürlich arbeiten, mit Effekten, Das heißt so was wie Schatten et cetera ist hier ebenfalls möglich und dahinter steckt natürlich CSS-Code, das heißt, wenn ich hier etwas gestalte, kommt CSS auch hinten bei raus. Und das sieht man einfach daran, dass ich auch mit typografischen Formaten arbeiten kann. Also wenn wir hier zum Beispiel eine Headline einstellen beispielsweise als Text, so habe ich hier auch die Option mit Textformaten zu arbeiten, mit Webstandards, also mit Webschriften oder auch mit eigenen Schriften, über das Typekit synchronisiert. Adobe hat hier also die eigenen Fontdienste gleich mit eingebaut. Ähnlich ist es hier auch noch mal erreichbar in diesem Drop-down-Menü. So, diese Formate lassen sich natürlich alle überarbeiten und was auch noch interessant ist, es gibt Widgets. Widgets sind kleine Elemente, die hier einfach das Leben erleichtern. Wenn man zum Beispiel sagt, ich brauche hier kein einfaches Bild, sondern ich brauche an dieser Darstellung hier eine Diashow. Das heißt, ich kann dann hier einfach eine einfache Diashow integrieren, zum Beispiel so. Und dann habe ich bereits alle Komponenten quasi an Bord. Ich habe hier quasi schon die Thumbnails, die Seitenvorschau. Ich hab hier die große Seite, wir haben hier tatsächlich Schaltflächen, die auch jetzt interaktiv bereits sind, sodass ich sie schon mal austesten kann und man kann wirklich per Drag-and-drop alle Elemente hinterher tauschen. Diese Widgets sind durchaus vorteilhaft. Man kann Sie sehr schön integrieren in die eigene Arbeit. Davon gibt es eine ganze Menge. Da gibt es auch noch andere interaktive Elemente, wie ein Akkordeon beispielsweise, Formularfelder, ein einfaches Kontaktformular, beispielsweise et cetera. Also wenn sich mit dem Programm weiter beschäftigen wollen, ist das durchaus interessant, allerdings erzeugt Muse hier wirklich statische Websites, das heißt, wir können hier keine dynamischen Seiten erstellen, höchstens können wir dann zum Beispiel HTML-Seiten exportieren, die wir dann anschließend dem Programmierer geben, zur Überarbeitung. Vorsicht an dieser Stelle. Nicht jeder Programmierer kann mit dem Code von Muse so viel anfangen, weil Muse hier etwas mehr Code erzeugt, als vielleicht der ein oder andere Programmierer sehen möchte. Aber das sind natürlich immer wieder Diskussionsgrundlagen, wie der Prozess mit Entwicklern zusammen hinterher erstellt wird und wer dann das Ganze umsetzt. Also probieren Sie es mal aus. Wenn Sie mit Muse zum Beispiel Erfahrungen sammeln wollen, kann ich Ihnen das wärmstens empfehlen. Alternativ gilt natürlich Illustrator und besonders Photoshop als Werkzeuge der Wahl.

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!