Slide 1
Slide 1 text
©iCARE Co., Ltd All rights reserved
1
Similarities Between Building Construction
and Software Design Systems
iCARE Co.,Ltd UI Designer
Shota Kugawa
Slide 2
Slide 2 text
©iCARE Co., Ltd All rights reserved
Self Introduction
2
● Shota Kugawa
● Twitter ID: @zouzei8to10
● note
○ デザインシステムを創りはじめました。
○ デザインシステムとは引き出しを設計することである
○ デザインシステム of ダッチデザイン
○ もうかりまっか？デザインシステム
● Event LT
○ デザイナーとフロントエンドエンジニアを繋ぐ技術(held by iCARE Co., Ltd.)
○ UI/UXデザイナーLT会(held by RAKUS Co., Ltd.)
Hi! everyone
I’m a User Interface Designer from iCARE
Slide 3
Slide 3 text
©iCARE Co., Ltd All rights reserved
Our Main Product
Health Management SaaS
named“ケアリィ”
Slide 4
Slide 4 text
©iCARE Co., Ltd All rights reserved
Consultation and Advising
with Chats
For employees
Total Health Information Management
For personnels and occupational physicians
Total Company
Health Support
Employees
Medical staffs
Personnels
and
occupational
physicians
Chat Cloud
Health
checkups
Stress
Check
Overwork
OverTime
Summary of Carely
Slide 5
Slide 5 text
©iCARE Co., Ltd All rights reserved
Clients
Slide 6
Slide 6 text
©iCARE Co., Ltd All rights reserved
6
Main topic
Similarities Between Building Construction
and
Software Design Systems
Slide 7
Slide 7 text
©iCARE Co., Ltd All rights reserved
Building construction
Making progress in the construction process with
● blueprint
● roadmap
● tools
● catalog
● heavy machinery
○ and communicate with each craftsperson
Slide 8
Slide 8 text
©iCARE Co., Ltd All rights reserved
We’re building Design systems
Design systems also composed of
● blueprint ( GUI / component / interaction )
● roadmap( roadmap )
● tools( figma / XD / prototyping tool )
● catalog ( Storybook )
○ and communicate with team members
over various communication tools
Slide 9
Slide 9 text
©iCARE Co., Ltd All rights reserved
Today’s viewpoint is
≒
Software Development
Building Construction
Slide 10
Slide 10 text
©iCARE Co., Ltd All rights reserved
Blueprint
Blueprint
● prots documentation for
○ UI parts
○ component
○ screen transition
○ interaction( animation )
○ and design rules and background
Architecture blueprint
Slide 11
Slide 11 text
©iCARE Co., Ltd All rights reserved
Roadmap
Roadmap
● prots milestone
○ research phase
○ design phase
○ definition phase
○ applying phase
○ release phase
roadmap of construction
Slide 12
Slide 12 text
©iCARE Co., Ltd All rights reserved
Catalog
Catalog
● Storybook is like a catalog resisterd
○ color
○ typography
○ button
○ modal
○ interaction
building component
( from MonotaRO)
Slide 13
Slide 13 text
©iCARE Co., Ltd All rights reserved
What a Design Systems can do for your team
● Development while looking at the same goal and same rules
● Mutual understanding between design and engineering
● Creating documents help reduce confusion for newcomers
● Design Systems itself will be also the product of your team
Slide 14
Slide 14 text
©iCARE Co., Ltd All rights reserved
and,
Design Systems take me here to
get a chance to present in this event!
Once again, Thank you!
Slide 15
Slide 15 text
©iCARE Co., Ltd All rights reserved
\ We're Hiring👍 /
https://herp.careers/v1/icare
👇Recruit(HERP)
https://note.icare-carely.co.jp/
👇 official note