Webデザイナーはコーディング方法を知る必要がありますか？

ウェブ開発者として、フロントエンドとバックエンドの両方のアーキテクトとして、私は多くの異なるデザイナーと仕事をしており、基本的なCSSとHTMLでデザインを達成する方法が考慮されていなかったデザインコンプでの作業にイライラすることがあります。一方、開発者として、私はあらゆるデザインからコードを生成できると期待されています。

Webデザイナーは、基本的な最新のCSSおよびHTMLテクニックを知っている必要がありますか？丸みのあるWebデザイナーにとってこれが重要なのはなぜですか？

一般的な考え：

• フロントエンドのWeb開発者は、設計をコーディングするのに十分なスキルを備えている必要があります。
• Webデザイナーは、ユーザーが実際にデザインと対話する方法を理解する必要があります。
• デザインショップでは、むしろデザイナーに設計を依頼し、すべてのコーディングを開発者に任せます。

Webデザイナーは、基本的な最新のCSSおよびHTMLテクニックを知っている必要がありますか？

はい。

丸みのあるWebデザイナーにとってこれが重要なのはなぜですか？

あなたがbasicという言葉を使ったので、私は「はい」と答えました。

建築家が物理学と材料科学について何かを知らなければならないのと同じように、ウェブデザイナーは基本的なHTMLとCSSテクニックを知っていることが絶対に不可欠です。

CSSとHTMLのテクニックについて何も知らない場合、自分を「Webデザイナー」と呼ぶことはできません。あなたはただの芸術家か何かです。

あなたの考えについてのコメント：

フロントエンドのWeb開発者は、設計をコーディングするのに十分なスキルを備えている必要があります。

偽。これは単純化しすぎです。いくつかのことはウェブにうまく翻訳されません。一部のデザインは、サポートが必要な特定のプラットフォームまたは画面サイズでばらばらになるか、機能しない場合があります。

Webデザイナーは、対象ユーザーとパフォーマンスの要件に応じて制限を知る必要があります。CSSとHTMLを知っているデザイナーは、設計を微調整する方法を知っているので、基になるコードをできるだけ応答性が高く効率的にすることができます。

Webデザイナーは、ユーザーが実際にデザインと対話する方法を理解する必要があります。

UXデザインについて説明しましたが、これはまったく異なる分野です。ユーザーエクスペリエンスデザインにはグラフィックデザインの側面が含まれますが、実際にはCSSやHTMLとはほとんど関係がありません。

優れたバランスの取れたWebデザイナーはUXデザインに精通している必要がありますが、UXスペシャリストと共同作業することも一般的です。

デザインショップでは、むしろデザイナーに設計を依頼し、すべてのコーディングを開発者に任せます。

これは部分的には正しいかもしれませんが、完全ではありません。コンテンツ管理システムの一般的なパラダイムの1つは、MVC（モデル/ビュー/コントローラー）です。多くのデザインショップは、デザイナーにHTML / CSSコーディングにある程度精通してもらい、コンテンツの表示（「ビュー」）に集中できる一方で、開発者はモデル/コントローラーに集中できるようにしています。

これは、グラフィック要素に焦点を合わせてピクセルをプッシュするだけのグラフィックアーティストを採用していないお店もありますが、私の考えではWebデザイナーではありません。大規模なWebサイトでは、グラフィックアーティスト、Webデザイナー、UXデザイナー、Web開発者、およびデータベーススペシャリストが協力して完成したWebサイトを作成します。小規模なサイトを構築するフリーランサーは、あらゆる分野に手を出し、自分自身をWebデザイナー/開発者と呼ぶかもしれません。

ウェブデザイナーはコードがどのように機能し、何ができるかを理解する必要があります。同様に、印刷デザイナーは紙の上のインクがどのように見えるか、紙がどのように折りたたまれたりカットされるかを理解する必要があります。設計者は、選択した媒体の制限と長所を理解する必要があります。

ウェブデザイナーがこのドロップデッドゴージャスなサイトを作成している場合、コーディングの基本を学ぶか、プロセスのいくつかのポイントでコーダーと一緒に座ってゴージャスなサイトが達成できることを確認することが彼または彼女のいずれかです。ですから、少なくともウェブデザイナーはコードについて知る必要があると思います。

印刷できるものはすべてHTML / CSSを使用してWeb上で正確に再現できるとは言えないのと同じように、「開発者は何でもコーディングできる」と言うのは格別だと思います。

