50 Useful and Free Web UI, Mobile UI and Wireframe Kits
50 Useful and Free Web UI, Mobile UI and Wireframe Kits Here we are featuring 50 useful, free and spanking new Web UI and wireframes resources that you will definitely love. Web designers always require some fundamental user interface elements to produce a model of user interface either of a website or software. For that, they require wireframing and UI design kits which help them to replicate the
パン屑リストについてもう一度考えてみる
様々なパン屑リスト 利用者が辿ってきた道筋を示し、いつでも先に戻れるような配慮としてパン屑リストがあります。IA の専門家 Keith Instone によると、パン屑リストには以下のタイプがあると言われています。 場所の示す Webサイトをツリー状として捉えたときの利用者の現在地を表示する 経路を示す 利用者が現在地まで辿り着いた道筋を表示する 属性を示す 断面的な検索をして絞り込む際、選択済みの属性を表示する 進行状況を示す アプリケーションの利用の際、タスクの進行状況を表示する それぞれのパン屑リストには特有の機能があり役割を果たして来たわけですが、本当に必要かどうかを再考するべきタイプもあります。例えば経路を示すパン屑の場合、ブラウザで既に実装している「戻る / 履歴」と重複しています。また、利用者が幾つかのページをブラウジングしているだけの場合など経路を残すべきか判断しにくい場合
iphoneアプリを始めとした、モバイルのためのUIデザインパターン集「Mobile UI Patterns 」
TOP > WebDesign > iphoneアプリを始めとした、モバイルのためのUIデザインパターン集「Mobile UI Patterns 」 国内でも数多くの機種がリリースされ、普及の兆しを見せてきているスマートフォン。それに伴い多くのコンテンツが制作されてきています。今日紹介するのはそんなモバイルコンテンツの様々なパーツデザインを集めたUIデザインパターン集「Mobile UI Patterns 」。 スプラッシュ、フィード、ユーザープロフィールなどなどモバイルのアプリやWEBサイトに欠かせない、様々なデザインが収録されています。 詳しくは以下 ■Splash Screens 様々なアプリのスプラッシュがスクリーンショットで集められています。 ■Comment Detail ユーザーからのコメントも様々な見せ方があります。 ■Lists 多くのコンテンツを見せるときに利用
40 Detailed Examples of User Interface Design | inspirationfeed.com
You are here: Home » Inspiration » Design Elements » 40 Detailed Examples of User Interface Design 40 Detailed Examples of User Interface Design Written by Igor Ovsyannykov on Jan 27, 2011 | 0 Comments When designing an application, millions of question arise. How should it look? How easy is the interface to understand? What should the colors and borders look like? The list goes on and on. Before
より良い UX・UI は地道な検証の繰り返しから : LINE Corporation ディレクターブログ
こんにちは、10 月からも引き続き livedoor Blog 担当の飯田です。 9 月末に livedoor Blog で新しい記事投稿画面β版 (以後β版) を、10 月頭にえもじメーカーという新機能をリリースしました。 この 2 つは開発にさしあたり「ユーザーインターフェース (UI)」や「ユーザーエクスペリエンス (UX)」を強く意識しました。今回はどうやって UI・UX について検証したかを部分的に切り出してカンタンに紹介したいと思います。 ユーザーインターフェース ユーザインタフェース (User Interface) は、機械、特にコンピュータとその機械の利用者（通常は人間）の間での情報をやりとりするためのインタフェースである。 ユーザーエクスペリエンス ユーザーエクスペリエンス（UXと略記されることが多い）とは、ユーザーがある製品やシステムを使ったときに得られる経験や満足な
Showcase of Interesting Navigation Designs — Smashing Magazine
Everyone is always looking for interesting and effective ways to organize their website and allow users to move about and find things. But there’s a fine line between unexpected and unusable. Three points to consider in any navigation scheme are consistency, user expectations and contextual clues. If page is long and provides different levels of navigation, will users be able to find their way thr
iPhone用サイトを作成する際に便利なjQueryプラグイン「iPhone UI」:phpspot開発日誌
iPhone UI iPhone用サイトを作成する際に便利なjQueryプラグイン「iPhone UI」。 iPhoneアプリケーションのようなUIパーツが揃っており、PCのブラウザで見ると、iPhone枠が次のように表示され、iPhoneで見ると枠なしでそのまま動作するというものです。 PCで見ても、iPhoneで見ても同じように見れるサイトを作る際に役立ちそうです。 まだバグがそれなりにあるっぽいですが、面白い仕組みですね。 関連エントリ iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」 iPhoneかiPodかiPadかを調べるPHPとJSのソースコード例 iPhoneにインスタントメッセージをPHPからpushme.to経由で送るサンプル
記事ページのアクセス通信簿 : could
openwebdesign資料 記事ページのアクセス通信簿 記事ページを新して半年経ち、読者の動きに様々な違いが表れ始めました。良くなった点とそうでもなかった点をみて、今後の課題を幾つか考えてみました。 今のような記事ページになった理由 今年の始めに記事ページを新しくしました。そのあと小さな調整を行ったり機能を追加はしていましたが、そろそろどのような結果が出たのが発表するには良い時期だと思いますので幾つか紹介したいと思います。 ご存知の方もいるかもしれませんが、今「記事」と呼ばれるエントリーはほとんどすべてレイアウトが違います。中には色を変えただけのものもありますが、レイアウトが少し複雑なものや画像が活用されているものもあります。凝り過ぎたことをすると読み難くなってしまいますが、毎回見た目が新鮮なので飽きることもありませんし、それがキッカケで読んでくれる方もいるかと思います。 最近、海外で
第5回 タブ切り替えで快適に読めるインターフェースを作るには | gihyo.jp
見せたいもののメリハリをつけるのがコツ 「限られたスペースに複数の情報を入れたい。でも別ページにするほどでもない……」 そんなとき、タブでコンテンツを切り替えられると便利です。タブ切り替えは、Yahooのトップページで使われているように、かなり浸透してきています。 このUIを使うポイントは、以下のように重点的に見せたいコンテンツとそうでないもののメリハリをつけて使うことです。 特集などの一部のコンテンツに使う ニュースであれば一番見せたいカテゴリーのものをはじめに見せておいて、重要度の低いものは別のタブコンテンツとする サイドバーに置いたトピックスを、アーカイブと最新のもので分ける また、以下のようなデメリットがあるので、UIの見栄えとのバランスを念頭に置いて使う必要があります。 ソースが1ページに書かれるため、ページを分ける場合と違ってSEO効果が薄れる場合がある タブを移動してもページ
グーグル検索結果ページリニューアル後、42%のウェブマスターがアクセス減少と - SEO対策研究所
2010年5月6日にGoogle は検索結果ページをリニューアルしましたが、43% Of SEOs Say Traffic Down Since Google Redesignによると、グーグルの検索結果デザイン変更以降、43%のウェブマスターがグーグルからのアクセスが減少したと回答したようです。 グーグルの検索結果に関しては一般ユーザーから"シンプルなままが良かった"、"以前の検索結果画面を使い続けるオプションがあってもいいはずだ"といった不満があがっており、それに対応する形で既に新デザインの改善も始まっています。 その一方で、ウェブマスターにとっても、今回のリニューアルはよい効果をもたらしていないようです。 ウェブマスターに"グーグル検索結果デザイン・リニューアルのあと、グーグルからウェブサイトへのアクセス数に変化はありましたか？"というアンケートを実施したところ、200名以上のウェブ
かっこいいメニューバーが簡単に作れちゃうジェネレータ「MenuBuilder」*二十歳街道まっしぐら（FC2ブログ時代）
「MenuBuilder」はメニューバーを作ってくれるジェネレータです。 グラデーションやマウスオーバーも実装できます。 色を選んで、パターンを指定したらおしまい！ 簡単すぎ！ 画像およびHTML（CSS）もダウンロードできるので、使い回ししやすいです。 以下に使ってみた様子を載せておきます。 まず「MenuBuilder」にアクセスします。 メニューはグラデーションになります。 上側がデフォルトで下側がマウスオーバーのときです。 そしてお次は、メニューのパターンを指定します。 あと、横に並べるのか、縦に並べるのかも選択しましょう。 「Generate&Preview」すると、最上部で仕上がりを確認できます。 「Download」ボタンをクリックすると、画像とHTML（CSS）を一括でダウンロードできます。 HTMLファイルを開くと、このように先ほど作ったメニューが実装されています。 HT
Amazon.com、そのショッピングカート進化の変遷 - Feel Like A Fallinstar
7600万人が利用するAmazon.com。 世界最高峰のUIを誇るこの類まれなるECサイトは、カート1つをとっても大きな変更を何度も繰り返しており、EC関係者にとっては、おおいに参考になります。 Amazon's Add-to-Cart Evolution 1 初期バージョンのボタン。 ネット初期のEC慣れしていない人でも気持ちよくボタンを押せる訴求を以下の2点で実現 カートに入れても、商品をあとから消せることを記載（you can always remove it later） セキュリティ（shopping with us is safe） 2 1クリック注文が追加される カートボタンの位置はそのままに、1クリック機能をリリース。 3 "You can always remove it"を取り除いて、ボタンをシンプルに 4 Amazon2.0へ 3D装飾の入った形になり、A9サーチエ
Showcase Of Modern Navigation Design Trends — Smashing Magazine
The navigation menu is perhaps a website’s single most important component. Navigation gives you a window onto the website designer’s creative ability to produce a functional yet visually impressive element that’s fundamental to most websites. Because of their value to websites, navigation menus are customarily placed in the most visible location of the page, and thus can make a significant impact
40 Beautifully-Designed Navigation Menus | Vandelay Design Blog
These earth tone color palettes are perfect for a wide variety of nature-inspired designs. Use the provided hex codes to save time choosing colors.
[JS]打ち出しエリアのサイズをユーザーの任意で変更可能にするスクリプト
YouTubeで実装されているプレイヤーのサイズ変更のように、打ち出しエリアのサイズをユーザーの任意で変更可能にするスクリプトをJanko At Warp Speedから紹介します。
IBMがWebアプリケーションのUIガイドラインとHTML/CSSのソースコードを公開
業務アプリケーションがWebアプリケーションとして開発されるのは現在の大きなトレンドです。それに伴ってHTMLとCSSによって業務アプリケーションの複雑なユーザーインターフェイスを構築する必要性が生じます。 しかし機能が豊富な業務アプリケーションのユーザーインターフェイスをHTMLとCSSで構築するのはそれほど簡単ではなく、しかもそれをアプリケーション全体で統一し、優れたユーザビリティを実現するのはさらに手間のかかる作業です。 そうした業務用のWebアプリケーションのユーザーインターフェイスを構築するためのサンプルが豊富に含まれたガイドライン「IBM Lotus User Interface Developer Documentation」が、IBMから公開されました。 今回公開されたIBMのガイドラインは、同社のLotus製品群のユーザビリティを統一するための社内プロジェクト「One U
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Photoshop VIP ☞ 種類別、ウェブデザインのモックアップ用UIデザイン素材キット20個まとめ
新着記事
https://www.uipatterns.net/uipatterns/
IDEA * IDEA
