Figma Design: Erstellen eines einfachen Web-Dashboard | Tetiana G | Skillshare

Playback-Geschwindigkeit


1.0x


  • 0.5x
  • 0.75x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Figma Design: Erstellen eines einfachen Web-Dashboard

teacher avatar Tetiana G, UX Designer

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      Willkommen!

      0:48

    • 2.

      layout einrichten

      3:45

    • 3.

      Design Bar und Icons

      5:08

    • 4.

      Kopfzeile und Spalten

      6:06

    • 5.

      Kartenelemente und Avatare - letzte Schritte

      6:27

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

422

Teilnehmer:innen

11

Projekte

Über diesen Kurs

Dashboards sind in vielen Web-Apps vorhanden, die wir täglich verwenden. Insbesondere B2B-Unternehmen erstellen Dashboards, um die wichtigsten Informationen zu zeigen und das Verhalten des Benutzers zu beeinflussen. Und deine Aufgabe als UX/UI Designer ist es in der Lage, ein sauberes und modernes Design mit Fokus auf Zugänglichkeit und Benutzerfreundlichkeit zu liefern.

Hast du dich also jemals gefragt, wie du ausgefallene Dashboards in Figma entwerfen kannst, die du in deinem Portfolio präsentieren kannst?

Glaube mir, es ist viel EINFACHER als du denkst. In diesem Kurs werde ich dich Schritt für Schritt durch den gesamten Prozess der Gestaltung eines Dashboards für das Projektmanagement begleiten. Dies ist eine perfekte Gelegenheit, die grundlegenden, aber wichtigen Merkmale von Figma zu lernen:

  • Gitter einrichten und mit 8px Gittern arbeiten
  • Mit Icons und spezifischen Plugins arbeiten
  • Ausrichtungs- und grundlegende Layoutregeln
  • Arbeiten mit Formen
  • Typographie auf eine effektive Weise anwenden
  • Und alle Designelemente in das komplette Design bringen

Während deines Lernprozesses ermutige ich dich auch, die Schritte in deinen persönlichen Figma sofort anwenden Am Ende lade dein Dashboard-Design hier hoch und ich werde mich mehr als glücklich, dir mein Feedback zu geben.

Wir sehen uns in diesem Kurs!

Triff deine:n Kursleiter:in

Teacher Profile Image

Tetiana G

UX Designer

Kursleiter:in

UX Designer with a background in software development, currently improving the user experience of the SaaS application in the sustainable building industry. Besides my work, I enjoy recording Figma tutorials here on Skillshare as well as for my YouTube channel and LinkedIn Learning and also tutoring the ones who are interested in becoming UX designers.

Download my freebies about UI Design here: https://tetianag.gumroad.com/

Vollständiges Profil ansehen

Level: Beginner

