search

c4a8-web / shared-components

Storybook driven shared web components.
1 stars 2 forks source link

Cases Modul neu überarbeiten #203

Closed cakageka closed 1 month ago

cakageka commented 3 months ago

https://www.figma.com/design/EOtCq50WnkBHdNZxMEDue8/GK-Website-Layouts?node-id=725-6387&t=3WCdKRws0Lh7Vqwl-1

Listor commented 3 months ago

@lenadaflis gibt es eigentlich auch eine Idee, wie das Ganze mobil aussehen soll?

lenadaflis commented 3 months ago

@Listor Yes: https://www.figma.com/design/EOtCq50WnkBHdNZxMEDue8/GK-Website-Layouts?node-id=4723-13696&t=e0AzCfaoRJ6opBXG-4

Listor commented 3 months ago

Die Komponente kann auf DEV angeschaut werden. Ist auf der Testseite ganz unten:

https://chartreuse-sky.cloudvent.net/de/azure/azure-test/

lenadaflis commented 3 months ago

Danke @Listor !

Das Bild hat momentan noch ein Padding nach links, sollte aber bis zum Rand gehen (Ab Übergröße kann es aber gerne aufhören zu "wachsen" und auf weiß bzw. hellgrau stehen). Wenn man vom zweiten zum ersten Screen zurückwischt, muss das Easing m.E. umgekehrt sein. Die Navigationspfeile kommen mir auch noch etwas groß vor.

cakageka commented 3 months ago

Ich finde die Transition noch nicht optimal. @lenadaflis Was meinst du? Weiter ist gut, Zurück läuft sie meines Erachtens zu schnell. Gibt es noch eine Alternative für die Texttransition?

Listor commented 3 months ago

@lenadaflis das Bild hat kein Padding, es befindet sich nur in unser aktuellen Content Spalte.

Bis wohin soll denn das Bild wachsen? Aktuell haben wir "nur" Breakpoints bis 1340px, das wäre dann wie bei der Navigation.

Wenn ich das Quadrat proportional mitwachsen lasse, wirkt der Content rechts eventuell etwas klein. Die Höhe der Komponente wird sich dann auch weiter erhöhen, was bei einem 16:9 Fenster leicht dazu führen kann, dass das Bild angeschnitten wird, also nicht komplett abgebildet.

Die graue Fläche soll also komplett die Zeile ausfüllen?

Pfeile passe ich an. Transition drehe ich um.

@cakageka wir können jede Transition einbauen, die man sich vorstellen kann. Kann auch nochmal was Anderes ausprobieren.

Den Casestudy Link setze ich auch wieder nach unten, der hat sich irgendwann verselbstständigt.

Listor commented 3 months ago

Die Änderungen sind jetzt auf DEV zu sehen https://chartreuse-sky.cloudvent.net/de/azure/azure-test/

@cakageka die Text Animation ist jetzt gestaggert, also Element nach Element, man könnte sie auch von rechts reinkommen lassen.

cakageka commented 3 months ago

@lenadaflis Vielleicht too much. Aber ich habe für den Bildwechsel an eine Animation ähnlich der Bootcamp-Animation gedacht. Das Bild wird von einer Farbfläche überlagert, die dann das nächste Bild enthüllt: Wenn man auf den "Weiter"-Pfeil klickt, schiebt sich eine Farbfläche von rechts nach links über das Bild und das neue Bild kommt von links nach rechts.

Texttransition: Ich glaube, was mich an der Animation stört, dass nicht alles gleichzeitig erscheint. Es gibt einen leichten Versatz von oben nach unten. Stimmt das?

Listor commented 3 months ago

Genau, vorher war es gleichzeitig mit der Verzögerung zum Bild und jetzt ist es gestaggert, also mit leichtem Versatz auch mit der Verzögerung zum Bild. Dies ist ähnlich wie in anderen Komponenten, in denen wir auch einzelne Items wie im FAQ leicht verzögern.

Würde dort nicht zu viel Bewegung reinbringen, weil das Bild schon sehr viel Bewegung mit bringt und wir durch die Verzögerung schon auch eine gefühlt lange Animation haben.