ローレン、ghoppe、Farrayはすべてなだめるので、私は彼らが言ったことを再ハッシュしません。実用性の問題として、あなたの明示的および暗黙的な質問について別の見解を提供させてください。

開発者にとって最善のアプローチは、グーテンベルクが最初のタイプをカットして以来、プリンターがドラムを叩いているのと同じものです。デザイナーは最初からプロジェクトに参加するように主張します。1つのピクセルが画面に到達する前に、議論に参加する必要があることを明確にしてください。

何か異常なことを含む印刷デザインプロジェクトに参加しているとき、私はすぐにプリンターやバインダリーの人々と話し合います。彼らは私よりも自分のクラフトについてもっと多くのことを知っているので、最初から彼らを巻き込むのが私のビジネスです。残念なことに、特にデザイナーが学校を出たばかりで現実の世界にまだ慣れていない場合、初心者のデザイナーはその単純なステップを無視し、救命具のない深いキムシーになってしまうことがあります。

ブログ、フォーラム、クライアントとプロジェクトマネージャー、地元の学校とユーザーグループ、および範囲内のデザイナーとのキャンペーン：「設計を開始する前に開発者に相談してください！」

開発者は、プリプレス部門が時々使用できないアートワークを取得するのと同じように（そしてデザイナーがマゾヒストだけが従うブリーフを取得するように）、彼らが求めているものの手がかりがないデザイナーからコンプを取得しようとしています。しかし、計画表の場所を主張すれば、多くのフラストレーションと時間の浪費を防ぐことができます。

はいといいえ。ターゲット環境の仕組みを知ることは重要ですが、システムをそのように機能させるために必要な特定のコードを理解することはそれほど重要ではありません。言い換えれば、すべての主要なブラウザーエンジンで丸い角を作成する特定の構文については心配しませんが、すべての主要なブラウザーで丸い角を作成できるかどうか（および必要なコードの量）を理解することが重要だと思いますそうするには）。

たとえば、ほんの数年前、私たちはまだIE6に悩まされていました。企業イントラネットアプリケーションのデザインは非常に美しいものでしたが、透明オーバーレイに大きく依存していました。IE6はPNG8を表示できましたが、PNG24のアルファチャネルを尊重しなかったため、CSSベースの不透明度を使用するにはActiveXフィルターとその他の問題が必要でした。目的の効果を達成するためにフープを飛ばすこともできますが、各フープはより長い開発サイクル、より高いバグ率、より困難な保守などを表しています。また、バージョンN + 1で作業する代わりに、kludgyコードベースにパッチを適用する開発者の時間を拘束する機会費用がありました。

これらの種類の状況では、設計の各視覚効果のコスト/利点を測定する必要があります。

• 視覚効果はどれほど素晴らしいですか？
  建設リソースをそれほど必要としない、同様にインパクトのある別のビジュアルに置き換えることはできますか？

• ターゲットで効果を正しく再現できますか？ 元の設計をターゲットで正確に再作成できない場合、設計を利用可能な最も近い近似に置き換える必要があります。（ありがたいことに、これはWebデザイナーにとってますます問題になりつつあります。）

• 予算はどれくらいかかりますか？
  あなたが望む効果を達成するために、建設にもっと工数をかける余裕はありますか？そうでない場合、より短い時間で機能を再設計できますか？

• ビジュアルに対応するには、どのくらいのコードベースをリファクタリングする必要がありますか？
  設計と建設が同時に行われている場合、またはレガシーアプリケーションのスキンを変更している場合、コーダーがビジュアルを組み込むのはどれだけ難しいでしょうか？書き換えにかかる時間だけでなく、新しく変更されたコードのデバッグと保守にかかる可能性のある時間。

上記の箇条書きと、リストされていない他のいくつかのポイントとの間には、いくつかの重複があります。重要なのは、この短いリストにも、考慮しなければならないビジネスコストがあるということです。ターゲットシステムが実際にどのように機能するかを把握していれば、状況をより効率的に評価できます。

デザインを作成する前にCSSまたはHTMLの制限を理解していれば、問題なく構築フェーズを通過するデザインを作成できます。また、設計を実装できるという自信、おおよそのコストを知る力もあります。これは常にあなたの側にあると便利です。

私の経験では（私はデザイナーではなくコーダーです）、Webデザイナーがコードについて知っておくべき問題はそれほど多くありません。しかし、彼らは自分の仕事がブラウザ内でどのように適用されているかを知っている必要があります。

Web /ブラウザに関する十分な知識のないデザイナーの最大の問題は、見た目は美しいが、ブラウザ内では実際には機能しないデザインを作成することです。いくつかのことを考慮していない可能性があります：

