機械設計ツール

これは、Airbnbの設計システムを扱うデザイナープログラマーのジョンゴールドと、以前はuKit AIのように、Web要素の設計と再設計にニューラルネットワークと機械学習を適用しようとするグリッドプロジェクトの従業員による記事の翻訳です。







設計は、あらゆる種類の仮説を構築するほぼ無限のプロセスであり、さらに部品を組み立てようとします。



一連の条件を含むプロジェクト概要を受け取った後、それらを満足させるすべてのオプションを解決するために出発しました。 その過程で、仮説ツリーが成長し、さまざまなシナリオ（発散）を考え出し、デザイナー、顧客、ユーザーのチームの経験を結集して、最適なオプションを選択します（収束）。



このプロセスは、プロジェクトが完了するまで繰り返され、詳細に説明されます。 壁に黄色いステッカー、ホワイトボードにスケッチ、レイアウトを描画するためのツールを使用して分岐し、変換します。最終的に、コーポレートアイデンティティ、椅子、家、ウェブサイト、プログラムなど、高レベルの詳細で完成します。



デザインは、発散と収束のプロセスです。 急いで検索に集中する思考を制限します-そして今、統一された意思決定と創造性と深さの欠如に耐える以外に何も残っていません。

私たちの自転車

コンピューターは、私たちをより良くするためのツールです。 スティーブ・ジョブズの「コンピューターは脳のための自転車です 」という表現は非常によく知られており、その意味は今ではあいまいになっています。 しかし、これは驚くべき観察です。 コンピューターは、私たち自身の拡張であり、私たちがより良く、より速く、よりスマートに作業できるようにするツールです。 近い将来、人々は翼、背びれ、または目に見えない能力を持つ可能性は低くなりますが、生物学的進化の代わりに、もっと魅力的なものがあります。それは機械による進化です。 精神能力の面でどの方向に進化したいかを決定し、この変化を自分で管理することができます。 情報化時代では、私たちのテキストエディターは制作の手段であり、変革の手段です。



ただし、Macの登場以来、設計ツールはそれほど変わっていません。 過去30年にわたり、Quark、Quartz Composer、Corel Draw、Creative Suite、Sketch、SketchUp、Photoshop、Freehand、Fireworks、Framer、Figmaが大好きでしたが、これらはすべて基本的に同じ原理で動作します。



キャンバス、ドキュメント、プロパティの直接操作。 新しいツールは、ドラッグアンドドロップピクセルよりもコードとノードでより多くの戦いをしますが、同じレベルで機能します。 脳と楽器の間で1対1の対応（全単射）が確立されます。最初にフォントサイズを編集し、次に色、次にフォントの太さを編集し、最後に角を丸めます。





私たちのツールは30年でほとんど変わりません



これは素晴らしい成果です！ 私たちの頭の中のデザインと画面の間には直接的な対応があります。 必要な技術的スキルを考えると、最も大胆な創造的なアイデアの実装のためにコンピューターから交渉することができます。 ポスターのアイデアを慎重に考え出し、プリンタがそれを実装するのに数日、または数週間も待つのではなく、ほぼ瞬時にフィードバックループを取得します。 私たちは考え、描きます：1対1の対応。 頭の中に収まるようにしましょう。後でこのトピックに戻ります。

テイルズオブデザインスタジオ

一握りの20個のサイコロを取り、ロールプレイングゲームの時間です！ ゲームデザイナーとデッドラインをプレイします。これは、午後の時間を過ごすために長い影とスキューモフィズムについて議論したい人のための刺激的なアクティビティです。



モデレーター：私たちのヒーローは、99レベルの迷惑なアートディレクターと2レベルのジュニアデザイナーです。 会場：デザインスタジオ。 壁はむき出しのレンガでできているようで、これは間違いなく私たちをショーディッチ、ウィリアムズバーグ、ミッション、またはクロイツベルク、セーデルマルム、または...



ANNOUS ART DIRECTOR：これはどこでも起こり得ます。



司会者：はい、そうです。 そのため、あなたの前にはThunderboltディスプレイがあり、あなたの後ろには、デザインをテストしようとしている間、人々が騒々しく、不意にピンポンを演奏しています。 バックグラウンドでは、誰かが彼のDraplinへの愛についてツイートしたり、Designer Newsなどについて懐疑的な意見を述べています。 左側にはほくろのパックがあり......



ジュニアデザイナー：このジョークはばかげている、私たちはそれを得る。



