Das Geheimnis hinter dem Entwerfen kreativer Websites

(Aline Kesting) (2. September 2020)

Viele Dinge fließen in das Entwerfen von Websites ein, aber Eines ist unserer Meinung nach besonders wichtig, wenn es um kreative Websites geht: eine enge Zusammenarbeit zwischen Designern und Entwicklern.

Nach dem Start eines brandneuen 14islands.com Vor ein paar Wochen wurden wir gefragt, wie wir die wellenförmigen Schwebeanimationen erstellt haben. Während die Code-Magie hinter diesen Interaktionen hoffentlich in einem zukünftigen Blog-Beitrag auftauchen wird (bleiben Sie dran!), Möchte ich mich darauf konzentrieren, wie wir diese Animationen tatsächlich entworfen haben. Sie könnten überrascht sein.

Drehen Sie Ihren Prozess auf den Kopf

Wenn Sie ein neues Projekt starten, können Sie leicht in eine Art Wasserfallprozess geraten. Sie wechseln von der Benutzerforschung zum Design und erhalten klickbare Prototypen. Sie haben Team-Checkpoints auf dem Weg, aber die Zusammenarbeit in Design und Entwicklung beginnt normalerweise erst, wenn bereits Prototypen hergestellt wurden. Während dieser Prozess für bestimmte Arten von Projekten funktioniert, insbesondere für Projekte mit mehr Strategie, ist er keineswegs der kreativste.

Als wir mit unserem neuen Website-Designprozess begannen, haben wir uns entschlossen, ihn auf die gleiche Weise anzugehen ( Wir nähern uns unseren kreativen Freitagen), in denen Experimente oft von aufregenden neuen Technologien inspiriert werden. Das bedeutet, dass kreative Entwickler möglicherweise eine Idee haben und Designer an Bord springen, um ein Konzept zu entwickeln. Auf diese Weise entwerfen und codieren wir von Anfang an die ganze Zeit zusammen. 🚀

Entwurfsbewegungskonzepte im Code

Der Vorteil dieses gemeinsamen Entwurfsprozesses ist ziemlich einfach. Oft stellen wir Designer uns ein pixelgenaues Design vor und lassen Entwickler herausfinden, wie sie dieses Design am besten mit Code imitieren können. Aber gerade bei kreativen Websites ist das, was wir uns vorstellen, möglicherweise nicht immer machbar, sieht möglicherweise nicht gleich aus oder wird einfach zu einer leistungsintensiven Erfahrung. Nachdem Sie eine ganze Menge Zeit damit verbracht haben, Ihre minimalistischen Designs zu polieren, haben Sie keine Zeit mehr und entscheiden sich für die Lösung, die am besten funktioniert.

Wenn wir nur alle Möglichkeiten von WebGL, Three.js und CSS verstehen könnten Animationen Anstatt ihre Grenzen zu erkennen, könnten wir Grenzen überschreiten und unsere Designkonzepte entsprechend der Technologie weiterentwickeln. Wenn kreative Entwickler Teil des Designprozesses sind, passiert genau das. Sie fordern unsere Denkweise heraus und bringen einzigartige Lösungen auf den Tisch, an die wir alleine niemals denken würden. Und dieses Wissen mit einem starken Konzept in Einklang zu bringen, führt zu Magie. ✨

Wenn es um unsere Website geht, haben wir wochenlang nachgeforscht, Ideen verschrottet und von vorne angefangen. Im Laufe der Zeit haben wir gemeinsam definiert, wohin wir wollen, und haben eine Interaktion erhalten, die uns gefallen hat. Sobald wir ein Bewegungskonzept hatten, passte alles zusammen.

Hier sind einige unserer frühen Untersuchungen:

Bewegungserkundungen im Code

Wie wir es gemacht haben

Kein Wunder, dass unser endgültiges Bewegungskonzept von Inseln inspiriert wurde. Was eine Insel auszeichnet, ist die sich ständig verändernde Wasserlandschaft, die das Land prägt. Wenn Sie daran denken, ist eine Website nicht von Wasser geprägt, sondern reagiert ständig auf Schriftrollen, Klicks, Schwebeflüge und andere Misshandlungen.

Wir haben die Idee der Wasserverzerrung für jede Benutzerinteraktion untersucht, wollten sie aber Um sehr minimalistisch zu bleiben, ohne unnötige Effekte, die die Aufmerksamkeit des eigentlichen Inhalts auf sich ziehen.

Das Bewegungskonzept sieht folgendermaßen aus: Schauen Sie sich die Website an und Sie erhalten die Stille tropischer Inseln mit kristallklarem Wasser. Aber fangen Sie an zu scrollen und zu interagieren – hier setzen Wellen ein. 🌊.

Endgültige Website-Bewegung auf 14islands.com

Als Designer hatte ich keine Ahnung, dass es möglich war, solche zu bekommen Fließendes Form-Morphing der Kanten von Miniaturansichten. Wie könnte ich dieses Designkonzept entwickeln? Wir haben den Prozess gemeinsam gestartet, gemeinsam an einem Konzept gearbeitet und bis zum Start jeden Tag zusammengearbeitet. Als Teil des gesamten Prozesses spielte unser Entwicklungsteam eine entscheidende Rolle beim Entwerfen der endgültigen Erfahrung.

Das Entwerfen in Code bedeutet natürlich nicht, dass Sie während Ihres Prozesses jede Art von Bewegungsdesign stoppen sollten. Es gibt fantastische Prototyping-Tools wie Figma und Flinto, mit denen sich Abläufe und Mikrointeraktionen hervorragend testen lassen. Wenn es um reine Kreativität geht, funktioniert After Effects am besten für uns, weil es viel Freiheit gibt.Auch wenn Sie kein Bewegungsexperte sind, ist es hilfreich, Ihre Konstruktionsdatei ein wenig zu belassen und hochrangige Ideen in Bewegung zu erkunden. Sie erhalten greifbarere Ergebnisse, die Sie ablehnen oder vorantreiben können, und geben Ihrem Entwicklerteam eine Grundlage, auf der Sie mit der Iteration beginnen können.

Alle Dinge, die Designer von der Technologie lernen können

Hier geht es weiter : Binden Sie einen kreativen Entwickler während des Designprozesses ganztägig ein. Fordern Sie sich gegenseitig heraus, erkunden Sie die Bewegung parallel und treiben Sie die Interaktionen weiter voran, bis Sie zu Ihrem Bewegungskonzept gelangen. Konzentrieren Sie sich erst dann auf Ihre detaillierten Website-Designs. Das Konzept wird nicht nur viele Ihrer bevorstehenden Designentscheidungen inspirieren, sondern auch dazu beitragen, die Erfahrung durch Wiederholung der Bewegung konsistenter zu gestalten.

Bei 14islands haben wir das Glück, dass ein sehr enges Team von Designern und Entwicklern arbeitet jeden Tag zusammen und verbessern ständig die Art und Weise, wie wir zusammenarbeiten. Bisher hat es sich ausgezahlt und viel Kreativität in unseren Designprozess eingebracht. Wenn wir neugierig sind, wie Dinge aufgebaut sind, und uns gegenseitig in Design und Code herausfordern, können wir Benutzererlebnisse schaffen, die funktional und minimalistisch sind, aber auch ein bisschen mehr Persönlichkeit haben.

Ich hoffe, dies war eine hilfreiche Lektüre. Lassen Sie uns wissen, wenn Sie Fragen oder Anregungen haben. Bis zum nächsten Mal ✌️