Webデザイナーが開発者に尋ねるべき質問4つ

 

今回の投稿では、Webデザインプロジェクトを始める前に、開発者に尋ねるべき4つの質問について説明します。

質問 1. 成果物をどのような形で提供すればよいでしょうか。

ソース入力

私は、開発者がデザイン成果物を送受信する方法についてどれだけ慣れているかを常に尋ねています。どのレイアウトグラフィックツールを使用するかを決定することができるからです。多くのデザイナーが最終的な成果物をどのような形式にするかを意図的に想定していることをたくさん見ました。しかし、これはデザインを終えて開発を開始しようとしたときに戻って、ファイルを再保存するか、別の形式に再デザインして変更する状況に遭遇する可能性があります。

以下は、設計設計の前に開発チームと協議する必要がある質問と状況です。

デザインリソースはどのように準備すればよいですか？

●整理されたフォルダにデザインリソースを分割して保存したいですか？

● 開発者が自分でリソースを抽出できる、デザインリソースがまとめられたソースファイルを望むか。

●この場合、PSD、AI、EPS、Sketch、PDFなどの目的の統合ファイルの種類は何ですか？

●デザイナーと同じバージョンのソフトウェアがありますか？（つまり、開くことができますか？）

●学習簡単に統合ファイルのグループ化とレイヤーネーミングが整っていますか？

●ドリームウィーバーまたはウィジウィックエディタから出力されたHTMLが欲しいですか？

グラフィカルインタフェースプログラムで生成されたコードを避ける

グラフィカルインタフェースプログラムで生成されたコードが開発者に取り組むのに最適かどうかを尋ねます。おそらく10人のうち9人はこの方法を好まないでしょう。GUIで作られたコードは一般的に汚れていて、整理されず、使いにくい性質を持っています。この方法はデザイナーと開発者の両方のワークフローを遅くするので、グラフィカル インターフェースプログラムで作成されたコードは避けてください。 オプションとして考える場合は、最初に開発者と十分な議論をして進めることをお勧めします。

デザインリソースを別々の文書にまとめますか？

モックアップで明白でないデザイン要素をどのように文書化する予定ですか？カラーコード、高さ/幅の値、フォント、フォントサイズ、アルファ値、マウスオーバー効果、アニメーションなど、開発者が推測したり、意図的に決定を下したりしないように定義して記録する必要があります。

文書化に役立つアプリケーション

●オムニグラフル（Omnigraffle）：矢印の描画、記号の追加など、さまざまなシンボルを簡単に描画でき、デザインの特徴を簡単に説明できるようにします。

●アボコード（Avocode）：PhotoshopまたはSketchから色、画像リソース、フォント、テキスト、CSS、位置値などを抽出できます。

●インスペクト（Inspect from InVision：インスペクトは、上記の製品の機能を実行すると同時に、InVisionを使用する場合に非常に便利です。

質問 2. ウェブサイトがフロントエンドフレームワークを通じて制作される予定ですか？

現在、デザインと開発の側面で退屈な作業を減らすのに役立つさまざまなフレームワークがたくさんあります。使用されているものを事前に知ることは、デザインを文書化する上で非常に重要です。

ブートストラップや960 Gridなどの人気フレームワークは12列システムを借りています。なぜ熱が12個ですか？12は、小さな数字の中で最も分かりやすい数字です。12を介して12、6、4、3、2の値を持つことができ、1つの均等な間隔の列を持つことができます。これにより、設計プロセスをさらに簡単に進めることができます。

これらのフレームワークには事前設定された寸法があります。 フレームワークディメンションの値は、作業前から把握する必要があります。 （グローバルパディング、列の幅、列間の間隔幅、メディアクエリ分割点など）

私の場合、Sketchで設定した余白がBootstrapで設定した余白の値より5pxほど大きかったので、それらのデザインを中断したことがありました。このような状況は誰にとっても楽しい状況ではありません。結局のところ、デザインを再構築して再コーディングする必要があるからです。どのフレームワークが使用されるのか、そのフレームワークをスケッチやPhotoshopでどのように適用する必要があるのか​​を事前に把握してください。

グリッドに加えて、多くのフレームワークにはボタン、フォーム、ツールチップなどのデザイン要素が組み込まれています。このようなデザイン要素をカスタマイズしたい場合は、開発者にこの事実を明確に理解してください。

