プロジェクトは通常、最初に（グラフィックで）構築または設計されますか？

Question

かなり大きなウェブサイトを構築しようとしているとしましょう。

すべてのページは作成される前に設計されますか、それともすべてのページはグラフィカルに設計される前に作成されて機能しますか？

私はプログラマーであり、グラフィックデザイナーです。新しいウェブサイトを構築するとき、私は通常、私が必要とするすべてのページとそれらがどのように機能するかについての大まかな概要を持っています。その後、通常はページの作成を開始します。ページを作成するときに、同時にグラフィカルインターフェイスを設計する傾向があります。

各ページは見栄えが良くなりますが、均一ではないため、これは悪いことだと思い始めています。または、それらが表示均一であっても、実際にはそうではありません。たとえば、ページAとページBの見出しは同じように見えますが、ページAの場合は50px marginオンの間ページB 50px padding。 ページAの見出しのスタイルは1つのCSSファイルで定義され、ページBの見出しのスタイルは別のファイルで定義されます。時間が経つにつれて、それは巨大な混乱になる可能性があります。

新しいアプローチが必要です。

この種のことがコード（DRY）で発生しないようにするために私が学んだ多くの方法があります。しかし、私はこの分野でそれらを適用する方法を本当に知りません。あるいは、私は現在、規律を持っていないだけかもしれません。

1つのアイデアは、プロジェクトの概要が完成した後、ビルドする前にすべてのページがどのように見えるかを示すグラフィカルなデザインを作成することです。そうすれば、ページを作成する前にスタイルを設計できるはずなので、作成時に重複するスタイル定義を導入することはありません。

問題は、HTML/CSSを使用してページをデザインする前に、Photoshopでページをデザインすることです。ただし、Photoshopで設計したとおりに動作するとは限りません。ページ上で正しく表示されるように調整する必要がある場合があります。必要な調整はページごとに異なる場合があります。これを前もって計画する方法がわかりません。

このようなものの通常のワークフローは何ですか？

user7519 · Accepted Answer

あなたが探しているのは Wireframing のアイデアです。

私は WireframeSketcher を使用して、私たちが取り組んでいるすべてのプロジェクトのすべてのグラフィカルコンポーネントで大成功を収めています。

Webサイト、デスクトップアプリケーション、モバイルアプリケーションのいずれであっても、ワイヤーフレーミングの手順は重要です。

次のステップは、誰かが実際にPhotoshopやその他のツールでグラフィックスやその他のことを行って、グラフィックス、色、フォントがどのように見えるかを示すモックアップです。

次に、モックアップから開発を行います。

jhocking · Answer

典型的なアプローチは、事前にワイヤーフレームを設計し（つまり、すべてのページの大まかなアウトライン）、開発者と設計者が並行して作業することです。

http://en.wikipedia.org/wiki/Website_wireframe

あなたの特定の問題については、ワイヤーフレーム間で一種の「デザインバイブル」を行い、何かを開発することをお勧めします。私が得ている用語は「デザイン言語」です。

http://en.wikipedia.org/wiki/Design_language

基本的に、いくつかの一般的なサンプルページを設計して、包括的なテーマと視覚的なルールを確立します（たとえば、パネルは常に丸い青い境界線で囲まれます）が、特定の機能にとらわれたり、特定のページを作成しようとしたりしないでください。その後、後で設計を決定するときに、これらの確立されたルールを参照できます。

JB King · Answer

私はサイトのミニバージョンを持っているという考えに行きます、例えば。わずか5〜10ページで、重複が何であるかを確認します。サイトを無駄のない状態に保つために、どのような単純化を行うことができますか？ DRYをサイトのHTML/CSSに適用できなかったのはなぜですか？

最初にすべてのページをいずれかの形式で実行しようとすると、私は圧倒される可能性があります。他のことに移る前に、どちらかをすべてやろうとするのではなく、それぞれを少しずつやります。これは、当初想定されていたものに変更が加えられる可能性があるため、時間の経過とともに他のものが追加される小さな実用的なプロトタイプを持つというアジャイルのアイデアです。

hotpaw2 · Answer

反復。

時々、アイデアについて話すためのデザイン、テストユーザーが作業要素を試して機能フィードバックを作成できるようにするための手っ取り早いモックアップ、そして魅力と使いやすさに関してさらに多くのフィードバックを作成するために再度デザインすることを交互に行います。すすぎ、繰り返します。

Subu Sankara Subramanian · Answer

プロジェクトを大きなメタブロックに分割します。
全体的なインターフェースを定義します。
すべての機能/スケール/同時実行性の要件を備えていない、これらすべてのボックスの小さなプロトタイプバージョンを構築します。
上にUIを構築します。 UIの場合、ワイヤーフレームはどのような方法でも機能します。Visio/ PPT/mspaint（gulp！）を使用してワイヤーフレームを作成しましたが、これらはすべて初期起動の問題を解決しました。
何かを立ち上げて実行したら、繰り返し対話/改善します。

それがIMOの最良の方法です。