54枚のコンピュータサイエンスカードのデザインから学んだグラフィックデザイン

グラフィックデザインはコミュニケーションの問題を解決し、ソフトウェアエンジニアリングは情報問題を解決します。 多くの人にとって、コンピュータサイエンスの世界は「ブラックボックス」であり、密集していて抽象的で、画面の向こうに隠されています。 しかし、私にとっては、それはエレガントな構造と創造的な問題解決の世界です。 54枚のカードからなる物理的なデッキ、Algodeckで、私はコンピュータサイエンスと数学を、本質的なスキルといくつかの考え方を変えるメンタルモデルを理解しやすくする、アクセスしやすい形に凝縮したいと考えました。 Algodeckは、私が気に入っているアルゴリズム、データ構造、メンタルモデルのコレクションであり、コンピュータサイエンスを探求しやすくするために集められました。 これらは、大学やソフトウェアエンジニアとしての仕事で学んだことです。 カードは情報提供から指示まで多岐にわたります。 例えば、あるカードは次のようにアドバイスしています。「何をすべきかを考えるのではなく、何を避けるべきかを考えなさい。ああ、散歩もかなり良いよ！」 私のビジョンは、複雑な知識を短く、アクセスしやすい形に凝縮することでした。そうすれば、読者は興味を引くものにつまずくことができます。 このデッキは、この分野に関する伝統的で線形的で密集した教科書から離れています。 学習中に自分の道を進むことが鍵です。 時にはカードが難解に感じるかもしれませんが、それが誰かをさらに情報を検索し、新しいことを学ぶきっかけになるなら、私の仕事は完了です。 プロジェクトに深く入り込むと、常に学ぶべきことがあります。 私は職業柄ソフトウェアエンジニアですが、この機会を利用してグラフィックデザインの基礎を学びました。 コーディングと論理への愛とグラフィックデザインを融合させ、54枚のイラストすべてをコードで作成しました。 私は自分の仕事の道具を使いました：コードです。 私にとっては、Illustratorを開いてクリックするよりも自然に感じられました。 色や線の太さなどをすべてのカードで一度に変更できたので、さまざまなオプションを素早くテストするのに役立ちました。 コードを使用することで制約も生まれ、それが大いに役立ちました。 このプロジェクトは、コンピュータサイエンスとグラフィックデザインが思っている以上に共通点が多いことを示してくれました。 どちらも問題を解決します：グラフィックデザインはコミュニケーションの問題を解決し、ソフトウェアエンジニアリングは情報問題を解決します。 どちらの分野でも、実践者はそれらの問題を解決するためのシステムを構築することから始めます。 グラフィックデザイナーは、しばしば数学的および論理的な概念に精通していますが、それに気づいていないこともあります。 タイプスケールを決定したり、グリッドを分割したりするには、数学的思考が必要です。 レイアウトの選択を合理化するために、黄金比のような概念をよく使用します。 Gerstnerの有名な著書「Designing Programmes」（1964年）は、60年代のコンピュータシステムの台頭に触発された、システム指向のデザインのマニフェストです。 より最近では、Martin Lorenzの「Flexible Visual Systems」は、コミュニケーションソリューションを作成するために再利用および組み合わせることができるデザインシステムを作成するという考え方を私たちに紹介しました。 このシステム思考アプローチは、一貫したスタイルとスケールで54枚のカードをデザインするという課題があったため、このプロジェクトに役立つと感じました。 デッキの最初のプロトタイプでは、すべてのカードのスケールが異なっていました。 一部のイラストは小さく見え、他は大きく見えました。 それは乱雑に見えましたが、それは探求段階でした。 2番目のプロトタイプでは、私が気に入った部分を最も良いものを選び出し、デザインシステムに結晶化させました。 物事を均一にするために、スペースをグリッドに分割しました。 セルのサイズが、線のサイズでさえ、すべてのもののサイジングを決定します。 デザインにコードを使用すると、変数を作成し、デザインシステムのルールをエンコードできます。 ルールと変数を定義すると、制約が課されるため、物事が容易になります。 デザインシステムは、空白のページから始める必要がないことも意味します。 形状、色、基本的な要素をプルして、そこから始めることができます。 それらと戯れて、何が起こるか見てみましょう。 ビジュアル言語については、クラシックな赤と青のデュオトーンを選択し、シンプルさに惹かれました。 これはコンピュータが使用するバイナリシステムをエコーすると同時に、バウハウス運動と古いフランスの小学校の本へのオマージュでもあります。 プライマリシェイプとカラーが全体に表示されます。 どのようなツールを使用しましたか？ DrawbotはPython駆動のグラフィックデザインツールです。 豆知識：Drawbotは、PythonのGuido van Rossumの兄弟であるJust van Rossumによって作成されました。 AI LLMについてはどうですか？ このプロジェクトを開始したとき、それらは主流のツールとしては存在しませんでした。 私はすべて自分でデザインし、書きましたが、文法チェックにはGrammarlyを使用しました。 状況は変わりました。 このプロジェクトをもう一度始めるかどうかはわかりませんが、Algodeckがさらに重要な役割を果たしていると確信しています。それは、画面の外で考え、カードをめくる時間を取ることです。 確かに、LLMに「コンピュータサイエンス、数学、工学から学ぶべき54の事柄を短い形式（各トピック100語）で教えてください」とプロンプトできます。 それは、うまく組み合わさって文を形成する単語を繰り返し、良い仕事をするでしょう。 最終的に、Algodeckは学習ツールであり、問題解決キットです。 それは人々がコンピュータサイエンスについて学び、新しい問題解決スキルを開発し、問題へのアプローチ方法を変えるのに役立ちます。 デッキをチェックしてみませんか？ algodeck.com で入手できます。