ホスト：それでは始めましょう！



楽しいアートディレクター：時間をかけて、私たちが作成しているサイトの記事ページのレイアウトを提示していただきありがとうございます。 すぐに2、3の小さな文章を紹介し、タイポグラフィを作成するのを手伝うと思いました。 この見出しから始めましょう。 これらの4つのフォントを試してください。 フォントサイズを26ポイントに設定しているようですが、代わりに22、24、28、32ポイントを試してください。 そして、通常のスタイル、太字、太字、スーパーファットなど、それぞれ異なるスタイルのスタイルでそれぞれがどのように見えるかを感じるのは素晴らしいことです。 そして、垂直リズムの1、2、または4単位でのインデント。



ジュニアデザイナー： 4つのフォント、4つのサイズ、4つのスタイル、そして3つのポジション？ これらは192のバリエーションです！



楽しいアートディレクター：はい、確かに。 そして今、テキストの本文について。 これらの6つのフォントを、サイズが15、16、および17ptで、通常のサイズで、1.4、1.5、または1.6の行間隔をカウントするために適用するとどうなりますか？



ジュニアデザイナー： 192✕6✕2✕3✕3 ...移動中の場合、これは20,736バリエーションです！



楽しいアートディレクター：素晴らしい。 次の検証段階を1時間で実行するために、それらを1つずつ描き、フォームに接着し、壁に掛けましょう。



ジュニアデザイナー： ...



ホスト：すみません。



素晴らしい！ 電子タブレットを取り上げる時が来ました。

私たちの脳と目

経験と直感を使用して、さまざまなオプションを頭の中で作成し、モダンなデザインツールを使用して合理的な外観にします。 見栄えが良いと仮定し、実際に機能するかどうかを確認する実験を行います。



私たちの実験室はプログラムであり、炭化水素に夢中になって爆発するのではなく、私たちの実験はコピーと貼り付け、アートボードのコピーの作成、パーツの変更のプロセスを中心に展開しています。 私たちは何をしていたか、退屈で死にかけている、または気が散っていることを思い出そうとしています。



この段階を見逃すことはできません。画面上または印刷物で仮説をテストする必要があります。 デザイナーの才能や経験がどれほど優れていても、彼はまだ頭の中で完全にデザインすることはできません 。



ジョセフ・リクリダーの作品「人間とコンピューターの共生」は、信じられない洞察で現在の作業プロセスを説明しています。 「私の「思考」時間の約85％が思考の波に同調し、決定を下し、発見しました必要なもの。 情報の検索と取得には、評価よりもはるかに時間がかかりました。 スケジュールを作成し、それらを作成するアシスタントをトレーニングするのに何時間もかかりました。 グラフの準備が整うと、関係はすぐに明らかになりましたが、構築する必要がありました。 ある時点で、人工音声の明瞭度と音声対雑音比との関係の6つの関数を比較する必要がありました。 データを比較できるように表示するのに数時間の計算を要し、必要なものを判断するのに数秒しかかかりませんでした 。



Likliderは、デジタルデータ処理の夜明けに1960年にこれを書きました。 Xerox PARCでの最初のGUI実験の10年前、Apple IIのリリースの17年前（通常の知的労働者にパソコンの大量配布をもたらしました）。



Steve Jobsが「脳のための自転車」という類推を暗示している最初のビデオは、1980年に登場しました（より有名なクリップは10年後に出てきました）。



日付が重要だからです。 最新のツールはLikliderに完全な満足をもたらさなかったかもしれませんが、過去56年間は彼のアプローチに忠実な驚くべき革新の幅広い選択を与えてくれました。 彼が書いた問題（紙上の科学実験結果の時間のかかる計算）を考えると、MATLABテーブルとシミュレーションは確かに魔法のように見えます。



それでも...設計プロセスは、脳と無制限の計算能力を持つデバイスとの間の物理的相互作用によって制限されています。 私たちの精神能力とコンピューターは高速です。 私たちの手、マウス、キーボードは遅いです。



1つのコンポーネントの20,000個のバリエーションを作成するのは少数であり、これらはほんの数個のフォントといくつかのサイズです。 デザインを作成した最後の実際のプロジェクトの各要素の可能なすべての組み合わせを考えてください！



