クレジット：
非常に多くの情報が世に出ており、ウェブ上には非常に多くの新しいテクノロジーや概念実証が登場しているため、何が起こっているかを把握するのが難しい場合があります。新人のデザイナーや開発者にとって、どこから始めればよいのか不安になることがあります。だからこそ、マスター、つまり高品質のアプリやサイトを構築することで基準を設定している個人と話し、彼らがどのように機能するか、どのようなツールを使用するか、他の人にどのようなアドバイスがあるかを知ることが常に良いのです。
今週私たちが話したのは、トラヴィス・アイザックスは、経験豊富なユーザー エクスペリエンス デザイナーであり、Keynote Kung-Fu の作成者でもあります。彼の言葉を借りれば、「ビジュアル デザインとインタラクション デザイン、情報アーキテクチャ、Web 開発の間のギャップを埋める」ことを専門としています。
Isaacs の Web デザインに関するトップのヒントを紹介します。
アイザックスについて
クレジット：
Isaacs は、ShopKeep.com、Blinksale、Viewzi、Travelocity などの Web サイトのビジュアル デザインとフロントエンド開発に取り組んできました。iPhone。彼は革新的なヒートマップ ビジュアライザーの背後にあるチームの半分でもあります。登山口。
アイザックスがおそらく最大の注目を集めたのは、この春初めの Big Design 2010 カンファレンスでした。カンファレンスで同氏は、「Keynote Kung-Fu: How to Wireframe Like a Ninja」と題したプレゼンテーションを行い、Apple のプレゼンテーション ツール Keynote を使用して、個人が真に説得力のある効果的なワイヤーフレームや Web サイトのモックアップをどのように作成できるかを概説しました。
このプレゼンテーションは SlideShare で 37,000 回以上閲覧され、Isaacs 独自の基調講演テンプレートのバンドルに取って代わられました。基調講演Kungfu.com。 5月以来、アイザックスはKeynoteのツールと要素が入った12ドルのパッケージを1,500部以上販売し、iPhoneとiPad。 Keynote Kung-Fu は、Windows および Mac 用の PowerPoint、および iPad 用の Keynote をサポートするように拡張されました。
Keynote を使用して Web サイト、Web アプリ、またはモバイル アプリのプロトタイプを作成できるとは思えない場合は、Isaacs のプレゼンテーションを確認してください。
商売道具
クレジット：
Isaacs に設計と開発のプロセスについて尋ねました。フロントエンド デザイナーとして、彼はスケッチからプロセスを開始しますが、それは非常に高いレベルにすぎないと彼は語ります。ページレベルのアイデアをスケッチしたら、すぐに Keynote に進みます。彼はこう語ります。「私は 2006 年くらいから Keynote を使っていますが、ここ 2 年間はワイヤーフレームに真剣に使っています。自分のすべての仕事に Keynote を使っているので、[Keynote Kung-Fu] をより良くするのに役立っています」 。」
彼のすべての対話とインターフェイスの詳細には Keynote が使用されます。現時点で、Isaacs は多くのフロントエンド開発者とは少し異なる道を歩んでいます。彼はコードにまっすぐ向かいます。
これは「ほとんどの人より少し後退している」と彼は言いますが、彼にとって、コードと一緒に、またはコードの後にビジュアルデザインを行うことは理にかなっています。フォトショップ彼は自分の作品の視覚要素を構築するために使用しています。
コードを書くことに関して言えば、Isaacs は以下のファンです。テキストメイト, 彼はこれを「これまで使った中で最高のお金（もちろん iWorks は別として）」と呼んでいます。 TextMate が優れている理由は何ですか?
それはすべてバンドルに関するものです。 Isaacs 氏は、ほぼすべての言語の構文バンドルがあることを指摘し、「キーボード ショートカットに酔っている」とも述べています。
フロントエンド言語に関して言えば、Isaacs は HTML、CSS、およびjQuery。 Isaacs 氏によれば、必要となる JavaScript ライブラリは jQuery だけです。
Isaacs は自分のプロジェクトで、Nathan Smith のファイルを頻繁に使用します。960.gs グリッド システム、新しいHTML5 ボイラープレートそしてLESS CSS フレームワーク。
「製品を作成したら、料金を請求してください」
クレジット：
HTML/CSS/JavaScript の世界に慣れていない人へのアドバイスについて議論しているときに、Isaacs は強調する価値があると考えた点を述べました。「製品を作成する場合は、料金を請求してください。」
アイザックスは、次のような小さなものを与えると言っていますが、コードスニペット、無料で利用できる一方で、価値を付加する製品やツールには課金するべきだと考えています。
「製品に課金すると、製品をより良くする必要があり、その価値について即座にフィードバックが得られます。何かを贈るのは非常に簡単です。障壁は低いです。誰かにお金を提供してもらうのははるかに困難です。」
彼は続けて Keynote Kung-Fu について語ります、「カスタマーサービス、デジタルグッズ、マーケティングについてとても多くのことを学びました。もしそれ（または Trailhead）をただ与えていたら、それを行うのは難しかったでしょう。」
専門家のアドバイス
Isaacs によるその他のヒントをいくつか紹介します。意欲的な Web 開発者そしてデザイナー：
手作業で大量のコードを書きます。
ジェフリー・ゼルドマンの作品などの古典を学ぶWeb標準に基づいた設計、そしてセダーホルムの防弾ウェブデザイン、Eric Meyer の CSS についてそしてジェレミー・キースのDOM スクリプトなぜなら、「必要となる JS ライブラリは jQuery だけだとしても、昔ながらの JS を知っていれば、jQuery が肥大化するのを防ぐことができるからです。」
すべてのブラウザで完璧なピクセルを実現しようとしないでください。これは、すべてのデザインがすべてのブラウザーで同じように見えるわけではないことを認識しているため、興味深い情報です。 Isaacs 氏は、ブラウザ間で正確な同等性を達成しようとするのに費やされる時間と労力は、「率直に言って、価値があるというよりも面倒だ」と考えています。
ただし、これは、Isaacs 氏がデザイナーや開発者が他のブラウザーを無視すべきだと考えていると言っているわけではありません。よくある間違い、そして私たちが何度も繰り返したアドバイスのポイントは、コードを完璧にしていない多くの Web デザイナーや開発者を彼が見ているということでした。つまり、さまざまなシナリオで機能する可能性があります。彼が目にするコードが完全ではないというよくある間違いには次のようなものがあります。
広い画面用にタイル化されない背景画像。
固定幅要素と固定高さ要素。
CSS3 などの新しいテクノロジーを使用した効果。サポートされていないブラウザーでも正常に機能が低下しません。
見た目が素晴らしいものを持っているFirefoxまたはサファリしかし、それがどのように見えるかさえ確認しませんでしたインターネットエクスプローラー、オペラまたはモバイルデバイス上で。
それでも、アイザックス氏は特定のユーザー向けにデザインしたり開発したりすることに反対しているわけではない。たとえば、特に最初の頃は、Keynote Kung-Fu のトラフィックのほとんどは Mac ユーザーからのものでした。それは、彼が自分のデザインで実質的に何でも解決でき、より現代的な技術を気軽に使用できると感じたことを意味します。ツールキットが PowerPoint をサポートするように拡張されるにつれて、Internet Explorer で動作することを確認することがより重要になります。
あなたの考え
Web プロフェッショナル向けの Isaacs のヒントについてどう思いますか? Keynote や PowerPoint でワイヤーフレームを試したことはありますか?コメントでお知らせください。
バザールがサポートするシリーズ
クレジット：
のWeb デザインのベスト プラクティス シリーズによってサポートされていますバザール、クリエイティブなオブジェクトを売買するためのマーケットプレイスです。クリエイティブな才能に、作品を世界的に宣伝し、販売するためのツールを提供します。と接続してすぐに売買を開始できますフェイスブックまたはツイッター。
Mashable のその他の開発および設計リソース:
-デザイナー向けの 10 の無料 Web UI キットとリソース