プロジェクトを何回終えましたか。振り返って、「もし私が時間を遡って、今知っていることでもう一度やり直すことができれば！？」と言うだけです。少なくとも私はそれについて考えました。

それは私たち全員に起こります。私たちは新しいプロジェクトに興奮しています。現在のウェブサイトについてクライアントと冗談を言い、契約書に署名してから、計画とプロトタイプを開始します。小さなプロジェクトになると、これらのタイプの戦略が機能する可能性があります。しかし、大きなプロジェクトになると、最初のプレゼンテーション後の突然の成長と計画外の変化。そして、プロジェクトを終了すると、おそらく修正するはずだったもののように見える目障りになってしまうでしょう。これだけが元のプロジェクトよりも少し良く見えます。

Excelのパワーピボットとは何ですか

優れたワークフロー設計は、優れた計画プロセスから始まります。 つぶやき

良いデザインと 優れたユーザーエクスペリエンス それらは、魅力的なプロトタイプやモックアップ、または青写真からではなく、会社の目的に焦点を当てた概念的な基盤から始まります。そして、それらの目標は「よりシンプルで美しいウェブサイトを作ろう」ではありません。あなたが責任があるので UX Y 玉ねぎ （ユーザーエクスペリエンスとユーザーインターフェイス）、したがって、ユーザーが設計されているインターフェイスで最高のエクスペリエンスを確実に得られるようにする必要があります。そしてこれを達成するために、あなたは最初から徹底的に計画しなければなりません。

Webページデザインの初期調査

一度の最初の調査 顧客フィールド と彼の コンペ 、次のことは何から始めるべきかを知ることです。この分析には別の価格を設定できます（これは最終的なプロジェクト見積もりに含まれます）。これにより、後で出てくるアイテムを含むことになっている高くて曖昧な引用を避けることができます。

例として扱われるクライアントは、考古学の分野の非営利団体です。同社は、国の南西部にある遺跡を探索して保護しています。現在、ウェブサイトはひどくまとまりがありません。古いcmsポータルで山や大まかに整理されたコンテンツの山を想像してみてください。これを念頭に置いて、最初のステップはコンテンツを整理することです。

ステップ1：コンテンツをよく理解する

あなたが新しい家を建てるとき、あなたは最初にその中にあるものを取り除くことなしにすべての壁を崩壊させません。最初の目的は、すべての部屋の中に入って、すべての内容物を取り除くことです。 Design Speakでは、すべての入力に移動して、静的にする必要がある入力と、ポストタイプにするマテリアルがある入力を決定する必要があります。

情報を持っていると、サイトをより適切に整理するための戦略を立てることができます。原則として、何を明確に排除すべきか、何を排除すべきでないかは検証されていません。現実の世界では、このように機能していないためです。コンテンツが多いため、ポータルの各部分は作業チームに割り当てられます。すべてを最初にランク付けするのが最善です。

通常、メインページから始めて、残りのページを分析します。このように、私は最初の会議の前にウェブサイトの概要を持っています。これは私たちがここに持っているプロジェクトには当てはまりませんでしたが、なぜほとんどのリンクがコンテンツに隠されていて、ポータルの最初のナビゲーションでアクセスできなかったのですか（プロジェクトの見積もりがメインナビゲーションまたはメインに基づいている場合）ページ、これはあなたがそれを後悔する瞬間になります）。クライアントのチームのさまざまな人に話しかけたら、状況を明確にして続行することができます。

結局のところ、解決策はクライアントと話し、ブレーンストーミングセッションを行うことでした（ ブレーンストーミング ）。このセッション中に、クライアントはWebページの特性、コンテンツ、ワークフロー、および焦点を特定するように求められました。その後、次の核が確立されました（ コアタイプ ）、いくつかは新しく、いくつかはすでに確立されています：

このプロジェクトの最も難しい部分は、リンクが一見利用できなかったが、サイトのコンテンツ内に隠されていたことです。そして、クライアントとそのチームが話し合われたら、プロジェクトを継続することができます。

