html5 for designers (html5 時代の web デザイナーの新常識)

HTML5 for DesignersSlides @ Firefox DevCon 2011 in Osaka

by Tomoya ASAI (dynamis)

Web デザイナーの新常識

～ HTML5時代の CSS..............デザインとセキュリティ～

サイト、ツール、ライブラリなどは別スライドで紹介:

http://dynamis.jp/r

早期公開リクエストが多かったので現状公開今週中に一度更新予定

トークセッションで拾うつもりが拾えなかったネタなど少し追加予定スライドだけ見る人用に加筆修正も

about:me Tomoya ASAI (dynamis) Mozilla Japan - Technical mktg. http://dynamis.jp/ http://facebook.com/dynamis http://twitter.com/dynamitter dynamis mozilla-japan.org@

dynamis (古代ギリシャ語 dunamis) は「でゅなみす」と読んでください

Agenda

about:Mozilla Firefox.Future CSS Design Mobile Web Animation Security

Agenda

about:mozilla.com brain .org heart

about:Firefox Firefox の意義

オープンで適切な実装の提供 Firefox の目的

公共のリソースとしてのインターネットの発展を促進

.com brains - 会社組織営利企業同様の開発スタイル社員は全世界で 300 人程度

.org heart - 非営利組織より良いインターネット環境へ 1000 人以上がコードを貢献

about:Mozilla

マニフェスト: http://www.mozilla.org/about/manifesto.ja.html

Firefox.FutureRapid Release...

Rapid Release リリースプロセスを変更

スケジュールベース Aurora チャンネルを新設

Nightly, Aurora, Beta, Release

http://blog.mozilla.com/channels/

アドオン互換性について今後はデフォルトで互換

対応バージョン書き換え不要問題のある場合だけ非互換

機械的 & フィードバックで検出

https://dev.mozilla.jp/2011/04/add-on-compatibility-rapid-releases/

自動更新について Firefox 4 以降は自動更新

起動時に自動バージョンアップ

Firefox 4.0.1 の次は 5 の予定セキュリティや安定性の更新は機能の更新と共に提供

緊急セキュリティリリース除く

来週 Beta チャンネルへ 6/21 リリース予定

Firefox 5

5/14 時点では Aurora チャンネル、来週 Beta にhttps://developer.mozilla.org/en/Firefox_5_for_developers

ユーザインターフェイス基本的には変更なしリリースチャネル変更機能

「Firefox について」画面に

パフォーマンス非表示タブのタイマー間隔長く Canvas の一部高速化 querySelector 高速化 HTTP 通信周りの高速化

https://developer.mozilla.org/en/Firefox_5_for_developers

Web Technologies CSS Animations サポート

期限数時間前にチェックイン...

setTimeout() を最短 4ms に XHR の loadend イベント createImageData() サポート

再来週 Aurora チャンネルへ 8 月リリース見込みユーザ向けの変更は少ない Web 開発者向けの変更

Firefox 6

5/7 時点では Nightly チャンネルのビルド

Web Technologies text-decoration 系スタイルハイフネーションサポート matchMedia() サポート

その他 URL バーでドメインを強調表示マイクロサマリーサポート廃止

使ってる人いますか？

アプリプラットフォームアプリをインストールアプリに応じた UI

アカウントマネージャサイトのアカウントを管理

コンテンツプロセス分離

Firefox 7, 8, 9...

5/7 時点ではデザイン中やプロジェクトレポジトリでの開発

アプリ in Firefox Web アプリボタン？ Web アプリダッシュボード？まだまだデザイン検討中...

注意: スクリーンショットは現時点で提案されている UI の一部です

ページ共有 (リンク送信) F1 プロジェクトの統合 Twitter, Facebook などで簡単にリンクを共有できるように

https://wiki.mozilla.org/Labs/F1

新グラフィックス API Azure Project 2D Graphics API を置き換え

Cairo から Azure へ GPU をフル活用できる API に Windows 以外でも高速に

http://blog.mozilla.com/joe/2011/04/26/introducing-the-azure-project/

新 JavaScript エンジン Incremental & Generational GC

GC 時間の短縮化型推測 JIT エンジン

