Entwurf

[stadine]

Hier meine Vorschläge

[lislis]

Sehr schön! Ich hab automatisches deployment bei push auf master eingestellt, dann können gleich alle gucken :eyes: https://feminizidmap.org/

[stadine]

Hier alles was ich bisher habe. Mich interessiert: 1) deine Meinung zu der Infografik der Fälle auf der Startseite 2) deine Meinung zum Menü

Spannend wird noch das Verhalten der Infografik in Mobil. Da schau ich mir nochmal ein paar Beispiele an. Und im Header habe ich eine recht genaue Vorstellung des Verhaltens der Namen. Dafür brauche ich aber noch ein bisschen Zeit und besser auch erst die Entscheidung, ob wir das machen wollen. Ich mag es bisher aber sehr. Das alte Bild ist wegen Faulheit noch drin. 😬

[lislis]

<3 Startseite

1. Infografik Fälle Die Wirkung ist so schon mega, selbst wenn es nur bei den Fotos bleibt, ohne andere Info oder Interaktion. Auf mobil kann die Anzahl der Fotos pro Reihe einfach umbrechen, da seh ich erstmal kein Problem. Es sei denn da soll noch viel zusätzliches passieren??

2. Menü, spannende Frage. Verstehe ich richtig, das:

   • Das Logo prinzipiell an der gleichen Stelle bleibt, aber die schwarze Fläche sich drunter schiebt?
   • Der Maincontent sich zusammen mit der schwarzen Fläche nach rechts schiebt?
   • der Sprachschalter und der Menüburger verschwinden?
   • wie schließe ich das Menü wieder, wenn ich doch nirgendwo hin will? Falls das soweit stimmt, kann ich das glaube ich bauen, mit ein bisschen Trickserei. Sollte auch mobil funktionieren.

Bin gespannt was du für die Namen im Header vorsiehst. Weisst du schon ob der Blur über den Namen animiert werden soll? Da müsste ich definitiv auch erstmal nachlesen wie man das anstellen kann. Aber ja, wäre gut das lieber gleich zu besprechen, ob das ok ist oder nicht. Wäre es ok wenn ich die Screens schon mal mit dem Team teile, oder lieber noch warten? About, FAQ, und Researchers find ich safe, das würde ich einfach so umsetzen.

Und: ist da noch ne andere Serifenschrift oder sieht sie in groß einfach anders aus?

[lislis]

Hey @stadine Ich hab mal mit der navigation angefangen und einem einfachen "Single Page" template für die About Seite. Schau mal wie du denkst.

Erst pullen und dann git checkout v2

Die Startseite ist etwas kaputt gegangen, nicht erschrecken.

[stadine]

Menü:

• Sieht schon super aus und genau so war es auch gedacht!
• Die schwarze Fläche schiebt den Maincontent nach rechts.
• Das vorhandene schwarze Logo faded aus und taucht dann in in weiß auf der schwarzen Fläche auf. So wie es jetzt ist.
• Sprachschalter und Burger-Icon verschwinden ebenfalls. Der Sprachschalter ist sonst die ganze Zeit da und recht präsent, das ist schon ok.
• Das Menü schließt, wenn man auf den Maincontent (weiße Fläche) klickt.
• Burger-Icon und Sprachschalter würden beim Scrollen fixed im Viewport bleiben.
• Die schwarze Fläche könnte noch, wenn sie nicht ausgeklappt ist, beim Hover breiter werden. Für die Juicyness.

Infografik Fälle

• Ich bin so froh, dass es dir gefällt!
• Soll ich die Bilder schonmal als png exportieren?
• Für die Interaktion stelle ich mir grade folgendes vor: Entweder bei Hover/Tap ein Tooltip, das sich über die Infografik legt und den Kontext der Tat (also den Kommentar aus dem Datensatz) bescheibt. Oder unter der Infografik Textausschnitte mit Kontexten zur Tat, evtl. Link zur Quelle, die man Shuffeln kann, sich mit einem Klick auf einem Button austauschen.
• Wenn du Lust drauf hast, kann ich beide Varianten mal gestalten.

Header

• ich würde die Namen richtig gerne animieren, weiß aber auch wie tricky das ist. Soll ich mal ein Video dazu machen und dann schauen wir weiter? Dann hätten wir auch eine gute Basis um drüber zu reden.

Kannst immer genre teilen, musst nicht fragen. Und die Schrift sollte dieselbe sein. Wenn nicht, ist da was aus einer alte Einstellung reingerutscht.

🙌🙌🙌

[lislis]

