Ein Schaufenster für Interaktionsdesign und Bewegung

Im heutigen Beitrag möchte ich über das Gebiet des Interaktionsdesigns sprechen, indem ich mir eine Website anschaue, die neue und interessante Beispiele für Webdesign hervorhebt, die Bewegung und Interaktion hervorheben. So beschreibt die Interaction Design Association dieses Feld:

Interaction Design (IxD) definiert die Struktur und das Verhalten interaktiver Systeme. Interaktionsdesigner bemühen sich um sinnvolle Beziehungen zwischen Menschen und den von ihnen verwendeten Produkten und Dienstleistungen, von Computern über mobile Geräte bis hin zu Geräten und darüber hinaus.

Hover States ist eine Website, die sich der Präsentation von Interaktionsdesign widmet und von Chambers Judd, dem in London ansässigen Team für digitales Design und Entwicklung, kuratiert wird. Chambers Judd erkennt an, dass der Hover States-Blog ein Ort ist, an dem Beispiele großartiger Websites kuratiert werden können, die die besten Beispiele für Bewegung und Interaktion enthalten. Er erfasst jede Website in einem HTML5-Videoelement, sodass Sie das Erscheinungsbild erleben können, ohne die Website verlassen zu müssen. Das Ansehen des Loop-Videos ist zu Einführungszwecken in Ordnung. Ich möchte jedoch die ursprüngliche Quelle der Beispiele anzeigen, da sie ein Verständnis der zugrunde liegenden Stile und des Codes liefert, die sie ermöglichen. Ich werde kurz drei der zehn Websites vorstellen, die den kreativen Einsatz von Schwebezuständen demonstrieren.

Limner Studios

Die neueste Website im Hover States-Blog hebt die Limner Studios hervor, die ein Portfolio ihrer ausgewählten Werke mit einer interaktiven Diashow hervorheben, die Beispiele für Website-Builds und -Designs, Werbematerial und Visitenkarten enthält. Ein Screenshot-Teil der interaktiven Site wird in Abbildung B angezeigt, wie in Google Version 23.0.1271.64 m gezeigt:

Wenn Sie die Seite nach unten scrollen, bewegen sich die Folien von unten nach oben und von links nach rechts. Der Beschreibungstext bleibt auf der linken Seite, während die Folien ihre Bewegung basierend auf den Bildlauf- und Schwebezuständen fortsetzen. Bei der Überprüfung finden wir mehrere jQuery-Skripte, einschließlich jquery.color.js für Farbanimationen von John Resig. Die jquery.slideShow.js, ein Cycle Plugin von M. Alsup, unterliegt einer Doppellizenz mit MIT- und GPL-Lizenzen. Sie können Dokumentation und Beispiele des Plugins anzeigen. Ein benutzerdefiniertes JavaScript-Dokument lim.js unterstützt Limner Studio-Funktionen wie Animationen, Ereignisrichtung, Fensterhöhe und Bildversätze. Die endgültige Skriptdatei ist waypoints.min.js, ein kleines jQuery-Plugin, mit dem Sie eine Funktion einfach ausführen können, wenn Sie zu einem Element scrollen. Das Wegpunkt-Plugin bildet eine solide Basis für moderne Benutzeroberflächenmuster, die von der Bildlaufposition eines Benutzers auf der Seite abhängen. Es steht ebenfalls unter einer Doppellizenz mit MIT- und GPL-Lizenzen. Die HTML- und CSS-Webdokumente basieren auf der HTML5-Boilerplate-Vorlage.

Haus Der Kunst

Das nächste Beispiel zeigt die visuelle Identität der Website als gutes Beispiel dafür, wie man über Print und Web hinweg arbeiten kann. Das "Haus Der Kunst" -Logo impliziert Bewegung und Flexibilität. Die Website verstärkt dies, indem sie sich mit der Bewegung der Maus dehnt und anpasst. Die Bildschirmaufnahme wird in Abbildung C angezeigt, wie in Google Version 23.0.1271.64 m gezeigt:

Unter der Haube verwendet diese Website zusammen 13 Skriptdateien, einschließlich JavaScript, jQuery und JSON, einschließlich addthis_widget.js, core.js, jquery.jscrollpane.js, jquery.masonry.min.js, jquery.mousewheel.js und user_timeline.json . Die Website verwendet fünf CSS-Dokumente und der HTML-Code basiert auf XML.

.APP.ICNS

Diese Website ist ein Projekt, das Anwendungssymbole mit einer einfachen UX und einer subtilen Interaktion hervorhebt, die eine Animation auf der Download-Schaltfläche anzeigt. Dies ist ein lustiges Projekt von Andrew & Kara und verwendet die Software CandyBar, um ihre Symbole zu verwalten. Um die Symbole zu verwenden, öffnen Sie die iContainer-Datei und klicken Sie auf Diese Symbole verwenden, um die Installation zu vereinfachen. Einige Symbole wie iCal erfordern jedoch eine manuelle Installation. Zu den Symbolen gehören Finder, Dashboard, Mail, iTunes, iPhoto, Vorschau, Stickies, TextEdit und Chrome, um nur einige der 32 verfügbaren Symbole zu nennen. Ein Screenshot der Website wird in Abbildung D angezeigt, wie in Google Version 23.0.1271.64 m gezeigt:

Diese Website verwendet drei jQuery-Skriptdateien, darunter appicns.jquery.js, jquery.easing.js und jquery.js . Drei CSS-Dokumentdateien umfassen die Datei 1280.css, ein 1280 Responsive Grid von 960 Grid System, und screen.css, beide von Andrew McCarthy; Der HTML-Code verwendet den HTML5-Dokumenttyp.

© Copyright 2021 | pepebotifarra.com