1人のフロントエンドエンジニアが2人のチームを置き換える方法

公開: 2022-03-11

二心で考える

Webデザインシーン内の需要は過去数年間で変化しました。フロントエンドスキルを持つデザイナーとデザインスキルを持つフロントエンド開発者の需要はますます高まっています。 はい、あなたは仕事が完全に異なっていると主張することができます-そしてあなたはそれらの1つが好きではないかもしれません-しかし真実は言われます、フリーランスのウェブ開発者としての私の6年間とデザイナーとしての12年間で、私は両方の役割を知っているフロントエンドエンジニアとしてよりも、単なるWebデザイナーまたはフロントエンド開発者としてやっていくのははるかに難しいことを学びました。

両方の帽子をかぶることには多くの利点があります。プロの観点からだけでも、より多くのことをテーブルに持ってくるので、仕事をより簡単に見つけて、より高い料金を請求することができます。

ただし、ハイブリッドフロントエンドエンジニアとして作業することには、知っておく必要のあるいくつかの欠点と、それらを回避する方法もあります。 クリエイティブデザイナーは、視覚的、空間的、知覚的な情報、つまりWebデザインのすべてを担当する「右脳」を使用します。 技術的なフロントエンド開発者として、右側のクレイジーなアーティストの論理的かつ分析的なパートナーである「左脳」を使用します。

そして、あなたはたった1人なので、これは、同じ脳で2つのまったく異なる仕事を同時に行っていることを意味します。これは、脳を完全に混乱させる可能性があります。 あなたがそれを扱うことができないならば、あなたは質の高い仕事を生み出すことも、あなたの潜在能力を最大限に発揮することもできません。 また、フリーランサーがハイブリッドフロントエンドエンジニアリングの職務記述書に従おうとしている場合は、おそらく2人のチーム（開発者と設計者）と競合しているため、同じ時間枠で作業する必要があります。品質を維持します。 （もちろん、2人のチームのように報酬を受け取ることもできます！）

脳のどの部分をいつ使用するかを知ることは、プロセスを合理化し、フラストレーションをゼロにし、締め切りに十分な時間を割いて最良の結果を生み出すための鍵です。 不足している場所に関係なく、左側または右側で、この投稿は、必要なスキルとそれらを習得する方法を理解するのに役立ちます。

あなたのプロジェクトとのワンナイトスタンド

準備はいいですか？ すごい！ カスタムVPSソリューションを提供する新進のスタートアップであるminiCloudのサイトを設計するように依頼されたとしましょう。 どこから始めますか？

プロジェクトで「実際の」作業を始める前に、私はそれで寝るのが好きです。 これは、クライアントの製品、サービス、競争などについて徹底的な調査を行うことを意味します。要するに、グーグルはそれから地獄です。 その後、一日中プロジェクトについて考えてみてください。プロジェクトが終了すると、どのようになりますか？ それを夕食に持っていき、あなたの新しいセクシーなデザインを念頭に置いて眠りに落ちてください。 この段階では、アイデアが浮かんだときに必ず鉛筆（または携帯電話）を用意して書き留めておきます。 この種のマインドワークは通常、プロセスの重要な側面を定義するのに役立ちます。

個人的なヒント：クライアント、プロジェクト、またはWebデザインに関係のない人々から得られる「アドバイス」は、私に最高の最悪のアドバイスを与えることがよくあります。 ですから、彼らの提案を聞いたとき、私は何をしてはいけないかを正確に知っています。 わたしにはできる！

クリエイティブなジュースを流しましょう：デザインプロセス

構築するアイデアがいくつかできたので、実際の設計プロセスを開始します。 これは、1）スケッチ、2）ワイヤーフレーム、および3）グラフィックスの3つのステップで構成されます。 これは、芸術的な脳の半分にそのことをさせ、鉛筆、紙、Photoshopを使って頭を悩ませる部分です。

この設計段階では、HTML、CSS、およびjQueryを使用してすばやく再作成することがほぼ不可能になるWebサイトのいくつかの側面に夢中にならないように、「開発者」側にチェックを任せることが重要です。 ブラウザを作り直そうとすると、フロントエンドの開発者はそれを嫌うでしょう。 そして、あなたのフロントエンド開発者はあなたです—覚えていますか？

