タイプセッターとして設計する

あなたのデザイナーは真の天才であり、彼の製品は完璧です。 彼はTKに対する不平等な戦いで勇敢であり、常に勝利を収めています。 しかし、5番目のコーダーは、彼のレイアウトからいくつかのマックを作っていると誓っていますか？ 6番目を探して時間をかけてください。 ほとんどの場合、理由は簡単に取り除くことができます-いくつかのありふれたルールについて天才に伝え、それらに従うように頼んでください。



この記事では、世界を少し明るくするデザイナー向けにいくつかの推奨事項を集めようとしました。 レイアウト設計者に彼の問題について尋ね、この記事を設計者に送ってください。 完璧には限界がないからです。



私がITスペシャリストとして覚えている限り、問題は常に存在していました。 インターフェイスのデザインが美しいフレーズであり、その意味が本当のプロのみが理解していた場合、デザインはユーザーのサイトの印象の少なくとも3分の2を占めていました。 少し簡単になったUIデザインは、デザインからますます分離されていますが、同じ人になることもあります。 いずれにせよ、あいまいな画像やドライプロトタイプをユーザーが操作するものに変換するのはWebデザイナーです。 そして、タイプセッターがこのデザインをできるだけ正確にウェブに転送することが非常に重要です。 望ましい-通常は変更されません。 ピクセルごと。 最終レイアウトが彼に完全に合っている頻度をデザイナーに尋ねますか？ 答えは厳しいものではないにしても、悲しいものになるでしょう。



この理由については長い間話すことができますが、ほとんどの場合、レイアウトデザイナーのせいです。 それは理解できます：デザイン、良いデザイン、デザインのようなものがあります。 しかし、単純なコピーに加えて、コーダーには多くの義務があります。 これにより、サイトの応答が速く、速く、簡単になります。 そのレイアウトはセマンティックである必要があり、画像は縮小またはベクトルである必要があり、フォームはバックエンド用にシャープにする必要があります。 はい、フロントエンド開発者は一般に多くのことを持ち、それが良い場合（設計など）誰がそれを負っています。 したがって、ヒーローはフレームワークを使用して作業を高速化し、最適化します。フレックスボックスのグリッドを使用したブートストラッピングコンバインや独自の自転車は重要ではありません。 レイアウトを開き、スカルプトを開始します。 そしてあちこちで、彼はデザインから少し後退しなければなりません。 または、スタイルシートを膨らませて読みにくくし、不当に大きくします。 結果は常にそれほどではありません。デザイナーは不満を抱いており、フロントエンドは不満を抱いており、世界は少し暗くなっています。



しかし、これは、デザイナーがレイアウトを作成し、それらをチェーンのさらに下に渡すときに、いくつかの重要なポイントを考慮しなかった場合のみです。 もちろん、ここでデザイナーとレイアウトデザイナーの適切な相互作用を妨げるすべてのことを説明することはできません。 はい、そして、このバンドルで発生する問題は、一般的に、当事者の専門的な資質とは関係ありません。 ただし、以下の推奨事項に従うことは、プロジェクトまたはその開発者に損害を与えることはありません。

以下のテキストは、デザイナー向けであり、少しはフロントエンドベンダー向けです。 それで、彼らは運転しました。

アイテムを統合

このサイトには50種類のボタンがあると想像してください。 「続きを読む」から「今年の前半の治療費を計算する」まで。 また、アイコン付きの丸いボタンとリストボタンもあります。 そして、各ページでそれらはわずかに異なります：ボタンが他のものより5ピクセル広い場所、アイコンが右側に移動した場所、コーナーの半径がわずかに異なる場所...もちろん、とてもクールに見えます。 また、設計レイアウトの違いは明らかではありません。 しかし実際には、要素に対するこの態度はいくつかの問題に変わります。



-難しく、長く、高価にします。

