Transkripte
1. Einführung: Hallo zusammen. In diesem Kurs geht
es darum, Landingpage und
Sigma zusammen mit
Lawdyanimationen zu entwerfen Landingpage und und zu vereinfachen. Vielleicht hast du vom
Laden von Animationen gehört, aber es sind nur
animierte Dateien und machen deine Designs
viel ansprechender. Stellen Sie also sicher, dass Sie sich für
diesen Kurs anmelden, sehr kurz ist. Es sind mehr oder
weniger zehn bis 15 Minuten. Und Sie werden einfach viel
lernen, wie man Raster verwendet, wie diese Dipolgrafiken, irgendeine Art von Verläufen, auch das automatische Layout des
Bettes und das Anwenden von Ladeanimationen
in Ihr Figma-Projekt anwenden. Ich hoffe, dich
in der Klasse zu sehen und dich
trotzdem im nächsten Video zu sehen.
2. Was sind Lottie Animationen?: Sie zeigen Ihnen schnell, was
Lawdy Animation genau ist. Vielleicht haben Sie noch nie davon gehört, aber höchstwahrscheinlich haben Sie es
definitiv gesehen Sie von
Websites oder mobilen Apps aus interagiert haben. Also ich liebe es, zu travel.com zu gehen,
ist nur ein Haufen
verschiedener Fallstudien und Portfolio-Fälle, die
Designer hochladen. Also muss ich hier viele
Animationen eingeben , um
Ihnen einige Beispiele zu geben. Also lasst uns z.B.
auf diesen ersten klicken. Und auf diesem Bild kannst du sehen, dass es
animiert ist, es bewegt sich. Das ist also im Grunde das
Laden von Animationen, nur eine interaktive
Illustration , die irgendeine Art von Animation enthält. Dies ist ein weiteres Beispiel
für diese Abbildung. Anstatt also z. B.
zwei einfache statische Bilder zu haben, können
Sie es animieren lassen. Das
Laden von Animationen hat den Vorteil , dass
sie ansprechender neugieriger sind und die Aufmerksamkeit Ihres
Benutzers länger auf sich ziehen. Deshalb werden wir
es speziell
in diesem Kurs auf eine
einfache Landingpage anwenden. Sie müssen keine
gelobten Animationen verwenden. Wenn du nicht willst.
Es ist einfach ein nettes Add-on. Es bietet nicht
wirklich viel
Sichtbarkeit aus Sicht der Benutzererfahrung, aber es ist nur mehr für
die visuelle Ästhetik und das Engagement Ihrer Benutzer. Im nächsten
Video zeige ich Ihnen
genau, wo Sie kostenlose Lichtanimationen für
Ihre Figma-Designprojekte herunterladen können.
3. Bibliothek mit Lottie Animationen: Zuallererst, richtig,
kannst du tatsächlich
viele Animationen
für dein Figma-Design bekommen ? Also habe ich einen sehr netten
Vorschlag für dich. Es steht Ihnen frei, es zu verwenden, oder Sie können auch andere Ladeanimationen
googeln
, damit Sie eine Zeile finden können. Kreatin ist also eine
sehr einfache Website, ist mit creative.com. Sie können direkt
hier klicken und im Grunde verschiedene
Ladeanimationen
sowie Illustrationen,
animierte Icons und Icons herunterladen sowie Illustrationen, . Lassen Sie uns also schnell
auf viele Animationen klicken. Und genau hier
haben wir eine Reihe
verschiedener Möglichkeiten, die wir auf unsere Projekte
anwenden können. Also hier kannst du
entweder filtern , ob du viele
Animationen kostenlos sehen möchtest , oder vielleicht, wenn
du ein Premium-Paket
hast, kannst du auch nach diesem filtern. Lass uns also zu
den alten Animationen zurückkehren und ich werde dir schnell zeigen
, wie es funktioniert. Sie können auch
hier danach suchen und sich etwas anderes ansehen. Das ist eine nette Animation. Also haben wir z. B. diese
Discover-Animation. Wenn Sie darauf klicken, können Sie auch grundsätzlich die Farben
dieser Ladeanimation ändern. Also möchtest du es z. B.
blauer machen und statt Bank möchtest
du es grün haben. Als Beispiel: Ich liebe es wirklich, zu kreieren, ist mein persönlicher
Vorschlag, weil Sie sehr individuelle
Animationen für Ihre Projekte
erhalten können . Ich liebe den Link in der
Kursbeschreibung, über den du dein
Konto kostenlos erstellen
kannst. Speziell für diesen Fall werden
wir nur eine Lotterie-Animation verwenden, aber wenn Sie z. B. etwas Inspiration
haben,
können Sie
weitere Dinge herunterladen und
mit Ihrem UI-Design experimentieren.
4. Startseite-Design: Gehen wir nun zu unserer Figma-Datei. Und zunächst
erstellen wir einen Desktop-Frame, wie wir es
in unseren Tutorials immer tun. Wird auch schnell das Layoutraster
einrichten. Und es werden Spalten
mit einer Zählung von 12 sein. Und ich werde einfach die Ränder auf
beiden Seiten für den
Wert von 56 Pixeln
festlegen , Gadara zwischen den Spalten, was 24 Pixel sein wird. wählen wir tatsächlich
das Textwerkzeug aus und geben unsere Überschrift
oder die Schrifteinstellungen ein. Wir werden die Schrift ändern. Und es wird
auch eine fette Schrift mit
den Einstellungen mit einer
Größe von 60 Pixeln sein. Also genau hier ist es
ein bisschen zu groß, also werden wir
die Breite dieses Containers verringern. Und ich werde es auch genau
hier
positionieren , wo die erste
Spalte tatsächlich beginnt. Lassen Sie uns nun
diese Textebene
mit der Tastenkombination Strg
plus D duplizieren . Und wir werden die Eigenschaften sofort
auf regulär umstellen. Und auch unsere Schriftgröße
wird 24 Pixel betragen. Dadurch wird sich auch die
Füllfarbe der Stapel ändern. Und ich werde
einfach auch
ein paar Sachen eingeben , die ich zufällig online
gefunden habe. Und stellen wir sicher, dass es
auch richtig auf
die erste Spalte
unseres Layoutrasters ausgerichtet ist. Dann werden wir
tatsächlich erstellen, dass unsere
Call-to-Action-Tasten aus zwei Tasten bestehen, der primären und der
sekundären. Der erste
wird also
einen Text haben , der kostenlos mit der
Erstellung beginnt. Ich werde auch
alles direkt hier in
dieser Textebene auswählen und ganz nach oben
klicken. Also werden wir es so haben. Dann werde ich mit Autolayout arbeiten
, es responsiver
machen, weil ich
diesen Button noch ein paar Mal wiederverwenden werde. Klicken wir auf Shift
plus eine Abkürzung. Und wie Sie
in einem späteren Abschnitt sehen können, haben wir sofort
ein Autolayout erstellt. Also werden wir
sicherstellen, dass alles in der Mitte ausgerichtet
ist. Und dann haben
wir auch unsere
horizontalen Ränder, horizontalen Abstand mit
einem Wert von 32 Pixeln und den vertikalen Abstand
mit einem Wert von 16. Ich möchte auch
den Eckradius mit
einem Wert von acht erstellen . Und dann
vergessen wir nicht, unseren Fehler hinzuzufügen , denn im Moment
ist alles transparent. Also was der Plus-Button, eine feste
Füllung erzeugt hat und automatisch weiß
ist, sodass Sie keinen wirklichen Unterschied erkennen
können. Aber wir werden mit Farbverläufen
arbeiten. Wählen wir also den linearen Gradienten. Unser erster Marker wird diese Art von blauer Farbe
haben, und der zweite Marker wird etwas mehr mit
den violetten Farbtönen
haben . wir außerdem sicher
, dass wir
die Opazität unseres
zweiten Markers auf 100% erhöhen . Und ich werde einfach auch schnell die Position
der Marker
ändern und
vielleicht nur, um
es visuell besser zu sehen , wie
es aussehen wird. Ich werde unser Layoutraster ausblenden damit wir es
genauer sehen können. Natürlich hat ein
Dunkelgrau mit blauer, violetter Farbe einen
sehr schlechten Kontrast. Also lasst uns es tatsächlich auf Weiß
ändern. Und ich werde
ihre Marker hier noch einmal leicht modifizieren . Wir werden unser Layoutraster
wieder aktivieren. Stellen Sie außerdem sicher, dass alles richtig ausgerichtet
ist. Dann haben wir auch
unsere zweite Flasche, die eigentlich nur aus Stapeln besteht. Also hol dir eine Demo. Und um unsere
Buttons etwas kleiner zu machen, werde
ich
die Schriftgröße nochmal
auf Valley of 18 ändern . Sie können sehen, wie
das automatische Layout alles ähnlich
reagiert und auch eine Bandbreite
mit Medium erstellt und
dasselbe werde ich
für diese sekundäre Schaltfläche wiederholen. Außerdem werde ich
schnell zu Plugins gehen. Ich habe dieses Plugin
und die Pigment Community installiert, und genau hier suche ich
einfach nach dem Symbol. Lass es uns schnell und
direkt hier in unsere Gegend ziehen. Und ich werde dieses Plug-In
für den Moment einfach schnell schließen. Dann werde ich auch die Zeilenhöhe auf das
Tal von 24 Pixeln und diese
beiden Elemente aneinander ausrichten und sicherstellen, dass
der Abstand zwischen
beiden
acht Pixel beträgt . Lass uns wie eine Gruppe aussehen. Wir werden es
etwas näher an unserem Button positionieren. Und dann gehe ich
zurück zum
Icon-Slugging , weil ich noch ein paar Icons haben möchte
, die ich für
unser Logo und auch
andere Informationen verwenden
werde , wenn sie auf unserer Landingpage
angezeigt werden. Lassen Sie uns also schnell nach einem Symbol
suchen, das sie früher in einigen
meiner vorherigen Projekte verwendet haben. Und dann werde ich auch schnell noch ein paar
Icons auf dieser Leinwand
platzieren. Ordnung, lassen Sie uns dieses Symbol
für den Moment einfach hier
behalten . Und bei diesem werde ich
auch seine Farbe ändern, die lila, die
ich für unseren Button verwende. Und lassen Sie uns einfach schnell ein
Logo, einen Namen oder einen Firmennamen
eingeben . Ich werde auch die Größe ändern, den Wert von 24 und auch die Vektorebenen
innerhalb meines Frames Ich werde
die Strichbreite erhöhen, aber den Wert von zwei. Lass uns einfach
alles so ausrichten. Und wir werden es auch ein
bisschen näher beieinander halten. Und irgendwann werde ich es
auch gruppieren. Dann geben
wir einfach ein paar Menüpunkte ein. Ich werde es ein paar
Mal duplizieren, weil ich andere Elemente
haben werde , die ich
einfach schnell umbenennen
werde, all diese Ebenen auswähle, dann auf Aufräumen klicke und
sicherstelle, dass es sich um
Entfernung handelt dazwischen
sind 64 Pixel. Und mit control plus g werde
ich mir das auch schnell
einfallen lassen. Lassen Sie uns alles
an einer Linie ausrichten. Und ich werde auch sicherstellen
, dass unser Logo auch hier
auf der linken Seite mit
anderen Elementen übereinstimmt . Lassen Sie uns
unsere Anwendungsfälle einfach so formulieren,
dass sie auch auf unsere
Kolumne abgestimmt sind. Okay, jetzt kann ich diese Taste schnell duplizieren, um
die Steuerung plus D aktivieren
und sie genau hier platzieren zu aktivieren
und sie genau hier platzieren,
weil ich gerne
noch einen Call to Action hätte
, der dritter kostenlos ist. Und dann werde ich sicherstellen, dass der Container der
Stapel eine feste
Breite hat , da wir
den Boden erneut duplizieren und eine weitere sekundäre Schaltfläche
haben werden . Und der Text hier könnte etwas kürzer
sein und ich möchte ihn
nicht
verantwortungsbewusst verkleinern. Lassen Sie uns einfach hier aufhören, Sinus n, und wir werden
die Mitte zur Mitte ausrichten. Und Sie können sehen
, dass die Breite
des Containers einfach gleich bleibt
, weil wir ihn repariert
haben. Mit unserem Gürtel. Wir werden
nur eine einfache feste Füllung
mit weißer Farbe haben und
wir fügen einen Strich mit
einem Wert von einem Pixel hinzu. Und auch unser Text
wird eine dunkle Farbe haben. Also ECS, dass wir gerade
eine weitere Schaltfläche erstellt haben, die wir
einfach genau hier platzieren, 24 Pixel von der anderen entfernt. Lassen Sie uns
diese Ebenen auch gruppieren und
sicherstellen , dass sie
an der letzten Spalte ausgerichtet sind. Und wir werden auch
alles in der Mitte ausrichten. In Ordnung, perfekt. Jetzt haben wir auch dieses Ding , das wir einfach hier machen werden. Und ich werde
ihren Wert einfach auf 16 mal 16 Pixel reduzieren . Und für jeden Vektor möchte
ich sein
Strichgewicht auf den Wert eins reduzieren. Und lassen Sie uns einfach einige
Funktionen für dieses Projekt eingeben es auf das reguläre
ändern. Und auch unsere Zeilenhöhe
wird
16 Pixel betragen , weil die
beiden, es ist ein bisschen zu viel. Dann lassen Sie uns einfach einen Abstand von
vier Pixeln zwischen ihnen
haben vier Pixeln zwischen ihnen und beide
Ebenen auswählen und Shift
plus A drücken , um ein
weiteres Autolayout zu erstellen. In Ordnung, perfekt. Wir werden es zweimal mit
Control plus C
duplizieren . Und was ist
jetzt cool an
Autolayout? Weil ich hier ein weiteres Symbol
ziehen werde und du es sofort
sehen kannst. Einfach die
Deposition anpassen und
dasselbe mache ich
mit einer dritten Vertiefung, würde eine dritte Beschriftung machen und auch
unser Pinselsymbol löschen. Jetzt müssen wir nur noch den
Text in diesen beiden Ebenen ändern. Ordnung, jetzt lasst uns einfach
alles füreinander tun. Klicken Sie auf Aufräumen, und ich werde einfach
den Abstand zwischen all
diesen drei Beschriftungen mit
dem Tal nach oben 32 Pixel haben . Wir können auch diese
beiden Ebenen nehmen und sie auch
gruppieren. Und dann
wählen wir unsere Überschrift,
unseren Textkörper und Schaltflächen aus
und streichen sie ebenfalls aus. Und haben im Grunde den Wert von 60 Pixeln zwischen allen. Dann wird es es wieder
gruppieren. Und im Grunde können wir seine Position nur
geringfügig ändern. Diese Gruppe, diese Schichten auch. Moment haben wir also im Grunde die Grundlagen dieser Landingpage. Was ich also tun muss,
ist zu
meiner kreativen Plattform zurückzukehren und nach einigen animierten Illustrationen zu
suchen einigen animierten Illustrationen zu
suchen , die wir herunterladen werden. Gehen wir tatsächlich
zur Suchleiste und ich
gebe das Projekt ein. Sie können hier eine
Reihe von Ergebnissen sehen. Aber was ich bereits
benutzt und in
der Demo gezeigt habe , wird dieses Ai-Projekt
sein. Lass uns darauf klicken für Klick. Und das Coole
daran ist, dass Sie die Farben
dieser Lotterieanimationen
grundsätzlich ändern können die Farben
dieser Lotterieanimationen
grundsätzlich ändern .
Falls Sie
sie als statisches Bild herunterladen möchten, können
Sie auch
auf diese Option klicken dass es es einfach wie eine Illustration
herunterlädt, aber ich möchte es natürlich
als Animation behalten. Also klicken wir einfach auf
eine dieser Farben. Und ich werde tatsächlich genau
hier
zurückgehen und meinen Knopf drücken. Ich werde einfach schnell
diesen lila Farbcode holen und
ihn gleich hier in
die verrückte Animation einfügen . Sie können sehen, dass die Änderung
die geringfügige Änderung dieser Farbe ist . Dann gehen wir auch
zur blauen Farbmarkierung, kopieren diesen Hex-Code und
fügen ihn im Grunde anstelle
der rosa Farbe ein. Ihr könnt sofort auch
diese große Veränderung sehen und
das Gleiche gilt für unsere Dunkelkräfte. Ich werde es etwas dunkler machen, im Grunde
eher eine schwarze Farbe. Sie können also auch eine
Hintergrundfarbe ändern, wenn Sie möchten. Moment ist es weiß, aber ich werde es überhaupt
nicht ändern. Also lass uns auf Download klicken. Und genau hier habe
ich die Möglichkeit,
entweder angrenzendes GIF
MP4 oder MP4 kostenlos herunterzuladen . Was Glenn
für Figma benötigt, obwohl
kompatibel ist, ist eine GIF-Datei. Sie können das Set auch vergrößern, die Größe auf das Maximum erhöhen. Es werden 512 Pixel sein. Ich weiß nicht, welche
Werte tot sind, aber das ist dein Pmax.
Wir werden es benutzen. Lass uns mit dem Herunterladen beginnen. Perfekt, weil ich im Browser
arbeite, kann
ich mir
diesen Download sofort holen und
direkt hier in meinem Projekt platzieren. Wir können es auch an
der rechten Seite unserer
Call-to-Action-Schaltfläche ausrichten . Und das werde ich auch auswählen und im Grunde
alles auf die Mitte ausrichten. Moment
sehen Sie diese Art von
Animation
vielleicht nicht wirklich, weil wir
gerade diese
Lotterie-Animation haben und
sie sieht nicht so sehen Sie diese Art von
Animation
vielleicht nicht wirklich, weil wir gerade diese
Lotterie-Animation haben und aus, als ob
sie sich überhaupt bewegt. Aber das Testset, Lass uns einfach in den Präsentationsmodus
gehen. Und hier können Sie
tatsächlich sehen, dass wir diese
wunderschöne Animation haben. So laden wir einfach die GIF-Datei von
crazy
herunter und fügen sie hier ein
und machen deine Landingpage. Was ich
in diesem Projekt auch tun möchte , ist
, einen
verschwommenen Hintergrund hinzuzufügen ,
um einen etwas stärkeren Kontrast zwischen dieser
Ladeanimation und meinem Hintergrund zu erzielen. Also gehe ich einfach zu einem anderen Plugin, das Blobs
heißt, und dann generieren wir
einen zufälligen Blob. Lass es uns einfach einfügen. Und wir können im Grunde
gleich hier hingehen und
seine Position ganz
unten auf unserer Landingpage ändern .
Ich werde auch die Farbe ändern, sodass
sie ungefähr so aussieht. Wir gehen zu den
Effekten und wenden eine Ebenenunschärfe an und erhalten tatsächlich
den Wert mit 200 Pixeln, vielleicht etwas mehr. Sie können also sehen, dass wir
sofort diesen
verschwommenen Hintergrund haben . Lassen Sie mich einfach
kurz
die Position
dieser beiden Ebenen ändern . Und ich werde es einfach schnell wieder
duplizieren mit
einer Steuerung plus D me. Ich werde diesen Effekt entfernen und auch die
Füllung in weiße Farbe ändern. Und was für ein Tastenkürzel von Shift
plus X Wir können sehen, dass wir gerade
einen Konturverlauf haben , der seine Breite verringern
wird. Hier haben wir also einen
schönen Effekt, den
wir in unser Projekt anwenden werden. Ich werde
es auch schnell erhöhen und auch wieder erhöhen. Wählen wir also diese beiden Blöcke mit
der Kontur aus und richten
sie in der Mitte aus. Ich werde G auch
mit den Tastenkombinationen steuern , damit wir es tatsächlich gruppieren
können. Und wir können auch
mit seinem Besitz herumspielen, vielleicht ein bisschen gedreht, um einen gewissen Kontrast zu
erzeugen. Lassen Sie uns schnell auch
unseren verschwommenen Block duplizieren. Ich werde es auch
bei einer Belichtung verkleinern und seinen Drehwinkel ändern. Und wir
nehmen auch diese lila Farbe
, ich werde sie etwas
heller machen , damit sie
nicht so auffällig ist. Und wir platzieren
es einfach ganz hinten in unserem Ebenen-Panel
auf dieser Leinwand. Dies ist
ungefähr etwas, das Sie ganz einfach als Landingpage
tun können . Und lassen Sie uns einfach hier
zurückgehen und uns
die Änderungen ansehen , die wir
an dieser Landingpage vornehmen. Auf diese Weise können Sie also einfache Audit-Animationen auf
Ihre Landingpage oder auf
jedes andere Design
anwenden und es
für Ihre Endbenutzer viel interessanter
gestalten. Also Leute, stellt sicher, dass ihr den Link unter diesem Video mit
einem Rabattcode
verwendet , um
10% Rabatt auf das Erstellen zu erhalten. Und ich hoffe, dass dir
dieses Tutorial gefallen hat und ich hoffe
, wir sehen uns beim nächsten Mal.
Tetiana G, UX Designer
