ウェブサイトを設計する手順は何ですか？

すべてのWebデザイナーを呼び出す:)

私は故郷で中小企業向けのウェブサイトを作り始めており、それが私の最初の適切なプロジェクトになります。過去にサイトを作成しましたが、余暇のために作成しました。私はHTMLとCSSに堪能です。私はクライアントの要件と彼がウェブサイトなどで何を望んでいるのかを知っています。要件を確定した後、どのステップに従う必要があるのか​​がわかりません。Webを検索しましたが、情報が古いため、質問に関連するものが見つかりませんでした。

私の質問は：

2014年のWebデザイナーのワークフローとは何ですか？（すべてが非常に速く変化しているため）サイトのワイヤフレームを作成し、Photoshopでそれらを設計し、設計をコーディングしますか？

Webサイトを作成するために必要な手順など、「設計」プロセスの仕組みを知りたいだけです。

前もって感謝します。

発見と範囲

クライアントと一緒に座って、目標、目的、ニーズを決定します。目的のサイトの見積もりを作成し、所要時間について話し合う必要があります。提供できない必要なものがすべて書かれていることを確認してください。サイトがどのように構成されるかを把握する必要があります。レスポンシブ、タブレットと電話のみ、デスクトップのみ、デスクトップとタブレットのみなど。クライアントがデスクトップバージョンをリリースし、後でフルモバイルアプリを必要とする場合など、デザインがマルチフェーズデザインターゲットであるかどうかを把握する必要があります。

コンテンツマッピング

サイトに必要なすべてのコンテンツが提供されたことを願っています。サイトとその機能をマップする必要があります。将来の変更に対するスケーラビリティの方法を決定し、CMSまたはアプリ用のコードの構造を決定します。

例：

モックアップ

クライアントの承認を得て「ツリー」または「マップ」を完成させた後、手スケッチまたはモックアップツールを作成します。右上で検索を行うと、このトピックに関する多くの質問があります

例：

スタイルタイル

WebデザインのためにPhotoshopでデザインすることは、今日の時代の目的に反します。まだPhotoshopを使用している人の多くは知りません。なぜなら、同じ時間を費やしてブラウザでコード化できる派手なボタンを作成するのに時間がかかるからです。特別なリクエストごとにアプリケーションを使用する必要がある場合は、IllustratorまたはInDesignにデプロイします。次のようなスタイルタイルの設計に移行することをお勧めします。

タイルの目的では、クライアントにデザインを渡さず、「これはあなたが私に与えたデザインのように見えない」というコーナーに身を置くことではありません。また、サイトを計画している場合、特定のデバイスなどの設計に多くの時間を費やすため、Photoshopで応答性を確保するために時間を費やす理由はありません。サイト全体を設計する必要がある場合前述のように、IllustratorのSVGと、Photoshopと比較してサイトの要素をエクスポートする機能について検討してください。ある程度、コンテンツのフォーマットにInDesignを使用することもできますが、画像の操作にはPhotoshopのみを使用します。そうする場合は、おそらくImageMagickを使用します。私はスタイルタイルを他のレベルよりもさらにレベルを上げて1ページにコーディングしているので、マスターの予備タスクをノックアウトしました。.css ファイル。

ワイヤーフレーム

気づいていない場合は、ブラウザでデザインを展開することを好みます。現在、私はIllustratorを使用してサイトのスケッチまたはサイトのモックアップを作成することがありますが、通常.cssはグレースケールで6色以下のデフォルトのテンプレートファイルを展開し、ほとんどの人はサイトの構造用にすべてをコーディングしています設計を理解し、何かで遊びたい。CMSにデプロイする方が簡単なので、時々PHPでこれを実行します。次に、クライアントのPROVIDEDフォントを使用して白黒のシンプルなサブドメインを開発し、サイト全体の機能が存在し、それらが通過できるようにします。すべてのコンテンツまたは色を追加するのに時間を費やしていないため（ダミーのテキスト参照を使用するため：「ウェブサイトのLorem Ipsum（ダミーテキスト）の代替"）デバイスに基づく特定の要素が気に入らない場合は、存在する変更を簡単に変更できます。

色付けとコンテンツ

クライアントがサイトの構造と機能を承認したら、残りのCSSを作成し、要求されたアニメーションまたはJavaScriptの詳細を追加します。スタイルタイルが承認されているので、適切に開発した場合は、CSSをコピーして設定するだけです。

デバッグ、デバッグ、デバッグ