誰かに焦点を合わせ、1つのコンポーネントの20,000種類のバリエーションを実際に作成するほどコーヒーは世界には多くないため、妥協します。 節約しています。 設計ツールは実際には1984年からあまり変わっていないため、コンビナトリクス全体の研究に目をつぶっています。



Likliderは続行し、類似点は痛々しいほど馴染みがあるようです。

「ほとんどの部分で、私は事務的または機械的研究に思考と活動時間を費やしました：一連の仮定または仮説の論理的および動的な結果の検索、計算、プロット、変換、決定、解決策または隠れたパターンを見つけるための基盤の準備。 さらに、 何を試して何を試さないかという私の選択は 、 主に知的機会ではなく事務的な実行可能性によって決定的に決定されました 。



私にとって、デザインは単なる発散と収束です。 あなたが考えて見るとき。 脳と目。 中間のすべて-考えてから見るまでの間に指数関数的に増加する時間-これは設計ではなく、単調な肉体労働です。 これはデザインであると考える人もいますが、実際には、思考の波に同調する方法、デザインの波に同調する方法です。 デザインは脳と目のためのゲームです。



あなたがコードを書くのが好きなデザイナーのカテゴリーに属しているなら、類推を始めることができます。 プログラミングのパラダイムには、命令型から宣言型までさまざまなものがあります。



命令型プログラミングは、コンピューターに何かをカウントする方法を指示します。 答えを得るために、段階的な指示-手順-を彼に与えます。



JavaScriptでこれを実証しましょう。 数字のリストがあると想像してください。各数字を2乗して、すべてを足し合わせたいと思います。

//   function sumOfSquares(nums) { var i, sum = 0, squares = []; //      for (i = 0; i < nums.length; i++) { squares.push(nums[i]*nums[i]); } //      for (i = 0; i < squares.length; i++) { sum += squares[i]; } return sum; } sumOfSquares([1, 2, 3, 4, 5]) // 55
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それどころか、 宣言型プログラミングは計算したいものに焦点を当てています-詳細は扱っていません：

 //   const square = a => a * a const add = (a, b) => a + b const sum = reduce(add, 0) //     square(2) // 4 map(square, [1, 2, 3]) // [1, 4, 9] add(1, 3) // 4 sum([1, 2, 3]) // 6 //     const sumOfSquares = pipe( map(square), sum, ) sumOfSquares([1, 2, 3, 4, 5]) // 55
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

宣言的な例は、きちんとしていて、構成可能で、非常に読みやすいです。 命令的-散らかった、配列の手動交替。



これは、繰り返し負荷のトラウマが発生するまでアートボードをコピーアンドペーストする貧しいジュニアデザイナーの例とはほとんど関係がないように思えるかもしれませんが、デザイン用のツールを選択する際に彼の考えを理解することが重要です。 現在のツールの助けを借りて、頭の視覚に合ったデザインを作成する方法をコンピューターに伝えます （入力デバイスをノックして画面に各要素を表示します）。 将来のツールを使用して、見たいものをコンピューターに伝え、彼らが理解します望ましい結果を達成するために要素を構築する方法。

集合論に関するギャロップ

幸いなことに、設計ツールを命令型から宣言型レールに移行することは難しい問題ではありません。コンピューターには、設計プロセスの問題を解決するために使用できる変数、ループ、配列などの複雑で秘密の概念がさまざまにあります。



数学のちょっとしたレッスンの時間です。 以下にいくつかのセットを示します。



家族= {Akkurat、Gotham、Tiempos}サイズ= {20,30,40}



次のようにそれらを乗算できます。



ファミリー×サイズ= {（Akkurat、20）、（Akkurat、30）、（Akkurat、40）、（Gotham、20）、（Gotham、30）...}



この算術演算は、セットのデカルト積と呼ばれます。各セットの要素のすべての可能な組み合わせ。 複雑な数学記号でそれを書き留めて、インターネット上の人々が私たちが賢いと思うようにします。



A×B = {（a、b）|a∈A∧b∈B}



これは、2つのセットのデカルト積です。 しかし、nセットのデカルト積、非現実的に多数のセットのすべての組み合わせを推測することもできます（nは常に「非現実的」という意味です）。 「高校で数学のテストに失敗しましたが、スマートに見えるようになりました」という表記システムを受け入れると、次のようになります。



i = 1Si = S1×S2×⋯×Sn = {（s1、s2、...、sn）|s1∈S1∧s2∈S2∧⋅⋅⋅∧sn∈Sn}



これは私たちが（手動で）行うことであり、タスクのすべての可能なオプションを描画しようとすると目を台無しにします。 アートボードは自分でコピーする必要がありますが、本質的には少数のプロパティの積を計算します。 これを色と形の例で説明します。





3セットの視覚プロパティの積：3⨉3⨉3 =合計27オプション



そして、現在のツールが遅い理由を説明するために自由に使える言語があるので（それらは必須です！手の物理的な操作を実行し、コンピューターに作業を行う方法を指示する必要があります！）私たちのデザインのオプションの全範囲）、代替案を開発できます。



私たちの前には、クリエイターを待っている宣言型デザインツールの世界があります。 これが私の作成です。





René：製品設計ツール



Renéは、The Gridを離れた後[2016] 2月に作業を開始したツールです。 これは以前に使用したデザインツールに似ています。アートボード、レイヤー、フォント、色、丸い角など、慣れている小さなものがすべてあります。







入力フィールドはわずかに異なります。 さまざまな機能を示すことができます。 このため、見たいコンポーネントのバリエーションをすべてコンピューターに伝えることができます。 Renéは宣言型の変数設計ツールです。 仕組み：







いいね！ 私たちのデザインのすべての可能な組み合わせ。 試してみたいオプションのリストを増やして、何が起こるかを確認できます。 非常に高速です。 いくつかのオプションを確認するとすぐに、表示スケールを1〜2倍に増やすことができます（これが収束です）。 さまざまなオプションを視覚化するために分岐し、見栄えの良いオプションにズームインします。 発散と収束。



ボタンオプションを示す別の例を次に示します。 私たちはルネに私たちが望むものを伝え、それから彼は私たちにすべての選択肢を示します：

総当たり選択の設計

乗算の設計には大きな利点がありますが、あまり夢中にならないようにしましょう。 私たちの理想的なソリューションは、昔ながらの手動設計の方法とブルートフォース法を使用したソリューションの検索の中間にあります。 実際、考えられるすべての設計オプションを提供するだけでは簡単すぎます。 各フォント、サイズ、色、位置の各組み合わせ。 問題は、設計が許容可能なオプションの有限範囲を持つ無限の変動のフィールドであることです。 私たちは、人が知覚できるよりも多くの結果があるため、手動で選別する必要があるという事実にすぐに気付きます。 選択に対処できないため、プロセスをオフにすると、ツールの意味が失われます。



「美的センスがなければ、コンピューターは結果を提供するが、本当の意味ではない、単なる心のないスピードマシンです。」-ポール・ランド



彼の実験に基づいて、各段階でワークアウトするための理想的なオプションの範囲は約4〜64です。 そのため、認知機能と画面スペースを組み合わせます。どのような場合でも、より多くのバリエーション、さらには出力の終了場所を認識することはできません。 2台の27インチモニターで状況を保存できますが、オプションを画面を超えてオフィスの壁を自由に歩き回ることができる拡張現実ツールや仮想現実ツールを使用してデザインを作成することを考えて、より満足しています。



ルネの完全なサイクルは何千ものバリエーションを生み出すことができますが、それらは発散と収束の繰り返しのプロセスを通して経験されます。



今すぐRenéで遊べます。 これはまだプロトタイプですが、デモなしではこの記事を終えることができませんでした。 いくつかの点に注意してください。

• 編集できるのは、記事のプレビューまたはボタンの2つのファイルのうち1つだけです。 Renéを使用してサイト全体を作成しましたが、現時点では範囲を制限しています。 「ロボットをデザインスクールに連れて行く」という記事を読むと、その理由が理解できるかもしれません:)
• フォントのリストはGoogle Fontsから読み込まれます。また、名前を入力してローカルフォントを使用することもできます。
• React、Redux、Ramda、およびFlowによって作成されました-すべて最新のお気に入りです。

***



翻訳： Takitana Zhukova、uKit Groupのローカリゼーションマネージャー

編集： uKitのアートディレクター、ビクター・カドニコフ

タイトルイラスト： Takitana Buyan、uKit Groupのデザイナー



*オリジナルでは、ジョンは「宣言的」と言いますが、私たちのチームでは、「マシン」、「生成的」、「アルゴリズム」などの用語をよく使用します。 次のリンクで、ロシアのプロジェクトからこのトピックに関する他の有用な記事を見つけることができます。

• uKit Eyeを使用したアルゴリズム設計
• Mail.ruから見たアルゴリズム設計