ウェブサイトを設計するとき、通常どのように始めますか？
過去にいくつかのHTML、CSS、およびPHPコーディングを行いましたが、すでに「完成」したものにしか取り組んでおらず、ゼロからWebサイトを始めたことがありません。しかし、最近ドメインとホスティングを安価で購入しました。HTML、CSS、Javascriptのスキルを向上させて、Web開発者/ウェブマスターとしてもう少し市場性を高めたいと思っています。
通常、Webサイトを開始するにはどのプロセスを使用しますか？紙にレイアウトを描いてからコードを実行しますか？または、コーディングを開始し、好みに合わせて出力を調整しますか？
私のプロセスは一般的に次のようになります。
1。機能。鉛筆と紙で、サイトを構成する個別の機能/ページをレイアウトします。これは大まかなストロークの質問で取得します-あなたはあなたのお母さんのためのシンプルな情報とグラフィックサイトを構築していますか？小規模ビジネス向けのeコマースソリューションですか？写真家の友人のためのブログ/ギャラリー？あなたの答えは、あなたが従う必要があるビルドパスについて多くを決定します。この段階では、クライアントまたはボートを運転している人（あなたでない場合）とのかなりの議論も含まれます。
2。ワイヤフレーム。必要なすべての機能をレイアウトしたら、ワイヤーフレームを作成します。紙の上または花火のようなツールを使用して、非常にシンプルなナビゲーション機能を組み込むことができます。ワードプレスのようなCMSを使用している場合、静的コンテンツはどのように処理されますか？これは、ファイル構造について考え始める良い機会でもあります。プロジェクトにカスタムデータベースが必要な場合は、今がその設計と実装の計画を開始するときでもあります。これは重要な段階です。スマートプランニングは、エラーが発生した場合、またはプロジェクトのクリープが発生した場合に、多くのバックトラッキングと再作業を節約できるためです。
。テクノロジー。計画段階が比較的うまくできたら、テクノロジーを選択します。あなたはストレートHTMLをやっていますか？ランプ環境でphp cms？ .net mvcストアフロント？これらの質問は、ホスティング環境に必要なものと、物事を実行するためのコストに影響を与える可能性があります。あなたが店頭をやっている場合、ここでのセキュリティが第一の関心事です（たとえば、SSLやPCIコンプライアンス）。優れたテスト環境（localhostなど）が確立されていることを確認してください。
4。デザイン/レイアウト。機能リストとワイヤフレームが十分に決定されたら、サイトの設計について考え始めることができます。ページを埋める内容を知ることは、明らかに前提条件です。私はPhotoshopで働き、マークアップ構造の類似物としてフォルダーを多用します。私は、意図したマークアップとcss識別子で名前を付けています。あなたが本当に詳細を知る前に、おそらくいくつかのフリーフォームの描画を行うのが賢明です。私は要素を引き出し、「プロセス」ファイルに配置する「レイアウト」ファイルを使用する傾向があります-私は生産グラフィックスを出力するために使用するファイル。
5。マークアップ/ CSS。かなりきれいなデザインが完成したら（プロダクションモードに移行する際に少し曲がりますが）、マークアップを書き始めることができます。私は一般に、サイト内のすべてのコンテンツに対応する標準レイアウトを使用することを好みます。そのため、ここで重要なのは、クリーンで柔軟なことです。レイアウトマークアップは、CSSの記述を開始する前にかなり完了しているはずですが、互いに通知するために多くのことを行っていることがわかります。また、この段階で多くのSEO最適化を行います（画像またはAタグの適切な命名、メタ情報、Doctypeなど）。
5.1テーマ管理。 CMSを使用していて、デザインがカスタマイズされたテーマとして採用される場合は、目的のアプリケーションでそれを正確に行う方法に関するチュートリアルを見つけてください。率直に言って、これは気が遠くなる可能性があります;）テーマ要素に切り刻む前に、かなり完全なCSSで静的マークアップレイアウトを常に構築します。
6。動作。マークアップとcssがかなり完成していて、テーマが整っている場合は、ビヘイビア（ロールオーバーなど）の開発を開始できます。絶対に必要な機能（ajaxが重い）ギャラリー、またはデータ駆動型のフラッシュコンテンツ）。一般的なルールは-JavaScriptをオフにして誰かがあなたのサイトにアクセスした場合、彼らは何を見ますか？私は時々静的な要素を削除し、実行時にインタラクティブなバージョンに置き換えます。
7。コンテンツ。デザインがコンテンツに依存していない限り（たとえば、画像はコンテンツである場合があります）=私は通常、デザインと動作が十分に確立されるまでプレースホルダーテキスト/グラフィックスを使用します。複数回作業することは避けてください。製品データを入力する場合は、慎重なエラーチェックとテストが必要になります。
その時点で、常に手直しと修正と磨きの期間があるようです。しかし、本質的には、それをライブにする時間です。それからおやつを食べに行きます。
うーん。それは単なる「開始方法」以上のものだと思います。しかし、とにかくそれが役立つかもしれません。幸運を！
ウェブサイトを設計するとき、私は理由を尋ねることから始めますか？
ワークフローの最初の部分は、なぜですか？私がクライアントと仕事をしているなら、彼らがウェブサイトに何を成し遂げたいかについて明確に定義されたビジョンを持っていることを確認する必要があります。
1.なぜ質問。
あなた自身と、なぜあなたがこれをしているのかについて少し教えてください。
顧客は誰ですか？彼らの具体的なニーズ/痛みは何ですか？さまざまなタイプの顧客のいくつかの具体的な例、彼らが必要としているもの、ウェブサイトが彼らのために何をするかを私に提供してください。
ビジネスについて教えてください。あなたが正確に行うことは何ですか？
次の男よりあなたを良くするものは何ですか？
サービスを検索している場合、あなたのビジネスはあなたがそれを見つけるためにGoogleに入力するものを提供しますか？
自分でサイトを構築する場合は、これらの答えが何であるかをすでによく知っている必要があります。
上記の質問への回答に基づいて、これらの人々が真面目であり、実際には良いアイデアを持っていると判断した場合。次に進みます（まだ支払いを受けていませんが、雇ってもらいたい場合は靴下を脱ぎ捨てる方が良いことを覚えておいてください）
2.研究。
クライアントと彼のビジネスの調査に時間をかけます。彼らの過去の成功と彼らが遭遇した問題を見つけてください。あなたは彼らが雇った3人目の開発者ですか？他の2人はどうなりましたか？
顧客が必要としているものを見つけます。このサイトを誰のために構築しますか。顧客は60歳の退役した退役軍人か、終日FacebookでFarmvilleをプレイする16歳の吹き出物に直面した子供ですか。
競合他社が誰であるかを調べます。彼らも知らないかもしれません。 5〜10人の競合他社の競合分析を行い、Serpsを開始する必要があるユーザーを確認します。これは、Wordの重要なターゲットが何であるかを知るために必要な段階です。後で、すでに失敗しています。
2b提案
彼らのビジネスについてのあなたの知識で彼らを吹き飛ばし、ウェブサイトの契約/提案を考え出し、彼らが同意したらあなたの契約に備えてください。署名済みの契約と50％のデポジットを取得して、ステップ3に進みます。
3.ミッション- 持っている
ここには共通のテーマがあります。これらすべてのケースで、ミッションは製品そのものではありません。使命は、「真剣に」何かを真剣に考えているなら、製品が絶対に驚くべきものになることを要求するので、それを実現することです。必要に応じて、これらのミッションがすべての答えになります。なぜ新しい機能を追加したのですか？ではなく、どの新しい機能を追加するのですか？ -- ベンジャミン・ポラック。
誰もが見通しに期待できるように、タイムラインを確立する必要があります。
4.ワークフロー
ほとんどの人がここから始めるので、プロセスを説明しますが、状況、チーム、クライアントなどに最適なワークフローを決定する必要があります。
私にとってはContentが最初に来る。私は、コードが書かれる前に、クライアントが大部分を完了していることを確認します。私たちは、最終ドラフトの校正編集について話しているのではなく、ページ上にあるテキストの単語については多少説明しています。マーケティングチームが関与している場合、これには時間がかかる場合があります。
サイトがどのように見えるかについては、すでに知っているはずです。コンテンツが必要です。次に、ステップ3で思いついた目標を達成するレイアウトと一般的な設計原則に取り組む必要があります。
私はワイヤーフレームが嫌いですが、それらが必要であることを理解しています。サイトがクライアントのように見えないことを知っているからといって、そうではないかもしれません。これはあなたの保護とクライアントのためです。誰もが満足しているとき、「これは私たちがあなたに建設のために支払っているものです」と言う何かにサインオフさせます。
フロントエンド開発とUI-HTML、CSS、およびブラウザでの設計、Andy ClarkeのHardboiledテクニック。 Photoshopで多くの時間を無駄にすることにうんざりしているのは、より現実的な高速のモックアップを実演できれば、開発の有利なスタートを切ることができるからです。
4b。コードベース
あなたは最終的にいくつかの楽しみを持つようになります。あなたとクライアントにとって、セットアップを始める前に バージョン管理 を設定してください。バージョン管理を行っているので、先に進んで BUG TRACKING を設定する必要があります。
4c。コピー編集する
そのコンテンツを覚えていますか？コピー編集が必要なときです。私はこれを吸うので、他の人を雇うか、多くの人がそれを読むようにします。手順2で説明したキーワードがSEO用に最適化されていることを確認してください。私たちのコンテンツが素晴らしく、実際にそれらのキーワードに関するものである場合、これは自然に来るはずです。
5.ベータおよびUIテスト
あなたのサイトの前に座って、それを使い始めるために、本当の生きている呼吸する人間を手に入れてください。私は時々電話をしてくる母親を募集します プリンターが印刷されない理由を知りたい （最初にプラグインする必要があります）。これらの種類のユーザーは、もちろん上記の16歳の吹き出物に直面した子供の例を使用していない限り、サイトをナビゲートできる必要があります。
6.メンテナンスとSEOプラン
誰が戦うのを担当しているのかを知っていることを確認してくださいサーバーの獣。
1か月間、私たちが行った競合分析に戻って、サイトを分析したサイトと比較します。このデータを使用してSEOプランを作成します。いいえ スネークオイルSEO、 まだ生成している関連コンテンツを確認することについて話しています。とても素晴らしい）で、タイトルタグは本文と一致します。 SEOは、 Stack Overflow で、高品質のコンテンツを生成するために1,410万人のユーザーがいない限り、長いプロセスです。
質の高いコンテンツと「ハイフンでつながれたサイト」で見つけるものとの間には大きな違いがありますが、これはリンクしません。 （ノーフォロージュースがそれらに滴るのを防ぐため）。
7.起動
すべてが機能しますか？素晴らしさを構築するという使命は達成されましたか？打ち上げ計画を立てて実行します。
手順1〜6ですべてを正しく実行した場合 風になります ストライキなし あなたかもしれない 問題が発生します。準備を整えて、間違いを修正してください。
請求書を送り、すすぎ、繰り返します。
<!DOCTYPE html>で始めるのが好きです
真剣に...最初の優先事項：
- クライアントが望んでいるものを見つけてください。基本的なレイアウトの大まかなスケッチを描いたり、配色を付けたりしてください。
- 基本的なナビゲーションとレイアウトのモックアップ（静的）を行い、クライアントと協力して調整します。
- 実際の生産。 CMSおよび/または静的コンテンツを適切に取得します。クライアントと再度相談して、求めているものであることを確認し、CMSを処理できるか、CMSがニーズを処理できるかを確認します。
- クライアントが満足するまで3を調整して繰り返します。
- ????
- 利益！
答えのほとんどはすでに詳細に説明されているので、基本を書き直す時間を無駄にしないように、フレームワークまたはテンプレートを使用する必要があることを付け加えます。
そこには多くのPHPフレームワークがあります（ Kohana は私の個人的なお気に入りです）、または多くの人がWordpressをベースとして使用しています。また、CSSフレームワークを使用することもできます。多くの場合、最も人気のあるものの1つは 960グリッドシステム です。
ウェブサイトを設計するとき、通常どのように始めますか？
あなたのように、私は数年前にウェブ開発者/デザイナーとして自分自身を売り込む必要性を見出しました。私の出発点は自分の心で理解することであることがわかりました、私のウェブサイトを訪れる訪問者にどんな情報、画像、メッセージを提供したいですか？私のウェブサイトにアクセスしながら、ユーザーに達成/実行してもらいたいこと。
設計プロセスの理解がより明確になったことがわかりました。ホームページの要素とそれらのアイテムを伝える後続のページを書き留めることができました。
例えば、私は自分の履歴書を簡単に見つけてダウンロードできるようにすることに非常に熱心でした。それで、私のサイトを設計するとき、私は自分の履歴書とそれがどこで見つけられるかについての情報が容易に入手できることを確認しました。
物語の教訓は関連することです。あなたのウェブサイト上のすべてが目的を果たすべきです、さもなければ、それはただ不必要なノイズです。
まず、コーディングを開始する前に、基本的なレイアウトを紙に書いてデザインします。紙の上の基本設計を完了した後、モジュール方式で簡単にコーディングできます。Offcoursephp＆cssが最適な方法です。
私は常に、ある種のPhotoshopソフトウェアを使用してモックアップを作成することから始めて、サイト内のすべての画像を組み込むことができるようにします。