より効率的にウェブサイトを構築する方法
公開: 2021-07-19私たちの主任開発者は、ウェブサイトを効率的に構築する準備をし、プロジェクトの肥大化を回避するためのヒントを共有しています。
他のプロジェクトと同様に、準備は成功への鍵です。 ここでは、プロジェクトを確実に成功させるために使用する主要なプロセスのいくつかを共有します。
開発キックオフ
新しいWebサイトのコーディングに直接取り掛かる前に、開発チームと30〜60分座って計画を立てることをお勧めします。 理想的には、製品の所有者が会議に出席して、質問に答える必要があります。 彼らはおそらくすべてのクライアントミーティングに参加し、ユーザージャーニーと機能の観点からサイトが何を達成すべきかについて他の誰よりも深い知識を持っているでしょう。
うまくいけば、あなたは前もってデザインを見たことがあるでしょう。 このセッションを使用して、発生した問題を特定し、それらをどのように解決するかについてチームと話し合うことをお勧めします。 たとえば、デザイナーが前回の反復以降にオフキャンバスフライアウトメニューを選択した場合、それをどのように作成するかについて話し合うことができます。 チーム内の誰かが以前に作成したことがあるので、彼らが仕事を引き受けることができるかもしれません。
デザインを印刷する
この種の作業は開発のキックオフと密接に関連していますが、この段階では実際にはフロントエンドの開発チームのみが関与する必要があります。
これは、サイトの構築に着手する前に実行するのに適したステップだと思います。印刷物をレイアウトして、全体像をより明確に把握できるからです。 Sketch、Photoshop、Invisionなどのアプリケーションを使用してこれを簡単に行うことはできません。 すべてのデザインを表示するには、これまでズームアウトする必要があります。または、ブラウザウィンドウごとに1つのページテンプレートしか表示できない場合があります。
触覚形式でWebページを表示すると、別の視点が得られ、他の方法では見逃す可能性のある要素に焦点を当てることができます。 注釈を付けることができることも役に立ちます。
ここハラムでは、プリントアウトに注釈を付け、それを使用して作業負荷を分散し、ホワイトボードに貼り付ける傾向があります。 その後、ビルドプロセス全体の後続の会議でそれらを参照します。 テンプレートが作成されてサインオフされると、ホワイトボードから削除されます。これにより、作成する必要があるものが明確に表示されます。
もちろん、印刷の量を最小限に抑える必要があるため、デザインが完了したら、必ずごみ箱を使用してください。
共通の要素を特定する
ここハラムで採用した原則の1つは、作成するすべてのデザインを完全にオーダーメイドのテンプレートで作成するべきではないということです。 代わりに、個別に作成して、必要な場所でテンプレートに挿入できる共通の設計要素を共有する必要があります。
ページテンプレートにカスタム要素を含めるべきではないと言っているわけではありませんが、これは必要な場合にのみ当てはまります。 たとえば、ラジオインタビュートレーニングページとテレビインタビュートレーニングページのあるWebサイトは、どちらも本質的に「トレーニングテンプレート」ページである場合、2つのテンプレートは必要ありません。
共通の要素はまた、人々が毎回発見する新しいものに襲われることがないため、より良いユーザーエクスペリエンスを生み出します。
サイトのすべての主要な要素を理解したら、それらをホワイトボードに書き込んでチケットを作成し、さまざまなチームメンバーに割り当てることができます。 次に、ページをまとめるときに、さまざまな部分をテンプレートに「スロット」して、はるかに迅速に作成することができます。
最初にビルドしますか、それともスタイルを設定して一緒にビルドしますか？
これは私たちが過去に実験したものであり、現在、テンプレートの作成とスタイル設定を同時に行っています。
以前は、cssをまったく使用せずに（BootstrapまたはFoundationのいずれかに関連付けられたレイアウトスタイルを除いて）、すべてのページテンプレート構造と要素を構築していました。 次に、サイト全体を構築したら、すべてのテンプレートと要素を調べてスタイルを設定します。 この方法は、生産ラインの観点からは確かに理にかなっています。 シャーシに取り付け、エンジンを挿入し、すべての備品を取り付ける前に、車のボディワークをペイントすることはありません。 この方法では、機能とスタイルを分離します。 最初のビルドフェーズでは、サイトがどのように見えるかを検討する前に、機能の観点からサイトが機能することを確認することに関心があります。
代わりに、出荷可能な製品を作成できるように、「設計と構築」キャンプに切り替えました。 言い換えれば、サイトが機能し、見栄えが良いので、どの段階でもライブに移行できます。 実際には、「デザインとビルド」の方法を使用すると、スタイルを設定せずにテンプレートをビルドできますが、レイアウトが完了したらすぐに、テンプレートを調べてスタイルを設定します。 それを片側に駐車して、次のテンプレートの作成に取り掛かる必要はありません。
ベーシックキッチンシンク
これは、「設計と構築」の方法に適合するものです。 これには、タイポグラフィ、サイトブランドの色の追加、マスターsettings.scssファイルへのボタンスタイルの追加など、いくつかの要素のスタイル設定が含まれます。 これらの要素のスタイリングがサイトにすぐにできることは驚くべきことです。 すぐにFoundationの定型サイトのように見えなくなったWebサイトができ、おそらく30分かけていくつかのCSSルールを作成するだけで、実際の進歩を実感できます。
サイトを組み立てる
私の個人的な好みは、ヘッダーとフッターのスタイルを早い段階で設定することです。これは、サイトのフレームを作成し、サイトのスタイル設定と構築を継続するためのキャンバスを作成するのに役立つためです。 これにより、サイトが完成品のように見えます。 ただし、出荷可能なサイトには、スタイルが設定されていないが機能しているナビゲーションとフッターを含めることができます。
結論
PhotoshopからビルドプロセスにWebサイトのデザインを組み込む方法については、私たち全員が独自のアイデアを持っています。上記は、たまたま私たちがやりたい方法です。
私が本当に信じていることの1つは、開発環境を開放する前に計画を立てることです。 あなたが一人で働いているフリーランサーであろうと、計画を立てている大規模な開発チームの一員であろうと、より効果的かつ迅速に働くための確実な方法です。
Web開発についてサポートが必要な場合は、遠慮なくお問い合わせください。