アイコンによって、アクション、概念、または製品を簡略化したビジュアルが提供されます。 意味をシンボリックイメージに圧縮することで、アイコンは言語の障壁を越え、貴重なリソースである画面スペースを節約するのに役立ちます。 優れたアイコンは、文字体裁やその他のデザイン言語と調和するものです。 彼らは比喩を混ぜず、必要なものだけをできるだけ迅速かつ簡単に伝えます。 アイコンは、アプリ内およびアプリの外部に表示できます。
generative design=プログラムによって生成されるグラフィックについての、きわめて個人的な思い出語りです。 10数年前、学生のときに一時期PostScript言語でグラフィックを書くことにはまった時期がある。テキストエディタで書いたPostScriptのプログラムを直接レーザープリンタに送信すると、計算結果が「紙」になって出てくる。そもそも出力先がディスプレイではなく「プリンタ」というのが最高にクールだと思ったし、ひまわり関数やフラクタルツリーのようないかにもプログラムで書けそうな形であっても、0.3ポイントの繊細な線で紙に出力されるのはハッとするほど新鮮であった。フォトリアリスティックなCG表現にさっぱり関心が持てなかった僕にとっては、こんな「CG」もあるんだ! という驚きがあった。 (画像は筆者がProcessingで作ったもの) 細かい線がいっぱいで解像度が高い!という
フラットデザインの導入以来、アニメーションの質が、今までにないほど、優れたインターフェース作成のために必要不可欠なものとなっています。モーションデザインを通して、製品の総体的なブランドエクスペリエンスを左右するようになり、製品を、市場の他のものと差別化する要素となりました。アニメーションは複雑なインタラクションを簡素化し、優れたデザインを記憶に残るユーザエクスペリエンスにしました。では、質の高いアニメーションはどのように作られるのでしょうか? イージングカーブは多くの要となるコンポーネントの1つで、適切なアニメーションをとり、素晴らしいものに作り上げます。 問題なのは、イージングカーブがどのように機能するかについての理解が、少々難しいということです。 前回の記事 After Effects to CSS で触れたタイミング関数への興味の派生としてこの記事を書きましたが、この記事を読むことで
グラフィック・ビズは、イラストレーターなどのデザインソフトをお持ちでない方にも印刷物をご注文頂ける様に幅広いサービスをご提供しています。 Microsoft Office のワード、エクセル、パワーポイントで作成したデータをホームページからアップロードするだけでカンタンに印刷注文が行える「ファイルアップロード」。ホームページ上でカンタンにデザイン作成から印刷注文までご利用いただける無料編集ツール「web デザインツール」。パソコンが苦手な方へもおすすめ。デザインテンプレートを選ぶだけのカンタン印刷「デザインテンプレート」はホームページ上で名前や住所を入力するだけで名刺や封筒、はがきの印刷注文がご利用いただけます。専任のスタッフがしっかりサポート。デザインから印刷まで依頼できる「デザインサービス」。チラシ、フライヤー、名刺、封筒、ポストカード、ポスター、冊子、カレンダー、ステッカー、シールな
インタラクションのモックアップ ネイティブアプリを作っていて、いわゆるインタラクション・アニメーションの部分をモックアップできるツールの必要性を感じたので @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 結果、一番
iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 最近「見せる場」のあり方について考えることが多くなっています。仕事でも、プライベートでも。 そもそも、ここ数年、プライベートで視覚文化と人間の知的活動や思考の関わりに関する歴史に興味をもって、いろいろ本を読んだり調べてみたりしたんですが、そこにたまたま仕事でもそうしたテーマに関わる機会が増えてきているので、結構楽しんでいます。 "L. A. ボワローとギュスターヴ・エッフェルによって1887年に建てられたボン・マルシェ Au Bon Marché (vue générale - gravure)" by 不明 - fonds Boucicaut. Licensed under CC0 via ウィキメディア・コモンズ. そんな僕がいま興味をもっているのが19世紀のヨーロッパ
スマートフォンはデカくなっても手は元のまんまです。親指で快適に素早く使うにはデザインはどう工夫すればいいの? 注意すべきポイントをまとめてみました。 親指操作をベースにデザインする デザインの専門家Steven Hooberさんが携帯1,333台の使用状況を調べてみた結果では親指操作の人は全体の75%、片手操作の人は49%でした。 日本でも片手の人が多いですけど、大型画面(4インチ以上)だと一番上にコントロールバーがあったりすると親指が届かなくて大変ですよね。
ある記事 によれば、レスポンシブ Web デザインを採用するサイトの 72% が、デスクトップとモバイルに同じリソースが使われているそうです。またそれらリソースの 60% 以上が画像 という統計や、モバイル用に画像を最適化すれば、データ量を 72.2% 削減できる という調査結果もあります。 ということで、レスポンシブ画像のことを調べていていましたが、その技術進化というか、紆余曲折も含めて色々とある様です。 最新技術を素早く取り入れることはもちろん大事ですが、特に過渡期においては、変化に強いサイトを作るためにも技術の先行きを見極めることが重要です。そこでタイトルのような視点で、これまでの経緯をつらつらと辿ってみました。 自分としてのテーマは、「じゃあ、今、どうするか?」だったのですが…。読んで下さる方の何かに役立つかどうかは甚だ心もとない記事です。 ちなみに今回記事で取り上げた話題について
ビスケットは,開発して新しい機能を追加したときなど,必ず子どもたちが使っている様子を自分目で見てどんな風に使っているかを見てきます(最近はその暇が無くて他人に任せていたりして,かなりまずいんですが).3年前くらいの面白いエピソードをご紹介しましょう. ちょうど,Androidタブレットで動くビスケットを開発していて(これはまた一般には配布していません.実験環境だけです),それがどのように子どもたちに使われるか見に行きました.僕としても指で直接操作するタブレットのUIの開発は初めてで.実は,マウスとタッチペンの操作は結構似ています.どちらも,非常に小さいエリアを結構正確にポイントできて,ドラッグもできますから.どちらかというと,ペンの方がドラッグが得意でしたね.小さい子はマウスクリックが全然出来ないとか(ボタンを押すときに指先だけ押すということができないので,手を握ってしまって,その結果マウ
皆さんはお気に入りデザインの管理をどうやっていますか? はじめまして! 14新卒デザイナーとして面白法人カヤックに入社しました、トダエミです。 ソーシャルゲームチームでデザイン修行しながら、写真撮ったり絵を描いたりしています。 今回は、新卒デザイナーにとって関門の一つデザインの引き出しを増やせ! を攻略するための方法として、 デザインスクラップツールの紹介をします! 1.デスクトップ系ツール バナーもボタンもキャプチャも、これ一つ!「Spark Box」 >> http://www.icyblaze.com/sparkbox/ (対応:mac) UIやバナーなど単体のものをストックするのに大活躍! 私はソーシャルゲームのバナーをストックするのに使っています。 サイトに使われている画像が一覧で表示され、一つずつまたはすべてライブラリに読み込めます。 魅力的なのはソート機能! なんと自動でカラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く