私は何をしているのか分からない

最近、ニューヨークでWebデザイナーGenerate Confの会議を開く機会がありました。 未来の不確実性について話す機会がありました。



ここで、パフォーマンスのビデオを見ることができます。







そして、ここに転写があります：



ありがとう ニューヨーク、元気ですか？ またここに来てうれしいです。 オリバーが言ったように、私の名前はブラッド・フロストであり、私が何をしているのかわかりません。 この素晴らしいタイトルスライドのアイデアを知らずに投げてくれたDave Rupertに感謝します。







私たちは皆この赤ちゃんのように見えると思います。 今日、これまでにない新しい発明の膨大な流れに直面しています。 すべての種類のデバイスで正常に動作し、さまざまなブラウザーと互換性があり、さまざまな条件およびユーザー設定で動作するプロジェクトを作成する必要があります。



テクノロジー、ソフトウェア、ツール、ライブラリ、フレームワークが増えています。 そして、これらすべてに遅れずについていくために、私たちはより多くのブログ、ツイート、ニュースレター、Medium、Pastry Box、およびNet Magazineの投稿を読み、より多くのトレーニング資料を研究し、より多くのポッドキャスト、会議を聴き、より多くのビデオを見て、もっと注意を払うことを余儀なくされています意見。







そして、このシーンで最も面白いのは-もちろん、それは一般的に面白いです-彼はただ座って耐えるということですが、それをする必要はまったくありません。 彼はただ尋ねます：「あなたは誰ですか？ なぜこれをしているのですか？」



しかし、彼には選択肢がありますよね？ 繰り返しますが、私たちはこの男のように振る舞います。 このすべての流れの中を泳ぎ続けるかどうかを決定する機会があり、技術とソリューションにdrれています。 または、このストリームから抜け出すことができます。

レスポンシブデザイン

それが今の私たちの現実です。 それは、ウェブデザイナーとして私たちが対処しなければならないことです。 さまざまなツール、さまざまなビューポート値、さまざまな種類のデバイスがあります。 そして、これはレスポンシブWebデザインの観点です。 そして今、私たちは突然、ビューポートの価値に魔法のように適応する「柔軟な」ウェブサイトを作成するために、そのような方法で要素の位置を設定する機会を得ました。 そしてこれは驚くべきことです。 主よ、今サイトを開発する際にどれだけ考慮しなければなりませんか。



レスポンシブデザインは最近5歳になりましたが、何らかの理由で私はまだこれに遭遇しています。 レスポンシブデザインガイドを読んでいると、ポートレートモードのiPhone 4で使用されている320ピクセルの解像度に関する言及があります。 横向きモードのiPhone 4では480ピクセル。 iPadでポートレートモードの768ピクセル。 iPadで横向きモードの1,024ピクセル。 折ります。 神様、 折ります！ 常に。 そしていつもそのように。



しかし、現在、これらの境界はすべてぼやけています。 30秒ごとに、Samsungは別のデバイスを新しいサイズでリリースします。 そして今、Appleもそこにいます。 iPhone 6と6 Plusを例にとると、私はこのアニメーションが好きです：







彼女はプロセスを非常に正確に伝えています。 現在、iPhone 6では、375および414ピクセルが使用されています。 また、Sassのような強力なツールもあります。「そのため、電話、タブレット、コンピューターで動作するサイトが必要です。」 そして、これらの概念を言語とワークフローに導入します。

特定のクラスのデバイスの選択は、トレースが砂の中にない限り短命です。 -ジェイソン・グリッグスビー

これはネットワークに深刻な影響を及ぼします。「すべてをプッシュ」して、電話、タブレット、パソコンのみに注意を払うのは良くありません。 アダプティブWebデザイナーとしての私たちの仕事は、多くの既存のデバイスにサービスを提供することだけではありません-まだ未知のデバイスを考慮する必要があります。







私もVergeを書いている人も、来年どのデバイスが登場するのか、それらにどのビューポート値が表示されるのかを知りません。 そのため、どのビューポートでも機能するページレイアウトを作成する必要があります。







