2012年に注目すべき15のWebデザインの傾向

これまでのところ、2011年はデザインとインターネット技術にいくつかの驚くべき変化をもたらしました。 Web開発は、プロセスを合理化するのに役立つ無数のオープンソースライブラリはもちろんのこと、学習に飛び込むためのはるかにスムーズな課題となっています。それでも、グローバルデザインコミュニティはタオルを投入するのにはほど遠いようです.

ここ1年で急成長した15のアイデアを紹介します。これらのトレンドには、2012年に移行する際に大きな役割を果たす可能性が高いWebおよびグラフィックデザインの技法が含まれています。.

ありがたいことに、これらの機能を実装する方法は理解しやすくなり、コードが大幅に薄くなっています。.

1.レスポンシブインターフェースデザイン

平均的なユーザーエクスペリエンスは、Webサイトをデザインするときに考慮する必要がある最も重要な側面です。ページ要素がキーボードやマウスの入力にすばやく反応し、期待通りに動作するようにします。サイドフライアウトメニュー、ドロップダウンボックス、ポップアップウィンドウなどがあります。.

MooToolsやjQueryなどの有名なJavaScriptライブラリを含めて、これらの機能をアニメーション化することがさらに簡単になりました。最近のほとんどのブラウザはこのコードをサポートしており、スクリプトが利用できない場合は適切に機能を低下させます。最終的には、デザイン内のどこかと対話するときに、ユーザーに快適に感じさせたいです。.

同様に、フォーム入力とデータチェックを考慮に入れるべきです。多くの登録ページでは、各入力エリアを操作するときに小さな回答が表示されます。有効なEメールアドレスのチェック、ユーザー名の重複、パスワード入力の再確認も自動化できます。これにより、ユーザー側の時間が節約され、申し込みプロセス全体にわたって便利なガイドが提供されます。.

2.タッチスクリーンモバイル機器

過去2、3年の間に、スマートフォンが非技術系愛好家の間でさえ支持を得ていることが明らかになりました。しかし、2011年以降になって初めて、モバイルサイトとモバイル固有のテンプレートが急増しました。.

iPhoneやiPadのデバイスがAndroid搭載の携帯電話とともに普及していることから、訪問者はタッチコマンドを使って自分のページと完全に対話することができます。これはすべてのデザインモックアップで現実的な考慮事項になる必要があります。モバイルWebデザインの傾向は、完全に別のモバイルテーマを構築することがしばしば最良の結果をもたらすことを示しています。このようにして、モバイルユーザーにスリムなバージョンのサイトを提供しながら、メインレイアウト上のすべての動的コンテンツを適切な場所に保つことができます。.

3.たくさんの景品!

誰が正直に無料ダウンロードを楽しんでいないと言えるでしょうか。ウェブデザイナーは何年もの間彼らのコンテンツをオンラインで共有してきました、しかし最近になってこれはデジタルアーティストの間で非常にポピュラーなトレンドになりました。 Webおよびグラフィックデザイナーに無料ダウンロードを提供することを中心に構築されたコミュニティがいくつかあります。.

私のお気に入りの2つはDownload PSDとDesignmooで、どちらも最高品質のメンバーによって頻繁に更新されます。さらに、Hongkiat Freebiesアーカイブには、チェックアウトするための甘いものがたくさんあります。それは文字通り無料のWebインターフェース、レイアウト、ロゴ、バナー、そして事実上他のPSD / AIファイルをダウンロードするのがこれほど簡単ではありませんでした前のあらゆる時代に!

いくつかのきちんとしたダウンロード

以下は2011年の初めからチェックアウトするためのほんのいくつかのクールな景品です。そしてあなたがこのリストにいくつかの素晴らしいファイルがあると思うならば、ちょうど2012年が動き回るまで待ってください!

ミニWeb UIセット

ダークミニミュージックプレーヤー

スライドタグ

ダークフォトスライダー

検索ボックス

ログイン/サインインフォーム

ログインモーダルボックス

クリーンログインフォーム

価格表

最小ローディングバー

添付ファイルのポップアップ

4. HTML 5とCSS 3の標準

セマンティックWebデザイナーは、丸みを帯びた角やドロップシャドウをレンダリングするCSSのみのデザインを作り出すのを何年も待っています。さらに、W3Cは最も人気のあるブラウザからの支援を集めることにおいて多くの進歩を遂げました.

私はHTML5 / CSS3ウェブ開発の将来について良いことしか見ることができません。フロントエンドデザイナーは今日の分野では見過ごされがちですが、作曲プロセス全体にとって非常に重要です。あなたが毎日知っていて実践しているテクニックに基づいて、どのような「ラベル」にも絞らないようにしてください。あなたが追いつく必要性を感じるならば、我々はHTML5 / CSS3コーディングのための初心者のための手引きを提供します.

これらの新しい標準にこだわることで、JavaScriptとjQueryの開発もそれだけずっと簡単になります。開発者たちはすでにHTML5 / CSS3プロジェクトコードをオンラインで公開し共有しています、そして事が続くならば、来年にはもっとずっと多くのこれに気づくでしょう.

