Macaron | Visual component editor for Web developmentMacaron is an open-source UI design tool to create and maintain Web Components.
Devices from Design at Meta
Meta supports a diverse audience around the world and an equally diverse set of devices. To emphasize that in our design mocks, we redrew a range of devices to show the global diversity of the people using our products. Many of the devices come with a bitmap of the device with and without shadows. Please do not repackage and redistribute these as your own. Please see disclaimer for full details.
複雑な乗換体験を直感的に！ 乗換案内アプリのデザイン
これらを鑑みると、 アプリの画面上では乗り入れ箇所で路線色が変わり、誤って降車するリスクがある 行き先が異なる複数の乗客に対して、駅員さんは「直通運転」であることはアナウンスできても「乗換不要」という案内はできない アプリの画面を見ているのは本人のみ、かつ目的地まで目視できるので「乗換不要」と伝える方が有益 このような経緯から、あえて「乗換不要」としています。 手法は大事、ユーザー視点はもっと大事 文言はサービス内で表現のズレが起きないよう、用語辞典を作成しています。「ルート/経路」「電車/列車/鉄道」など。ただし意味が伝わりづらい箇所では、表現のズレを許容しています。注意しなければならないのは、このようなフレームワークや手法などを優先して、ユーザー視点を見失わないようにすることです。 ワイヤとビジュアルを並行して行うことでUX品質を高める 路線情報チームのデザイナーは、ワイヤフレームとビ
課金 UI まとめてみた｜あき - 良いもの作って正しく届ける
売上を伸ばしたい。 課金率を伸ばしたい。 でも、難しい！ コンバージョンするサブスク UI を勉強したかったので、いくつかのアプリをスクショ。あたまの整理にまとめたのでアップ。 Web の LPO はかなりノウハウ系記事がありますが、アプリのサブスク UI は、まだまだ少ない気がします。誰かの参考になれば嬉しいです。 まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです。 ※ スクショは少し前に撮影したものなので、一部古くなってるかもしれません。 UI パターン 1. ミニマム型 2. プラン比較型 3. 横スクロール型 4. リスト型 5. ロング LP 型 規約表示パターン 1. 固定表示型 2. 隠しスクロール型 3. フッター型 4. 遷移型 サービスパターン 1. 探索財 2. 経験財 3. 信頼材 UI パターン1. ミニマム型最低限
新卒デザイナーのデザインブラッシュアップ方法 | remark
デザイン事務所にてアートディレクターとして企業ブランディングを中心に広告、商品企画、プロダクト開発、Webプロモーションなどに従事。自分たちの働き方もデザインの一部と捉え、自らのほしい未来をつくるために2015年9月ツクルバに参画。Web、グラフィックなどツクルバに関わるデザイン業務を担当。[柴田のインタビュー記事](https://studios.tsukuruba.com/remark/1524649191951) まずは自由に作ってもらう 円香：バナーできたので見ていただいてもよいですか〜。 柴田：これ、CLASKA（イベントの会場）ってのがビジュアルから伝わってこないのだけど、素材これしかないの？ 円香：これしかないんす…公式のビジュアルがこれで 柴田：ならしょうがないな…全然わからん。CLASKA側からこれ使ってくれって？ 円香：絶対これってわけでないとは思いますが、送られてきた
カルチャーの違いを考慮したデザインのポイント
様々なもののデジタル化が進む中で、デザイナーの役割も大きく変化し始めている。 特にインターネットを介したサービスにおいては「design, Design, DESIGNの違いを知っていますか?」でも紹介されている通り、世界中の不特定多数のユーザーを念頭にデザインしなければならない時代になってきている。 それは同時に、受け取り側の趣味嗜好や価値観を十分理解した上で、プロダクトやメッセージングを考える必要があるということでもある。デザインコミュニケーションとして、単純に言葉を翻訳しただけでは不十分なのである。 目で表情を伝える日本人、口で表情を伝える欧米人日本と欧米では絵文字の表現方法が大きく異なる。特に日本では「目」を主な表現として利用しているのに対し、欧米では主に「口」の形の違いで感情を伝えている。 この違いの原因の一つが日常生活における人々の生活習慣の違いだろう。 ご存知の通り、花粉症の
ユーザーインターフェイス解剖学・改訂版（公開版）
社内イベントで登壇した際のスライドです。｢ユーザーインターフェイス解剖学｣の改訂版。主に、UIデザインにおいて検討した方がよい／すべき考え方というものを簡単にご紹介しました。
コンポーネント指向フロントエンド開発におけるデザイナーの参画について - Qiita
この記事はドワンゴ AdventCalendar 2017の17日目の記事です。 dwangoアドベントカレンダー17日目を担当させていただきます @ln-north です。デザイナーとして2016年度新卒として入社し、もうすぐ2年になります。 エンジニアさんで埋められるカレンダーの中、ひっそりとデザイナーも参加させていただきます、どうぞお手柔らかに…。 はじめに ここ何年かのWebフロントエンド界隈の動きは非常に大きくそして速く、デザイナーから見ても様々なパラダイムシフトが起こっています。scssやwebpackからHTML5やCSS3まで…本当に大変ですよね。 特に最近はReactやVueなど、 コンポーネント指向 のWebシステム開発が発展を遂げています。Web Componentsなども含め、流れを見てるとおそらくWebはこのコンポーネント指向に向かい、しばらく進んでいくのだろうと
リアルガチにヤバいAMP Start - Qiita
AMP(Accelerated Mobile Pages)がGoogle検索の仕様に加わってからひさしくなりますが、さらなる広がりの予感をAMP Projectがみせております。 ウェブデザインが収束の方向に向かっている BootstrapやMaterial design、Reactなどコンポーネント単位でウェブモジュールをつくっていこうという動きがあります。これは当たり前です。たとえ、オリジナルデザインでウェブサイトを作ろうとしても、パーツの再利用性などを考えることは効率やブランディングの観点からも正しく、みんなそうしてウェブサイトを作ってきたと思います。 2017年現在の現状を俯瞰的にみてみると、仕組みが出来てきたというフェーズに入ってきたのだと思います。 それによって、起こる現象はおそらく２つ。 1. ウェブデザインの２極化が起こる これは安易に想像がつきますね。一つの流れとしては、
デザインのバージョン管理をする世界
僕の同僚のデザイナーはデザインツールにSketchを使っている。デザインは区切りのいいところまで出来ると保存してDropboxで共有してくれる。最近ではGitHubでSketchファイルを管理することも試しているようだ。GitHubで管理することで過去に遡ったり、ほかの人の作業をマージできたりする。ただ、Sketchファイルはプログラムのソースコードのようなテキストファイルではなくバイナリファイルだ。この違いでGitまたはGitHubの便利なものの多くが使えていないんじゃないか。 先日Sketchファイルをテキストファイル(JSON)として管理できるツールを公開したので、どういうモチベーションで作っているのか書いてみようと思う。ツールはまだ完璧ではないが、ぜひ使って意見をもらえたらと…思う 🙇🏻 テキストファイルになるとできることあぁ、デザイン全体のボーダーの色が淡くなったのいつだっけ
本当は怖くない！デザイナーがGitを大好きになった♡５つの理由 - Qiita
（この投稿は2014/04/23に書かれたものです。nanapi TechBlogから転載しました。） こんにちは！もうすっかり春ですね❀ nanapiの永田ゆにこですヾ(°◡°)ﾉﾞ さて、わたしはデザイナー職ですが、使いこなせているか使いこなせていないかはさておき、Gitが大好きです♡ 最初は「難しそう…」と嫌厭する気持ちもありましたが、いまでは苦手意識など吹き飛び大好きに♡ 今回はデザイナーのわたしがGitを大好きになった5つの理由をご紹介したいと思います。 その１：本当はそんなにむずかしくなかったよ！ そもそもGitはなにが便利？! Gitとはバージョン管理システムです。どんなことをやってくれるかというと例えば、同じファイルを複数人で作業しても、Gitがいい感じでひとつにしてくれたり、別の人によって上書きされてしまいそうになると忠告してくれたりします。 ありがちな「同じファイルを触
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンド開発のための Figma
カラーユニバーサルデザイン推奨配色セットガイドブック
ログイン - はてな
移動しました - SmartHR Tech Blog
[しくじり Edition]Backlog リニューアルの舞台裏 / Geeks Who Drink Renewal Design Edition![[しくじり Edition]Backlog リニューアルの舞台裏 / Geeks Who Drink Renewal Design Edition](https://cdn-ak-scissors.b.st-hatena.com/image/square/e440c27fa86b22bf77a958d40ed874a6e07cd0f6/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2Fc127c92404414140bee8f901750003b1%2Fslide_0.jpg%3F8082341)
新着記事