Webdesign mit 3D & 2D Animationen
// Konzeption & Umsetzung

Als die IT-Firma group24 in den Weiten des Cyberspace auf der Suche nach einem Level-Up für ihre Startseite war, wurden wir von ihnen eingeladen um gemeinsam die nächsten Level zu erreichen. Bei ihrem Umfangreichen Serviceangebot war für uns klar, dass nur die dritte Dimension helfen kann um all die vielen Facetten dieser IT-Spezialisten gebührend abzubilden.

So haben wir also eine neue Startseite vom Server bis zu den Schaltkreisen in 3D aus dem Polygon-Boden gestampft und mit Animationen aufgeladen. Leicht verständliche Datenpakete verpackt in hübscher Technologie mit horizontalem Scroll-Storytelling und maßgeschneiderten Infosektionen.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Startscreen

Webdesign // Layout // Copywriting //
3D-Serveranimation

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Card-Reveal-Animation

Webdesign// Layout // Copywriting // Grafikdesign // 2D-Schaltkreis-Animationen

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

3D-Security-Sektion

3D-Serveranimation // Copywriting // Layout // Grafikdesign // 2D-Schaltkreis-Animationen

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

3D-Roboterhand

Layout// Grafikdesign// Copywriting//
3D-Roboterhandanimation

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

3D-Laptop-Animation

Webdesign // Layout //
3D + 2D Animationen //
Grafikdesign // Copywriting

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Animierte Infografik

Webdesign // Layout // 2D Animationen //
Grafikdesign // Copywriting

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Animation Übersicht

Webdesign // Layout //
3D + 2D Animationen

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Pfad-Animation

Webdesign // Layout // 2D Animationen //
Grafikdesign // Copywriting

Startscreen

Webdesign // Layout // Copywriting //
3D-Serveranimation

Card-Reveal-Animation

Webdesign// Layout // Copywriting // Grafikdesign // 2D-Schaltkreis-Animationen

3D-Security-Sektion

3D-Serveranimation // Copywriting // Layout // Grafikdesign // 2D-Schaltkreis-Animationen

3D-Roboterhand-Animation

Layout// Grafikdesign// Copywriting//
3D-Roboterhandanimation

3D-Laptop-Animation

Webdesign // Layout //
3D + 2D Animationen //
Grafikdesign // Copywriting

Animierte Infografik

Webdesign // Layout // 2D Animationen //
Grafikdesign // Copywriting

Animation Übersicht

Webdesign // Layout //
3D + 2D Animationen

Pfad-Animation

Webdesign // Layout // 2D Animationen //
Grafikdesign // Copywriting

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }