多くの人々は、Webデザインサービスを「品質」と表現する傾向があります。 しかし、ここで「品質」という言葉は何を意味するのでしょうか、デザインが品質であるかどうかをどのように判断するのでしょうか？ さて、Webデザインの品質を定義する方法はいくつかあります。 結局のところ、高品質のWebデザインを作成できるものを決定したら、同じ手法を使用して独自のスタイルを磨くことができます。
ウェブサイトのデザインにおける品質の理解方法を説明するために、いくつかの推奨事項と例をまとめました。
01.ページ上のオブジェクト間の距離
優れたWebサイトの主な利点の1つは、設計要素間の距離を合理的に使用できることです。 特定の要素がページ上でどのように配置され、どのように配置されるかを慎重に検討すると、全体としてその外観を大幅に改善し、ユーザーに高級感を与えることができます。
設計要素間の正しい距離を確立するには、最初にWebページを構成するすべてのオブジェクトを注意深く調べる必要があります。 全体像を見ると、オブジェクトを最適に配置する方法をよりよく理解できます。 ページを縮小し、デザインを別の角度から見ると役立つ場合があります。
要素の配置の成功例
Good.isの絶好のロケーション
ご覧のとおり、このページは非常にオープンでクリーンなスペースの感覚を作り出します。 これは、テキストと写真のブロックの周囲にかなりの距離を置くというデザイナーの決定によるものです。
Digital Mash Webサイト上の要素間の非常に良い距離
ページ上の要素を互いに相対的に正しく配置すると、より魅力的に見え、より頻繁にクリックされます。 Digital MashのWebサイトは、非常にフレンドリーなデザインの好例です。
Creatica Dailyの空き容量
そして再び-オブジェクト間の距離は、それがそれ自体で話すことができるようにコンテンツを強調するのに役立ちます。 ページにはあまりコンテンツはありませんが、サイトの作成者は大きな空きスペースを残すことを恐れませんでした。 ページ上に数行のテキストしかない場合、これはそれらが多くのスペースを割り当てられないことを意味しません。
たくさんのポストボックスウェブサイトスペース
Postbox Webサイトをよく見ると、エッジの周りにどのようなインデントが行われているのかがわかります。実際、それぞれ60ピクセルです。 それは少し多いように思えますが、実際にはそれはうまく見えます。
オブジェクト間の不適切な距離
コンテンツ要素間の距離を決定する際の主な間違いは、コンテンツ要素をページの端に固定することです。 オブジェクト自体がいかにスタイリッシュであっても、ページ上でオブジェクトを絞りすぎると、スタイルと品質が大幅に失われます。
オブジェクト間の距離が不十分な例
前のセクションでは、PostBoxのWebサイトでインデントが成功したことを示しました。以下では、オブジェクト間の距離が不十分な場合にどのように見えるかを示すために、それを模倣しました。 これで、オブジェクトの間違った配置がどれだけデザインを台無しにするかを見ることができます。 この場合、Webページは大幅に失われ、品質感は失われます。
オブジェクトの配置のヒント
ページで使用する空き領域の量については、それぞれの場合に新たに決定する必要があります。 したがって、各要素の周囲に必要な正しい距離を決定できるように目を訓練し、この知識を設計に使用する必要があります。 簡単ではありませんが、練習が必要です。
- ガイドラインを使用したグリッド設計で使用
グリッドを使用すると、オブジェクト間の距離の重要性を確実に理解できます。- 何度もやり直してください
試行錯誤によって、インデントがどうあるべきかを判断できます。- 空き領域は無駄ではありません
ページに空のスペースがある場合は、入力する必要はまったくありません。- より少ないが、より良い。
より大きなページに合わせようとするのではなく、コンテンツを少なくし、空きスペースを追加して、重要な情報のみを投稿します。
02.最後のピクセルへの完璧さ
デザインが「頭に浮かぶ」とき、これはすぐに明らかになります。 時にはそれがすべて細部に依存することもありますが、多くは気づかないこともあります。 「最後のピクセルへの完璧」線、エッジ、および境界線に細心の注意が払われると、このメソッドを呼び出します。 線だけを挿入したり、小さなグラデーションを追加したり、ライトグラデーション、幅1ピクセルのシンプルなシャドウ、まぶしさなどを追加したりできます。 このアプローチで知られるデザイナーの中には、Collis Ta'eed、David Leggett、 Wolfgang Bartelmeが含まれます。
ピクセル完全性の例
Envato Webサイトの詳細への注意
以下にいくつか例を示します。 例1では、緑色のプレートの幅が1ピクセルの明るい緑色の境界線であることがわかります。 例2では、ブロック内に明るいグラデーションシャドウを使用し、上に1ピクセル幅の白い境界線を使用します。 スマート-影を使用して、上からグレアの印象を作成します。 背景の緑の表面には小さくて非常に明るい影があります。これにより、下の白いブロック内のきれいで明確な細部に注意を引くことができます。 そのような詳細はほとんどないように見えますが、ページ上のすべてがポリッシュでわずかに光沢があるという印象を作成するのに役立ち、オブジェクトがフラットな静的レイアウトではなくページの上部に配置されているかのように、3次元のリアリズムの感覚を作り出します。
Tutorial9.netの詳細への注意
デビッドレゲットはピクセルスムージングについてよく知っています。 彼の最近のtutorial9.netの再設計は、多くのピクセルスムージング技術の混合です。 例1では、単純な1ピクセルの強調表示を上部に追加するだけで、タブの外観が少し滑らかになっていることがわかります。 例2では、多くの方法が使用されました。 カメラアイコンの落下影、白い領域での明暗法の使用、ナビゲーションバーの上部の1ピクセルのハイライト。
RedBrick Healthのピクセル完璧なボタンとセパレーター
Ryan Scherfによって作成された美しいナビゲーションバーは、高品質のWebデザインを作成するためにピクセルパーフェクトを使用したもう1つの例です。 ピンクのボタンには1ピクセルのフレアがあり、リンク間の分割線は同じ品質と詳細で作成されています：ご覧のように、ライアンはグレーのセパレーター線を使用する代わりに、すべてが平らに見えないように1ピクセルのフレアを追加しましたそして二次元。
ピクセルの完全性はグランジとは無関係ではありません：AvalonStarウェブサイト
そしてここに美しいAvalonStarがあります：クレイジーなグランジスタイルのブログです。 しかし、乱雑なグランジデザインでも、1ピクセル幅のまぶしさは壮観に見えます。 例1を見ると、茶色の上部パネルでグラデーションシャドウがどのように使用されているかがわかり、下の緑のボックスの上部に1ピクセルのフレアがあります。 上部の暗いトーンと幅1ピクセルのまぶしさの組み合わせにより、ブロックはわずかに光沢があります。
デザインエクセレンスのヒント
ここでの主なことは練習です。 例でわかるように、幅が1ピクセルの明るい線などの単純なものは、スタイルと深みを作品に追加できるため、息をtakingむようなボリュームのあるディテールやグラデーションに頼って本当に膨大な何かの印象を作成する必要はありません。
- 詳細への注意
ページのコンテンツを補完する小さな詳細が成功の鍵です。- ピクセルで考える
境界線、グラデーション、線、影など 目的の効果を得るために巨大である必要はありません。- 前後
作業の結果を比較します。さまざまな効果を適用する前後のページの外観。 次に、それらの効果を確認できます。
PS次の記事を読んでください：Webデザインの品質とは：例と推奨事項。 パート2
うまく設計されたタイポグラフィの例について話しましょう。