-レイアウトデザイナーがサイト全体で視覚的にほぼ同一の要素の1つのみを使用する可能性が高くなります。

-ユーザーは毎回要素の新しい外観に「慣れる」必要があります（ただし、彼自身はこれに気付いていない可能性があります）。

-ほとんどの場合、プロジェクトの開発に伴い、さまざまなボタン、入力などの混乱が発生します。



解決策は簡単です。 すべての標準要素を配置する単一のドキュメントを作成します。 見出し、リスト、段落、リンク、ボタン、フォームフィールド、コントロール、画像のサムネイルなど。 このようなドックは、「UIスタイルガイド」または「フロントエンドスタイルガイド」と呼ばれます。 通常、これはこのような階層化されたソースです。 そして、プロジェクトのあらゆる場所で、これらの要素のみを使用し、それらがここでキャプチャされる形式でのみ使用します。 新しい複数選択はありますか？ スタイルガイドに追加します。



そして、要素だけに限定されるべきではありません。 インターフェイスの原色のセットを作成します-これも便利です。 場合によっては、レイアウトで使用される主なインデントのリストも作成します。



レイアウトデザイナーが経験がある場合、彼はすぐにWeb上で同じ「スタイルガイド」を作成し、そこから単純に要素をコピーします。 一般に、「スタイルガイド」の利点は暗いです。プロジェクトの開発における利便性から、フロントエンドに関わるすべての人の作業のスピードアップまで。

レイアウトの基本を学ぶ

最も議論の余地のある推奨事項の1つです。 多くの人が私に反対し、これは正常です。 しかし、私の経験では、HTMLとCSSの最も基本的な原則さえ理解しているWebデザイナーは、より高価で、より快適に作業できます。 このようなデザイナーは、6種類の見出しがあること、段落には通常下にインデントがあること、リストをネストできることなどを理解しています。 そして、ここではタイポグラフィだけではありません-レイアウトが美しいだけでなく、実現可能で簡単であることが重要です（速度については以下で詳しく説明します）。



難しくありません、信じてください。 毎日数時間の毎日のレッスンで、基本的なHTMLタグとCSS機能の基本を理解できます。 親愛なるクリエイターの皆さん、技術者になり、疑似要素の世界を掘り下げるようにお願いする人はいません。 しかし、あなたはあなたの決定のどれがウェブ上で実行されることができるか、そしてあなたは悪霊と同盟を締結する必要があることを理解する必要があります。

グリッドでの作業を学ぶ

グリッド、グリッド、列-本質的なもの。 簡略化するために、デザイナーのモジュラーグリッドは、レイアウトを条件付きで同じ幅の垂直列に分割し、その間に特定のインデントを入れます。 これらの列内にレイアウト要素を配置し、帰り道がなくなったら、それがどれほど便利かを実感できます 。



グリッドで作業する習慣は、最も有用なものの1つです（朝のランニング、個別の食事、ホットキーの使用後）。 これにより、ドキュメントの視覚的構造を整理し、ブロックを簡単に再利用して、デザインとレイアウトの両方の開発を促進できます。 さらに、人気のあるフロントエンドフレームワークが適応性とともに構築されるのはグリッド上であり、これは重要です-そして、私はこれに戻ります。



デザイナーにとって、グリッドはレイアウトをレイアウトに転送するときに、正確な「一致」の可能性が何度も増加するため、優れています。 レイアウト設計者全体にとって、すべてが簡素化されます。 経験豊富なフロントエンドベンダーは、プロジェクト内でまったく同じ列を作成するだけで、適応性は言うまでもなく、個々のブロックをピクセルごとに比較する時間を無駄にしません。



Photoshopで働く人のために、私はテンプレートの小さな選択さえ提供することができます。 悲しいかな、Sketchを好む人にはそんなことはありませんが、それはGoogleにあります。

順応性を覚える

