Diviの設計および開発プロセスの改善と標準化

公開: 2017-06-02

私たちのシリーズのパート4へようこそあなたのDiviWebデザインビジネスの組織化と管理。 このシリーズでは、Divi Webデザイナーとして私たち全員が直面する日々の苦労を克服するのに役立つ、いくつかの戦術、ツール、および戦略を探求しています。 日常業務の最適化から、システムとプロセスの作成、クライアントに最高のWebデザイン体験を提供することまで。 私たちは、あなたが一人のフリーランサー、小さなエージェンシー、またはリモートチームであるかどうかにかかわらず、Divi Web Designビジネスの管理を支援する目的で、すぐに実装できる実用的なアイテムとステップを提供します。

Divi Webサイトを設計および開発するための標準化されたプロセスを作成することは、Webデザイナーとしての生産性と幸福にとって非常に重要です。 ウェブサイトのデザインプロジェクトが計画どおりに進むことはめったにありませんが、固執するプロセスとパスがあれば、かなりの時間を節約し、プロジェクトが足を伸ばしたときに締め切りに間に合わせることができます。

Diviの設計および開発プロセスの改善と標準化

昨日、クライアントの準備に役立つスタートページの作成に関する以前の投稿を参照しました。 その投稿では、新しいクライアントにプロセスを提示する方法について説明しました。 クライアントにプロセスを提示する方法は次のとおりです。

  1. レイアウトとデザイン– Webサイトのデザインの大部分で時間のかかる部分は、プロセスの計画とレイアウトの段階にあります。 最初に承認用のWebサイトのサイトマップ（ページ/メニュー階層）を作成し、次に承認用のホームページとサブページ（または要求に応じてそれ以上）を設計します。
  2. 開発–サイトのレイアウトとデザインが承認されたら、サイト全体、ページのデザインを進め、すべての機能とプラグインを追加します。 最終ステップに進む前に、サイトの見栄えが良く、すべてのデバイスとWebブラウザーで適切に機能することを確認します。
  3. 編集と改訂–サイトが最終レビューの準備ができたら、各ページをレビューできるようになり、サイトが完全に改訂されるまで詳細な編集を行うことができます。 公開する前に、すべてのページを確認して、すべてのスペル、文法、住所、および情報が正しいことを確認してください。

今、あなたは仲間のWebデザイナーとして、単純な3ステップのプロセスよりもWebサイトの設計と開発に多くのことがあることを知っています。 私のプロセスは実際には20ステップ以上のプロセスですが、クライアントに関係するすべてのことで過負荷をかけると、コンテンツの提供に関してクライアントが物事を考えすぎてしまうことがよくあります。 これが私のDiviWebデザイン/開発プロセスが実際にもう少し詳細にどのように見えるかです：

  1. 承認のためにページとナビゲーションのレイアウトを作成する
  2. ヘッダーとフッターの設計
  3. ホームページのデザイン
  4. 設計されたサブページ
  5. 承認のためにクライアントに送信する
  6. ヘッダー、フッター、ホームページ、サブページの改訂
  7. 承認されたら、残りのページを作成します
  8. ウェブサイトの標準化されたセクションや、ギャラリー、プロジェクト、製品などの定期的なページのテンプレートを作成します
  9. メールリストのサインアップ、ソーシャルメディア、ウィジェットなどのすべての統合を実装します
  10. すべてのお問い合わせフォームを作成してテストします
  11. モバイルおよびレスポンシブな使用のために設計を調整および最適化する
  12. 必要なSEO設定を入力する
  13. サイトの文法と内容を再確認してください
  14. クロスブラウザチェックとバグ修正
  15. 最終レビューのために送信
  16. クライアントの最終的な改訂をすべて行う
  17. クライアントのカスタムダッシュボードとトレーニングビデオを作成する（必要な場合）
  18. 不要なプラグイン、画像、ツールを削除する
  19. サイトをバックアップしてローカルに保存
  20. 打ち上げサイト

このプロセスは多くの場合、さらに詳細に分解されますが、これは、5ページのパンフレットスタイルのサイトであろうと、イベントやeコマースなどを備えた50ページのサイトであろうと、私のビルドすべてに関係するすべての基本構造です。これらすべてをチェックリストとして使用します。サイトを立ち上げる前に、見落としがないことを確認することをお勧めします。 このようなチェックリストを作成し、それに合わせてタイムラインを設定することは、設計/開発プロセスがプロジェクトの期限に沿っていることを確認するための非常に効率的な方法です。

さて、私が内部の設計/開発プロセスをどのように編成したかがわかったので、DiviWeb設計プロセスを最適化する方法についてもう少し詳しく見ていきましょう。

1）標準設計プロセスの作成

