自分がUIデザインをする時に、普段利用しているリファレンス集｜mamoru kijima
概要自分がデザインをする時に普段利用しているサイトをまとめてみました。これ系のサイトは沢山ありますが、ここに書いてあるリファレンス集は3年ほど利用して厳選したサイトなので信頼性が高いです。 1.インスピレーション面で参考にするサイト
CarloでNode.jsのツールにUIをもたせる - Qiita
先日、GoogleがCarloというライブラリをリリースしました。 少し気になったので、軽くメモを残しておきます。 Carlo is 何 CarloはChromiumを画面描画エンジンとして動作するNode.js アプリケーションフレームワークです。 Node.js、ChromiumともにV8が動作するため、JavaScriptのみでデスクトップアプリが作れるよ、というわけです。 公式のサンプルとほぼ一緒ですが、次のようにコードを書くと、index.htmlがデスクトップアプリ風に立ち上がります。 const carlo = require('carlo'); (async () => { const app = await carlo.launch(); // html/CSS/JavaScriptを配置しているフォルダを教える app.serveFolder(__dirname); /
Home - Office UI Fabric
All Microsoft Global Microsoft Security Azure Dynamics 365 Microsoft 365 Microsoft Teams Windows 365 Tech & innovation Microsoft Cloud AI Azure Space Mixed reality Microsoft HoloLens Microsoft Viva Quantum computing Sustainability Industries Education Automotive Financial services Government Healthcare Manufacturing Retail All industries Partners Find a partner Become a partner Partner Network Fin
Let’s make multi-colored icons with SVG symbols and CSS variables
by Sarah Dayan Creative Things by Kyle AdamsLet’s make multi-colored icons with SVG symbols and CSS variablesLong gone are the days of using images and CSS sprites to make icons for the web. With the explosion of web fonts, icon fonts have become the number one solution for displaying icons in your web projects. Fonts are vectors, so you don’t have to worry about resolution. They benefit from the
ユーザーインターフェイス解剖学・改訂版（公開版）
社内イベントで登壇した際のスライドです。｢ユーザーインターフェイス解剖学｣の改訂版。主に、UIデザインにおいて検討した方がよい／すべき考え方というものを簡単にご紹介しました。
Storyshotsが最高すぎる件 - Qiita
こんにちは、@takanoripです。 今回は最近導入したStoryshotsというやつを紹介していきたいと思います。 StoryshotsはStorybookのアドオンで、Storybookに登録されているコンポーネントのスナップショットテストをしてくれます。できることはjestのスナップショットテストとほぼ同じです。 Storyshotsを使うと、コンポーネントごとにテストファイルを用意しなくて良いので手軽にスナップショットテストを導入することができます。 すでにStorybookを導入していれば、下記ファイルを追加するだけでOKです。 簡単でしょ？ また、Storyshotsを使うと、スナップショットテストができること以上に良い効果をProjectにもたらすことができます。その効果について説明していきます。 Storybook Storybookは皆さんご存知だと思うので説明を省略し
Figma: The Collaborative Interface Design Tool
Downloads Get the desktop, mobile, and font installer apps
ネットの決済時の入力項目が多いのはとにかく大きい壁、と明日のイベント｜林伸次
先日、お店用のある備品を買おうと思って、グーグルで「○○ 販売」って検索したんですね。 もちろん、アマゾンと楽天が上の方に出てきたのですが、それ以外に、「あ、こんなお店があるんだ」っていうサイトがあったんです。 そのお店をクリックしたところ、たぶんサイト運営者の中に「飲食店で働いた経験者」がいるのでしょう、「そうそう、そういう使い勝手が知りたいんだよなあ」とか「そうそう、そういう消耗品は安ければ安いほどいいんだよなあ」とかってことがすごくわかっているんです。 欲しかったものも見つかり、それをカートに入れて、決済のページにいったところ、まあとにかく、すごくたくさんの僕の情報を入力しなきゃいけなくなってまして。 うちのお店の会社名、店舗名、僕の役職(そんなものないです)、住所も郵便番号から、メールアドレスも間違いがないように２回、性別、僕の名前のカタカナのフリガナって感じで、とにかくたくさん入
もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita
はじめに Webサービスやアプリを企画したり、立ち上げたりする際にプロトタイピングツールや、ExcelやPowerpoint、Illustraterなどを駆使した謎のファイルで画面遷移図を描くことがある。 こういう図を元に仕様を決めて行って、サービスを作っていくのは以下の点で困る。 画面遷移図が保守されない。 書くのが非常に面倒くさい ユーザーのモチベーションの流れが追いづらく、見た目ばかりに注目してしまうものになりがち マシンリーダブル(ソフトウェアで構造を取り出せない)でない。 このような欠点があってどうにも扱いづらい。 そんなわけで、markdown風のテキストから簡単に画面遷移図を描けないかなとコンパイラを作成し、次にそれをインタラクティブに編集できるエディタを作成した。 UI Flows図について 画面遷移図的なものを書く際に、僕が個人的につかっていた表現方法として、UI Flo
UI / UX 学びまとめ
夏、満喫してますか？ 夜は何してる？ フェス、ナイトプール、おうちでまったり、友達とビアガーデン……。ViViモデルが夏の夜にやりたいこと×メイクをまとめました。
1000 Free Material Icons for Adobe XD - XDGuru
Adobe XD has been out for about a year now, but still there are not a lot of resources available in terms of icons. Sure you can use the icon sets you might already have for Photoshop or Sketch, but you always need to have those apps open on your computer and copy assets from them and paste them back into XD. Or you could just download .svg icons, which are fully supported by Adobe XD, but you’d h
アニメーションが心地よいマテリアルデザインのUIサンプル５選
徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。 マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。 UIデザインの歴史に学ぶシャドウと奥行きの使い方 この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。 MaterialUpのオススメUIコンセプト５選 1. ミュージックプレイヤー 楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりア
You Might Not Need JavaScript
JavaScript is great, and by all means use it, while also being aware that you can build so many functional UI components without the additional dependancy. Maybe you can include a few lines of utility code, or a mixin, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more than what the browser ships with. This site is fully copied from youmightn
Introduction - Semantic UI React
jQuery FreejQuery is a DOM manipulation library. It reads from and writes to the DOM. React uses a virtual DOM (a JavaScript representation of the real DOM). React only writes patch updates to the DOM, but never reads from it. It is not feasible to keep real DOM manipulations in sync with React's virtual DOM. Because of this, all jQuery functionality has been re-implemented in React.
GitHub - microsoft/fluentui: Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
Fluent UI React is shipping its v9 final stable release. Visit the Fluent UI React v9 Release page on the wiki to learn more about the upcoming release schedule. Fluent UI web represents a collection of utilities, React components, and Web Components for building web applications. This repo is home to 3 separate projects today. Combining Fluent UI React v9 components with Fluent UI React v8 or v0
)
Microsoft Inductive User Interface Guidelines
Making the screen title prominent Once you settle on a useful screen title, it's important to make sure the user sees it. Some studies have shown that users rarely read instructional text. To help overcome this problem, screen titles should be designed to be prominent and appealing in order to draw the user's attention. The screen's visual design should inform the user that the title is the most i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Liquid Animation in After Effects // UI Design Course
Material Design
Material Design colors
GitHub - bvaughn/react-virtualized: React components for efficiently rendering large lists and tabular data