型チェックを減らして高速に IonMonkey

中間言語を最適化しやすく変更

http://blog.mozilla.com/dmandelin/2011/04/22/mozilla-javascript-2011/

Web をより豊かに text-overflow: ellipsis Full-screen API Media Capture API Server-Sent Dom Events サイト別データ管理 UI などなど...

and more... アドオンパフォーマンス情報ユーザプロファイル初期化 about:memory 刷新開発者ツールの改善 ECMAScript Harmony

CSS Design

CSS DesignWeb FontsFont ControlLess ImagesCSS Transforms

Web Fonts ダウンロードフォント Firefox 3.6 からは WOFF も

IE9 なども WOFF サポート iPhone は WOFF 未サポート WOFF: Web用圧縮フォント

Firefox3.5~ https://developer.mozilla.org/ja/CSS/@font-face

デコもじ

http://decomoji.jp/

日本初の WebFont サービス http://decomoji.jp/

字游工房のフォントもある！

JavaScript 埋め込み型 ¥315/月～と低価格

webfonts.fonts.com 多言語対応 WebFont サービス http://webfonts.fonts.com/

10,000 以上のフォント日本語フォントも 100 以上

JavaScript 埋め込み型 25,000 view/30days まで無料

http://webfonts.fonts.com/

Google Web Font API 現在 100 種類以上サポート

開始当初は 18 しかなかった

日本語フォントはないメニューなど限られた用途で

サブセットも指定可能ファイルサイズを最小限に

Web Font API の使い方

http://code.google.com/intl/ja/apis/webfonts/docs/getting_started.html

<html><head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> <style> body { font-family: 'Tangerine', serif; } </style></head><body> <h1>Firefox Developer Conference 2011 in Osaka!</h1></body></html>

ファイルサイズを小さく

サブセットフォントをカテゴリーで指定http://fonts.googleapis.com/css?family=Philosopher&subset=latin

使用する文字列を指定して最小限のフォントを取得http://fonts.googleapis.com/css?family=Inconsolata&text=Hello

WOFF フォントに変換 WOFF コンバータ

http://musashi.or.tv/woffconv.htm Windows, Mac アプリ

@font-face kit generator http://www.fontsquirrel.com/fontface/generator

Web サービス (サイズ制限あり)

サブセットフォントを作る必要文字だけ取り出して軽量化 @font-face kit generator

Expert モードの Subsetting でCustom Subsetting を指定する

その他のフォントツール例 http://sourceforge.net/projects/fonttools/

http://fonts.philip.html5.org/

Web Fonts の使い方@font-face { /* IE8 以前用 EOT フォント設定 (最初に) */ font-family: Sawarabi; src: url(Sawarabi.eot) /* IE8 以前は format() 非サポート */;}@font-face { /* WOFF 非対応ブラウザ向けフォント設定 */ font-family: Sawarabi; src: url(Sawarabi.otf) format("opentype");}@font-face { /* WOFF 対応ブラウザには WOFF を */ font-family: Sawarabi; src: url(Sawarabi.woff) format("woff");}body { font-family: Sawarabi, sans-serif; }

Firefox3.5~ http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/

Font Control Features CSS3 font-variant フォントの詳細な機能を制御

分数、桁揃え、合字、旧字体... 仕様のエディタ自身による実装

実装者本人の解説: http://people.mozilla.org/~jdaggett/webfontsfuture.pdf

http://hacks.mozilla.org/2009/10/font-control-for-designers/

IE9 ヤバイ？一部フォントの文字がくっついて非常に読みにくくなる問題 MS P ゴシックなど一部のビットマップフォント

標準モード使用時に発生

http://freesoft.tvbok.com/tips/net_tips/ie9_doctype.html

IE9 フツー Web デザイナーへの配慮はないが DirectWrite 標準の描画結果 MS P ゴシック等と相性が悪い MS P ゴシックは GDI 向け... その為の Meiryo フォント...

http://subtech.g.hatena.ne.jp/mayuki/20110510/1304997242

Internet Explorer 9

太字だと完全に隣と合体 (＞＜)