したがって、友人のウェディングドレスのWebサイトを再設計することによって新しい境地を開く可能性は非常に低いため、Webデザインのベストプラクティス（およびいくつかの常識）に導かれます。 これは、幻想的で印象的なデザインを作成することを目指すべきではないということではありません。 むしろ、実行可能であることがわかっている何かを考え出します。 Webを再発明するプロジェクトは、通常、時間に余裕を持って行われ、締め切りはありません。

個人的なヒント：私が設計するとき、私はすべての外部の中断を調整し、目前のタスクに細心の注意を払うのが好きです。 つまり、電話、Facebook、Twitter、サンドイッチの作成などはありません。 なじみのないものや、歌詞がわからないもの（Vocal Tranceなど）を聞くのに役立ちます。そうしないと、ADHDが始まり、すぐに歌ったり踊ったりします。 私たちはそれを望んでいません。
  1. スケッチ：方眼紙のノートと鉛筆を数本から始めます。 方眼紙は、グリッドベースのデザインに使用できるため、特に優れています。 後でスケッチをワイヤーフレームに変換し、最後にグリッドベースのWebサイトに変換するときに、問題は発生しません。 miniCloudの場合、スケッチは次のようになります。

フロントエンドエンジニアとして、方眼紙を使用して初期デザインをまとめることをお勧めします。

雪、鳥、雲などのスケッチの追加の詳細は、私の先延ばしの産物であり、設計プロセスのどの部分でも必須ではありませんが、見栄えが良いことに注意してください。

 <div class="pop_out_box is-full_width"> <b>Personal tip</b>: There are some great resources online where you can download and print sketch sheets. One of my favorites is <b><a href="http://sneakpeekit.com/wireframe-sketchsheets/">sneakPeekit</a></b>. They also have sheets for mobile and tablet design. </div>
  1. ワイヤーフレーム：サイトがどのように表示されるかについての基本的な考え方がわかったので、クライアントに表示できるワイヤーフレームを作成します。 これを行う方法はたくさんあります。 場合によっては、必要がないと感じた場合は、この手順を完全にスキップできます。 個人的には、Photoshopを使用してアイデアをワイヤーフレーム化します。これは、私が最もよく知っているツールだからです。 .EPSまたは.PSDには、数秒で開始できる無料のワイヤーフレームキットがたくさんあるため、すべての要素を最初から作成して描画する必要はありません。 Photoshopを避けたい場合は、オンラインソリューションもいくつかありますが、私はオフラインのような人です。 とにかく、私たちのスケッチから拡張して、私たちはこのように私たちのウェブサイトをワイヤーフレームにするかもしれません：

クライアントが承認したワイヤーフレームを入手したら、フロントエンドの設計およびエンジニアリングプロセスの次のステップはグラフィックスです。

  1. グラフィック：これは私のお気に入りの部分です：ワイヤーフレームを美しいウェブサイトに変換します。 しかし、誰もが私ではありません。 あなたが主に開発者であり、デザイン、色、タイポグラフィなどの才能がほとんどない場合は、デザインのインスピレーションを得るために他のWebサイトから始めることをお勧めします。 それらはたくさんあり、素晴らしいアイデアで覆われています。おそらく、あなたの中にデザイナーが出てくるのを待っているのではないでしょうか。 特に見栄えがよく、デザインが優れているWebサイトのブックマークフォルダを保持しておくと便利です。 ピカソ（？）は、「優れた芸術家はコピーするが、優れた芸術家は盗む」と言っていました。つまり、他の誰かのデザインを採用してステッカーを貼るという意味ではありません。 代わりに、他の誰かの作品からインスピレーションを得て、独自のスピンとアプローチを追加してください。

私はすべてのデザインをPhotoshopで行います。 理想的には、プレースホルダーの代わりに使用できる写真やコピーテキストなど、使用する原材料をクライアントが提供します。 リビジョンに送信すると、はるかに見栄えが良くなります。

 So, for step three, we take our wireframe and bring it to life:

デザインコンプを作成できることは、ハイブリッドフロントエンドエンジニアの職務記述書の重要な部分です。

個人的なヒント：クライアントの資料がない場合は、「ラテン語のテキストは常に存在しますか？」などの質問を避けるために、ストックフォトとLoremipsum以外のテキストを使用してください。 と「なぜ私たちのウェブサイトに灰色のブロックがあるのですか？」 Lorem ipsumを使用している場合は、このジェネレーターが便利です。

