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.

HTML und CSS für Designer

Zusammenstellung der Inhalte

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Ähnlich wie bei der Zubereitung von Essen, bei der man zunächst die Zutaten einkauft und zurecht legt, wird man meist wohl auch bei Designarbeiten verfahren. Es werden notwendige Infos strukturiert, Texte erarbeitet und Bildmaterial besorgt.

Transkript

Nachdem der Kunde einen gebrieft hat, so dass man weiß, worum es bei dem Projekt geht, - oder man hat sich selber gebrieft und man ist in der Lage, ein Mockup fertigzustellen -, dann hat man die Grundlage dafür, nun in den weiteren Schritten das Ganze mit Inhalten zu füllen. Hier wird man vermutlich ähnliche Vorgehensweisen wählen, wie man sie bereits aus dem Printbereich kennt. Beispielsweise fängt man damit an, sich Gedanken um die textuellen Inhalte zu machen. Vielleicht vergibt man das sogar. Ob das ein professioneller Texter setzt, oder man das wieder selber macht, oder ob es Kolleginnen und Kollegen umsetzen, vollkommen egal. Hauptsache man kann durch ein solches Mockup jedem mitteilen: "Hey, schreib mir doch bitte mal die Headline." Eine Headline, die greifbar ist, die animiert, oder: "Schreib mir doch bitte mal einen Teaser zu dem Inhalt und zu diesem Themengebiet." Es folgt der Hauptartikel, es folgen Verweise, vielleicht Recherche-Hintergründe, weiterführende Beschreibungen, was auch immer. Weiterhin sucht man sich vielleicht noch Herausgeberinformationen zusammen, die wie bei einem Printprodukt auch in einem Impressum beschrieben werden müssen. Wenn man keine direkten Texte hat, sondern man weiß nur anhand eben eines solchem Mockups, wo Texte hingeschrieben werden sollen, dann helfen natürlich sogenannte Mustergeneratoren weiter. Da gibt's es im Netz ein paar schöne Seiten, also solche Blindtextgeneratoren. Ich habe hier mal einen aufgerufen, wo man den Klassiker lorem ipsum in allen möglichen Größen eintragen kann, mal auf Deutsch, mal auf Lingues. Oder mit einem komplett anderen Text: Werther, Kafka, Trapattoni - besonders lustig -, bis hin sogar zu Webstandards und so weiter und so fort. Also ganz gut geeignet. Alternativen gibt es haufenweise. Wenn Sie dort also die Websuche bemühen, dann werden sie da schon fündig. Ich habe sogar ein "Bavaria ipsum" gefunden. Wenn ich jetzt hier auf Start klicke, dann geht das los mit "Bavaria ipsum dolor...." und so weiter, und dann kommt offensichtlich - ich kann das nicht lesen - bairisch. --wie auch immer. Wichtig ist, dass Sie auf jeden Fall in die Lage versetzt werden, an Texte zu kommen, so dass das passend zu Ihrem Mockup gefüllt werden kann. Ich gehe dabei ganz gerne so vor, dass ich tatsächlich zunächst einmal Einzeldokumente habe. Das kann ein Word-Dokument sein, das kann ein beliebiges Textdokument sein. Das sammele ich dann. Durch alle Mitarbeiter wird das schrittweise gefüllt. Gleichzeitig, parallel oder auch im Anschluss daran sucht man sich das passende Bildmaterial dazu aus. Man greift auf Bilddatenbanken zurück und sorgt dafür, dass ein schönes Bild wie für das aktuelle Projekt überhaupt erst einmal die Aufmerksamkeit erregt. Dass es hier um Schottland geht, und dass man hier animiert wird, weiterzuklicken. Wir haben ein Bild der schottischen Küste; das ist oben bei Inverness in der Nähe, und alles an Bildmaterial, was Emotionen erwecken kann oder auch erklären kann, selbstverständlich. Solche Bildmaterialien, die bekommt man ebenfalls wieder über das Netz. Ich schließe das jetzt mal und mache einen neuen Browser auf. Da würde ich ihn ganz gerne neben den vielen Stockfoto-Anbietern, die Sie eventuell schon kennen und nutzen, etwas zeigen, wo man bei der Entwicklung eines Online-Mediums durchaus drauf zurückgreifen kann. Zum Beispiel gebe ich jetzt einfach mal den Begriff Schottland ein und lasse mal danach suchen. Mich interessieren aber nicht die normalen Treffer, sondern ich gehe mal auf Bilder, und das, was ich jetzt hier an Bildmaterial bekomme, das kann ich nicht 1:1 einfach so verwenden, allein aus lizenzrechtlichen Gründen, Urheberrechtsgründen und so weiter. Google bietet aber eine wunderbare Suchoption, nämlich die Nutzungsrechte. Wenn Sie hier auf den Button Suchoptionen klicken, dann haben wir hier unten "zur Wiederverwendung und Veränderung gekennzeichnet". Dann habe ich jetzt Bilder, wo ich mir sicher sein kann, so sicher, wie man sich im Netz sein kann, dass die überhaupt verwendbar sind. Ich rufe jetzt mal dieses Cattle auf, bekomme die Vorschau und gehe dann mal auf Seite besuchen. Jetzt bin ich hier in Wikimedia Commons, und die Information dazu, dass ich auf dieser Website bin, die würde sich jetzt irgendwo hier weiter unten finden, ich weiß nicht genau, muss ich jetzt selber suchen. Auf jeden Fall ist es ganz wichtig - da steht es: "File usage on Commons" -, dass ich diese Datei für die weitere freie Verwendung einsetzen kann. Da gibt es noch verschiedene weitere. Ich versuche mal, ob ich das jetzt auf die Schnelle ebenfalls finde, sind jetzt fast alles Bilder daher, von Wikimedia, das ist gar nicht so einfach. Jetzt finde ich gerade keine, aber das ist nicht weiter wild. Wichtig ist: Es sollte wirklich da stehen, dass sie zur freien Verwendung und Veränderung gekennzeichnet sind, und bei einigen Stockfoto-Anbietern steht sogar der Zusatz, dass man noch nichtmals einen Hinweis geben muss, vorher diese Quelldateien kommen. Warum ich ihnen das zeige, ist: Bei Printprodukten haben wir grundsätzlich immer die Aufgabe, wir müssen uns Grafikmaterial suchen, das einer entsprechenden Auflösung entspricht, um in guter Qualität drucken zu können. Bei einem Online-Medium steht uns eine viel größere Zahl an Fotografien zur Verfügung, weil es nicht in - pauschal gesehen - 300-dpi-Auflösung daherkommen muss. Da reichen oft schon 72, 100 oder 150 dpi. Diese Bildquellen mit solch einer dpi-Zahl, die sind für Online-Projekte natürlich viel, viel größer als für Print-Projekte. Nachdem dann alles an Material zusammengetragen wurde - wir wissen jetzt, wie das Mockup aussehen soll, wir haben das Bildmaterial, wir haben das Textmaterial -, kann man weitergehen und nun das eigentliche Dokument langsam schrittweise zusammensetzen.

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!