Kursbewertung

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Willkommen!: Willkommen zu einem anderen Sigma-Kurs, richtig, in ein paar Lektionen lernen Sie, wie Sie ein professionelles Web erstellen , das verzweifelt für Projektmanagementzwecke mich schnell vorstellt. Mein Name ist Jana. Ich bin UX-Designerin und erstelle gerne pädagogische Inhalte über Figma und das Balldesign. Während dieses Kurses werde ich Sie von Anfang bis Ende durch den gesamten Prozess führen, wie Sie ein Web-Dashboard erstellen. Das bedeutet, dass wir mit dem Einrichten des Ebenenrasters beginnen und später die Navigationsleiste, die Symbole, das Profilbild und andere Elemente innerhalb des Dashboards entwerfen werden die Navigationsleiste, die Symbole, das Profilbild und andere Elemente innerhalb des Dashboards entwerfen Symbole, das Profilbild . Und am Ende ermutige ich Sie, mir Ihre Arbeit zu schicken , damit ich Ihnen mein Feedback geben kann. Und auf diese Weise können Sie Ihre Designfähigkeiten erlernen und auch erweitern. Also beeilen Sie sich, melden Sie sich für diesen Kurs an und ich hoffe, Sie im nächsten Video zu sehen. Wir beginnen mit den Grundlagen der Verzögerung im Netz. 2. layout einrichten: Willkommen im ersten Teil dieser Klasse, in dem wir ein Raster für unser Dashboard einrichten werden. Und das Einrichten eines Rasters ist eine gute Vorgehensweise , bevor wir anfangen, irgendeine Art von Benutzeroberfläche zu entwerfen , da mit dem Raster oder den Elementen in unserem Rahmen konsistent sein kann. Wählen wir zunächst schnell einen Frame aus und wir erstellen ein Web-Dashboard. In den vordefinierten Frames wählen wir also einen Desktop-Frame aus. Ich werde es schnell umbenennen. Der erste Schritt besteht darin, zu den Layoutrastern zu wechseln und das erste Raster genau hier zu erstellen. Also fangen wir mit dem Raster selbst an. Standardmäßig sehen Sie, dass die Größe zehn Pixel beträgt, aber wir werden sie auf acht ändern , weil wir mit dem Acht-Pixel-Raster zusammenarbeiten werden, was heutzutage ziemlich üblich ist aber wir werden sie auf acht ändern, weil wir mit dem Acht-Pixel-Raster zusammenarbeiten werden, was heutzutage ziemlich üblich ist Entwerfen verschiedener Benutzeroberflächen. Wenn Sie also die Isometrie hier die ältesten verschiedenen Quadrate sehen können und wenn Sie einige Elemente haben, zum Beispiel ein Rechteck, können Sie sehen, wie es sich hier mit diesem Element innerhalb des Rasters bewegen wird. Wenn wir unsere Umschalttastaturen halten und unsere Elemente tatsächlich verschieben, springt es sofort um zehn Pixel, um zu entscheiden. Wir werden mit dem achten Pixelraster zusammen arbeiten . Gehen wir zu den Präferenzen und passen tatsächlich unseren Notch-Betrag an. Standardmäßig ist die große Kerbe auf zehn eingestellt, aber wir werden sie auf acht ändern. Grundsätzlich wird dieser Wert unsere Auflösung und die tatsächlich unabhängigen Aufzählungspunkte anpassen tatsächlich unabhängigen Aufzählungspunkte mit denen wir zusammenarbeiten werden. Das ist großartig. Lassen Sie uns im Grunde noch einmal Rechteckwerkzeug auswählen. Und wir werden die linke Seite der Menüleiste zeichnen linke Seite der , die wir normalerweise in unserem Dashboard sehen. Ich werde tatsächlich mein achtes Pixelraster verwenden um mich einfach zu zeigen, wo ich die Ränder für meine Menüleiste sehen kann. Und sagen wir, dass die Breite unserer Menüleiste 192 Pixel beträgt. Und wie Sie genau hier sehen können, fällt es perfekt in unser 8 Raster. Lassen Sie uns unsere Ebene schnell hier reparieren, und wir werden unseren Rahmen und den Ebenenrasterabschnitt auswählen , wir fügen ein weiteres Raster hinzu, aber diesmal wählen wir anstelle eines Rasters Spalten und in einer Spalte, so dass Sie all diese verschiedenen Arten von Einstellungen sehen. Und normalerweise arbeiten wir, wenn wir mit Web-UIs arbeiten, mit einem 12-Spaltenraster zusammen. Wie Sie sehen können, ändert sich die Anzahl der Spalten, an die wir uns halten, sofort den Typ wir auswählen werden, dass unsere Spalten von der linken Seite beginnen werden. So sieht man sofort, wie sie sich hier mit der Gosse tatsächlich nach links und rechts bewegen , da wir mit 8 Bit arbeiten, Logarithmus ist eine gängige Praxis, die sich für 24 entschieden hat. Und tatsächlich werden wir auch mit einem Offset arbeiten, was die Breite unserer linken Menüleiste zusammen mit dem Rand bedeutet unserer linken Menüleiste zusammen mit , den wir festlegen möchten. Ich werde nur Alt halten und den Wert hier tatsächlich erhöhen. Lassen Sie uns hineinzoomen und überprüfen Sie es tatsächlich. Es ist also genauer. Ich denke, dass wir es um ein Pixel ändern sollten und das, das ich im Grunde ein anderes rechteckiges Werkzeug zeichne, das ich in der Breite sehe , was eigentlich der Rand ist. Es sind also zusätzliche 56 Pixel. Dies ist eine Art Sollwert, den ich auf einer anderen Seite meines Rahmens grundsätzlich von der rechten Seite haben werde. Kehren wir zu unseren Layout-Rastereinstellungen zurück. Und tatsächlich werden wir eine Phi Breite wollen. Unsere Säulen erstrecken sich also im Grunde bis zum Ende unseres Rahmens. Wie Sie sehen können, sind 80 Pixel ziemlich zu viel, da die letzte Spalte hinter das Stromnetz verläuft. Verringern wir also den Wert 72 Breite. Und ich werde das am Knöchel duplizieren und hier platzieren. Wie wir sehen können, ist es etwas mehr. Unsere Marge beträgt 64 Pixel statt 56, aber es ist ziemlich in Ordnung, da Sie in Dashboards normalerweise etwas mehr Platz auf der rechten Seite haben müssen. So einfach ist das, wir richten unser Raster ein. Daher ist das erste Raster wichtig , um alle unsere Elemente innerhalb des Rahmens auszurichten. zweite Raster besteht aus Spalten , in denen wir unsere Elemente auf unserem Dashboard gerade vertikal ausgerichtet haben. Wir sehen uns also im nächsten Video. 3. Design Seitennavigation Bar & Icons: Willkommen zurück im zweiten Teil dieser Klasse. In einem früheren Video haben wir das Raster eingerichtet , das wir als Hauptpunkte haben werden , um die Elemente in unserem Dashboard zu entwerfen. Lassen Sie uns schnell unseren Spaltenpunkt ausblenden und in unsere linke Menüleiste gehen und wir beginnen, im Grunde genommen die Menüpunkte zu entwerfen. Ich fange tatsächlich mit ein paar Icons an. Und um ein paar Icons zu haben, habe ich bereits das Feather Icons Plugin installiert. Ich habe den Link zu diesem Blog hinterlassen und wo Sie ihn tatsächlich finden und einfach auf Ihrem Figma-Profil installieren können. Vor unseren Icons ist es also ziemlich einfach zu arbeiten. Sie können einfach nach verschiedenen Arten von Symbolen suchen oder sie mit einem Text suchen. Also verwende ich dieses Symbol für mein Logo, im Grunde das Logo meines Dashboards , das ich auch dieses Symbol verwenden werde , und eine Reihe anderer, die ich schnell auswählen werde. Genau hier sind meine Icons. Es sieht ein bisschen chaotisch aus, also werde ich das voneinander entfernen. Stimmt's? Platzieren wir dieses also oben und auch die anderen direkt unter dem ersten Icon. Ich wähle alle diese Symbole aus, richte sie in der Mitte aus und habe auch den gleichen Abstand zwischen jedem von ihnen. Also verwende ich zum Beispiel den Wert 36. Nun, dann der Eigen, ich denke, dass der Schlaganfall ziemlich dick ist. Also wähle ich jedes Symbol aus und ändere den Strichwert tatsächlich auf den niedrigeren. Wählen Sie zum Beispiel gleich diesen Frame aus. Ich kann ältere Vektorebenen auswählen und tatsächlich zu Strich gehen und den Wert auf eins ändern. Das Gleiche gilt für andere Icons , die ich einfach auswähle. Alles klar, fügen wir diesem Symbol etwas Text hinzu. Der erste wird also der Name unserer Dashboards sein . So verwalten Sie zum Beispiel das Problem. Ich werde auch die Textschriftarten ändern und tatsächlich die Größe und das Gewicht meiner Schriftart erhöhen. Gute Praktiken, um tatsächlich die Entfernung von acht Schritten zu haben . So zum Beispiel 16 feste Zellen oder noch mehr. Also kopiere ich diese Ebene und lege sie tatsächlich ab und ändere sie in die verschiedenen Tests. Genau hier wird es langweilig sein. Wählen wir auch alle diese Textebenen aus und richten sie auf der linken Seite aus. Und wir werden sie auch zu jedem der Icons schicken. Wenn wir fertig sind, wählen wir alle diese Ebenen aus und verschieben sie tatsächlich, um wählen wir alle diese Ebenen aus und verschieben sie über unseren Menürahmen zu entscheiden Wir werden ihn genau mit unserem soeben erstellten Guthaben positionieren . Ich werde diese Ebene tatsächlich ein wenig auf den Wert von 224 erhöhen , weil ich das Gefühl habe , dass ich mehr Platz für unsere Icons brauche und für unsere Texte innerhalb perfekter Song-Noten den Abmeldewert ein wenig senkt die Unterseite, weil es irgendwie weniger irrelevant ist, die wir für uns haben müssen. Und auch diese vier Menüpunkte, ich werde etwas tiefer sinken , damit wir unseren Logo-Maulwurf unterscheiden können. Wählen wir auch unsere Ebene aus und ändern die Füllung so, dass sie weiß wird. Und eine Möglichkeit, auch Effekte anzuwenden. Also Schlagschatten und wir können diese Ebene tatsächlich von anderen Teilen unseres Dashboards unterscheiden . So etwas. Verstecken wir also auch unsere Rate, um zu sehen, wie es aussieht. Und ich denke, wir können es langsam ändern, es weniger sichtbar machen. Das Letzte, was wir haben, ist, dass wir genau den Menüpunkt hervorheben , in dem wir uns befinden werden. Und das wird in dem Gegenstand sein, der Brett genannt wird. Also werde ich den Wert haben, den ich mit anderen Werten ins Schwarze malen werde , ich werde es im Grunde in das hellere Grau ändern. Hier. Ich werde das Gewicht der Schrift erhöhen. Und ich werde auch die Farben dieser beiden Vektorebenen leicht ändern . Bunter und es sieht eher aus wie ein Logo. Und das Letzte, was ich noch hervorheben möchte, befinde ich mich innerhalb des Boards. Hier haben wir unser Rechteck mit einer Füllung , die wir auch in der Mitte ausrichten werden. Und ich werde es auch hellblau einfärben. Dann reduziere ich die Deckkraft auf den Wert von zehn. Es ist also leicht sichtbar, dass sich in unseren Boards befanden. Wir haben gerade unsere erste Menüleiste von links erstellt . Und im nächsten Video werden wir unser Heather erstellen und mit anderen Elementen fortfahren um ein einfaches Dashboard zu erstellen. 4. Header und Spalten: In diesem Teil arbeiten wir an der Kopfzeile und auch an den ersten Elementen in unserem Dashboard. Auch hier füge ich weitere Symbole hinzu, um im Grunde zu zeigen, dass die Person Benachrichtigungen und das Hilfecenter im Dashboard suchen und sehen kann . Ich gehe zurück zum Feder-Icons-Plugin und suche nach weiteren Icons. Perfekt, drei unserer Icons sind genau hier. Ich verschiebe sie wieder voneinander. Mein Suchsymbol wird auch diese graue Farbe haben , sodass es weniger sichtbar ist. Und anderes Werkzeug Ich werde schwarz gefärbt und ich werde auch das Gewicht des Strichwerkzeugs leicht um ein Pixel reduzieren . Perfektionieren Sie diese beiden Frames weniger allein und bewegen Sie sie tatsächlich ein bisschen mehr nach oben. In diesem Fall schalte ich meine Layout-Raster , damit ich meine Elemente einfach ausrichten kann. Und wie Sie sich erinnern, haben wir bereits unsere Breite der Menüleiste geändert. Daher ist es wichtig, auch den Versatz unserer Spalten zu ändern , um mehr Platz zwischen den Elementen und unserer linken Menüleiste zu haben . Lassen Sie uns also einen etwas größeren Versatz haben und auch die Breite etwas verringern. Ob wir auch sicherstellen müssen, dass unsere Breite perfekt in unserem achten Pixelraster liegt. Das perfekt so passt die Breite von 70 Werkzeug und Offset von 256 perfekt in unser achtes Pixelraster genau hier. Lassen Sie mich diese Suchleiste schnell verschieben. Ich werde es auch an der Mitte mit unserer pro verwalteten Ebene ausrichten . Und auch diese zweischichtigen Zellen werden in der Mitte zentriert sein. Bringen wir sie ein bisschen auf diese Seite. Auch hier zeichne ich einen Kreis, der das Profil des Benutzers zeigt , der sich gerade in diesem Dashboard befindet. Also stelle ich die Breite und Höhe von tödlichen Pixeln fest und finde ein Bild der Person. Ich gehe zu einem anderen Plugin namens Unsplash und suche nach dem Bild der Person. Zum Beispiel passt dieses Bild ganz perfekt. Es ist ziemlich lässig und auch Profis. Wenn Sie also die Einstellungen dieses Bildes ändern möchten, können Sie einfach zur Füllung gehen, auf das Bild klicken und zur Beschneidungsvignettierung wechseln. Und tatsächlich werden Sie zum Beispiel dieses Porträt vergrößern und es mehr in der Mitte der Form zentrieren. So. Es sieht ziemlich perfekt aus. Ich werde es auch verschieben, um über den Kredit zu entscheiden und ihn in der Mitte auszurichten, eine perfekte Balance zu erzielen, ihn erneut mit unserer Suchschicht auszurichten. Das nächste Symbol für dieses Suchsymbol, schreibe ich auch Textsuche. Es ist also offensichtlicher , was diese Ikone bedeutet. Lassen Sie uns auch die Farbe der Spezifikationen ändern und im Grunde sehen , dass sie eine Verschiebung von 16 Pixeln vom Symbol hat. Wenn ich das Layout-Raster ausschalte, schauen wir uns an, wie unsere Artikel im Dashboard aussehen, also sieht es ziemlich gut aus. Lassen Sie uns auch unser Ebenenraster zurücksetzen und ich werde über den Titel sprechen. Das bedeutet, dass Sie sich im Vorstandsbereich befinden. Ich werde auch den Wert des Stils der vielen neun Pixel erhöhen . Und wir werden uns auch mit dem mittleren Gewicht dieses Textes begnügen. Stellen wir auch sicher , dass es mit dem ersten Punkt in unserer linken Menüleiste zentriert ist. Okay, es sieht ziemlich gut aus. Also setze ich mein Layout-Raster erneut ein und erstelle die drei Spalten, in die wir unsere Aufgaben einfügen, die wir in diesem Projekt erledigen müssen. So zum Beispiel, um in Arbeit zu tun und fertig zu machen. Dafür gehe ich noch einmal zum Rechteckwerkzeug. Und wie Sie genau hier in unserem Raster sehen können, haben wir 12 Spalten und drei Elemente haben die gleiche Größe. Es bedeutet also, dass jedes Element die Breite von vier Spalten in dieser Benutzeroberfläche annimmt. Es sei denn, es wurde tatsächlich kopiert und hier platziert. Es ist tatsächlich zentriert und passt perfekt. Und ich gehe in den Eckenradius und ändere den Wert in angespannt. Unsere Gerichtsmediziner sind glatt und wenn nicht so scharf, was sie gerade hatte, für mein Prämise-Projekt ich für mein Prämise-Projekt tatsächlich die Farbpalette hier kopiert , die ich für mein Dashboard verwenden möchte. Sie können Ihre eigene Farbpalette anwenden oder tatsächlich diejenige verwenden, die ich verwende. Ich habe in der Beschreibung dieser Klasse auch die Farbcodes jeder Farbe hinterlassen die Farbcodes jeder Farbe , die ich für dieses Dashboard verwendet habe. Also wähle ich alle diese drei Schichten aus und ändere ihre Farbe in das hellere Grau. Und das schreibt auch die Titel für jeden dieser Abschnitte. Und natürlich wollte ich mit dem Kredit perfekt sein. wir also sicher, dass es perfekt ausgerichtet ist. Und ich werde auch weitere Symbole hinzufügen , die Plus- und Morris-Ethik sind, um nach dem Plus-Symbol und auch nach weiteren Einstellungen zu suchen. Genau so. Ich werde natürlich wieder gehen und den Wert des Schlaganfalls ändern, den dieser Gesundheit hat. Und auch ich mache das Gleiche mit dem zweiten Icon. Aber es ist auch Liebe dieses Rechteck damit es sich nicht auf dem Weg bewegt. Und wir werden beide Ebenen auswählen und sie tatsächlich auf die gleiche Ebene mit unserem Untertitel setzen . Wenn ich alle diese drei Ebenen auswähle und sie genau in der Mitte und genau hier ausrichte, werde ich auch sicherstellen, dass alle diese drei Schichten gut ausgerichtet sind. Und der Abstand zwischen ihnen wird auch für unsere acht großen Schneckengitter relevant sein. Als jemand geboren wurde, um diese drei Schichten auszuwählen und zu gruppieren und sie auch zweimal zu teppieren , um sie im Grunde genau in die gleiche Position zu den beiden anderen Abschnitten zu bringen . Die letzten Gedanken werden darin bestehen, den Text tatsächlich in Bearbeitung und Erledigt zu ändern . Ich denke, unsere Schreibtische wurden immer besser und mehr mit Elementen eines Freundes gefüllt. Im nächsten Video fügen wir weitere Elemente in jedem dieser Abschnitte hinzu. 5. Kartenelemente & Avatare - Endstufen: Willkommen im letzten Teil dieses Kurses. Und im Moment werden wir unser Design mit der Erstellung der einfachen Autos abschließen mit der Erstellung der einfachen Autos , die wir unser Board platzieren werden. Bevor wir mit dem Entwerfen unserer Karten beginnen, wählen wir schnell unseren Rahmen aus. Ich aktiviere das Acht-Pixel-Raster für mich zurück nur um zu sehen, wie ich meine Wache mit den zu erledigenden Aufgaben platzieren werde . Lassen Sie uns schnell hineinzoomen. Und ich fange mit einem To-do-Bereich an. Und ich wähle das Rechteck-Werkzeug aus und zeichne genau hier ein weißes Rechteck. Also stelle ich sicher, dass die Ränder grundsätzlich zur linken und rechten Seite meiner Elemente passen zur linken und rechten Seite , die ich zuvor erstellt habe. Und ich gehe sofort in den Eckenradius und ändere den Wert auf 20. Also werde ich die abgerundeten Ecken für meine Karte haben. Und natürlich wird die Farbe weiß sein. Ich werde auch die Höhe dieses Elements etwas erhöhen und sicherstellen, dass der Abstand zwischen dem To-Do-Titel und meinem Element 24 große Zellen ist. Der nächste Schritt besteht also darin, das Label für die Martha-Aufgabe zu erstellen. Und in diesem Fall tippe ich ein Designsystem ein. Wählen wir also diese Ebene aus. Und ich werde auch die Füllung auf Hellgrau und auch das Schriftgewicht ändern . Und ich werde dieses Label etwas kleiner machen, also ist es nicht so offensichtlich wie die anderen Elemente am Morgen, etwas später zu erstellen. Und ich möchte es auch mit einem Farbcode markieren. Also werde ich schnell LPS erstellen, indem ich Schichten halte. Meine Q-Werte sind also im Grunde gleich. Und ich habe schon vor der Farbpalette vorbereitet , dass ich das Pipettenwerkzeug hier benutzen werde . Wenn Sie also aktivieren, werden diese mit einer hellblauen Farbe hervorgehoben und ich wähle zum Beispiel eine grüne Farbe für diesen Fall aus. Am Ende wähle ich auch beide Ebenen aus und richte sie genau in der Mitte aus. Lassen Sie uns zum Beispiel diesen Teil schnell gruppieren und ich stelle sicher, dass mein Abstand zwischen dem oberen und dem linken Rand 24 Pixel beträgt. Der nächste Schritt besteht darin, einen Titel zu erstellen. Und in diesem Fall lese ich eine Helden-Sektion. Das wird also die Aufgabe sein. Zum Beispiel muss ein Team entwerfen. Die Kopfzeile hat das Schriftgewicht von 18 Pixel. Und lasst uns auch sicherstellen, dass es mit meinem Label übereinstimmt. Also hier werde ich es ein bisschen näher an das Label bringen. Und der nächste Schritt wird nur eine Kopie sein. Das hier, Zuneigung. Und im Grunde werden dies unsere primären Texte sein, in denen wir beschreiben werden , worum es bei der Aufgabe geht. Und ich werde den Wert meiner Schrift verringern und uns auch regelmäßig halten , was meine Beschreibung auf alle Karten verteilt wird . Und nur um sicherzustellen, dass der Abstand 24 Pixel von links nach rechts und gleich hier neu beträgt links nach rechts und gleich hier , geben Sie schnell eine Beschreibung ein. Dies ist genauso einfach Text-Gouache und Schema mit. Und ich werde auch sicherstellen, dass der Abstand zwischen den Primärtexten und dem Titel ebenfalls acht Pixel beträgt . Ich möchte, dass mein Auto auch die Einstellungen hat. Also wähle ich einfach die zuvor erstellten Einstellungssymbole aus und kopiere sie und lege sie neben mein Label. Natürlich wird es auch auf der rechten Seite zentriert sein , genau wie mein primärer Text. Der letzte Schritt ist , um tatsächlich kleine Labels zu erstellen , wären Initialen von Personen, die für diese Aufgabe verantwortlich sein werden. Und dafür wähle ich wieder ein Ellipsenwerkzeug aus. Und indem ich die Umschalttaste gedrückt halte, zeichne ich einen einfachen Kreis. Und sofort gehe ich zum Strich und füge einen einfachen Strich mit weißer Farbe hinzu, der sich im Alex befinden wird. Und natürlich wähle ich fehlgeschlagen das Spiel aus, das ich 5-Bit gehe zu meiner Farbpalette und wähle eine der Farben aus, die ich früher in dieser Klasse vorbereitet habe . Ebenso. Ich werde einige Initialen einer Person erstellen, die für diesen GSK verantwortlich sein wird. diese beiden Ebenen auswähle, sende ich das richtige Genau in horizontaler und vertikaler Position. Und darin gruppieren wir diese beiden Elemente einfach schnell . Also werde ich die Position dieses Elements auch um 16 feste Zellen senken . Und zum Beispiel werde ich dieses Element auch kopieren. Und weil ich zum Beispiel möchte, dass Menschen diesem Problem zugewiesen werden, gehen wir schnell wieder zu meiner Farbpalette und wechseln zum Beispiel zu dieser Farbe. Genau hier. Ich werde die Initialen so ändern. Genau hier möchte ich auch, dass meine Ellipse 24 Pixel Entfernung zum Rand dieser Karte hat. Also werde ich einfach die Höhe dieses weißen Rechtecks erhöhen. Dies ist nur ein einfaches Beispiel dafür , wie wir unsere Karte erstellt haben. Ich deaktiviere das Raster nur um zu sehen, wie es aussehen wird. Also denke ich, es sieht ganz einfach aus, aber auch ganz nett. Und ich wähle einfach alle diese Ebenen aus , die ich gerade erstellt habe. Und ich gruppiere sie genau hier zusammen. Nur um unser Design fertigzustellen. Ich kopiere diese Karte und ändere den Inhalt darin, damit wir am Ende ein ziemlich schönes Dashboard mit den Aufgaben haben können ein ziemlich schönes Dashboard mit . Los geht's. Es sieht aus wie ein großartiges Dashboard, das wir einfach für so kurze Zeit erstellt haben. Lassen Sie uns endlich unseren Rahmen auswählen und ihn im Präsentationsmodus sehen. So haben wir unser einfaches und sehr professionelles Dashboard für das Aufgabenmanagement für das Projektteam erstellt unser einfaches und sehr professionelles Dashboard für das Aufgabenmanagement . Leute, ich bin echt neugierig auf deine Arbeit. Ob Sie ein ähnliches Dashboard erstellt haben , ist ein bisschen anders, eines, das Sie für Ihr Portfolio erstellen wollten oder einfach nur zum Spaß für sich selbst. Lassen Sie es mich wissen und ich gebe Ihnen gerne ein Feedback und danke Ihnen vielmals für diesem Kurs und ich hoffe, Sie in der nächsten Klasse zu sehen die Teilnahme an diesem Kurs und ich hoffe, Sie in der nächsten Klasse zu sehen, die ich bald vorbereiten werde.