Informationsdesign: Eine datengesteuerte Kampagne in Figma erstellen

1. Willkommen bei Informationsdesign!: Alle Designer, unsere Informationsdesigner. Die Welt ist voller Informationen und es Aufgabe eines Designers, sie zu organisieren, verstehen und auf eine Weise zu präsentieren, die Spaß macht und für jeden zugänglich ist. Die grundlegenden Fähigkeiten zur Organisation und Visualisierung von Informationen sind äußerst universell und können in jedes Designprojekt implementiert werden . Ich bin Carolyn-Grafikdesignerin und freue mich sehr, Ihnen heute die Grundlagen des Informationsdesigns vorstellen zu können. Ich habe letzten Sommer an diesem wirklich großartigen Informationsdesign-Kurs an der RISD teilgenommen und war so aufgeregt, meine neuen Fähigkeiten in all meinen Designprojekten anwenden zu können. Deshalb werde ich heute diese Fähigkeiten, die ich gelernt habe, mit Ihnen teilen und Ihnen beibringen, wie Sie Ihr eigenes persönliches Informationsdesign-Projekt für Ihr Portfolio erstellen Ihr eigenes persönliches Informationsdesign-Projekt können. Unterwegs erlernen Sie diese wichtigen Designfähigkeiten, indem Sie Inhalten Form verleihen, visuelles Storytelling, Empathie für Benutzer üben, strategische Designsysteme aufbauen und visuell kohärente Projekte erstellen . Du übst deine neuen Fähigkeiten, indem deine Recherchen in Skizzen umwandelst , eine übersichtliche Gruppe von Informationsdesigns erstellst, eine Webseite und ein Social-Media-Bild entwirfst, um deine Designs zu präsentieren in und bei Figma für Grafik- und Webdesign tätig. Dieser Kurs richtet sich an alle Kreativen aller Könnensstufen, vom Anfänger bis zum Fortgeschrittenen, die mehr Fähigkeiten im Bereich visuelles Geschichtenerzählen und Grafikdesign erlernen möchten . Sie werden in Figma arbeiten , einem wachsenden Design , das kostenlos und einfach zu bedienen ist. In diesem Kurs haben Sie ein fantastisches Informationsdesign-Projekt, das Ihre kommunikativen und visuellen Problemlösungsfähigkeiten in den Bereichen Grafikdesign, Webdesign und digitales Design wirklich Ihre kommunikativen und visuellen Problemlösungsfähigkeiten in den Bereichen Grafikdesign, Webdesign unter Beweis stellt. Ich kann es kaum erwarten zu sehen, was Sie für Ihr Projekt einfallen lassen. Also lass uns anfangen. 2. Projekt: Für diesen Kurs möchte ich, dass Sie als Teil einer größeren datengesteuerten Kampagne ein Webseitendesign und ein Social-Media-Bilddesign erstellen einer größeren datengesteuerten Kampagne ein Webseitendesign und ein Social-Media-Bilddesign . Dieses Kampagnenprojekt wird drei visuell zusammenhängende Informationsgrafiken enthalten drei visuell zusammenhängende Informationsgrafiken , die Sie zu einem Thema Ihrer Wahl erstellen werden. Schließt Ihr Projekt in wenigen einfachen Schritten ab. Recherchiert Ihr Thema, erstellt ein Brainstorming und skizziert einige Ideen und wandelt diese Skizzen dann in ein vollständig entworfenes System um , aus dem Ihre datengesteuerte Kampagne besteht. Du benötigst ein paar Werkzeuge und Materialien, um dir während des gesamten Unterrichts zu helfen. Du benötigst Zeichenmaterialien wie Stifte, Marker und Papier, um dir beim Brainstorming deiner Grafiken zu helfen. Und dann brauchst du Figma, ein Online-Design-Tool, das wir für die Gestaltung deines Kampagnenprojekts verwenden werden . Es ist einfach und kostenlos zu benutzen. Sie müssen es nicht einmal herunterladen. Sie können einfach die Browserversion verwenden. Gehe einfach zu figma.com , um loszulegen. Am Ende des Kurses laden Sie Folgendes in die Projektgalerie hoch. Ihre Skizzen Ihrer Informationen, Grafiken und Bilder Ihrer Webseite und Social Media-Designs. Du kannst deine Skizzen oder Ideen jederzeit während des Unterrichts hochladen , um Feedback von mir und deinen Mitschülern zu erhalten . Bevor wir mit Ihrem Projekt beginnen, lassen Sie uns inspirieren, etwas mehr über Informationsdesign zu erfahren und einige wirklich spannende Beispiele zu sehen. 3. INFORMATIONSDESIGN: Informationsdesign ist die Praxis Informationen so zu präsentieren , dass ein effektives und effizientes Verständnis dieser Informationen gefördert wird. Um mich inspirieren zu lassen, bevor wir mit unseren Projekten beginnen, werde ich euch einige Beispiele für Infografiken zeigen . Dies ist ein super großartiges Buch mit dem Titel Informationsgrafiken, und ich kann es im Abschnitt Projekte und Ressourcen verlinken . Es geht also gewissermaßen um eine breite Geschichte von Beispielen für Informationsgrafiken, beginnend mit altägyptischen Gräbern. Dies ist eine sehr frühe Form des Grafikdesigns, bei der es sich im Grunde nur um eine Karte mit einer Reihe von Bildern handelt. Dies ist ein Beispiel für eine Grafik, die auf dem Cover amerikanischer Wissenschaftler war . Es ist sehr kompliziert, also ist dies eine vergrößerte Version davon. Aber es ist im Grunde nur dieser große Kreis. Und es verwendet Farbcodierung. Und macht sogar einige der irrelevanten Informationen dahinter grau , sodass die farbigen Informationen wirklich herauskommen und wir sie leichter lesen können . Aber wenn dies offensichtlich eine sehr komplexe Grafik ist, zeigt sie menschliche DNA im Vergleich zu Hunde-DNA. Eigentlich. Ich denke, das ist eine wirklich interessante Infografik, die den Vergleich von Audio- und Videotechnik zeigt . Sie können also ein typisches Diagramm sehen, wie Balkendiagramme und solche Dinge, oder ein Liniendiagramm hier unten. Aber ich finde es wirklich nett, dass sie diese Illustrationen an den Seiten hier aufgenommen haben . Das hilft uns wirklich dabei, eine Verbindung herzustellen, oh, das ist ein Blu-ray-Schreibtisch. Es geht um Video, oder es ist ein iPod und es geht um Musik. Ich denke, das begrenzte Farbschema hier und die Illustrationen helfen uns als Publikum, die Informationen schnell zu verstehen. Hier ist ein weiteres Beispiel dafür, wie der Designer bei der Verwendung eines sehr begrenzten Farbschemas hervorragende Arbeit geleistet hat . Offensichtlich ist es nur Schwarz, Weiß und Brot. Und ich schätze, es gibt diesen späteren Rotton hier. Sie verwenden jedoch Bilder und Bilder , um das Thema viel schneller mit dem Publikum zu verbinden . Sie können hier also sehen, hier dreht sich alles um Michael Jackson. Alles auf diesem Poster oder diesem Zeitungsartikel hat mit den Zeitleisten zu tun. Wir können hier also 1972 sehen und nebenan ist ein Bild. Also so sah er an diesem Tag aus. Und das war es, was an diesem Tag vor sich ging. welchem Musikstil hat er gearbeitet? Ich denke, das ist eine wirklich interessante und strategische Art , all diese Informationen über Michael Jackson darzulegen. Also hier haben wir dieses einfache Diagramm. Wir können die Preise in der Nacht sehen, im 19. Jahrhundert, und dann können wir sehen, dass sie direkt neben 2008 verglichen werden. Und dann sind dies alle aufgelisteten und farblich codierten Länder mit diesen kleinen Ringen neben ihnen. Aber wir können eine viel interessantere Visualisierung davon sehen . Diese Zahlen in dieser diagonalen Grafik in der Mitte dieses Posters. Die Farben entsprechen den in dieser Tabelle aufgeführten Farben. Und es ist einfach wirklich faszinierend, einen visuellen Vergleich zu sehen. Dies ist eine wirklich großartige Möglichkeit, die Informationen anzuzeigen und Sie nicht nur in der Tabelle zu informieren. Es macht tatsächlich beides, was wirklich gut für Leute ist, die vielleicht die aufgelisteten Zahlen sehen möchten. Anstatt es visueller zu abstrahieren. Dieses Buch, das kein Designbuch ist, ist eigentlich ein Kochbuch . Es zeigt Ihnen wirklich tolle Visualisierungen der im Buch enthaltenen Informationen. Dies ist ein Beispiel für verschiedene Dressings, die Sie nach den Rezepten im Buch zubereiten können . Das ist eine Art Achse. Sie können also von leicht, zart, cremig, zu knusprig wechseln , und alles ist wieder richtig schön farbcodiert. Und je nachdem welcher Art von Dressing du suchst, findest du es auf der Achse. Wenn ich also etwas Knuspriges und Cremiges haben möchte, kann ich in diesen unteren rechten Quadranten schauen. Wir können nicht über modernes Informationsdesign sprechen ohne über Georgia Loopy zu sprechen. Sie ist eine auf Menschen ausgerichtete Informationsdesignerin, die Informationen persönlicher und nachvollziehbarer macht . Hier ist ein Projekt , das sie mit einer Freundin, Stephanie postsynaptic, Deer Data genannt hat . Sie dachten im Grunde über ihre Woche nach, wählten ein Thema aus und repräsentierten dieses Thema in einer Woche ihres Lebens und schickten es sich gegenseitig für ein Jahr. Dies ist also ein großartiges Beispiel dafür , wie Informationen Spaß machen und sie zu einem Teil Ihres täglichen Lebens machen. Das war nur ein wirklich schneller Überblick über einen riesigen Bereich des Grafikdesigns. Ich hoffe, dass du inspiriert bist und bereits einige Ideen für dein eigenes Projekt hast. Lassen Sie uns also mit diesem Projekt und der nächsten Lektion beginnen. 4. Wähle dein Thema: Wir haben einige Grundlagen des Informationsdesigns gelernt und in der letzten Lektion einige wirklich coole Beispiele gesehen. Ich denke also, wir sind bereit, mit unserem Designprojekt zu beginnen. Ihr erster Schritt besteht darin, Ihr Thema auszuwählen. Es kann alles sein, vom Klimawandel über Tiere, Musik, Kochen, was auch immer Sie interessiert. Ich werde das Thema Waffen in Amerika wählen. Ich habe das Gefühl, dass wir in letzter Zeit leider so viel über Massenerschießungen gehört haben , Schießereien an Schulen in Amerika. Und ich wollte mehr über die Statistiken hinter dieser Gewalt erfahren . Und mir durch Design etwas beibringen, was ich an Design liebe. Sie können alles zu jedem Thema entwerfen, und am Ende Ihres Projekts werden Sie mehr darüber erfahren. Sobald Sie sich für Ihr Thema entschieden haben, möchte ich, dass Sie ein Objektiv, einen Blickwinkel, eine Geschichte auswählen, die Sie über Ihr Thema erzählen möchten. Dieses Projekt ist eine Übung und visuelles Geschichtenerzählen. Was ist also die Geschichte, die Sie mit Ihrem Design erzählen möchten? Ich werde darüber sprechen, dass Waffengewalt ein sehr einzigartiges amerikanisches Problem ist. Das wird also meine gesamte Recherche und die drei Informationsgrafiken, die ich heute in dieser Klasse erstellen werde, konzentrieren die drei Informationsgrafiken, die . Wählen Sie Ihr Thema und die Geschichte aus, die Sie erzählen möchten , damit wir in der nächsten Lektion mit der Recherche beginnen können. 5. Recherche: Du hast dein Thema ausgewählt. Kommen wir nun zu einigen Inhalten. Recherchieren Sie mindestens drei verschiedene Informationen, die die Geschichte vermitteln, die Sie zu Ihrem Thema erzählen möchten. Hier ist ein Beispiel für eine Information , die ich gefunden habe und aus der ich eine meiner Informationsgrafiken sein kann. Hier sind die Informationen, sie sind nur in einem Textdokument geschrieben. Und hier ist ein Beispiel dafür , wie ich das später in meine Informationsgrafik umgewandelt habe. Dies ist ein Prozess, bei dem Inhalt Form verliehen wird. Der Inhalt ist Ihre Information und das Formular ist Ihr zukünftiges Design. Hier finden Sie einige schnelle Tipps zum Sammeln von Recherchen und Informationen. Erstellen Sie ein Textdokument, um die Informationen zu sammeln, die Sie verwenden möchten. Dies kann Ihr Sammeldokument sein, in dem Sie bestimmte Statistiken und Informationen aufschreiben können bestimmte Statistiken und Informationen Sie visualisieren möchten. Und Sie können hier auch auf Ihre Quellen verlinken. Denke daran, welche Geschichte du mit deinem Thema zu erzählen versuchst. mich z. B. Ich konzentriere mich z. B. darauf, dass Waffengewalt ein einzigartiges amerikanisches Problem ist. Meine Informationen werden sich also auf den Vergleich amerikanischer Statistiken über Waffengewalt mit anderen Ländern konzentrieren Vergleich . Zu meiner Information werde ich einige Informationen über Todesfälle durch Schusswaffen pro 100.000 Menschen in verschiedenen Ländern, einschließlich Amerika, beifügen. Amerikaner sterben zehnmal häufiger durch einen Tod im Zusammenhang mit einer Schusswaffe als Menschen in 22 anderen Industrieländern. Anzahl aktiver Schützen pro Jahr in den letzten 20 Jahren. Dann könnte ich diese Information darüber einbringen, wie Amerikaner Waffengewalt in den USA betrachten. Während dieses Kurses möchte ich, dass Sie drei Informationen festhalten und drei Informationsgrafiken erstellen. Das Tolle an diesem Projekt ist jedoch, dass es später skaliert werden kann. So können Sie aus Hunderten von Informationen Hunderte von Informationsgrafiken erstellen. Schließe alle Recherchen ab, die du benötigst, um in der nächsten Lektion mit dem Skizzieren deiner drei Informationsgrafiken zu beginnen . 6. Zeige nicht Sagen: Ich wollte einen kurzen Umweg von unserem Projekt machen , um über ein wirklich großes Ärgernis von mir und einen wirklich häufigen Fehler und Design zu sprechen ein wirklich großes Ärgernis von mir , und insbesondere über Informationsdesign, bei dem die Leute erzählen und sie zeigen es dir nicht. Bei allem Design ist es also dein Ziel, es den Leuten zu zeigen, nicht es den Leuten zu erzählen. Hier ist ein Beispiel für Erzählen und Nichtzeigen. Einer meiner Informationen zufolge ist die Wahrscheinlichkeit , dass Amerikaner durch einen Tod im Zusammenhang mit einer Schusswaffe sterben, zehnmal Tod im Zusammenhang mit einer Schusswaffe sterben als Menschen in 22 anderen Industrieländern. Es geht nicht darum, irgendetwas zu visualisieren , um die Zahl Zehn wirklich groß zu machen. Wenn Sie mit Zahlen und Ihren Informationen arbeiten, möchten Sie die Menge anzeigen, Sie möchten einen Vergleich anzeigen. Sie möchten den Menschen helfen , diese Nummer mit etwas Sinnvollem zu verbinden. Hier ist ein Beispiel dafür , wie Sie diese Informationen anzeigen können , anstatt nur zu sagen, dass Sie sie zehnmal visualisieren möchten. Und mit anderen Worten, eins gegen zehn als Bild. Auf diese Weise kann Ihr Publikum sehen, wie viel größer Zehn im Vergleich zu nur einer ist. Denken Sie daran, bei diesem Projekt dreht sich alles um visuelles Geschichtenerzählen und Sie werden R nicht erzählen, einmal eine Geschichte visualisieren, indem Sie einfach die Zahl Zehn wirklich groß machen, z. B. möchten Sie darüber nachdenken, wie andere könnten Informationen einfach, effektiv und effizient verstehen, was wiederum Informationsdesign ist. Lassen Sie uns in der nächsten Lektion wieder zur Gestaltung unseres Projekts zurückkehren. 7. Skizze: Wir fühlen uns inspiriert. Wir haben einige Beispiele gesehen und unsere Recherchen sind startklar. Lassen Sie uns also mit dem Skizzieren beginnen. Ich habe hier also ein paar Zettel und ein paar Zeichenutensilien und diese Linealkreisanleitung mir hilft, ein bisschen besser zu zeichnen. Aber es spielt keine Rolle, wie Sie an dieser Stelle zeichnen. Es geht darum, Ihre Ideen zu Papier zu bringen. Also mach dir keine Sorgen, dass es perfekt aussieht oder so. Ich werde das tatsächlich einrichten. Das wird also meine erste Skizze hier sein, und dann die Interpretation dieser ersten Information für das Abendmahl . Der Tod im Zusammenhang mit Schusswaffen wird hier also in diesen beiden Quadranten auftreten. Und dann meine zweite Information. Fangen wir also mit der ersten Skizze an. Ich denke, um all diese Informationen zu visualisieren, werde ich es mit einem Balkendiagramm versuchen. Also nehme ich mit meinen Markern drei Farben. Ich werde es so einrichten, als ob eine Farbe die Vereinigten Staaten repräsentiert. Also werde ich diese goldene Farbe verwenden und sie dort genau in die Mitte legen. Das wird wie eine Linie mittlerer Länge sein eine Linie mittlerer Länge , weil diese Information 10,6 ist. Also werde ich mir das hier einfach notieren. Weil ich möchte, dass es in meiner Infografik so aussieht. Ich möchte, dass das Land auf der linken Seite ist und dann möchte ich, dass die Zahlen auf der rechten Seite stehen. Ich glaube, an diese Bar. Dann verwende ich eine andere Farbe, Rot. Nehmen wir an, das steht für die Länder, die höher sind. Die USA. Ich schaue es mir hier nur an, aber du wirst es tatsächlich am Computer maßstabsgetreu berechnen. Ich finde das gut. Das ist ziemlich einfach und ich bin mit der Gesamtidee zufrieden . Aber ich denke, es könnte ein bisschen mehr Spaß machen. Vielleicht. Ich werde mit einem anderen Weg experimentieren, vielleicht mit einem etwas aufregenderen Weg. Schrei noch einmal, um das darzustellen. Und ich denke zurück an die diagonale proportionale Kreisgrafik , die wir für die BIP-Zahlen gesehen haben Dieser Kreis wird die USA repräsentieren. Und vielleicht können wir es einfach direkt in den Kreis schreiben. Wenn das gut aussieht, gehen wir einmal an den Computer und probieren es aus. Und dann können die Kreise um ihn herum proportional die Dinge vergrößern. Das ist also meine erste Information, der Tod im Zusammenhang mit Schusswaffen. Also werde ich zu meiner zweiten Information übergehen . Ich habe diese goldene Farbe für die USA und diese beiden Skizzen verwendet die USA und diese beiden Skizzen Ich werde in der Skizze weiterhin dasselbe machen. Also möchte ich wieder visuell sein und zeigen, nicht erzählen. Also werde ich hier zehn kleine Jungs machen. Und dann werde ich sie mit einem Mann vergleichen, das wären die 22 anderen Länder. Also vielleicht kann ich es mit diesem Pfeilsystem beschriften und vielleicht kann ich das hier machen, sogar in Mexiko. Und natürlich können Sie jederzeit zu jeder Ihrer Skizzen zurückkehren , wenn Sie Ideen aus Ihren anderen Skizzen haben. Das ist das Schöne am wenn Sie Ideen aus Ihren anderen Skizzen haben Skizzieren. Man kann schnell Dinge ändern und Dinge auf Papier verschieben, weshalb ich Papier so toll finde. Jetzt werde ich vielleicht zu dieser Kreis-Idee zurückkehren, die wir hier gemacht haben, und vielleicht Kreise machen. Dann kann ich dasselbe Kennzeichnungssystem verwenden, wahrscheinlich mit den USA hier und dann mit den anderen Ländern hier. Aber ich werde mir dieses neue Blatt Papier hier schnappen und mit meiner dritten Information fortfahren. Und dann mache ich hier vielleicht einfach ein typisches Liniendiagramm. Sie müssen hier also nicht jede einzelne Zahl schreiben. Ich werde diese andere Achse hier schon los . Falls Sie es also bemerken, habe ich nur diese untere Achse für die Ohren gezeichnet , weil das eine viel wichtigere Methode dieses Liniendiagramm zu erstellen. Alles ist also festgelegt und orientiert sich an diesem Endergebnis , das Ihnen das Jahr zeigt. Dann schwebt der Rest hier einfach ganz oben. Aber ich finde das wirklich nett weil es die Linie betont , die die Information und der wichtigste Teil dieses Diagramms darstellt. Dann denke ich noch einmal auf dieser rechten Seite, ich, ich werde es noch einmal mit dem Kreisthema versuchen. Und dann vielleicht nochmal hervorhebe ich. Okay, also ich sage z. B. ein Student. Die Leute wissen also, dass dieser eine kleine Kreis ein Vorfall ist. Und dann kann ich drei für dieses Jahr sagen, ich kann 40 für dieses Jahr sagen, ich kann sagen 24 über alle Kreise, wie ich es für die drei getan habe. Auch hier müsst ihr insgesamt sechs Skizzen zu für jede Information insgesamt sechs Skizzen zu Skizzen machen. Aber ich habe vier Informationen gemacht. Also werde ich acht Skizzen machen. Und ein Kreisdiagramm funktioniert hier, weil die Informationen zu 100% liegen. Also zum Beispiel dieses Diagramm mit den Vorfällen eines aktiven Freitor-Shooters liegt dieses Diagramm mit den Vorfällen eines aktiven Freitor-Shooters nicht unter 100%. Es ist einfach, was auch immer die Zahl ist, es ist die Anzahl der Vorfälle pro Jahr. Verwenden Sie auf jeden Fall Ihre farbigen Marker, Ihre Buntstifte, was auch immer, um Ihre Informationen zu unterscheiden. Und es muss nicht so sein , dass diese Farben nicht die Farben sein müssen , die ich in meinen eigentlichen Infografiken verwenden werde. Es hilft einfach, verschiedene Farben zu haben , um diese unterschiedliche Art von Information zu unterscheiden. Ich denke, ich werde hier zu dieser Zeile oder diesem rechteckigen Thema auf der rechten Seite zurückkehren . Also werde ich eine Art Balkendiagramm erstellen, aber es wird wieder alles um Proportionen gehen, genau wie wir es in der ersten Skizze mit den Kreisen gemacht haben. Das werden meine 50% sein. Ich, es ist nicht wirklich wichtig, welche Größe das hat. Alles was zählt ist , dass die anderen Größen der Rechtecke kommen oder im Verhältnis zu diesem Rechteck stehen. Wenn das 50 ist, möchte ich 33 machen. Dieses Rechteck nebenan wird etwas kleiner sein. Ich denke, ich habe einige wirklich gute Optionen , mit denen ich zum Computer wechseln kann. Lassen Sie uns in der nächsten Lektion in Figma einrichten. 8. In Figma einrichten: Jetzt, da wir Ihren Inhalt recherchiert haben und damit begonnen haben, diesen Inhalt und unsere Skizzen zu erstellen. Wir gehen an den Computer und beginnen mit der Gestaltung unserer Kampagne. Ihr erster Schritt besteht darin , Figma auf Ihrem Computer zu öffnen. Also geh einfach zu figma.com und starte ein neues Projekt. Es sieht also wahrscheinlich so aus. Sobald du auf figma.com angekommen bist, möchtest du dich entweder anmelden, falls du ein Konto hast , oder loslegen. Sie können sich bei Google anmelden, was es sehr einfach macht. Derzeit bieten sie eine kostenlose Version von Sigma an, die sich in Zukunft ändern könnte. Ich verwende vorerst nur die kostenlose Version, aber Sie können auch pro Monat für eine professionelle Lizenz bezahlen , mit der Sie noch ein paar Dinge tun können und Ihnen ein paar mehr Funktionen bieten. Aber lass uns vorerst die kostenlose Version machen. Und dann entwerfen wir mit Figma. Wählen Sie einfach eine leere Leinwand und das generiert ein neues Projekt für uns. In Ordnung, wir haben also unsere Figma-Datei bereit. Ich werde es schnell umbenennen. Wir haben diese leere Leinwand, diesen leeren Hintergrund und den Platz bereit. Also nur eine kurze kleine Tour hier von Figma. Die Tools befinden sich oben und Sie können Prototypen teilen, Prototypen abspielen, vergrößern und verkleinern. Hier oben. Wir auf der linken Seite haben Ihr Ebenen-Panel, Ihre Assets und Ihre Seiten. Und dann auf der rechten Seite haben wir Ihre Designelemente, Sie erstellen Prototypen und dann Ihr Inspector-Tool. Wir werden also nicht viele dieser Dinge in diesem Projekt verwenden , sondern wollten Ihnen nur die Umgebung zeigen. Also zuerst müssen wir einen Rahmen erstellen, der einer Zeichenfläche in etwas wie Illustrator entspricht . Wir können also einfach einen Rahmen in jeder beliebigen alten Größe herausziehen . Oder wir wählen das Frame-Werkzeug und gehen nach rechts und es gibt uns einige voreingestellte Optionen. Also werde ich einfach Desktop machen und es wird als Desktop bezeichnet. Also ich will das nicht. Ich möchte dieses System kennzeichnen. Hier werden wir unser Designsystem erstellen. Dann auch ganz schnell, nur um uns zu organisieren, werde ich diese Seitenzahl von diesem Seitennamen umbenennen , von Seite eins in System. Beginnen wir in der nächsten Lektion mit der Einrichtung Ihres Designsystems. 9. Design dein System: Ich weiß, wenn ich an den Computer gehe, besteht eine große Angst vor der leeren Seite oder der Leinwand. Wie ich diese Angst oder das Gefühl der Überforderung überwinde, besteht darin kleine Schritte zu unternehmen, um ein Designsystem zu erstellen Gleich zu Beginn eines Projekts, I Design System besteht aus einer Sammlung wiederholbarer Komponenten und einer Reihe von Normen, die die Verwendung dieser Komponenten regeln. Stellen Sie sich das als Ihre Bildsprache für Ihre Projekte vor. Es kann Schriften, Farben, Ikonografie und andere Bilder enthalten, die Ihr Projekt zu einem konsistenten, zusammenhängenden Teil machen . Also möchte ich, dass du zuerst über den Titel deines Projekts nachdenkst . Dies sollte etwas sein, das dein Thema erklärt und dein Publikum darauf hinweist worüber es in deiner Kampagne lernen wird. Ich nenne meine uns plus Waffen, weil es um die Vereinigten Staaten und Waffen geht. Ich mag auch die USA, ein bisschen aus wie wir. Also wir und Waffen mögen eine Art Beziehung zwischen uns und Waffen. Ich mag das Wortspiel irgendwie. Aber dann werde ich es eher quadratisch gestalten. Ich möchte, dass Sie eine Hierarchie oder ein System einrichten , in dem Ihre Leser die Titel, die Überschriften und den Haupttext Ihrer Kampagne leicht sehen können . Unsere Titel werden also die Titel unserer Infografiken, die Titel unserer Webseiten und die Titel unserer Social-Media-Bilder sein. Wir wollen also, dass sie groß sind, wir wollen, dass sie mutig und auffällig sind. Und das Erste, was Ihr Auge anzieht, das ist es, was ich wirklich groß und mutig machen werde. Versuchen Sie, eine Schrift auszuwählen, die in ihrer Familie verschiedene Gewichte hat . Also haben wir dann Licht, wir haben normal, mittel, fett, halbfett. Damit kann ich viel anfangen. Dann habe ich auch die Versionen Serif und Sans Serif davon. Und dann wie eine Monotypie-Version davon, die ich wahrscheinlich nicht verwenden werde. Aber es ist eine gute Option. Wir haben also unseren Titel. Jetzt werden wir unsere Schlagzeilen machen. Für die Überschriften möchten wir, dass sie etwas kleiner als der Titeltext sind. Also werde ich weitermachen und 32 oder so wählen. Okay, das ist also gut. Schon beim bloßen Betrachten wird deutlich, dass die Titel wirklich groß und wichtig sind. Die Schlagzeilen sind auch ziemlich groß, aber nicht ganz so wichtig. Aber ich denke, ich könnte stattdessen ein Medium bevorzugen. Und dann gehen wir vielleicht zurück und verwechseln es, indem wir noch einmal diese serifenlose Schrift machen. Okay, das sieht also gut aus. Es ist klar, dass du hier einen Titel hast, klar, dass du eine Überschrift haben musst. Aber was ist nun mit dem kleineren Text in Ihrem Projekt oder Ihrer Textkopie? Wir wollen nicht, dass es den Schlagzeilen ganz ebenbürtig wird, weil es kleiner sein wird. Es wird mehr Body Copy geben und dann sind die Schlagzeilen oder der Titel gerade. Wir müssen es also etwas kleiner machen, damit es zu all Ihren anderen Inhalten passt. Lass uns etwas wie 18 versuchen. Okay, ja, das sieht gut aus. Also ich denke, das ist ein großartiges typografisches System. Lassen Sie uns nun diese Textilien und Figma hinzufügen. Ich habe meinen Titel ausgewählt, mein kleines Textfeld für meinen Titel ausgewählt. Ich gehe zu meinem Textfeld und klicke auf diese kleine Vier-Punkte-Schaltfläche auf der rechten Seite , auf der Stil steht. Sie können einen Stil hinzufügen, indem Sie auf diese kleine Plus-Schaltfläche in der oberen rechten Ecke klicken, und dann möchten Sie ihm einen Namen geben. Also lass uns loslegen und es Titel nennen. Okay, wenn ich das jetzt abklicke, kann ich meine Textstile sehen. Hier drüben. Wir haben unseren Titelstil , der 64 Punkte über 70 Punkte ist , also der Zeilenabstand ist die zweite Zahl 70. Also mache ich jetzt dasselbe für meine Überschrift. Ich glaube jedoch nicht, dass 70 der Zeilenabstand sein soll, also kann ich den Stil bearbeiten, indem ich hier rechts auf diese kleine Schaltfläche klicke. Lass uns etwas machen, das näher an 32 herankommt. Es gibt also keine solche Linienlücke zwischen den beiden. Also lass uns 40 machen und sehen, wie das funktioniert. Auch hier kreieren wir diese Stile im luftleeren Raum. Wir wenden sie noch nicht wirklich in ein Design an. Wir können diese Stile also jederzeit hinzufügen. Wie Sie sehen, ist es sehr einfach, Stile hinzuzufügen oder Stile zu bearbeiten. Ich möchte, dass du eine Farbpalette mit mindestens sechs Farben erstellst und einfach sechs Kästchen oder Formen herausziehst , um hier zu arbeiten. Sie können in Figma hineingehen und Dinge ausrichten, indem Sie zwei verschiedene Ebenen auswählen und hier nach oben rechts gehen . Sie können sehen, dass es verschiedene Möglichkeiten gibt, in der Mitte, oben auszurichten . Ich möchte diese beiden links anordnen. In Ordnung, das sind also eindeutig unsere Farben. Also kann ich hierher gehen und meine Form wählen. Ich kann in das Füllfeld gehen, wo es an dieser Stelle nur so hellgrau ist. Ich kann die Farbe auf verschiedene Arten ändern. Also kann ich hier die Hexadezimalzahl eingeben, oder ich kann auf das Quadrat klicken und etwas in diesem Farbverlauf auswählen. Ich kann diese Farben auch verschieben. Ich kann die Opazität auch hier ändern. Aber das Rot hat mir gefallen. Also gehe ich zurück zu den roten Zahlen. Perfekt. Dann kann ich einen Stil erstellen, indem ich auf unsere vier Punkte in einem Quadrat klicke. Und dann habe ich hier noch keine Farbstile, also klicke ich auf den Plus-Button und nenne ihn einfach rot und kreiere diesen Stil. Wenn wir nun eine Ebene abklicken, können wir sehen, wie unsere Farbstile bei unseren Textilien erscheinen. Also geh rein und füge mindestens sechs Farben zu deiner Farbpalette hinzu. Wenn Sie Ihre Farbpalette auswählen, möchten Sie auf jeden Fall eine Vielzahl von Farbtönen haben. Deine Farben sind also wie dein Roy G Biv, deine tatsächlichen Farbnamen. Also das Rot, das Gelb, das Grün. Auf diese Weise ist es für die Menschen in Ihren Informationsgrafiken wirklich einfach, die verschiedenen Farben zu unterscheiden. Und die verschiedenen Farben werden in deinen Infografiken unterschiedliche Bedeutungen haben, oder? Es ist auch gut, eine Vielzahl von Werten und Ihr Farbschema zu verwenden . Also z.B. dieses Lila ist ziemlich dunkel, aber dieses Beige ist ziemlich hell. Es gibt also gute Kontraste untereinander. Es ist auch eine gute Praxis, wenn Sie Ihre Farbschemata erstellen , um zu überprüfen , ob sie farbenblind sind. Und der Kontrast zwischen den Farben und den Hintergründen ist gut zu nutzen. Sie können zu den Adobe-Tools zur Barrierefreiheit in den Farben wechseln und überprüfen ob der Kontrast in Ihren Farben funktioniert oder nicht. Also hier ist zum Beispiel meine beige Farbe. Wenn ich meine beige Farbe auf einem komplett weißen Hintergrund verwenden würde, wäre das z. B. nicht hoch genug und der Kontrast nicht lesbar. Ich möchte diese Farbe also nicht nur für Texte auf weißem Hintergrund verwenden . Ich möchte es und meine Grafiken verwenden , die nicht umsetzbar sind, wie Schaltflächen und solche Dinge, weil sie nicht sehr leicht zu erkennen sind. Gehen Sie also in die Barrierefreiheitstools von Adobe Color und stellen Sie sicher, dass Ihr Kontrast zwischen Farben und Ihrem Hintergrund gut aussieht. Und Ihre Farbpalette ist farbenblind. Ich finde es wirklich nett und eine Farbpalette, eine mittelgraue Farbe zu haben, die wir für Text und Dinge verwenden können, die wir nicht schwarz oder superhart sein wollen. Das Letzte, worum ich Sie bitten werde , ist eine Schaltfläche „Mehr erfahren“. Dein Button, wir sagen einfach Mehr erfahren. Und Sie möchten, dass der Text anklickbar und zugänglich aussieht, was meiner Meinung nach der Fall ist. Verglichen mit der Körperkopie. Es ist etwas größer und etwas mutiger, was mir gefällt und ich denke, es wird sehr gut funktionieren und die Aufmerksamkeit der Leute auf sich ziehen. Ich ändere die Farbe, indem ich in die Füllung gehe und auf unsere Styles klicke, bis sie vielleicht lila ist. So ist es nicht schwarz und langweilig. Es ist ein bisschen aufregender. Dann werde ich versuchen, eine Unterstreichung zu machen. Es sieht also aus wie ein Link, der anklickbar ist. Ich mache die Linie etwas dicker und ändere sie dann vielleicht in Rot oder so. Okay. Ich denke, das sieht für mich nach einem guten Button aus. Es sind keine sehr offensichtlichen Tasten. Ein offensichtlicherer Button könnte also etwa so aussehen , wenn er ein Rechteck hat. Und dann werde ich das zurückziehen. Und mein Ebenen-Panel hier links, indem du auf Befehl und dann auf die linke Klammertaste klickst. Sie können im Ebenenfenster sehen, dass es sich nach unten bewegt. Geht runter. Los geht's, es ist unten. Erfahre jetzt mehr. Und dann werde ich es noch klickbarer aussehen lassen, indem die Ecken hier auf der rechten Seite abrunde. Und dann mache ich es nicht in dieser grauen Farbe, sondern vielleicht in der beigen Farbe, z.B. okay, cool. Ich denke also, dass dies zwei gute Tastenoptionen sind. Jetzt werde ich sie zu einer Komponente machen, die ein wiederverwendbares Asset sein wird , das wir während unseres gesamten Designprojekts verwenden können . Also klicke ich auf den Text „Mehr erfahren“ und die Zeile darunter. Ich klicke mit der rechten Maustaste und klicke auf Komponente erstellen. Das wird eine Komponente für uns generieren. Und das Symbol für die Komponente ist diese kleine Rautenform , die Sie im Ebenenfenster sehen können. Und dann hier drüben in unseren Styles oder unseren Einstellungen. Ich werde es von der Taste oder der BTN-Linie der Komponente 12 umbenennen . Dann möchte ich vielleicht diesen Button-Stil verwenden. Vielleicht nicht, ich weiß es nicht. Also werde ich trotzdem einfach eine Komponente erstellen. Ich werde es übrigens umbenennen. Wir werden später sehen, ob mir das eine oder andere gefällt. Sie müssen jedoch nur einen Tastenstil erstellen. Jetzt haben wir also alle Komponenten unseres Designsystems. Du kannst auch eine Reihe von Ikonographien erstellen , wenn das hilft, deine drei Infografiken miteinander zu verbinden. Jetzt, da Sie Ihr Designsystem eingerichtet haben, können Sie ganz einfach loslegen und Ihre Informationsgrafiken, Ihre Webseite und Ihr Social-Media-Image entwerfen . Lass uns in den nächsten Lektionen anfangen. 10. Deine Informationen entwerfen: Du hast dein fantastisches Designsystem in Figma eingerichtet. Jetzt müssen wir nur noch Ihre Skizzen vom Papier auf den Computer übertragen und Figma, damit beginnen, eine weitere Seite für Ihre Infografiken zu erstellen. Auf der linken Seite sollten Sie Ihre sechs Skizzen in der Nähe haben und wählen Ihre drei Lieblingsskizzen aus, um sie in Figma zu entwerfen. Meine Lieblingsskizzen folgten diesem kreisförmigen Thema. Also werde ich anfangen, sie in Figma zu entwerfen und zu sehen, wie sie herauskommen. Ich werde es schnell durchgehen und euch zeigen, wie ich meine drei technisch für Infografiken entworfen habe, aber ich werde euch nebenbei einige Profi-Tipps geben. Copy and Paste ist dein bester Freund. Sobald du ein paar verschiedene Elemente hast, liebst du sie, wiederhole diese Elemente einfach. Dies wird auch dazu beitragen, dass Ihr visueller Zustand in allen drei Informationen sehr konsistent ist. Grafik, Figma oder das Programm, in dem Sie arbeiten, rechnen Sie für Sie. Ich kann einfach den Starkey machen, also Shift Acht und gib die Zahl ein, mit der ich sie benötige, multipliziert mit und mit dieser Sterntaste wird diese Multiplikation automatisch für dich berechnet. Der Designprozess beinhaltet viel Versuch und Irrtum. Passen Sie also Ihre Informationen und Stile nach und nach an. Also habe ich z. B. diese erste Infografik, die ich gemacht habe, eine sehr klare oder meiner Meinung nach klare Vorstellung davon skizziert , wie sie aussehen sollte. Aber sobald ich an den Computer gestiegen war und angefangen habe diese Grafiken auf der Grundlage der Informationen maßstabsgetreu zu erstellen. Es hat nicht funktioniert. Einige der Kreise waren viel zu groß. Einige der Kreise waren viel zu klein. Also habe ich eine konsistentere Grafik angepasst und eine einheitlichere Größe erstellt . Um das zu tun, musste ich verschiedene Informationen abrufen. Letztlich. Verwenden Sie Elemente wie Pfeile , Linien und Formen, um Ihre Designs klar zu kennzeichnen. Stellen Sie sicher, dass Ihre Designelemente konsistent sind. Und wenn nicht, steckt hinter der Inkonsistenz eine Bedeutung. Versetzen Sie sich während Ihres gesamten Prozesses in die Lage Ihres Benutzers. Zum Beispiel habe ich am Ende die Kreise nicht überlappt , wie ich es in meinen Skizzen hatte. Weil ich dachte, es könnte für mein Publikum verwirrend sein. Ich dachte, sie könnten es vielleicht wie ein Venn-Diagramm interpretieren , wo die Überlappung etwas bedeutet. Während es hier nur eine stilistische Wahl war , die nicht da sein musste und die Leute verwirren musste. Minimiere Texte auf deinen Bildern indem du deinen Grafiktitel oder Statistik als Label oder Labels verwendest. Also zum Beispiel meine Statistik hier, ich habe sie in zwei Teile aufgeteilt, um als Beschriftungen für die zwei verschiedenen Teile zu dienen als Beschriftungen für die zwei verschiedenen Teile , die ich in meiner Grafik visualisiert habe. Wann immer Sie können , versuchen, unterstützende Informationen wie Achsen, Schlüssel und ähnliches weniger hervorzuheben oder zu minimieren . In diesem Balkendiagramm , das ich hier erstelle, benötige ich z. B. keine zwei Achsen. Ich benötige keine X-Achse und keine Y-Achse. Ich kann einfach eines verwenden und dann Labels erstellen , um meine Informationen meinem Publikum zu vermitteln. Ebenso möchten Sie Teile Ihrer Designs strategisch kennzeichnen, nicht unbedingt das gesamte Design. Übertreibe es also nicht mit der Kennzeichnung von Dingen. Sobald Sie ein oder zwei Orte beschriftet haben, wird Ihr Publikum wahrscheinlich verstehen , was Sie zu vermitteln versuchen. Verwenden Sie die Ausrichtungstools von Figma, um Ihre Designs aufgeräumt und lesbar zu halten. Zurück zu dem Copy-and-Paste-Konzept , das ich bereits erwähnt habe Wiederhole deine Designelemente, um Konsistenz zu schaffen und es dir leichter zu machen. Nachdem Sie eine oder zwei Ihrer Infografiken erstellt haben, haben Sie wahrscheinlich diese konsistenten Elemente wie Ihre Beschriftungen und Pfeile, Linien usw., die Sie in all Ihren Infografiken wiederverwenden können. Das sorgt für ein einheitliches Erscheinungsbild , das sie alle miteinander verbindet. Erstellen Sie ein Kreisdiagramm? Es ist sehr einfach, Arcs and Sweeps zu verwenden. In Figma zeichnest du einfach einen Kreis mit dem Ellipsenwerkzeug und erscheint ein kleiner weißer Punkt, das ist der Bogen. Klicken Sie also auf den Punkt und ziehen Sie ihn nach oben oder unten. Und Sie werden einen Bogen erstellen , der im Grunde wie ein Ausschnitt aus Ihrem Kreisdiagramm ist. Und von dort aus können Sie reingehen und sagen, wie viel Prozent Sie den Sweep-TV haben möchten, und das ist der Prozentsatz , den Ihr Kreisdiagramm hat. dich nicht blind an deine Skizzen. Experimentiere mit Design, Farbe und Layout und arbeite weiter an deinen drei Infografiken, bis du mit der Zusammenstellung deiner Designs zufrieden bist . Sie haben Ihre drei Informationen, Grafikdesign. Lassen Sie uns diese also in eine endgültige reale Anwendung indem wir ein Webseitendesign erstellen. In der nächsten Lektion. 11. Deine Webseite entwerfen: Wir haben ein wirklich fantastisches Set von drei Infografiken erstellt , die alle zusammen wirklich toll aussehen. Sie sind hier, sie sehen auf unserem Computer hübsch aus. Aber wie werden sie zu unserem Publikum kommen? Das ist der Sinn von Design, ein Publikum zu erreichen und Ihre Designs mit der Welt zu teilen. Aus diesem Grund werden wir diese datengesteuerte Kampagne rund um unsere drei Informationsgrafiken erstellen diese datengesteuerte Kampagne . Also werden wir das tun, indem eine Webseite und ein Social-Media-Image erstellen. Auf diese Weise werden unsere Designs nur von unserem Computer aus in die Welt hinausgetragen und unser Publikum erreichen. Lass uns mit dem Design deiner Webseite beginnen. Das erste, was wir tun werden, ist , eine weitere Seite hinzuzufügen Ihr Webseiten-Design und das Design Ihrer Social-Media-Posts werden auf dieser Seite angezeigt. Und auf diese Weise haben wir unsere Infografik-Seite immer noch mit all unseren Originaldesigns. Wenn Sie diese Infografik-Designs also zu einem beliebigen Zeitpunkt bearbeiten , während Sie Ihre Webseite und Beiträge in sozialen Netzwerken erstellen , werden Ihre ursprünglichen Designs nicht beeinträchtigt. Wir gehen zum Frame-Werkzeug und erstellen einen Frame in Desktop-Größe. gibt es also ein paar verschiedene Optionen Unter diesen Desktop-Voreinstellungen gibt es also ein paar verschiedene Optionen. Auf der rechten Seite klicke ich einfach auf die, auf der Desktop steht, was eine ziemlich normale Desktop-Größe haben sollte. Bevor wir anfangen, unsere Infografiken von der anderen Infografik-Seite zu holen, werde ich einfach ein schnelles Layoutraster einrichten. Wenn wir also hier nach rechts gehen, klicken wir auf Layoutraster, außer dass ich kein Raster an sich haben möchte. Ich hätte lieber Kolumnen. Also klicke ich hier auf diese Schaltfläche und wähle Spalten aus. Sie können auch Zeilen erstellen, oder Sie können einfach an einem Standardraster arbeiten. Aber ich richte gerne einige Spalten ein , bevor ich auf einer Webdesign-Seite anfange. Und auf diese Weise hilft es Ihnen, organisiert zu bleiben und alles sauber und aufeinander abgestimmt zu halten . Normalerweise erstelle ich gerne ein 12-spaltiges Raster für so etwas wie eine Seite in Desktop-Größe. Weil uns das ein paar verschiedene Optionen geben wird. Wir können so etwas wie eine dreispaltige Situation machen. Wir können mit vier Spalten arbeiten, wir können mit zwei Spalten arbeiten. Dann hätte ich gerne ein paar Ränder nur damit die Dinge nicht an den Rand meiner Seite gehen. Sie können jederzeit auf diesen Rahmen klicken und Ihr Raster jederzeit ausblenden , indem Sie auf dieses kleine Augensymbol klicken. Jetzt gehen wir rein und richten das Framework Ihrer Webseite ein. Also werden wir wirklich schnell zu unserer Systemseite zurückkehren wirklich schnell zu unserer Systemseite und unseren Titel eintragen. Und ich platziere es einfach in der oberen linken Ecke. Jetzt werden wir einige Grundlagen unserer Webseite festlegen und das tun, indem wir einen Header-Bereich erstellen. Das haben wir also bereits durch Ziehen und unseren Logotyp gemacht, oder Sie können Ihren Titel einfach oben eingeben. Und das wird als unsere Home-Taste dienen. Normalerweise auf einer Standardwebsite, die dieser oberen linken Ecke existieren würde. Und dann können wir reingehen und hier ein Menü zusammenstellen. Wir erstellen nur eine Webseite für dieses Projekt. Nur damit es wie ein robusteres Produkt aussieht, werden wir hier einige andere Webseiten erstellen. Ich werde das kopieren. Stellen Sie sich vor, welche anderen Arten von Informationen ich in dieses Kampagnenprojekt aufnehmen könnte. Waffenbesitzer fragen sich, warum besitzen Menschen Waffen? Was sind die Statistiken darüber, wie viele Menschen Waffen besitzen? Solche Dinge. kann ich das in Zukunft hinzufügen. Ich denke, das ist ein guter Anfang für mein Menü hier. Also werde ich dort aufhören. Und dann gehe ich zurück auf meine Systemseite und schnappe mir hier eine dieser Schaltflächen. Im Allgemeinen möchte ich nicht, dass mein Aufruf zum Handeln auf der gesamten Website darin besteht, mehr zu erfahren. Ich möchte, dass es etwas konkreter wird. Also werde ich sagen, handeln Sie. Ich möchte nicht, dass dies wie eine hoffnungslose Information erscheint . Ich möchte, dass die Menschen durch das Erlernen dieser Informationen gestärkt werden und das Gefühl haben, dass sie Maßnahmen ergreifen und etwas tun können. Aber denken Sie am Ende des Tages über das eigentliche Ziel Ihrer Kampagne nach. Was sollen die Leute tun, nachdem sie von Ihrer Kampagne nach. Was sollen die Leute Ihren Informationen erfahren haben? Und das kann der wichtigste Aufruf zum Handeln auf Ihrer Website sein. Jetzt gehen wir rein und fügen unsere Infografiken hinzu. Okay, jetzt wähle ich meine vier Infografiken aus. Ich kopiere sie und füge sie dann ein. Also, wenn du es hier sehen kannst, sehe ich jeweils nur eine Infografik. Die Leute müssen also wirklich nach unten scrollen , um all deine Infografiken durchzusehen. Aber in Wirklichkeit nehmen sich viele Leute nicht die Zeit, eine Seite ganz nach unten zu scrollen. Also, wenn du wirklich möchtest, dass sie all deine Infografiken sehen und es vielleicht klug ist, sie oben mehr zu sammeln. Ich werde ein paar Änderungen an dieser Seite vornehmen und versuchen , die meisten meiner Infografiken übersichtlich zu gestalten. Am Ende habe ich mich für diesen Pinterest-Feed-Look entschieden. Ich platziere alle meine Grafiken und ihre eigenen Boxen und habe dann den Hintergrund etwas dunkler gemacht. Etwas, das ich aber sehr schnell machen wollte, ist nur sicherzustellen, dass sich mein Benutzer auf der Website orientiert. Auf dieser Seite und diesen Infografiken dreht sich also alles um Waffengewalt. Ich werde diesen Punkt mit Waffengewalt in meinem Menü fett markieren und unterstreichen , um sicherzustellen, dass die Leute wissen, dass sie sich auf dieser Website auf dieser Website befinden. Eine letzte Sache, die ich wirklich tun möchte, ist sicherzustellen, dass die Leute mehr über jede dieser Informationen erfahren können . Also werde ich das tun, indem ich jedem dieser Teile hier eine Schaltfläche zum Erfahren von mehr hinzufüge. Stellen Sie sicher, dass Sie Schaltflächen und andere Designelemente angemessen gruppieren oder Grafiken und andere Designelemente angemessen verwenden. Sie können Felder wie dieses oder Trennlinien verwenden und deutlich machen , welcher Titel mit welcher Infografik übereinstimmt welche Schaltfläche „Mehr erfahren“ mit welchen Informationen übereinstimmt usw. Sieht dieses Projekt und Ihre Infografiken nicht jetzt realer aus, es sieht aus wie ein echtes Produkt, das existieren könnte, wenn nur einige grundlegende Grafiken integriert werden - und Webdesign-Fähigkeiten. Nachdem wir Ihre Informationsgrafiken und Ihr Webseiten-Design eingerichtet haben , werden wir sie in einer anderen Anwendung oder auf eine andere Weise platzieren einer anderen Anwendung oder auf eine andere Weise , um eine Verbindung zu Ihrem Publikum herzustellen. durch soziale Medien. In der nächsten Lektion werden wir diese Informationsgrafiken auf ein Social-Media-Bild übertragen. 12. Social deinen Beitrag entwerfen: Wir haben Ihre Webseite und Ihre Informationsgrafiken einsatzbereit. Das ist großartig. Sie erreichen bereits ein Publikum, aber wir müssen das Wort schneller verbreiten. Wir müssen mehr Menschen ausbilden. Also werden wir das tun, indem wir einen Social-Media-Beitrag erstellen. Lassen Sie uns also einen weiteren Frame neben unserem Webseiten-Frame einrichten. Wir gehen zum Frame-Tool und dann zu den sozialen Medien. Und hier gibt es eine ganze Reihe von Voreinstellungen, genau wie wir es für unser Desktop-Setup hatten. Und genau hier gibt es eine Instagram-Story-Seite. Also klicken wir auf Instagram Story. Wir werden den Namen in Social Post ändern. Okay, wir haben also alles vorbereitet. Als Erstes fügen wir unseren Logotyp oder Titel hinzu. Was auch immer du am Ende gemacht hast, hier ist ein kleiner Kreis. Instagram Stories dein Profil, Bild oder Bild, wie auch immer es heutzutage heißt, normalerweise in diesem kleinen Symbol oben links. Wir werden dafür sorgen, dass es echt aussieht und so, als wäre es tatsächlich auf Instagram, indem diesen kleinen Kreis mit deinem Logo oder deinem Titel erstellen. Neben Instagram befindet sich auch ein Textfeld, in das Ihr Titel Ihres Instagram-Kontos eingefügt werden kann . Und dann, was am wichtigsten ist, wählen wir eine Ihrer Infografiken aus, die hier vorgestellt werden soll. Machen Sie es mutig, machen Sie es farbenfroh und attraktiv. So wird es die Aufmerksamkeit aller auf sich ziehen und die Leute dazu bringen, sich mit Ihrem Beitrag zu beschäftigen. Ihr Ziel ist es, die Leute dazu zu bringen, auf den Link zu Ihrer Website zu klicken , um mithilfe von Schaltflächen mehr über Ihr Thema zu erfahren , sodass Benutzer sich durchklicken und mehr Informationen auf Ihrer Website erhalten können . Ich bin also ziemlich zufrieden damit, wie mein Social-Post-Design ausgegangen ist. Am Ende habe ich einige Änderungen vorgenommen, wie zum Beispiel die Rückkehr zu diesen Pfeilen für meine Beschriftungen. Anstatt diesen Schlüssel zu machen, wie ich es für mein Webseitendesign getan habe . Ich denke also, das ist ein wirklich lustiges und zugängliches Design , das sich gut für eine Instagram-Story eignet. Arbeite an deinem Design für soziale Beiträge , bis du damit zufrieden bist. Und dann werden wir in der nächsten Lektion unsere Designs kritisieren . 13. Dein Design kritisieren: Jetzt, da du einige tolle Designs zusammengestellt hast, ist es an der Zeit deinen Designerhut gegen deinen Kritikhut einzutauschen. Das kann sehr schwierig sein, aber als Designer ist es wirklich wichtig, sich immer selbst zu pushen und sicherzustellen , dass Sie die beste Arbeit machen , die Sie machen können. Ich empfehle auf jeden Fall, eine Pause einzulegen, wenn Sie vom Entwurfsmodus in den Kritikmodus wechseln. Es kann wirklich schwierig sein, wenn Sie gerade etwas wirklich Tolles entworfen haben gerade etwas wirklich Tolles entworfen das Sie wirklich stolz sind, es dann zu beurteilen und herauszufordern. Aber indem du deine Arbeit beurteilst und herausforderst , wächst du als Designer auf diese Weise. Ich empfehle daher, eine Pause von etwa 24 Stunden einzulegen, zwischen dem Entwerfen von etwas und dem anschließenden Kritisieren von etwas. Hier sind einige Fragen , die du dir stellen kannst , während du deine Arbeit kritisierst. Vermitteln Ihre Designs Ihre Geschichte? Denken Sie daran, dass Sie sich zu Beginn dieses Kurses eine Geschichte ausgedacht haben, die Sie zu Ihrem Thema erzählen möchten. Kommt diese Geschichte mit deinen drei Infografiken durch ? Ist die Botschaft oder Information klar und leicht verständlich? Vielleicht ist ein Diagramm jetzt, wo Sie zurückblicken und Ihre Arbeit herausfordern, nicht genau so geworden, wie Sie es sich vorgestellt haben. Und vielleicht ist es verwirrend oder es funktioniert einfach nicht. Und das Format, das Sie ursprünglich gewählt haben, sind all Ihre Texte und Designelemente lesbar? Es wird sehr schwierig sein, Ihre Geschichte zu vermitteln , wenn Ihr Publikum Ihren Text oder Ihre Kreisdiagramme nicht lesen kann, wenn Ihre Bezeichnungen, Einheiten und Schlüssel von den Informationen ablenken. Denken Sie daran, dass Ihre Informationen das Wichtigste an Ihrer Grafik sind. Du brauchst keine zusätzlichen Elemente Leute von der Hauptbotschaft oder deiner Geschichte ablenken. Und vor allem, zeigst du und erzählst du nicht nur? Sie können Ihre Freunde oder Familie jederzeit bitten , einen Blick darauf zu werfen. Auf diese Weise bietet es eine völlig neue und externe Perspektive von Ihnen. Implementieren Sie einige dieser kleinen oder vielleicht großen Änderungen , die Sie benötigen, um Ihr Design zu verbessern, und bereiten Sie es vor, es in der nächsten Lektion als unsere endgültige Version zu speichern. 14. Speichern Sie Ihre Designs: Sie haben alle Ihre Änderungen umgesetzt. Sie haben wirklich starke Designs, auf die Sie offensichtlich sehr stolz sind, und ich kann es kaum erwarten, sie zu sehen. Jetzt müssen wir dein finales Kunstwerk speichern, damit wir es mit unseren Klassenkameraden hier auf Skillshare teilen können. Sigma macht es wirklich einfach , Ihre Designs zu exportieren. Alles was Sie tun müssen, ist auf Ihre Frames zu klicken , die Sie exportieren möchten. Deshalb möchten wir, dass unsere Webseite und unsere Beiträge in sozialen Netzwerken auf Skillshare geteilt werden. Also werden wir diese beiden Frames auswählen. Wir gehen zum unteren Rand dieses rechten Bereichs und klicken auf Exportieren. Sie können es als PNG oder als verschiedene Dateitypen speichern. Aber ich denke, PNG oder JPEG sind heute wahrscheinlich die besten für unsere Unterrichtszwecke, du wählst deinen Dateityp. Sie können hier beliebige Dateinamen hinzufügen, werden jedoch automatisch unter dem Namen des Frames gespeichert Ihre Dateien werden jedoch automatisch unter dem Namen des Frames gespeichert. Es wird das also als Webseite speichern . Und das sind soziale Beiträge, weshalb es auch hier wirklich wichtig ist, organisiert zu bleiben und Figma und deine Frames, deine Seiten entsprechend zu kennzeichnen. Es wird dich nur auf Erfolg vorbereiten. Später. Wir können weitermachen und auf Zwei Ebenen exportieren klicken. Und es wird automatisch unsere beiden Ebenen in einer Zip-Datei herunterladen . Herzlichen Glückwunsch, nach all Ihrer harten Arbeit haben Sie endlich Ihre endgültigen Designs gespeichert. Und ich kann es kaum erwarten, sie zu sehen. Stellen Sie sicher, dass Sie diese beiden Bilder zusammen mit Ihren Skizzen in die Projektgalerie hochladen diese beiden Bilder zusammen mit . Platzieren Sie Ihre Designs und ein Modell, um zu sehen, wie es als echtes Produkt aussehen würde , und lassen Sie es auf Ihrer Portfolio-Website realer aussehen . Jetzt werden wir nur ein paar offene Fragen in unseren letzten Lektionen lösen. 15. Andere Anwendungen: Alle wichtigen Fähigkeiten, die wir gerade gelernt haben, können in jedem Designbereich und jeder Anwendung angewendet werden . Ich hoffe, Sie freuen sich genauso wie ich darauf, diese wirklich wichtigen Fähigkeiten in jedem Designprojekt anzuwenden . Wie ich bereits erwähnt habe, können Sie mit diesem Projekt weitermachen. Sie müssen sich nicht nur an drei Informationsgrafiken halten . Sie können 100 Grafiken für Ihre datengesteuerte Kampagne erstellen . Aktualisieren Sie Ihren Designprozess mithilfe der Schritte, die wir in diesem Kurs durchgeführt haben, um durch Skizzieren und Iterieren Form in Inhalt zu bringen . Mit anderen Worten, hören Sie nicht einfach bei Ihrer ersten Idee auf, sondern überschreiten wirklich die Grenzen und holen mehr Skizzen heraus oder probieren Sie verschiedene Designstile aus. Verwenden Sie ein Designsystem und Ihren Prozess, um konsistente, visuell kohärente Designprojekte zu erstellen . Festlegung dieser Stile im Voraus und Ihr Projekt kann wirklich einen großen Unterschied machen und dazu beitragen am Ende alles zusammenkommt. Es macht es Ihnen auch einfacher, sich auf Ihr Gesamtbild zu konzentrieren. statt der kleinen Designelemente , die beim Entwerfen auftauchen, können Sie strategischere Farbschemata erstellen, strategischere Farbschemata erstellen die für ein breiteres Publikum zugänglicher sind , indem Sie diese Adobe Color verwenden Tools zur Barrierefreiheit. Üben Sie Empathie für Benutzer indem Sie während des gesamten Designprozesses darüber nachdenken, wie andere Ihr Design betrachten oder verwenden könnten . Erfahren Sie mehr über Webdesign, Benutzererfahrung oder Interface-Design, Marketing und weitere Themen, die wir in Ihrem Projekt untersucht und angesprochen haben. Lassen Sie uns alles in der letzten Lektion zusammenfassen. 16. Schlussbemerkung: Herzlichen Glückwunsch, Sie sollten so stolz auf sich sein , dass Sie dieses wirklich herausfordernde, aber hoffentlich aufschlussreiche Informationsdesign-Projekt abgeschlossen haben. Sie haben in diesem Informationsdesign-Kurs viel gelernt, wie zum Beispiel Inhalte zu formen, visuelles Storytelling, Empathie für Benutzer zu üben, strategische Designsysteme zu entwickeln, visuell kohärente Projekte zu erstellen, und Design und Figma. Aber wenn Sie aus diesem Kurs nur eines mitnehmen, hoffe ich, dass Sie sich weiterhin neue Wege beibringen können und sollten , um Ihre visuellen Fähigkeiten zur Problemlösung zu verbessern. Fordern Sie sich und Ihre Fähigkeiten regelmäßig heraus, indem Sie neue Projekte für Ihr Portfolio erstellen, wie das, das wir in diesem Kurs erstellt haben. Es wird Ihr Portfolio erheblich stärken, um Ihnen zu helfen , Arbeitsplätze zu finden und gleichzeitig Ihr Wissen zu erweitern. Vergessen Sie nicht, Ihr Kampagnenprojekt in die Projektgalerie hochzuladen , indem Sie Ihre Skizzen und Ihre endgültigen Webseiten- und Social-Media-Designs posten . unbedingt an mich oder einen deiner Klassenkameraden, um neue Perspektiven zu erhalten, Feedback zu erhalten und hoffentlich unsere Design-Community zu verbessern. Vielen Dank, dass Sie an diesem Kurs teilgenommen haben und mehr über Informationsdesign gelernt haben. Wir sehen uns in der nächsten Klasse.