タグ

UIに関するtatsu_toraのブックマーク (12)

  • 2021年、最も注目されたUIデザインのテクニックのまとめ

    デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIUXを改善するデザインの知識とテクニックを紹介します。 今年公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2021 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ユーザーの混乱を避けるために、UIで確立されたアイコンを使用する 2. 4ptベースライン+8ptグリッド=調和のとれた縦のリズム 3. フォントで階層を示すにはウェイト、サイズ、カラーを使用する 4. ホワイトスペースはたっぷり使用してください 5. アイコンをグリッドシステムで使用する際の注意点 6. アクションを実行

    2021年、最も注目されたUIデザインのテクニックのまとめ
  • 次世代デザインツールはどこへ向かうのか 中編

    実装を考えながら作れなかった従来のツール 6年前になりますが、 web のデザインは枠のない世界であると説明したことがあります。様々なスクリーンサイズのことを考慮して作らなければならないと頭で分かっていても、デザインツールでそれを実現するのが困難でした。10年以上大きな変化がなかったデザインツールに対して、実装側はどんどん進化し続けていました。Web だとフロントエンド技術とワークフローに大きな進展がありましたし、ネイティブアプリも 1 年おきに OS と周りの開発環境がアップグレードしています。 開発は目まぐるしいスピードで変化しているのに対して、デザイン環境は大きく変わっていなかったことが、今私たちが抱えているデザインと開発の溝の根源ではないかと考えています。2010年代はデザインツールの革命期と呼んでも良いくらい様々なデザインツールが出てきていますが、今まで遅れていた分を取り戻そうと

    次世代デザインツールはどこへ向かうのか 中編
  • UIの使いづらさにイラッとする!これがフォームで使いにくい最悪なユーザインターフェイスだ -User Inyerface

    使いにくいUI、間違いやすいインタラクション、誤解されるデザインパターンを再現したUser Inyerfaceを紹介します。ベルギーの制作会社「Bagaar」による、使いにくい最悪なユーザインターフェイスを楽しむゲームです。 けっこうイラッとするので、心に余裕がある時にお楽しみください。

    UIの使いづらさにイラッとする!これがフォームで使いにくい最悪なユーザインターフェイスだ -User Inyerface
  • FigmaではじめるUI(Web)デザイン|Part1|Nao Komura|note

    Figma 3.0が発表されてから半年ほど経ち、実際にプロジェクトFigmaを使用した際の知見や、tips的なものまで日でも散見されるようになってきました。 そんな感じで良い具合に枯れ始めているデザインツールではあるのですが、まだまだ日での記事は、経験者向けに「Figmaに乗り換えるメリット」とか「他のUIデザインツールとの比較」のような内容の記事が多く(人のこと言えないですが......)、初心者にはUIデザインのツールとしてはまだまだ馴染みの薄いツールなのかなと思います。 というより、昨今はデザインツールが多すぎてシンドいことこの上ないですね。一度効率化の味を知ると更なる効率化を追い求めてしまいますし、そんな現状だと日頃から使用しているツールを変えるのも一苦労です。 ......さて、今回は初心者〜中級者くらいまでに向けてFigmaで作るUIデザイン入門的な記事を書いていこうと思

    FigmaではじめるUI(Web)デザイン|Part1|Nao Komura|note
  • これだけ守れば見やすくなるデザインの基礎

    2019/04/18に株式会社gumi様で行ったデザイン講義のスライドです。 デザインとは何か?デザイナーは何を考えてデザインを作っているのか? という話から、実際にデザインを評価・検討するための言葉を紹介しています。 この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。 第二回「UIデザインをはじめよう」はこちら https://speakerdeck.com/kinakobooster/uidezainwohazimeyou 第三回「今日からできるUXデザイン」はこちら https://speakerdeck.com/kinakobooster/jin-ri-karadekiruuxdezain ※訪問講座のご案内※ あなたの会社に話しに行きます。料金表はこちら https://xemono.life/#/workwith/co

    これだけ守れば見やすくなるデザインの基礎
  • Figmaの使い方、全力でまとめました。|hikaru-takase /Loglass

    最近、figmaを社内でも始めたのですがその魅力にドンドン引き込まれています。自身の学習も含め、これからfigmaを導入しようとする方の参考になればと思い使い方のまとめを作ってみました。 私はsketchをベースに開発することが多いのでsketch→figma視点で語ってる所が多いです。全力と言いつつ、まとめ切れていない所も多いので、不足しているところは随時更新していきます。 導入編アカウント登録 figmaの公式サイトに行きましょう!まずはアカウント登録。すべて英語ですが名前と職業を聞かれるぐらいで簡単に登録できます。またgoogleアカウントを持ってる人であれば、そちらからすぐにログインできるのでおすすめ。 ログイン後はfigmaのダッシュボードが表示されます。 webブラウザでほぼすべての機能が使えるのがfigmaの特長でもあります。 Desktop Appをインストールする やはり

    Figmaの使い方、全力でまとめました。|hikaru-takase /Loglass
  • 本当は教えたくないUIデザイン学習の参考にしているInstagram(インスタグラム)アカウント|浦川たろう|note

    良いUI/UXデザイナーになるには、他人が作ったデザインを見るのが大切だと、多くの国内外のデザイナーさんたちは言っています。 僕もそれに倣い、UI/UXデザインを学び始めて約2ヶ月ですけど、ほぼ毎日他人のUIデザインを見ています。 他人のデザインが見れるサイトで代表的なのは、以下の3点でしょうか。 ■ Dribbble ■ Behance ■ Awwwards これらのウェブサイトやアプリを見ていますけど、まだ生活に馴染まないというか「UIデザイン見るか〜!よいしょ。」ってなモチベーションでチェックしてしまいます。 「それでは、当に夢中になって見てはいないな」と感じたので考えました。 「それじゃあ、いつも見てしまうアプリを使えばいいのでは?」と思い、チェックし始めたのがInstagram(インスタグラム)です。 Instagramは、すでに写真専用アカウントとして使っていました。しかし。

    本当は教えたくないUIデザイン学習の参考にしているInstagram(インスタグラム)アカウント|浦川たろう|note
  • エンジニアでも一読の価値あり!UI / UXの入門スライド厳選10点まとめ

    Webサービス開発にしてもアプリ開発にしても、ユーザーに気持よく使ってもらうにはUI / UXを工夫する必要があります。 多くのユーザーに支持されている大規模WebサービスやアプリのUI / UXをよく見てみると、ユーザーにストレスがかからないよう細やかな工夫が施されていることがわかります。 エンジニアにとってもUI / UXに関心をもっておくことは重要です。 フロントエンドエンジニアはもちろん、バックエンドエンジニアもユーザーにより良い体験を届けるためにUI / UXを学ぶことをおすすめします。 今回は、エンジニアUI / UXを基礎から学ぶ際に参考になるスライドを厳選して10個まとめました。

    エンジニアでも一読の価値あり!UI / UXの入門スライド厳選10点まとめ
  • つい買ってしまう!? 素敵なUI・UXのECモバイルサイト6選|モバイルラボ

    こちらの記事で、40代女性がネットショップを一番利用しているという記事をご紹介しました。そこで、今回は40代女性の私が使いやすい、素敵だなと感じたUIUXのECサイトをご紹介します。 【関連ページ】レスポンシブデザインのスマホサイトを使いやすいUIUIUXの参考になるのはもちろん、商品を売るための戦略・アイデアも秀逸で、購入意欲をそそられるサイトばかりです。 UIUXの参考に! “ひと工夫”が逸材なスマホECサイト GILT 正規ブランド品が毎日安い会員制ファミリーセール・サイト。 リッチなデザインとビジュアライズされた写真が印象的です。ビジュアルによって商品に付加価値を与えたい、そんなとき、色使いやデザインの参考にしみてはいかがでしょうか。 ちなみにこのサイト、ショッピングカートへの取り置きは15分だけ。ショッピングカートに入れた途端カウントダウンがはじまり、その焦りから思わず

    つい買ってしまう!? 素敵なUI・UXのECモバイルサイト6選|モバイルラボ
  • WebデザイナーがフォローすべきTumblrアカウント10選 | UX MILK

    TumblrでWebデザイナーがフォローすべきアカウントを10個厳選してご紹介します。 Tumblrは画像や動画、文章など、様々なメディア形態で投稿できることから、グラフィックだけに留まらず様々な方法でデザインのインスピレーションを得ることができます。英語・日語アカウントを織り交ぜて取り上げていますので気になるアカウントはぜひフォローしてみてください。※括弧内にアカウント名を表示しています。 1. All The Style Guides(allthestyleguides) 様々なサイトのスタイルガイドとパターンライブラリを紹介している、非常に勉強になるアカウントです。どうしても自分が知っているスタイルガイドばかりを参考にしてしまいがちですが、こうやってまとめてあると新たなスタイルガイド、パターンライブラリに出会うことができてとてもありがたいですね。 2. House of Butto

    WebデザイナーがフォローすべきTumblrアカウント10選 | UX MILK
  • #cmdevio2016 (レポート: D-1) スマホアプリデザインの心得 | DevelopersIO

    いまや人々の生活に完全に溶け込んだスマートフォン。その中で使われるからこそ考えるべきことがあります。 見た目の美しさだけではない、スマホアプリをデザインする上で常に心がけていなければならないことをお話ししました。 内容 クラスメソッドのデザイン クラスメソッドがデザイン?って思われる方もいらっしゃると思うので、クラスメソッドでのデザイン業務についてご紹介しました。 生活とスマホ すっかり我々の生活に一部となったスマートフォン。スマホアプリは生活の中にあって、それをデザインするということは生活をデザインすることと同じというお話をしました。 ライフスタイルデザイン ユーザーの目的は「機能を使うこと」ではなく、アプリを使う体験通して価値を感じること。近視眼的デザインをすると周りが見えなくなって、生活に馴染まない機能になるので機能を俯瞰して、人の感情や生活の流れを考慮するということをお話ししました

    #cmdevio2016 (レポート: D-1) スマホアプリデザインの心得 | DevelopersIO
  • 1