Figma によるデザインシステム入門
本書は Figma によるデザインシステムコースの日本語訳になります。デザインシステムに興味がある人や構築しようとしている人もチェックしてみてください。デザインシステムに縁のないデザイナーや開発者のためにプロダクトと向き合った最適なデザインシステムを探求するための材料になれば嬉しく思います。 (原文 : https://help.figma.com/hc/en-us/sections/14548397990423-Course-Introduction-to-design-systems) この記事は、Figmaから許可を得た上で翻訳され、Brand Guidelineに則った内容となっております。(Brand Guideline: https://www.figma.com/ja/using-the-figma-brand/) ## 更新情報 [2023/7/1] - 表紙画像に、このコ
Deceptive Patterns - Home
Deceptive patterns (also known as “dark patterns”) are tricks used in websites and apps that make you do things that you didn't mean to, like buying or signing up for something. For example:
デザイナーがChatGPTに指示されながらECサイトデザインをしてみる実験 | Design Journal vol.25｜Sakino Tomiura
これはなに？昨年末にOpenAIがリリースしたチャット型AIの「ChatGPT」と一緒にデザインしていくプロセスで、実際にどんなことができるか？を実験してみたnoteです。 前提と注意点 🚨まずこのnoteの趣旨は「これらが実用的にデザイン制作に使える！」といったものではありません。 どちらかというと遊びに近く、実験的に行ったもので、結論から言うと現時点では実用的に使える要素はまだ少ないかなと思います。 また、前提として私はまだまだAIやChatGPTについて詳しいわけでは全くなく、これからちゃんと勉強してみようと思ってるぐらいのレベル、という前提で読んでいただけると幸いです。 （AIについて本を読んだり座学的な勉強から入るより「とにかく何かしら触ったりつくったりしてみる」方が楽しめると思い、せっかくなのでその実験の過程をまとめてみました。） 「こういうこともできるよ」「このやり方の方が
日本のウェブデザインの特異な事例
sabrinas.spaceより。 8週間もかからなかったはずのプロジェクト 日本のウェブデザインはどう違うのか? 2013年のRandomwireのブログ投稿で、著者(David)は、日本のデザインの興味深い相違点を強調しました。日本人はミニマリストのライフスタイルで海外に知られていますが、ウェブサイトは奇妙なほどマキシマリストです。ページには様々な明るい色(3色デザイン原則を破っている)、小さな画像、そして多くのテキストが使われています。2022年11月に撮影されたこれらのスクリーンショットで、自分の目で確かめて下さい。 ブログ投稿には、文化的専門家、デザイナー仲間、そして不満を抱く市民によって支持されている、考えられる理由がいくつか挙げられていました。 この理論が今でも正しいのか、また、もっと定量的なアプローチが可能なのか気になったのでやってみました。 私が見つけたもの 各国の最も人
デザイナーとエンジニアを巻き込んだワークフローの改善｜鈴木慎吾 / TSUMIKI INC.
「エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア Advent Calendar」20日目の記事です。 今年の５月から、社内でクライアントワークのチームから自社事業のチームに異動し、映画・ドラマ・アニメのレビューサービスのFilmarksで有料会員機能のPMを担当しています。 以前はUIデザインやアプリ開発、あるいはその中間的な仕事としてプロトタイプ開発やディレクションなどを経験してきました。 PM業の傍ら、社内のデザイナーとエンジニアの受け渡し部分の改善に取り組みました。その検討過程について紹介します。 要件定義・UIデザイン・開発間のワークフロー改善もともとFilmarks内ではディレクターがGoogleスライドなどで要件資料とGithub Issueをつくり、 デザイナーがSketchでUIをつくりZeplinで書き出したURLをエンジニアに受け渡し、エンジニ
【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた20211017更新｜ryota_funakoshi
【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた20211017更新 こんにちはデザイナー社長の船越です！久々のnote投稿ですが、ツイッターを見ていてデザイナー初学者の人から 「どこから画像を引っ張ってくればいいかわからない😭」 「日々の情報収集どうすればいいの？🤔」 という悩みをよく見かけます。そこでデザインオタクの僕が、普段見ているサイトや参考になる選りすぐりの情報を全部まとめました！デザイナーのクオリティと速度は引き出しで決まると僕は考えています。このまとめを見て皆さんの学習と仕事が少しでも捗るようになれば嬉しいです！たくさんのデザイナーさんの役に立つ記事にしたいため、「このツールも便利だよ！」というのがあればぜひコメントで教えてください！ 日々こちらは更新して行く予定なので困った時は是非参考にしてもらえると嬉し
認知パターンから考えるesaらしさのデザイン / Thinking esa-like design
DIST.26 「Webサービスの個性を支えるデザイン」で発表させていただきました。 https://dist.connpass.com/event/123241/ https://esa.io
カーニング - Wikipedia
カーニングの有無の比較。それぞれの文字の仮想ボディの境界を赤線で示す。上二つは「ベタ組み」だと間延びして見えるので、カーニングによって仮想ボディを割り込ませて隙間を減らした例。最も下は f のアセンダーと i の点が衝突した例で、鋳造活字では発生しないDTP特有の現象である。記事中で述べるように f のアセンダーと i の点を一体化させた合字にする方法も一般的だが、この例では片方だけがイタリック体であって合字はなじまないので、隙間を広げるカーニングによって衝突を回避している。 カーニング（英語: kerning）とは、主に欧文の組版において、プロポーショナルフォントの文字同士の間隔（アキ）を調整する技法のこと。カーニングを行わない場合は、文字の間に不自然な空白を招いてしまう。適切にカーニングが施されたフォントでは、字面間の空白の面積がほぼ均等になる。 DTPが普及した現在は、組版ソフト上で
Can't Unsee
A game where you need to pick the design that is most correct. Test your attention to details!
PrimeFaces
Your perfect companion for Angular, React, Vue and JSF featuring elegant, high-performance, accessible and fully customizable UI Components. Open source products of PrimeTek are used all around the world by 5M+ developers in Fortune 500 companies, corporations, government agencies and educational institutions.
Infinite Red: Experts in all things React Native
Your experts in all things React NativeWe're a friendly group of developers in the US who build impactful products and relationships We’ve been building impactful React Native projects since the beginning.When React Native was released in 2015, our team started building projects in it. Over the intervening eight years we’ve developed an incredible depth of knowledge and skill. Hiring our team does
ノンデザイナーでもイケてるLPを作成する方法 - Qiita
はじめに イケてるは誇張かもしれませんが社内にデザイナーがいなく、 エンジニアにランディングページを作ってと振られたときのケースを想定して ノンデザイナーでも体系的にCSSコーディングすることでそれっぽいランディングページを作成できることを目的としてます。 デザインは一朝一夕でできるものではなく、ブランディングに関わる部分の画像に関しては、商材の撮影やPhotoShopやIllustratorで専用のアイコンやロゴ画像を別途制作する必要があります。 本格的に作成する場合はやはり本職のデザイナーさんに依頼した方が良いでしょう。 （それっぽいといったのは今回はそれらのブランディングに関わる画像の作成を省いて、素材画像やCSSでごまかしているからです。） 今回はCSS Designerという仮想CSSエディターの商材を想定してランディングページを作成しました。 作ったページ全体のサンプルはこちら
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デジタル庁デザインシステムβ版
Get started – GOV.UK Design System
2,168 Free Illustrations - Download in SVG, PNG, EPS | IconScout
PrimeReact | React UI Component Library
23 Best React UI Component Libraries And Frameworks | HackerNoon
Brushup（ブラッシュアップ）- 制作物のフィードバックに生産性を
Angular Material - Part 4: Data Table - CodingTheSmartWay.com
ユーザ規模の変化に応じた最適なUX設計とは