ちなみに、Photoshopを使用することになった場合、プラグインやスタイルなど、プロセスを大幅に高速化する優れたリソースがたくさんあります。 私はそれらについての投稿全体を一人で書くことができたので、私が頻繁に使用するいくつかを指摘します。

  1. CSS3Ps ：レイヤーをCSS3に変換する無料のクラウドベースのPhotoshopプラグイン。
  2. Divine Elemente ：PSDから直接WordPressテーマを作成します。 WordPressプロジェクトをすばやく開始するのに最適です。 「HTMLスキルは必要ありません」と言われていますが、すばらしい結果を得るには、実際にいくつかのスキルが必要になります。
  3. 微妙なパターン：通常は背景として、デザインで使用する無料のパターンのコレクション。 これらのような詳細は、デザインを良いものから素晴らしいものに変えようとしているときにすべての違いを生みます。
個人的なヒント：Photoshopでデザインするときは、レイヤーを正しくグループ化して名前を付けてください。後で変更を加える必要があるときに、「新しいレイヤー1コピー01」という名前の数十のレイヤーを検索する必要がありません。 私を信じてください、あなたが何百もの層を持っているとき、あなたはあなた自身に感謝するでしょう。 レイヤーを十分に活用することに興味がある場合は、このガイドを確認してください。

「スライスアップ」：フロントエンドプロセス

デザイン段階を終えて、幸せなクライアントからOKを受け取ったら、静止画像をライブWebサイトに変換する準備が整いました。 この時点で、私たちのデザインはまだそれだけであることを忘れないでください：デザイン。 Webの準備が整う前に進む方法があります。

この段階で、脳の左側のより分析的な半分を使用する時が来ました。

Webデザインの世界では、このプロセスを「スライス」と呼びます。 この用語は少し前の方が正確でしたが、CSSがWebの主要な視覚的構成要素になり、PSDまたはPNGのすべての小さな部分を切り取って、恐ろしい小さなテーブルに配置する必要が生じる前に、それは行き詰まりました。

あなたがウェブデザイナーであり、「フロントエンド」の方法をまだ知らない場合は、幸運です。コーディングを学ぶことができるからです（デザインの自然なコツを持っているのとは異なります）。 Lynda.comのようないくつかのオンラインビデオチュートリアルに投資して、フロントエンド開発の基本を確認することをお勧めします。 （リソースのより明確なリストはここにあります。）数時間のうちに、ゼロからコードの読み取りに移ります。 そして、数日のうちに、あなたはそれを自分で書くでしょう。 そして、数か月以内に、HTMLとCSSのマスターになります。そうすれば、フロントエンドのエンジニアリングジョブに関してあなたを止めることはできません。

個人的なヒント：コーディングするときは、 「ポモドーロテクニック」を使用して、時間を管理し、タスクを割り当てるのが好きです。 設計段階とは異なり、わざと邪魔されることを許します。 ポモドーロは集中力を高めるのに役立つ素晴らしいテクニックです。ぜひご覧になることをお勧めします。 それはそれだけの価値があります。

これで、（前の段階で）使い慣れたグリッドに従っていくつかの優れたワイヤーフレームを作成した場合、サイトをどのようにコーディングするかが正確にわかります。 最も簡単な方法は、Bootstrapなどのある種のフロントエンドフレームワークを使用することです。

グリッドベースのデザインのコツをつかむと、Webサイトのすべての部分が一連の行と列として表示されるようになります。 HTML構造を設定するときに、実際のコンテンツやCSSを追加する前に最初に行うことは、行、列、ナビゲーションなどの基本的なもの、テキストと画像のプレースホルダーの順に書き込むことです。 これにより、最初に基本構造を理解し、そこから構築することができます。 このワイヤーフレームを見ると、6つの行があります。

  1. ロゴ/ナビゲーション
  2. 画像スライダー
  3. イントロテキスト
  4. カテゴリ画像
  5. 最新のニュース/オファー
  6. フッター

それらをBootstrapのHTML構造に適合させると、次のようになります。

多くの基本的なWebサイトは同じ（または類似の）コードを使用しており、プロジェクトを増やすにつれて、Webサイトの開発は主に反復プロセスであり、反復ごとに同じコードを記述しても意味がないことがわかります。 。 これがフレームワークが役立つ理由です！ 独自に作成したか、BootstrapまたはFoundationを使用することにしたかどうかは関係ありません。 重要なのは、後でそれを維持し、必要に応じて拡張できることです。

