Design VS Code –なぜそれらは密接に関連している必要があるのですか？

公開: 2020-09-01

デザイナーはウェブサイトのビジュアルブランディングの芸術性だけに焦点を当てるべきですか？開発者はコーディング方法だけを知っているはずですか？ Drupalでのフロントエンド開発の重要性は何ですか？この記事ですべての質問に対する答えを見つけましょう。

この設計とコードの難問を深く掘り下げてみると、実際には、両方が互いに補完し合っていることがわかります。しかし、問題はなぜですか？ UI / UXデザイナーがコードとその基本を学ばなければならないのはなぜですか。また、デザインに関しても同じことが開発者にも当てはまります。

どちらのドメインにも、創造性を発揮し、ユーザーとその行動を理解することが含まれます。基本的なコーディングスキルやコード構造を知らずにデザイナーになることは、半焼きのケーキを準備するようなもので、食べるとバスルームに連れて行かれるかもしれません。

しかし、まず、例を挙げて基本に取り掛かりましょう。

対コーディングの設計：相違点との類似性

作家にとって、実際にそれを書き留める前に、彼らの考えを想像して結論付けなければなりません。日記をとったり、ブログやソーシャルメディアプラットフォームにアクセスしてすぐに書き始めたりする人は誰もいません。そのため、手順全体が作成と呼ばれます。はい、Gmailでメールを書くことは「作成」とも呼ばれます。さて、なぜ私たちは作家、作曲、そしてすべてについて話しているのですか？追いかけましょう。この場合、想像力はあなたのデザインであり、あなたの考えを書き留めることは開発です。私はあなたが今より良い絵を得たことを望みます。このトピックの別の側面に進みましょう。

デザイナーはコードを学び、開発者はUI / UXについて学ぶ必要がありますか？

デザインコードスプリント中に、作成されたすべてのデザインが実行可能ではない状況に遭遇する可能性があります。最終的に、最終製品は元のデザインの微調整バージョンになります。話し合いが行われ、クライアントは要件を変更しますが、問題は一貫しています。設計チームと開発チームが最初から同時に協力すれば、これらの状況を回避できます。そうすることで、実行可能なことと実行不可能なことについて相互に継続的なフィードバックを得ることができるため、作業がより効率的に行われます。

両方のドメインを理解することは、あなたが思うほど難しくはありません。どちらの場合も、想像力、思考プロセス、実践が必要です。もちろん、基本的なスキルはデザインとコードです。これは学ぶための選択肢ですが、知っている場合は必須ではありません。

設計者は、設計の実現可能性、可能性、および課題を知っている必要があり、コードを介してこれを実現する方法を知っている場合にのみ、それを知ることができます。同じことが開発者にも当てはまります。開発者は、ユーザーが経験できるさまざまなシナリオ、ユーザーエクスペリエンス、トラブルシューティング、ソリューションなどを理解すると、物事をはるかに単純化して効率的にすることができます。

個人がコアの専門知識とは別に、スキル（コードまたはデザイン）のいずれかの基本を学ぶ必要がある理由は次のとおりです。

1.製品のルックアンドフィールをより細かく制御する：これは基本的に、開発者が設計分析の仕組みと関連する設計プロセスを知っている場合、それらの設計アイデアを適応させ、最終製品をより細かく制御できることを意味します。その結果、製品の納期が短縮されます。
2.ユーザーを理解し、それを設計に適用する：開発者がユーザーの視点から製品を理解すると、ユーザーが本当に必要とし、望むものを構築するための大きな力が開発者に与えられます。たとえば、ユーザーはさまざまなタイポグラフィ、さまざまなボタンスタイル、配色などにどのように反応するかを理解します。
3.設計の適応：コーディングを知っている設計者にとっても同様に重要です。設計された製品が開発中にどのように構造化されるかを知っている場合、S /彼は理想的には設計を改善し、より効率的にすることができ、それによって開発者の時間と労力を削減できます。

例を使用してコアの専門知識のみを持つことの結果を詳しく説明する

設計とコーディングが密接に関連している理由をよりよく理解するために、いくつかの例を見てみましょう。

上記は、非順次構造の使用法の典型的な例です。ここでは、モバイル向けに開発されている間に構造が並べ替えられています。これは悪い習慣であるだけではありません。また、時間と手間がかかります。ただし、設計者が開発中のコードの構造を知っていれば、それは簡単に、そしておそらく回避できたはずです。