• フォントの使用。彼らはPhotoShopと一緒にインストールされたフォントを使用しますが、これは平均的なユーザーにはありません。または、Windowsフォントが存在しないMacフォントを使用します。
• 画面/ブラウザのサイズの尊重の欠如。このデザインは、小型のコンピューターで表示することを意図したものではありません。小型のノートブック/タブレットの人気が高まるにつれて、小さい画面サイズを考慮する必要性がより重要になります。
• ブラウザ画面のサイズを変更するとどうなりますか？ブラウザーのサイズが変更されたときにデザインで何が起こるべきかをデザイナーが考慮に入れていますか。
• スクロールバーはどうですか。通常、デザインには「lorem ipsum」プレースホルダーが付属しています。大量のテキストがそのプレースホルダーに入力され、スクロールバーが必要な場合は、どこに配置する必要がありますか。
• たくさんの画像。一部のデザインでは、多数のpngをカットする必要があります。これにより、初期ページではブラウザがこれらすべてのpngをダウンロードする必要があるため、Webサーバーからの応答時間が長くなる可能性があります。

これらはデザイナーと仕事をしているときに見た問題です。これらは、設計者がコードについて何も知らないという問題ではありません。しかし、デザインがどのように使用されるかについて考えないことに関する問題。

作業中の媒体をより広く理解することで、常にその分野の優れた芸術家および職人になります。

フロントエンドの開発を知らない多くのWebデザイナーは、悪いWebデザイナーであるが、まったくWebデザイナーではないため、それほど作業するのは困難です。彼らは印刷の背景を持つグラフィックデザイナーであり、実際のWebサイトではなく、パンフレットやポスターを作成しようとしています。

それはあなたの浴室を改造するために造園業者を雇うようなものです。彼らはデザインの感覚を持っており、基本的なことのいくつかを理解している可能性がありますが、彼らはあなたのシャワーをタイル張りするよりも前庭の芝生を造園する方がはるかに優れています。

10年前、ほとんどのWebサイトがまだ工場の組立ラインのように構築されていたので、1人がPSDを、次の人がHTMLを、次にDBを追加するなど、大したことではありませんでした。

しかし、最近では、ほとんどのプログレッシブWeb構築はアジャイルプロセスで行われ、多くのユーザーエクスペリエンス方法論、プログレッシブ拡張、統合されたバックエンドおよびフロントエンドシステム、リアクティブWebデザインなどの概念が追加されているなど、チームは多様です。そのため、設計プロセスの多くはコードで実行する必要があります。プロトタイピング、ユーザーテスト、反復設計、または何が必要であっても、コードは媒体であり、チームはそれを理解する必要があります。

いいえ、チームの全員がjQueryプラグインを作成できる必要はありません。しかし、チームは少なくとも自分が何であるかを知っている必要があり、UX / Webチームは、最終的には設計されたものをすべて構築する必要があるので、それらを作成できる人がいる必要があります。

はい。アーティストは、油彩とキャンバスを使用した画家、大理石と彫刻刀を使用した彫刻家、HTMLとCSSを使用したWebデザイナーなど、使用している媒体を理解する必要があります。

私はかつてビデオゲーム業界で働いていました。最高のゲームデザイナーは、絶え間なく変化するメディアの限界を理解し、そのためにデザインできる、技術的な才能を持つ創造的な人々でした。その範囲を超えることができず、ビジョンの実装が無駄になった人々は、ひどく嫌になります。

私は最近、デザイナーのバックグラウンドが完全に印刷媒体であるWeb開発をいくつか行いました。その結果、かなり美しいページができました。これは印刷では素晴らしいものでしたが、Webサイトとしてはかなり不十分でした。

私にとって、デザイナー/開発者の切断は数年前に起こったことですが、人々はウェブデザインが単なるモックアップを行うことよりもはるかに多いことに気づきました。

私にとって、誰かが自分をウェブデザイナーと呼ぶとき、私は期待しています：

a) They can design a layout either in a image editing program, or in the browser
b) Can articulate their design choices, and have sensible reasons
c) Proficient (as opposed to basic knowledge) with HTML, CSS, and JavaScript.
d) Basic knowledge of server side programming

私にとって、Webデザイナーとは、サイトのクライアント側を作成できる人です。

良いウェブデザイナーは、これらのすべて、と彼らは、設計プロセス中に行う選択は、サイトのUXにどのような影響を与えるかを理解しているだろう。

誰かがウェブ開発者と言うとき、私は期待しています：

