景品でキラーWeb UIのレイアウトを設計する - 究極のガイド
Webデザインの分野は、ほんの数年のうちに息をのむようになりました。世界中で今まで以上に活発なデザイナーがいて、全員が革新的なプロジェクトのアイデアについてコラボレーションしています。そしてこれらのトレンドの多くの背後にある概念はプロのグラフィックデザイナーによって開発されました.
ユーザーインターフェイスを構築するための技術を完全に理解するまでに数カ月、場合によっては数年かかることがあります。あなたはページ要素のサイズと配置、さらにテキストとラベルの読みやすさを考慮する必要があります。ちょっとした空き時間があれば、Webサイトを構築するための最小限のアプローチと、混乱を減らすためのアプローチを学ぶことができます。それでも、考慮すべき設計手法は他にもたくさんあります。.
このガイドでは、いくつかペアにしました。 現代のユーザインタフェース設計技術 と あなたがダウンロードできる景品 と遊ぶ。これが、グラフィックやWebデザインを構築する上でのキャリアに興味を持っている人たちに、やる気を与えてくれることを願っています。プロのWebデザイナーでさえ、次のプロジェクトに役立つこれらの傾向のいくつかを見つけるかもしれません.
フルテンプレートでの練習
ゼロから独自のレイアウトをデザインするスキルがある場合は、テンプレートから始める必要はありません。一方、初心者の方は、フルデザインから始めて細部まで細心の注意を払って作業をする方が快適です。.
ポートフォリオ、ホームページ、ブログ、その他多くのカテゴリ用の完全なPSD Webサイトテンプレートの優れた無料ダウンロードがいくつかあります。これらは、に慣れるために始めるのに最適なデザインです。 “一般的な” Webレイアウト各Webサイトにはページ要素に対するさまざまなニーズがあるため、どの項目が重要かを判断する必要があります。.
これはMartin Fabriciusによって設計された "AppCivilization"と呼ばれるPSDの例です。このレイアウトは、モバイルアプリやWebサイトをデザインするクリエイティブスタジオ向けのものです。一番下に向かって、あなたはポートフォリオの中に展示されたアプリアイコンの小さなパネルを見つけるでしょう。また、デザイン全体が水平方向にヘッダー、トップスライドショー、メインコンテンツ、および暗いフッターに分割されていることもわかります。.
オリジナルソース - ダウンロード
ランディングページの設計
マーティンによって設計された別の景品を見てみましょう。次の例は、あらゆる種類の商品を販売するために使用できるランディングページです。一般的にこれらはユーザーがダウンロードできるデジタルグッズ、すなわちアプリ、写真、アイコン、テンプレートなどです。.
オリジナルソース - ダウンロード
しかし彼のデザインの最良の部分は、初心者が回避するのに非常に柔軟だということです。ヘッダーはまだ大きな画像を含む小さなトップナビゲーションを使用していますが、特に予想されるユーザーアクションは異なります。彼は大きい “それを購入!” 折り目の真上にあるボタン。商品のランディングページでは、これはjQueryのスライドショーよりも注目を集めるでしょう。.
もう1つの優れたUI技術は、ページの真ん中にある小さなiPhone機能表示です。 Martinには、iPhoneのプレビューショット、App Storeボタン、および主な機能の小さなリストが含まれています。訪問者が商品の詳細を探しているときは、フォーマットされたリストを使うよりも物事を単純にすることはできません。.
その他のテンプレート
これが私達がパスでリリースした無料のPSDテンプレートです。
- "BiZ"ビジネスウェブサイトPSDテンプレート
- "ThinkJuice"製品サイトPSDテンプレート
- プロのビジネスサイトPSDテンプレート
- "Polo360"ポートフォリオサイトPSDテンプレート
あなたはこれらの次にも興味があるかもしれません：
- ビジネスウェブサイトのテンプレート
- "近日公開"ページのチュートリアル+テンプレート
メインサイトのナビゲーション
メニューとボタンは、もっと大きなページ要素を作成するためのツールです。あなたのウェブサイトのメインナビゲーションが非常に重要な目的を持っていることを否定することはありません。あなたのサイトがモバイルユーザー向けの可能な代替方法で簡単にアクセスできるようにするためにそれが必要です.
下はステッチの質感効果を持つクールなナビゲーションバーです。ハイライトスタイルは、暗いボックスとして、またはページコンテンツを指す下向きのヒントとして表示できます。このスタイルは何年にもわたって際立っていて、そして正しい設定でとてもよく見えます.
オリジナルソース - ダウンロード
別の似た景品は、によって設計されたこのテクスチャ付きヘッダーナビゲーションです。 エディ・ギル. この2番目のナビゲーションバーに、リンクのリストといくつかの追加のページボタンの両方が含まれているのが本当に好きです。あなたは彼らがウェブのまわりであなたのプロフィールを見つけることができる訪問者に二次リンクを提供したいと思うでしょう.
オリジナルソース - ダウンロード
代替メニュースタイル
典型的な水平ナビゲーションバー以外にも、考慮すべきデザインのスタイルは他にもあります。垂直リンクは、ページコンテンツのためのより多くのスペースを残す異なる小見出しに分割することができます.
例えば、ウェブサイトIcojamによってデザインされた以下のメニュー景品を取ります。.
各見出しは、選択したオブジェクトに基づいて展開したり折りたたんだりするように構築されています。さらに、このデザインでは、各カテゴリの右側に少数のカウンターを配置することができます。これは、各トピックの下にいくつの投稿が投稿されたかを数えるためのブログナビゲーションとして記入するのが最善です。.
オリジナルソース - ダウンロード
ナビゲーションのヒント/チュートリアル：
- 50を超えるクリーンなCSSタブベースのナビゲーションスクリプト
- ブレッドクラムナビゲーションのベストプラクティスと例
- jQueryを使ったモバイルナビゲーションの構築
- CSS3でのブレッドクラムナビゲーションのコーディング
- LESS CSSを使用したナビゲーションの設計
よりきれいなWebフォーム
現代のインターネットの時代は静的な集会場からは程遠いです。ユーザーは絶えず情報を共有し、日常的に互いに対話しています。このテキストとメディアの共有のほとんどは、Webフォームを通じて管理されています。.
私たちはあなたがきれいに見えるフォーム入力とボタンを設計することができる方法のほんの2、3の例を見るべきです。あなたの要素のデザインは、実際にそれらを使用するようにあなたの訪問者を招待することに大いに役立ちます。そしてこれはあなたのサイトの信頼性を高め、より多くのページビューを獲得します。.
ログインフィールド
チェックアウトするPSDのログインフォームの例がいくつかあります。このログインは無料で WPサイエンティスト すべての標準的な要素があります。ログイン/パスワード、送信ボタン、およびセッションCookieを管理するためのチェックボックスの2つの入力フィールド.
この設計モデルは、jQueryを介して効果を実装できる場合に最適です。右上の矢印の頭はポップアップスタイルのウィンドウ設定を考えさせます。これは、ユーザーが登録リンクをクリックするまでフォームを非表示にしておくことで、Webサイトのスペースを節約するための素晴らしいテクニックです。.
オリジナルソース - ダウンロード
下のフォームはデザイナーのおかげで無料でダウンロードできます ギル・フイブレヒト. 彼は粒状の背景と紙の質感を持つ同様のパターンを使用しました。私がGilのデザインに関して特に好きなのは、 "特大"要素です。それは、ページ全体を埋めるログインフォームにもっと友好的に着地しています。ユーザーは自分が入力している内容を簡単に確認でき、混乱が少なくなります。.
オリジナルソース - ダウンロード
CSS3を使用しているフロントエンド開発者としての経験があるなら、このグラフィックをコードに変換するのはとても簡単です。ボタンと入力フィールドに、選択した外側のグロー効果と丸みを帯びた角を実装することもできます。.
連絡先
あなたが実質的にすべてのウェブサイトで見つけるもう一つのフォームはコンタクトフォームです。これには通常、送信者の名前、電子メール、およびメッセージの内容のフィールドが含まれます。.
下記の景品は、カスタムテクスチャとアイコンを使った素晴らしい例です。.
デザインも使用 プレースホルダーテキスト ラベルの代わりに。これは、フォームが最初にロードされるときに各フィールドがデフォルト値（例：あなたの名前）で設定されることを意味します。ただし、入力を始めるとプレースホルダがクリアされ、代わりにコンテンツが表示されます。すべての規格準拠のブラウザがこの効果をサポートし、ページ上のスペースを節約できます。.
オリジナルソース - ダウンロード
つかむためのもう一つの素晴らしい景品は、才能のあるによって設計されたこのタブ付き連絡フォームです。 Jonno Riekwel. この設計ははるかに単純で、各入力の上に機能ラベルがあります。これは、会社内のさまざまな部署を介してメッセージを送信する必要がある大企業や新興企業に最適なソリューションです。.
オリジナルソース - ダウンロード
Formsチュートリアルに連絡してください。
- ログイン/登録フォーム：アイデアと美しい例
- 段ボール紙効果ログインフォームを作成する
- AjaxベースのHTML5 / CSS3お問い合わせフォームを作成する
リボンとバナー
たった6年か7年前、丸みを帯びた角が人気のあるデザイントレンドで上昇し始めました。今度はドロップシャドウとコーナーリボンがさらに登場しました.
オリジナルソース - ダウンロード
これらの要素のいくつかは、コメントカウンターやブログの発行日など、デザインのハイライトとして使用できます。上のステッチリボンは、訪問者の注意を引くポートフォリオやプロジェクトページに最適です。デザインが上から落ちてくるような、同様の垂直リボンを試すこともできます。.
これらの小さなページ効果はあなたのレイアウトを向上させるのに非常に役立ちます。訪問者は注意を払い、これらの審美的な快楽を気に入るはずです。しかし、小さなコーナーリボンはこのデザイントレンドのほんの一部にすぎないと考えてください。.
オリジナルソース - ダウンロード
加えて、本格的なバナーデザインは、ブランドの認知度を高めるために非常に人気があります。あなたのロゴ、ナビゲーション、ホームページ、あるいは注目のブログ投稿でさえこれらを利用することができます。その意義は、優れた設計能力を備えた事実上無限です。.
コーナーを包む
もう1つの非常に具体的なリボンバナー効果は、ページの隅にデザインを折り返すことによって実行されます。これはあなたのページが3-Dであるという錯覚を構築し、リボンはあなたのウェブサイトの上部の周りに巻きつけられます.
以下のデザインは100％無料でダウンロードでき、あなた自身のプロジェクトのアイデアに使うことができます。あなたはこれがどのように訪問者から注目を集めるであろうかそしてなぜこの傾向がそのような狂乱に成長したかを見ることができます。バナーを使いすぎないように注意してください。まとめて言えば、これらは古い "web 2.0"の光沢のある/鏡のような効果のように非常に迷惑になる可能性があります。.
オリジナルソース - ダウンロード
ボタンでデザインする
ハイパーリンクは別として、ボタンを使って訪問者から最も対話的に操作することができます。これらのページアイテムは、jQueryやAjaxの呼び出しを使用して、無料のダウンロードなど、静的コンテンツへのリンクにボタンを使用すること以外は、何でも実行できます。!
下記のUIキット マット異邦人 ボタンだけではありません。彼のPSDセットは、似たようなフォームを構築するためのグラデーションやテクスチャを手に入れようとしている初心者にとっては素晴らしいものです。多くの場合、単体のPSDよりもUIキットのほうがはるかに高品質のボタンを見つけることができます。.
オリジナルソース - ダウンロード
バリエーションを作成する方法
これらのテクニックの練習に時間をかけているうちに、時間をかけてさまざまなスタイルを作成したいと思うでしょう。これにより、異なるプロジェクトやレイアウト間で同様のボタンが切り替わることがあります。良い例は、デザイナーによって提供される乳白色のボタンセットです。 ロバート・ファン・クリンケン.
オリジナルソース - ダウンロード
元の3つのボタンのそれぞれは、ホバーとアクティブ状態が似ていることを除けば、グラデーションスタイルが異なります。 Photoshopで作業するときは、グラデーション間で色を合わせるか、色をエフェクトレイヤーに移動する必要があります。このことを理解していれば、ダウンロード用に設定した独自のボタンを無料で構築することもできます。!
オリジナルソース - ダウンロード
木と紙のテクスチャ
あなたがあなたの基本的なレイアウトデザインを盛り上げる必要があるとき、あなたはもっと巧妙な方法に向かって動かなければならないでしょう。テクスチャは、CSS背景やセット幅のコンテンツを通して正しく実装できれば、いつでも歓迎します。そして私が見た中で最も人気のある二つのテクスチャは木と白紙です。.
メモ帳のアイデアは本当に単純ですが、ユーザーインターフェイス要素の一部として、またはレイアウト全体に組み込まれているかのいずれかで、クールなブランドデザインに仕上げることができます。しかし、紙は必ずしもそれ自体では最高に見えるわけではなく、別の風合いがスタイルの調和を助けることがあります。.
オリジナルソース - ダウンロード
画像は目立ち、外殻に包まれて素晴らしく見えます。テクスチャの全体的な概念はあなたのウェブサイトに特定の感情や感情を与えることです。木のテーマは、家庭や自然の感覚を呼び起こすことができます。 Jeremiah Wingettによるダウンロード用の素晴らしい木製のWeb UIキットさえあります。あなたが創造的に感じているならば、あなた自身のテクスチャーのいくつかをまとめてみて、そしてそれらがウェブベースの環境でどのように機能するかを見てください.
28高解像度木目テクスチャ
結論
最も優れたWebデザイナーは、毎日練習して、失敗しても最終目標が妨げられないようにすることです。成功した試みと失敗した試みの両方から迅速かつ迅速に対応する必要があります。このガイドのコツと景品は、Webプロジェクトのためにさまざまなページの概念を構築する方法を学び始めるための良い出発点となるはずです。そして、ポストディスカッションエリアでこの問題についてあなたの考えを読みたいと思います。.
