DISられないUIを作るために最低限守るべき5つの鉄則 - たごもりすメモ
ぼくらが迂闊にUIを作ると、そこにはユーザの正直な目線があり、非常に様々な、そして真っ当な反応がある。 曰く「わからん」「まさかそこをクリックするとは」「不思議な動作」「独自宇宙」「モリスUI」。 反応がもらえるのは非常に良いことだが、何度も何度も繰り返しているとつらくなってくるので、できれば避けたい。分かっている(いた)ことは最初から対応しておきたいものだ。*1 ということで、ここではブラウザで操作する管理画面等のWebUIを作るとき、真っ先に心得ておくべき5つの鉄則を紹介したい。これを守っていてもDISられなくなるというわけではないが、これを守らないと間違いなくDISられるので注意しよう。 なおこの記事ではオリジナリティというものについては考慮しない。オリジナリティとか犬に食わせろ。 クリックできる場所はcursor:pointerを指定しろ これを忘れるとこの世のものとは思えないくら
感覚派デザイナーも知っておいて損はない「デザインの要素と原則」 | WebNAUT
「あなたは感覚派デザイナー？それとも理論派デザイナー？」 このような質問をされると、理論派デザイナーだと答えたくなる理系出身デザイナーのタカハマです、こんにちは。 今回は、そんな理屈っぽい私の大好物である「デザインの要素と原則」をご紹介したいと思います。理論派デザイナーの方はもちろん、感覚派デザイナーの方も知っておいて損はないですよ！ 「デザインの要素と原則」はビジュアルデザイン全般に活用できる Webデザインに限らず、ビジュアルデザインの基礎を学ぶ上で、大変参考になる「デザインの原則」というものがあります。いわゆる「Design elements and principles（デザインの要素と原則）」や「Gestalt principles（ゲシュタルト原則）と言われる原則で、デザインの構成要素や要素同士の関係性が全体に与える影響をまとめたものになります。 調べてみると識者によって分類や
UIデザインのアニメーションまで共有できるモック作成ツールまとめ | Goodpatch Blog
先日、Goodpatch代表の土屋がWebSig会議というイベントで講演をしました。講演は「ハートに響くUIを生み出すためのデザインプロセス」というタイトルで行われ、起業までのストーリー、GoodpatchのUI設計プロセスなどについて話しました。講演内容は↓のslideshareを参照してください。 その講演の中でGoodpatchはデザインする際にプロトタイプを作成していると話しました。以前にMEMOPATCHでもインタラクションや導線の動きを伝える上でプロトタイプ作成が重要という趣旨の記事をアップしています。 （参考: これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編）, （後編）） プロトタイプ作成というとHTML, CSS, JavaScriptで実装する方法がメジャーかと思いますが、これだとリソースをかなり割くことになってしまいます。そこで今回は
フラットデザインとは？UIの特長と注意点 デザイン会社 ビートラックス: ブログ
最近「フラットデザイン」という言葉をよく耳にする 。 このデザインスタイルは、グラデーションやシャドウなどの立体的要素を極力避けコントラストの強いカラーパネルと文字要素を活用して構成される。このスタイリッシュなフラットデザインの出現により、今までのエフェクトゴテゴテのUIがいきなり古くさく感じる事態が発生している。 ここ最近ではGoogleが提供する種々のアプリやFacebookのUI、Windows 8、そして多くのスタートアップ企業が提供するスマホアプリで、このフラットデザインをUIのテーマとして採用するケースが増えている。 例えその呼び名を知らなくても、サイトやアプリを通して、多くのユーザーがそのデザインスタイルを目にしていると思う。代表的な例としてはClear、Moni、Clear Weatherなどが挙げられる。 フラットデザインの主な特徴特にはっきりとした決まりがある訳ではない
ノンデザイナーこそ押さえておきたい! UI/UXが学べる神スライド7選 | Find Job ! Startup
競合に負けないWebサービスをつくるため、UI（User Interface）、UX（UserExperience、ユーザー体験）にこだわるのは、もはや常識。良いUI/UXはチーム全員で考えることが、良いサービスをつくる秘訣です。 エンジニアやWebディレクターも学んで損はしません。もちろん、本職デザイナーの方々にも役立つ7つのスライド厳選まとめです！ 目次 基礎知識 １．UXのためのUIデザイン ２．UX is not UI ３．ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：前編 応用編（Webサイト） ４．ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：後編 ５．コンテンツで改善する UI デザインの極意 応用編（スマホアプリ） ６．UI＆UX / 重要なのは、毎日さわって嬉しいUI UX! 応用編（タブレットアプリ） ７．ニコニコ超デザイン-
データバインディングによるインタラクティブなUIの効率的な表現
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
デザイン作業のスピードアップ
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、ゴラクログのデザインを担当をしている鬼石広海と申します。 弊サービスは現在大幅リニューアル中ですので、UI周りはリニューアル後、又機会があればご紹介させて下さい。 今回は、駆け出しのデザイナーさん達の多くが課題にあげる、デザイン作業のスピードアップについてお話します。結論から言いますと、細部から作らずに土台作りを頑張ることが、結果的にスピードにつながるというお話です。 では実際にバナーデザインを例に紹介します。 1.構成要素を全部置く まずはプランナーやプロデューサーと話し合って決めた構成要素を、とりあえず全部キャンバスに置いてみます。
フラットなデザインを理解する上で知っておきたい5つのポイント -Principles of Flat Design
フラットなデザインは、決して単純なデザインと同じ意味ではありません。もちろんシンプルにデザインして答えがでるのであれば、それにこしたことはありません。 フラットなデザインのUI素材を数多くリリースしているdesignmodoから、フラットなデザインとは何かを理解する上で重要となる5つの特徴を紹介します。 フラットにあまり心を動かされなかったのですが、ぐらっときました。 Into the Arctic フラットなデザインはその名の通り、二次元のフラットなスタイルを使用します。このコンセプトは既存のエフェクトなしで機能します。ドロップシャドウ、ベベル、エンボス、グラデーションなど奥行きを与えるエフェクトは使わないようにします。 ページ内のテキスト、ボックス、画像、フォーム、ナビゲーションなどの全ての要素はエッジのきいたスタイルで、シャドウはありません。Appleによく見るSkeuomorphi
第1回 UXデザインが企業にもたらす利益
コンシューマ市場においては、Appleに象徴されるように、ユーザーの体験（UX:User eXperience）を前提に、複雑な機能をシンプルな画面（UI:User Interface）で実装することは、売上に大きく貢献することが実証されています。この現象をコンシューマ市場だけの話と終わらせてしまうことはできません。状況は異なり、程度の差はあれど、利用するのは人であり、コンシューマ市場であれ、エンタープライズであれ、利用しやすい製品が売上に大きく貢献する可能性は高いと思われます。コンシューマ市場で使いやすいUIに慣れた人の感覚は、エンタープライズアプリケーションでも使いやすいUIを求め始めています。そのため、エンタープライズでも、自社のターゲットに合わせたUX/UIデザインを行うことが、今後、必須となってくるでしょう。単なる他社の真似ではない、自社の顧客にあったUX/UIデザインが、エンタ
ガイドラインからみたアプリUI〜iPhone用とAndroid用〜
京都まゆまろ杯 第1回スマホアプリコンテスト連動イベントでの発表資料 アプリのガイドラインを抜粋し、それぞれのアプリでどう展開するかのベーシックな知識を説明Read less
UI/UXの第一人者が集まり、語り尽くす- 第六回スマホデザイン会議 ～UI/UX 最前線まとめ〜｜U-NOTE【ユーノート】-イベントまとめプラットフォーム
■「アートの世界観をデジタルで実現する手法〜蜷川実花監修カメラアプリ cameran」 株式会社リクルートホールディングス Media Technology Labs（MTL） 大城 哲也氏 迅速にグローバルで沢山のユーザーに使われるアプリを広告費ゼロで作りたかった。 【カメラアプリを選んだ理由】 「情報が多すぎて処理しきれない！」 という 世の中の不を感じ 「ビジュアル化で、処理しやすくしたい」と考えた。 「カメラアプリの不 」 かっこいいけど似たフィルター多い？ 「 開発者の不」 万が一ヒットしてもすぐにコモディティ化する これは チャンスだと思った！ 本当は東京のクリエイティブは世界一ヤバイ！ （データあり） 「コード×東京のセンス」で 唯一無二のカメラアプリを作れないか？ そして思いついたのが、 蜷川実花さんの世界観を実現するカメラアプリ 。 【全体設計の進め方（コンセプト
『UI設計〜ディレクションの質を高める7つのポイント』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 初めまして。社長室でUI/UXディレクターをしている渡辺（@mw19830720）と申します。現在は主にUI/UX視点でのAmebaスマホののクオリティ管理を担当しています。 普段ディレクターが本ブログで執筆することはあまりないと思いますので、今回はいつもと少し雰囲気を変えて、「サービス立ち上げ時におけるUI設計やディレクションの質を高めるポイント」というテーマで、あえて盲点になっているかもしれないと感じている点をまとめてみました。 まずは画面設計のフェーズにおいて2点ほど。 仕様書全体を都度見返す 画面仕様書の作成には数日～長くて数週間程度かかると
ノンデザイナーズデザインブックを読み解く // Speaker Deck
MIND HACKSとインタフェースデザインの心理学を引用しながら、デザインの基本4原則を解説していきます。 ==================== あわせて読みたい ==================== 少ない手間と知識で”それなり”に見せる、ズルいデザインテクニック http…
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIデザインについて改めてしっかりと学ぶために参考になるスライドまとめ
HTML/JS/CSSでAndroidアプリ風UIを作るフレームワーク「Fries」:phpspot開発日誌
マルチスクリーン対応と最近のアプリの傾向