クライアントがサインオフする前の最後の手順はデバッグで、コードがエラーなしで堅実であることを確認します。すべてが正しければ、スムーズにリリースできるはずです。このステップには、サービングテストと負荷テストも含まれます。個人的には、印刷デザインに関しては、できればあなたがやろうとしているように、どのデザイナーも自分が開発していることを知っているべきだと固く信じています。クライアントが真のホスティングプロバイダーを購入できない場合、サイトのパフォーマンスが制限される可能性があり、それはあなたのせいであり、あなたが何か間違ったことをしたというだけです。

トレーニング

私は通常、CMSサイトでの簡単な/見積もりの​​トレーニングに入札します。一部のユーザーは自分が何をしているのかわからないので、質問の後の1時間のパディングで午後に入札し、何かを確認するか、ユーザーが最大限に機能を使用していることを確認します。

基本的な質問をしているので役立つ他のトピック：

• ワイヤーフレームとモックアップの違いは何ですか？
• Webデザインのモックアップをクライアントに提示する方法は？
• Webデザインの良い「モックアップ」プラクティスとは何ですか？

私はまた、この分野で始めたばかりのWebデザイナーでもあります。しかし、今はいくつかのプロジェクトを行っています。私にとって、私のワークフローは次のようになります。

1. 最初の設計開発会議
   これは、完了予定日を含むすべての関連情報を収集するとき、クライアントから必要なアイテムのリストを作成するときなどです。
   
2. PhotoShop
   モックアップこの時点で、クライアントに適したデザインまたは2つまたは3つを見つけ、ブランド、色、スタイルなどを使用してPhotoshopでモックアップを作成します。 、クライアントにどのデザインが一番好きかを決めさせます。
   注：WordPressを使用して構築する場合は、http：//themeforest.comにアクセスできますたくさんのテーマをチェックしてください。そこから、スクリーンショットを撮ってモックアップを作成し、ライブデモを提供することもできます（明らかにクライアントのカスタマイズなしで）。クライアントがこれらのモックアップのいずれかを気に入った場合、テーマを購入し、必要に応じて変更できます。これは私がする傾向があることです。適切なクレジット/支払い/などを与えることなく、テーマ（または他の何か）を使用することはありません。元の作成者に。:)
   
3. 開発
   次に、最終的に開発環境でサイトの開発を実際に開始します（クライアントのライブWebサイトではなく、可能であればサブドメイン-IE dev.clienturl.com）。ページが近づくと感じるたびに更新をクライアントに送信します。問題がある場合は、その方法で完了するために、すぐに修正できます。
4. 常に
   フォローアップクライアントのWebサイトが稼働し、満足しているようで、さらなる変更を求めていない場合でも、フォローアップを必ず行ってください。期待どおりに、すべてが正常に機能していることを確認してください。また、ウェブサイトが約1週間公開されたら、各クライアントのアンケートを作成して終了することをお勧めします。ここからのコメントをあなたのウェブサイトでの推薦状として使用できます。

何か助けが必要な場合は、私のウェブサイトから私に連絡してください。契約、ポストプロダクション調査、最初のアンケートなどのためにあなたと共有できるリソースがたくさんあります。http://anchorsawaydesigns.com/

可能な限り多くの情報を最初から取得してから、以下のような段階的なアプローチに従ってください。クライアントが期待を満たしていないことを後で知るためだけに何かを分離して開発したくないので、できる限りクライアントに情報を提供してください。適切なワイヤーフレームツール（私はbalsamiqを使用しています）に投資すれば、作業の半分は完了です。

1. 要件収集
2. ワイヤーフレーム
3. モックアップの設計
4. 設計が確定しました
5. 開発
6. ホスティング

がんばろう。

こんにちは、あなたは新しいプロジェクトを始めています。

必要な手順：

1. 最初に、プロジェクトに使用するテクノロジーを決定します。つまり、単一ページのスクロール、複数ページのスクロールなどを意味します。

2. 次に、レイアウトとワークフローのスケッチを準備します。

3. さて、私がPhotoshopで行うようなツールでレイアウトの設計を開始しますが、あなたの好みを使用することができます。

4. その後、どんな変更に対してもクライアントにurレイアウトを見せることは良いことです。htmlのときに頭​​痛の種にならないように、色、フォントなど。

5. さて、クライアントの確認後。HtmlとCssでコーディングを開始します。

