Sketchなどの静的ツールでほとんどの時間を費やしている場合は、ブラウザーに移動し、早ければ早いほどよいでしょう。
3年以上前、「ブラウザーでのデザイン」というトピックに関する最初の投稿を書きました。 投稿のタイトルは「Photoshopを使用せずにWebサイトを設計した方法」
彼は、Photoshopを使用せずに完全なサイトを作成した方法の話をしました。 当時、PhotoshopはWebデザインの主要なツールでした。 しかし、今ではそうではありません。 重量級の写真エディターから、インターフェイスを作成するために作成されたSketchに移動しました。
スケッチは、私たちが慣れ親しんでいるものと比較して大きな前進でした。 彼は設計プロセスを改善し、より効率的にしました。 アートボードは美しく、その中にそれほど多くの殻はありませんでしたが、それはインターフェースの設計に関するものではありませんでした。 彼にとても喜んでいたので、 「デザイナーのための10のスケッチトリック」という投稿を書きました。
Sketchは大好きですが、実際の問題を解決するものではないため、理想的なツールとは考えていません。
問題は、私たちのデザイナーがインタラクティブな環境のために静的なデザインを描いていることです。
PhotoshopやSketchなどの静的設計用のプログラムでは、現実と実装の両方からかけ離れた最もなめらかな写真を作成するのにほとんどの時間を費やします。 静的画像は、ブラウザの制限と機能を考慮しておらず、動く部分を表示することもできません。
さらに、すべての機能を伝えることはできません。 下の写真を見てください。アプリケーションの外観と動作の理想的な状態を1つだけ表示できます。 もちろん、Sketchでいくつかのアートボードを描いて、何かが押されたときに別の状態を表示することはできますが、インタラクションを表示することはできません。
すべてがどのように機能するかを想像してください。
そして、これは私たち全員が描いている媒体がインタラクティブであるという事実にもかかわらずです。
もちろん、Invision、Principle、Framer（実際にはもっと多くあります）などのプロトタイプを作成するための新しいツールは、インタラクティブ性に近づくのに役立ちました。
しかし、これらのツールの問題は、設計スタックを膨らませて問題を追加するだけであり、実行した作業によって実装に近づくことができないことです。
また、技術者（プログラマー）にこれらのツールですでに行ったことを再現するように依頼するのは奇妙です。 チーム（チーム）が2回作業を行い、技術者にHTMLとCSSでデザインを再作成させますか？
設計を実装に近づけるために、設計者はできるだけ早く作業をブラウザに変換する必要があります。
どこですべてが壊れ、どこで機能するかを知るには、素材を見て、自然の生息地でそれとやり取りする必要があると思います。
個人的には、ブラウザに切り替えると多くの利点があることがわかりました。
- 表示されるものを取得します（WYSIWYG）。 色、フォント、サイズ、インデントなど すべてがユーザーの目に見えるように見えます。
- 無限のアートボードの終わり。 これで、キャンバスは1つだけになりました。これは、デフォルトで対話機能が存在するブラウザーです。
- 技術者に引き渡す前にピクセルの測定に時間を費やす必要はありません。 すべてがすでにコードに記述されています。
- 技術者やプログラマーが参加しなくても、設計内の何かを簡単に修正できます。
- テストするとき、ユーザーが実際にデザインと対話する方法を確認します。
- 投資家、クライアント、プログラマーとの質問と会議の削減=時間の節約=お金の節約
- アニメーションはもはや後付けではありません。 それどころか、ガイダンスの状態をアニメーション化する方法や、相互作用を介して問題を解決する方法についてもっと考えます。
- 高価なプロトタイピングソフトウェアにお金をかける必要がなくなりました。
- リストの最高。 プログラマーがプロジェクトのより興味深い側面で作業できるようにすることで、設計と実装の間のギャップを狭めます=エンジニアの方がずっと幸せです。
もちろん、ブラウザーでの設計を難しくするものが1つあり、それは急な学習曲線です。
誰もがHTML / CSS / JSのコーディング方法を学ぶのは簡単ではありません。 学びたい場合は、 ここから始めることをお勧めします。
投稿のタイトルが少し誤解を招く可能性があることを知っています。
実際、Sketchでの設計を完全に停止する必要はないと思います。 スケッチは、作成するものの概念をすばやくスケッチするための優れたツールです。 ただし、できるだけ早く作業をブラウザに変換する必要があります。 上記の利点は、理由の質問に答える必要があります。