そこで、ビューポートの値を変更できる「ish」という小さなツールを作成しました。 「小さい」サイズを選択すると、表示領域が小さくなり、「中」サイズを選択すると、平均ビューポート値が得られ、「大きい」をクリックすると、ビューポート値が増加します。



もう一度ボタンを押すと、ビューポートのサイズが再び変更されます。 このアイデアは開発と設計の観点からはあまり実用的ではありませんが、クライアントや同僚の情報ベースとして役立つ可能性があります-これが私たちの仕事です。

私たちは、iPhoneで見栄えの良いものを作成しているだけではありません。 私たちの仕事は、見たときのビューポートの価値に関係なく、どのデバイスでもその魅力と機能を失わないサイトを作成することです。

そしてもちろん、クライアントにはお気に入りがあります - ここに投稿しました -ディスコモードでは、ビューポートが画面上で「ジャンプ」します。 顧客が彼を見ると、彼らは言います：「はははは、これ見て！ それがどのように変化するかを見てください！」そして、これはクールです。なぜなら、これもまた、私たちがユニバーサルレイアウトを作成しようとしていることを示す方法（おそらく大胆すぎる方法）だからです。 ビューポートの値が何であれ、私たちを待ち望んでいます。

進歩的な改善

私たちは皆、コンピューターにアクセスする唯一の方法ではないことを知っていますが、まだ取り組んでいます。 現在、これらすべてのスマートフォン、プッシュボタン式電話、電子書籍、タブレット、ネットブック、ラップトップ、コンピューター、テレビ、Webに接続できるゲームコンソールがあります。 これらのデバイスはすべて、さまざまな技術的能力を備えています。



そして、近い将来に私たちが対処しなければならないものは次のとおりです。時計、スマート冷蔵庫、あなたが望むなら今日買うことができます。 しかし、すでに存在するデバイス、まだ作成されていないデバイスよりもはるかに重要です。 The VergeレポーターもEngadgetレポーターも、誰もいない。来年登場するデバイスは誰にもわからない。



はい、ブラウザはより強力で効率的になりつつあります。ムーアの法則はまだ有効です。 しかし同時に、この法律は2つの方向に作用します。 第一に、その動作はテクノロジーの改善に現れています：より高速なプロセッサー、より強力なチップなど。



ただし、テクノロジーのコストを削減する傾向もあります。 この安価であると同時に、ネットワークアクセス機能を備えた高品質で低電力のデバイスのストリームを見ることができます。これをScott JensonはZombie Apocalypseと呼んでいます。

ネットワークはプラットフォームではありません。 これは連続です。 ジェレミー・キース

Jeremy Keithが雄弁に言ったように、プラットフォームの観点からネットワークを考えると、iOS、Android、またはFlashのようなものに匹敵します。 持っているかいないか。 しかし、ジェレミーによると、ネットワークは連続体であることを理解することは非常に重要です。



ネットワーク、これらの技術、ブラウザ、ユーザー設定などすべてにアクセスできるさまざまなデバイスが存在しますが、サポートする必要のある[技術]の範囲があります。 そして、ネットワークはこれについてかなり良い仕事をしています。 だからこそ、進歩的な改善が今、このような重要な役割を果たしています。



これらすべての仮説を常に構築しています。もちろん、ユーザーには最新バージョンのChromeがインストールされています。 もちろん、JavaScriptが有効になっています。 もちろん、有線接続があります。 もちろん、彼らの完全な注意を持っています。 もちろん、彼らは大きな画面を持ち、効果的な入力形式-マウスまたはキーボードを使用します。 これらすべての前提条件を構築し、それらに基づいてWebサイトを作成し、この画面を小さな画面に収める方法について謎を解きます。

代わりに、ルーク・ウォロブスキーが数年間話してきたことをやるべきです。 彼の考えは、すべてをひっくり返して、モバイルデバイスの限界が手元にあるという事実を認識することです。

