優れたユーザーインタフェース（UI）を実現するチェックリスト36項目
【img via tabletop assistant by MattHurst】 優れたユーザーインタフェースとは何か。どのようなデザインを「優れたユーザーインタフェース」と呼ぶのに相応しいのだろうか。 GoodUIというサイトに優れたユーザーインタフェースを実現するために確認しておきたい36項目をイラスト付きで解説していた。とても分かりやすく納得できる内容が多かったので、紹介しておく！ 1.マルチカラムではなく、シングルカラム 複数カラムだとユーザーの目線が左右に逸れてしまう可能性があるため。 2.まずはギフトを渡してみる 最初から買うことを促すよりもまずはこちらから何かを与えることによってユーザーに喜ばれる。 3.似た機能や項目は1つにまとめて表示する 似た機能を分散させる必要はない。 4.ユーザーからの反応を載せる 実際に使っている「ユーザーの声」を参考に買い物をする人は少なくない
box-shadowで表現する、「セミフラット」なズルいデザインテクニック
box-shadowで表現する、「セミフラット」なズルいデザインテクニック：ズルいデザイン（3）（1/2 ページ） 世の中、フラットデザイン流行りですが…… iOS 7がフラットデザインを採用したのを皮切りに、Webデザインのトレンドがフラットデザイン一色になってきましたが、立体感を完全に排した色面と空間、シンプルな描画の組み合わせだけのデザイン表現は、ある種ごまかしが効かず、また適切な利用方法を喚起させるようなUIも表現がなかなか難しいものです。 例えば、「ボタンは押せるもの」であると表現するための「押したくなる感じ」を喚起させる立体感は、ユーザビリティ面でもまだまだ有効です。今回は、流行のフラットデザインの中でも違和感なく使えて、また適切なアフォーダンスの表現が可能になる、「やりすぎていない立体感」を目指した、box-shadowを活用した各種ボックス表現の作り方を紹介します。 NGな
【厳選】日本の全iOSプログラマに捧ぐ！iPhoneアプリ制作に参考になりすぎるデザインリンク集15選 | DX.univ
iOSアプリ開発担当の菅原です。 iPhoneやiPadのア[...]【厳選】日本の全iOSプログラマに捧ぐ！iPhoneアプリ制作に参考になりすぎるデザインリンク集15選 by Yu Sugawara in Design · Mobile — 2013/07/18 iOSアプリ開発担当の菅原です。 iPhoneやiPadのアプリ開発はすべて一人で販売するところまで持っていけるのが魅力の1つです。 アプリ開発作業を大きく分類しますと プログラム デザイン 販売 にわかれます。販売に関してはAppStoreがあるので、心配はありません。残りのプログラムとデザインですが、なかなか両方を得意にするというのが難しいと思います。僕はプログラムは出来るのですがデザインがからっきしダメです。 今日はそういったデザインが苦手なプログラマ向けに参考になるデザインリンク集をご紹介いたします。個人のアプリ開
UIデザインのアニメーションまで共有できるモック作成ツールまとめ | Goodpatch Blog
先日、Goodpatch代表の土屋がWebSig会議というイベントで講演をしました。講演は「ハートに響くUIを生み出すためのデザインプロセス」というタイトルで行われ、起業までのストーリー、GoodpatchのUI設計プロセスなどについて話しました。講演内容は↓のslideshareを参照してください。 その講演の中でGoodpatchはデザインする際にプロトタイプを作成していると話しました。以前にMEMOPATCHでもインタラクションや導線の動きを伝える上でプロトタイプ作成が重要という趣旨の記事をアップしています。 （参考: これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編）, （後編）） プロトタイプ作成というとHTML, CSS, JavaScriptで実装する方法がメジャーかと思いますが、これだとリソースをかなり割くことになってしまいます。そこで今回は
Design Trend: Long Shadow Design
We have talked about Flat Design Trend already. The next trending in the design world is Long shadow design. There was already a plenty of designers started Long shadow design. Before the name Long shadow design, the trend tagged along with Flat Design. Long shadow design means same as its title. The trend will use long shadows with 120 or 45-degree angle. The end of the shadow will be feathered o
価格表のデザインをまとめたデザイン集「21 Examples of Pricing Pages in Web Design」
TOP > WebDesign > 価格表のデザインをまとめたデザイン集「21 Examples of Pricing Pages in Web Design」 WEBサービスでよく見かける、サービスの形態ごとの価格表、そのプランで何ができるのか？いくら位の差があるのかというのを一瞬で見分けられるように整理されており便利でスタンダードなデザインですが、これがいざ作るとなるとなかなか難しく苦労したというデザイナーの方も多いのではないでしょうか？今日紹介するのは価格表のデザインをまとめたデザイン集「21 Examples of Pricing Pages in Web Design」です。 Spotify 全部で21もの価格表がまとめられたています。今日はその中から気になったものをいくつかピックアップして紹介したいと思います。 詳しくは以下 Treehouse できることが明快で、比較
脳に優しいデザインを！「Vertical Rhythm」の基本と実現方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。 どうも近頃はいぬ肌が恋しく、無性にワンコちゃんをなでなですりすりしたくてうずうずしるのですが・・ こういう写真を眺めているだけで心がほわ～っとしてきますよね 久しぶりに記事を書きます。「Vertical Rhythm」と呼ばれているデザイン手法ご存知でしょうか？さり気なく取り入れることで、文章が読みやすくなったり、レイアウトが整ったりすることが期待できるという。 デザインに限った話ではないが、完璧な正解など存在しないと思うので、あくまで一つの考え方として捉えて頂ければと思います。 実例を挙げながら進めて行きますので、「Vertical Rhythm」の考え方とその良さ、便利さをきっと理解してもらえるんじゃないかと思います。 前書き クライアントに「説得力のあるデザイン」を届けよう！ LIGでデザイナーをやってて、よくベテランデザイナーさんにこういう風に言わ
[UI]ボタンや画像のマウスホバー時のアクションはどうあるべきか
Twitterでの話題 マウスホバー時の表現について、Twitterで少し話題になりました。ちょっとツイートをとぅぎゃったりしてたわけではないので(誰かしてたらお願いｗ)全部を拾っているわけではないのですが、昨日のぽよしさん(@poyosi)のツイートと関連したものを紹介。 【質問】マウスホバーの時って明るくするのが一般的にとかあるんかいな？ — ぽよし (@poyosi) February 19, 2013 ホバー感については世界観で考えることがおおいけど「触れてる」「押せる」が明確になればいいんじゃないかと思ってたけど意見が色々… — ぽよし (@poyosi) February 19, 2013 @poyosi 何かで決められてるかはわからんけど、基本的にはやっぱポジティブな方向(明るくなる、大きくなる、前進する)に変化するのが自然やと思う。 — 酒井優 (@glatyou) Feb
![[UI]ボタンや画像のマウスホバー時のアクションはどうあるべきか](https://cdn-ak-scissors.b.st-hatena.com/image/square/6dcd1a1bd6a6eace15923aa271f50ba5cb0619c4/backend=imagemagick;height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F02%2Fui-hover-action-02-150x150.png)
優れたUIデザインを作るために知るべき12のTips | Goodpatch Blog
こんにちは、だいきです。 海外のUIデザインに関する記事「14 Golden Eggs of Good UI Design（直訳: 優れたUIデザインの14の金の卵）」で書かれていたUIデザインに関するTipsがとても勉強になったので、その中からいくつか抜粋したものを翻訳しました！ （この記事はJohannes Thönesというブログの14 Golden Eggs of Good UI Designという記事の抜粋翻訳ブログです。） 1, 先進的な技術を使う理由 photo credit: Carlos Varela via photopin cc HTML5が新しい技術だからといって、それを使う必要性はありません。 新しい技術を使うことが目的になってはいけません。 ユーザーとユーザーが期待している事を考えてください。 どんなUX（ユーザーエクスペリエンス）をユーザーに与えたいですか？
iOSのデザインをするときに利用しているツールいろいろ | ナナメウエblog
こんにちは、いつかiOSのデザインのみで食べていきたい鈴木(@suzukisan__)です。 まだまだ若輩ですがiOSのデザイン環境について紹介させて頂きます。 画面設計 iPhone Idea Sheet あまり紙でやることはないのですが、使う場合はこちらのiPhone Idea Sheetです。 うちではむしろエンジニアさんのほうが使っています。 三階ラボ | iPhone Idea Sheet ver.01 あまりに使いやすいのでiPhone5用にiPhone5 Idea Sheetなるものをうちで作成しました。 iPhone5のワイヤーフレームに使えるアイデアシートをイラレで作りました | ナナメウエblog POP 本来は紙に書いたワイヤーフレームから画面設計をイメージするためのものだと思いますが、普通にデザインだけしてコーディング前の画像を取り込んで画面推移を説明す
Inspiring UI Wireframe Sketches
Inspiration Inspiring UI Wireframe Sketches Gisele MullerOctober 4, 201210 Comments010.3k Wireframes are the skeleton of an idea, and it is really interesting to observe how other people do their wireframes because we can get several ideas and insights for our own projects. There are many different approaches to wireframes, from detailing kinds of information you will display, to showing a range o
AndroidのUIデザインパターンを専門に収集しているギャラリーサイト・Android niceties - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 Androidに特化したUIデザインパターン のギャラリーサイト・Android niceties のご紹介です。自動で次のページを読み 込んでくれるのでサクサクギャラリーを 見る事が出来ます。特化型のギャラリー は少ないので覚えておいて損は無いと 思います。 AndroidのUIデザインパターンを専門に収集しているギャラリーです。Tumblrが使われています。 1つのサイトに数枚のキャプチャが横並びで掲載されています。スクロールすると次のページを自動で読み込んでくれるのでサクサク確認出来ます。 ↑ ちょっと分かりにくいかもですけど、キャプチャ下部にサイトコンテンツ別で分けられたタグが有ります。 ↑ キャプチャのサイズの変更も可能。 暇なときのインスピレーション向上
デザインの引き出しを増やそう！細部にまでこだわった美しいウェブUIエレメントのPSD素材のまとめ
細部まで作り込まれた美しいデザインのウェブ用のUIエレメントのPSD素材を紹介します。 そのまま制作に使ってもよし、インスピレーションをもらってもよし、PSDなのでエフェクトの勉強をしてもよし、などいろいろ活用できると思います。 ※一部のファイルはPNGフォーマットです。
官能のUIデザイン - SLN:blog*
ちょっと前にJonas Erikssonさんというデザイナーのつくった「76-Synthesizer」という架空のiPhoneアプリのUIデザインがめちゃくちゃセクシーで驚いたんですよ。色っぽいとしか表現しようがない。 最近のiPhone/iPadアプリのデザインとか見てると、ものすごくよくできているものがたまにあって、フォトリアリスティックなんだけど真俯瞰でUIっぽさを担保している...みたいな独特の質感になってる。こういうデザインって、UIデザインの歴史としてとらえると、まず、OSで描画できるグラフィックが32ビットになったことからはじまり、Photoshopの機能の充実、デザインのメソッド化、Illustratorのグラデーションマップ芸の成熟なんかも影響して、結構自然な流れのように感じちゃうんだけど、グラフィックデザイン史として見るとかなり特異な状況になってきているんじゃないかとい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これからのUIデザインのヒントになるDribbbleのアートワークのまとめ
UIデザインについて改めてしっかりと学ぶために参考になるスライドまとめ
http://shingekidesign.com/?p=43
ブラーの効いたボケデザインの無料背景テクスチャー素材
http://www.redsafi.com/sugarui/
次のウェブサイトやブログを作る時に参考にしたいUIデザインのリソースのまとめ