前の段落で、それは理由のためにすでに2回言及されています。 現在、モバイルトラフィックを無視することは本当の犯罪です。そのためには、棒でむち打ちを導入する必要があります。 過去2年間、モバイルデバイスの画面にサイトの正しい表示を実装する必要がないプロジェクトに出くわすことをやめました。 ただし、多くの設計者は、メインの最も広いデザインオプションを1つだけ作成し続けています。



その後どうなりますか？ このようなレイアウトを受け取ったレイアウトデザイナーには、いくつかのオプションがあります。



-他の権限のために不足しているページレイアウトを要求します。

-彼に送られたものだけを実行する-つまり、非適応レイアウト。

-既存のデザインを自分で調整してみてください。



最初のオプションは多くの場合非現実的です。なぜなら、デザイナーはすでにお金と顧客を受け取っているからです-例えば、田舎者。 2番目のオプションは、フロントエンドプロバイダーが共犯者になり、処罰されるリスクを負うため、表示されなくなります。 この場合、ほとんどの場合、3番目のオプションが使用されます。 レイアウトデザイナは、たとえ非常に優れたデザイナであっても、デザイナではないためです。 例外は非常にまれです。



だから、デザイナー。 お願いします、異なる解像度でいくつかのレイアウトオプションを実行します。 これにより、開発にかかる時間が短縮され、プロジェクトをポートフォリオに組み込む可能性が高まります。これは、プロジェクトを実装するのが恥ずかしくないからです。 さて、もう一度あなた自身のプロ意識を証明してください。



そして、グリッドについてです。 設計でモジュラーグリッドを使用すると、適応性の設計が大幅に簡素化されます。 たとえば、1440px、1200px、960px、768px、600px、および320pxという次の手順（レイアウト幅）はすでになじみのあるものです。 600を480に置き換えることもありますが、これはプロジェクトの個性です。 各ステップに移動すると、列幅は減少しますが、それらの間の距離は変わりません。 上記の段落のリンクを使用して、既製のテンプレートを見つけることができます。

トレンドを最新に保つ

一般的に、ありふれたアドバイス。 しかし、先日、材料設計の原則に精通していないデザイナーを発見しました。 まあ、つまり、彼は概念の一般的な理解を持っていたが、彼は材料の「ガイドライン」について聞いたことがない。 もちろん、ベテランのデザイナーがほとんどあらゆる方向を研究するのにそれほど時間はかかりませんが、基本の知識が不足していると、おいしいおもしろい注文が得られないことがあります。



ただし、設計上の指示に加えて、一般的なフロントエンドフレームワークもあります。 彼らの仕事は、植字、jsなどを含む、サイトの外部部分の開発を簡素化および高速化することです。 デザイナーであるあなたが特定のフレームワークを使用することを好むチームで働く場合、その基本的な機能を研究することはチーム全体の時間と神経を節約します。 また、ブロックの配色やレイアウトだけではありません。きついフレームに追い込まないでください。あなたがクリエイターです。 むしろ、アニメーションの基本的な要素や機能についてです。 たとえば、一部のフレームワークでは、小さな画面に表示されるサイドメニューは、コンテンツを移動するのではなく、コンテンツの上に重ねて表示されます。 また、この動作を変更することは、かなりの犠牲を払う価値がある場合があります。 したがって、最初の段階でフロントエンド開発者とやり取りし、フレームワークとその機能について学習することをheしないでください。



人気から私は名前を付けることができます：



- ブートストラップ 。 特別な紹介は必要ありません。 最初に必要なものはほとんどすべて、すぐに使用できます。 世界で最も人気があります。

- 財団 。 柔軟でモダンな本物のハーベスター。 ブートストラップの価値ある代替品。

- マテリアライズ 。 名前が示すように、材料設計の下で研ぎ澄まされました。 マテリアルスタイルのアニメーションも含まれます。

- マテリアルデザインライト 。 実際、前の兄弟です。 素材のスタイルでプロジェクトをすばやく作成するために必要なものがすべて揃っています。

