時間軸でのユーザーエクスペリエンス 〜予期的UX編〜 | UXデザイン会社Standardのブログ
UX Tokyo Advent Calenderへの参加のお誘いを頂いたので、僭越ながら記事を公開します。 内容としては時間軸によるUXの定義の中の、予期的UXについての部分になります。全体としては多くの記事などに書かれていますが、個々の段階についてはフォーカスしたものがないため、改めて考え直しまとめたものになります。また、その他の時間軸の部分についても今後書いていく予定です。 もし情報の漏れや解釈の誤りがあれば、UX Tokyoのグループや直接お会いした際にご指摘頂ければ幸いです。 時間軸としてのUX 2010年のドイツでのセミナーを翻訳されたUX白書というものがあります。 UX白書では異なる期間で生じる体験のプロセスを、図のように4つの段階に分類して説明しています。それぞれ「予期的UX」「一時的UX」「エピソード的UX」「累積的UX」の4つの段階に分類されており、全体をデザインしていく
ウェブデザインにおける透過の効果的な使い方と注意点
半透明のパネルにテキストを配置したり、ナビゲーションを半透明にしたりなど、ウェブデザインでよく利用される透過のエフェクトの効果的な使い方と注意点を紹介します。 Using Transparency in Web Design- Dos and Don'ts 下記は各ポイントを意訳したものです。 はじめに コントラストを作るために透過を使う イメージの重要な部分は隠さない さまざまなレベルの透明度を使う 透過するとテキストが読みやすくなるとは限らない 透過を使うのは少しのスペースに 激しいコントラストの画像には透過は置かない 透過をアートとして使う 透過を飾りとして使用しない 背景に透過を使う 同時に多くの透過のエフェクトは使わない 循環するイメージに透過を使用する おわりに はじめに 透過を使ったウェブデザインは非常に美しいですが、慎重にデザインする必要があります。透過はカラーのブロック・
タイポグラフィを基本から学べるオススメの本
ウェブデザインでも非常に重要なタイポグラフィを基本から学べるオススメの本を紹介します。 きれいな欧文書体とデザイン 文字の組み方 欧文組版 デザインの教室 市川崑のタイポグラフィ 欧文書体百花事典 きれいな欧文書体とデザイン -名作書体の特色とロゴづくり ポピュラーな書体の基本情報から、それぞれの特徴をふまえた文字組・ロゴ作成を分かりやすく解説しています。装丁がとても美しい本なので、ぜひ手にとって見てください。 『メイキング「きれいな欧文書体とデザイン」』では、そのコンセプトを垣間見ることができます。 目次 欧文書体の基礎 欧文書体を使ったロゴづくり 欧文書体の特色とアレンジ 響き合う書体たち [ad#ad-2] 文字の組み方 -組版/見てわかる新常識
カラーだけではない、ウェブデザインにおける4つのコントラストの使い方
コントラストはカラーだけではありません。 ユーザーに伝えたい重要なエレメントを適切に目立たせる4つのコントラストを紹介します。 Fully Understanding Contrast in Design [ad#ad-2] 下記は各ポイントを意訳したものです。 コントラストとは 1. カラーのコントラスト 2. サイズのコントラスト 3. シェイプのコントラスト 4. ポジションのコントラスト おわりに 通常、コントラストがテーマに扱われる時は初心者向けのものが多いでしょう。例えば書籍では、『ブラックとホワイトがコントラストをもっており、レッドとオレンジはそうではありません』と書いてあります。初心者向けの本では、コントラストはカラーのことだけが触れられており、サイズやシェイプについては触れられていないでしょう。 アマチュアのデザイナーとプロのデザイナーを区別する最も容易な方法は、コントラ
写真を使用してデザインをするためのベストプラクティス
写真はウェブに限らず、デザインをする上で非常に重要な要素です。 ここではウェブデザインで使用する際の写真の入手から、カラースキーム、タイポグラフィとの組み合わせ方などシンプルで効果的な方法を紹介します。 Designing From a Photo: Quick Tips and Best Practices [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 写真の入手 Color Schemes Typography Bleed まとめ はじめに フォトグラフィはタイポグラフィ以来、デザインを成功させる最も素晴らしい手段です。クオリティが高い写真は程度の低いデザイナーでも素晴らしいデザイナーのように見せるでしょう。 素晴らしいフォトグラフィのデザインをするためにいくつかのテクニックとアイデアを紹介します。 写真の入手 まず第一に、デザイナーとしてあなたができる最も良い方
パンくずのデザイン集と概要やデザインのポイント
ウェブデザインで使用しているパンくずのデザイン集とパンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイントを紹介します。
ウェブデザインに黄金比やフィボナッチ数列など数学的な要素を取り入れる方法
黄金比、フィボナッチ数列、ファイブエレメンツ、サインウェーブなど数学的な要素を巧みにウェブデザインに取り入れる方法をSmashing Magazineから紹介します。 Applying Mathematics To Web Design 下記は各ポイントを意訳したものです。 また、当サイトでも黄金比をウェブデザインに取り入れる簡単な方法を紹介していますので、あわせてどうぞ。 黄金比をサイトのデザインに取り入れる簡単な３つの方法 はじめに 1. 黄金比（黄金四角形） 2. フィボナッチ数列 3. ファイブエレメンツ 4. サインウェーブ [ad#ad-2] はじめに 「数学は美です。」 数字嫌いの人には、ばかばかしく聞こえるかもしれません。けれども、自然や宇宙にある美しいもの、最も小さい貝殻から最も大きい銀河まで、数学的な要素を持っています。 数学ははるか昔から今日まで芸術や建築のデザインに
ウェブサイトのレイアウトを一から作成するPhotoshopのチュートリアル集
繊細なテクスチャ、透明感のあるパネル、充実したフッタ、光源を模したグラデーション、1ピクラインにこだわったディテールなど最近のウェブデザインのトレンドを取り入れた、ウェブサイトのレイアウトを作成するPhotoshopのチュートリアルを紹介します。
写真の「ボケ」をウェブデザインにとりいれるためのスタディ
写真の主題を引き立たせるために使用される「ボケ」をウェブデザインにとりいれるためのスタディをPSDFanから紹介します。 Inspirational Examples of the Bokeh Effect 以下、各ポイントを意訳したものです。 ボケとは ボケの実例 デジタルアートでのボケ ウェブデザインでのボケ ボケのチュートリアル ボケとは ボケとは、写真撮影の際にレンズを利用して光の焦点をぼかしたものです。このボケは、レンズによってもさまざまなものを楽しむことができます。 通常、ボケは主題を引き立たせるために使用されるもので、主題以外のものをぼんやりとさせます。 ボケの実例 写真撮影でのボケを実際に見てみます。
ウェブデザインにアクセントを加える画像加工のテクニック7選
レイアウトもばっちり、配色構成もＯＫ、いざガシガシとデザインを組んで行ってはみたものの、何か物足りない。。。 そんなまとまりすぎたデザインに、ピリッと印象的なアクセントを加える7つのテクニックをお届けしちゃいます！ どれもカンタン、ひと手間ちょいと加えるだけでデザインが引き締まるコト間違いなし!? そんなこんなで今回のエントリーは、いまいちインパクトの足りないウェブデザインにアクセントを与えるテクニックをご紹介してまうでー。 ウェブデザインにアクセントを加える画像加工のテクニック 1.1pxのドロップシャドウ これは文字と背景色の兼ね合いが少し悪い（視認性があまり良くない）場合に文字を少し目立たせたり、単純に文字にパキッとした印象を付加したりしたい場合に使えるテクニックです。 ポイントは「はっきりとした色差で、くっきりと1px」って感じで、Photoshopならドロップシャドウで「距離1、
サイトのレイアウトやパーツのPhotoshopのチュートリアル集
ウェブサイトのレイアウトやパーツを作成するPhotoshopのチュートリアル集をBest Photoshop Tutorialsから紹介します。 70+ Photoshop Tutorials to improve your Skills as Web Designer 中には、PSDファイルがダウンロードできるものもあります。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webページでよく使うさまざまなコンポーネントが簡単に利用できるCSSベースのフレームワーク -Materialize
Photoshop Vip » 保存版！背景デザインに使える継ぎ目のないPhotoshop無料パターン素材まとめ
BLOG × WORLD ENDING