したがって、そのような仮説を構築する代わりに、反対から行く方が良いかもしれません：はい、もちろん、ユーザーは小さな画面を持っています。 もちろん、彼らは嫌なつながりを持っています。 もちろん、Dパッドなどの不便な入力技術や、タッチスクリーンを備えた他の前代未聞のデバイスのようなものがあります。 もちろん、彼らは急いで気を散らしています。







このように、最大​​限の制限がある状態で、私たちはすべての商業的な目標、ユーザーの目標を達成し、コンテンツ配置の問題を解決します。そして、画面が拡大するにつれて、ブラウザーのプロパティを改善しながら、これらの利点を活用してサイトを徐々に改善することができます。 だからこそ、進歩的な改善の原則が非常に重要です。



最近、非常に強力なJavaScriptライブラリが登場しました。 ただし、おそらく誰もJavaScriptを無効にしないという事実（原則として、これは事実であり、ほとんどの人はそれを行いません）は、そのようにどこでもJavaScriptを信頼できるという意味ではありません。

進歩的な改善とは、技術の欠陥に対処することであり、ユーザーがその技術をサポートしていない可能性があるため、程度は低いです。 アンディ・ヒューム

したがって、次の質問をする必要があります。何か問題が発生した場合はどうなりますか？



そして、何かが間違いなくうまくいかないでしょう。 そして、あなたはそれに答えなければなりません。 ユーザーを地獄に送りますか？ または、可能な限り最高のコンテンツと機能を提供します。 基本的なHTML、CSSから始めて、JavaScript機能を追加します。



[注：保険会社のひどく遅いサイトにどのように座っているかについてのビデオから一部が切り取られました。 申し訳ありませんが、面白いと思いました。]



最終的には、進歩的な改善のアイデア、このWeb標準のアイデア、HTMLを基礎として、CSSをオーバーレイし、他の機能を追加することが基本的な作業です。 HTMLは魅力的ではないことを理解しています。 しかし、それは具体的な役割を果たします。 コンクリートは見苦しい。 鈍くて灰色です。 しかし同時に、美しいものを作ることができるのはその上にあります。

今後のオリエンテーション

将来のすべてのデバイス用のサイトを作成することは不可能です。 しかし、これは、私たちが先にあるものに備えることができないという意味ではありません。 そして、これは奇妙なことです。考えてみると、今日作成するプロジェクトは存在しないデバイスでも動作します。 そして、これはより頻繁に起こります-毎日新しい-この新しい時計を見てください。 これは本当に素晴らしいです：







この男は自分のTwitterを時計から読み、数年前に私が作成したサイトに行きます。 クールじゃないですか？ つまり、この男は彼の時計の発明のずっと前に登場したものにアクセスできます。 このウェブサイトを設計するとき、私は考えていませんでした：「はい、きっと、いつか彼らはそのような時計からこのウェブサイトを見ているでしょう。」 これが私たちが話していることです。未来志向であることは予測不可能性を意味することを意味します。

アトミックWebデザイン

ページを作成するのではなく、コンポーネントシステムを作成しています。 スティーブン・ヘイ

BootstrapまたはZurb Foundationを使用している人はいますか？ そう？ 誰も 心配しないでください、私はあなたを責めません。 おそらく、私は非難しますが。 しかし、これらは非常に便利なものです。 さまざまなデバイスのレスポンシブデザインとWebデザインは簡単ではありません。



そして、これらのフレームワーク、これらのUIツールキットは、必要に応じて組み合わせることができ、これに非常に役立ちます。 これは素晴らしいことであり、概念的なレベルから、私はこのアプローチを完全にサポートしています。 はい、Stephen Hayeが述べたように、このコンポーネントシステムを作成しましょう。



しかし、私の意見では、問題はこれらのフレームワークが単なるツールであるということです。 ブートストラップも同様です。 SFの映画を子供の頃に見たとき、私は頭からこのアイデアを引き出すことができませんでした。 うーん、十分な時間が経過した後、私たちが解決した唯一の問題はmodであると思います。 ある人は、その瞬間からオーバーオールを着るのはクールだと決めた。「もちろん」。 これらの幸せな人々を見てください、彼らは喜んでいます。