ステップ2：焦点の作成、簡素化、組織化

家の内容が家の外にあり、パッケージ化され、ラベルが付けられているので、より良いスタイルを持ち、より良い方法で内容を表示する新しい家の計画を立てる時が来ました。ただし、そこに到達する前に、フォーカスを作成する必要があります。

クライアントによると、ウェブサイトにアクセスするユーザーは、研究プロジェクトなどの考古学に関する情報を求めたり、今後のイベントを見たり、月刊誌を読んだりします。これらはユーザーが最終的に到達するコンテンツ領域ですが、Webサイトはそれらを中心に展開していません。ポータルの焦点を見つけるには、組織の中核に注意を払う必要があります。

「場所」はコンテンツの中心にあると定義されました。場所や場所がなければ、遺跡、遺跡、美術館、展示会は存在しません。本質的に、考古学は場所を中心に展開しています。

焦点を合わせたら、単純化して整理します。以下は、チームページや年次報告書など、場所に関係のないサイトから取得したコンテンツです。コンテンツを並べ替えて分類した後、次のマップが取得されました。

llc accorpです

これで、「やること」と「場所」の2つの主要な領域ができました。 「やるべきこと」では、組織に関係するすべてのトピックがカバーされ、「場所」では、特定の場所に関連するコンテンツがカバーされます。平均的なユーザーは、ビデオやプロジェクトの名前を知らないかもしれませんが、それが開発された場所を知っているかもしれません。たとえば、プロジェクトセクションでは、ユーザーはその場所から興味のあるものを見つけることができます。

また、投稿の種類ごとに色があります。組織的な観点から、オンラインイベント、展示会、クラス、および展示会はすべて本質的にイベントであり、異なるタイプのみがあります。

現在のサイトには、雑誌用の静的ページとストア用の静的ページがありました。店に行くという余分なステップを排除し、代わりに店に雑誌記事のテンプレートを用意することが決定されました。残りは簡単です：組織に関する情報を含むページ、ストアへの直接リンク、寄付ページ（これらのページが利益を生み出し、メインブラウザーにセクションが必要な理由）、更新用の新しいページ、ストアへの直接リンク/寄付。それらのページはお金を稼ぐので、メインナビゲーションの場所に値します。これでプロジェクト計画が完成し、コンテンツをそれにリンクする時が来ました。

ステップ3：クライアントをループする

上に表示されているサイトマップには、ページタイプが含まれていますが、コンテンツマップは含まれていません。ご存知かもしれませんが、ほとんどの問題は、顧客がサイトにコンテンツを追加し始めると発生します。この状況を回避するために、最初からクライアントとのループが作成されます。次に、私たちが持っているサイトマップを使用してGoogleドキュメントを作成し、それをクライアントに送信して、現在のコンテンツとは何か、新しい構造にどのようにマップするかを伝えます。

何かが合わない場合は、後で解決できます。これは最も重要なステップの1つです。これは、お客様が関与するだけでなく、実装を開始する前に構造に関する問題についても通知するためです。私たちが扱っているプロジェクトでは、サイトマップのいくつかの要素がメニューに関して変更されていることがわかりました。クライアントはいくつかの寄付ページを持っていたので、解決策は彼らのためにユニークな投稿を作成することでした。

ワイヤーフレーミングによる視覚的構造の​​作成

次に、サイトの視覚的な構造を作成します。システム機能が正常に機能し、「場所に関連するすべて」のアイデアを実現するために、さまざまなタイプの投稿の間に双方向の関係が作成されました。

独自のプログラミング言語の作り方

アイデアは次のとおりです。訪問者が遺跡に到着してグランドキャニオンを選択すると、その場所に関する情報が表示されるだけでなく、イベント、プロジェクト、展示会など、クライアントが関連してリンクしているものもすべて見つかります。グランドキャニオンのページへ。そして、私たちは次のようなものになります：

場所のインデックスページには、最新の場所が上部に表示されます。検索バーは、ユーザーがページに入るときに最初に表示されるものです。ユーザーがサイトに入ると、画面の80％でGoogleマップを見ることができます。ユーザーがサイト上のポイントを選択するか、ページを表示すると、リストのネットワークが表示され、検索が容易になります。

個々の場所のページでは、メインナビゲーションは最も関連性の高い情報であるため左側に表示され、場所に関連するメタ情報は右側に表示されます。計画を設計するとき、適切な構成を取得するには、一次、二次、および三次要素の明確に定義されたブロックが必要です。したがって、人間の目は、単一の要素にとらわれることなく、それぞれを追跡します。

このレイアウトでは、ユーザーはサイトのヘッダーから開始し、次にコンテンツブロック、次に右側の情報に進みます。関連する各コンテンツセグメントは、関連性と重要性の順に表示されます。たとえば、ユーザーがグランドキャニオンについて読んでいる場合、この後に写真と場所の地図が続く可能性があります。

このサイトは本質的に教育的なものなので、「この場所に関連する」は後で来るでしょう。顧客は各場所に関連付けられた固有の情報をあまり持っていないため、ほとんど使用されていないコンテンツは、サイトメニューの下の固有のブロックに結合されました。

雑誌やビデオのサムネイルを関連コンテンツに配置すると、視覚的な要素が追加され、ユーザーは「購入」ページに移動します。このページは、ユーザーがWebサイトを閲覧し続けるように促すため、場所を表示することによって作成されます。

次のステップは、他のタイプの投稿に対してこの構造を継続することです。それらのいくつかを次に示します。

投稿タイプの一般的なモデルができたので、メインページに集中できます。他のユーザーインターフェイスと同様に、最初のステップはホームページの目標を達成することです。顧客調査によると、多くのユーザーがサイトの内容を完全に理解せずにサイトに出くわしました。したがって、紹介とウェルカムテキストは、ユーザーが最初に目にするものでなければなりません。新しい中心的な焦点は場所を中心に展開し、これは2番目のブロックであり、ArcheologySouthwest.orgで起こっていること（現在の雑誌、ブログ、イベント、ニュースなど）がそれに続きます。これは、設計プロセスの反復です。

V1では、最初のページに似た基本的なレイアウトが作成されました。階層はあまりありません。ユーザーが最初に目にするのは注目の場所であり、その後、列で迷子になります。 V2では、フォローしやすいように別の列が作成されました。ただし、まだ改善の余地があります。ここで、コンテンツの知識が重要な役割を果たします。 ArcheologySouthwest.orgでは、一度に2つ以下のイベントが発生することが知られているため、ホームページに多くのイベントを表示しても意味がありません。 V3では、今後のイベントに焦点が当てられているため、2つ以上になる場合は、ユーザーは[詳細]ボタンをクリックして残りを表示できます。現在の雑誌は顧客の資金源であるため、さらに重点が置かれました。ユーザーは上から始め、Fパターンを使用して下に移動します。だから今、目の流れは場所>ようこそ>雑誌>イベント>ニュースです。

レガシーシステムからのデータ移行

視覚的なワイヤーフレームとサイト構造ができたので、機能と物事の仕組みを固めるのがはるかに簡単になります。クライアントとの別のミーティングがあり、実際の機能（現在明らかになっています）とユーザーインタラクションのフローを確認します。最終的にはまだ調整があることが知られていますが、それは調整のみであり、プロセス全体の変更ではありません。最も重要なことは、驚きがないということです。

Webページのデザイン

さて、エキサイティングな部分です。ワイヤーフレームを、人々が使用して評価するものに変換します。このデザインで、彼らは色付きのマーキングとタイポグラフィを使用して、流れをさらに強化したいと考えていました。クライアントのスタイルガイドは次のとおりです。

タイポグラフィから始める

