最初の「デザイン」から始めましょう。 静的.psdとしての設計に関する問題があります。 アダプティブが登場し、ダイナミクスが追加され、リビングレイアウトの洗練が当たり前になった瞬間に、その関連性を失ったはずだと感じました。 理論的には、静的な.psd-sheksの死は、テーブルレイアウトの逸脱とともに発生しました。 役立ったものを復活させようとするのはなぜですか？！ レイアウトの写真が実際にはテーブルに臭いがして、カットされた形でしかなかったので、これは関連していました。 これで、レイアウトがガイドとして機能します。 ほとんどの場合、ピクセルはトリミングされません。 そして、次のウィンドウでレイアウトを開いたままにします。 このすべての「美」コードを書くために。
デザインは変化しています
今日では、「デザイナー」がウェブから非常に離れた機器で目で識別した動作の膨大な説明を含む写真を撮るのはばかげて不合理です。 デザイナーの画面から出たレイアウトは、レイアウトデザイナーに至るまで変更される場合があります。 そして、写真に反映できない膨大な数のコメントや提案を受け取ります。 別のアプローチは、ネイティブ環境、つまりブラウザでデザインを直接開発することです。 このアプローチがどれほど急速に人気を得ているかを見ることができます。
誰がプログレッシブアプローチを使用しますか？
サンクトペテルブルクWSDのスタッフは、金融アプリケーションのライブプロトタイプを非常に明確に示しました。
文字通り、月の初めに、 BEMupの Alfa LabからのAnton Vinogradov（ @awinogradov ）による優れたレポートがありました。
そしてもちろん、私たちはOdnoklassniki Lego + SourceJSのメンバーの内部製品の束を待っています。 Robertのスクリーンキャスト（ @operatino ）の小さなデモから理解した限り、インターフェイスは準備され、作成され、文書化されたブロックから組み立てられます。 それまでの間、 SourceJSのレイアウトドキュメントを使用してクリーンアップできます。 完全に報われる良い習慣。
そして、もちろん、イリヤ・プハルスキー（ @pukhalski ）によるレポートはPSに残ります。 非常にクールで、同様のトピックを明確に説明しました。
これは私が最近見た中で最も顕著なものです。 さらに、プライベートな会話で議論されたいくつかのポイント。 これらの議論と例は、このアプローチの優位性を理解するのに十分です。 試してみることは残っており、.psdを叫ぶという古い「洞窟工芸」に戻ることはまずありません。
「正しい」環境への移行
彼を対象としていないツールでのWebデザイン開発は、必死で行き止まりのアプローチです。 ドリブルの幸福感を捨てた場合、あまり目立たない代理店でそのようなものと見なされているデザイナーをどのように具体的に呼ぶことができるかわかりません。 これらは、原則として、過度の義務を放棄する「キャラクター」です。 一般に、彼らは常に論理に頼るのではなく、外観全体を描き、チームはその言葉を盲目的に信じています。 多くの場合、彼らは通常の行動に異議を唱えようとして自分のエリアに登ることはありません。 ただし、同時に、レイアウト設計者はレイアウトを送信して、慎重に調べて編集内容を伝える必要があります。 最もばかげたことは、それと比較して、.psdファイルを使用することです。 多くの場合、これはサウンドロジックに反します。 愚かな状況ですね。
コーダーがハードボイルドの疑似設計決定のための「自転車」を書くこととテスターを喜ばせる必要性との間を投げるのを見ると、プロセスにロジックを導入することが本当に励まされます。 これにより、チームは1つの結果に取り組むことができ、プロジェクトを台無しにせずに、彼らの野望を支持します。
Axure、Sketch、Photoshop、およびすでにアマチュアである他のいくつかのあまり知られていないもの：ビジュアル部分に使用されている膨大な数の雑多なツールを混同しています。
アニメーションの場合、物事はずっと悲しくなります。 ここでは、環境へのバインドについては説明しません。 アニメーションの上で、それらはビデオのエディターで歪んでいるか、いくつかの写真が.gifで互いにくっついているように表示されます。 しかし、最終的には、すべてがHTML / CSSで書き直されています。 それは中間段階に広がる非常に骨の折れるプロセスですか？！
統一された開発環境への移行は、定性的に創造的な人をポンプでくみ、構造に追加のロジックを与え、彼らが何をしているかの真剣で、より詳細な理解を提供します。 アニメーションとラバーの両方で、追加の機会が開かれます。 これは、必要に応じて再利用および変更できる実際の製品になります。 そして、ぼやけた意識と完全に萎縮した論理的思考を備えた近視眼的な「アーティスト」によって行われた別の愚かなことだけではありません。
仕事で実装する方法
すべてを非常に簡単に行うオプションがあります。 これを行うには、「デザイナー-デザイナー、...、レイアウトデザイナー」という形式の決まり文句を破棄します。 そして、チームメンバーの強力なスキルを使用します。 基本的な手順は次のとおりです。
1.一般的なガイドの開発
スタイルを設定する必要がある基本要素：見出し、h1、h2、h3、段落、リンク、リスト、表、数字、入力、選択など。 基本的なスタイルを基本的なCSSファイルに入れることができます。 彼は常に私たちの最初のクジラに横たわっています。
2.論理独立ブロック
通常、これらは20〜30個のマークアップされたメインブロックです。 簡単に起動できるC。 将来的には、ライブラリを補充し、より大規模で便利なものにします。 そのような兵器庫ですべての新しいプロジェクトを急襲することはより楽しいでしょう。 たとえば、プロジェクトでよく見られる登録/承認フォーム、コメント、およびその他のブロックです。 それらはすべて慎重に文書化されているため、再利用や変更が簡単です。
私たちはやる：
- ブロック構造のレイアウトのスケッチ;
- ガイドを考慮した一般的な様式（ステージ1）;
- さまざまな状態とアニメーション。
3.グリッド構造自体
サポートされるデバイスとメディアクエリを考慮します。 重要なのは、基本的な基礎を通して考えることです。 適応性のあるファンにとっては、フレームに焦点を合わせる機会があるため、これは最も有用です。これはより有意義なものになります。 オプションとして、高品質のグリッドを検討します（おそらく、既成のソリューションを使用し、必要に応じて修正します）。
4.統合
開発についてあまり考える必要はありません。 事前に準備されたモジュール（ステージ2）をフレームワーク（ステージ3）に統合するだけです。 いくつかの小さなドピルを作り、結果を賞賛するのに十分です。 モジュラーアプローチの魔法を感じてください。
狂信者はアイデアを売る
おなじみのシステムを全体として変更し始めることは、恐ろしいことまたは壊れていることのいずれかです。 しかし、この方法論を宣伝して楽しんでいる人はたくさんいます。 質量は前進する力です。 そこで、あるデザイナーの言葉を引用します。「宗派へようこそ」。 そして、あなたはより少ない静力学を持っています。