設計者が画像ベースの設計からコードベースの設計に切り替える時間

なぜ画像ベースのデザインからコードベースのデザインに切り替えるのですか？

デジタルプロダクトデザインの黎明期から大きな問題がありました。 設計者は製品開発プロセスから切り離されており、ソフトウェアのみを使用する必要があります。

設計者は、ラスターグラフィックスまたはベクターデザインツールを使用して、組織の他の部分からサイロ化された画像を描画します。 Photoshop、Gimp、Sketch、Fireworksなどの異なるソフトウェアで動作する場合でも、ほとんどの場合、プロセスは同じです。 静止画像のセットは、設計者によってレンダリングされた意図としてエンジニアに送信されます。

静的なアートボードを介してインターフェイスのさまざまな状態を表示するのは非常に面倒です。 したがって、すべてが設計者によって詳細に説明されているわけではありません。 そして最終的に、ユーザーインターフェイス全体は、一連の不完全な静止画像の助けを借りてエンジニアによって構築されます。 多くの場合、長時間のやり取りでは、すべての対話型の状態が解決されます。

静的なデザインではエクスペリエンスが正確に表現されないため、通常、テストはユーザーにとって面倒です。 これらの非効率的なプロセスが原因で、組織は製品の失敗やチームの不満につながります。

今日のテクノロジーの進化のおかげで、私たちは物事をデザインするためのより良い方法を手に入れました。 画像ベースの設計ツールは、コードベースの設計ツールパラダイムに急速に置き換えられています。 ベクターデザインツールまたはラスターから描画されたデザインの静的表現は、デザイナーが実際にコーディング方法を知らなくても、コード内で直接意図するレンダリングされたデザインに置き換えられます。

新しいワークフローは、次の新しいツールセットによって提供されます。

•設計者とエンジニアはどちらも信頼できる唯一の情報源を確立します
•コーディングの経験がなくても、設計者はコーディングの全能力を利用できます。
•デザイナーとエンジニアのデュオは、壮大なワークフローの進化を生み出す単一の共同クリエイティブプロセスを通じて接続されています

UXPinを使用した画像ベースからコードベースの設計

ここでの最初の基本的な質問は、画像ベースの設計からコードベースの設計に移行する前に、画像ベースの設計で何が良くないか、または非効率的であるかということです。 デザインツールには、コードベースとイメージベースのデザインツールという2つのパラダイムがあることをご存知かもしれません。

画像ベースのデザインツールは、何十年にもわたって使用されており、かなり古いアプローチです。 設計者は、このツールアプローチのアイデアである何かを描くときに、ベクターまたはラスターグラフィックスを作成する必要があります。

このアプローチにより、設計者は最大限の柔軟性を得ることができます。 高度なイラストからシンプルなアイコンまで、最も美しいレベルの詳細を含め、すべてをこの方法で効果的に描くことができます。 プロのデジタル製品開発になると、それは通常壊れますが。 これが起こる理由です。

1.相互運用性の欠如：写真、イラスト、アイコンを除く製品の実際のインターフェースは、これらのグラフィックスで構築されることはありません。 設計者は、画像ベースのデザインツールでインターフェイスデザインを操作するときに、コードで設定された制約の範囲外で作業します。 このため、コーディングに費用がかかるものや、未知の方法で難しいものを作成する可能性があります。

2.精度の欠如：詳細な素晴らしいデザインを作成することは別として、開発プロセス中の最も不正確な結果は、多くの場合、画像ベースのツールを使用した場合です。 デザイナーの作品は、まったく異なるプロセスでレンダリングされます。

したがって、同じ仕様を適用した場合でも、設計者が選択したグラデーション、テキスト、色のコードとエンジニアが選択したコードには違いがあります。 このため、チームは大規模なミスアライメントの影響を受けます。

3.静的設計：画像ベースの設計ツールに焦点を当てたワークフローは、最終的に相互にリンクされるインターフェイスのすべての状態の静的アートボードを構築することです。 専門的なプロジェクトの場合、これは慣らし運転のアプローチです。 静的ウィンドウでは、最も単純なパターンは管理できないドロップダウンのようになります。

これは、再利用性のためにインタラクティブコンポーネントを保持する機能が不足しているため、およびかなり大量のアートボードが原因で発生します。 これらすべてのツールに加えて、コンテンツ、要素の状態、条件付きロジックなどの変数を設定する機能がなくても、基本的な対話のみが許可されます。

4.設計エンジニアリングにおける弱いコラボレーション：エンジニアリングプロセスはこのツールとは完全に異なり、マージすることはできません。 両方の世界の出力は、その性質から切り離されています。

ユーザーが使用するテクノロジーは開発者の作業の最終製品であり、最終的なユーザーエクスペリエンスからはほど遠い抽象化レイヤーが画像ベースのデザインによって導入されます。

設計者とエンジニアは、再利用可能な対話型コンポーネント、実際の対話の欠如、およびコードから接続をインポートする機能のために、互いに切断され、不満を感じています。

コードベースの設計における独自性

画像ベースの設計からコードベースの設計への移行に重点を置いているため、この設計の何が特別であるかを知ることが重要です。 ユーザーがコードベースのデザインツールを使用して何かを描くと、関連するCSS / HTML / JSが作成され、ブラウザーが使用されます。 これにより、エンジンがレンダリングされて結果が視覚的に表示されます。

以下は、イメージベースのデザインからコードベースのデザインに移行した後のデザイナーにとってのメリットです。

1.忠実度：コードベースの設計を使用する場合、設計者の意図とコード化可能な結果の間には100パーセントの一致があります。 すべてのデザインプロジェクトをレンダリングするために、コードベースのデザインで使用されるテクノロジーはWeb開発のテクノロジーと同じです。

2.設計者と開発者の間の制約の違いを排除します。設計が難しく、コードで再作成できないものは、画像ベースのツールで設計者が作成できます。 これらのまったく同じ制約は、コードベースのツールの設計者と開発者の両方に適用できます。 したがって、設計者と開発者の両方が同期し続けることが保証されます。

3.アートボードをインタラクティブコンポーネントに置き換える：リンクされたアートボードの代わりに、コードベースのデザインツールはコンポーネントで最も高度なインタラクションを使用します。 このアプローチは、設計者が再利用性の高いインタラクティブな設計システムを作成することを直接可能にし、開発を模倣します。

4.現実的で強力な相互作用：画像ベースのデザインからコードベースのデザインへの移行により、オブジェクトは相互作用し、画面上を移動し、複雑なパターンを作成できます。 エンジニアとのコラボレーションやユーザーとのテストで最も重要なコーディング方法を知っている必要はありません。

5.これまでで最強のコラボレーションを作成します。エンジニアリングと設計のコラボレーションに対するまったく新しい革新的なアプローチが、コードベースのパラダイムによって実現されます。

関連記事

WebデザイナーとWeb開発者の違い