- イオン 。 Cordovaベースのモバイルアプリケーションを作成するためのフレームワーク。 実際、同じHTMLレイアウトで実装され、異なるプラットフォーム用にコンパイルされます。

- モバイル角度UI 。 前のものと同じですが、ブートストラップレイアウトを使用します。

フロントエンドフレームワークは暗いので、すべてをリストするわけではありません。 必要に応じて、自分でグーグルで検索してください。

サイトの読み込み速度を考慮する

はい、読み込みとWebサイトの作業の速度は、設計段階でほぼ決まります。 私はそれがニュースになることを知っています。 しかし、それは検討する価値があります-そしてそれは明らかになります。 サイトの読み込み速度を決定するものは何ですか？ サーバーと、フロントエンドの曲がった手は除外します。 静力学。 画像、スクリプト、スタイル。



写真では、すべてがはっきりしているように見えます。数が少なければ少ないほど、ユーザーはあなたが期待している形でサイトをより早く見ることができます。 しかし、これは背景画像を放棄する理由ではありませんか？ 最新の開発技術により、レイアウト設計者は異なる解像度で異なる画像を置き換えることができます。 では、なぜモバイルデバイスの画面でデスクトップと同じメガビットの背景を取得するのでしょうか？ さまざまな解像度に合わせていくつかの背景オプションを用意します-レイアウトだけでも、レイアウト設計者はそれらをそこから取り出します。 まあ、またはあなたが絶対に神聖であれば、レイアウトデザイナーに背景付きの既製のフォルダを提供してください。

可能であれば、アイコンまたはシンプルな画像にベクターグラフィックスを使用します。重量が軽く、見た目もきれいです。



スクリプトはデザインに左右されません。これは明らかです。 しかし、設計中にサイトの各平方センチメートルに視差を突っ込んだり、ブロックやその他のホイッスルのアニメーションの外観を作成した場合、誰かがサイトをロードすることはありません。 TKがそれを必要としないなら、私はあなた、親愛なるデザイナーたちに、アニメーションに関与しないようにお願いします。



スタイルについては最初にすでに書きました。 レイアウト内の要素の統一がなく、レイアウト設計者が良心的で勤勉な場合、スタイルシートのサイズはサイト上の画像のサイズに匹敵します。 そして、これはすべて、この混乱をすべてキャッシュするまでブラウザをドラッグする必要があります。 あるプロジェクトで、小さな子猫のサイズ-17メガバイトのスタイルファイルに出会いました。 そして、これは縮小された方法です。 今まで、悪夢は夢を見ています。

最後に、ベクターグラフィックスを学習します

同時に私のお気に入りで最も嫌われているアイテム。 私がこの記事を書こうとしたときに最初に思いついたのは彼でした。 デザイナーに真剣に受け止めてもらいます。



もちろん、SVGに関するスピーチ。 これはベクトル画像用のこのような形式であり、最近ますます話題になっています。 そして、私はエンティティの作成を開始せず、その利点について話します。 それに関連する問題についてお話します。



私自身は、彼女を「擬似SVG」と呼んでいます。 これは、デザイナーがレイアウトデザイナーにSVGファイルを提供するが、どこでも使用できない場合です。 非常に一般的な出来事。 その理由は簡単です。デザイナーは、Photoshopで作業しているときに、アイコンをSVGとして（ctrl + shift + alt + wで）エクスポートしますが、それはラスターです。 このような役に立たないESWGの内部には、通常、次のテキストが含まれています。

<image xlink:href="data:img/png;base64...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このような画像は拡大縮小することができず、実際には、画像とラスターの間に違いはありません。



