Das Diskette Projekt

Das Diskette Projekt

Das Diskette Projekt

Herausforderung

In diesem Projekt habe ich ohne den Einsatz von Frameworks wie Bootstrap oder Bibliotheken wie jQuery eine Website nur mit HTML, CSS und JavaScript erstellt. Dieses Projekt diente dazu, meine Fähigkeiten und Kenntnisse im Bereich Webdesign umfassend zu demonstrieren.

Projektart

Webdesign

Jahr

2024

Tools

HTML + CSS + JavaScript

Logo Animation

Ich wollte das Logo auf visuell ansprechende Weise präsentieren, also habe ich eine Animation davon gemacht. Ich habe es in verschiedene Komponenten zerlegt. Dann habe ich Keyframes verwendet, um eine flüssige, sich wiederholende Animation zu erstellen.

Interaktives 3D-Objekt

Ich verwendete die 3D-Modelle, die ich zuvor erstellt hatte, um das Produkt zu präsentieren. Ich habe Spline verwendet, um einen Rahmen einzubetten, in dem der Benutzer mit dem Produkt interagieren kann.

SVG Image Map

Ich habe eine Explosionszeichnung einer Diskette erstellt, bei der alle Einzelteile voneinander getrennt und sichtbar dargestellt sind. Der Benutzer kann über jedes dieser Teile zusätzliche Informationen abrufen, indem er mit dem Mauszeiger über die entsprechenden Komponenten fährt.

Slideshow

Ich habe ein Diashow-Element entworfen, das alle verfügbaren Farben des Produkts zeigt. Der Benutzer kann zwischen den Optionen mit Hilfe von Optionsfeldern wechseln.

Design und Entwicklung

Design und Entwicklung

Ich begann mit der Planung des Layouts der Website in Photoshop unter sorgfältiger Berücksichtigung aller visuellen Aspekte, darunter Schriftarten, Farben und Elemente. Ich erstellte ein 3D-Modell der Scheibe und verwendete Spline, um eine 3D-Online-Anwendung, Materialien, Schattierungen und Animationen hinzuzufügen. Diese 3D-Szenen und Animationen wurden dann in die Website integriert. Interaktionen wurden durch Scrollen oder Mausbewegungen ausgelöst.

Ich begann mit der Planung des Layouts der Website in Photoshop unter sorgfältiger Berücksichtigung aller visuellen Aspekte, darunter Schriftarten, Farben und Elemente. Ich erstellte ein 3D-Modell der Scheibe und verwendete Spline, um eine 3D-Online-Anwendung, Materialien, Schattierungen und Animationen hinzuzufügen. Diese 3D-Szenen und Animationen wurden dann in die Website integriert. Interaktionen wurden durch Scrollen oder Mausbewegungen ausgelöst.

Design und Entwicklung

Ich begann mit der Planung des Layouts der Website in Photoshop unter sorgfältiger Berücksichtigung aller visuellen Aspekte, darunter Schriftarten, Farben und Elemente. Ich erstellte ein 3D-Modell der Scheibe und verwendete Spline, um eine 3D-Online-Anwendung, Materialien, Schattierungen und Animationen hinzuzufügen. Diese 3D-Szenen und Animationen wurden dann in die Website integriert. Interaktionen wurden durch Scrollen oder Mausbewegungen ausgelöst.

Technische Ausführung

Technische Ausführung

Die Website bietet eine Reihe von visuell ansprechenden Effekten, die in erster Linie durch CSS erreicht werden. Dazu gehören unter anderem Hover-Effekte, Parallax-Scrolling und Animationen mit Hilfe von Keyframes. Mit diesem Ansatz konnte ich nicht nur meine Fähigkeit unter Beweis stellen, eine Website von Grund auf zu erstellen, sondern auch eine ansprechende Benutzererfahrung zu schaffen, ohne auf vorgefertigte Bibliotheken zurückgreifen zu müssen.

Die Website bietet eine Reihe von visuell ansprechenden Effekten, die in erster Linie durch CSS erreicht werden. Dazu gehören unter anderem Hover-Effekte, Parallax-Scrolling und Animationen mit Hilfe von Keyframes. Mit diesem Ansatz konnte ich nicht nur meine Fähigkeit unter Beweis stellen, eine Website von Grund auf zu erstellen, sondern auch eine ansprechende Benutzererfahrung zu schaffen, ohne auf vorgefertigte Bibliotheken zurückgreifen zu müssen.

Technische Ausführung

Die Website bietet eine Reihe von visuell ansprechenden Effekten, die in erster Linie durch CSS erreicht werden. Dazu gehören unter anderem Hover-Effekte, Parallax-Scrolling und Animationen mit Hilfe von Keyframes. Mit diesem Ansatz konnte ich nicht nur meine Fähigkeit unter Beweis stellen, eine Website von Grund auf zu erstellen, sondern auch eine ansprechende Benutzererfahrung zu schaffen, ohne auf vorgefertigte Bibliotheken zurückgreifen zu müssen.

Alle Projekte

Alle Projekte

Alle Projekte

© Made by Balazs Bindl.