私がDiviFacebookグループで目にする最もよく繰り返される質問と議論の1つは、 「Diviサイトをどのように設計しますか？」という効果をもたらすものです。 PhotoshopまたはIllustratorでモックアップしますか？ クライアントが承認するための基本的なワイヤーフレームを作成しますか？ あなたはただDiviに飛び込んで、それを生きていますか？

もちろん、これを行う正しい方法も間違った方法もありません。 設計プロセスをどのように選択しても、次の3つのことを行う必要があることがわかりました。

  1. それはあなたやあなたのチームのために働く必要があります
  2. それはあなたのクライアントのために働く必要があります
  3. それはあなたの時間を節約する必要があります

新しいプロジェクトを開始するとき、私は紙に非常にラフなスケッチを作成し、Diviに飛び込んで、ヘッダー、フッター、ホームページ、および最初の承認に必要なサブページをデザインする傾向があります。

理由は次のとおりです。

  • それは私のために働きます–伝統的に、ウェブデザインは紙またはAdobe Illustratorなどのプログラムを介した広範なワイヤーフレームプロセスから始まり、オンラインになる前にクライアントをデザインして承認のために表示します。 この方法は一部の人に有効であり、チームに所属していて、設計を開発者に渡してコーディングする場合は特に、非常に効率的なルートになる可能性があります。 しかし、Diviが登場すると、私のプロセスは完全に変わりました。 基本的な構造と視覚的な概念を頭の中に、そして紙の上に置いた後、私は今すぐDiviに飛び込みます。
  • それは私のクライアントのために機能します-クライアントは、フラットなモックアップよりもはるかに多くのブラウザで見ることができる実際のライブプレビューを見るのが好きであることがわかりました。 1ページのモックアップでサイトの流れや感覚が失われることがありますが、クライアントがサイトをブラウザでライブで見ると、はるかに大きな「すごい要素」につながることがよくあります。 彼らは、ホバーオーバー、スクロール効果、サイトデザインの流れを見ることができます。これにより、第一印象が良くなり、編集や改訂が少なくなることがよくあります。
  • 時間の節約になります。CSSと保存したレイアウトと設定をDiviですばやく変更できるので、フォトショップやイラストレーターでこれらの修正を行ってから、スタイルシートとDiviの設定で同じものを複製する必要はありません。 Divi開発サイトで直接inspectelementを使用してライブで作業を行うことにより、改訂と初期設計で大幅な時間を節約できます。 また、クライアントと電話をしているときに、サイトを頻繁に変更したり修正したりすることもできます。 クライアントがいくつかの変更を要求し、電話中にまたは数分でそれを実行すると、本物のWebデザイナーのロックスターのように見えることがあります。

繰り返しになりますが、このデザインプロセスは、私がワンマンショップとして機能するものです。 チームでは、プロセスは関係するすべての人のために機能する必要があります。 しかし、ほとんどのフリーランスのWebデザイナーはデザイナーと開発者が混在しているため、自分に合ったプロセス、クライアントに合ったプロセスを実行して、時間を節約できます。

2）Diviライブラリと以前の作業を活用する

Diviの私のお気に入りの機能の1つは、レイアウトとページデザインを保存する機能です。 この機能はゲームチェンジャーであり、Diviを使用して設計および開発する際の時間を大幅に節約できます。 最近のDiviChatのエピソードでは、パネルはページデザインの複数のテンプレートを保存し、新しいサイトで使用しないテンプレートを削除することについて話します。 時間を節約する方法について話してください！ 一連のページレイアウトとページテンプレートを思い付くことができ、コンテンツ、色、画像をインポートして変更するだけでよい場合は、潜在的な設計と開発の時間を節約できます。

Divi Libraryのアイテムと以前の作業を保存する際に、私が提供する3つの簡単なヒントを次に示します。

  1. CSSを保存する–他のサイトで模倣したい特定のモジュール、ページセクション、クラス用に作成したCSSコードの大部分を含む「マスタースタイルシート」があります。 そうすれば、それを開いて、現在のプロジェクトで使用したいコードをプルできます。 CSSの行を何度も書き直す代わりに、時間を節約できるのは不思議なことです。
  2. Diviライブラリアイテムの作成–レイアウトをライブラリアイテムとして保存すると、作業内容をページに保存したり、複製して画像や色で簡単に変更できる完全なサイトとして保存したりできます。 これを行う方法がわからない場合は、このチュートリアルに従ってください。
  3. jsonファイルのエクスポート–以前のサイトのページを参照するクライアントがよくあるので、最初からページを再作成する代わりに、古いサイトからそのページをエクスポートして、新しいサイトにインポートし、それに応じてスタイルと画像を調整してください！ 繰り返しになりますが、Diviが設計および開発プロセスの時間を節約するもう1つの優れた方法です。 慣れていない場合は、ここで詳細を確認してください。