リボンとバナー

この設計手法は正確ではありませんが “新しい” ごく最近まで、主流になることはありませんでした。コーナーリボン、バナーナビゲーションバー、小さなリボンバッジの例を見たことがあるでしょう。これらの傾向はグーグルを通してすべて見つけられることができる詳細なチュートリアルの膨大な蓄積のためにおそらく爆発しました.

最近のWebデザイナーは、情報を共有するために独自のブログを立ち上げることに力を入れています。簡単なテクニックをデザイナー間で簡単にやり取りして、最も人気のある効果を再現することができます。あなた自身を節約するためにダウンロードできる無料のPSDもあります。.

6.プレミアムワードプレスのテーマ

WordPress 3.0の最終リリースには、カスタム投稿タイプやユニークな記事画像など、待望の機能が多数含まれていました。それでも私が見た中で最も重大な変化は、プレミアムWPテーマを専門とするWordPress開発ショップから来ています。.

そのようなテーマを購入した後のインストールプロセスは他のものと似ています。それでも、カスタムプラグイン機能、子テーマ、新しい管理メニュー、およびその他の機能をテーマ内から含めることが可能になりました。 WooThemes、ElegantThemes、およびRocket Themesは、他の何よりも傑出したブランドです。それらの品質は申し分のないものであり、私は彼らの開発者が最高のテンプレートと最も直感的な管理メニューを作成するために何度も何度も行っていると感じます.

2012年に入ると、私はWordPressがさらに使いやすくなると想像することしかできません。これはより高品質のテーマがリリースされることを意味し、そしてより素晴らしいブログが開始されることを意味します.

7.オンラインマガジン

WordPressのテーマについて言えば、私たちはまたオンラインマガジンの急速に普及した成功を引き出すべきです。これらのWebサイトは、一般的な構造とページレイアウトを除いて、一般的なWordPressブログとそれほど違いはありません。あなたは彼らのホームページの純粋なプレゼンテーションと、そのサイトのために書いている著者のコレクションによってこれらのより大きな雑誌を見つけることができます.

雑誌がオンラインに移行し始めるにつれて、それらは多くの作家の収入源になるでしょう。 「Webデザイン」などのトピックは、ゲームや経済学よりも狭いニッチをターゲットにしています。しかし、印刷物よりもオンラインでデザイン雑誌が増えているという事実は、今後数年間で世界が向かっている可能性がある場所を示しています。.

8.簡単ドロップシャドウ

CSS3の一面として、デザイナーはページのどこにでもドロップシャドウを実装することが今までよりも簡単になりました。ボックステキストとボックススタイル要素には、明確な影付き効果をレンダリングするためのそれぞれのプロパティが与えられています。.

テキストシャドウの構文は覚えるのがとても簡単で、ボックスシャドウとして続きます。イメージをこれらの効果のレンダリングに不要になったので、Web開発者はこれらの基本的なアイデアをさらに拡張することに集中できます。.

9.動的タイポグラフィ

フォントは、Webデザインの伝統を取り巻く分野の大部分を占めています。 Arial、Helvetica、Georgia、Trebuchet MSを含む最も注目すべきフォントは、もう何年も前から存在しています。彼らはWeb標準の深い目的を果たし続けているが、高度なWebページのタイポグラフィのためのたくさんの代替オプションがあります.

たとえばTypekitでは、ドキュメントヘッドに数行のコードを含める必要があります。その後、どのフォント名を含めるかを指定してCSSに追加することができます。このテクニックの最も良いところは、それが主にJavaScriptに依存しているということです。そのため、エンドユーザーはフォントをインストールする必要はありません。.

もう一つの選択肢は、Typekitと同じように振る舞うGoogle Web Fontsです。あなたがはるかに創造性を与えられているので、私は興味があるデザイナーにCSS3の@ font-faceメディアクエリをチェックすることを勧めます。このコードは .TTF または .その他 あなたのWebサーバーからフォントファイルをダウンロードして、使用可能なスタイルシートフォントとして含めてください。ダイナミックフォントの作成に使用される代替システムが非常に多くあるため、2012年にはこの分野で革新とデザインの才能が急増すると予想しています。.

10.イメージギャラリーのスライドショー

その後のjQueryの人気により、私はWebレイアウトにドロップされる画像スライドショーをますます発見するようになりました。ギャラリーは、内部ページのコンテンツをちらっと見せるのに最適です。これは、一連のポートフォリオエントリ、写真、特集画像付きのブログ投稿、デモスクリーンショットなどです。.

あなたが多くのユニークなスライドやフェードアニメーションを考えるとき、それはあなたのホームページのためのクイックスライドショーを構築することがかつてないほど容易になりました。 2012年は、デザイナー間だけではなく、これらのトレンドが上昇すると確信しています。オンラインWebアプリケーションおよびソフトウェア会社は、スクリーンショットや独自の機能を表示するためのガイド付きチュートリアルとしてスライドショーを使用しています。.

11.モーダルポップアップボックス

