Codrops stellt neues interaktives Drag and Drop Coloring Concept vor
Kommentare

Bei der Erstellung oder Überarbeitung einer Website bieten Website-Mockups meist gute Dienste, um dem Webdesigner und den Entscheidungsträgern einen ersten Eindruck für das endgültige Aussehen zu geben. Gerade, was die Auswahl der Farben einer Website angeht, gibt es zahlreiche Kombinationsmöglichkeiten. Allerdings gibt es genug Beispiele, bei denen genau das falsch gelaufen und die Farbkombination für den User alles andere als ansprechend ist.

Zwar gibt es bereits einige Customization-Tools auf dem Markt, allerdings sind sie in ihrer Nutzung meist eher langweilig und wenig unterhaltsam. Das Codrops-Team hat darum mit dem Drag and Drop Coloring Concept ein neues, derzeit noch experimentelles Tool vorgestellt, bei dem ein Seiten-Mockup interaktiv per Drag-und-Drop mit verschiedenen Farben eingefärbt werden kann.

Features des interaktiven Drag and Drop Coloring Concepts

Die Funktionsweise des Drag and Drop Coloring Concepts ist simpel. Aus einer Farbpalette kann einfach eine Farbe ausgewählt und per Drag-and-Drop in einem bestimmten Bereich des Website-Mockups platziert werden. Davon eingeschlossen sind sowohl Content-Bereiche inklusive Text-Elemente, als auch andere Elemente, wie zum Beispiel die Navigationsleiste.

Besonders ansprechend ist das Drag and Drop Coloring Concept durch seine Animation, die beim Platzieren eines Farbtupfers ausgeführt wird. Sie wird mithilfe von SVG-Elementen und CSS-Transitions durchgeführt; für die Drag-and-Drop-Funktionalität kommt die JavaScript-Library interact.js zum Einsatz, die wir euch an anderer Stelle bereits ausführlicher vorgestellt haben.

Derzeit ist das Drag and Drop Coloring Concept noch sehr experimentell und steht nur für die Nutzung in einem modernen Browser bereit. Mehr Informationen zu dem Coloring Concept finden sich im zugehörigen Artikel im Codrops-Blog oder auf GitHub; eine Demo zeigt, wie es in Aktion funktioniert.

Aufmacherbild: Press color management – cmyk palette von Shutterstock / Urheberrecht: zefart

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -