つよいUI - transitkix design log
…というものを最近考えていました。「画面デザインのOKももらったし、私の仕事は終わり！あとはエンジニアに指示書を渡すだけ」と一息ついた時にこそ、改めてデザインを見つめなおすべきです。 つよいUIであるための7つの視点 1.本来、そこにあるはずの情報がない場合はどうなりますか？ リストUIで載せる情報が0件、文章が空っぽ、画像がない時など 2.表示する要素が想定よりすごく多い/すごく少ない場合はどうなりますか？ 数字の桁数、文章の行数、文章が入りきれない場合は文中・文末のどこを省略すべきか…など 3.ユーザーさんの立場によって、表示要素に変化はありませんか？ ゲストとログインユーザー、無料会員と有料会員…など 4.ロード中、もしくはロードされるまで何が出ていますか？ 通信中の表示、読み込み中の画像エリア…など 5.予期せぬエラーが起こった時、画面はどうなりますか？ 通信エラー、リンク先のコン
イケてるUIのデザインパターンを集めたサイト「Design Patterns on CodePen」 | ライフハッカー・ジャパン
「Design Patterns on CodePen」はイケてるUIのデザインパターンを集めたサイトです。CodePenというHTML、CSS、JavaScriptのコードを共有することができるサイトがあります。その中から、特に優れたUIを集めたのがこのサイトになります。その場で実行され、動作の確認もできますし便利ですね。 以下に使ってみた様子を載せておきます。まずDesign Patterns on CodePenへアクセスしましょう。「ボタン」「メールフォーム」「ページング」「タブ」などのUIパーツごとにカテゴライズされています。 詳細はこのように表示されます。コードが上部にあり、下部にそれを実行した結果が表示されます。コードを書き換えるとリアルタイムで結果も変わるので便利ですね。気に入ったUIを見つけたら、その作り方を参考にしてみましょう。ぜひUIを考える際にもご活用ください。 D
奈良市公式サイトのパンくずが斜め上を行くヤバさな件 – Webディレクターのお仕事ブログ
【追記】Twitterで教えてもらったのですが、13行が改善されて3行になってました。ご対応頂いた市役所のご担当者様、富士通のご担当者様、お疲れ様でした。今後とも、よろしくお願いいたします。【追記終わり】 住民票を郵送で取り寄せようと思って市役所のサイトを見たんですよ。今まで何回も見てるし別に普通のクソみたいな使いづらい行政サイトだなって相変わらず思ってたんです。でもね、あれ、これはおかしいなって、思ったんです。なんかね、変だな～って。それがね、この画像なんですよ。 委任状 – 奈良市 すっごいパンくずなんですよ…パンくず食い過ぎてお腹いっぱい。マジで。 僕らの業界ってまぁどの業界でもそうだけど仕事の流儀とか、そういうのあるじゃないですか。使いやすいサイトを作りたい人、ある程度ユーザビリティを犠牲にするけどかっこいいサイトを作る人、でもこれ酷いでしょ。誰もパンくず13段にしろなんて望んでな
そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
ビジネス向けモバイルアプリケーションのUIガイドライン、セールスフォース・ドットコムが公開。アイコンなどダウンロード可能
ビジネス向けモバイルアプリケーションのUIガイドライン、セールスフォース・ドットコムが公開。アイコンなどダウンロード可能 先週13日に、SAPが業務アプリ用のJavaScript製UIライブラリ「OpenUI5」を公開したとお伝えしたばかりですが、今度は、米セールスフォース・ドットコムがHTML5でのビジネス向けモバイルアプリケーションのUIガイドラインやサンプルを多数公開しました。ビジネスアプリ用のモバイル開発環境はHTML5/JavaScriptで急速に充実してきています。 米セールスフォース・ドットコムは先月、新ブランド「Salesforce 1」を立ち上げ、モバイルへ全面的にシフトすることを宣言したばかり。このスタイルガイドは、同社のモバイルへの注力を示すものといえるでしょう。 これまでビジネスアプリケーション向けに、モバイル対応のしっかりとしたスタイルガイドが公開された例はおそら
様々なイケてるUIを参考にできるサイト | バシャログ。
足掛け2年、全ての関連作品を見てからアベンジャーズを見て最高に盛り上がったminamiです。 Webデザインの中でもサイトのUIデザインは近年重要性を増していると思いますが、デザインする際のインスピレーションを受けられるサイトをご紹介します。 UI Patterns UI Patterns User Interface Patter Libraryというサイト名通り、UIが体系的にまとめられ解説されています。「Design patterns」ではそれぞれのUIに対して、どういう問題を解決してくれるものなのかの詳細な解説があるので、普段なんとなく使っているUIを基礎から勉強し直せます。 ui parade. ui parade. UIを種類別に集めたサイト。なかなか洗練されたものが集まってますね。 PATTERN TAP PATTERN TAP 良さ気なUIのスクリーンショットが集まるサイト
楽しく作れる！スマホアプリ/サイトのワイヤーフレーム・モックアップ作成支援ツール7選 | DevelopersIO
ワイヤーフレームを楽しく作ろう！ 魅力的なユーザーエクスペリエンスをユーザーに届けるために、ワイヤーフレームはとても重要です。 何より自分自身が楽しんで作らないと、良いアイデアは生まれないものですよね。 ということで「楽しく作れる！」という観点から、おすすめのスマホアプリ/サイトのワイヤーフレームの作成を支援するツールをまとめてみました！もちろんすべて無料で始められます！ では早速どうぞ〜！ Fluid UI http://www.fluidui.com/ プレビュー機能で画面遷移も作れる UIパーツが本物にかなり近い形で表現されています(むしろそのまま？)。UIパーツはWireframe、iPhone、iPad、Android、Android 4.0、Android Tablet、Windows Phoneの中から自由に選べます。かなり豊富です。またオリジナル画像をアップロードして使うこ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Kaizen Platform における UI ライブラリのワークフロー
海西瓤蔚建筑材料集团有限公司