タグ

DesignとUIに関するp_chopinのブックマーク (26)

  • 7 Rich & Creative User Interfaces and How to Create Your Own - noupe

    There are plenty of perfectly acceptable and functional websites out there that don't use dynamic content. But what if you want to give your site that little something extra that makes your visitors say "Wow"? What then? Maybe you'll find your answer below. There are tons of great, creative user interface options featured below, from modal windows to live search to hover effects. But they aren't j

    7 Rich & Creative User Interfaces and How to Create Your Own - noupe
  • 21 Stylish CSS/jQuery Solutions To Beautify Your Web Designs | SmashingApps.com

    by AN Jay · June 5, 2009 21 Stylish CSS/jQuery Solutions To Beautify Your Web Designs We are always in search of great free tutorials, resources, tips, tricks, etc. for our readers. Everyday we work hard to find new and useful stuffs for designers like you. Today, we have another great post related to design a beautiful website using stylish effects with CSS/jQuery. In this, we made a list of 21 S

    21 Stylish CSS/jQuery Solutions To Beautify Your Web Designs | SmashingApps.com
  • catchyoo.com - このウェブサイトは販売用です! - catchyoo リソースおよび情報

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

    catchyoo.com - このウェブサイトは販売用です! - catchyoo リソースおよび情報
  • Creating A Slick Auto-Playing Featured Content Slider | CSS-Tricks

    DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! I love the Coda Slider plugin for jQuery. I’ve used it recently to build a couple of tabbed “widgets”. One here on CSS-Tricks in the sidebar to show Script & Style links, Featured Posts, and Popular Posts. Just kind of a fun way to show lots of content in a small area. I also used it on an a

    Creating A Slick Auto-Playing Featured Content Slider | CSS-Tricks
  • ECサイトの画面設計–男と女、買い物の行動パターンはどう違う?

    奥井 夏子 インフォメーションアーキテクト 便利さ、手軽さから、オンラインショッピングは今や私たちの生活の中に深く浸透しています。そして「売れるオンラインショップ」を目指して、各Eコマース(EC)サイトが凌ぎを削っています。ECサイトの構築にあたって、まずはそのショップのターゲットを設定し、それぞれの攻略方法を考えることが大切です。攻略方法を考えるには、ターゲットユーザーのサイト内行動を知る必要があります。 ここで1つの疑問が浮かびます。はたして、男性と女性で、ECサイト内の行動に違いはあるものなのでしょうか。 「楽天市場でギフトを買ってください」 今回のアイトラッキング分析では、「ECサイトにおいて男女の行動に違いはあるのか」を検証すべく、以下のテストを行いました。対象サイトは、日最大のECサイト、楽天市場としました。 対象サイト:楽天市場 被験者:オンラインショッピング経験のある20

  • ウェブサイトでやってしまいがちなユーザビリティのミス

    ウェブサイトでやってしまいがちなユーザビリティの9つのミスをSmashing Magazineから紹介します。 9 Common Usability Mistakes In Web Design 下記は、その意訳です。 1. クリックできるエリアが小さい リンクのクリックできるエリアが小さいと、ユーザーはクリックするのが非常に困難です。 解決方法 リンク箇所にpaddingなどを設けて、クリックできるエリアを大きくします。 2. 間違った目的のためのページネーション ページネーションは、内容を複数のページに分ける時に使用します。 しかし、最近ページビューを増やす目的でページネーションを設置しているサイトがあります。これには問題点が2つあります。 一つ目は、1つのコンテンツを読むのにページをロードしなくてはならないこと。二つ目は、SEOと関係があります。ページのインデックス付けを行う際、ペー

  • リッチインターネットアプリケーションの実装時に検討したい30のUI

    でも近日発売の「Designing Web Interfaces」から、リッチインターネットアプリケーションを作成するための30のユーザーインターフェイスを紹介します。 30 Essential Controls サンプルは、一部jQueryベースのものに変更しています。 01. Auto Suggest

  • Designing Web Interfaces Book - O'Reilly Webcast

    This is an update to the previous Designing Web Interfaces talk. This presentation was given on Feb. 3, 2009 over a live webcast via an O'Reilly Author Webcast special. This presentation goes hand in hand with our book (Bill Scott & Theresa Neil) called Designing Web Interfaces: Principles and Patterns for Rich Interaction. This presentation is much better suited for Slideshare than previous prese

    Designing Web Interfaces Book - O'Reilly Webcast
  • CSS-Based Navigation Menus: Modern Solutions | Smashing Magazine

    Usability is an essential goal of any website, and usable navigation is something every website needs. It determines where users are led and how they interact with the website. Without usable navigation, content becomes all but useless. Menus need to be simple enough for the user to understand, but also contain the elements necessary to guide the user through the website — with some creativity and

    p_chopin
    p_chopin 2009/02/05
    ナビゲーションデザイン
  • ソシオメディア | UIデザインパターン

    ソシオメディアが独自に提供するUIデザインパターン集。これを使えばUI設計を効率化できます。

    ソシオメディア | UIデザインパターン
  • 第12回 ユーザーを「目利き」に生まれ変わらせ、購買を誘発させる写真の見せ方とは? | ユーザー視点のウェブデザインガイド

    第12回 ユーザーを「目利き」に生まれ変わらせ、 購買を誘発させる写真の見せ方とは? 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか? 今木 智隆(株式会社ビービット) 写真のスペース配置の大原則は「場所をケチらない」ウェブサイト、特にECサイトにおいて「写真情報」は、商品の魅力を端的にユーザーに伝えるキラーコンテンツである。それだけに、見せ方1つで大きな効果を得られることもあれば、見せ方を少し誤っただけで多くのユーザーを取り逃がす、という怖さも存在する。そこで今回は、実際にユーザビリティテ

    第12回 ユーザーを「目利き」に生まれ変わらせ、購買を誘発させる写真の見せ方とは? | ユーザー視点のウェブデザインガイド
  • ユーザーの動き。|CSS HappyLife

    ボクたちみたいな、ウェブサイトを閲覧するのが当たり前の人間からすると、全く気づかない事に気づかされたりしたので、自分用メモ。 2008年2月14日の22:47頃に追記 ボクのただのメモ書きをもうちょっとちゃんと以下のエントリーで書いてもらってるので、あわせてご覧になって頂くと、良いかと思います。 Webアクセシビリティについての覚書 - ねんがんのWebユーザビリティテストに参加した ロゴクリック=トップページに戻るという認識は殆ど無い。 トップページに戻る場合は、ブラウザの「戻る」ボタン。 サイドバーのバナーは、認知すらされない傾向が強い。 そもそもバナーとして押せるものではなく、デザイン上の飾りとして見られる場合も。 リストのマークとかのマーク部分をクリックしよーとする人が居る。 それにより、クリックできないと諦めるケースも。 プルダウン(ドロップダウン)型メニューは、近くのボタンを押

    ユーザーの動き。|CSS HappyLife
  • Googleがデザインするときに大切にしている10個の原則 - GIGAZINE

    Googleのユーザーエクスペリエンスチームに所属するSue Factor氏が、Googleの公式ブログにて「Googleらしいデザイン原則」について、10個の原則を提示しています。デザインというか、ネットサービスの設計自体に関する原則となっており、さまざまな場面で応用できそうなものとなっています。 詳細は以下から。 Official Google Blog: What makes a design "Googley"? Googleのデザイン原則は以下の通り。 1.人々に焦点を当てろ――彼らの生活、彼らの仕事、彼らの夢に 2.すべてはミリセカンド単位で数えろ 3.シンプルにすると強力になる 4.初心者ユーザーを引き込み、上級者ユーザーを魅了しろ 5.革新に挑め 6.世界に通用するデザインを 7.今日と明日のビジネスのために計画せよ 8.気を散らさず、目を楽しませるようにしなさい 9.人々

    Googleがデザインするときに大切にしている10個の原則 - GIGAZINE
  • iPhoneアプリを作る際に注意すべき5つのポイント

    毎日のように「iPhoneアプリApple Design Awardを取るぞ!」と騒いでいるので、知り合いに「それって(現実が分かっていない)大学生のノリですよ」と指摘されてしまった私だが、マイクロソフトを2000年に退社してからは、ひたすらモバイル・組み込みの世界で仕事をしてきた私としては「俺が取らなくて誰が取る?」という気分。その超楽天的な態度が彼が言うところの「大学生のノリ」なのだろう。 市場に受け入れられるアプリを作るためには、もちろん「誰にどんな価値を提供するのか」が一番大切。しかし、そこには残念ながら成功の一般方程式はないので、今日は比較的に一般化しやすい「どう作るか」という部分に関して、まとめることにした。 1. ユーザーの利用シーン・使用パターンを良く考えて作る パソコンやゲームコンソール向けのソフトと大きく違うのが、ユーザーの使用パターン。iPhoneに限らず、携帯電話

  • ゲームの右と左 マリオはなぜ右を向いているのか - 最終防衛ライン3

    *ここでのゲームテレビ、ビデオ、コンピュータゲームを指す *長文なので、なげーよ!論点まとめろよって人は、味も素っ気も無いけど 簡略版 へゴー 島国大和のド畜生 物語の進行方向について(日漫画のメリットとか) 「チキチキマシン猛レース」は常に右から左に向かってレースをしているのだ。 物語は舞台の上手(かみて)から下手(しもて)、つまり右から左に進むのが洋の東西を問わず一般的。映画などでも、主人公は上手の右、敵役は左にいる。主人公は右から入場し左へと退場していく。つまり、物語は「←」と右から左へ進行する。縦書き右綴じな日漫画は「←」で右から左に物語が進むが、横書き左綴じの西洋の漫画は「→」と左から右に進む。日漫画は左右が映像のロジックと一致しており大変読み易いと言える。 しかし、ゲームは「→」と左から右へ進行する。スーパーマリオブラザーズを始めとする横スクロールアクションやグラデ

    ゲームの右と左 マリオはなぜ右を向いているのか - 最終防衛ライン3
  • UI-patterns.com

    User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. Product Insights at your fingertips. Our confidence-boosting product tools for business growth are practical guides and strategies that will immediately amplify the expertise of you and your team.

  • pForm - Free HTML Form Builder - Create Web Form Template Online

    Create HTML Form in Seconds. Choose a color to start:

  • Collection: Design Patterns

    Reuse, recycle, but don’t reinvent the wheel unless necessary. by Brian Christiansen at UI Engineering. Via. This collection captures findings of consistent, unique or interesting interfaces and design flows from across the web. Please note that the content of these sets is not representative of all of the patterns I've captured. I tend to use tags more religiously and recommend that you look ther

    Collection: Design Patterns
  • CMSとモバイルとフィードと四畳半社長: WebアプリのUI論:時間は縦軸、切り替えは横軸

    東京都文京区郷でとあるCMS開発会社を営む社長のブログ。さっきまで「越後のCMS問屋」だったのですが、会社が新潟に移転したと勘違いされたようなので変えました。 モバイル、ゲーム、フィード、Ajax、Flash、ハイテクグッズあたりのはやりモノが好きです。 最新作「メルルーの秘宝」がドワンゴから提供中 週刊アスキーで「2045年の週刊アスキーをつくる」連載中 最近、またいろいろなインターフェースを研究していたのですが、ひとつ気づいたことがありました。 特にWebサービス、Webアプリケーション全般がそうなのですが、縦スクロールするものと横スクロールするものについて、ちょっと気になったのです。 要するに、Webサービスは横軸方向に並べる場合と、縦軸方向に並べる場合で意味が変わるのではないかと。 言うまでもありませんが、普通のサイトは時間軸が上から下へ、縦軸方向に流れるようになっていま

    p_chopin
    p_chopin 2007/04/08
    縦:時間/諦め、横:カテゴリ/意識の切り替え
  • UI とは何か? - 言語ゲーム

    「気軽にやれば良いよ」と気軽に出来ない事を言われ途方にくれてやる気が出ないので、私が今後数年のうちに取り組むべきテーマについて突然書く。 ずっと前からぼんやりと頭にあって、去年アフォーダンスに関するを何冊か読んだ後に、ああ、これが当の事だと閃いたけど、説明の方法が分からなくて秘密にしていた。だけど絵に描くと簡単だった。 問題は、UI はどうあるべきか。なぜ3Dは嘘臭いか?なぜテキストだらけの日記を毎日読んでしまうのか、なぜ一部の人はCUI(文字インタフェース)に固執するのか、そして、WikiPhone を作った当の目的は何かまで含む包括的な物。 その答えは絵にある通り。コンピュータが表現する為にはモニタに効果的に表示する必要があるが、人はモニタなんか見ていない。モニタを通してその向こう側の何か*だけ*を感じている。そこがいくらリアルな表示をしても役に立たない理由だ。 聴覚で考えた方が

    UI とは何か? - 言語ゲーム
    p_chopin
    p_chopin 2007/02/26
    『コンピュータが表現する為にはモニタに効果的に表示する必要があるが、人はモニタなんか見ていない。モニタを通してその向こう側の何か*だけ*』。リアルよりもデフォルメへと。