Edney Lincoln Lourenço
Ingrid Teixeira Monteiro
ABSTRACT
A Design System (DS) consists of a set of interconnected standards for building digital products. DS provides a set of elements and components that are repeated across interfaces, such as buttons, text fields, icons, colors, and typography, helping to build a coherent interface. This article describes the construction of the Ion Design System, a product that aims to help designers and front-end developers of the company Brisanet Telecomunicações in the development of user interfaces, through standardization and component documents, as part of the course conclusion work in Digital Design. The process included research with the target audience, analysis of systems and similar products, definition of content, organization of information, testing of interfaces and development of brand, tokens, components and documentation. The Design System was created in the Figma tool, allowing team members to collaborate in the creation and definition of components. The product evaluation highlighted its importance in helping employees build consistent and standardized interfaces. The article presents the results of this work and highlights the relevance of the Ion Design System to improve the interface development experience.
- Simone Diniz Junqueira Barbosa, Bruno Santana da Silva, Milene Selbach Silveira, Isabela Gasparini, Ticianne Darin, and Gabriel Diniz Junqueira Barbosa. 2021. Interação Humano-Computador e Experiência do Usuário. Autopublicação. https://leanpub.com/ihc-uxGoogle Scholar
- Brisanet. 2018. Conheça a história da Brisanet. https://blog.brisanet.com.br/index.php/2018/11/01/conheca-a-historia-da-brisanet/Google Scholar
- Design Council. 2019. Framework for Innovation. https://www.designcouncil.org.uk/our-work/skills-learning/tools-frameworks/framework-for-innovation-design-councils-evolved-double-diamond/Google Scholar
- Redação Cronapp. 2020. Desenvolvimento de software. https://blog.cronapp.io/desenvolvimento-de-software-as-tendencias-do-momento-e-do-futuro/Google Scholar
- Elliot Dahl. 2016. Intro to the 8-Point Grid System. https://tanzu.vmware.com/content/built-to-adapt/intro-to-the-8-point-grid-system-2Google Scholar
- Fabiano Favretto. 2021. Entenda o que são os Design Tokens de um Design System. https://ateliware.com/blog/design-tokensGoogle Scholar
- Frost. 2016. Atomic Design | Atomic Design by Brad Frost. http://atomicdesign.bradfrost.com/table-of-contents/Google Scholar
- Jesse James Garrett. 2010. The elements of user experience. Pearson Education.Google Scholar
- Alla Kholmatova. 2017. Design Systems. Smashing Media AG.Google Scholar
Index Terms
- ION: design system for the internal systems development sector of the company Brisanet Telecomunicações
Recommendations
Design issues related to pie menus for 5-way joysticks
Mobility '07: Proceedings of the 4th international conference on mobile technology, applications, and systems and the 1st international symposium on Computer human interaction in mobile technologyAlthough linear textual menus are a widely adopted solution in the mobile phone user interfaces, alternatives that would take smaller amount of screen real estate exist, e.g. toolbars and pie menus. Pie menus also provide access to functions with fewer ...
A logical design method for user interface using GUI design patterns
HCI'13: Proceedings of the 15th international conference on Human-Computer Interaction: human-centred design approaches, methods, tools, and environments - Volume Part IThis paper presents a discussion of method for user interface design using graphical user interface (GUI) design patterns. GUI design patterns are defined as "general operation and expression of embedded system products". Purpose of this study is to ...
Towards virtualization of user interfaces based on UsiXML
Web3D '05: Proceedings of the tenth international conference on 3D Web technologyA model-based approach is presented for structuring a development process of virtual user interfaces based on UsiXML, a XML-compliant User Interface Description Language. UsiXML provides a Concrete User Interface description that remains independent ...
Comments