3）クライアントにあなたのウェブサイトを明らかにする

これは私の意見では、ウェブデザインの最も重要でありながら見過ごされ、過小評価されている側面の1つです。 第一印象と、クライアントがあなたの新しいデザインを見たときに最初に考えることには、多くのことがかかっています。 モックアップやワイヤーフレームを作成する場合、クライアントが完全に理解できるライブバージョンをオンラインで見るまで、当然のことながら第一印象は少し圧倒されます。また、設計から開発までのプロセスの複雑さによっては機能する場合があります。 上記のプロセスで見たように、私はヘッダーとフッターを準備し、プロジェクトのニーズに応じて通常1つ以上のサブページとともにホームページを完全にデザインし、レビューのために送信します。 ただし、クライアントへの最初のデザインの送信方法は最近変更され、大きな効果があります。

以前は、ライブ開発リンクを送信するだけで、クライアントが自由にサイトを表示できるようになりました。 これはかなりうまくいきましたが、直接またはSkypeでプレビューを行うというまれなチャンスがあり、それらの第一印象はさらに良くなりました。その理由は何ですか。 クライアントがサイトを見たときに私のビジョンを聞くことができ、彼らが最初に自分で判断することなく、デザイン、色、美学のアイデアを説明することができたからだと思います。

今、私はサイトを歩き回っている私の簡単な（通常5分未満）プレビュービデオを作成します！ これは、これまでのところ圧倒的に肯定的なフィードバックで受け取られています。 少し時間がかかりますが、クライアントから素晴らしい第一印象を得るのは価値があると思います。

Basecampのクライアントに新しいサイトを披露する方法のスクリーンショットを次に示します。

ウォークスルービデオをScreenflowforMacで録画します。 次に、ビデオをVimeoチャンネルにアップロードして、プライベートビデオにします。 そこから、上のスナップショットでわかるように、そのビデオリンクを、簡単な説明、次に期待するものの箇条書きリスト、およびクライアントがブラウザーに表示する開発サイトの実際のURLとともにクライアントに送信します。彼らがビデオを見た後。

新しいサイトをクライアントにどのように提示するかを知りたい場合は、最近のプレビュービデオをいくつか紹介します。

ウェブサイトプレビュービデオ1

ウェブサイトプレビュービデオ2

4）改訂と編集の処理

最後に、設計および開発プロセスの主要な部分は、クライアントの改訂および編集をどのように処理するかです。 あなたが長い間ウェブサイトをデザインしているなら、あなたはこのプロセスが時間がかかることがあることを知っています。 ここでほとんど変更を加えずに直接会う、長時間の電話、ランダムな電子メールを送信するか、編集および改訂プロセスで多大な時間の浪費が発生する可能性があります。

これに対抗する方法はいくつかあります。 私はすべてのクライアントに、リビジョンのディスカッションを作成するBasecampにすべてのリビジョンを（必要に応じてページごとに）投稿してもらうようにしています。 私は必要に応じて電話または直接会うことに同意しますが、最初の変更が最初に受け取りたい方法で送信された後でのみです。 また、電子メールで複数日にわたって一度に1つずつリビジョンを取得したくないことを非常に明確にしています。 可能であれば、数日かけて収集して一度に投稿するか、クライアントの多くがやりたいと思われるように、すべてを.docまたは.pdfに整理するようにクライアントに指示します。

このシリーズの前の投稿とArtilleryMediaの人たちとの私の話に戻ると、彼らは改訂のための非常に合理化されたプロセスを持っており、クライアントはGoogleドライブのドキュメントで編集を送信する必要があります。一斉に。 これも大幅な時間の節約になります。 ここでの秘訣は、編集と改訂のプロセスを可能な限り時間を節約する方法で機能させることです。 そして、アドバイスの一言ですが、各クライアントには独自のやり方があるので、改訂や編集をどのように行うかについてクライアントをガイドするのはあなたの仕事です。

最後に

標準化されたプロセスがまだ整っていない場合は、これらのアイデアと私の設計/開発プロセスによって、独自のアイデアを作成するように促されたことを願っています。 うまく機能するプロセスがある場合は、以下のコメントでお気軽にお知らせください。

次のステップ：複数のDiviWebデザインプロジェクトを効果的に管理する方法

複数のプロジェクトが進行中の場合、創造性を維持し、期限を調整し、クライアントの期待に応えながら、すべてを管理することは困難です。 このシリーズの最後の投稿では、すべてのDivi Web Designプロジェクトを効果的に管理して、新しいクライアントのオンボーディング、設計、開発、および設定した期限の遵守のバランスをとることができるいくつかの方法について説明します。ヒットするために。 創造的で新鮮なままです。 それまで！

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。