ひとりで Atomic Workflow を試してみた

103f8905fec492ca00ff4849815f68bb?s=47 ksyunnnn
September 13, 2019
Design
2
850

ひとりで Atomic Workflow を試してみた

https://dist.connpass.com/event/144496/

103f8905fec492ca00ff4849815f68bb?s=128

ksyunnnn

September 13, 2019
Tweet

More Decks by ksyunnnn

See All by ksyunnnn
103f8905fec492ca00ff4849815f68bb?s=48 ksyunnnn
0
1k
103f8905fec492ca00ff4849815f68bb?s=48 ksyunnnn
0
200
103f8905fec492ca00ff4849815f68bb?s=48 ksyunnnn
0
660

Other Decks in Design

See All in Design
2fc9b2f4db2b09257417ddf0415be6a0?s=48 ikukamiya
0
300
0eb7b7e396243e93a186ba20649d9aa6?s=48 akiramotomura
3
170
Cf9808b306096a913709da756edeb665?s=48 uxevents
0
100
07e2c6335be6197e2b2c9c8607ecb0ba?s=48 cassidypierce
0
410
C970be04e110498ee6011bed00e90c23?s=48 airi0817
0
770
633aea3a27016b588cfa67cce4df7f15?s=48 kimurakei
0
150
8b8d433ca23ddb6d5c1949e121b57383?s=48 karte
1
370
003ca3e9ecb038b73fd153efb08ee005?s=48 thompmor
0
220
6715312320f3bd88463ad96db1f13866?s=48 ryusukekogetsu
2
4.4k
37228dc025342eeadeb18bf1c2976a7a?s=48 fixel_admin
1
430
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
0
380
03b94ab7c6fc1a56632bd27feceb1817?s=48 cduc
0
130

Featured

See All Featured
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
5
300
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
775
240k
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
479
150k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
8.7k
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
4
280
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
6
730
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
19
990
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
399
20k
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
297
31k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
87
3.2k
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
326
35k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
216
16k

Transcript

  1. ひとりで Atomic Workflow を試してみた #dist28 こばしゅん@ksyunnnn

  2. デザインはチーム全員でやったほうがよさそう 結論：

  3. UXデザイン VISUALデザイン 開発 よくあるワークフロー このあたりでビジネスサイドを含めた関係者との議論がある

  4. UXデザイン VISUALデザイン 開発 よくあるワークフロー 関係者の反応の推移

  5. UXデザイン VISUALデザイン 開発 よくあるワークフロー 関係者の反応の推移

  6. UXデザイン VISUALデザイン 開発 よくあるワークフロー 関係者の反応の推移

  7. UXデザイン VISUALデザイン 開発 よくあるワークフロー 関係者の反応の推移

  8. UXデザイン VISUALデザイン 開発 よくあるワークフロー 関係者の反応の推移

  9. なぜこんなことが起きてしまうのか？

  10. Design is too important to be left to designers. デザインはデザイナーだけに任せるには重要すぎる

  11. (Web)デザインはデザイナーだけに任せるには重要すぎる 速度、画面サイズ、環境、技術的能力、フォームファクター、人間工 学、ユーザビリティ、アクセシビリティ、コンテキスト、ユーザーの好 み、柔軟性、ネットワークの影響、インタラクション、モーション、人 間工学、色とテキストのレンダリング、画素密度、スクロール性能、デ バイスとブラウザの癖、ユーザー設定、etc

  12. UXデザイン VISUALデザイン 開発 よくあるワークフロー デザインフェーズだけであらゆるファクターを 検討しきることはかなりむずかしい

  13. http://atomicdesign.bradfrost.com/chapter-4/

  14. http://atomicdesign.bradfrost.com/chapter-4/ http://atomicdesign.bradfrost.com/chapter-4/

  15. http://atomicdesign.bradfrost.com/chapter-4/ http://atomicdesign.bradfrost.com/chapter-4/

  16. UXデザイン VISUALデザイン 開発 Atomic Workflow すぐ共有！ すぐ共有！ すぐ実装！ すぐFB！ すぐFB！

    全部(ほぼ)同時進行でやる。すぐにブラウザに起こす。全員で確認する。

  17. ひとりで Atomic Workflow を試してみた #dist28 こばしゅん@ksyunnnn

  18. #dist28 こばしゅん@ksyunnnn フリーのフロントエンドエンジニア デザイナー1人/バックエンド1人/フロント自分1人みたいな仕事が多い React完全に理解した

  19. こんなサービスを作ってみています -「ひさしぶり〜、今度飲もな！」 あらゆる飲む飲む詐欺をなくし 飲みに行くことができる唯一の方法 Beerup Figma React

  20. Atomic Workflow実践で意識したこと - UX - VISUAL - 開発 の実装は明確に分業(ひとりだったので特に) -

    デザインができたらすぐ実装 - 実装の単位はOrganisms(※)くらいの単位を目安 - 確認(意思決定)は必ずブラウザ上で行う ※Atomic Designにおけるコンポーネントの粒度

  21. 実践した所感 - デザイン後にUIパターンや性質上の考慮漏れ、懸念に素早く気づけた - 読込中の表示は？nullの表示は？ダイアログのインタラクションは？etc - 小さな単位で確認のサイクルを回しているので、修正が小さく済んだ - ブラウザでの確認が早い段階でできるので、フィードバックがしやすかった ポジティブ

  22. 実践した所感 - (ひとりで実践じゃわかることすくない...（?!）)) - 小さい粒度の実装でも、変更があるかもと思うと精神衛生上よくない - チーム内での対話がかなり細かく必要そう ネガティブ

  23. デザインはチーム全員でやったほうがよさそう 結論： デザインツールのコラボレーション機能、これからは必須ですね〜

  24. ひとりで Atomic Workflow を試してみた #dist28 こばしゅん@ksyunnnn