Web開発の概念すべてのWebデザイナーは理解するべきです
言わなければならないことがたくさんあります デザイナーと開発者の間に見られる格差. 可能なデザイナー/開発者ハイブリッドはたくさんあります コインの両面を理解する, しかし、彼らは数が少なく、遠い.
クリエイティブなプロジェクトは成功しています 適切なコミュニケーション. しかし、デザイナーや開発者がその方法について確信が持てない場合、これは困難になる可能性があります。 互いに話をする. デザイナーが適切なJavaScriptの書き方を知っている必要も、開発者がタイポグラフィの選択を習得するべきでもないと思います。しかし、いくつかあります 基本トピック 双方向だと思う.
次のトピックは私自身の個人的な考えです すべてのデザイナーが理解すべき重要なWeb開発のアイデア. 私自身デザイナー／開発者として、それがどちらの分野を勉強することになるのか、私は知っています。しかし、明確な理解はコミュニケーションを向上させ、デザイナーをクリエイティブチームにとってより価値のあるものにするので、学ぶことは常に努力する価値があります。.
フロントエンドコードの動作
Webデザイナーは、そのデザインの才能と共にフロントエンドのスキルを持っているとよく考えられます。これは非常に議論されているトピックです。 正解はない.
デザイナーは彼らがすることをすべきです 気持ちいい. それがビジュアルデザインの仕事をすることだけを意味しているのであれば、それもそうです。ただし、フロントエンドテクノロジを簡単に理解すれば、同じ設計者になることができます。 より直感的 開発者向けのアセットを作成するとき.
すべてのデザイナーは少なくとも以下のことを理解しているべきだと思います フロントエンド開発の3つの基本言語 （HTML、CSS、およびJS）とその使用方法。たとえば、ほとんどのドロップダウンメニューはJavaScriptに依存していますが、CSS専用の選択肢もあります。.
デザイナーがドロップダウンメニューを作成するとき、彼らはについて考えることができます コードで実装することの複雑さ. どの要素がJavaScriptを必要としているかを理解しているデザイナーは、開発者に何を構築するように依頼しているのかを理解するためのよりよい準備ができます.
これは可能です 単一行のコードを書くことを学ぶことなく.
CSSをする ウェブサイトをスタイルする. それはCSSアニメーションとCSSを除いてほとんど静的です 大多数のビジュアルを作成します ページ上. 最も動的な機能 JavaScriptで作成されています.
あなたがこの分裂を理解することができればそれは設計作業に意識的な努力を吹き込むでしょう。それはまた、UXのモーションデザイナーに、インターフェースのアニメーション化にどれだけの労力が費やされるかを考慮するように強います。.
レスポンシブテクニック
すべてのWebデザイナーは少なくともこの用語を知っているべきです レスポンシブデザイン. これにより、Webサイトは さまざまな画面サイズに適応する, それぞれ異なるレイアウトが属しています。新しいレイアウトを適用したときのデバイス寸法は ブレークポイントで定義, CSSファイルに追加されている.
ブレークポイントは、 特定のピクセル幅 レイアウトがその画面サイズに合うように調整される（最小または最大の）高さ（および/または高さ）。そのため、1080pxモニターと320pxスマートフォンのレスポンシブレイアウトは異なります。.
実際のサイトでブレークポイントがどのように機能するかを確認するには、Media Queries Webサイトをご覧ください。.
デザイナーとしての仕事は、各ブレークポイントがどのように機能するかを検討することです。 モックアップに影響を与える. あなたはいくつかのコンプをデザインすることを任されるかもしれません。 異なるスクリーン寸法に合わせる.
レイアウトが変更されるときにCSSブレークポイントが条件を定義することを理解したら、これらのアセットを開発チームに提供するのがはるかに簡単になります。.
デザインでモジュラーだと思う
開発者は常にしたい コードを再利用する このアプローチは開発を促進するので、可能な限り あまり冗長ではありません そして ファイルサイズを削減 - 実際、これは重要なコード最適化手法です。.
モジュール設計 からWebサイトを作成する方法について説明します “モジュール” それはすることができます 時間の経過とともに再利用. ボタン、フォーム入力、見出しスタイル、または派手なスタイルのブロック引用を考える.
もし、あんたが デザイン要素, 開発者がレイアウトをコーディングしやすくなります。 再利用可能なCSSクラス. どこでできるかについて考えることは常に良い考えです。 合理的に再利用 同じ色、テクスチャ、およびページ要素ですが、それについて賢い必要があります。 全体的な美学を損なわないために.
あなたがもっといいの 注釈を付ける 開発者ができるように、どのモックアップ間でどの要素をコピーしたか サイトのこれらの部分をリピートコードでマークアップする - 開発をより早く簡単にする.
モジュール設計 アトミックデザイン, どちらのアプローチも開発者向けです。しかしながら 可視化 コードの機能を理解するのに役立ちます。 モジュール設計を視覚化 いくつかの例を見るためにこの記事をチェックしてください.
網膜画像とSVGを理解する
通常、デザイナーの仕事は、画像を準備し、必要な写真をキャプチャし、アイコンを最初からデザインすることです。これはデザイナーが単独で責任があることを意味します ビジュアルアセットを配信する 開発者は最終的にレイアウトにコーディングします。これが理解することが重要な理由です 網膜サイズ と 網膜支援資産を渡す 最後のモックアップと一緒に開発者に.
網膜デザインのワークフローについてもっと知りたいのなら、このSmashing Magazineの記事を強くお勧めします。 RetinizeそれはすることができるPhotoshopのアクションの無料コレクションです。 網膜のバージョンを自動的に作成する あなたの資産の.
ほとんどのデザイナーはすでにサポートすることを知っています @ 2倍の画像, しかし、新しいiPhone 6+デバイスには 3倍の解像度. ただし、@ 3倍の画像サイズを気にしないプロジェクトもありますので、アセットを完成させる前にプロジェクトリーダーと相談してください。.
考慮すべき最後のことは、 SVGの進歩 ウェブ上で。最近のブラウザはすべてSVGをサポートしています。 ベクトルベースの画像フォーマット. これはSVGアイコンが 品質を損なうことなく自動的に拡大縮小, だからあなたはSVGグラフィックスのために網膜の資産を必要としない.
とはいえ、すべてのクリエイティブチームがWebデザインのためにSVGと協力する意思があるわけではありません。それらは確かにブラウザによってサポートされています、しかし場合によってはそれらはまた実装するのが難しいかもしれません。デザイナー/開発者の関係を成功させるためにはコミュニケーションが不可欠です。.
ベクトルグラフィックを使用することの長所と短所を話し合い、各プロジェクトに最適なものを決定します。これらの機能を理解するだけで、開発者と明確にコミュニケーションをとることができ、開発者が網膜サポートのためのレイアウトをコーディングすることもできます。.
アクセシビリティを理解する
プログレッシブエンハンスメント そして グレースフルデグラデーション アクセシビリティ - 同じ問題を処理する2つの異なる方法があります。すべてのユーザーがデバイスにアクセスしたり、Webサイトの動的機能の100％をサポートするブラウザを実行したりするわけではありません。.
これらのユーザーはまだ取得する必要があります うまくいく経験, そしてこれは適切なコーディングで処理される必要があります。一部のスクリーンリーダーはすべてのJavaScriptとCSSコードを無視するかもしれませんが、ウェブサイトは まだ機能する必要があります.
私は最近記事をカバーしました プログレッシブエンハンスメント 私が好む開発方法なので、詳しくはプログレッシブエンハンスメント 非常に基本的な機能から始まります, それからもっと上まで働きます “進んだ” 特徴.
グレースフルデグラデーション それは 反対のアプローチ どこで 主な機能はすべて最初に設計されています, 次に、ユーザーがJavaScriptまたはCSSをサポートしていない場合、開発者はこれらの機能を処理する方法を決定します。.
デザイナーがこれらの状況のためにモックアップをするように頼まれることはありそうもないです。しかし、デザイナーがこれらの用語とその意味を理解していることが重要です。 開発プロセスに影響を与えますか. これは、アクセシビリティが大きな関心事であるプロジェクトに特に当てはまります。.
最後に
私はそれらがオプションであると考えるので私がスキップしたいくつかのトピックがあります. バージョン管理、エラー処理、およびJavaScriptアニメーション デザイナーが調べたいと思うかもしれないいくつかのより複雑なトピックがあります.
しかし、実のところ、この記事で取り上げた点は、設計者が開発チームの要件を理解するのに役立つだけではありません。 Web開発の表面を単にスキミングすることで 洞察を得る それはあなたがアイデアを伝え、生産中に起こる問題に同情するのを助けるでしょう.
より関連性の高いコンテンツをお探しの場合は、以下の投稿をご覧ください。
- 開発者と効果的にコミュニケーションをとる方法 （smashingmagazine.com）
- デザイナーと開発者がお互いを理解することを学ぶのを助ける （uie.com）
- コードを習得することで、UXデザイナーとしての利点が得られます （jessicaivins.net）
