Das heißeste - und wahrscheinlich das am meisten diskutierte - Gadget ist heutzutage der 3D-Drucker. Es ist ein Werkzeug, das die Art und Weise, wie Produkte hergestellt werden, wahrscheinlich revolutionieren wird. Es gibt aber auch ein anderes dreidimensionales Thema, das in der Designwelt Wellen schlägt - 3D-Visuals.
Obwohl das Website-Design tatsächlich in zwei Dimensionen lebt, hindert es Designer nicht daran, ihre kreativen Muskeln zu spielen und die Grenzen des Bildschirms mit mehr Objekten und Projekten zu erweitern, die ein reales Gefühl vermitteln. Lassen Sie uns einen Blick darauf werfen, wie Sie den 3D-Trend bestmöglich nutzen können.
Arbeiten in drei Dimensionen
Beim Design von Websites leben dreidimensionale Effekte höchstwahrscheinlich in einem 2D-Raum. (Insbesondere weil der Versuch, etwas zusammenzustellen, für das eine spezielle Brille erforderlich ist, nicht besonders effektiv ist. Woher wissen Sie, welche Benutzer sie hatten?)
Bei der Verwendung von 3D-Effekten können verschiedene Site-Optionen verwendet werden. Eine Schnittstelle, die Benutzer fast berühren können, erweist sich als sehr nützlich, von Schnittstellen im Spielstil über das Einkaufen bis hin zur Produktidentifizierung.
Trendiger wird es auch, 3D-Effekte und -Stile in das Design zu integrieren. Gerade als Designer vor einigen Jahren anfingen, an 3D zu denken, bremste die verrückte Popularität des flachen Designs den Trend aus, weil die Nachahmung einer lebensnahen Ästhetik Techniken erfordert, die als flach gewonnener Impuls entmutigt wurden. Effekte wie Schlagschatten, Abschrägung und Prägung sind für die Erzeugung von Tiefenschärfe im 2D-zu-3D-Raum von entscheidender Bedeutung.
Ein sich entwickelnder Trend
Wie können Sie also diesen sich ständig weiterentwickelnden Trend optimal nutzen? Mischen und kombinieren Sie es mit anderen Trendstilen, um maximale Wirkung zu erzielen.
Folgendes sollten Sie bei der Verwendung von 3D-Bildern beachten:
- Fügen Sie Elementen, die Benutzer berühren möchten, ein realistisches Gefühl hinzu
- Fügen Sie dem Gameplay oder den Videoelementen Tiefe hinzu
- Machen Sie es mit Parallax-Scrolling zum Teil der Benutzeroberfläche
- Überfordern Sie die Benutzer nicht und halten Sie sich an einen 3D-Trick im Design
- Halten Sie den Rest des Designs einfach
- Wenn es um die Benutzerfreundlichkeit geht, leiten Sie die Benutzer durch das Navigieren oder Verwenden von Tools
Schicht- und Materialeinflüsse
Das Arbeiten mit 3D-Effekten gewinnt dank Material Design an Bedeutung. Das auf Google basierende Designkonzept hat dazu beigetragen, einige der aus der Mode gekommenen Techniken und Effekte mit flacheren und minimalistischen Stilen wieder herzustellen.
Dies beinhaltet die Verwendung von Schlagschatten - ja, sie sind zurück. Sie berücksichtigen jedoch sorgfältigere Überlegungen, so dass Schlagschatten immer das Licht einer "Quelle" imitieren. Das bedeutet, Schatten sollten natürlich aussehen, da ein Element Tiefe hat und nicht nur zum Hervorheben eines Texts oder eines Objekts vorhanden ist.
Während Sie nicht mit Schatten verrückt werden wollen, sind winzige Schatten auf mehreren Objekten in Ordnung. Die besten Schatten sind solche, die einen Zweck erfüllen, aber für den gelegentlichen Benutzer nicht offensichtlich sind. Wenn jemand sehen kann? der Schatten ist es wahrscheinlich zu viel. Entscheiden Sie sich für blasse, weiche Schatten, die die Realität betonen.
Eines der Schlüsselkonzepte von Material Design ist die Idee, Objekte auf Ebenen zu schichten. Die Dokumentation betont sogar die Verwendung von 3D-Räumen:
Die materielle Umgebung ist ein 3D-Raum, dh alle Objekte haben die Dimensionen x, y und z. Die z-Achse ist senkrecht zur Anzeigeebene ausgerichtet, wobei sich die positive z-Achse in Richtung des Betrachters erstreckt. Jedes Materialblatt nimmt eine einzige Position entlang der Z-Achse ein und hat eine Standarddicke von 1 dB, was einem Pixel von Pixel mit einer Pixeldichte von 160 entspricht.
Auf der Bahn wird die Z-Achse für das Layering und nicht für die Perspektive verwendet. Die 3D-Welt wird durch Manipulation der Y-Achse nachgebildet.
Wenn Sie also über 3D nachdenken, ist es genauso wichtig, sich zu überlegen, wie sich Objekte bewegen und miteinander interagieren, als auch über die Entwurfstechniken, die mit ihrer Erstellung verbunden sind.
3D-Illustrationen und Animation
Eine der Stellen, an denen Sie 3D-Visuals wirklich auf die nächste Ebene bringen können, ist Illustrationen, Objektbilder und Animationen. Vor allem Online-Händler können 3D-animierte Effekte in die Produktseiten integrieren.
Eine der besten Anwendungen ist die 360-Grad-Ansicht von Produkten, die Käufer mit wenigen Klicks virtuell bewegen und untersuchen können. Converse macht das mit seinen Schuhseiten gut. Benutzer können jede Show bewegen, um sie aus einem beliebigen Blickwinkel zu sehen. Außerdem können Sie Farben und andere Optionen auf einer Leinwand ändern, sodass der Benutzer sich wie in einer Umgebung fühlt, in der er den Schuh hält und ihn betrachtet.
Dies ist eine effektive Verwendung von 3D-Visuals für das Design von Websites. Es ist kompliziert und cool, aber überwältigend benutzerfreundlich. (Das ist der eigentliche Trick, um diese - oder jede Designtechnik - auf eine für Benutzer sinnvolle Weise arbeiten zu lassen.)
Tipps und Tricks
Wenn es um 3D-Visuals geht, ist einfach besser. Sie möchten Benutzer nicht mit zu vielen Effekten oder Elementen überfordern, die nur für die Show gedacht sind. Da dreidimensionales Design auf der flachen Website-Leinwand alles eine visuelle Illusion ist, ist es wichtig, dass man nicht mit Tricks verrückt wird. Konzentrieren Sie sich auf die Benutzerfreundlichkeit des Inhalts und entscheiden Sie dann, ob 3D der richtige Weg ist.
Beachten Sie bei der Verwendung von 3D folgende Tipps:
- Verwenden Sie 3D, um Objekte von ihrer Umgebung zu trennen (Layering).
- Zielen Sie auf subtile Schlagschatten oder Prägungen und denken Sie daran, ein "natürliches" zu berücksichtigen. Lichtquelle, wenn es um Winkel und Platzierung geht
- Es muss echt aussehen
- Farbverläufe und Hervorhebungen können auch Tiefe und Ebenen erzeugen
- Verwenden Sie 3D-Effekte konsistent für alle Seiten
- Wenn 3D einer Aktion zugeordnet ist, z. B. einem Klick, geben Sie Hinweise an, die dem Benutzer helfen zu verstehen, was zu tun ist (Schaltflächen sind ein übliches 3D-Element)
- Elemente entsprechend skalieren; 3D ist eine Illusion der Realität. Objekte sollten sich also "real" anfühlen. in Größe, Gewicht und Umgebung
Fazit (und ein Wort der Vorsicht)
Was Sie jetzt vermeiden möchten, ist die 3D-Typografie oder Bildsprache, die wie Wortkunst aus frühen Textverarbeitungsprogrammen aussieht. (Sie können schneller als Sie denken, mit diesem Ergebnis fertig werden.)
Der Trick zu dreidimensionalen Effekten ist subtil. Es sollte Elemente der Realität und der Schichtung geben, aber es sollte kein offensichtlicher "Trick" sein. oder Wirkung. Gute 3D-Effekte ermutigen den Benutzer, sich mit der Benutzeroberfläche zu beschäftigen und zu spielen, dank einer Technik, mit der sie intuitiver wissen, was zu tun ist.