タイポグラフィは優れたデザインの基盤であり、それが最初から決定された理由です。そのアイデンティティのほとんどは、Univers CondensedLightフォントとAdobeCaslonフォントを使用しています。 Adobe Caslonをいつ使用するかについての規則はありませんでしたが、Universeほど頻繁には使用されないことが指摘されました。現在の保証と何ら変わらないように見えることなく、どの継ぎ目が謙虚でプロフェッショナルな非営利団体に最適な環境を作り出したかを確認するために、小規模なタイポグラフィ調査が実施されました。

書体の比較を行う場合、Adobe Caslonがタイトルフォントとして、Universeが字幕として優れた仕事をすることは明らかです。メインタイトルを大文字にすることで、ブランドはよりパーソナルな雰囲気になります。すべてを大文字にすることで、考古学は企業体のように感じられます。

主な見出しにはAdobeCaslonを使用し、その他すべてには現在のブランド保証に一致するようにUnivers CondensedLightを使用します。

ウェブサイトの外観を作成する

彼らは、この非営利組織が冷たくて企業的でなくても彼らを真剣に受け止めていると感じるべきであるユーザーのために、軽くてオープンな体験を作りたかったのです。

分析データに基づくと、訪問者の大多数はデスクトップコンピューターからアクセスしているため（おそらくほとんどの人がサイトにアクセスして調査を行っているため）、最初はデスクトップコンピューターのユーザー向けの設計に重点を置いていました。これが最終的な設計であることが判明しました。

デスクトップコンピューターからログインするとき、私はユーザーに、注目の場所、ウェルカムテキスト、今後のイベント、それに続く雑誌のタイトルの一部をすぐに表示してもらいたいと思いました。このようにして、ほとんどのポータブルデバイスでスクロールする前に、会社が何をしているのか、何を宣伝しているのかを知ることができます。左側の列にソフトシャドウを使用すると、注目度が高まり、階層が固まります。

モバイルデバイスでは、ユーザーが外出先で情報にアクセスできるため、優先順位が少し異なります。イベントはより重要であり、したがってリストの上位にあります。完全なレイアウトは次のように終了します。

フッターの寄付ボタンをボタンではなく文に変更することで、より率直になるように更新しました。

休息の創造

このデザインコンセプトは、他のデザインにも同じように適用できます。

llc s corp c corp

ユーザーが詳細ページにアクセスする理由は2つあります。ランドマークについて詳しく知りたい場合と、この場所について既に知っていて情報（住所、電話番号など）のみを探している場合です。したがって、ユーザーが検索に時間を浪費しないように、両方のオプションをすぐに提示することが重要です。

データ列をコンテンツ領域から切り離して、ページの重みを高め、ページをより面白くすることが決定されました。これにより、ユーザーがページにアクセスしたときに最初にタイトルが表示され、次にギャラリー画像と下のメタ詳細列が表示されるように、構成階層を作成できます。これにより、追加のメタ情報にすぐに気付くことができます。少し余分なスプルースアップを行うと、目が離せなくなり、情報を簡単にめくることができます。

クライアントは、各場所に関連する多くのビデオや雑誌を持っていないので、記事のみを表示し、他に何かがある場合は、リンクをクリックできます。モバイルビューは予想どおりに折りたたまれ、コンテンツが最初に表示され、次にメタ情報が表示されます。ビデオや雑誌は、モバイルユーザーにとってそれほど重要ではないため、モバイルページで最後に作成されました。他の内部セクションは、これと同じ構造とワイヤーフレームに従って、優れたエクスペリエンスと一定のフローを作成します。

設計プロセスを振り返ると、ほとんどの時間が組織化と計画に費やされたことがわかります。時間の30％だけがデザインに費やされましたが。多くの場合、デザイナーは自分の作品を見せますが、派手なモックアップを作成するのではなく、Googleドキュメントの整理にどれだけの時間が費やされているかについて不誠実です。他の多くの設計者はモックアップに直接飛び込み、プロジェクトの失敗や顧客の不満に終わります。計画を立てる方法は1つではありません。プロジェクトを成功させるには、計画を立てる必要があります。あなたのプロセスがどのようになっているのか、またはどのように異なっているのかについてコメントを残してください-他の人のワークフローを見るのは興味深いでしょう。