モーダルボックスは、デスクトップソフトウェアやモバイルアプリに何年も前から登場していることを考えると、まだインターネットにとってかなり新しいものだと思います。モーダルウィンドウの目的は、新しいページにロードすることなく現在のページの上にボックスのコンテンツ（ユーザー登録やログインなど）を提供することです。.

オープンソースの画像ギャラリースクリプトの多くは、ポップアップボックスよりも背景が暗くなるタイプのライトボックス効果を使用しています。私はそれを見たときはいつでも本当にこの機能を楽しんでいますが、まだ多くの人に採用されていません。モーダルボックスはセクシーで洗練されていますが、コーディングして適切に機能させることも非常に困難です。.

あなた自身のウェブサイトのためのアイデアを得るためには、より人気のあるソーシャルニュース共有コミュニティのいくつかをチェックしてください。 RedditとDiggは、どちらも典型的なレイアウトのレジスター/ログインモーダルボックスを備えているため、頭に浮かぶ2つです。さらにGoogle+のUI効果には相当量のモーダル機能があります。.

感動的なリスト

リストアイテムのコレクションは、Webデザインの初期の頃から登場しています。私たちが新しい世紀に入ると、デザイナーはナビゲーションメニューを格納するためにHTMLの順序付きリストと順序なしリストを使い始めました。しかし、今日ではリストはもっと多くのことに使えるし、使われている。.

ほとんどのブログテーマで、私はサイドバー全体がリストでいっぱいになっているのを見つけます！記事のエントリのリストに素晴らしいCSSスタイルを作成したデザイナーは言うまでもありません。今年の初めに、私たちは感動的なリストスタイルを別の記事で取り上げました。 2012年を見据えて、おそらくFlowappのタスクとタスクのためのカスタムレイアウトと同等の、本当に創造的な例をいくつか期待しています。.

13.生成された画像のサムネイル

ウェブの世界では、コンテンツが王であることに同意することができます。しかし、ほとんどのデザイナーは空白のテキストのページがすぐに退屈になることにも同意するでしょう。あなたがそれらを優しく振りかける方法を知っていれば、イメージはその余分なスパイスを加えることができます。そのような方法の1つは、各ページまたは記事のプレビューを提供するために動的サムネイルを使用することです.

今日のブログは特集画像トレンドを採用し続けています、それではあなたのテーマに同様に生成されたサムネイルを適用しませんか？これらはしばしば記事の見出しに向かって私の注意を引き、テキストリンクでいっぱいのページを分割するのを助けます.

別の例として、Dribbbleは各デザインショットのサムネイルの全ギャラリーリストを提供します。このような表の行スタイルのレイアウトでは、各サムネイルを垣間見ることができず、スクロールして探しているものを見つけることが非常に簡単です。この戦略は、デザインコミュニティ全体の注目を集めることが証明されています。 Er、少なくとも最高でDribbbleのメンバー。私は、2012年が過去からのそのような例に基づいてこれらの考えのさらなる努力を見ることを期待することができるだけです.

14.特大アイコン

この独特の傾向は、Mac OS Xのアイコンデザインの人気に由来します。プログラマーが彼らのMacアプリケーションのためにウェブサイトを立ち上げ始めたとき、我々は皆あまりにも頻繁にブランドで表される巨大なサイズを見ました。したがって、この傾向はiOSの開発者を通じても拾われており、現在では現代のデザイン文化の中に快適にかかっています。.

2012年に移行するにつれて、これらの傾向がどのようになるのかを予測するのは困難です。一方で、これらのアイコンは不格好で、必要以上にスペースを取ることがあります。それでも、私たちはiOS / OSXアプリの不足に遭遇することすらありません、そしてデザイナーはまだピクセルパーフェクトアイコンスペックを考え出しています。言うまでもありませんが、Webデザイナーは現在、ほぼすべてのページのブランド設定に特大のアイコンを含めています。それはあなたの訪問者の直接の注意を引いてあなたの会社の名前をつけるのに良い方法です。.

誇張されたハイパーリンク

アンカーリンクは確かにあらゆるWebサイトの上位5つの最も重要な要素の中にあります。 1990年代以降、これらは明らかに大きな進歩を遂げ、人気のあるデザインのトレンドは指数関数的に成長しているにすぎません。誇張されたデザインが優先される時代に向かっているようです。.

Patterntapのいくつかのリンク例を調べて、飛び出して目を引くものがないかどうかを確認してください。ハイパーリンクのデザインについては、標準効果とホバー効果の両方で、非常に多くの素晴らしいアイデアがあります。 CSS3の丸みを帯びた角、テキストの影、そしてカスタムフォントファミリーがミックスにさらに素晴らしいアイデアを追加します！私のお気に入りの例のひとつはSimpleBitsからのものです。SimpleBitsは各ブログエントリのパーマリンクに短い動的アニメーションを使用しています。.

結論

これらのアイデアは、私が2011年を通して優先されていることに気付いた、より一般的な傾向のほんの一部にすぎません。これらの哲学が2012年になっても変わることはありそうもありませんが、レイアウトを作成してデータを表示する方法は常に変化しています。コメントディスカッションエリアであなたの考えや質問をお知らせください。.