FIrefox イイネ！ DirectWrite 使用時も問題なし

ビットマップフォントではSubpixel Positioning しない

そのままじゃユーザが困るよね

https://bugzilla.mozilla.org/show_bug.cgi?id=574907

Internet Explorer 9

Firefox 4

Internet Explorer 9

Firefox 4

Firefox なら太字でも結合しない

CSS で画像を作る角丸、影、グラデーション etc...

ドラえもんも CSS で描けるボタンなどは CSS で作ろう

ファイル数もサイズも手間も特にモバイルサイトにオススメ

http://shopdd.blog51.fc2.com/blog-entry-932.html

CSS Gradients 線形 or 放射グラデーション繰り返し(縞模様)なども可能 CSS3 Images で定義

背景画像として利用する -webkit- は独自構文注意

Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

CSS Gradients<p><a class="gradationbutton" href="http://hacks.mozilla.org"> <span>hacks.mozilla.org</span><br/> <span class="info">HTML5 の最新情報はこちら!</span></a></p><style>.gradationbutton { /* ...割愛... */ color: #ffffff; text-shadow: -1px -1px 2px #777777; /* エンボス */ -moz-border-radius: 10px; border-radius: 10px; /* 角丸 */ background: #99ca28; /* 非サポートブラウザ向け Fallback */ background: -moz-linear-gradient(top, #CFE782 0%, #9BCB2A 2%, #5DA331 97%, #659635 100%);}.info { font-weight: normal; }</style>

http://dynamis.jp/demo/css-gradients/

CSS Gradient 生成ツール人が書く気のしないスタイルは大抵ツールが...CSS Button Maker

http://css-tricks.com/examples/ButtonMaker/CSS3 Gradient Generator

http://gradients.glrzad.com/CSS Pattern Generator

http://www.patternify.com/Background Maker

http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html

Multiple Backgrounds 背景画像を複数重ねて表示グラデーションと重ねると便利

フェードアウト効果などにも画像の数やサイズ削減にも有効 -webkit- は 5.0.2 まで独自構文

Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

Multiple Backgrounds<style>.fadedflower { background: /* 左が白、右が無色透明となるグラデーション */ -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), /* その後ろに表示する画像 */ url(flowers-pattern.jpg);}</style><div class="fadedflower"> </div>

http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

CSS Transform 任意の要素を変形させる

拡大縮小、回転、移動、歪み 3D 変形は現状 WebKit のみ Firefox も 3D 変形対応予定 IE8 は Matrix Transform

https://developer.mozilla.org/en/CSS/-moz-transform

CSS Transform 使用例<iframe id="skewframe" width="800" height="600" src="http://mozilla.jp/firefox/"></iframe><style>#skewframe { /* 150px 右に移動し、左下を原点として 10°歪める*/ -moz-transform: skewx(10deg) translatex(150px); -moz-transform-origin: bottom left;}</style>

https://developer.mozilla.org/En/CSS/Using_CSS_transforms

Mobile Web Design

Mobile Web DesignMedia QueriesViewportDevice Pixel Rate

Media Queries デバイスに応じたスタイル指定

画面サイズ、解像度、縦横... Responsive Web Design

https://developer.mozilla.org/en/CSS/Media_queries