6. その後、さらに言語ベースのコーディングのためにDeveloperに渡す時間です。PHP、.Netなど

楽しい............

Web業界では、開発プロセスを合理化するために設計が行われ、最終設計がさらに開発またはテストされるように提示される前に、他のいくつかの中間ステップが含まれます。

ステップ1：インスピレーションを得る：

他のデザイナーやサイトがワイヤーフレームに対して何をしているのかを継続的に観察すると、ワイヤーフレームが画面の情報を整理するのにどのように役立つかをゆっくりと理解できます。

そのためには、「Wirify」ワイヤーフレームツールを使用して、ブックマークに大きなリンクを追加し、目的のWebサイトに移動し、ブックマークをクリックするだけで、Webサイトがワイヤーフレームに変わります。

ステップ2：プロセスの設計：

さまざまなデザイナーが、ワイヤーフレーム化と、ビジュアルまたはコードへの変換をさまざまな方法でアプローチしています。

ここでは、従うべきパスを選択するのはデザイナーだけではありません。クライアントはモックアップを直接作成することを好む場合もあり、より体系的で、

スケッチ=>ワイヤフレーム=>モックアップ=>コード

ステップ3：スケッチ：

今、あなたがインスピレーションを受けているとき、いくつかの大まかなアイデアとアプローチの計画があります。スケッチから始めるのは常に良いです、あなたのマウス/スタイラスまたはあなたが使用するものを制御するのがどれほど優れていても、彼らは紙、鉛筆を打ち負かすことはできませんシンプル。

紙に手書きでスケッチすることは、どのデザイナーにとっても良い出発点です。集中して整理するための迅速かつ簡単な方法を提供します。スケッチが非常に正確であれば、これを最終的なワイヤフレームとして使用することもできます。

ステップ4：ワイヤーフレーム：

ワイヤフレームの作成は、設計する前に実行する必要がある最初の手順の1つです。

ワイヤフレームは、Webサイト内の要素とコンテンツを整理および簡素化するのに役立ち、開発プロセスに不可欠なツールです。

ワイヤフレームは、基本的にデザインのコンテンツレイアウトの視覚的表現です。

建物の基礎のように、高価なペンキを塗るかどうかを決める前に、それは根本的に強くなければなりません。

ツールを選ぶ

Mashableのデザイナー向け10種類の無料Wireframingツールのリストはこちら

グリッドを設定する

グリッドは、対称で並列設計を実現するために非常に必要です。

適切に設計されたWebサイトを見ると、コンテンツが本文の特定のポイントから始まり、1つのポイントで終わることがわかります。それらはグリッドを使用して管理されます。

ボックスでレイアウトを決定する

タイポグラフィで情報階層を定義する

ワイヤーフレーム化中に避けるべきこと：

• ページであまりにも多くの出来事があります。
• 色とデザインを重視
• 細部が多すぎる

ワイヤフレームを作成すると、クライアント、開発者、およびデザイナーはWebサイトの構造を批判的に検討する機会を得ることができ、プロセスの早い段階で簡単に修正を加えることができます。

ワイヤーフレームは、次の主要な利点をもたらします。

ステップ5：モックアップ/ビジュアル：

最終的なワイヤフレームを最終的なモックアップまたはビジュアルに変換できるようになりました。

Mockuosの一般的なツールには、Adobe photoshop、Corel Draw、非常に新しいが既に人気のあるSketchなどがあります。

情報階層

何を強調表示し、何をサイド情報にするかを検討する必要があるかもしれません。カラースキーム、再配置、およびタイポグラフィはそのように決定されます。

タイポグラフィ

選択肢の適切な組み合わせで、視覚的に魅力的で読みやすいウェブサイトのタイポグラフィを選択します。フォントサイズ、太さ、色は読みやすさにおいて重要な役割を果たします。

カラースキーム

ブランドアイデンティティと心理的な色を危険を表す赤、成功を表す緑などとして表す配色。

ステップ6：プロトタイプ：

プロトタイプは早期サンプル、モデル、またはコンセプトやプロセスをテストするか、から複製や学ぶべきものとして動作するように構築された製品のリリースです。

ワイヤフレームは構造を処理し、モックアップはビジュアルを処理し、プロトタイプはユーザビリティ（Web /アプリ製品）を処理します。

プロトタイプ製品を作成し、これをテストし、POC（概念の専門家）を実行します。実際の製品に進むことができます（変更が不要な場合は当然です）

画像やその他のリンクを含む元の記事へのリンク