Webフロントエンド

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

二心で考える

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

両方の帽子をかぶることには多くの利点があります。専門家の観点からだけでも、仕事を見つけやすく、より高い料金を請求できます。より多くをテーブルにもたらす。

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

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

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

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

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

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

音楽業界はどのくらい稼いでいますか

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

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

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

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

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

個人的なヒント ：私が設計するとき、私はすべての外部の中断を調整し、目前のタスクに細心の注意を払うのが好きです。つまり、電話、Facebook、Twitter、サンドイッチの作成などはありません。なじみのないものや、歌詞がわからないもの（ボーカルトランス）それ以外の場合は、ADHDが開始され、すぐに歌ったり踊ったりします。私たちはそれを望んでいません。

スケッチ ：方眼紙のノートと鉛筆2本から始めます。方眼紙は、グリッドベースのデザインに使用できるため、特に優れています。後でスケッチをワイヤーフレームに変換し、最後にグリッドベースのWebサイトに変換するときに、問題は発生しません。 miniCloudの場合、スケッチは次のようになります。

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

Expressであり、nodejsはクライアント側のフレームワークです

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

  Personal tip : There are some great resources online where you can download and print sketch sheets. One of my favorites is   sneakPeekit  . They also have sheets for mobile and tablet design.

ワイヤーフレーム ：サイトがどのように表示されるかについての基本的な考え方がわかったので、次は作成します。ワイヤーフレームクライアントに見せることができます。あります多くの方法これを成し遂げるために。場合によっては、必要がないと感じた場合は、この手順を完全にスキップできます。個人的には Photoshop それは私が最もよく知っているツールなので、私のアイデアをワイヤーフレーム化するために。がたくさんあります無料のワイヤーフレームキット .EPSまたは.PSDで数秒で開始できるため、すべての要素を最初から作成して描画する必要はありません。 Photoshopを避けたい場合は、オンラインソリューションもいくつかありますが、私はオフラインのような人です。とにかく、私たちのスケッチ、次のようにWebサイトをワイヤーフレーム化する場合があります。

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

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

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

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

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

個人的なヒント ：クライアントの資料がない場合は、ストックフォトとそうでないテキストを使用してください Lorem Ipsum 、「ラテン語のそのテキストは常に存在しますか？」のような質問を避けるために。と「なぜ私たちのウェブサイトに灰色のブロックがあるのですか？」 Lorem ipsumを使用していることに気付いた場合は、この発電機重宝します。

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

nodejsレストクライアントの例

CSS3P ：レイヤーをCSS3に変換する無料のクラウドベースのPhotoshopプラグイン。
神の要素 ：作成します WordPress あなたのPSDから直接テーマ。 WordPressプロジェクトをすばやく開始するのに最適です。「HTMLスキルは必要ありません」と言われていますが、すばらしい結果を得るには、実際にいくつかのスキルが必要になります。
微妙なパターン ：通常は背景として、デザインで使用する無料のパターンのコレクション。このような詳細は、デザインを良いものから素晴らしいものに変えようとしているときに、すべての違いを生みます。

個人的なヒント ：Photoshopでデザインするときは、レイヤーを正しくグループ化して名前を付ける、後で変更を加える必要がある場合に、「新しいレイヤー1コピー01」という名前の数十のレイヤーを検索する必要がないようにします。私を信じてください、あなたが何百もの層を持っているとき、あなたはあなた自身に感謝するでしょう。レイヤーを最大限に活用することに興味がある場合は、このガイド。

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

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

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

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

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

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

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

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

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

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

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

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

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

CMSの選択

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

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

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

需要の価格弾力性は何を測定しますか？

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

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

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

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

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

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

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