ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
アプリ開発で参考にしておきたい UI デザインパターンまとめサイトのまとめ - Qiita
業務や個人でのアプリ開発で、UI デザインを考えるときに参考にできそうなサイトを紹介します。なかなか個性的・奇抜だったり、少し古い UI が混ざってたりしますが、インスピレーションを働かせる良い刺激になります。 tumblr 多めです。 Behance https://www.behance.net/ Adobe のポートフォリオサイトです。 モバイルデザインのみならずファッションやグラフィックデザインなど、様々なコンテンツが登録されています。 このサイトでは Creative Field という名前でカテゴリ分けされており、アプリ開発においては Interaction Design や Web Design あたりが参考になります。 Pinterest https://jp.pinterest.com/explore/%E3%83%A2%E3%83%90%E3%82%A4%E3%83%A
ListViewのdividerに余白をつける - Qiita
ListViewのdividerに余白をつける方法です。 dividerのdrawableを作成 res/drawable/にdivider用のxmlを作成します。 <?xml version="1.0" encoding="utf-8"?> <inset xmlns:android="http://schemas.android.com/apk/res/android" android:insetLeft="16dp" android:insetRight="16dp"> <shape> <solid android:color="#EEEEEE" /> <corners android:radius="1dp" /> </shape> </inset>
GoogleがプロトタイピングツールPixateを買収。無料化される。オススメ。 | fladdict
Googleが、ローカルベースのプロトタイピングツールPixateを買収した模様。以後、Pixateアプリは無料となり引き続き開発が続けられるようです。 2013年頃、Pixateに$600払ってた俺は泣いた。おめでとうございます。 Invisionを主流に百花繚乱の分断化で割と困っていたプロトタイピング業界。Googleがこの分野に手を出したことで変動は起きるのだろうか。 これがプロトタイピングツールの決定版になるとよいですね。高性能だし無料だし。クラウド版も$5だし。 日本でプロトタイピングサービスばパッとしない究極の問題は、サービスがオンラインのことなんですよね。SI系の人たちは「セキュリティ的な事情でオンラインの共有サービスを使えない」という事情がありました。Pixateはローカルアプリなので、その辺の心配をする必要がないのがポイントですね。そのうち大手SIとかでもこういうツールが
amana tech night vol.2 『実践！Pixate』
amana tech night vol.2 『達人たちから学ぶ。実践！プロトタイピング』にて行ったワークショップの資料の補完版です。 http://amana.connpass.com/event/13663/
Pixateでアプリのインタラクションモックアップが捗りそう
インタラクションのモックアップ ネイティブアプリを作っていて、いわゆるインタラクション・アニメーションの部分をモックアップできるツールの必要性を感じたので @hiloki さんに聞いたツールをいくつか試してみました。 The Next Generation of Mobile Interaction Design | Pixate Justinmind: Interactive wireframes for web and mobile Briefs 昔ながらに Flash を使うという選択肢もあった気はしますがせっかくなので、そういう用途に特化したツールを探したかった次第。（メンバーに Flash 使えるひとがいなかったという事情もある） Pixateがよかった The Next Generation of Mobile Interaction Design | Pixate 結果、一番
≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から） まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付
誰のためのデザイン？増補・改訂版を読んだ - ninjinkun's diary
自分が最初に元の誰のためのデザイン?―認知科学者のデザイン原論 (新曜社認知科学選書)（初版はPOETと呼ばれている*1 ）を読んだのは十数年前でした。4月に出たこの改訂版を読み返してみて、改めて感銘を受けました（そして内容をほとんど忘れていたのに気づきました）。 内容としては、エモーショナル・デザイン―微笑を誘うモノたちのために 、複雑さと共に暮らす―デザインの挑戦など後の書籍で検討された内容が盛り込まれて、ノーマン著作の集大成になっています。 自分がこの改訂版で注目しているのは、「6章デザイン思考」の追加です。 6章デザイン思考 正しい問題を発見するのがデザインである として、そのための手段としてデザイン思考が解説されます。 具体的にフレームワークとして取り上げられている人間中心デザインプロセスを見てみると、 観察→アイデア創出→プロトタイピング→テスト→観察… というサイクルになって
“UI/UX”？～恥をかかないための15分UXD入門
1. 2013年1月28日 “ＵＩ／ＵＸ”？ ～恥をかかないための15分ＵＸＤ入門 千葉工業大学 デザイン科学科 Chiba Institute of Technology Department of Design 安藤 昌也 ando@sky.it-chiba.ac.jp Copyright © Masaya Ando 2. 1 タイトルの説明 ～SlideShare用説明 「恥をかかないための」というのは、UI/UXに係っている わけではありません。 “UX”に定義が定まっているわけではありません。 私の想いとしては、“UX”をよく理解せず商売のキー ワードとして消費してほしくない。 理解のないまま“UX”というキーワードを使い、クライア ントをがっかりさせ、ひいては「UXなんてダメだよ」という 想いが拡散してしまうことを避けたい。 定義は皆さん自身の理解の範囲であ
高速にドッグフードを食べるエンジニアと一緒にデザイナーが仕事する方法 - Hatena Design Group
photo by wiccked こんにちは。はてな デザインチームの id:ueday です。 先日、はてなでは品川の日本マイクロソフトで「はてな エンジニアブロガー祭り」を開催しました。 そこで発表された、はてな アプリケーションエンジニアの id:hitode909 による 「高速にドッグフードを食べる方法」 のスライドが SpeakerDeck に公開されています。もうご覧になりましたか？ 高速にドッグフードを食べる方法 - Speaker Deck 高速にドッグフードを食べる方法 - hitode909の日記 はてなブログチームでは高速にドッグフードを食べながら開発していますが、この記事では 「エンジニアと一緒に高速にドッグフードを食べるデザイナー」 という視点から、はてなブログ開発の様子をご紹介します。 高速にドッグフードを食べるメリット 「ドッグフードを食べる」とは、実際にド
よくわかるマテリアルデザインの設計コンセプト | fladdict
iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた
Material Design？言いたい事はわかった。だがどうやって実装しろと？そんなあなたに贈るMaterial Design対応ライブラリ集 - Qiita
Material Design？言いたい事はわかった。だがどうやって実装しろと？そんなあなたに贈るMaterial Design対応ライブラリ集AndroidGitHubMaterialDesign Material Designに対応しているライブラリをコンポーネント別にまとめてみました。 一応 GoogleのMaterial Designを説明しているcomponents と同じ順で、ライブラリとスクリーンショットをつらつら並べてみました。 Buttom sheets BottomSheet ダイアログを実装する間隔で使えます。 Buttons MaterialDesignLibrary ○Flat Button ○Rectangle Button ○Float Button ○Float Small Button FloatingActionButton Google+のようなFlo
Webサイトやモバイルサイトのワイヤーフレームがたくさん！でレイアウト作りの参考に役立つ「UI TITES」と「UXKITS」 | HTML5でサイトをつくろう
Webサイトやモバイルサイトのワイヤーフレームがたくさん！でレイアウト作りの参考に役立つ「UI TITES」と「UXKITS」 最近、自分の中でWebサイトの参考としてPinterestがとても便利で毎日みてるのですが、かっこよいサイトの他にレイアウトの例としてUIやUXに特化したボードなどもありチェックしています。 そんな時見つけた、Webサイトやスマホサイトを画面構成を作る際にたくさんのモジュールが用意されている「UI TITES」と「UX KITS」がシンプルだけですが組み合わせによって色々なレイアウトが作れるのでとても参考になりますので紹介します。 http://pixelbuddha.net/ui-tiles/ こちらは72個もモジュールがあり無料でダウンロードができます。 PHOTOSHOPデータやイラレデータがありますので、個々のモジュールを組み合わせてWebサイトのワイヤー
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Android Switch widget textOn and textOff not working in Lollipop
http://www.android4devs.com/2014/12/how-to-make-material-design-app.html
Status Bar Color not showing - 5.0 Lollipop Android Studio: (AppCompat-v7:r21)
Material Design
https://jp.techcrunch.com/2015/04/02/20150331lessons-in-designing-great-enterprise-software/
エンジニアのためのUIデザイン