上記のスクロール付きポップアップオーバーレイの例を考えてみましょう。ポップアップオーバーレイは、ユーザーの注意を単一の主題に向けるように設計されており、特定の情報を表示する必要がある場合にのみフォーカスとして使用されます。ここで、ポップアップオーバーレイの背景にはスクロールがあり、ユーザーの注意をそらし、ポップアップが無効であることが証明されない場合があります。

開発者は常にタスクをより効率的かつ速いペースで完了することに焦点を合わせており、その過程で彼はデザインのいくつかの側面を見逃しています。上記の例は、開発者が仕事をしているが、最終的に設計を妥協する場合の正確なシナリオを示しています。したがって、開発者が基本的なUI / UXに触れていれば、この問題はおそらく簡単に回避できたはずです。

別の例として、お金を節約するアプリケーションからの上記のスクリーンショットを見てみましょう。タスク自体には、デジタル署名用の入力フィールドはありません。また、フォームを送信すると、エラーメッセージは、有効なデジタル署名を取得する方法に関するガイダンスや提案をユーザーに提供しません。開発者がUI / UXの基本を知っていれば、次のプロセスでユーザーを簡単にガイドしたり、フィールドや提案を適切に参照してメッセージをより簡単に表示したりできます。

どこから始めれば？

始めることは常に良い考えです。デザイナーにとって、学ぶべき基本はHTML、CSS、そして少しのJS / jQueryです。練習と学習のためのライブIDEツールを備えたオンライン学習プラットフォームとWebサイトがたくさんあります。

HTML：あらゆるデザインの基本構造が最初に来て、それはあらゆる製品のコードです。
JS / jQuery：スライダー、ポップアップ、ドロップダウンなどをこれらで実現できます
サンドボックス：コードを試すためのライブツール
CSS / SCSS ：構造のスタイリングは創造的なプロセスであり、CSS / SCSSによって実現できます。
W3Schools：シンプルなオンライン学習プラットフォームであり、始めるのに適したプラットフォーム
Codrops（Tympanus）：同じプラットフォームで設計と開発者の心を持った広大なライブラリ

開発者の場合、UI / UXに関するベストプラクティスに従うことから始めることができます-
Behance：プロのポートフォリオとインスピレーションのための完全なデザインスタック
ドリブル：投稿してインスピレーションを得るためのアイデアをデザインする
Muzli：ブログ、インスピレーション、アイデア
中：あらゆる分野（ほぼ）、ベストプラクティス、チュートリアルに関するブログ
Awwwards：最高のデザインと受賞者にインスピレーションを得るためにノミネートされたウェブサイト
XD / Figma / Sketch： UI / UXのモックアップ、ワイヤーフレームを設計するためのツール

デザイナー向け

開発者向け

Drupalのフロントエンド開発

CMSとしてのDrupal8は、すぐに使用できるものがたくさんあるため、非常にUI / UXのデザイナーフレンドリーなコンテンツ管理フレームワークです。最も重要なのは、利用可能なテーマとレスポンシブデザインの多様性です。もちろん、私が今考えることができる機能は他にもたくさんありますが、それを別の日のために保持しましょう。

UXデザイナーは創造的なスキルを適用し、Drupal Webサイトの視覚的表現に焦点を合わせますが、フロントエンドのDrupal開発者は、UXデザイナーとバックエンドのDrupal開発者の間のギャップを埋めます。それらは、DrupalWebサイトでデザイナーによって提供されたビジュアルコンポーネントを実装するものです。 UXデザイナーとフロントエンドDrupal開発者はどちらも、ユーザーエクスペリエンスと、UXに関連する問題の解決という観点から考えていますが、それらを解決するために異なるアプローチを採用しています。ただし、後者は常にコードを介して解決策を見つけます。
フロントエンドのDrupal開発者は、Drupalテーマに取り組み、カスタマイズすることで、美しいDrupalWebサイトを提供する責任があります。彼らは、PHP、CSS、jQuery、CSS、HTML、そして最も重要なモバイルファーストのウェブサイトデザインの知識を身に付ける必要があるフロントエンドの問題をトラブルシューティングできるはずです。

ヘッドレスDrupalWebサイトと分離アーキテクチャの人気が高まるにつれ、Angular、ReactJS、Vue.jsなどのフロントエンド開発フレームワークを理解しているフロントエンドDrupal開発者は常に競争上の優位性を持っています。
したがって、全体として、フロントエンドのDrupal開発で優れた能力を発揮するには、快適ゾーンから抜け出し、最新のテクノロジーを備えた最新のデジタルエクスペリエンスを作成および実装するための最善の方法を学ぶ必要があります。