タグ

uiと設計に関するcyber_snufkinのブックマーク (6)

  • なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita

    なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。

    なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
  • ベイジの業務システムUIデザインワークフロー(100のタスクを徹底解説) | ベイジのUIラボ~業務システムとSaaSのUIを考える

    2021年現在、ベイジの柱の事業はウェブ制作事業とウェブアプリデザイン事業です。ウェブ制作事業は会社設立の2010年からの主力事業で、サービス品質の平準化を目的に2014年頃からワークフローの整備を進めてきました。 一方ウェブアプリデザイン事業については、事業拡大したのがここ数年で、まだワークフローが整備されておらず、各人の裁量に委ねた進め方になっていました。そこで今後の事業拡大とメンバー増員を想定し作成したのが、業務システムやSaaSのUIデザインに特化した「ベイジの業務システムUIデザインワークフロー2021年版」です。 基的な進め方は国際規格(ISO 9241-210※)の人間中心設計プロセスに基づいて組み立てていますが、細かいタスクの順序や内容は、今までベイジで培ってきたノウハウをふんだんに盛り込み、組み換えています。 また今回ワークフローを整備するうえでは、クライアントごとの開

    ベイジの業務システムUIデザインワークフロー(100のタスクを徹底解説) | ベイジのUIラボ~業務システムとSaaSのUIを考える
  • 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール | UXデザイン会社Standardのブログ

    2014.11.19 / UI 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール Tomohiro Suzuki クライアントやディレクターから渡された画面遷移図を元にワイヤーフレームを作ってみると、後から足りない画面が次々に発見された、または画面内の情報がどこに繋がるのか分からないといった経験はありませんか? この画面遷移図というものは来は制作範囲の全体像と構造を明確にし、必要な画面というものを洗い出したりするものです。通常のWebサイトであれば、従来のような画面遷移図でも問題ないかもしれませんが、多くのインタラクションが発生するサービスの設計では複雑化しやすく、何度も情報を行き来して確認することになるため時間がかかります。 原因のひとつとして、画面遷移図では画面名のみを記載して繋げていくことになるため、必要な情報が不足していることが挙げられます。その結果、来で

    画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール | UXデザイン会社Standardのブログ
  • フロントエンドのコンポーネント設計に立ち向かう - Qiita

    ReactVueなどコンポーネントベースで作っていくViewのライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、このコンポーネントの設計に悩まれる方も多いのではないでしょうか。 コンポーネントをどの粒度、どんな状態で分割するのが良いのか、などなど、特にチームで開発する時に認識が揃っていないとカオスになりがちな部分であると思うので、自分なりの設計をする際の指針を言語化しようというのが記事の目的です。同じように悩まれている方にも何らか示唆を提供することができたら嬉しいです。 想定読者 「コンポーネント設計?なにそれ?おいしいの?」という方 初めてコンポーネント設計でアプリ作ってみたけど、当にこれでいいのか自信の無い方 はじめに: "コンポーネント"とは まず最初に"コンポーネント"という言葉についてですが、ここでは「GUIのパーツをモジュー

    フロントエンドのコンポーネント設計に立ち向かう - Qiita
  • スマートカー向けのアプリデザインで気をつけたいこと

    RyanはCodalのジュニアテクニカルライターで、マーケティングチームのコンテンツ制作に貢献しています。 長い間、自動車向けアプリにとってのもっとも大きな障害は法律でした。運転中に携帯電話を使用することは、重大な犯罪であり危険運転行為として取り締まられます。 州知事幹線道路安全協会(Governors Highway Safety Association)によると、運転中の携帯電話の使用は、米国の14州とワシントンDCで禁止されています。一方、Android AutoやApple CarPlayなどでステレオを操作することは50州すべてで合法です。 編注: Android AutoとApple CarPlayは、スマートフォン端末を自動車と接続し、ステレオやカーナビなどの機能を提供するシステム。 しかし、従来のアプリデザイナーやUXデザイナーが自動車のコンテキストに慣れていないこともあり

    スマートカー向けのアプリデザインで気をつけたいこと
  • 科学的思考をUXデザインに適用する5つのプロセス

    これまで、デザイン思考が広く話題にされてきました。デザイン思考とはどういう意味なのか、どのようにデザイン思考の原理を適応するのか、といったものです。 デザイン思考が科学的な試みに適用できる一方で、科学的思考もデザインの役に立ちます。かつてよりはやや人気が衰退していますが、科学的なアプローチは今でもデザインに効果的だと言えるでしょう。 科学的な法則によってデザインに対しよりよい判断をすることができ、最終的にはさらに良いUXにつながります。つまり、直感や経験則ではなく、データに基づいてデザインを決定するということです。 科学的思考を正しく理解し、デザインに適用するために、研究者のように白衣を着て、研究機関で学位を取得する必要はありません。また、「科学的手法」に関する公式のガイドやマニュアル化された作業プロセスは存在しません。 科学的な法則をどのように適用し、データを活用をするかについては、以下

    科学的思考をUXデザインに適用する5つのプロセス
  • 1