これは、デザイナーがSVGが何であるかを本当に理解しておらず、SVGを正しく使用する方法を知らないために発生します。 それにもかかわらず、私はそれにもかかわらず、形式を勉強することをお勧めします。 Photoshopで作業する場合は、「羽」でそのような画像を作成してみてください。 または、既製のアイコンセットを使用します。 ここでは、スケッチユーザーの方が簡単です。デフォルトのベクターがあります。 いずれにせよ、「未来のデザイナー」になりたいのであれば、SVGを知る必要があります。 ロシア語で役立つリソースをいくつか紹介します： one 、 two 、 three 。



サーバーへのリクエスト数（hi、HTTP / 2）を削減し、使いやすさだけを目的として、サイト上のすべてのSVGアイコンは、多くの場合、スプライト（このような結合されたファイル）に結合されます。 SVGスプライトを作成するには、次の3つの方法があります。



-手動で、各SVGの内容を1つの共通ファイルにコピーします。

-プログラムにより、さまざまなライブラリを使用します。

-特別なオンラインサービスを通じて。

-

最初の方法は、多くの自由時間がある人に任されています。 2つ目では、すべてが明確です。レイアウト設計者が使用し、特定のスキルが必要です。 ただし、3番目の方法は設計者に適している場合があります。 たとえば、開発中のプロジェクトを指揮し、定期的に新しいアイコンを追加する場合。 次に、デザイナーは、たとえばこのサービスを介してSVGスプライトを個別に変更し、完成したファイルをフロントエンドに送信できます。 些細なことですが、素晴らしい。

フォントを添付する

どのデザイナーも、 「安全な」Webフォントのリストに精通していると思います 。 しかし、それらはしばしば十分ではありません。 レイアウトに従事していたとき、私は定期的にプロプライエタリまたは単純に希少なフォントのレイアウトに出くわしました。 もちろん、多くのデザイナーは最終レイアウトを送信し、それにフォント付きのアーカイブを添付します（そして多くは適用されません）。 ただし、必要なフォントを.ttfまたは.otf形式で用意していても、レイアウトに正しく埋め込むことが常に可能であるとは限りません。



デザイナーにちょっとした秘密を公開したい。 少なくとも彼女にまだ慣れていない人たち。 レイアウトで使用する各フォント（「セーフ」リストに含まれていない場合）は、ttf、eot、woff（またはwoff2、またはその両方）およびsvgの少なくとも4つの形式で表す必要があります。 また、独自のフォントを使用する場合、Webでの使用は多少複雑になる可能性があります。 はい、まったく合法ではありません。



キリル文字をサポートしているかどうかを確認した後、 Google Fontsからフォントを選択することを常にお勧めします 。 このオプションが合わない場合は、フォントの妥当性を確認するか、必要なすべての形式でアーカイブをすぐに準備する価値があります。 このサービスの親切な助けを借りて変換することができます （「EXPERT ...」モードに切り替えることを忘れないでください。「サブセット」セクションで「カスタムサブセット...」にチェックマークを付け、「キリル」の横のチェックボックスをオンにします）。



レイアウトデザイナーの心をつかむための信頼できる方法は、Webに統合するための既製のフォントセットを彼に渡すことほどありません。

エピローグ

もちろん、ソースコード、タイポグラフィ、アイコンセットなどの階層やレイヤーオーバーレイなど、多くのことはここに放置されています。 しかし、この記事は膨大であることが判明し、私が書いていないことのほとんどは、「デザイナーへのアドバイス」の依頼で完全にインターネット上にあります。 ここに、たとえば、 Spaceoddityからの推奨事項がまだあります ： habrahabr.ru/post/173271



そして、はい、意味について。 この投稿で少なくとも1組のデザイナーとレイアウトデザイナーが一致する場合、または数十から2時間を節約できる場合、それを書くのにかかった時間が無駄ではなかったことを意味します。

ありがとう

このポストのアドバイスと画像の選択については常任デザイナーのAndriankaに感謝します。また、有能な要約とヒントについてはGod HtmlMakのフロントエンドに感謝します。