[B! design] hondallicaのブックマーク

マテリアルデザインのガイドラインが最高に実践的だった

「2014年にグッときたコレ」がテーマになる Fenrir Advent Calendar 2014 の24日目です。マテリアルデザインデザイナーの大西です。マテリアルデザインそのものへの記事は既に多くの方々が取り組まれているので、少し目先を変えてガイドラインについてです。このガイドラインが最高に実践的でグッときました。 UI・UXについてのガイドラインは面白くて勉強にもなるのですが、理解して実践するところにまで到達するのには中々のエネルギーを使いませんか？マテリアルデザインは英語のドキュメントなので最初は尻込みしましたが、読み進めるうちに内容の充実っぷりに引き込まれました。ここまで親切なガイドラインは珍しいと思います。和訳も欲しいところですが、用例として画像がたくさん挙げられているので翻訳サイトを使えば充分理解できると思います。豊富なテンプレートと素材 750種類以上のアイコン

hondallica 2014/12/24

design

リンク

画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール | UXデザイン会社Standardのブログ

2014.11.19 / UI 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール Tomohiro Suzuki クライアントやディレクターから渡された画面遷移図を元にワイヤーフレームを作ってみると、後から足りない画面が次々に発見された、または画面内の情報がどこに繋がるのか分からないといった経験はありませんか？この画面遷移図というものは本来は制作範囲の全体像と構造を明確にし、必要な画面というものを洗い出したりするものです。通常のWebサイトであれば、従来のような画面遷移図でも問題ないかもしれませんが、多くのインタラクションが発生するサービスの設計では複雑化しやすく、何度も情報を行き来して確認することになるため時間がかかります。原因のひとつとして、画面遷移図では画面名のみを記載して繋げていくことになるため、必要な情報が不足していることが挙げられます。その結果、本来で

hondallica 2014/11/20

design

リンク

iOS&Androidアプリのデザインをする人に知っておいてもらいたいこと - Qiita

知り合いのデザイナーさんから「iOS&Androidアプリをデザインする時に何か知っておくべき事ってありますか？」と質問を受けたので、思い浮かんだ事をずらっと書いてみました。他にも何かありましたらコメントお願いします！ツッコミも歓迎(´ﾛ｀) モバイルアプリデザインの原則とiOS 量が少し多いが、公式のiOSヒューマンインターフェイスガイドラインは必読。(※ダウンロードに時間かかるので注意) iOSだけに限らず、モバイルアプリのデザインをするにあたって重要な事がまとまっている。載っていることヒューマンインターフェイスの原則アプリケーション設計戦略 iOSテクノロジーの使用に関するガイドライン標準で用意されている各UI要素(タブやツールバー等)の使い方マルチスクリーン対応どのような違いがあるのかを把握する画面密度(ppi)や画面サイズなど参考：iPhone, iPod to

hondallica 2014/04/15

UI
design

リンク

レスポンシブWebデザインでハマりがちな%指定 │ Design Spice

レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。要素の幅と高さの%指定レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、求める要素の幅÷親要素のコンテンツ幅×100% の式で求められます。例えば求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。また、ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。同様に高さを%で指定する場合は、求める要素の高さ÷親要素のコンテンツの高さ×100% となります。 marginとpaddingの%指定左右のmargin、paddingを%で指