lenadaflis commented 3 months ago

@Listor Bezüglich der Bildaufteilung meinte ich es in etwa wie auf der Karriereseite https://chartreuse-sky.cloudvent.net/de/karriere beim Abschnitt "Wo du dich nicht verbiegen musst". Dort ist das Bild ebenfalls randabfallend und der Text steht in der anderen Spalte. Wenn man dort das Fenster größer zieht, ist das Bild linksbündig fixiert – stattdessen würde ich es rechtsbündig fixieren, sodass der Abstand zur Textspalte gleich bleibt. Die Hintergrundfarbe von der Textspalte soll ebenfalls randabfallend sein. Es ist sozusagen ein Fullwidth-Modul. Innerhalb des Containers sieht es meiner Meinung nach etwas merkwürdig aus.

Und zur Animation: Beim Text würde ich auch eher ruhig bleiben und nicht alle Elemente nacheinander einblenden. Aber die Idee mit der Bildanimation finde ich gut. Meint ihr, es wird zu viel, wenn wir das ausprobieren und dafür den Text ruhiger halten?

Listor commented 3 months ago

Der letzte Stand ist jetzt auch auf DEV zu sehen https://chartreuse-sky.cloudvent.net/de/azure/azure-test/

@lenadaflis @cakageka @kristinrolfes

Die Version hat jetzt auch die besprochene Unschärfe links, als Verlängerung. Alternativ könnte man die Fläche auch sonst mit dem selben Grau wie Rechts hinterlegen.

KristinRolfes commented 3 months ago

Finde ich gut @Listor. Für mich passt die Unschärfe. Kannst du in der Desktopversion noch den Schatten und und den Abstand zum nachfolgenden Modul rausnehmen?

Listor commented 3 months ago

Na klar. Habe den Schatten entfernt. Der Abstand nach Unten kommt vom Footer und kann eingestellt werden, habe ihn hier für das Beispiel deaktiviert. https://chartreuse-sky.cloudvent.net/de/azure/azure-test/

Listor commented 3 months ago

Schnellere Version ist jetzt hier auf https://chartreuse-sky.cloudvent.net/de/azure/azure-test/

Kann so auf STAGING?

@cakageka @lenadaflis @KristinRolfes

Listor commented 3 months ago

Soll ich die Komponente mergen oder wollt ihr noch etwas anpassen? @cakageka

lenadaflis commented 3 months ago

@Listor Auf dem Macbook scheint die Komponente etwas zu hoch zu sein, sodass man den Button "zur Case Study" erst nach einem Scrolling sieht. Kann man da noch was machen?

image image
Listor commented 3 months ago

Das liegt daran, dass das Bild ein Verhältnis von 1:1 hat.

Ich habe hier eine maximal Höhe definiert, ab der Höhe wird links mit der Unschärfe aufgefüllt. Man kann also entweder ein kleineres Bild pflegen, dann fängt die Unschärfe früher an, oder man reduziert die Maximal höhe noch, was auch dazu führt, dass man die Unschärfe früher sieht.

Die Maximal Höhe liegt im Moment bei 1100px, also 1100x1100.

Wenn man verhindern will, dass der Link außerhalb des Viewports ist, wird man bei dem Verhältnis von 1:1 und einem 16:9 Fenster dann immer eine Unschärfe sehen.

Man könnte auch den Link weiter unter die Copy setzen.

Was meinst du?

lenadaflis commented 3 months ago

Was wäre denn, wenn sich stattdessen der rechte Block mit dem Content breiter ziehen würde? Nur mal laut gedacht.

Listor commented 3 months ago

Wie eben besprochen, probiere ich mal die graue Fläche maximal auf 50% wachsen zu lassen.

Listor commented 3 months ago

Auf DEV befindet sich jetzt die neue Version https://chartreuse-sky.cloudvent.net/de/azure/azure-test/

lenadaflis commented 2 months ago

Finds jetzt super so.

Listor commented 1 month ago

Jetzt auf STAGING auf der Testseite gepflegt: https://fluffy-soap.cloudvent.net/de/azure/azure-test/