a) Proficient with at least one server side programming language
b) Basic knowledge of server configurations
c) Basic knowledge of client side technology (JavaScript and AJAX implementations)
d) Basic knowledge of backend architecture

良いの Web開発者は、これらのすべてを持っている、と彼は可能なアーキテクチャの選択肢は、サイトのフロントエンドとユーザーに公開されている機能に影響を与えるかを理解することができるようになります。

また、多くの異なる開発環境に適用されるという点で、UXやWebデザインよりも水平な他の分野を専門とする人々を獲得します。

編集：もし誰かがグラフィックデザインとウェブデザインを分離する良いデザイングループの例を持っているなら、私は非常に興味があるでしょう。

設計者は、コーディングの仕組みを理解している必要があります。それは時々だ殺人行くから自分のフロントエンドの開発を防止するための唯一の方法。そのアイデアを獲得するには、直接的な経験が最も簡単な方法かもしれません。

確かに他にもありますが、小さなJavascriptのプログラミングを学ぶことでビジネスを害することはありません。（実際には時代は変化しており、DOMからjavascriptを実行できるデザイナースキルを持つ大勢の人がいますが、それはまったく別の話です）

私の一般的な考え：

• フロントエンドのWeb開発者は、設計の微妙さを気にするために、ひどいバックエンドと多くのレベルの特異性に対処する必要があります。これらの特異性のほとんどは、管理部分でのプレハブバックエンドの不適切な選択と、対処するための多大な時間を盗むことに起因します。

• Webデザイナーは、こうしたストレスのある個人に対処している間、常に命を危険にさらしています。そして、それらのフロントエンドの問題のいくつかを真剣に検討する必要があります。彼らのテーブルにデザインを落とし、オフィスに向かって叫んで逃げるのではなく、 」

• デザインショップは燃やすべきです。

勤務地によって異なります。

大企業で働いている場合、これらはすべて個別の役割である可能性があります。

1. UXまたはアーキテクチャスペシャリスト-サイトの情報アーキテクチャ/組織の計画/ワイヤーフレームの作成

2. デザイナー-photoshopまたはその他のツールを使用してサイトを設計します

3. フロントエンド開発者-html / css / javascript / json / xml / etcを実行します。フロントエンドとバックエンドを統合するテンプレートコードを記述します

4. バックエンド開発者-すべてを実際に動的に動作させるプログラミングを行います

ほとんどの中間レベルの場所では、設計者がUXの決定も処理する必要があります。しかし、小さな場所では、デザイナーが上記の3つのすべてを行う必要があります。ただし、フロントエンドは扱いにくい領域であり、さまざまなスキルセットの人々がいます。フロントエンドを行う必要があるデザイナーの場合、HTML / CSSおよびJQueryまたは他のフレームワークよりも多くのことを知っていることを期待すべきではありません。デザイナーがjavascriptとバックエンド統合のより深い側面を知ることを期待することは、あまりにも多くを求めています。

もちろん、フリーランスの場合は、自分ですべてを知って行う必要があります;）

媒体で動作するWebデザインとWebインターフェースを作成できるようにするために、WebデザイナーはHTML / CSSを知っている必要があると思います（たとえ基礎だけに限定されていても）。

Webデザイナーは、HTML / CSS自体を記述しないことを選択できますが、マークアップとCSSがどのように機能するかを知ることは、Webデザイナーになるために不可欠です。WebデザイナーはHTML / CSS忍者である必要はないかもしれませんが、WebレイアウトコンプがWebサイトに変換される方法を（少なくとも）知っていると役立ちます。

Webデザイナーはコーディング方法を知る必要がありますか？

はい。Webデザイナーは、Adobe Photoshop、Illustrator、InDesignなどのソフトウェアを使用して、Web用のデザインを作成する必要があります。次に、この設計では、オンラインにするためのコーディングを扱います。そのため、Webデザイナーにとって、コーディングとして表現するデザインのコンポーネントを理解することは非常に重要です。そのためには、コーディングの知識が必要です。完全に理解するのではなく、基本的な知識が必要です。

個人的には、それはすべてあなたのスキルと要件に依存します。スキルをすばやく習得して把握できること。要件は財政です。何かを学ぶには時間が必要です。そして、それは当分の間あなたの生産性を殺すでしょう。

したがって、殺す時間がたくさんある場合は、コーディングを学びましょう。

私は過去4年間デザイナーであり、基本的なものの編集が得意です。プロの方法でコードを学ぶのに十分な時間がありません。