質問: webデザインのモックアップ仕様をフロントエンド開発者に伝える方法は? スライスのためにwebサイトの設計仕様をフロントエンドの開発者に伝えるためのベストプラクティスを探しています。開発者がデザインの視覚的表現よりも多くの情報を必要とすることを知っているので、コミュニケーションの便利な方法を探しています詳細なデザイン仕様のさまざまな要素間のピクセルやパディングなど、グラフィックモックアップの=それらをhtmlとcssに効果的に分割できるように設計します。 adobe illustrator cs5を使用して、グラフィックモックアップを作成しています。私たちはフロントエンドの開発者と協力関係にあります。質問:webデザインの仕様を開発者に明確に伝えてweb上で実行できるようにするための良い方法やベストプラクティスは何ですか?
回答: フロントエンド開発者が「スライス」、つまりhtml/cssへの変換を行う場合(最新の開発者ワークフローでは決して実行されない古いスライスと混同しないように、場合によっては)、. psdが必要になります。ファイル。そこから、組み込みのツールを使用してすべてを測定します。デザインについては、svgファイルとしてエクスポートする必要があるベクトル形状が必要でない限り、photoshopはillustratorよりも優れたツールです。彼らに必要なのは、彼らがプロジェクトに使用するフレームワークを尋ねることです。例:彼らがbootstrap(99%を使用)を使用する場合)、それを考慮する必要がありますコンテナは左右に15pxのパディングを持っています行は左右に-15pxのマージンを持っていますcol- *は左右に15pxのパディングを持っていますつまり、コンテンツは左から15pxで始まり、text1とtext2の間に30pxの距離があります...あなたがこの措置に従えば、フロントエンドの開発者はあなたを愛するでしょう:)彼らはフレームワークに逆らう必要がないので彼らがずっと習慣になっているなら、彼らが本当に速いサイトを必要とするなら良い習慣、彼らはあなたの創造性を解き放ちます:)...