Heya! Menü Ich hab das Menü soweit fertig. Den Burger button hab ich jetzt doch drin gelassen und dann mit nem X gearbeitet. Außerhalb klicken finde ich in dem moment zu unintuitiv. Plus es funktioniert auf mobilen screens nicht, weil das menü quasi den ganzen screen einnimmt und ich dewegen einen button brauche. und für screenreader und tastatur user müsste ich auch button einfügen kennzeichnen und dann "visuell" verstecken. ich glaube es macht einfach Sinn einen button zu haben.

Infografik

• jetzt hast du sie schon exportiert :D
• hover/ tooltip ist auf mobil immer schwierig, ein click/tap event müsste als fallback auch mit rein
• das mit dem Schuffeln versteh ich nicht, sind die Textausschnitte dann unabhängig von den Portraits?

Header Der Effekt ist ganz nice, und wenn man mehrere zeitversetzt hat wirkt das bestimmt sehr gut. Was ich mich frage ist, soll es dann so eine Art Loop geben, oder was passirt wenn alle Namen irgendwann ausgefaded sind? Oder sind sie dann eben weg, so als Statement?

Anderes Für Links im main content hab ich vorerst doch die underline wieder hinzugefügt, nur das grau war nicht vom schwarzen Text zu unterscheiden, da kann aber gern eine andere Lösung her.

Ich fang dann mit der Startseite und den einzelnen Sektionen an, halt alles was ohne Daten funktioniert. sollen wir für "Mord ist Mord" auch ein Hintergrundbild verwenden oder (zumindest für die Begriffe) SVGs? da könnte dann auch noch eine Interaktion mit rein

[stadine]

Menü Ist super!

Infografik

• Ich hatte heute einen Call und dabei Zeit
• Ich skizzier das mit dem Tooltip und dem Shuffle mal. Für Click/Tap müssen wir, glaube ich, nur drauf achten, dass die Bilder auf mobil groß genug zum Auswählen sind und dass man das Tooltip wieder wegklicken kann.

Header

• Dann mach ich morgen auch das Video. Ich dachte bisher, dass wir ca. fünf Namen haben und deren Abfolge und Position bestimmen und die im Loop laufen. Alle Namen zu verwenden und keinen Loop zu haben finde ich aber viel, viel besser. Was hälst du davon, wenn ein Statement erscheint und stehen bleibt, wenn alle Namen durchgelaufen sind? Auch wenn ich noch nicht weiß, was das sein könnte.

Anderes Zu den Links: Danke! Ich wollte es ja eigentlich nur für das Menü ändern. 😬 Ich habe die Begriffe als SVGs in deutsch und englisch schon exportiert. Der Hintergrund der »Mord ist Mord« Section ist nur eine schwarze Fläche. Aber ich habe vergessen die Portraits zu exportieren. Bekommste gleich.

[stadine]

Ich hab das Video in /static hochgeladen. Link: https://we.tl/t-tVf0qgweb2

Schau mal, ob du damit was anfangen kannst.

Und nochmal ein paar Sachen ausformuliert, falls das weiterhilft. Sonst lass telefonieren.

• Der Name erscheint zuerst, der Kontext faded aber schon ein bevor der Name ausgeschrieben ist
• das Ausfaden dauert länger als das Einfaden
• die Buchstaben faden nacheinander ein
• der Effekt ist für den Namen wie für den Kontext derselbe (ist im Video grad anders)
• Namen können länger stehen bleiben als im Video

[Das Video ist leider riesig. Vielleicht kannst du es dir speichern und wieder löschen. Schien mir so einfacher als das noch woanders hochzuladen]

[lislis]

Video ist super! Aber für die animation muss ich erstmal schauen ob ich Buchstabe für Buchstabe so geblurrt bekomme. Vllt mach ich da ein codepen zum rumprobieren.

ich hab mit der Startseite angefangen, in der Section 'mord ist mord' hab ich bei den SVGs den path bei hover animiert (gerade nur in der deutschen version). Was hälst du davon?

[lislis]

Ah und, auf mobil werden die Portraits erstmal nicht angezeigt, weil ich mir da unsicher bin wie die Anordnung sein soll. deswegen erstmal nur auf desktop

[stadine]

Startseite und Animation des Paths find ich super! Die Animation ist erstmal nur temporär im Hover oder?

Den Hint mit der Anordnung habe ich verstanden. ;-) Ich will heute noch was anderes fertig machen und setz mich im Anschluss dran.

Ein paar Kleinigkeiten will ich ändern, wenn ok:

• Ich hab gelogen. Die Farbe bei der Section „Mord ist Mord...“ ist doch nicht schwarz. Ich füg sie bei den Variablen hinzufügen
• die Größe der Case-Boxen kleiner machen
• im Header background-attachment: fixed rausnehmen, wenn die Animation da ist. Das wird sonst komisch aussehen
• Überschriftengrößen für h1 Murder und das Padding der Section ändern
• SVG Tragödie neu exportieren

