コンテンツ
- コードを使用して設計する利点
- 最初にデータ
- 無料のモバイルの良さ
- 共通言語を見つける
- より速く学ぶ
- 迅速な反復
- 立ち上げまでの時間の短縮
- なぜHTML5なのか？
- 魔法のデータ属性
- CSS3 –これは新しいPhotoshopです
- Sass + Compass：魔法のように美味しい
- jQuery：ああ、はい、できます
- フレームワーク
- 最終的な考え
この記事は、ウェブデザイナーと開発者向けの世界で最も売れている雑誌である.netマガジンの235号に最初に掲載されました。
私は必要以上の仕事をすることの大ファンではありませんでした。私は、私または私のチームをより効果的にする能力に基づいて方法とツールを評価する傾向があります。彼らはどれくらい早く私たちを実用的な製品に導きますか？彼らはコミュニケーションにおいてどれほど効果的ですか？彼らは私たちの邪魔にならないのですか？
何年にもわたって、私は自分の設計プロセスとツールを調整してきました。私はそうし続けると思います。それがテクノロジーとウェブのためのデザインの本質です。この業界は常に進化しています。私たちのプロセスとツールも進化する必要があります。
HTML5とCSS3を使用すると、Photoshopから離れて、生き生きとした息を呑むようなデザインに向けて、より多くのデザインプロセスを上流に移行することが容易になります。 Foundation、Bootstrap、jQueryなどのツールを使用すると、設計プロセスをより親しみやすいコードに移行できます。
コードを使用して設計する利点
まず、ワークフローからPhotoshopやその他のビジュアルデザインエディターを削除することは推奨していません。代わりに、その設計をコードに早急に移行することの利点に焦点を当てます。
最初にデータ
HTMLを使用したデザインについて私がいつも気に入っているのは、データファーストの観点から考えることを奨励することです。対照的に、Illustrator、OmniGraffle、Balsamiqなどの描画プログラムを使用する場合は、ボックスから始めてデータを入力します。
HTMLでは、目次を作成するようなDOM（ドキュメントオブジェクトモデル）を作成します。これは、意味のある階層を備えた真の情報デザインへの回帰です。 HTML5は、記事、セクション、ヘッダー、脇、フッターなどの新しいセマンティック要素を追加することで、さらに一歩進んでいます。このデータファーストのアプローチは、モバイルファーストのレスポンシブデザインとうまく調和しています。
無料のモバイルの良さ
これを読んでいるなら、おそらくモバイル向けに設計しているでしょう。そして、1つか2つのフォームをデザインしなければならない可能性があります。 HTML5を使用すると、幸運に恵まれます。 HTML5より前は、入力タイプはほとんどテキストまたはパスワードフィールドでした。 HTML5では、次のような多くの追加入力タイプが導入されました。
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">
これらの追加のユニークな入力タイプの本当に素晴らしい点は、iOSとAndroidのモバイルブラウザがそれらを認識し、特別なjQueryプラグインやハックを必要とせずに、状況に応じたキーボードを自動的に交換することです。ああ、そしてあなたのブラウザが何を知らないのなら input type = "email"> つまり、デフォルトでテキスト入力になります。
共通言語を見つける
「私たちのデザイナーと開発者が同じ言語で作業できるのは素晴らしいことです」–Inflectionのアプリケーション開発者であるJohnDrago氏。
これがおなじみのように聞こえるかどうかを確認してください。私は、Ruby、Python、Java、または.NETで自分の周りのサークルをコーディングできる6人のサーバー側アプリケーション開発者がいる会議室にいます。私は唯一のデザイナーです。私の提案のいくつかは、実装するには複雑すぎるため、最初は却下されました。ホワイトボードに近づき、デザインを実装する方法について、ボード上にHTMLとCSSを書き始めます。突然会話のトーンが変わり、開発者の1人がしぶしぶ言いました。「ええ、そうです。そうすればうまくいくでしょう」。
私の設計プロセスの多くをコードに移行することで、開発者との会話が改善されました。コードでデザインを作成する方法を知ることで得られる尊敬の層が追加されます。その尊敬を得るために専門家である必要はありません。私のHTMLとCSSのスキルは堅実ですが、JavaScriptのスキルはせいぜい平凡です。そして、私はそれを認めることに恥ずかしがり屋ではありません。それでも、フロントエンドまたはサーバー側の開発者と協力する場合、共通の言語で話すことができる、または途中で会うことができるという事実は大きな利点です。
より速く学ぶ
ワイヤーフレームとビジュアルコンポジットは計画に役立ちますが、これらの静的アーティファクトは理論上のものです。誰かにインタラクションを説明しようとしたが、「私はそれを見なければならないだろう」と答えてもらうために何回試みましたか。プロトタイプにたどり着くのが早ければ早いほど、人々が対話できるものになり、デザインを体験してアイデアが機能するかどうかをすぐに確認できます。
迅速な反復
プロダクションに出荷された最終的なデザインがPhotoshopのコンプと完全に一致したのはいつでしたか？ほとんどは決してない。デジタル製品の設計では、変化は絶えず起こります。さらに、数十の画面で見出しのサイズを22ptから24ptに増やすなどの変更は、Photoshopで数時間かかる場合があります。スマートオブジェクトは、Photoshopである程度のオブジェクト指向デザインを提供します。残念ながら、私が知っているほとんどのビジュアルデザイナーは、スマートオブジェクトを十分に活用していません。 CSSを使用すると、デザインへのより体系的なアプローチが促進されるため、活版印刷の変更には数時間ではなく数分かかります。
すべてのボタンの線形グラデーションを変更するのはどうですか？または境界線のサイズ？四角い角から2pxの丸い角に変えてみませんか？ Photoshopでは、これには数時間かかる場合がありますが、それでもコーディングする必要があります。コードでデザインする機能は、ビジュアルデザインを繰り返すためにPhotoshopに戻るというラウンドトリップを回避するのに役立ちます。 CSS3とSass（この記事の後半で説明します）を使用してこれらの変更をコードにアップストリームで移動すると、リアルタイムで数分しかかからない可能性があります。
立ち上げまでの時間の短縮
何年にもわたって、設計ワークフローの多くを上流のコードに移行するにつれて、実際の改善が見られました。市場投入までの時間が約20〜30％短縮されました。これを実行すればするほど、重複する作業に費やす時間が少なくなります。 PhotoshopまたはFireworksにアクセスしてから、コードで作業を繰り返すために費やすサイクルが少なくなっています。
ある時点で、デザインは、CMS、Railsアプリ、またはその他のものであるかどうかにかかわらず、ある種のバックエンドとインターフェースする必要があります。私の設計作業のほとんどはコードで行われているため、統合は遅かれ早かれ行われます。数年前、私のクライアントの1つであるPointRollは、5日でプロトタイプから本番環境に移行しました。
なぜHTML5なのか？
HTML5は、以前のバージョンのHTMLよりも簡単です。文書型宣言を例にとってみましょう。以前のバージョンのHTMLでは、 DOCTYPE このように見えました：
！DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
そして、6つの異なるバージョンがありました。幸いなことに、HTML5 DOCTYPE このように見えます：
！DOCTYPE HTML>
真剣に。それでおしまい。驚くほどシンプル。
標準のHTMLページを作成する場合、ヘッダー、メインコンテンツ領域、サイドバー、フッターなど、多くの一般的な要素があります。あなたは以前にこのようなものを見たことがあると確信しています：
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
そこには異常なことは何もありません。しかし、コンテンツが入力されると、このテンプレートはdivスープに変わります。対照的に、HTML5の新しいセマンティック要素を使用すると、次のように、はるかに単純でスキャンしやすいものが得られます。
header> nav> / nav> / header> article> aside> / aside> / article> footer> / footer>
それを見てください。理にかなっている何か。
魔法のデータ属性
HTML5には、独自のセマンティックな意味を作成する機能を提供するもう1つのすばらしいフックが付属しています。 データ-。以前は、DOM要素に意味のあるものを割り当てたい場合は、ID、クラス、およびロールに制限されていました。
残念ながら、IDは一意である必要があります。クラスは普遍的ですが（yippee！）、クラスを使用するとすぐに混乱する可能性があります。役割は十分に活用されていない資産であり、ARIAに重要な意味を提供します。最近、Inflectionで開発しているイベント追跡分析プラットフォームにデータを使用しています。私たちはデザインのテストの大ファンです。双方向性の高いアプリケーションやページで作業する場合は、ページ内の顧客エンゲージメントについてより詳細な洞察を得たいと考えています。
入力します データ-。これを使用すると、「独自の定義」の意味モデルを割り当て、渡し、フックすることができます。したがって、たとえば、これを行うことができます。
input type = "button" data-id = "facebook" dataregion = "main" data-event = "register"> input type = "button" data-id = "twitter" dataregion = "main" data-event = "register "> input type =" button "data-id =" linkedin "dataregion =" main "data-event =" register ">
JavaScriptを使用してリスナーをページに添付し、顧客がこのボタンにカーソルを合わせるかクリックするたびに、そのアクティビティを追跡できます。 OAuthを介してTwitterに登録した人を追跡するだけでなく、Facebook、Twitter、LinkedInの順にカーソルを合わせ、最終的にOAuthモデルにTwitterを選択することにしました。
これをPinterestのようなサイト、または顧客がタイルをドラッグアンドドロップして興味に基づいて並べ替える新しいMyspaceデザインに拡張することを想像してみてください。または、興味のないタイルを非表示にすることもできます。 データ- 属性を使用すると、定義できるものに意味的な意味の追加レイヤーをアタッチまたは割り当てることができます。 Ajaxに大きく依存しているサイトやアプリの場合、Ajaxは無限の機会を開きます。
CSS3 –これは新しいPhotoshopです
CSS3は、背景画像、スライス、および悪名高い「引き戸」技術を必要としていた、まったく新しいレベルのデザインルックアンドフィールをもたらしました。ありがたいことに、それはすべて過去のものです。
直線的なグラデーション、丸みを帯びた角、活版印刷効果をもたらすテキストシャドウ、ホバーでの輝きを備えた派手なボタンの作成を見てみましょう。これらのテクニックを学ぶことは大いに役立つでしょう。それらのそれぞれは、独立して、またはさまざまな組み合わせで使用して、今日のWebでトレンドとなっている現在の視覚的な熱さのほぼすべてを引き出すことができます。
まず、デフォルトにいくつかの調整を加えましょう ボタン> そして input type = "submit"> 要素。標準のCSSリセットのいずれかを使用していると仮定して、サイズと呼吸の余地を少し追加します。
/ *ボタンを取得したボタンボタン。======================================= * * / button、input [type = "submit"] {高さ：2.7em;パディング：.4em .7em;行の高さ：1.9; }
ヒント： 送信されるボタンと入力は、スタイルを変更するのが難しい場合があります。行の高さを1.6以上に調整することで、内部に追加のdivまたはspanが必要になるというハックを回避できることがわかりました。 ボタン> 鬼ごっこ。
ボタンの問題を「修正」したので、次のように作成できます。 .btn 丸みを帯びた角、直線的なグラデーション、輪郭、そして活版印刷の外観を備えたすっきりとしたボタンを提供するクラス。
.btn {表示：インラインブロック;ボーダー：1px実線＃d4d4cc; -moz-border-radius：4px; -webkit-border-radius：4px; border-radius：4px;パディング：.4em .7em;背景：＃edeff2;背景：-webkit-gradient（linear、0％0％、0％100％、from（#fefefe）、color-stop（0.55、＃edeff2）、to（＃e4e6e9））;背景：-moz-linear-gradient（センタートップ、＃fefefe、＃edeff2 55％、＃e4e6e9）; -moz-box-shadow：rgba（160,172,187、.7）0 0 .2em 0; -webkit-box-shadow：rgba（160,172,187、.7）0 0 .2em 0;ボックスシャドウ：rgba（160,172,187、.7）0 0 .2em 0;色：＃6c7786;フォントサイズ：1.1em;テキストシャドウ：#fefefe 1px 0 1px;行の高さ：1.375em;カーソル：ポインタ; }
そして、を使用して微妙な輝きを持つ素敵なホバー効果 ボックスシャドウ 方法：
.btn：hover、.btn：focus {-moz-box-shadow：＃129ceb 0px 0px 2px; -webkit-box-shadow：＃129ceb 0 0 2px;ボックスシャドウ：＃129ceb 0 0 2px;背景：＃e6e9eb;背景：-webkit-gradient（linear、0％0％、0％100％、from（＃f7f7f7）、color-stop（0.55、＃f6f6f7）、to（＃e6e9eb））;背景：-moz-lineargradient（センタートップ、＃f7f7f7、＃f6f6f7 55％、＃e6e9eb）;色：＃45484b;テキストシャドウ：rgb（255,255,255）1px 1px 0;ボーダーカラー：＃c9c9c0; }
今、私は線形グラデーションコードを書くのが好きではありません。長くて紛らわしいです。ご覧のとおり、私はのバージョンのみを含めました -moz, -webkit、および標準モデル。 -oバージョンと-msバージョンを含める場合は、コードを2倍にする必要があります。
他に2つのオプションがあります。 1つはCSS3ジェネレーターです。 ColorZillaを含め、Web上で利用可能なものがいくつかあります。ただし、ゲームを少し強化したい場合は、Sassに飛び込むことを検討してください。Compassと組み合わせると、それは天の恵みです。
Sass + Compass：魔法のように美味しい
CSS4ユニコーンエディションを期待するのをやめることができます。ここにあり、Sass + Compassと呼ばれています。 SassはSyntacticallyAwesome Stylesheetsの略です。CSS3の従来の利点をすべて継承し、変数、ミックスイン、エクステンダー、その他の機能を追加します。
私は最近、同じ青の色合いで30を超えるバリエーションを持つ5,000行のCSSファイルをリファクタリングしました。 Sassでは、すべてのバリエーションを次のコードに置き換えました。
色：$ blue;
定義することによって $ blue 私の中で _variables.scss ファイルの場合、すべてのCSSまたはSCSSファイルが参照できるデフォルトの色を作成できます。 CSSを書いている人は誰でも使用できます $ blue スポイトの使用、16進コード、RGB、RGBA、HSLカラーの検索について心配する必要はありません。
その線形グラデーションコードを覚えていますか？数行のコードを書く代わりに、これはどうですか？
@include background（linear-gradient（＃b1cfdc、＃7a9cac））;
SassとCompassに手間のかかる作業を行わせ、正しい構文を生成させます。色の暗いバージョンまたは明るいバージョンが必要だとします。 Photoshopでスポイトを動かしたり、Sassでlighten / darkenコマンドを使用したりできます。
@include background（linear-gradient（darken（$ litegray、2％）、darken（$ off-white、5％）））;
これにより、2％暗くなった線形グラデーションが作成されます $ lite-灰色 そして5％暗くなった オフホワイト。ボイル！ HEXコードやRGBコードも必要ありません。
jQuery：ああ、はい、できます
告白します。 JavaScriptは私を脅迫するために使用されました。それから私はjQueryを見つけました。私はJavaScriptの第一人者であるとは主張しませんが、jQueryを使用するために必要なほぼすべての種類の遷移または関数を実行できると確信しています。
たとえば、[新しい番号の追加]リンクをクリックして、入力した2番目の電話番号を画面に表示する機能を考えてみましょう。 jQueryを使用すると、次のように記述できます。
//-プログレッシブリビール-// $（ ’。new-number’）。click（function（）{$（ ’。alt-number’）。fadeIn（ ’fast’）;}）;
より高度なものをお探しですか？おそらくそのためのプラグインがあります。基本的な動作は簡単で、複雑な動作はjQueryでアプローチできます。
フレームワーク
今日最も堅牢なフレームワークの2つは、FoundationとBootstrapです。さて、CSSフレームワークを却下する前に、何か質問させてください。 jQueryを使用していますか？ Ruby on Rails？ Django？すべてのフレームワーク。
jQueryやRoRと同じように、FoundationとBootstrapは、私たちが何度も何度も行うこと（リセット、タイポグラフィ、グリッド、フォーム、ボタン、ナビゲーション、リストなど）がかなりあることを認識して生まれました。 FoundationとBootstrapはどちらも、ヘルパークラスを使用してレスポンシブデザインをサポートします。どちらも十分に文書化されており、ロードテストが行われているため、自信を持って使用できます。
2つの主な違いの1つは、BootstrapはCSS前処理用のLESSシステムに基づいているのに対し、FoundationはSassに基づいていることです。私はその追加機能のためにLESSよりもSassを好みますが、SassとLESSはどちらも従来のCSSをバラバラに押しつぶします。
フレームワークに関する最後の考え。他の人のフレームワークの余分な膨張を継承したくない場合は、既存のフレームワークを選択してそれを骨まで剥ぎ取るか、いくつかからチェリーを選択して自分でロールすることを検討してください。いずれにせよ、毎回ゼロから始める理由は本当にありません。
最終的な考え
あなたのデザインが最終的にどうなるかをもっと細かく制御したいですか？より多くのプロセスをコードの上流に移動します。 HTML5はついにDOMに何らかの意味をもたらします。無意味なものへの良い乗り心地 DOCTYPEsとdivitis。 CSS3は新しいPhotoshopです：線形グラデーション、ボーダー半径、ボックスシャドウFTW！また、Bootstrap、Foundation、Sass、jQueryなどのツールを使用すると、設計をコードにアップストリームで移行することがこれまでになく簡単になります。
CreativeBloqでHTML5の55のすばらしい例を見つけてください。
