![デザイン落とし穴 - 抜け出すための傾向と対策 -](https://cdn-ak-scissors.b.st-hatena.com/image/square/e6784cdd44a7696601ef3dd9703a816c02d0e6ea/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2Fe951929108a74cb0a38ec59dab4b0843%2Fslide_0.jpg%3F8246080)
Photo Editor - Photoshop Online by Pixlr - Free Image Editing Tools Now, there are even more compelling reasons to choose Pixlr as your go-to solution for all your online image editing requirements, particularly when you're looking for a powerful "photo editor." Whether you're inclined towards traditional desktop-style photo editing or prefer a more contemporary approach, Pixlr has you covered. Pi
2014年6月にGoogleマテリアルデザインガイドラインが公開されてから、AndroidはもとよりiOSのアプリでも、このガイドラインを取り入れたUI/UXの優れた作品が多数出てきました。 今回はそんな相変わらずトレンディなマテリアルデザインのガイドラインをわかりやすく、ポイントを絞ってお伝えします。 目次 マテリアルデザインとは? 平面なのに3D 紙とインク マテリアルデザインのカラー グリッドシステム アニメーション 心地の良い動き タッチフィードバック 意味を持ったアニメーション まとめ マテリアルデザインとは? マテリアルデザインを直訳すると「物質的なデザイン」という意味です。 デジタルのデザインなのにどの辺が「物質的」なのか、それは次の2つの概念で表現されています。 平面なのに3D マテリアルデザインでは、要素の重なりを物理的にとらえ、平面の中に、明確なZ軸の概念を持たせていま
資料作りに使えるアイコンや、ブログデザインに使えるシルエット・ドット絵など、小型で取り回しの良い画像素材をまとめたオススメのサイトがあります。 無料でかつ商用FREE。可変も基本的にOKと、非常に自由度の高い使用条件なのが特徴。再配布や素材そのものの販売をしない限りは、自由に使ってくださいという太っ腹なサイトたちなのです。 ぜひ、あなたのクリエイティブライフの中に取り入れてみてください! 商用FREE これからご紹介するサイトで配布されているデザインは、基本的にはすべて商用利用OKで、かつ無料です。 しかし、ダウンロードしたデザインを再配布したり、販売したりする行為は禁止になっています。 複雑な利用規約はないですが、最低限のルールとマナーは守りましょう。人の優しさに漬け込む行為はダメですよ! それでは参りましょう。 ヒューマンピクトグラム リンク:human pictogram 2.0 (
エンジニアが自分一人でアプリ開発などをしているとかなり困るのが画像素材の作成。(もっというとデザイン全般ですが。。。) その中でもアプリアイコンを作る際に個人ではどうしているかを晒してみようと思います。 アイコンを作る手順 ざっくり手順を言うと以下2つです。 Inkscapeで元アイコン作成 makeappiconで全サイズのアイコン画像作成 Inkscape アイコン作成といえばIllustratorやPhotoshopを使うのが一般的かと思うのですが、非デザイナーにとってこれらのソフトはまだまだ高価で簡単に手を出せるものではありません。 そこでこのInkscapeです。 公式サイトはこちら。 Inkscapeはオープンソースの無料のベクター画像編集ソフトです。(ものすごく簡単に言うとIllustatorと同じことができる無料のソフトです) 無料ですが、基本的なアイコン作りには困らない機
昨日「エンジニアだけでアプリアイコンを作る」を書いたのですが、500はてブ以上と思わぬ反響をいただいて驚いています。 ほぼツールの紹介だったので大方予想はできていたのですが「で、結局絵はどう書くの?」といったコメントを多くいただきました。 このあたりについてもどのようにやってきたかをざっくりですが紹介しておきたいと思います。 アイコンを書けるようになるまで 模写する 勉強する 自分なりに作る(ゴール) ざっくり言うとこの3つの手順です。 あくまで「なんとか書けるようになるまで」なのでデザイナーさんから見ればまだまだなレベルにしか到達しないでしょうが、やれないよりはマシなはずです。 模写する まずは今あるアイコンと同じものをとにかく作っていきます。 ここでの主な目的はツールの使い方を把握することです。(前記事ではInkscapeを紹介しました) 10個ほど作ればおそらくツールの使い方はほとん
プレゼン資料をキレイにわかりやすく作りたい!と思い立った人に、まずお勧めしたいのがこのサイト「伝わるデザイン|研究発表のユニバーサルデザイン」です。基本的には研究発表を行う学生さんをターゲットとしているサイトですが、ビジネスマンにも読み応えは十分。提案書・企画書のプレゼン資料作成にそのまま利用できる内容となっています。 魅力は、わかりやすいサンプルと豊富な解説。デザイン初心者にうってつけのサイトです。ページはすっきりとしていて非常に見やすく・読みやすくレイアウトされています。 サイト全体の情報量も多からず少なからず、ほどよく網羅されていて、ひととおり目を通し終わった頃には、一歩レベルアップしている自分に気づくこと間違いありません。百聞は一見に如かず。まずはご覧になってみてはいかがでしょうか?
2013-12-23 モバイルUIのデザインに役に立つUIパターンギャラリー集17選 アプリの開発の時にUIのデザインに悩みますよね。 そんな時、モバイルUIのパターンギャラリー集が役に立ちます。 そのギャラリーサイトのサイトを集めてみました。 スクリーンショットを集めたものと、デザイナーの作品のものがあります。 Showrtpathブラウザを開発していた時はdribbbleをよく見ていました。 Pttrns - Mobile User Interface Patterns 優れたiPhoneサイトデザイン集 - iPhoneデザインボックス Mobile Patterns lovely ui Inspired UI - Mobile Apps Design Patterns [iPhone] Mobile Awesomeness Meerli · Featured Android Nic
マークアップシリーズの第2回は、前回のよくある3つのデザインから考える、マークアップの最適解と同じく、html5jマークアップ部主催のイベント「MarkupCafe」で出題された3つのお題から最適なマークアップを探ります。 イベントではAからDの4つのチームにわかれてマークアップを考えました。それぞれのチームごとに違ったマークアップへの考えが表れていてとても興味深いです。また今回はイベント終了後に「HTML5 Experts.jp」のエキスパート兼マークアップ部の部長でもある村岡正和氏に、氏自身ならこうするといったマークアップを公開してもらいました。 本記事ではWebサイト制作の際にありがちな”ページング”、”フォーム”、”データテーブル”の3つについて要素の使いどころや仕様、アクセシビリティやユーザビリティといった観点からマークアップを考えていきます。 1.ページングの中身と重要度 最初
プログラミングの基礎であるhtmlを勉強していると、必ず出てくる言葉がcss。 現代のwebサービスにおいて、htmlとcssはいわば兄弟のようなもので切っても切れない関係と言えるでしょう。 では、cssとはいったいどういうものなのでしょうか。 簡単に言うと、Webページの文字の色や大きさ、背景、配置といった見た目を設定する言語の一種です。 静的ページも動的ページも見た目の部分の多くはこのcssで制御されています。 もしcssを詳しく学ぶなら、独学もいいですがプログラミングスクールがおすすめです。費用は当然かかりますが、アドバイスがもらえることと、学習スケジュールが管理されるので、強制的に頑張れる仕組みが作れるのもメリットと言えるでしょう。 The post cssとは?使い方と学び方の基礎まとめ first appeared on プログラミング学習の窓口.
ひと味ちがうTwitter Bootstrapの9個の無料テンプレート&有料まとめサイト Jan 28th, 2013 Tweet Twitter Bootstrapはデザインが苦手なプログラマのための必須ツールです。今回は、一味違ったBootstrapサイトを作るときにきっと参考になるテンプレートをまとめてみました! (03/05 追記) FlatUI、Bootstrap Expoを追加しました (03/24 追記) Flatstrapを追加しました (04/03 追記) MagicSuggestを追加しました (04/04 追記) Bootstrapのリソースネタを別の記事にしました 無料のテンプレート 無料のBootstrapテンプレートの紹介です。BootswachのようにCSSだけで適用できるものと、HTML/CSS/JSなどいろいろ追加しないと実現できないものがあります
インタフェースデザインの実践的な解説書。使いやすいUIで優れたUXを提供するために必須な「リサーチ」「デザイン」「インプリメンテーション」という3つのフェーズを、初心者にもわかるようていねいに解説します。テクニックの章では、ストーリーボードやペーパープロトタイピング、ユーザビリティテストなど、優れたユーザビリティを実現するためのアプローチについて学びます。アイデアの章では、テキストの書き方、どのくらいリアルなデザインであるべきか、アニメーションを使うタイミングなどについて学びます。調査・設計・実装・検証・改善というワークフローに沿ってデザインすれば、ユーザビリティは驚くほど向上します。 翻訳者によるサポートページ。 サンプルPDF ● 「前付、1章と8章(I部)、23章(II部)、33章(III部)」(38MB) 賞賛の声 はじめに I部 リサーチ 1章 ユーザーリサーチ 2章 ジョブシャ
はじめに こんにちは、Python界の情弱です。もうかれこれ5年くらい「僕にウェブデザインのセンスがあったら、いやせめてデザインのセンスがあったらどんなによかったことだろう」と思っていたわけですが、半ば諦めていました。しかし先日同僚の@kotarokパイセンに勧められるがままに「ノンデザイナーズ・デザインブック」を読んだら、これが素晴らしい書籍で、もう一度僕にやれば出来るかもと思わせてくれたわけです。 ノンデザイナーズ・デザインブック [フルカラー新装増補版] 作者: Robin Williams,吉川典秀出版社/メーカー: 毎日コミュニケーションズ発売日: 2008/11/19メディア: 単行本(ソフトカバー)購入: 58人 クリック: 1,019回この商品を含むブログ (102件) を見る 本書が良いのは、多くのデザイン例があり、それも原則の適用後だけではなく、その前後でどれだけデザイ
tikedaさんより、新著『スマートフォンのためのUIデザイン』をご恵投いただきました。ありがとうございます。結論からいうと、名著、英語でいうと、"Epic, just epic"って感じ。必読です。 スマートフォンのためのUIデザイン ユーザー体験に大切なルールとパターン 作者: 池田拓司出版社/メーカー: ソフトバンククリエイティブ発売日: 2013/03/30メディア: 大型本 クリック: 117回この商品を含むブログ (2件) を見る 本書は、スマートフォン用のアプリ・ウェブサイトのパタンを分類・整理した上で、網羅的に紹介する本です。かつての類書に『iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン』という本があって、これはこれで素晴しいのですが、本書はカタログに徹したことで、さらに価値を高めていると感じました。 そもそもデザインにとって、パタン化は伝統的な営み
一昨年に社内で行ったAbout Face 3輪講の資料を公開します。実は今までずっと公開されていたのですが、存在を知られていなかったので、改めて周知します。 About Face 3はUI/UX設計の教科書で、ユーザーストーリーやペルソナなど、基本的な内容が押さえられています。ディレクター、デザイナー、エンジニア、サポート等、プロダクト制作に関わる全員の共通知識として使える内容だと思います。 About Face 3輪講概要 1. ゴールダイレクテッドデザイン 2. 実装モデルと脳内モデル 3. 初心者、上級者、中級者 5. ユーザーのモデリング : ペルソナとゴール 6. デザインの基礎 : シナリオと要求 8. 優れたデザインの総合 : 原則とパターン 10. オーケストレーションとフロー 11. 間接的な操作を取り除く 12. 良き振る舞いのデザイン 13. メタファ、イディオム、ア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く