タグ

DESIGNとUIに関するsometkのブックマーク (38)

  • 常識の枠にとらわれない独創的なUIのWebデザイン

    Niketo:Portfolio / Copenhagen Art Festival / Air Jordan 2012 - AJ2012他...全15件

    常識の枠にとらわれない独創的なUIのWebデザイン
  • UIが美しすぎる15の次世代モバイルアプリデザイン - SEO Japan|アイオイクスのSEO・CV改善・Webサイト集客情報ブログ

    無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする >> 世界的なスマホの急速な普及とそれに伴う様々なアプリの登場と共に、モバイルデバイス向けのUIデザインも様々な試行錯誤と進化を続けているようです。今回は、デザインにはこだわりのある人気ITメディアThe Next Webのスタッフが選んだ次世代のモバイルアプリを担う15のUIデザインを紹介します。 — SEO Japan コードを学ぶのと同じように、デザイナーとして上達する一番の方法は、習うより慣れることだ。それでもやはり、優れた作品を称賛して模倣すること(という名の練習)が驚くべき効果を発揮しないというわけではない。何よりも、他のデザイナーが過去にしたことを見ることは、相当な時間の節約になる。なぜ

    UIが美しすぎる15の次世代モバイルアプリデザイン - SEO Japan|アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
  • 何故、エンジニアはUIのセンスがないか。

    何故、エンジニアUIのセンスがないのか、という自分にも当てはまるようなことについて書いてみる。 まずエンジニアがダメなUIを作ってしまう理由について、いくつかの仮説を立ててみる。 1.その画面を作るエンジニアは全てを知りすぎていて、もはやわからない人の気持ちがわからない説 2.エンジニアITリテラシーは高いけど、自分ができることを人に理解できるように説明するのは下手説 3.技術的に実現する方に興味が偏って、ハナからUIの使い勝手に興味が無い説 4.国語力がない、自分が実現する文脈を表現するのはできるが、ユーザーの文脈に配慮した言葉を想像する力が無い説 5.仕様書を読まない、人の言う事を聞かない説。例えばOSが定めているユーザーインターフェースガイドラインに従わないので、UIパーツが意図した使い方をしておらず統一性に欠ける。 6.わかりやすい色や文字、レイアウトに関する知識が無い。センス

  • 写真が語るUXとUIの違い - Nothing ventured, nothing gained.

    Windows XPのXPがeXPerienceだったことを覚えている人がどのくらいいるかわからないが、正直、最初にユーザーエクスペリエンスと聞いたときに、どのように日に定着させようかと悩んだ。略語を開くことなどあまり無いので、製品名などは大して心配はしなかったのだが、確か何かの設定画面かにも、Experienceというタブ名か何かがあり、どのように訳すか頭を痛めたように記憶する。 それから数年、すっかりUX、すなわちユーザーエクスペリエンスという言葉が定着したように思う。それでも、今でもUXUIを混同する場面に出くわすことがある。 すでに様々なところで説明はされているが、敢えて、ここでもUXUIの違いを説明しよう。 UX(ユーザーエクスペリエンス)は、製品やサービスに対して、ユーザーがどのように感じ、そして反応するかのことである。実は、UXは2010年にISO 9241-210とい

    sometk
    sometk 2012/05/03
    引用している写真が面白いですね。でも、知ってる(であろう)人がみないとわからないですよ、コレ(かなりわかりやすいとは思いますが)。
  • 一夜にして世界中を席巻したiPhoneアプリ「Clear」の裏側

    sometk
    sometk 2012/02/18
    うーむ、悪くないと思うけど、知らないと使えなくないですか?
  • リッチに見せるデザインテクニック。美しいぼかしで魅せる 『MAX 塗り』のすすめ。

    こんにちは、イメージ担当の長谷川です。 今回は 1px にこだわったリッチな Web や UI デザインを更に立体的で奥行きのある雰囲気にする『MAX 塗り』を取り入れたグラフィック作成手法をご紹介します。 ところで『MAX 塗り』ってご存知ですか?ガンプラなどが好きな方はピンと来たと思いますが、プラモデルなどに興味がない人は全く分かりませんね。 『MAX 塗り』とはプラモデルに立体感を出すためにエッジから中央に向かってぼかしていく、昔からある「ぼかし塗り」や「グラデーション塗り」の技法です。 この技法で塗装されたプラモデルは単純に塗装したものより格段に迫力や存在感が上がります。プロモデラーの MAX 渡辺さんが良く使うプラモデルの塗装技術として通称『MAX 塗り』と呼ばれています。 Web や UI にこの『MAX 塗り』を取り入れる方法は簡単です。 作ったボタンや背景などのグラフィック

    リッチに見せるデザインテクニック。美しいぼかしで魅せる 『MAX 塗り』のすすめ。
  • 勝手にリデザイン:新宿高層ビルの館内施設案内板

    勝手にリデザイン:新宿高層ビルの館内施設案内板 新宿のとある高層ビルの館内案内標識が話題に。後学のために、仕様・問題点を整理、改善案の作成を行ってみました time2011/09/08 hatenabookmark- Twitterで、あるサイン(案内板)のことが話題になっていました。新宿のあるビルの案内図のようですが、わかりづらいことが問題になっているようです。 …確かにこれはわかりません。トイレを探している時に遭遇したら結構辛いと思いますね。でも、なぜわかりにくいのか、どういう改善案が考えられるのか、もう少し考えてみることにしました。 仕様 まず、この図から読み取れる情報だけでは何が「正解」かわからないので、実際の現場に足を運んでみました。 そして、館内をぐるっと見学してみて、大体の施設の配置を把握してきました。(ちなみに、ビルの中をウロウロしてると普通に不審者だと思うので、警備員の方

    sometk
    sometk 2011/09/09
    うんうん、これは素晴らしい。
  • 新宿到着。トイレどこか分からんわ! これ作ったやつマジくたばれ。... on Twitpic

    新宿到着。トイレどこか分からんわ! これ作ったやつマジくたばれ。

    sometk
    sometk 2011/09/07
    たぶん左側だよね、トイレ。「化粧室」を探すのに数秒かかった。
  • ずっと使えるデザインテクニック。すっきり美しく見せる『余白』と『文字』の使い方。

    こんにちは、デザイナーの長谷川です。 今回は僕が普段気をつけている、ちょっと意識するだけでスッキリしたデザインになるレイアウトのコツをご紹介します。 デザイナーじゃない方も、企画書や簡単な UI のモックアップ、Web や雑誌のレイアウトなどに応用できると思いますので、ぜひ参考にしていただければと思います。 1. 上下左右のマージンを均一に Web デザインや UI デザインの要素全てに対して隣り合う要素との間隔やバナー、ボタンなどの外側と内側の要素の上下左右マージンをできるだけ均一にすることで、デザインがスッキリ見えます。 2. 内側のマージンは外側のマージンより狭く レイアウトなど一番外側とコンテンツの間隔より文章のかたまりや画像同士の間隔を小さくします。基的にコンテンツのまとまりを作るためですので、デザインによっては広く取って区分ける場合もあります。 3. 段落の下は間隔を広く開け

    ずっと使えるデザインテクニック。すっきり美しく見せる『余白』と『文字』の使い方。
  • TechCrunch | Startup and Technology News

    Avendus, the top investment bank for venture deals in India, confirmed on Wednesday it is looking to raise up to $350 million for its new private equity fund.  The new…

    TechCrunch | Startup and Technology News
  • Av-jyo.com

    The domain av-jyo.com maybe for sale. Click here for more information. Av-jyo.com Related Searches: Cloud Service Providers Secure Internet Browser Computer Internet Security Web Designing Courses AVI DVD Player Online Data Protection MatchMaking Services Related Searches: Cloud Service Providers Secure Internet Browser Computer Internet Security Privacy Policy

  • Nike Sustainability. Move to Zero

    MOVE TO ZERO IS NIKE’S JOURNEY TOWARD ZERO CARBON AND ZERO WASTE, HELPING TO PROTECT THE FUTURE OF SPORT. We all share the responsibility for our playground—Planet Earth. That’s why we’re reimagining things top to bottom through sustainability and circularity. We’re focusing on carbon, waste, water, and chemistry, aiming to hit targets by 2025. Check out our Impact Report to see our progress.

    Nike Sustainability. Move to Zero
    sometk
    sometk 2011/07/06
    なんかスゴいけど、どこ見ていいのだかわからない‥
  • 細部にこだわったUIエレメントをPhotoshopで作成するポイント

    ウェブデザインをワンランクアップさせる、リアリスティックなユーザインターフェイスエレメントをPhotoshopで作成するポイントを紹介します。 Crafting Subtle & Realistic User Interfaces [ad#ad-2] 少し古い記事ですが、現在でも役立つ情報なのでご紹介。 下記は各ポイントを意訳したものです。 オブジェクトを想像する 光沢 vs つや消し 制作に役立つTips リアリティは繊細に オブジェクトを想像する リアリスティックなUIエレメントを設計する時には、そのオブジェクトが実世界でどのように見えるか想像する必要があります。それを実現する一番簡単な方法は、そのオブジェクトをモニターの横からどのように見えるか想像することです。 これは最近のウェブデザインでもよく見かける微妙な凸型のパネルで、その外周には小さいエッジを持っています。光源は上部にあり、

  • 最近のインターフェイスデザインから学ぶ、7種類のボタンデザイン

    ユーザーのアクションを誘う購入や送信や検索ボタンなど、最近のインターフェイスデザインでよく見かける7種類のボタンデザインを紹介します。 Common elements used in interface button design [ad#ad-2] 下記は各ポイントを意訳したものです。 また、元記事ではそれぞれのボタンを作成するPhotoshopのチュートリアルも掲載されています。 1. テクスチャを使ったボタン 2. パターンを使ったボタン 3. 3Dを使ったボタン 4. 1ピクを使ったボタン 5. 背景をインデントしたボタン 6. グロウを使ったボタン 7. ハイライトを使ったボタン 1. テクスチャを使ったボタン テクスチャはボタンにわずかな奥行きを与え、クリックが可能であることが分かるようにする素晴らしいテクニックです。

  • webデザインにおける視線誘導のおはなし | 07design.blog

    こんにちは。今回はレイアウトの記事を書きます。「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、・・・こんにちは。今回はレイアウトの記事を書きます。 「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。 「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、一般的な視線の流れのパターンを表した図式のことです。 簡単に言うと「人間の目は左上から右下方向へ、チラチラしながら遷移する」というものです。 こういった視線の流れのパターンは、エディトリアルデザインなどでは当たり前に使われている技法・考え方らしいです。 テキストをレイアウトする場合には、左上・右下に重要なコンテンツを配置す

  • 「デザインした担当者出て来い!」と話題になっていたノートPCの写真 : らばQ

    「デザインした担当者出て来い!」と話題になっていたノートPCの写真 電子機器の性能や値段が重要視された時代から、デザインやインターフェースが重視される時代になってきました。 使い勝手がちょっと悪いだけでも作業効率は低下し、ストレスが溜まるものですよね。 海外サイトで「このデザインはないだろう」と槍玉に挙げられていたノートPCの写真がありましたので、ご紹介します。 こちらが「ひどすぎるデザイン」と挙げられていたノートPCの写真。 どこがひどいかわかるでしょうか? そうです、ESCキーを押そうとすると、うっかり電源ボタンに触れてしまいそうなレイアウトになっているのです。 ESCキーは遠いので、勢いあまって一緒に押してしまいそうですよね。仕事の資料などを作成した日には、いちいち小さなスリルを味わうことになりそうです。 海外掲示板の反応を抜粋してご紹介します。 ・そして鳴り響く終了の音。 ・学期末

    「デザインした担当者出て来い!」と話題になっていたノートPCの写真 : らばQ
  • IBMがWebアプリケーションのUIガイドラインとHTML/CSSのソースコードを公開

    業務アプリケーションがWebアプリケーションとして開発されるのは現在の大きなトレンドです。それに伴ってHTMLCSSによって業務アプリケーションの複雑なユーザーインターフェイスを構築する必要性が生じます。 しかし機能が豊富な業務アプリケーションのユーザーインターフェイスをHTMLCSSで構築するのはそれほど簡単ではなく、しかもそれをアプリケーション全体で統一し、優れたユーザビリティを実現するのはさらに手間のかかる作業です。 そうした業務用のWebアプリケーションのユーザーインターフェイスを構築するためのサンプルが豊富に含まれたガイドライン「IBM Lotus User Interface Developer Documentation」が、IBMから公開されました。 今回公開されたIBMのガイドラインは、同社のLotus製品群のユーザビリティを統一するための社内プロジェクト「One U

    IBMがWebアプリケーションのUIガイドラインとHTML/CSSのソースコードを公開
  • 1分間で学ぶ、ウェブサイトのユーザビリティ | コリス

    Interactive Marketing Blogから、1分間で学ぶウェブサイトのユーザビリティを紹介します。 One Minute Guide to Usability 下記は、1分間で学ぶウェブサイトのユーザビリティの意訳です。 Who are you? 何者ですか? 例:ロゴ、ブランディング Are you trustworthy? 信頼できますか? 例:ベリサイン・Trust-e、信頼できるデザイン、サポート What do you do? 何をしているのですか? 例:取り扱っている商品・サービス、会社紹介 Where to next? 次に、何をするべきですか? 例:見積請求、営業担当へ電話 Exit Panic: Where do I go now? パニック:私はどのページをみればいいですか? 例:ヘルプ、ログイン、コンタクト・インフォーメーション