個人的なヒント：締め切りが厳しい中規模のプロジェクトに取り組んでいる場合、私の選択はBootstrapになります。 使いやすく、応答性が高く、カスタマイズ可能です。 また、WordPressとの相性も抜群です。

プロジェクトに必要なほとんどすべてのものは以前に作成されており、その後数回再作成されています。 したがって、主要なタスクについては、壁を真っ先に通り抜ける前に、周りを検索して、他の人に提案があるかどうかを尋ねてください。 大きなフレームワークのほとんどには、仕事を簡単にするための追加のコードとプラグインを作成する非常に活発なコミュニティがあります。 ですから、一生懸命ではなく賢く働き、毎日学びましょう。 そして、これまで誰も構築したことがないものが必要な場合は、それでは、新しい分野を開拓していることになります。 それについて書き、コミュニティと共有してください。これは、デザイナーおよび開発者として成長するのに役立ちます。

CMSの選択

一部のフロントエンドエンジニアリングプロジェクトでは、デザインがライブWebページに存在するとすぐに完了します。 これらは通常、小規模なサイトです（たとえば、中小企業、弁護士、歯科医など）。 しかし、多くの場合、あなたやあなたのクライアントは、ウェブサイトのコンテンツを管理したいと思うでしょう。 その場合、コンテンツ管理システム（CMS）が必要です。 CMSの目標は、すべての新しい詳細を手動でコーディングしたり、まったくコーディングしたりすることなく、コンテンツを編集してWebページに公開できるようにすることです。

すべての大規模なCMSの中で、私は自分自身をWordPressエバンジェリストと呼んでいます。その汎用性、使いやすさ、開発のための包括的なドキュメント、大規模なコミュニティ、多数の無料プラグインのために、他の開発者、特に初心者に絶賛しています。などなど…

誰かがあなたにそのJoomla！ 特に小規模なプロジェクトの場合は、より優れています。そうすると、彼らは何について話しているのかわかりません。 とにかく、私の言葉をそのまま受け入れるのではなく、WordPressとJoomlaをダウンロードしてください！ スターターテーマ、各フォルダーを確認してから、自分自身に問いかけてください。新しいフロントエンドの役割でどちらを検討しますか？

このトピックについて書くには記事全体が必要ですが、日焼け止めでバズ・ラーマンを信頼するのと同じように、これについては私を信頼してください。

個人的なヒント：WordPressには、あなたが望むものになるためのこの優れた機能があります。 たとえば、WordPressは、woocommerceと呼ばれるプラグインを使用する中小規模のeコマースプロジェクトのショッピングカートソリューションになる可能性があります。 安全で、使いやすく、開発が簡単で、既存のWordPressテーマに簡単に統合できます。

プロジェクトが特に小さく、コーディングスキルがなくても実装できる単純なCMSが必要な場合は、CouchCMSを使用することをお勧めします。 XHTMLタグをいくつか使用するだけで、数分以内に起動して実行でき、おばあちゃんでもその使用方法を知ることができます。

あなたのウェブサイトを維持する

あなたがあなたのウェブサイトを届けて、あなたがもう一人の満足した顧客を持った後、あなたがすることはあなたに残されているすべてはサイトを維持することです。 新しいコンテンツを含まない単純なHTMLサイトを構築した場合は、おそらくこれで完了です。

CMSを使用したことがある場合は、セキュリティ違反を回避するために、テクノロジが常に最新であることを確認する必要があります。 これには、CMS自体と使用したプラグインが含まれます。 私のアドバイスを受けてWordPressを使用した場合は、利用可能なすべての更新について電子メールで通知されます。

これが私のプロセスの球場です。 確かに、これはすべての人に役立つわけではなく、すべてのプロジェクトに当てはまるわけではありません。 しかし、これがあなたのデザイナーが優れたフロントエンドエンジニアになるために必要なスキルを習得するのに役立つことを願っています。その逆もまた同様であり、フロントエンド開発者としての才能を継続的に成長させることができます。

ドアしか見せられません。 あなたはそれを通り抜けなければならない人です。 -マトリックス、モーフィアス

PS：上記のテンプレートのPSDと他のクールなデザインは、私のドリブルポートフォリオで見つけることができます。