비행기 설계를 왜 통일 해야 할까?
디자인 시스템을 하는 이유
비행기들이 다 용도가 다르다...어떻게 설계하지?
맥락이 다른 페이지와 패턴
경유지까지 아직 멀었다... 언제 수리하지?
디자인 시스템을 적용하는 시점
엔지니어랑 얘기해서 정비해야하는데...어떻게 수리하지?
디자인 시스템을 적용하는 프로세스
비행기 설계가 바뀐걸 어떻게 알리지?
디자인 시스템의 전파
비행기 설계를 왜 통일 해야 할까?
디자인 시스템을 하는 이유
비행기들이 다 용도가 다르다...어떻게 설계하지?
맥락이 다른 페이지와 패턴
경유지까지 아직 멀었다... 언제 수리하지?
디자인 시스템을 적용하는 시점
엔지니어랑 얘기해서 정비해야하는데...어떻게 수리하지?
디자인 시스템을 적용하는 프로세스
비행기 설계가 바뀐걸 어떻게 알리지?
디자인 시스템의 전파
라이트브레인 UX 아카데미 18기 Open Project 입니다.
이번에 소개해 드릴 결과물은 여행 앱 '롯데온 APP – UX/UI 개선 프로젝트'입니다.
지난 UX 아카데미 18기 교육 기간 동안 마이리얼트립조가 만들어 낸 신선한 아이디어를 Rightbrain lab을 통해 공개해 드립니다.라이트브레인 아카데미 수강생들이 어떤 과정을 통해 아이디에이션 하고 또 인사이트와 컨셉을 도출했는지 궁금하시다면 지금 바로 슬라이드쉐어로 내용을 확인하세요.
롯데ON은 롯데 계열사의 통합 e-커머스 앱으로 무시할 수 없는 롯데 유통 계열 인프라와 롯데만의 고객 데이터를 가지고 있습니다.
하지만 '물리적인 통합앱이 아닌 논리적인 통합앱', 'UIUX를 고려하지 않은 앱'등 롯데ON을 향한 비판의 목소리가 들려오고 있으며, 국내 E커머스 시장의 입지의 격차가 벌어지고 있기 때문에 차별화된 UIUX 개선이 필요하다보고 그 개선안을 고민해 보았습니다.
UX 아카데미 ‘라이트브레인 U –
미래의 UXer들을 위한 교육으로 UX전문가로서 성장할 수 있는 발판이 되는 교육입니다. UX에 대한 기초지식이 있는 학생과 직장인들을 대상으로 하며 정규 과정은 보통 15회 강의로 구성됩니다. UX 개념, 필드 리서치, 모델링, 서비스 디자인, 프로토타이핑과 같은 구성으로 UX디자인의 주요 프로세스를 모두 경험하고 최종 결과물을 발표하는 것을 목표로 합니다. 2019년 상반기 배출된 8기부터 아카데미 정글과 함께 UX Academy를 개설하여 보다 전문적이며, 밀도 있는 교육을 UX에 관심 있는 분들에게 제공하고 있습니다.
라이트브레인 UX 아카데미 교육안내
https://ejungle.co.kr/RightbrainUXAcademy
라이트브레인 UX 아카데미 23기 Open Project로 이번에 소개해 드릴 결과물은 대표적인 배달앱인 ‘토스 모바일앱 – UX/UI 개선 프로젝트’입니다.
간편 송금 서비스로 시작한 토스는 토스증권과 토스뱅크를 출시하며 대중화된 종합 금융 플랫폼으로 진화 중입니다.
현재 토스의 이미지인 깔끔함, 편리한, 단순한, 젊음의 이미지를 유지하지만 더 전문적이고 신뢰를 주는 이미지가 필요하다고 보고 UX아카데미 교육과정을 통해 UX/UI 개선을 고민해 보았습니다.
지난 UX 아카데미 23기 교육 기간 동안 토스조가 만들어 낸 신선한 아이디어를 Rightbrain lab을 통해 공개해 드립니다. 라이트브레인 아카데미 수강생들이 어떤 과정을 통해 아이디에이션 하고 또 인사이트와 컨셉을 도출했는지 궁금하시다면 지금 바로 슬라이드쉐어로 내용을 확인하세요.
라이트브레인 UX 아카데미 23기 Open Project로 이번에 소개해 드릴 결과물은 ‘링크드인– UX/UI 개선 프로젝트’입니다.
LinkedIn은 전문적인 네트워킹과 직업 관련 정보를 공유하는 비즈니스 기반의 소셜 미디어 플랫폼입니다. 매년 사용자수가 꾸준히 증가하고 있는 글로벌 서비스인데 미국, 인도 등을 제외하면 높지 않은 사용자 비율에 그중 압도적으로 한국의 링크드인 사용자 수는 적습니다.
기존 링크드인 서비스의 UX/UI 개선으로 한국을 포함한 다양한 나라 사용자들의 서비스 사용성과 편의성을 개선할 방법을 고민해 보았습니다.
지난 UX 아카데미 23기 교육 기간 동안 링크드인 조가 만들어 낸 신선한 아이디어를 Rightbrain lab을 통해 공개해 드립니다. 라이트브레인 아카데미 수강생들이 어떤 과정을 통해 아이디에이션 하고 또 인사이트와 컨셉을 도출했는지 궁금하시다면 지금 바로 슬라이드쉐어로 내용을 확인하세요.
UX 프로젝트를 시작하는 분들을 위해 UX 디자인과 프로젝트방법론에 대한 A부터 Z까지를 간결한 질문들을 중심으로 모두 정리했습니다. (PDF 다운로드 가능)
1. UX 디자인이란?
• UX 디자인은 한 마디로 무엇인가?
• UX 디자인에서 하는 일은?
• UX 디자인이 왜 필요한가?
• UX 디자인의 핵심은?
• UXer들이 알고자 하는 사용자 경험이란 무엇인가?
• UX 디자이너들은 누구인가?
2. UX프로젝트란?
• UX 프로젝트는 무엇이 다른가?
• 왜 UX 프로젝트를 해야 하는가?
• 우리 분야에 대한 경험이 부족한 UXer에게 프로젝트를 맡겨도 되는가?
• UX 프로젝트를 했다가 실패한 경험이 있다. 무엇이 잘못된 건가?
• UX 프로젝트의 일반적인 일정
• UX 프로젝트 계획 시 염두에 두어야 할 5가지
• 컨설팅 업체가 UX 프로젝트를 진행할 때 우리의 역할은 무엇인가?
• 컨설팅 업체가 요구하는 자료가 많은데, 모두 공개해도 되는가?
• 진행중인 UX 프로젝트를 공개하면 어떤 장점이 있는가?
3. 필드리서치
• UXer들은 왜 필드리서치를 하는가?
• 필드리서치와 마케팅 리서치의 차이점은?
• 필드리서치는 누구를, 몇 명이나 대상으로 해야 하나?
• 필드리서치를 할 때, 주의해야 할 사항은?
• 필드리서치 결과를 가지고 바로 디자인하면 안 되는가?
4. UX 모델링
• UX 프로젝트에서 모델링이란 작업을 굳이 해야 하는가?
• 필드리서치 결과를 가지고 가장 빠르게 인사이트를 도출할 수 있는 방법은?
• Persona가 기존의 마케팅 시장세분화와 다른 점은?
• Persona를 통해서 얻을 수 있는 기대효과는?
• 선행연구 프로젝트에 가장 적합한 UX 모델링 방법은?
• Journey Map은 언제나 유효한가?
5. UX 전략
• UX 모델링을 통해서 얻어야 할 최종 결과는?
• UX 프로젝트에서 이야기하는 전략이란?
• UX에서 가치가 중요한 이유는?
• UX 프로젝트에서 얘기하는 가치의 구체적인 구분은?
• UXer들은 새로운 사용자경험을 어떻게 디자인하는가?
• UX 프로젝트에서 사용자 시나리오가 중요한 이유는?
• 사용자 시나리오는 어떻게 활용되는가?
6. 프로토타이핑
• UX 프로젝트에서의 프로토타이핑은 무엇인가?
• 구현충실도(fidelity)를 꼭 낮은 것에서부터 시작해야 하는가?
• 프로토타입 작업 시 사용성 테스트를 거치는 이유는?
• 테스트는 누구를 대상으로 하는 것이 좋은가?
• 테스트는 몇 명이나 하는 것이 좋은가?
• UX 프로젝트에서 이야기하는 테스트 방법에는 어떤 것들이 있나?
의료서비스디자인참고서 Healthcare Design First Aid KitUSABLE 윤
* 주의사항 : 다운로드 받은 후 보세요.
목차
[기고문/인터뷰]
디자인을 통한 수요자 중심의 의료서비스 혁신 - 정지훈 명지병원 IT융합연구소장
서비스디자인과 파괴적 의료혁신 - 배성윤 인제대학교 교수
서비스디자인은 의료산업을 어떻게 도울 수 있을까? - 이은종 한동대학교 교수
의료시스템에서 서비스디자인의 역할 - 조나단 웨스트 HHC 디자이너
왜 병원에 디자인이 필요할까요? - 윤성원 한국디자인진흥원 팀장
공간디자이너로서 서비스디자인을 알아야할 이유 - 노미경 위아카이 대표
IDEO 디자인으로 의료 혁신을 꿈꾸다 - 스테이시 창, IDEO 헬스케어부문 이사
서비스디자인으로 ‘파괴적 혁신’ 이루다 - 바바라 스푸리어, 메이요 클리닉 혁신센터장
[서비스디자인]
산업의 패러다임 변화
디자인의 패러다임 변화
서비스디자인의 정의
서비스디자인의 역사
서비스디자인의 대상과 영역
서비스디자인의 특징
국내 서비스디자인 동향
해외 서비스디자인 동향
[의료서비스]
의료서비스의 정의
수요자 중심 의료서비스
의료서비스의 특성
국가별 의료서비스산업 현황
국내 의료서비스산업 현황
[의료서비스와 디자인]
의료서비스와 디자인 플랫폼
의료서비스디자인 프로세스 가이드라인
[의료서비스디자인 시범사례]
국민건강보험 건강검진 결과서와 서비스디자인의 만남
고객 경험에 기반한 의료서비스디자인
정형외과 외래진료에 대한 서비스디자인
[기타 사례]
Design Bugs Out
의료서비스디자인 혁신사례
-----------------------------------
첫인쇄 2013년 1월30일
발행처 한국디자인진흥원 디자인전략연구실
발행인 이태용
주소 경기도 성남시 분당구 양현로 322
코리아디자인센터 한국디자인진흥원 031-780-2078
웹사이트 한국디자인진흥원 http://www.kidp.or.kr
디자인DB http://www.designdb.com
기획・편집・디자인
planb(서동일 011-9023-1474)
씨디유파트너스(예병은 010-3395-6048)
[문의처]
한국디자인진흥원 디자인전략연구실 김신
031-780-2078 skim@kidp.or.kr
※ 이 보고서는 한국디자인진흥원이 지식경제부 R&D 디자인기반기술개발 사업으로 시행된 [2011 의료기기/환경의 수요자 중심 혁신을 위한 융합형 의료서비스 디자인플랫폼 개발 사업] 의 보고서입니다.
이 내용을 대외적으로 발표할 때에는 반드시 지식경제부에서 시행한 디자인기술개발사업의 결과임을 밝혀야 합니다.
-------------------------------------------------
[의료서비스디자인 관련 참고자료]
1. 의료서비스디자인참고서
http://www.slideshare.net/usableweb/ss-16567992
2. 의료서비스디자인 가이드
http://www.slideshare.net/usableweb/ss-25604521
3. 중소병원 서비스디자인 가이드라인
http://www.slideshare.net/usableweb/ss-25578081
BEVON : IoT Service Design for Electric Vehicle Owners (UIUX)viyana5
<Designer>
Kim Tae Hyeong : taehyeung1@koreatech.ac.kr
Na Ha Young : naviya0408@koreatech.ac.kr
<Description>
Battery diagnostics allow you to view and manage the overall condition of the vehicle.
Also, you can interact with other users through the community as well as the charging convenience and smart key function.
There are many reasons why someone might want to become a UI UX designer. One reason could be to create a better user experience for people using a product.
Another reason could be to improve the design of a website or app. A final reason could be to create new and innovative user interfaces.
There are many reasons why someone might want to become a UI UX designer. One reason could be to create a better user experience for people using a product.
Another reason could be to improve the design of a website or app. A final reason could be to create new and innovative user interfaces.
Trying to build a design system for your project? But still, don't know how to? Then this post gonna teach you how to create the design system for the project!
------------------
Follow me on Instagram to learn more about design
https://www.instagram.com/fazurrehman/
------------------
Understand Design System
A Design System is the single source of truth, which groups all the elements that will allow the teams to design and develop a product even there is lots of benefits to having a design system, but you need to find the right people or company who really need design system or you think you really can solve their business problems by design system!
I will continue the design system in the 2nd post and tell you better understanding and road-map how to build a design system. ⠀
Interested to work with me, let's start working together!
fazurrehman@gmail.com
This presentation was made by me for a basic level UI and UX training in my company. The presentation has also been designed from a UI and UX perspective and has been kept minimalistic. The presentation also contains several other important topics like the work culture in my company, Our process of developing a presentation and a short brief on E commerce platforms.
라이트브레인 UX 아카데미 18기 Open Project 입니다.
이번에 소개해 드릴 결과물은 여행 앱 '롯데온 APP – UX/UI 개선 프로젝트'입니다.
지난 UX 아카데미 18기 교육 기간 동안 마이리얼트립조가 만들어 낸 신선한 아이디어를 Rightbrain lab을 통해 공개해 드립니다.라이트브레인 아카데미 수강생들이 어떤 과정을 통해 아이디에이션 하고 또 인사이트와 컨셉을 도출했는지 궁금하시다면 지금 바로 슬라이드쉐어로 내용을 확인하세요.
롯데ON은 롯데 계열사의 통합 e-커머스 앱으로 무시할 수 없는 롯데 유통 계열 인프라와 롯데만의 고객 데이터를 가지고 있습니다.
하지만 '물리적인 통합앱이 아닌 논리적인 통합앱', 'UIUX를 고려하지 않은 앱'등 롯데ON을 향한 비판의 목소리가 들려오고 있으며, 국내 E커머스 시장의 입지의 격차가 벌어지고 있기 때문에 차별화된 UIUX 개선이 필요하다보고 그 개선안을 고민해 보았습니다.
UX 아카데미 ‘라이트브레인 U –
미래의 UXer들을 위한 교육으로 UX전문가로서 성장할 수 있는 발판이 되는 교육입니다. UX에 대한 기초지식이 있는 학생과 직장인들을 대상으로 하며 정규 과정은 보통 15회 강의로 구성됩니다. UX 개념, 필드 리서치, 모델링, 서비스 디자인, 프로토타이핑과 같은 구성으로 UX디자인의 주요 프로세스를 모두 경험하고 최종 결과물을 발표하는 것을 목표로 합니다. 2019년 상반기 배출된 8기부터 아카데미 정글과 함께 UX Academy를 개설하여 보다 전문적이며, 밀도 있는 교육을 UX에 관심 있는 분들에게 제공하고 있습니다.
라이트브레인 UX 아카데미 교육안내
https://ejungle.co.kr/RightbrainUXAcademy
라이트브레인 UX 아카데미 23기 Open Project로 이번에 소개해 드릴 결과물은 대표적인 배달앱인 ‘토스 모바일앱 – UX/UI 개선 프로젝트’입니다.
간편 송금 서비스로 시작한 토스는 토스증권과 토스뱅크를 출시하며 대중화된 종합 금융 플랫폼으로 진화 중입니다.
현재 토스의 이미지인 깔끔함, 편리한, 단순한, 젊음의 이미지를 유지하지만 더 전문적이고 신뢰를 주는 이미지가 필요하다고 보고 UX아카데미 교육과정을 통해 UX/UI 개선을 고민해 보았습니다.
지난 UX 아카데미 23기 교육 기간 동안 토스조가 만들어 낸 신선한 아이디어를 Rightbrain lab을 통해 공개해 드립니다. 라이트브레인 아카데미 수강생들이 어떤 과정을 통해 아이디에이션 하고 또 인사이트와 컨셉을 도출했는지 궁금하시다면 지금 바로 슬라이드쉐어로 내용을 확인하세요.
라이트브레인 UX 아카데미 23기 Open Project로 이번에 소개해 드릴 결과물은 ‘링크드인– UX/UI 개선 프로젝트’입니다.
LinkedIn은 전문적인 네트워킹과 직업 관련 정보를 공유하는 비즈니스 기반의 소셜 미디어 플랫폼입니다. 매년 사용자수가 꾸준히 증가하고 있는 글로벌 서비스인데 미국, 인도 등을 제외하면 높지 않은 사용자 비율에 그중 압도적으로 한국의 링크드인 사용자 수는 적습니다.
기존 링크드인 서비스의 UX/UI 개선으로 한국을 포함한 다양한 나라 사용자들의 서비스 사용성과 편의성을 개선할 방법을 고민해 보았습니다.
지난 UX 아카데미 23기 교육 기간 동안 링크드인 조가 만들어 낸 신선한 아이디어를 Rightbrain lab을 통해 공개해 드립니다. 라이트브레인 아카데미 수강생들이 어떤 과정을 통해 아이디에이션 하고 또 인사이트와 컨셉을 도출했는지 궁금하시다면 지금 바로 슬라이드쉐어로 내용을 확인하세요.
UX 프로젝트를 시작하는 분들을 위해 UX 디자인과 프로젝트방법론에 대한 A부터 Z까지를 간결한 질문들을 중심으로 모두 정리했습니다. (PDF 다운로드 가능)
1. UX 디자인이란?
• UX 디자인은 한 마디로 무엇인가?
• UX 디자인에서 하는 일은?
• UX 디자인이 왜 필요한가?
• UX 디자인의 핵심은?
• UXer들이 알고자 하는 사용자 경험이란 무엇인가?
• UX 디자이너들은 누구인가?
2. UX프로젝트란?
• UX 프로젝트는 무엇이 다른가?
• 왜 UX 프로젝트를 해야 하는가?
• 우리 분야에 대한 경험이 부족한 UXer에게 프로젝트를 맡겨도 되는가?
• UX 프로젝트를 했다가 실패한 경험이 있다. 무엇이 잘못된 건가?
• UX 프로젝트의 일반적인 일정
• UX 프로젝트 계획 시 염두에 두어야 할 5가지
• 컨설팅 업체가 UX 프로젝트를 진행할 때 우리의 역할은 무엇인가?
• 컨설팅 업체가 요구하는 자료가 많은데, 모두 공개해도 되는가?
• 진행중인 UX 프로젝트를 공개하면 어떤 장점이 있는가?
3. 필드리서치
• UXer들은 왜 필드리서치를 하는가?
• 필드리서치와 마케팅 리서치의 차이점은?
• 필드리서치는 누구를, 몇 명이나 대상으로 해야 하나?
• 필드리서치를 할 때, 주의해야 할 사항은?
• 필드리서치 결과를 가지고 바로 디자인하면 안 되는가?
4. UX 모델링
• UX 프로젝트에서 모델링이란 작업을 굳이 해야 하는가?
• 필드리서치 결과를 가지고 가장 빠르게 인사이트를 도출할 수 있는 방법은?
• Persona가 기존의 마케팅 시장세분화와 다른 점은?
• Persona를 통해서 얻을 수 있는 기대효과는?
• 선행연구 프로젝트에 가장 적합한 UX 모델링 방법은?
• Journey Map은 언제나 유효한가?
5. UX 전략
• UX 모델링을 통해서 얻어야 할 최종 결과는?
• UX 프로젝트에서 이야기하는 전략이란?
• UX에서 가치가 중요한 이유는?
• UX 프로젝트에서 얘기하는 가치의 구체적인 구분은?
• UXer들은 새로운 사용자경험을 어떻게 디자인하는가?
• UX 프로젝트에서 사용자 시나리오가 중요한 이유는?
• 사용자 시나리오는 어떻게 활용되는가?
6. 프로토타이핑
• UX 프로젝트에서의 프로토타이핑은 무엇인가?
• 구현충실도(fidelity)를 꼭 낮은 것에서부터 시작해야 하는가?
• 프로토타입 작업 시 사용성 테스트를 거치는 이유는?
• 테스트는 누구를 대상으로 하는 것이 좋은가?
• 테스트는 몇 명이나 하는 것이 좋은가?
• UX 프로젝트에서 이야기하는 테스트 방법에는 어떤 것들이 있나?
의료서비스디자인참고서 Healthcare Design First Aid KitUSABLE 윤
* 주의사항 : 다운로드 받은 후 보세요.
목차
[기고문/인터뷰]
디자인을 통한 수요자 중심의 의료서비스 혁신 - 정지훈 명지병원 IT융합연구소장
서비스디자인과 파괴적 의료혁신 - 배성윤 인제대학교 교수
서비스디자인은 의료산업을 어떻게 도울 수 있을까? - 이은종 한동대학교 교수
의료시스템에서 서비스디자인의 역할 - 조나단 웨스트 HHC 디자이너
왜 병원에 디자인이 필요할까요? - 윤성원 한국디자인진흥원 팀장
공간디자이너로서 서비스디자인을 알아야할 이유 - 노미경 위아카이 대표
IDEO 디자인으로 의료 혁신을 꿈꾸다 - 스테이시 창, IDEO 헬스케어부문 이사
서비스디자인으로 ‘파괴적 혁신’ 이루다 - 바바라 스푸리어, 메이요 클리닉 혁신센터장
[서비스디자인]
산업의 패러다임 변화
디자인의 패러다임 변화
서비스디자인의 정의
서비스디자인의 역사
서비스디자인의 대상과 영역
서비스디자인의 특징
국내 서비스디자인 동향
해외 서비스디자인 동향
[의료서비스]
의료서비스의 정의
수요자 중심 의료서비스
의료서비스의 특성
국가별 의료서비스산업 현황
국내 의료서비스산업 현황
[의료서비스와 디자인]
의료서비스와 디자인 플랫폼
의료서비스디자인 프로세스 가이드라인
[의료서비스디자인 시범사례]
국민건강보험 건강검진 결과서와 서비스디자인의 만남
고객 경험에 기반한 의료서비스디자인
정형외과 외래진료에 대한 서비스디자인
[기타 사례]
Design Bugs Out
의료서비스디자인 혁신사례
-----------------------------------
첫인쇄 2013년 1월30일
발행처 한국디자인진흥원 디자인전략연구실
발행인 이태용
주소 경기도 성남시 분당구 양현로 322
코리아디자인센터 한국디자인진흥원 031-780-2078
웹사이트 한국디자인진흥원 http://www.kidp.or.kr
디자인DB http://www.designdb.com
기획・편집・디자인
planb(서동일 011-9023-1474)
씨디유파트너스(예병은 010-3395-6048)
[문의처]
한국디자인진흥원 디자인전략연구실 김신
031-780-2078 skim@kidp.or.kr
※ 이 보고서는 한국디자인진흥원이 지식경제부 R&D 디자인기반기술개발 사업으로 시행된 [2011 의료기기/환경의 수요자 중심 혁신을 위한 융합형 의료서비스 디자인플랫폼 개발 사업] 의 보고서입니다.
이 내용을 대외적으로 발표할 때에는 반드시 지식경제부에서 시행한 디자인기술개발사업의 결과임을 밝혀야 합니다.
-------------------------------------------------
[의료서비스디자인 관련 참고자료]
1. 의료서비스디자인참고서
http://www.slideshare.net/usableweb/ss-16567992
2. 의료서비스디자인 가이드
http://www.slideshare.net/usableweb/ss-25604521
3. 중소병원 서비스디자인 가이드라인
http://www.slideshare.net/usableweb/ss-25578081
BEVON : IoT Service Design for Electric Vehicle Owners (UIUX)viyana5
<Designer>
Kim Tae Hyeong : taehyeung1@koreatech.ac.kr
Na Ha Young : naviya0408@koreatech.ac.kr
<Description>
Battery diagnostics allow you to view and manage the overall condition of the vehicle.
Also, you can interact with other users through the community as well as the charging convenience and smart key function.
There are many reasons why someone might want to become a UI UX designer. One reason could be to create a better user experience for people using a product.
Another reason could be to improve the design of a website or app. A final reason could be to create new and innovative user interfaces.
There are many reasons why someone might want to become a UI UX designer. One reason could be to create a better user experience for people using a product.
Another reason could be to improve the design of a website or app. A final reason could be to create new and innovative user interfaces.
Trying to build a design system for your project? But still, don't know how to? Then this post gonna teach you how to create the design system for the project!
------------------
Follow me on Instagram to learn more about design
https://www.instagram.com/fazurrehman/
------------------
Understand Design System
A Design System is the single source of truth, which groups all the elements that will allow the teams to design and develop a product even there is lots of benefits to having a design system, but you need to find the right people or company who really need design system or you think you really can solve their business problems by design system!
I will continue the design system in the 2nd post and tell you better understanding and road-map how to build a design system. ⠀
Interested to work with me, let's start working together!
fazurrehman@gmail.com
This presentation was made by me for a basic level UI and UX training in my company. The presentation has also been designed from a UI and UX perspective and has been kept minimalistic. The presentation also contains several other important topics like the work culture in my company, Our process of developing a presentation and a short brief on E commerce platforms.
2015 SINVAS USER CONFERENCE - SPL/SSPL을 통한 임베디드 소프트웨어 개발방안Suji Lee
2015 SINVAS USER CONFERENCE
- SPL/SSPL을 통한 임베디드 소프트웨어 개발방안
(임베디드 소프트웨어 개발을 위한 최적화 방안)
ENKISOFT : http://www.enkisoft.co.kr/
SINVAS : http://www.sinvas.com/
FACEBOOK : https://www.facebook.com/enkisoft2001
TWITTER : https://twitter.com/enkisoft2001
Atlassian Product Overview (아틀라시안 제품 소개) - 2016년 4월 버전Atlassian 대한민국
아틀라시안(Atlassian)의 회사 소개 및 제품 오버뷰 슬라이드 입니다.
아틀라시안의 모든 제품은 공식 홈페이지 https://ko.atlassian.com/ 또는 공식 파트너사를 통해 구매하실 수 있습니다.
대한민국 내의 공식 파트너사 리스트는 다음 링크를 참조하세요: http://goo.gl/qwh6ix
4. A Design System
디자인 시스템은 프로젝트가 아닙니다. 그것은 서비스 제품입니다.
스타일 가이드는 디자인 프로세스의 결과물입니다.
디자인 시스템은 살아있으며, 로드맵 및 백로그가 있는 자금 지원 제품으로
생태계를 제공합니다.
A Design System isn’t a Project. It’s a Product, Serving Products.
A style guide is an artifact of design process.
A design system is a living, funded product with a roadmap & backlog,
serving an ecosystem.
- Nathan Curtis -
001 디자인시스템이란?
5. 001 디자인시스템이란?
여러가지 응용 프로그램을 구성하기 위해 결합할 수 있는
명확한 표준에 따라 재사용 가능한 구성 요소의 모음
타이포, 색상, 모양, 아이콘 등과 같은 스타일 가이드를 포함하는
모든 포괄적인 UI 구성 요소 집합
비주얼 언어는 디자인 표준의 핵심으로 브랜드 개성을 표현하고
일관된 사용자 경험을 창출하는데 필수적인 역할
디자인 시스템
6. 스타일가이드VS 디자인 시스템
스타일 가이드
디자인 시스템의 스타일, 패턴, 실습 및 원리를 나타내는 물리적 또는 디지털 표현
색상, 타이포그래피, 브랜드, 아이콘 등 기본을 정의하는 일련의 규칙
[패턴 라이브러리] 회사 전체에서 사용하기 위한 디자인 패턴 집합으로
코드 예제, 디자인 지침 및 사용 사례가 포함되어있는 재사용 가능한 관련 구성 요소 세트.
스타일 가이드를 구성 할 수 있는 일부
디자인 시스템
디자인 및 개발을 위한 더 나은 방법 및 프로세스
“살아 있는 것” 지속적인 업데이트 최신 구성 요소 업데이트 유지 되는 문서
스타일 가이드와 패턴 라이브러리는 훨씬 견고한 디자인 시스템의 일부
001 디자인시스템이란?
9. UI Components 구성요소
패턴 라이브러리, 재사용 가능한 UI 요소 및 웹
사이트의 일관성을 유지하는 코드
Design Principles 디자인 원리
조직에서 온라인 경험을 설계하는 방법을 정의하
는 일련의 지침. 의사 결정을위한 프레임 워크
Content Guide 콘텐츠 가이드
웹 사이트에서 일관된 목소리를 유지하는데
도움이되는 콘텐츠 제작자를 위한 가이드 라인
Service Manual 서비스 매뉴얼
디지털 거버넌스 및 디지털 프로젝트 관리 방법을
다루는 문서
디자인시스템4요소
001 디자인시스템이란?
10. 우리는 페이지를 디자인하지 않고, 구성요소의 시스템을 설계하고 있습니다.
We’re not designing pages, we’re designing systems of components.
—Stephen Hay
Brad Frost
디자인 시스템을 생성하기 위한 방법론
웹 사이트 레이아웃을 기본 구성 요소로 분해하여 사이트 전체에서 재사용
견고한 디자인 시스템을 만들고 유지 관리하는 데 필요한 모든 것을
상세하게 설명하여 이전보다 더 높은 품질의 일관성있는 UI를 신속하게 출시
Atomic Design
001 디자인시스템이란?
11. 제품의 모든 화면을 디자인 한 다음 작은 구성 요소로 잘라서
UI 키트를 만드는 방법
Atomic design: how to design systems of components
001 디자인시스템이란?
12. Atomic design: how to design systems of components
Atomic 시작으로 나머지를 만드는 방법
001 디자인시스템이란?
14. Atoms 원자
화학 원자는 모든 물질의 기본 구성 요소 / 더이상 분해할 수 없는 UI 요소
입력, 레이블 및 버튼과 같은 기본 HTML 태그 (인터페이스를 구성하는 기본 구성 요소)
패턴 라이브러리의 컨텍스트 참조용으로 유용
색상 팔레트, 글꼴 및 애니메이션과 같은 인터페이스의 더 눈에 보이지 않는 측면과 같은 추상 요소도 포함
Atomic Design
001 디자인시스템이란?
15. Molecules 분자
화합물의 가장 작은 기본 단위
새로운 특성을 취하거나 기능을 완성하기 위해 결합된 원자의 단순한 조합
Form 결합하여 기능적 요소를 형성 / 검색 양식
Atomic Design
001 디자인시스템이란?
16. Organisms 유기체
분자들이 결합하여 유기체 형성
비교적 복잡하고 구분 된 인터페이스 영역을 형성하는 분자 그룹
유사하거나 상이한 분자 유형으로 구성
헤더 : 로고, 탐색, 검색 형태 소셜 미디어 채널의 목록과 같은 다양한 요소로 구성
반복적 그리드 : 쇼핑 상품리스트
Atomic Design
001 디자인시스템이란?
17. Template 템플릿
페이지를 구성하기 위한 유기체 그룹으로 구성 / 페이지의 기본 콘텐츠 구조에 집중
레이아웃 적용하여 구성 요소 배치, 디자인 컨텐츠 구조 보여줌
구체적, 추상적인 분자와 유기체에 대한 문맥 제공
html 와이어 프레임으로 시작 궁극적인 최종 산출물
Atomic Design
001 디자인시스템이란?
18. Pages 페이지
템플릿의 특정 인스턴스
실제 컨텐츠들이 어떻게 비쥬얼적으로 보여질지 페이지를 통해 구현
기본 설계 시스템의 효과를 테스트하는 데 필수적
실제 디자인 컨텍스트를 보다 효과적으로 대처
Atomic Design
001 디자인시스템이란?
20. 시각적구성요소
동일하게 유지되는 구성요소
• typeface
• base unit
구별할 수 있는 구성 요소
• font size
• measure (line length)
• leading (line height)
Typography
Colour
Shape or form
Grids and layouts
Interface
Animation
001 디자인시스템이란?
23. 002 필요성및 이점
더 똑똑하고 빠른 디자인
디자인 시스템을 활용함으로써 전략적 설계와 솔루션 중점
디자인 프로세스 간소화. 더 많은 작업 수행
디자인 시스템
일관성 없는 스타일, 상호작용, 디자인 원리와 연결이 끊어진 인터페이스
디자인시스템은 단기 설계 결정을 제거, 설계 및 개발 오버헤드를 줄임
팀이 유지보수가 아닌 혁신에 집중 디자인 및 기술 부채를 점검하는 데 도움
혼란과 불일치 감소 (일관성)
혼란스러운 사용자가 발생 표준화 된 구성 요소 및 워크플로우를 만들어
예측 가능하고 이해하기 쉬운 경험 제공
일관성은 사용자의 성공과 만족도를 높여줌
24. 빠른 프로토타입
디자인 시스템에서 컴포넌트를 가져와 새로운 기능을 신혹하게 생성 및 테스트
Fail faster. Succeed sooner - David Kelley, IDEO
더 빠른 반복
디자인 구성 요소에 쉽게 액세스. 더 빨리 이동하여 단순한 반복과 실험
A good idea is worthless without impeccable execution and a commitment to iterate.
– Zach Klien, Co-founder, VIMEO
사용 편의성 향상
일관된 경험으로 사용성 향상. 복잡한 애플리케이션을 사용할 때 문제, 마찰 지점 및 인식 과부하 줄임
일련의 테스트 및 검증 된 구성 요소를 사용하여 일관성 있는 경험을 얻게 되면
복잡성이 줄어들고 개발 프로세스가 진행되는 동안 문제가 줄어듬
002 필요성및 이점
27. 003 디자인시스템구축
UI 인벤토리 작성
시각적 디자인 언어 만들기
Color
Typography
Sizing and spacing
Image
UI 패턴 라이브러리 생성
각 구성 요소의 용도와 사용시기
28. UI 인벤토리 작성
"An interface inventory is similar to a content inventory, only instead of sifting through
and categorizing content, you’re taking stock and categorizing the components making up
your website [or product]. An interface inventory is a comprehensive collection of the bits
and pieces that make up your interface."
— Interface Inventory, Brad Frost
인터페이스 인벤토리는 콘텐츠 인벤토리와 비슷하지만 콘텐츠를 탐색하고 분류하는
대신 재고를 확보하고 웹 사이트 [또는 제품]를 구성하는 구성 요소를 분류합니다.
인터페이스 인벤토리는 종합적인 비트 조각으로 당신의 인터페이스를 구성합니다.
설계한 모든 것을 스크린 샷으로 가져와 인터페이스에 사용 된 모든 디자인 패턴을
나열하고 설명하고, 불일치 사항 기록
003 디자인시스템구축
29. UI 인벤토리 작성
1. 인터페이스와 코드를 검토하고 찾을 수 있는 모든 색상과 텍스트 스타일을 나열
2. UI 패턴의 스크린 샷을 찍거나 프로젝트의 패턴 복사. 모든 스크린 샷을 한 곳에 담음
3. 목적 (예 : 단추, 양식 필드, 탐색 등)을 기준으로 패턴 분류
4. 패턴 간의 불일치를 표시하고 팀을 위한 프리젠테이션 작성
003 디자인시스템구축
30. UI 인벤토리 작성
그라디언트, 화살표, 테두리 등의 불일치 재사용되는 버튼 스타일이 적은 인터페이스
003 디자인시스템구축
31. UI 인벤토리 작성
시각적 디자인 언어 만들기
시각적 디자인 언어는 디자인 시스템의 핵심
네 가지 주요 카테고리로 구성
각 디자인 요소가 화면의 모든 구성 요소에서 수행하는 역할 고려
Color
Typography
Sizing and spacing
Image
003 디자인시스템구축
32. Color
브랜드를 나타내는 1-3 원색이 포함
색상에 흰색과 섞인 색상 (검정색과 혼합 된 색상)을 추가
그런 다음 색상에 대해 다른 음영 생성
시각적 디자인 언어 만들기
angular color generator
003 디자인시스템구축
33. Typography
표제와 본문 복사를위한 1개의 글꼴과 코드의 고정 폭 글꼴이 포함
기본 제목, 보조 제목, 레이블, 카드 제목, 본문 내용 및 버튼 같은
용도별 입력 체계 스타일 나열
시각적 디자인 언어 만들기
003 디자인시스템구축
34. Sizing and spacing
각 요소와 레이아웃이 일정하게 유지
크기조정, 폼 및 기타 유사한 구성 요소에 대해 재사용 할 수 있는
폭, 높이 및 선 높이 세트 정의
시각적 디자인 언어 만들기
003 디자인시스템구축
35. Image
일러스트레이션과 아이콘에 대한 지침을 설정하고 상황에 맞는 최상의 이미지 형식을 사용
Oracle Alta UI는 원근감, 획 및 색상과 같은
스타일 지침을 설명합니다.
시각적 디자인 언어 만들기
003 디자인시스템구축
36. UI 패턴 라이브러리 생성
이미 수행 한 시각적 감사 (디자인 요소의 시각적 품질을 고려함)와 달리
이 단계는 UI의 실제 구성 요소를 살펴봄. 현재 생산중인 UI의 모든 부분과 조각을 모으기
모든 버튼, 양식, 모달 및 이미지를 의미함. 필요없는 것을 병합하고 제거
미리 정의된 스타일을 구성요소에 매핑 / 스타일 팔레트에 정의된 것으로 사용
각 구성 요소의 용도와 사용시기
문서 라이브러리와 표준은 패턴 라이브러리와 디자인 시스템과 구별 / 문서화 단계 중요
003 디자인시스템구축