画面サイズ別 CSS を書く<style>/* @media 規則で画面サイズ別ルールを記述 */@media only screen and (min-width: 481px) { #header { backgournd: url(head.png); /* 大きい画像 */ }}@media only screen and (max-width: 480px) { #header { backgournd: url(head-small.png); /* 小さい画像 */ }}</style><link rel="stylesheet" type="text/css" href="pc.css" media="only screen and (min-width:481px)"><link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-width:480px)">

cm など物理サイズは iPhone などで正しくないので注意

Responsive Web Design ピクセル単位で調整しない

Web はそもそもピクセル制御の適するメディアではない

画面サイズなどに応じて適切に

http://www.alistapart.com/articles/responsive-web-design/

Responsive Web Design ピクセル単位で調整しない

Web はそもそもピクセル制御の適するメディアではない

画面サイズなどに応じて適切に

背景画像も左右切り取り

横幅に応じてサイズを変更

http://colly.com/

横幅に応じて要素数を増減

ユーザのズーム禁止も可能表示領域の CSS ピクセル幅

iPhone はデフォルト 980px Firefox for Mobile は 800px

https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

viewport を指定する<meta name="viewport" content="device-width, initial-scale=1.0">

<meta name="viewport" content="width=500, initial-scale=1.0"/>

<meta name="viewport" content="width=device-width,user-scalable=no">

古い WebKit は上書き前のスタイルで指定した画像も DL してしまうバグあり

Device Pixel Rate CSS と端末画面のピクセル比

iPhone 4 以降の高解像度端末では 1:1.5 や 1:2 の端末が多い

拡大されてぼやけないようにベクター画像 SVG を使う高解像度画像を読み込ませる

高解像度画像の読み込み/* 高解像度ディスプレイ用スタイル *//* 最小/最大(min/max)と接頭辞(-moz-/-webkit-)の順に注意 */header { /* 通常サイズの画像 */ background: url(head.png);}@mediaonly screen and (min--moz-device-pixel-ratio: 1.5),only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (min-device-pixel-ratio: 1.5) { header { /* 解像度(サイズ)2倍の画像 */ background: url(head-2x.png); }}

古い WebKit は上書き前のスタイルで指定した画像も DL してしまうバグあり

おまけ: CSS3 calc() サイズを計算式で指定可能 width: -moz-calc(20% - 1rem)

-moz- prefix に注意 IE9 は no prefix 実装

自称コンサバ実装の IE9 も積極的にサポートしてますね...

おまけ: CSS3 calc()/* margin 分を考慮した左右の分割を行う例 */#main { width: 75%; margin-right: 1rem;}#side { width: -moz-calc(25% - 1rem); width: calc(25% - 1rem); /* prefix なし忘れずに */}/* rem はルート要素の font-size (Firefox 3.6̃) */

http://hacks.mozilla.org/2010/06/css3-calc/

Animation

AnimationJavaScript AnimationCanvas 2DSVG & SMILCSS TransisionsCSS AnimationsWebGL

JavaScript Animation setTimeout でループ処理多数のタイマー回すと重くなるバックグラウンドでも重くなる

JS Timer 間隔の変更 setTimeout Timer の最小値変更

HTML5 で 4ms と規定された IE9, Fx5, WebKit: 4ms に IE9 は Canvas 操作時短い(バグ)

IE9 バッテリー動作時 10~15ms Firefox 5, Chrome 11 以降アクティブタブ以外は最大1回/秒

setTimeout()/setInterval() などの時間間隔に依存しないように

RequestAnimationFrame 無駄なく省電力アニメーション

setTimeout() だと最大 250fps 実際のディスプレイは 60fps...

Transition などと JS の同期 JS 以外のアニメーションと同期

http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html

RequestAnimationFrame 使い方は極めてシンプル

setTimeou() の代わりにmozRequestAnimationFrame()

Date.now() の代わりにmozAnimationStartTime とevent.timeStamp

RequestAnimationFreme 使用法var d = document.getElementById("d"); // 動かす対象要素var start = window.mozAnimationStartTime;function step(event) { var progress = event.timeStamp - start; d.style.left = Math.min(progress/10, 200) + "px"; if (progress < 2000) { window.mozRequestAnimationFrame(); } else { window.removeEventListener("MozBeforePaint", step, false); }}// フレームを再描画する前に実行する関数を設定window.addEventListener("MozBeforePaint", step, false);// 次のフレーム再描画まで待って上記で設定した関数を実行window.mozRequestAnimationFrame();

Canvas 2D JavaScript API で描画

点、線、弧、矩形、影、画像、テキストなど自由に描画

https://developer.mozilla.org/en/Canvas_tutorial

Canvas 使用時の注意 Same Origin Policy による制約 toDataURL(), getImageData()

他サイトの画像を DrawImage()した後で使用するとエラー

measureText() 他サイトのフォントを使用する場合に呼び出すとエラー

Canvas とパフォーマンス細かく編集より一度に編集

小さな領域を何度も書き換えるより一度に大きな領域を描画

レイヤーを重ねて使う激しく動くモノと動きの少ない背景がある場合レイヤーに分離

Canvas とパフォーマンス位置座表は整数値で保持

浮動小数点計算は遅い Transitions との同時使用は注意

GPU 描画モードとの切り替えオーバーヘッドに要注意

SVG Animation SVG のアニメーション機能

<animate>, <set> などで定義 GPU を用いた高速処理 IE9 のみ未サポート

SVG を使ったアニメとは別

http://people.mozilla.com/~dynamis/demo/smil/<svg ... xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."> ... <ellipse cx="290" cy="200" rx="80" ry="80">  <animate attributeType="CSS" attributeName="fill" dur="5s" values="#ff8; #f88; #f8f; #88f; #8ff; #8f8" keyTimes="0; .2; .4; .6; .8; 1" repeatCount="indefinite"/> </ellipse> ... <g id="R1" transform="translate(200, 200)"> <ellipse id="EL" cx="0" cy="0" rx="100" ry="30" ...> <animateTransform attributeName="transform" type="rotate" dur="7s" from="0" to="360" repeatCount="indefinite"/> <animate attributeName="cx" dur="8s" values="-20; 120; -20" keyTimes="0; .5; 1" repeatCount="indefinite"/> <animate attributeName="ry" dur="3s" values="10; 60; 10" keyTimes="0; .5; 1" repeatCount="indefinite"/> </ellipse> </g> <use xlink:href="#R1" transform="rotate(30, 300, 200)"/> ...</svg>

CSS Transitions スタイル遷移をなめらかに簡単にアニメーションできる GPU を用いた高速処理

Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions

CSS Transitions 使用例#somebox { color: black; background-color: yellow; /* すべてのスタイル変化を2秒かけて開始をなめらかに */ -moz-transition: all 2s ease-in; transition: all 2s ease-in;}#somebox:hover { /* マウスオーバーで配色、サイズ、角度を変化 */ color: white; background-color: red; -moz-transform: rotate(-60deg) scale(1.5); transform: rotate(-60deg) scale(1.5);}

http://hacks.mozilla.org/2010/07/firefox4-beta2/

CSS Animations Firefox 5 からサポート手で書くのは結構面倒です

今日は詳細割愛します

https://developer.mozilla.org/en/CSS/CSS_animations

WebGL <Canvas> の 3D コンテキスト OpenGL ES2.0 相当の API

携帯用 GPU も広くサポート

http://www.khronos.org/webgl/

http://webos-goodies.jp/archives/getting_started_with_webgl.html

<canvas id="glcanvas" width="640" height="480"/><script type="text/javascript">var canvas = document.getElementById("glcanvas");// WebGL コンテキストを取得// コンテキスト名は仕様確定まで "experimental-webgl"var gl = canvas.getContext("webgl") ¦¦ canvas.getContext("experimantal-webgl");if (gl) { // ... OpenGL 同様にいろいろ描画処理 ... // Int32Array など固定型配列も使って高速演算可能}</script>

WebGL アブナイ？他サイト画像の解析ができる？

明示的 CORS 許可サイトの画像以外 WebGL 使用不可にする？

GPU ドライバのバグを突ける？その為のブラックリスト対策コードの強化も続ける

http://blog.jprosevear.org/2011/05/13/webgl-security/

アニメーション使い分け Canvas

コードさえ書けば何でも可能 SVG & SMIL

オブジェクト操作に便利 CSS Transitions/Animations

ブラウザが自動で高速処理 WebGL

高速アニメーションの最終兵器

Canvas が適した処理ピクセル単位の描画・編集

領域に比例して重くなる！細かく高速なアニメーションコード書くのは面倒画像のコピー (drawImage) など限られた処理だけ GPU 活用

SVG が適した処理拡大しても滑らかな画像フィルタ処理や切り抜きも簡単ユーザインタラクティブな処理 DOM イベントに対する処理 hover イベントには特に便利

CSS が適した処理簡単な事は簡単に書けるスタイル変化のアニメーション回転や歪みは Transition GPU 処理で高速化も

WebGL が適した処理 3D グラフィックゲームなどでの高速処理 Open GL の知識が必要

Security

SecurityHTTP Strict Transport SecurityX-Frame-OptionsContent Security PolicyCross-Origin Resource SharingDo Not Track

HTTP Strict Transport Security HTTPS での接続を要求

HTTPS 認証ページなどで使う HTTP 接続禁止秒数を指定する

簡単なのですぐにでも採用を非対応ブラウザへの副作用なし古い Firefox は拡張機能で...

http://hacks.mozilla.org/2010/08/firefox-4-http-strict-transport-security-force-https/

HSTS ヘッダ送信例

注: HTTPS ページでのみ有効 HTTP ページで送信しても無効

// 86400秒はこのサイトに HTTP での接続を禁止Strict-Transport-Security: max-age=86400

// 送信元サイトのサブドメインも HTTP 接続を禁止するStrict-Transport-Security: max-age=86400; includeSubdomains

X-Frame-Options <iframe> への埋め込み禁止埋め込まれたくないページでX-Frame-Options: ヘッダ出力値は DENY, SAMEORIGIN

クリックジャッキング対策等に

Fx 3.6.9～ https://developer.mozilla.org/en/The_X-FRAME-OPTIONS_response_header

// Apache の設定でサイト全体に設定する場合:Header always append X-Frame-Options SAMEORIGIN

Content Security Policy 次世代セキュリティポリシー

許可ドメインとポートを指定 Same Origin Policy はもう古い

画像や JS の読み込み先も制御 XSS などの攻撃を防止

WebKit も実装取り組み中

https://developer.mozilla.org/ja/Introducing_Content_Security_Policy

CSP ヘッダ送信例// 全コンテンツを同一ドメインのみ (サブドメインも不可)X-Content-Security-Policy: allow 'self'

// 自身と dynamis.jp のサブドメインのみ許可X-Content-Security-Policy: allow 'self' *.dynamis.jp

// secure.mozilla.jp からの読み込みは HTTPS のみX-Content-Security-Policy: allow https://secure.mozilla.jp/

https://developer.mozilla.org/en/Security/CSP/Using_Content_Security_Policy

CSP ヘッダ送信例

// 自身と *.mail.jp は全許可、他サイトは画像のみに制限// allow 書いたので script-src などは書かずとも制限済みX-Content-Security-Policy: allow 'self' *.mail.jp; img-src *

// 画像は任意サイト、メディアファイルと JS は指定サイトに限定X-Content-Security-Policy: allow 'self'; img-src *; (実際は改行なし) media-src video.tld audio.tld; (実際は改行なし) script-src script.tld;

https://developer.mozilla.org/en/Security/CSP/Using_Content_Security_Policy

Cross-Origin Resource Sharing 他ドメインからの読み込み許可

Cross-Site XMLHttpRequest

// dynamis.jp のページからはこのサイトの読み込み許可Access-Control-Allow-Origin: http://dynamis.jp

https://developer.mozilla.org/en/http_access_control

// 任意サイトからの読み込みを許可 (公開 API などに)Access-Control-Allow-Origin: *

Security 機能のまとめ HTTP Strict Transport Security

HTTPS に接続を限定 X-Frame-Options

クロスドメインフレーム禁止 Content Security Policy

JS や画像なども読み込み元制限 Cross-Origin Resource Sharing

クロスサイト読み込みを許可

ユーザ追跡拒否ヘッダ Do-Not-Track (DNT:1) ヘッダ

ユーザ追跡拒否の意思表示 IE も Safari も対応 Chrome だけ非対応...

受け取ったらユーザ追跡禁止

Any Question ?

html5 for designers (html5 時代の web デザイナーの新常識)

Technology

what web designers could learn from print designers

caso designers sac

radiotron designers handbook

tokyo designers week in london 2014...

html5 pour les web designers ed1...

game designers

top designers

html5時代のwebデザイナーこれからの生きる道...

デザイナーとしてのhtml5への向き合い方 |...

designers gráficos

revista 4 designers

ifm designers 2012

usability designers

07 designers

moment designers

ippuc + designers

negotiation for designers

html5 pour les web designers -...

eco designers

week03 users, designers, and user designers