Material-UI is now Material UI! - MUI
Starting today we are evolving our brand identity to clarifying the difference between our company and our products. Material-UI: the organization is now called MUI. Material-UI: the Material Design components developed by MUI is now called Material UI, we ditched the hyphen! Material-UI X: the set of advanced React components is now called MUI X. Material-UI: the set of foundational MIT React com
Headless UI v1.0 - Tailwind CSS
Last fall we announced Headless UI, a library of completely unstyled, fully accessible UI components, designed to pair perfectly with Tailwind CSS. Today we’re super excited to release Headless UI v1.0, which more than doubles the amount of included components for both React and Vue. What’s new We’ve added four new components to the React library, and five new components for Vue. Dialog (modal)
Goodpatchのエンジニアが持つデザインの観点とは？ Goodpatch Engineer Meetup Vol.5｜Goodpatch Blog グッドパッチブログ
イベントレポート Goodpatchのエンジニアが持つデザインの観点とは？ Goodpatch Engineer Meetup Vol.5 こんにちは！Goodpatchでは2019年12月10日（火）に第5回目となるエンジニアのためのミートアップ「Goodpatch Engineer Meetup Vol.5」を開催しました。 GoodpatchはUI/UXに強みを持ったデザイン会社ですが、今回のイベントではGoodpatchで働くエンジニアだからこそ持ち合わせている、インターフェイスデザインの観点やカイゼン事例、ペアデザインがもたらす価値についてなどのナレッジをご紹介しました。 今回は登壇された方々の発表内容を元に、イベントの様子をお届けします！ 「インターフェイスデザインとの向き合い方」丸怜里 はじめに、弊社の元iOSデベロッパーで、現在はソフトウェアデザイナーを務める丸怜里（@us
React UI Kits
I found the amount of UI toolkits for React impressive, so I wanted to share what I found. I found 18 UI kits and checked how many stars on GitHub and weekly downloads on NPm they have. They are sorted by GitHub stars. Ant Design A design system with values of Nature and Determinacy for the better user experience of enterprise applications Creator: XTech License: MIT GitHub ~64.500 Stars NPM: ~506
言語化と価値観、そして悩み｜Hiroki Tani
僕の今の仕事というのは、デザイナーと（フロントエンド）エンジニアの間の立ち位置でいろんなことをしている。その重要な仕事のひとつが、このセッションの主題のようなデザインの言語化への取り組みをリードするということ。 具体的にやっていることの一つをあげると、例えばスライドにあるような、あるUIコンポーネントのことを何と呼ぶか、またコンポーネントの粒度についての話し合いの場を設けるようなことをする。はじめから原則と呼べるようなものがあればいいが、なかなかはじめから立てるのは難しく、各々の考え方・価値観というのをすり合わすため、ほぼ毎日に話し合いを時間をとって進めていたりする。 はじめはデザイナーが起こすデザインカンプ、といっても完全なものではなくある程度整ったSketchデータを確認しながらインベントリとしてUIコンポーネントを抽出する。そのコレクションからパターンやルールとして考えうることをデザ
会社のみんなでDaily UI Design Challengeに取り組んでみた話
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog credit: @takaha_shh, @chashi, @52shinNaka, 春野 健吾 ヤフオク!アプリ開発部の中島（@52shinNaka）です。 今日は最近会社の有志でやり始めたデザイン力向上のための取り組みを紹介したいと思います。 Daily UI Design Challengeとは？ Daily UI Design Challengeとは、2015年の10月ごろから西海岸のデザイナーが始めた取り組みで、毎日一つUIのお題が届くメーリングリストです。 一日に一回、こんな感じでメーリスが届くので、 与えられたお題に沿ってUIを作って、DribbbleやUplabsに投稿します。 DribbbleやUplabsとかで
Atomic Designってデザイナーには難しくない！？という話 - Qiita
Atomic Designってむずくないすか？ なんか、良さそうなのは分かるんですよ。 UI要素を最小単位まで分解して、それを共通化して再利用性を高めて工数減らしていこうぜ！ということなのは分かるんです。 Atomic Design を分かったつもりになる こちらはDeNAの記事で、単純に「Atomic Design」でググると最初に出てくる記事です。SEOが強め！（2018/07/30現在） こちらの記事、確かに詳細に書かれているんです。 2016年にこんな記事を書けるなんて、当時口を開けてアホ面で仕事をしていた自分なんかからしたらもう感服するしかないです。 英語の記事しかない中で、最先端なことを書けるDeNAはやっぱりすごいな私は何してんだよって話なんです。 ただ、この記事を、こんな優良な記事を読んだとしても、実際に作り始めると、、、 ButtonってIconも文字も入ってくるけど、こ
【コピペOK】floatとFlexboxのCSSレイアウト比較例3選
みなさん、こんにちわ！ ジャングルオーシャンのラファエロです！！ つい最近、Webデザイン初心者の友人からこんなことを言われました。 「CSSでレイアウトしたいんだけど、ネットで調べてみるとfloatとかFlexboxとか出てきて意味わかんない(T ^ T)」 確かにCSSでのレイアウト方法を検索してみるとfloatを使った方法とFlexboxを使った方法が混在していて、Webデザイン初心者には分かりづらいですよね(^^;) ラファエロは断然Flexboxを使った方法をおすすめしていますが、実際のところfloatとFlexboxのどっちが簡単なのかサンプルコードを用意したので比較みましょう！ <nav> <ul> <li><a href="＃">Top</a></li> <li><a href="about/">About</a></li> <li><a href="service/">S
フロントエンドエンジニアが UI 設計〜実装で考えていること | MEDLEY Developer Portal
2019-03-27フロントエンドエンジニアが UI 設計〜実装で考えていることおはこんばんちは、開発本部エンジニアの大岡です。 先日、TechLunch という社内勉強会で「フロントエンジニアが UI 設計〜実装で考えていること」という内容で発表しました。UI 設計から実装の細かい話ではなくどういう気持ちで望んでるかという話で、基本的なことしか書いていませんが紹介させていただければと思います。 UI 設計UI 設計をデザイナーがして、それをエンジニアが実装する場合とエンジニアが単独で UI 設計から実装までする場合があります。今回はそれぞれのケースで、フロントエンドエンジニアがどういうことを考えてるかを紹介します。 とその前に、他人と UI について話すときに気をつけてる言葉で分かりやすくまとまっているツイートがあったので紹介します。 自分が他の人に UI デザインの説明をするとき、あま
ソシオメディア | OOUI の目当て
OOUI の目当てについて考えたいと思います。 私はここで「目当て」という言葉を「オブジェクト」の訳語として使っています。このタイトル自体に同語反復的な響きを持たせてみたのです。 OOUI は「オブジェクト指向ユーザーインターフェース」のことですから、OOUI について考える上ではオブジェクト指向とは何かということについて考える必要があります。するとさらにオブジェクトとは何かというところまで遡って、このコンセプトの本質を見ていく必要があるのです。 そこで、O（object）、O（oriented）、OO（object-oriented）、U（user）、I（interface）、UI（user interface）、OOUI（object-oriented user interface）という風に言葉を分解して、それぞれの意味を確認しながら、OOUI の目当てを探っていきます。 オブジェク
7,000+ Icon Fonts, SVG, 3D Icons and Animated Icons with Unicons by IconScout
Discover the ultimate collection of free icon fonts, SVG icons, 3D icons and animated icons with Unicons Bring your designs to life with free icon fonts, SVG icons, 3D icons and animated icons with Unicons by IconScout. Whether you’re a designer or developer, Unicons has you covered with high-quality icons in a variety of icon styles such as line, monochrome, solid and thin line.
UI/UXデザイナーがいるんだったらUXエンジニアもいてもいいよね？ - CrowdWorks Designer Blog | クラウドワークス デザイナーブログ
おはこんばんにちは！ 前回、フロントエンドエンジニアと名乗っておりましたが、 勝手に改名しました「UXエンジニア」になりましたみーたです。 この「UXエンジニア」というカテゴリ。「UIデザイナー」や「UXデザイナー」ほどまだそんなにメジャーではなく、また領域として幅広いので、今回は私が思うUXエンジニア像について紹介していこうと思います。 ■ これらに興味ある人に読んでいただきたい。 情報を正しく伝えたい！ カラーユニバーサルデザインなどに興味がある！ HTMLとCSS？チョットワカル！ サイトの表示速度遅いと気になる！ なんて方は、次の道として「UXエンジニア」おすすめです。 ■ そもそもUXって幅広いですよね UXってなんぞや、と調べてみると...Wikipedia先生にはこう書かれてありました。 ユーザーエクスペリエンス（英: user experience）とは、人工物（製品、シス
マイクロインタラクションを考慮すべき４つの理由
自身の旅行体験をまとめているフリーWebデザイナー。オンラインの小さなリブランディング会社と仕事をしている。会社の理念は、顧客が希望を持ち、人生を新たにもっと楽しめるような製品を作り、提供すること。 マイクロインタラクションは、私たちの周りに溢れています。これはユーザインターフェイスの特定の瞬間のやりとりに用いられるものです。たとえば、ユーザーがモバイルアプリのボタンをタップするとナビゲーションメニューが開かれるなどが一般的なマイクロインタラクションになります。 より詳しく述べると、マイクロインタラクションとはユーザーがどこかでなにかの操作をしたときに起こる、インターフェイス上のアニメーションや変化を指します。ユーザーにとって有益な情報を提供するインタラクティブなアニメーションのことだと考えてください。マイクロインタラクションを利用する理由はたくさんありますが、ここでは４つの例を紹介しまし
「5人でユーザテストすればユーザビリティ上の問題のうち85%が見つかる」の元ネタ論文を解説する｜Mikio Kiura / ANKR DESIGN
Webサービスやアプリなど開発や運用に関わっている方であれば、こんなことを耳にしたことがあるのでは無いでしょうか？ 5人でテストを行えば、ユーザビリティ上の問題のうち85%を発見できるこれらは業界的にはある意味で常識ですが、色々話を聞いてみると、この常識の「出処」あるいは「根拠」ってあんまり知られていないようなのです。 もちろん、ちょっと知識のある人であれば、ユーザビリティ業界の第一人者であるヤコブ・ニールセン博士が提唱したというところまでは知識として知っているでしょう。しかしながら、その元ネタとなった論文を実際に読んだ人、あるいは85%という数字の根拠やその条件について理解されている方はどの程度居るのでしょうか。 ということで本記事では「ユーザテストは5人で85%」の元ネタである下記の論文について、解説、と言うとちょっと大げさかもですが、概要を紹介してみたいと思います。願わくば、この記事
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Designing better target sizes
Icongram: icons on the fly 🚀
メルカリにおける UIテストのこれまでとこれから 〜 App ＆ Web 〜 / The past and future of UI test in Mercari
http://www.life-is-bitter.com/entry/designguideline_start