もちろん、すべての人は非常に異なっています。 私たちは皆、さまざまなニーズ、さまざまなニーズ、さまざまな目標や欲求を持っています。 したがって、既製の回答を提供するこれらのツールを使用すると、これがドロップダウンリストの外観、ボタンの外観です-すべてのサイトが同じになります。

すべての顧客向けの小さなブートストラップ。 デイブ・ルパート

この点で、Dave Rupertは、各クライアント用の小さなブートストラップを作成するという素晴らしいソリューションを提案しました。 彼は、私たちが組織やクライアントに提供するこれらの適応ツールキットは、Twitter Bootstrapのようなフル機能のシステムに非常に類似しているべきであると詳細に説明します。



顧客の要件に従ってカスタマイズする必要があります。 そして、この場合、そのような顧客志向が重要です。 独自の設計システムを作成できます。



これは、多くのスタイルガイドとパターンライブラリの公開の推進力でした。 Code for Americaガイドは最高です。 そして、 Salesforce 、 Mailchimp 、 Yelp 、 Starbucksがあります。 そして、それらに入ると、「 ブロック3アップ 」のようなパターンが表示されます。



この場合、これはStarbucksがインターフェイスで使用する主なパターンです。ウィンドウをサイズ変更して、適応環境でどのように見えるかを確認できます。 同時に、将来使用できる独自の用語集を作成します。 スターバックスの例の場合、ここに画像、キャプション、テキストのパッセージで構成されるメインブロックがあります。



このページは、そのようなブロックがどのようにグループ化されるかを示しています-このレイアウト形式は、小さな画面サイズに最適です。 構成は複雑になる可能性があり、適応環境で新しいオプションがどのように「機能する」かを確認します。







私はこれらのインターフェース設計システムについて、そのようなシステムを構築するために合理的なアプローチを取ることがどれほど重要かについて考えるのに多くの時間を費やしました。 私はそれをアトミックデザインと呼び、独自のデザインシステムを作成するための明確な方法論を提供します。



これは、原子から分子へ、分子から生物へ、生物からテンプレートへ、テンプレートからページへという、原子設計の概念の枠組み内の一連の作業です。 しかし、これは別の会話なので、これについてもっと知りたい場合は、私の本を10ドルで購入できます。







Googleは先週だけ、マテリアルデザイン言語システムの更新をリリースしました。このようなプロジェクトの作成に対処する必要があるため、これについて非常に満足しています。 繰り返しますが、私たちが今日取り組んでいることが将来に関連するかどうかは確かではありません。



そして、あなたがそれについて非常に推定的に考えて、彼の仕事を完了し、「それですべてだ、プロジェクトには他に何も必要ない」と宣言するなら。 マテリアルデザイン言語などのシステムを使用すると、それらを使用、学習、テストし、実践から理論に戻って言語自体を変更できます。



これらのシステムを使用し、実装し、例として使用することができます。これは、設計言語とGoogle、およびそれを使用する他のすべての人々とまったく同じように機能します。



繰り返しますが、このシステムに次に何が起こるかわかりません。 人々がそれをどのように使用するかわかりません。 いずれにせよ、これらのパターンライブラリと設計システムはますます重要になっています。

ツール

素晴らしい心がアイデアを議論します。 ミドルマインドはイベントについて議論します。 小さな心は人々を議論します。 ヘンリー・トーマス・バックル

私はこの引用が好きです。 したがって、私は彼女から追い出します。 だから、偉大な心は原則を議論しています。 中間の心は技術について議論します。 小さな心がツールについて議論します。



会社でSketchを使用しているデザイナーがいる人に手を挙げてください。 Photoshopの愛好家はどこにいますか？ フロントエンド開発者はどうですか？ Sublime Textを使用しているのは誰ですか？ そして、他の人は誰だと言う？ そこで、ギャングオブニューヨークと呼ばれる小さなゲームをプレイします。 座席の下を見ると、axesと肉屋のナイフがあります。 私たちは道具のために死ぬまで戦います。







