タグ

WebデザインとUIに関するfunekazのブックマーク (8)

  • PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ

    スマートフォンの普及で、PCで閲覧するWebサイト(以下、PCサイト)に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景

    PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
  • スマホサイトのUIでよく使うメニューのリスト表示まとめ33サイト | iPhoneデザインボックス

    スマートフォンサイトを作るときにヘッダーにメニューアイコンを設置してクリックするとメニューリストがでるようにすることがあります。ナビゲーションの表示の仕方やアニメーションは色々あるのでまとめました。最近は、流行り?なのかFacebookのアプリように横から出てくるメニューが多いです。

  • 【魅せるWEBデザイン】リッチな動きとより良いユーザー・エクスペリエンスをあなたのサイトにプラスする方法 | WEBデザイン&アプリ開発 flexagent

    どうも、デザイナーのアンドリューとWEBデザイナーのテルです。 海外の記事で、スマート・トランジションについての面白い記事があったので翻訳してご紹介します。 翻訳を快諾して頂いた、Smashing Magazineさんに感謝いたします! ではどうぞ〜。 モダンウェブサイトでは、サイトのクウォリティに大きな差を生む要素として、インタラクション・デザイン、アニメーションの違いなどがあります。 この記事では「なぜ動きを付ける事が良いのか」、様々な実例を取り上げて説明していきます。 デジタル製品をデザインする時に、デザイン・アプリケーション(PhotoshopやSketchなど)を使います。 経験を持つデザイナーなら、訴求力はビジュアルだけではないと理解していると思います。 ですが、ほとんどのWEBデザイナーが動きの無いサイトを作成し続けています。アップルのスティーブ・ジョブズは生前、デ

    【魅せるWEBデザイン】リッチな動きとより良いユーザー・エクスペリエンスをあなたのサイトにプラスする方法 | WEBデザイン&アプリ開発 flexagent
  • ユーザーインターフェースの質を高める手法「ユーザーはヨッパライ法」とは

    PCを操作するキーボードやタッチパネル、自動車を運転する時のハンドルやペダル類、あるいはウェブページの操作画面など、ユーザーが何かを操作したり情報をやりとりする際に触れる部分は総称してユーザインタフェース(UI)と呼ばれており、その仕上がり具合によっては製品の評価が大きく左右されることもあります。製品企画をおこなう際には重要な項目の1つとなっているUI設計ですが、特にウェブサイトにおけるUI品質を高めるための手法がYouTubeで公開されています。 The User is Drunk - YouTube 優れたユーザーインターフェースデザインの手法について語るのはウィル・デイブルさん。オーストラリア・メルボルンのウェブコンサルタント企業であるSquareweaveを率いる1人です。 デイブルさんが唱える手法とは、「ユーザーはお酒に酔っ払っている」と仮定してインターフェースを設計する「The

    ユーザーインターフェースの質を高める手法「ユーザーはヨッパライ法」とは
  • Experiments with Google

    A note to our community Experiments with Google was born out of a simple idea, but you all turned it into something beyond anything we could have ever imagined. You filled it with thousands of experiments that inspired people everywhere - from the classroom to the surface of Mars. When it comes to the internet, 14 years is a long time. So in the spirit of experimentation we’re trying something new

    Experiments with Google
    funekaz
    funekaz 2014/03/28
    よくわからんけどぶくま
  • フラットなデザインを理解する上で知っておきたい5つのポイント -Principles of Flat Design

    フラットなデザインは、決して単純なデザインと同じ意味ではありません。もちろんシンプルにデザインして答えがでるのであれば、それにこしたことはありません。 フラットなデザインのUI素材を数多くリリースしているdesignmodoから、フラットなデザインとは何かを理解する上で重要となる5つの特徴を紹介します。 フラットにあまり心を動かされなかったのですが、ぐらっときました。 Into the Arctic フラットなデザインはその名の通り、二次元のフラットなスタイルを使用します。このコンセプトは既存のエフェクトなしで機能します。ドロップシャドウ、ベベル、エンボス、グラデーションなど奥行きを与えるエフェクトは使わないようにします。 ページ内のテキスト、ボックス、画像、フォーム、ナビゲーションなどの全ての要素はエッジのきいたスタイルで、シャドウはありません。Appleによく見るSkeuomorphi

  • UIデザインの参考になるサイトまとめ | ナナメウエblog

    毎日仕事中と寝る前にチェックしてるUIの参考になるサイトをまとめました。 もう、見ているだけで涎が出ますね。 Dribbble – Following もはや知らない人はいないでしょう。世界中からハイレベルなデザインが集まるこのサイト。3時間に1回は見てます。 JAYPEG 日版Dribbbleというとわかりやすいかもしれません。昨年末にできたばかりですが、すごく好きです。投稿しまくってます。自分で作ったUIを素材として公開してたりします。1時間に1回は見てます。 Inspired UI – mobile ui patterns カテゴリーが細かく分かれていて非常に嬉しいです。数も豊富で見やすいサイトです。 iOS Mobile Patterns カテゴリーがわかりやすく、マウスが拡大鏡になるので細部まで見ることができます。 iPad and iPhone Design Ins

  • UIが美しすぎる15の次世代モバイルアプリデザイン |SEO Japan by アイオイクスSEO Japan|アイオイクスのSEO・CV改善・Webサイト集客情報ブログ

    世界的なスマホの急速な普及とそれに伴う様々なアプリの登場と共に、モバイルデバイス向けのUIデザインも様々な試行錯誤と進化を続けているようです。今回は、デザインにはこだわりのある人気ITメディアThe Next Webのスタッフが選んだ次世代のモバイルアプリを担う15のUIデザインを紹介します。 — SEO Japan コードを学ぶのと同じように、デザイナーとして上達する一番の方法は、習うより慣れることだ。それでもやはり、優れた作品を称賛して模倣すること(という名の練習)が驚くべき効果を発揮しないというわけではない。何よりも、他のデザイナーが過去にしたことを見ることは、相当な時間の節約になる。なぜならデザインには歴史があり、誰もが有効なものと有効でないものから学ぶべきだからだ。 今回の記事では、あなたのデザインのインスピレーションのなるような、15の見事なユーザーインターフェース(UI)のリ

    UIが美しすぎる15の次世代モバイルアプリデザイン |SEO Japan by アイオイクスSEO Japan|アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
  • 1