私は特定のフォームのデザインを別々に進めるたびに、開発者が単にフレームワークで与えられるデフォルトのフォームを使用することが多かったからです。

開発者が2pxのボーダー半径の違いに気付くとは思わないでください。 開発者はデザイン専攻者ではないからです。

以下は最も人気のあるフレームワークです。

● ブートストラップ (Bootstrap)

●ジャーブ社のファンデーション（Foundation by Zurb）

●Yahooのピュア（Pure by Yahoo）

●スケルトン（Skeleton）

●セマンティックUI（Semantic UI）

●その他より多くのフレームワーク

設計する前に、開発者が好むフレームワークを理解してください。

質問 3. 開発環境を構成する言語とライブラリは何であり、これによる制約事項は何ですか？

コーディングする方法がわからないとしても、良いウィジェットやプラグインをインターネット上で簡単に見つけることができます。コードスニペットは使いやすく、サイトに機能を追加することは数十年前よりはるかに簡単になりました。 ただし、1つの注意点は、プラグインがすべてのものに簡単に適用されるわけではありません。

サイト用に事前定義されたULプラグインを使用するのはかなり問題ありません。しかし、その前にどの言語がWebサイトの作成に使用されるのかを事前に把握することが非常に重要です。

ほとんどのプラグインやウィジェットは、作成者が選択した特定のコーディング言語で書かれています。そのため、他の言語や開発環境では動作しないことが多いです。

Rubyで作成された天気アプリは、PHPで作成されたサイトでは機能しません。

WordPressプラグインは、ネット（.NET）で構成されたサイトでは動作しません。

同じJavaScriptベースであるにもかかわらず、AngularローディングバーはバックボーンJSで構成されたサイトでは動作しません。

開発環境に合ったウィジェットを見つけたとしても、一種の例として示す用途でのみ開発チームに共有してください。開発チームにコードを丸ごと圧縮したZIPファイルを転送して「こうして開発してください」と要請するのは、あなたに100pxのイメージサムネイルを電子メールで王唱送って「素敵なスライドショーを作ってください」と要請するのと同じです。これらの行動は礼儀に反し、謙虚さが不足していることを示しています。

質問4.どのブラウザをサポートする必要がありますか？

ご存知のように、Internet Explorerは開発者にとって非常に大きな悩みです。

幸いなことに、過去にオンライン制作者を悩ませていたブラウザのギャップが急速に絞り込まれています。MicrosoftでさえInternet Explorerを放棄し、新しいEdgeをリリースしています。

どの程度までの前世代のブラウザをサポートするかは、デザインに大きな影響を与えます。

以下は、ブラウザでサポートできないCSSプロパティの一覧です。

●  Border-radius: IE8

●  text-shadow: IE8, 9, Firefox 2, 3

●  box-shadow: IE8、Firefox 2、3

●  RGBA (color transparency): ie8

●  Flexbox (more on this later): IE8, 9. Needs adjustments for older versions of Safari and Firefox

● マルチプルバックグラウンド：IE8、Firefox 2-3.5

●  SVG: IE8 (many others for specific things)

●  CSS Animation: IE8, 9, Firefox 2-4, Safari 3.1 – 3.2

●  CSS 2D transforms (rotation, scale): IE8、Firefox 2、3

●  Media Queries: IE8、Firefox 2、3

*  'Can I Use' ここですべてのブラウザの機能可能範囲を確認できます。

以前の世代のブラウザのうち、IE8または非常に古いバージョンのFirefoxまたはSafariをサポートする必要がある場合は、特定の視覚効果が削除されたときに要素がどのように見えるかを考えてみてください。丸みを帯びた角が刻々となり、アニメーションや影が消えてしまいます。

最新の技術を使用しながらデザインしますが、前世代のブラウザでも正常に使用可能に保つことを progressive enhancementといいます。完全なサイトの完成のために考えなければならないもう一つの要素です。

上記の4つの質問に基づいて、開発者とのコミュニケーションを効果的にするのに役立つことを願っています。どのような制約があるかを事前に把握しておくと、どのデザインルールに従うか考えることができ、複数の設計と開発問題に対する代替案を設定して緩和するのに役立ちます。

*本文内容は https://www.invisionapp.com/inside-design/design-questions-developers/を 脚色した資料です。

Questions to ask developers before you start designing | Inside Design Blog

<p>Form a clear path of communication with your developers at the outset of a design process.</p>

www.invisionapp.com