私たちはツールにますます注意を払うことに慣れています。 どのような「グリッド」を使用しますか？ どのエディターですか？ 仕事に使用するのに適したツールはどれですか？ どのフロントエンドフレームワークですか？ jqueryを使用するかどうか 角度またはエンバー？ ネイティブとWeb。 私たちは常にこれらの戦いに参加しています。



そして、私たちが本当にする必要があるのは退却です。 しかし、私はデザイン学生や開発者から次のようなリクエストのメールを受け取り続けています。 どの言語を学ぶべきですか？ どのフレームワークを使用するのが適切ですか？ 使用するツールは？」



それらは理解できます。 求人情報サイトを最近見た人はいますか？ 要件のリストを見ましたか？ あなたは夢中になることができます。



それで、私はこの機会を利用します-最近Brad Frost Web LLCがかなりうまくいっているので、私は従業員の数を増やすことを考えています。 一般的に、私はあなたのために空席を開いています。 あなたはそのような会議に出席するのに十分賢いので、たぶん私は幸運であり、あなたの中から理想的な従業員を見つけるでしょう。



必要な知識とスキルのリストは次のとおりです。







これらの要件を満たしている場合、Brad Frost Web LLCは、私たちの高度なチームに提供するものを探しています。 競争ベースの初期給与は、年間1万5,000ドルで、快適なボーナス-カジュアルスタイルのドレスコードと卓球台があります。 雇用主に連絡しないでください。



ジョークに加えて、先週、「React.jsの専門家を雇うことができますか？」という手紙を受け取りました。WikipediaのReact.jsページに行きました。最初の安定版はたった4か月前に作成されました。 繰り返しますが、個々のツールと個々の技術に対するこの盲目的な情熱。



また、「フロントエンドエンジニアとして、大企業でインタビューを受けるためには、すべての問題解決アルゴリズムを知っている必要がありますか？」という質問に答えるように求められました。 これには注意が必要です。 とても、とても難しいです。



最近、ジェン・シモンズは彼女の美しいポッドキャスト、The Web Aheadでこれについて話しました：

新しいテクノロジーを理解する必要がある場合、Googleにアクセスしてマニュアルを見つけ、特定のコードを勉強するのは簡単です。 このテクノロジーを使用する理由を理解するのは非常に困難です。 多くの場合、この点は記載されておらず、適切にカバーされていません。 ジェンシモンズ（ジェンシモンズ）

もちろん、特定の技術の利点を判断する理由を理解し正当化するというこの考え方は非常に重要です。 しかし、代わりに、私たちはGithubフレームワークのストリームと、淫らなウサギのように繁殖するアーカイブにのみ焦点を当てています。



原則についてです。



私はそれらをレスポンシブデザインの原則と呼んでいます。 注目すべき点は次のとおりです。私のプロジェクトはWebの可用性を利用していますか？ それらは普遍的ですか？ 彼らは効果的ですか？ 閲覧に使用するブラウザとデバイスの独自の機能を使用していますか？ それらはどのくらい作成されましたか？ 私は未来について考えていますか？

知識とスキル

それで、私たちは何をしていますか？ 私たちは何に重点を置いていますか？ 私たちはそれぞれ特定のスキルと知識を持っていますが、いつでももっと学ぶことができます。



T字型の専門家のアイデアを知っていますか？ T字型のコンピテンシー？ 能力の幅は、さまざまな分野の知識のセットによって決まります。 しかし、あなたは特定の分野でより深い知識を持っています。 これは絶対にすべてを知ることは不可能であるという考えを表現するための良い、合理的な方法だと思います。



私にとって、フロントエンド開発者としての「T」の基礎はHTMLとCSSですが、他の誰かにとっては、「T」という文字の水平線になります。 これが私の頭に浮かんだことですが、この「T」がテーブルだったら、それは落ちていただろう。 本当に必要なことは次のとおりです。