[stadine]

Startseite und Animation des Paths find ich super! Die Animation ist erstmal nur temporär im Hover oder?

Den Hint mit der Anordnung habe ich verstanden. ;-) Ich will heute noch was anderes fertig machen und setz mich im Anschluss dran.

Ein paar Kleinigkeiten will ich ändern, wenn ok:

• Ich hab gelogen. Die Farbe bei der Section „Mord ist Mord...“ ist doch nicht schwarz. Ich füg sie bei den Variablen hinzufügen
• die Größe der Case-Boxen kleiner machen
• im Header background-attachment: fixed rausnehmen, wenn die Animation da ist. Das wird sonst komisch aussehen
• Überschriftengrößen für h1 Murder und das Padding der Section ändern
• SVG Tragödie neu exportieren

[lislis]

Die Animation ist erstmal nur temporär im Hover oder?

idealerweise spiel sie wenn die section in den viewport scrollt, aber da muss ich nochmal schauen ob ich das schön hinbekomme. Oder wann würdest du sie abspielen wollen?

den rest kannst du gern ändern, nur bei "die Größe der Case-Boxen kleiner machen" ist es evtl nicht ganz so einfach. Ich hab css-grid für die Ausrichtung benutzt und da einfach noch nicht so viel Erfahrung

[lislis]

HIer ein Codepen mit der Animation so gut wie es geht https://codepen.io/lislis/pen/zYvLMpb

[stadine]

Die SVG Animation habe ich mir auch genau so vorgestellt. Man scrollt hin, kann die Wörter noch lesen und dann werden die durchgestrichen. Hier wäre es leider auch wieder eleganter, wenn die nicht alle zur selben Zeit durchgestrichen werden, sondern ein bisschen zeiterversetzt.

Bei der Murder-Section würde ich gerne die Klasse „C-Section“ raus nehmen und das padding auf die Klasse -murder legen. Ich push das gleich mal.

Ansonsten habe ich mir die Infografik nun für Mobil angeschaut. Ich hatte die Bilder zuerst relativ groß und mich nach einer kurzen Recherche dafür entschieden die kleiner zu machen. Das könnte das Scrollen einfacher machen, weil oben und unten noch genug weiße Fläche ist. Auch wenn wir Scroll und Tap unterscheiden könnten.

Es gibt hier einmal die Variante mit dem Tooltip. Da es bei den kleinen Bildern nun schwer werden könnte, ein Bild auszuwählen gibt es noch die Variante mit dem Shuffle. Da ist der Kontext unter den Bildern. Mit Klick auf Shuffle tauscht sich der Text aus und ein anderes Bild wird in der Infografik als aktiv angezeigt.

Die Animation ist doch schon gut. Das einzige was mich stört, ist, dass die einzelnen Buchstaben nach dem Blur wieder deutlicher erscheinen, aber eine Lösung habe ich dafür ja auch nicht. Ich kann nur nochmal überlegen, wo ich sowas schonmal gesehen habe.

[lislis]

Das einzige was mich stört, ist, dass die einzelnen Buchstaben nach dem Blur wieder deutlicher erscheinen

lol, das passiert in Firefox nicht :upside_down_face: ich schau nochmal ob das in chrome (und vermutlich auch safari) irgendwie anders geht.

Zur Infografik, wir können den shuffle auch auf kleinen screens bzw touch displays zeigen und dann zum hover auf großen screens übergehen. Das ist hauptsächlich darstellungssache, da hält sich der Programmieraufwand für zwei versionen in Grenzen. Was meinst du?

Ich researche dann auch die animation-on-scroll Sache. Push gern alles was du ändern willst, ich fasse heute nichts mehr direkt im Branch an.

[stadine]

Es wurde rejected. Also habe ich es grade nochmal neu gemacht 😬

Shuffle auf mobil und hover auf großen Screens find ich gut.

[lislis]

Ich würde die Infografik und Headereffekt erstmal mit ein bisschen fake data bauen. Ob und wie sie dann befüllt werden wird glaube ich ne größere Geschichte und wird wohl auf ein meeting hinauslaufen. Aber dann gibt es wenigstens eine Referenz und die Infografiksektion und den Headereffekt könnten zur Not auch erstmal weggelassen werden.

[lislis]

Ich hab den v2 branch mal deployed https://dreamy-wozniak-5ebbb4.netlify.app/ ich schick dir gleich auch das dudle für das nächste meeting

[lislis]

Closing!