2013年試してみたい、フレッシュなウェブデザインのテクニック
Post on:2013年2月20日
sponsors
ウェブデザインの基本はおさえつつ、フレッシュでクリエイティブものを取り入れたい！ そんなデザイナーに役立つテクニックを紹介します。
Fresh and Creative Web Design Techniques
下記は各ポイントを意訳したものです。
はじめに
デザイナーとして、このことは新年を迎え最も興味深いものの一つです。そうです、2013年のデザイントレンドは何が大きくなるのかです。これは非常に大切なことです。
そのトレンドの後に次が何であるか、ウェブデザイナーは新しいトレンドが何であるか適切に把握しておかなければなりません。
トレンドは本当にデザインを面白くします。
もちろんレスポンシブは今年のトレンドでしょう、昨年もトレンドでした。そして、私たちはグリッドでデザインをし続けるつもりです。これは基本的なデザインです！
ここでは、これから大きくなると予想されるトレンドについて調査しました。
一緒に正しくジャンプしましょう！
ホワイト/ネガティブスペースをもっと
昨年はミニマリズムとクリーンな見た目が好きでした。ウェブサイトだけでなく、ロゴ、名刺など何にでも使いました。今年はホワイトスペースをもう少し増やすつもりです。
ネガティブスペースというのは、全体が何かで満たされていなくてもよいというテクニックの一つです。ウェブデザインにおいても「Less is more」少なきことはより豊かである、に移行しており、このネガティブスペースは優秀です。
私たちが何度もウェブサイトを訪れる時、何を求めているか正確に知っています。探すことに手間をかけず、正確に見つけ出せることを望みます。
メモ
スペースを作るためにどのようにデザインができるかは考えないでください。得ようとしてる見た目にするために、何が削除できるかを考えてください。
ピーチとサーモン
ウェブデザインでは数多くの人気の高いカラーがあります。その一つがブルーです、企業サイトでも個人のブログでも、ブルーは素敵なカラーです。
最近は暗いカラーが好きでした、理由は多くのカラーを利用できるからです。
今年のカラーにフレッシィなピーチ、サーモンはいかがでしょうか。
両方ともほとんどのカラーに合うニュートラルなカラーです。ありきたりでも退屈でもなく、しかも落ち着きがあり、大胆で、うるさくない魅力的なカラーです。多くのデザイナーが今年取り入れるであろう（そうするべき）素晴らしいカラーです。
メモ
ピーチとサーモンのカラーコードは、#F97743, #F38268 です。
より大きいのがベター
ちょうど今、私たちはデスクトップだけでなく、タブレットとスマートフォンでデザインをしています。ウェブサイトは手のひらの中で見える必要があります。多くのデザイナーはウェブデザインのテキストと画像のサイズを変えることだと考えているかもしれません。しかし、これはあまりにもばかばかしいです。
私たちは印刷から多くのアイデアをもらい、それをスクリーンの上に実現してきました。これからは印刷とウェブをミックス、あるいはウェブに戻る時です。
大きいということは多くの注意を必要とし、そして2013年らしい素晴らしくクリーンにすることと同じです。もしそれが多くのスペースをとり、注意を引きつけるなら、私は最初にそれを見るでしょう。これはつまらない物を取り除くもう一つの方法です。
メモ
フルサイズのイメージに、64pxと72pxのサイズのフォントを試してみてください。
小さいサイズのスクリーン用に縮小するには、FitTextのようなスクリプトを使います。
Allan Yu
ちょっと変わった無限スクロールです。
イメージを動かす
最近の技術の進化により、ウェブデザインに動画・ビデオを加えることがより簡単になりました。そのため、どこのウェブサイトでも楽しめるようになりましたが、新鮮さがなくなりました。
普段使っている画像やスライダーに動きを与え、魅力を加えてみませんか？
動きは人の目をひき、クリエイティブなフィールドを広げます。これは私が最も楽しみしているトレンドの一つです。
メモ
HTML5 videoのチュートリアルをチェックしてみてください。
Social Design House
打ち出しで、ドーナツをモチーフにしたデザイン会議が行われます。
Teehan+Lax
HTML5 videoを背景にしたウェブサイト。
Patrik Ervell
全員がばらばらの動きをします。
ストックフォトは使わない
ユーザーはもう抽象的な画像は求めていません。プロダクト自体、あるいはそれを表す現実的なものを望んでいます。パーソナリティとストーリーを求めているのです。
ウェブサイトはそのユーザーとの関係性によって維持されているので、ユーザーが求めていることを実現することは大切です。
メモ
カメラに投資をするか、カメラマンにウェブデザインに対して正しい比喩的な描画を得るように連絡をとってください。
sponsors