複数のTスペシャリストのチームを募集して、プロジェクトに協力します。 スキルの多様性のために互いに補完する人々の存在は、チームが一般的に強く、より安定するのに役立ちます。

プロセス

そして、これに対処するためには、「滝」のモデルを完全に終わらせる必要があります。 あなたは私が話していることを理解していますよね？ 部屋にUXデザイナーはいますか？



ワイヤフレーム、3ページのレポートをPDFで作成し、クライアントに表示します。 そして彼は言う：「はい、私はそれがよさそうだと思います。」 彼は彼の同意を与え、色、タイポグラフィ、テクスチャーに取り組むデザイナーにすべてを転送し、最終バージョンを顧客に見せると、「わかりません。わかりません。 何か変更できますか？「もちろん」と言い、バージョン2の作業を開始します。



そして再びクライアントに見せて、彼にこう言います：「私はこのオプションが好きですが、元のバージョンから何かを返すことは可能です」。 そして、「OK、バージョン3をやる」と答えます。 顧客：「良い...」。



そして今、ついにhomepage_final_v2_forreview_finalfinal_fordevreview_finalthistime_FINAL.psdのバージョンが承認されると、グラフィックデザイナーは静かに開発者の洞窟に忍び込み、プロジェクトをドアの下に置き、逃げて、「2週間で完了する必要があります！ 私たちはもはや予算と締め切りに収まりません！「開発者は「くそー、それからすべてが間違っている！」という言葉で洞窟から抜け出します！」







フロントエンド開発者として、深刻な性格の危機に直面しています。 私が働いたすべての会社で、彼らは私に尋ねました。 「まあ、私はHTMLとCSSコードを書いています。」 「ああ、あなたはエンコーダーだ！ Ruby開発者の隣に座ってください。」 I：「Eeee ...」「このソフトウェアを私たちに書くのにどれくらいかかりますか？」「ええと...私の母はアートを教えています。 私はこれまでにコンピューターサイエンスの授業に行ったことがありません。 何を言っているのか分かりません。」



設計プロセスでは、将来に焦点を当て、マルチプラットフォームサイトを開発し、フロントエンド開発をWebデザインの最も重要かつ重要な要素と見なすことが非常に重要だと思います。



組織内でデザイナーと開発者が隣り合っている場合は、手を挙げてください。 これはいいです。 嬉しいです



デザイナーと開発者が同じフロアに座っている場合、手を挙げてください。 別の階に？ 別の都市で？ さまざまな国で？ これは深刻な問題です。 このような組織上の障壁があると、仕事を効率的に行うことができません。 私たち一人一人がすべての質問に対する答えを知らなければならないことが理解されています。 しかし、私たちは知りません。 すべてを知ることはできません。



私たちは一体何をしているのかわかりません。 私たちは一緒に働き、互いに交流する必要があります。 近くに座ってください。 これは非常に快適で不自然ではありませんが、良い結果を得るための唯一の方法です。 これはすべての人に当てはまります（叔父の手動治療室でこの写真を見たとき、「ああ、私の神。プレゼンテーションにそれを含めます」と言いました）。







これは、この分野の専門家だけでなく、すべての人に適用されます。 私はウェブで仕事をするのが大好きで、皆さんもそうであることを願っています。 ネットワークを作成するのは私たちであり、その力を十分に理解しているのは私たちだからです。 私たちは、知識と宣伝の交換である協力の本質を理解しています。



, Medium, , , , , , Stack Overflow, Stack Overflow, , , Github.



, :







, . . , . , . , .



:







(Simon Wardley) . : « », , . «» .



, . . , . . .



— , . . , , . - : «, ! ».



しかし、これはすべてをあきらめる必要があるということですか？ いやこのパズルを収集する必要があります。結局のところ、それが完了することは決してないという事実にもかかわらず、我々はいくつかの進歩を見ています。そして、結果がどれほど美しいかを見ることができます。



そして、ジグソーパズルを収集するのはとても楽しいことです。ありがとう