これぞプロのデザインテクニック！UIデザインの印象がよくなるデザインの知識とテクニックのまとめ
Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1
UXという考え方を知る上で重要な3つの要素とは？ / Maka-Veli .com
本当は書くの嫌なんですが、あえて突っ込んでみました。 こういうのは個人的考えを出し合って理解を深め合った方がより良いと思ったためです。 前回は、UXデザインという切り口で書きましたが、ふわっとした印象のUXについて、個人的に重要としている点を挙げていきます。UXの根本的なところは色んな所で書かれてますので、UXとはなんぞや？というようなモノは省きます。 まず前提として、UXは「体験や感情」という人の本質部分の背景的な考察、 更に「不変的な事実」、そしてフロントの「UIへの適用」が重要ファクターだと考えています。 これらを掘り下げて説明する能力も無いわけですが、我々が慣れ親しんだ部分で言うと、 わかりやすいところ以下の3つがあるかと。 1. 今までの体験 「今までの体験」という点をデザインに取組む、これは「デザイン」の原点的なモノだと考えています。 以前にも書いたんですが、デ
Maka-Veli.com / Webデザインの原理原則はリアリティと、それに反した想像を超えるアイデアだと思う。
デザインは設計。装飾じゃない。設計。人が使いやすくなるための一つの機能。それを踏まえて装飾が加えられる。車でも時計でも、何でもそうだと思う。車で人が移動する。それを踏まえてコンパクトだったり高速機能だったり等の付加価値が加えられる。時計で時間を見る。それを踏まえてラグジュアリーだったり軽かったり等付加価値が加えられる。 Webは何をデザインする？ Webは情報を得るためにある。 情報を得やすくする事が、Webデザインの鉄則だと思う。 だからレイアウトや視認性、そして機能に拘る。 ここで注意したい点が、インパクト重視で情報が少ないサイトや、 奇をてらって1枚画像を全面に出してるサイト等。 これらも、ある情報を人に知ってもらう為に企画したサイト。 「こういうサイトがありますよ」という情報を扱う。 つまり情報をデザインする 情報をデザインするのは難しい。だって情報には形が無いか
中二病の発症年齢は14～18歳、さらに中二病の症例を6つに分類、そして中二ポーズを表現するための分析と理論、その実践について
バンダイナムコゲームスから発売された「ゴッドイーター」の制作に携わった河野紀子さんが、CEDEC2012にて、中二病のキャラクターに限らず、アニメーターがキャラクター付けを行う際に重要となるロジック、そしてキャラクターの内面（心理状態）を適確にポーズで表現する方法を学べる講演を「ユーザーに中二キャラクターとしての認知に成功したアニメーション・メソッド ～ゴッドイーターから贈るフィジカル中二論～」と題して行いました。 まず、ゴッドイーターのキャラクターをかっこいいポーズでキャラ表現をして欲しいとオーダーをもらいました。ここで課題です。1つ目はオーダーはもらったんですが、ゴッドイーターにとっての「かっこいい」とは何か。かっこいいには色んなかっこよさがあって、人の好みによってかっこよさも違います。そこで、ゴッドイーターにとってのかっこよさを探さなくてはいけません。2つ目です。「ポーズでキャラ表現
人はなぜ角丸に魅かれるのか、その理由と角丸の効果的な使い方
ウェブのインターフェイスだけでなく、現実の世界でもたくさんの角丸を目にします。角丸は一時のトレンドではなく、デザインのスタンダードと言ってもよいでしょう。 そんな角丸がなぜ好まれるのか、どう使えばよいのか、ウェブページにどのように実装するのかなどを紹介します。 Rounded Corners and Why They Are Here to Stay 下記は各ポイントを意訳したものです。 角丸は目に、そして脳に優しい< 角丸のイメージは安心 -Appleのこだわり 角丸はいつ使用するべきか 角丸の実装：CSS3< 角丸の実装：古い方法 終わりに 角丸は目に、そして脳に優しい ビジュアル認知の権威：Jürg Nänni教授によると、『鋭角の長方形は同じ大きさの楕円より認知するのに努力を必要とする。人間の目は円形のものをより速く捉えることができる。」と述べています。 鋭角と角丸の視線の流れ 鋭
michaelhenriksen.dk is hosted by UnoEuro Webhosting
michaelhenriksen.dk is hosted by UnoEuro Webhosting. Check out www.unoeuro.com.
CSS3 buttons by Chad Mazzola
This is a collection of CSS3 buttons that use the simplest possible markup. They look best in WebKit-based browsers, almost as good in Firefox, with all other browsers falling back to a less-styled button. These buttons are now implemented using Sass, with help from Bourbon. The generated CSS for all the buttons is also available. Classic buttons This is the original set of buttons, showing a vari
ディテールの作りこみも丁寧に解説された、ウェブデザインを作成するPhotoshopのチュートリアル集
最近のトレンドを踏襲した、ディテールの作りこみも丁寧に解説されたウェブデザインを作成するPhotoshopのチュートリアルを紹介します。 ここ半年くらいに公開されたものから厳選しました。
手元の画像からシームレスなパターン画像を作成するオンラインサービス -Repper
画像ファイルやライブカメラ画像の一部を抽出して、背景や壁紙などに最適な継ぎ目のないシームレスなパターン画像を生成するオンラインサービスを紹介します。 スケールの移動に伴い、パターンも変化 利用方法は登録を必要とせず、簡単です。 サイトにアクセスします。 Repper Lite 画像ファイルをアップロードします。 「1. pickup image」の「upload」をクリックし、画像を指定しアップロードします。画像のフォーマットはJPEG, GIFで、サイズは600px以下のようです。 ライブカメラを使用する場合は「video」をクリックします。 アップロードした画像は「2. create your pattern」に表示されるので、スケールを移動して好みのパターンを生成します。 パターンが決まったら、保存します。 「download pattern」をクリックすると、パターン画像がダウンロ
ColorBlender.com |色の相性
To get started, choose a preferred color using the color picker below, and a 6-color matching palette (a "blend") will be automatically calculated. You may swicth to Direct Edit mode to tweak or edit individual colors of your blend. Saved blends will be associated with your account if you signed in or stored in your browser cookies if you are not a member yet.
Mobile App Gallery｜tappgala.com
Mobile App Galleryは各種アプリのデザインギャラリーサイトです。カテゴリごと、色ごとに分けて分かりやすく表示しています。
ページレイアウトに使えるCSSプロパティ
はじめに 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。 今回は、ページレイアウトする際に、最低限おさえておきたい代表的なCSSプロパティとして、floatプロパティ、および、positionプロパティを中心に解説します。これらプロパティの使い方をマスターすれば、レイアウトの幅が広がるはずです。 対象読者 XHTMLとCSSの基本を理解している方。 Web標準に準拠したクロスブラウザなレイアウトデザインに興味のある方。 必要な環境 クロスブラウザなデザインを目指すうえでターゲットとする視覚系ブラウザを一通りご用意ください。本稿では、Web標準を比較的よくサポートしているFirefox、およびユーザー数が多く表示上の問題の多いWindows Internet Explorer 6を中心に解説しています
cssのテクニックなどを学びたい時に見ておきたい12サイト
cssが苦手で嫌いなので 好きになろうと思い、勉強に なりそうなサイトを国内外で 選んで絞ってみました。 同じ思いをしている方とシェア したいと思ったので記事にします。 リファレンスサイトは今回は割愛しました。勉強するなら抑えて当たり前ですしね。国内外合わせて11サイトとおまけが1サイトあります。まずは国内サイトから。 CSS HappyLife 個人的に国内でcssといえばCSS HappyLifeさん思い出します。基本から応用まで幅広く情報を配信。 CSS HappyLife CSS-EBLOG ほぼcss中心に情報を配信してくれています。こちらもかなり勉強になるサイト。サイト自体も見やすいですし、cssで困った時には必ず訪れたいサイトです。 CSS-EBLOG CSS Lecture cssで出来るテクニックを公開してくれています。デモページを用意してくれるのが凄く嬉しい。親切で分か
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Components · Twitter Bootstrap
新着記事
borderプロパティを使用した華麗なる四つのエフェクト | コリス
新着記事