クリエイティブなウェブサイトのデザインの秘訣

(Aline Kesting)(2020年9月2日)

ウェブサイトのデザインには多くのことが関わっていますが、クリエイティブサイトに関して特に重要だと私たちが信じていることが1つあります。それは、デザイナーと開発者の間の緊密なコラボレーションです。

新しい 14islands.comを立ち上げた後数週間前、波状のホバーアニメーションをどのように作成したかを尋ねられました。これらの相互作用の背後にあるコードマジックは、将来のブログ投稿で提供されることを願っています(しばらくお待ちください!)が、実際にこれらのアニメーションをどのように設計したかに焦点を当てたいと思います。驚かれるかもしれません。

プロセスを逆さまにします

新しいプロジェクトを開始するとき、ある種のウォーターフォールプロセスに陥りがちです。ユーザー調査から設計に移り、クリック可能なプロトタイプになります。途中でチームのチェックポイントがありますが、通常、プロトタイプが作成されるまで、設計と開発のコラボレーションは開始されません。このプロセスは特定のタイプのプロジェクト、特により戦略的なプロジェクトで機能しますが、最もクリエイティブなものとはほど遠いものです。

新しいウェブサイトのデザインプロセスを開始したとき、同じ方法でアプローチすることにしました(私たちは創造的な金曜日に近づきます)、そこでは実験はしばしば刺激的な新しいテクノロジーからインスピレーションを得ます。つまり、クリエイティブな開発者がアイデアを持っている可能性があり、デザイナーはその周りのコンセプトの構築を支援するために参加します。そうすることで、私たちは最初から、フルタイムで、常に一緒に設計とコーディングを行います。 🚀

コードでモーションの概念を設計する

この共有設計プロセスの利点は非常に簡単です。多くの場合、私たちデザイナーはピクセルパーフェクトなデザインを想像し、開発者にそのデザインをコードで最もよく模倣する方法を考えさせます。しかし、特にクリエイティブなWebサイトに関しては、私たちが想像することは、常に実現可能であるとは限らないか、同じように見えないか、または単にパフォーマンスの高いエクスペリエンスに変わる可能性があります。したがって、ミニマルなデザインを磨くのにかなりの時間を費やした後は、時間がなくなり、最も効果的なソリューションを選択します。

WebGL、Three.js、CSSのすべての機会を理解できればアニメーションの限界を見る代わりに、技術に従って限界を押し広げ、デザインコンセプトを進化させることができます。クリエイティブな開発者が設計プロセスの一部である場合、まさにそれが起こります。彼らは私たちの考え方に挑戦し、私たちだけでは考えられないようなユニークなソリューションをテーブルにもたらします。そして、その知識を強力な概念に一致させることは魔法につながります。 ✨

私たちのウェブサイトに関しては、何週間もかけてアイデアを模索し、廃棄し、ゼロから始めました。時間が経つにつれて、私たちは行きたい場所を一緒に定義し、私たちが好きな相互作用に行き着きました。モーションのコンセプトができたら、他のすべてが適切に機能しました。

初期の調査の一部を次に示します。

コード内のモーション探索

どのように行ったか

当然のことながら、最終的なモーションコンセプトは島に触発されました。島を定義するのは、土地を形作る水の絶え間なく変化する風景です。考えてみると、ウェブサイトは水で形作られているわけではありませんが、スクロール、クリック、ホバー、その他の虐待に常に反応しています。

ユーザーとのやり取りごとに水の歪みのアイデアを検討しましたが、それが必要でした。実際のコンテンツから注意を奪う不必要な影響を与えることなく、非常にミニマルな状態を維持します。

モーションのコンセプトは次のようになります。サイトを見ると、透き通った水で熱帯の島々の静けさが得られます。しかし、スクロールと相互作用を開始します—そこで波が始まります。🌊。

最終的なウェブサイトの動き 14islands.com

デザイナーとして、私はそのようなものを手に入れることができるとは思っていませんでしたサムネイルエッジの流動的な形状モーフィングですが、どうすればそのデザインコンセプトを思いつくことができますか?私たちは一緒にプロセスを開始し、一緒にコンセプトに取り組み、発売まで毎日協力しました。そして、プロセス全体の一部である私たちの開発チームは、最終的なエクスペリエンスの設計において重要な役割を果たしました。

もちろん、コードで設計することは、プロセス中にあらゆるタイプのモーション設計を停止する必要があるという意味ではありません。 FigmaやFlintoなどの素晴らしいプロトタイピングツールがあり、フローやマイクロインタラクションをテストするのに最適です。純粋な創造性に関して言えば、After Effectsは多くの自由を与えるので、私たちにとって最適です。モーションの専門家でなくても、デザインファイルを少し残して、動きのある高レベルのアイデアを探求することをお勧めします。却下または前進するためのより具体的な結果が得られ、開発チームに反復を開始するための基盤が提供されます。

設計者がテクノロジーから学ぶことができるすべてのこと

ここにあります:デザインプロセス中にクリエイティブな開発者をフルタイムで関与させます。お互いに挑戦し、並行してモーションを探索し、モーションの概念に到達するまでインタラクションをさらに進めます。それが整ったら、詳細なWebサイトのデザインに集中してください。このコンセプトは、今後のデザインに関する多くの決定を促すだけでなく、モーションを繰り返すことで、より一貫したエクスペリエンスの構築にも役立ちます。

14islandsでは、デザイナーと開発者の非常に緊密なチームが働いていることを幸運に思っています。毎日一緒に、私たちが協力する方法を絶えず改善しています。これまでのところ、それは成果を上げ、私たちの設計プロセスに多くの創造性をもたらしました。物事がどのように構築されているかについて興味を持ち、デザインとコードの両方で互いに挑戦することで、機能的でミニマルでありながら、その余分な個性を備えたユーザーエクスペリエンスを作成できます。

これが参考になったと思います。ご質問やご提案がございましたらお知らせください。次回まで✌️