Redesign LD
Logo
Ich hatte anfangs ziemlich Schwierigkeiten da ich nicht direkt eine Idee hatte. Daher habe ich versucht mit den Buchstaben LD einiges ausprobiert und Motive wie Bücher etc. ausgetestet. Dann kam ich auf die Idee etwas Blumiges miteinzubinden da das sehr zu mir passt und zudem auch Wachstum wiederspiegelt. Für die Animation bieten sich hierbei auch viele Optionen. Dies habe ich mit mk besprochen und er hat mir empfohlen weiter in richtung Natur zugehen. Daher habe ich ein paar Pflanzen skizziert und direkt versucht diese im Ilustrator umzusetzen.
Logo v1
Als ich auf das Blumenthema gestossen bin habe ich vieles grob illustriert und ausgetestet. Ich hatte aber schon von anfang an etwas Lavendel/ Flieder mässiges im Kopf. Dies hat mir schlussendlich auch am besten gefallen. Hierbei hatte ich nochnicht die Möglichkeit meine Entwürfe mit mk zu besprechen.
Ich habe erstmals alles mit der gleichen Schrift ausprobiert um eine grobe Vorstellung zu bekommen und werde die violetten Entwürfe jetzt verfeinern.
Ausarbeitung
Ich habe mich etwas vertieft und einige Schriften und anordnungen ausprobiert. Mir gefällt die Version unten rechts ziemlich gut, diese werde ich mit mk nocheinmal besprechen.
Anpassungen
Ich habe eine vorherige Version angepasst und bin sehr zufrieden mit der unten links.
Finale V1
Animation
Bei diesem Logo habe ich viele verschiedene Animationen ausgetestet. Die oberen zwei sollen den Wachstum darstellen. Die linke Version ist eher langsam während die rechte etwas zackiger sich ausbreitet. Die unteren zwei sind nur leicht animiert als würden sie im Wind wehen. Hierbei ist die linke Version etwas stärker und die rechte nur sehr minimal.
Mein Favorit ist die Animation unten rechts, da sie sehr natürlich und entspannt aussieht.
Code finale Animation
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes float2 {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-1px); /* Reduzierung der vertikalen Bewegung */
}
100% {
transform: translateY(0);
}
}
#contentColumns .v1_animation_combined {
overflow: visible;
.b1,
.b2,
.b3,
.b4,
.b5,
.b6,
.b7,
.b8,
.b9,
.b10,
.b11,
.b12,
.b13,
.b14,
.b15,
.b16,
.b17,
.b18,
.b19,
.b20 {
opacity: 0;
animation: fadeIn 1s forwards, float2 4s infinite ease-in-out;
}
.b2 {
animation-delay: 0s, 1s;
}
.b1 {
animation-delay: 0.5s, 1.5s;
}
.b3 {
animation-delay: 0.5s, 1.5s;
}
.b4 {
animation-delay: 0.8s, 1.8s;
}
.b5 {
animation-delay: 0.8s, 1.8s;
}
.b7 {
animation-delay: 1.2s, 2.2s;
}
.b6 {
animation-delay: 1.5s, 2.5s;
}
.b8 {
animation-delay: 1.5s, 2.5s;
}
.b9 {
animation-delay: 1.8s, 2.8s;
}
.b10 {
animation-delay: 1.8s, 2.8s;
}
.b12 {
animation-delay: 2.2s, 3.2s;
}
.b11 {
animation-delay: 2.5s, 3.5s;
}
.b13 {
animation-delay: 2.5s, 3.5s;
}
.b15 {
animation-delay: 2.8s, 3.8s;
}
.b14 {
animation-delay: 3.2s, 4.2s;
}
.b17 {
animation-delay: 3.2s, 4.2s;
}
.b16 {
animation-delay: 3.5s, 4.5s;
}
.b19 {
animation-delay: 3.5s, 4.5s;
}
.b20 {
animation-delay: 3.7s, 4.7s;
}
.b18 {
animation-delay: 4s, 5s;
}
}
Logo v2
Für die zweite Version bin ich spontan auf Federn gekommen. Ich finde die Leichtigkeit sehr schön und trozdem ist es naturverbunden. Ich habe die KI vom Illustrator genutzt um eine Feder zu erstellen. Diese habe ich dann noch nach meinen Vorstellungen angepasst. Ich fand das sehr interessant da ich diese Funktion noch nicht wirklich genutzt habe. Zu der Feder habe ich ein paar grobe Entwürfe erstellt da ich diese Idee noch nicht mit mk besprechen konnte.
Ich habe alles mit der gleichen Schrift ausprobiert um eine grobe Vorstellung zu bekommen und werde diese Entwürfe jetzt verfeinern.
Ausarbeitung
Bei der zweiten Version habe ich mich dafür entschieden nur die Silluette der Feder zu nehmen anstelle der Farbigen damit alles etwas einfacher und cleaner aussieht. Auch hier habe ich einige Schriften und Anordnungen ausgetestet. Ich finde bei der Feder würde eine geschwungene Schrift gut passen. Das werde ich mit mk nocheinmal anschauen.
Anpassungen
Ich habe eine neue Schrift gesucht und damit ein paar Anordnungen ausgetestet. Ich finde die Version unten links nicht schlecht jedoch wäre diese sehr ähnlich zur V1.
Finale V2
Wir haben die Farben noch etwas angepasst um etwas mehr Tiefe zu erhalten.
Animation
Bei dieser Animation konnte ich nicht genau das rüberbringen was ich mir vorgestellt hatte. Ich wollte das sie sozusagen von oben nach unten schwebt, ich konnte das aber nur begrenzt darstellen. Ich bin mit beiden Animationen nicht 100% zufrieden aber sie sind in Ordnung und ich konnte vieles bei der Erstellung lernen.
Layout
Skizzen
Layout v1
Anpassungen & ausprobieren
Anpassungen v1
footer austesten
finalisiert
Schrifthirarchien angepasst & angegleicht, zu lange bilder = 16:9 Format & scrollen, grauer hg bei weissen Boxen und fertigen Versionen (Logo & Layout)
Entwurf v2
Layout v2
inputs mk
rundungen:
illustrieren so das anfang & ende auf gleicher höhe sind - wiederholung bei skalierung möglich
farben:
dunkelgrün auf lila funktionier, ansonsten grün & lila nich zu viel mixen (boxen) eher in einem ton bleiben
header bg:
bildmarke footer v1 nutzen evtl. & evtl transparenz & schichten? (inspiration suchen)
Feedback cs:
- knalligere Farben, mehr ausprobieren & fröhlicher
- header nicht geschwungen, text evtl zentriert
- mehr Luft
- Aufträge: erst nur Titel & Subtitle dann hover & gründer hg und teaser, evtl zensiert
Anpassungen 1
Feedback mk:
-Teaser grösser & Text kürzen
-Farben oke aber evtl. mit anderen Grüntönen testen?
-Aufträge: hoverprinzip umkehren & inspirieren für Formen etc.
Anpassungen 2
input mk:
-aufträge boxen gut
-teaser text h1 noch grösser & deutlicher
-in boxen & content ansich "teaser-text" ebenfalls nutzen bei den ersten Kerninformationen
-Subtitle bei boxen & content definieren (oben zentriert vs unten linksbündig)
finalisiert
Umsetzung
footer bg svg - scrollheader - gestaltung nav - underline animation