DOI QR코드

DOI QR Code

Framework for Building Reusable Design Systems

재사용 가능한 디자인 시스템 구축을 위한 프레임워크

  • 이영주 (청운대학교 멀티미디어학과)
  • Received : 2020.11.17
  • Accepted : 2021.01.20
  • Published : 2021.01.28

Abstract

This study investigated the method of constructing and combining blocks based on the atomic design system in order to propose a framework for rescue of a reusable design system. For that, I first looked at the necessity of a design system and examples of snow white, skeuomorphic design, flat design, and material design. In addition, molecules, atoms, organisms, templates and pages of atomic design using the principles of chemistry as metaphors were defined through literature studies. In order to implement a new framework, an interface inventory was constructed, and among them, font, color, image and control elements were extracted as core visual elements, and guidelines were defined, and molecular elements were classified and composed of atoms based on them. Blocks are constructed in the form of blocks based on the design pattern most used in the content inventory, and the framework is constructed to implement a layout based on a visual grid and design a page through a combination of blocks. The significance of this paper is that the new framework helps team consistency and collaboration by reusing blocks and supports file sharing and updating.

본 연구는 재사용 가능한 디자인 시스템 구출을 위한 프레임워크 제안을 위해 아토믹 디자인 시스템을 기반으로 블록을 구성하여 조합하는 방법에 대해 알아보았다. 그를 위해 디자인 시스템의 필요성과 스노우화이트, 스큐어모픽 디자인, 플랫디자인 및 머티리얼 디자인의 사례를 우선적으로 살펴보았다. 또 화학의 원리를 메타포로 사용하는 아토믹 디자인의 분자, 원자, 유기체, 템플릿 그리고 페이지를 문헌 연구를 통해 정의하였다. 새로운 프레임 워크를 구현하기 위해 인터페이스 인벤토리를 구성하고 그 중에서 폰트, 컬러, 이미지와 컨트롤 요소를 핵심 시각 요소로 추출하여 가이드라인을 정의하였으며 그를 바탕으로 분자 요소를 분류하고 원자로 구성할 수 있었다. 블록은 콘텐츠 인벤토리에서 가장 많이 사용되는 디자인 패턴을 기반으로 블록 형태고 구성되도록 하여 블록의 조합을 통해 시각적 그리드를 바탕으로 레이아웃을 구현하고 페이지를 디자인하도록 프레임워크를 구성하였다. 새로운 프레임워크는 블록의 재사용으로 팀의 일관성과 협업을 도우며 파일의 공유와 업데이트를 지원한다는 것에 본 논문의 의의가 있다.

Keywords

References

  1. D. H. Byun. (2010). Evaluating Usability of E-government Web Sites Using the AHP, Journal of Digital Convergence, 8(3), 19-37
  2. H. Y. Lee. (2013). The Evaluation Method of Software Usability based on UI, Journal of Digital Convergence, 11(5), 105-117 https://doi.org/10.14400/JDPM.2013.11.5.105
  3. Y. J. Chun. (2010). Validating Constructs of Web Usage in Education and Learning, Journal of Digital Convergence, 8(4), 109-121
  4. Y. J. Lee. (2018). A Study on Continuity of User Experience in Multi-device Environment, Journal of Digital Convergence, 16(11), 495-500 DOI : 10.14400/JDC.2018.16.11.495
  5. Human Interface Guidelines https://developer.apple.com
  6. Material design. https://material.io/design
  7. Y. J. Lee. (2020). UI/UX design theory and practice. Seoul : HanBit Academy Publishing.
  8. A history of Apple HIG table of contents - the philosophy and principles https://modelessdesign.com/backdrop/401
  9. Y. J. Lee. (2015). A Study on Information Architecture & User Experience of the Smartphone, Journal of Digital Convergence, 13(11), 383-390 DOI : 10.14400/JDC.2015.13.11.383
  10. S. C. Beak. (2017). A Study on the Process of Refining Ideas for Social Problem Solving Based on Design Thinking in Digital Convergence Era, Journal of Digital Convergence, 15(2), 155-163 DOI : 10.14400/JDC.2017.15.2.155
  11. B .Frost (2013). Atomic Design. New York : Brad Frost
  12. Y. J. Lee. (2018). Mobile UI/UX design practice. Seoul : HanBit Academy Publishing.
  13. Y. J. Lee. (2015). A Study on Information Architecture & User Experience of the Smartphone, Journal of Digital Convergence, 13(11), 383-390 DOI : 10.14400/JDC.2015.13.11.383
  14. J. S. Kang. (2018). User experience of responsive web on multi-device environment, Journal of Digital Convergence, 16(11), 465-470 DOI : 10.14400/JDC.2018.16.11.465
  15. S. H. Noh, etc (2019). Effect of Support Surface and Visual Condition on Static Balance. Journal of the Korea Convergence Society, 10(7), 47-54 https://doi.org/10.15207/JKCS.2019.10.7.047