Understanding the ‘Why’ behind some basic UI design practices
As the first assignment at 10kdesigners, we had to replicate the UI from existing app screenshots. Our main aim was to deconstruct a well designed app and understand some of the design decisions like colours, spacing, typography, etc. and try to replicate them pixel-perfectly. “This blog is an attempt into understanding why some common design practices are followed, helping us understand and apply
What’s The Perfect Design Process? — Smashing Magazine
The design process is messy. You might be following a structured approach, but too often, it takes a life of its own. And before you know it, you are designing in chaos, with last-minute changes and missed deadlines. So, what’s the “perfect” design process? Design process is messy. You might be following a structured approach, but with all the last-minute changes and overlooked details, too often,
ルールではなく補助線 ─ユーザー数2,000万人超のサービスにおける、Design Systemを立ち上げた話｜Mercari Design Blog
ルールではなく補助線 ─ユーザー数2,000万人超のサービスにおける、Design Systemを立ち上げた話 こんにちは、メルカリDesign Systemの立ち上げと運用を担当したデザイナーのtottieです。 この記事では、メルカリの抱えていたデザイン上の課題をDesign Systemの導入で改善したお話をご紹介いたします。 なぜDesign Systemを導入したの？Design Systemを導入した理由は、大きく分けて２つあります。 １つめは、開発における課題です。 導入を決定した当時（2018年）、メルカリはスタートアップから急成長したサービスだったため、開発チームは様々な課題を抱えていました。 サービスを改修したくても、複雑に絡み合ったコードのためアップデートが難しい状況になってきた。 急激なチームメンバーの増加にあたり、分担して作業するための土台の整備が間に合わなくなっ
Product Design Wiki
Product Design Wikiへようこそ。SmartHR プロダクトデザイングループ内で獲得した知見、スキル定義、学習コンテンツを掲載しています。プロダクトデザインに関わる人はどなたでも利用・参加できます。 アクセシビリティ試験 アクセシビリティ アフォーダンス アジャイル 点字ディスプレイ 点字キーボード ブラウザ クラス図 コレクションとシングル コンポーネント 概念モデル CRUD カスタマージャーニーマップ データモデリング デザインエンジニア デザインエンジニアリング デザインシステム デザインツール デザイン ダイアログ ドメイン エンジニアリング ファシリテーション Figma Fireworks ヒューリスティック調査 HTML Standard 情報アーキテクト 情報設計 情報アーキテクチャ 界面 MDN メンタルモデル モーダル モードレス MVP オブジェクト
積極的な技術選定と消極的な技術選定 - uhyo/blog
この記事は、筆者が技術選定について思うところをまとめた記事です。Twitterに同じ話を何回か書いているので、文章にまとまっていたほうがよいと思い用意しました。 やや過激な思想で愚痴も含んでいるので、共感いただけると嬉しいものの、みなさんを説得しようというつもりはありません。こいつはこういう考え方なんだなという心持ちでお読みください。 積極的な技術選定と消極的な技術選定ITエンジニアの方々の中には、技術選定をする立場の方も多いでしょう。技術選定にあたってはさまざまな事情を勘案しなければならない難しいもので、それだけに多くの人が技術選定に関する各々の考えを述べています。 筆者は、技術選定における意思決定のプロセスは、積極的な技術選定と消極的な技術選定の2種類があるのではないかと思っています。 積極的な技術選定は、選定される（あるいはされない）技術そのものが原因となる意思決定です。 一方、消極
新しいメルカリDesign System Web | メルカリエンジニアリング
@nekobatoです。メルカリDesign SystemのWeb版開発者をしています。以前の記事で新しくなったメルカリ Webの紹介がありましたが、本記事ではそこで使われている、同じく新しくなったDesign System Webの紹介をします。 Design System Webの提供 Design Systemを元にした実装の構造はプラットフォームごとに異なりますが、Design System Webはmonorepoで管理されたnpm module群で、プロダクトはモジュールを用途に合わせて利用可能です。全てを使う必要はなく、基本的にはコンポーネントモジュール（CoreまたはReact）を利用すればDesign Systemの恩恵を受けられます。現在は新しくなったデザインのメルカリ Webで実際に利用例を見ることができます。 この記事はDesign System Webの技術的な概
フロントエンドから取り組むデザインシステムの改善 #UI
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、フロントエンドエンジニアの近藤です。Yahoo! JAPANのスマートフォンのウェブトップページのフロントエンド開発業務と、社内で利用されているデザインシステムの開発に携わっています。 近年、デジタルプロダクトを持つ多くの企業で、デザインシステムが活用されています。デザインシステムには、ビジュアルとしてのデザインの規定だけでなく、実際のプロダクトに利用できるUIライブラリやコンポーネントライブラリなどが含まれます。そのため、デザインシステムの構築にはデザインとエンジニアリングの両方の力が不可欠です。 本記事では、私が開発に携わっているデザインシステム「Riff」の紹介とともに、フロントエンド部分におけるデザインシステム
How To Design A Simple UI When You Have A Complex Solution — Smashing Magazine
Software and apps often solve very complex problems for businesses and consumers in the way of sales, marketing, finances, and so on. But offering a product that solves your users’ problems isn’t enough. If the UI is just as complex as the original problem, user churn is going to be high. Today, we’re going to look at some tips for designing a simple UI regardless of your solution’s complexity. Th
個人的UIデザインの情報源まとめ
どうも。 最近エンジニアからデザイナーになったものです。 最近UIデザイナーになってUIデザインの情報源って意外とまとまってないなと思ったので、個人的によく参考にする情報源をまとめました。 ここに載ってないやつでおすすめの情報源あればコメントとかで教えてください。 OSガイドライン OSのデザインガイドラインはUIデザイナーだったら必ず読んでますよね。 Material Design デザインシステム的な話から装飾、カラーツールなどデザインに必要な話がとてもたくさん詰め込まれているためデザイン学習の教材として非常に優秀です。コンポーネントもユースケースやスペックまできちんと網羅されていて参考になるし、金と手間隙かかってるなあと思います。 Blogもあり、更新頻度は高くないですが面白い記事が多いのでたまに読んでいます。 Human Interface Guidelines こちらはApple
【図解入門】シンプルな図の作り方｜櫻田潤🎨インフォグラフィック・エディター｜note
3年前に、図解の基本をまとめた本『図で考える。シンプルになる。』を書きました。その内容から、エッセンスを抽出したのが本noteになります。 （１）「幕の内図解」と「イチオシ図解」 図には、大きく分けて、2つのアプローチがあります。 ひとつは、幕の内弁当のように、いろんな要素を盛り込んだ図で、もうひとつが、唐揚げ弁当のように、イチオシのおかずにフォーカスした図です。 たとえば、桃太郎の話を「幕の内図解」のアプローチでまとめてみたのが、つぎの図です。 登場人物とエピソードをフラットに扱って、網羅的に盛り込んでいます。 この図を使って、人に説明しようとすると、「まず、お婆さんですが……」「つづいて、お爺さんですが……」といった具合に、「お婆さん」「お爺さん」「桃太郎」それぞれの視点に切り替えが必要になり、話す方も話しづらければ、聞く方もまどろっこしく感じてしまいます。 相手がじっくり聞く耳を持っ
UXデザインの一番小さなはじめ方｜TSUYOSHI KANEKO / GOGEN株式会社CXO
UXデザインの日常的なトレーニング方法をご紹介します。 「UXデザイナーになるために、どんなことか始めたら良いのですか？」 「最初の仕事がもらえなくて、なかなか実績が詰めないのですが...」 最近こんな相談を受けることがあったので、アドバイスしてみたことをまとめてみます。 結論からお話すると、「日常の多くはUXをデザインできる」ので、ちょっとした気の持ちようからすぐに実践をはじめることが出来ます。 日常の全てはUXデザインの実践の場である基本的には、日常の全てのタスクはUXデザインの要素を含んでいると思っています。 何かしら、あなたのアウトプットによって人間の体験に影響を与える仕事は全てがUXデザインです。 UX白書によると、【実践としてのUX】をこう要約しています。 •デザインのプロセスにおいて、 関心事の中心をユ ーザ ーとすること •タ ーゲットユ ーザ ー層にとって重要なデザイン的
新人デザイナーが入社4ヶ月で得たずっと大切にしたい気付き - BASEプロダクトチームブログ
＜アイキャッチ画像はメンバーの許可を得て掲載しています＞ 挨拶 はじめまして。デザイナーの河越です 2020年卒の新社会人として、4月からBASEのDesign Sectionで働いています。 なんだかんだでもう社会人5ヶ月目。この記事では、未経験からデザイナーとして入社するまでにしたことと、入社してから4ヶ月で取り組んだ業務や考えたことを振り返っていきます。 「当たり前のことしか言ってねぇ！」と思っても、優しく見守っていただけると嬉しいです🙇♀️ デザイナーとして入社するまでにしたことと まず簡単に私がBASEにデザイナーとして入社するまでのことを説明します。 私は2018年6月にBASE BANK株式会社のインターンとしてBASEグループに入社しました。 鶴岡さんのツイートがきっかけだったと思います！ やるぞ！！！ - 銀行をかんたんに。新会社BASE BANK立ち上げメンバー募集
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
効果的な管理画面を デザインをするために 避けるべき5つの罠
Figma
ColorMagic | AI Color Palette Generator
UI Pocket - UIデザインの参考になるアプリのUIデザインギャラリーサイト
UX-mov | アプリのUIが動画で見れるギャラリーサイト
エンジニア向けの余白の基礎 / Spacing
https://www.uxmilkallnight.com/
Palettable