Design System 1.0 Beta�Por Ubiratan Silva | On lineUX Team
Design System 1.0 Beta
Introdução
Pesquisa
Problema e Solução
1. Sobre o Design System SHIFT
Tecnologia Base
Entregáveis
Conceitos
Sumário
2. Manual da Marca Shift
Símbolo
Tipografia
Slogan
Cores
Tamanhos
Espaçamentos
Usos Indicados
Usos Não Indicados
Design System 1.0 Beta
3. Interface Shift DS
Guidelines Gerais
Acessibilidade
Cores
Layouts
Iconografia
Tipografia
Sumário
4. Biblioteca de Componentes SHIFT DS
Apresentação
Componentes:
Textos/Títulos
Breadcrumbs
Botões e Grupos de Botões
Cards
Calendário
Formulários
Ícones
Imagens
Menus e Navegação
Modais
Mensagens de Diálogo (Alertas, Avisos, Erros)
Painéis
Processos
Comentários
Poppovers
Tabelas de Dados
Abas
Tokens
Telas do Sistema LIS
Header
Conteúdos
Rodapé
Design System 1.0 Beta
A apresentação inicial do Design System desenvolvido para Shift tem por objetivo apresentar a problemática identificada no briefing e pesquisa inicial, os conceitos, entregáveis e estrutura dos componentes do design system criado para a Shift com base nas melhores práticas de desenvolvimento de interfaces e experiência do usuário.
Introdução
Design System 1.0 Beta
A construção do design system da Shift tem como base a organização da marca Shift que estava carente de uma normatização mais ampla e abrangente em suas aplicações de modo a garantir a consistência de sua aplicação.
Após a análise dos materiais de marca, site, sistema lis, assinaturas de email e redes sociais da Shift e também após análise dos dados levantados na pesquisa e imersão inicial se percebeu uma falta de consistência e padrão visual relativo à marca e a apresentação dos produtos e serviços da empresa. Este passou a ser o problema a ser resolvido.
A solução: Um design system (DS) moderno, claro, abrangente e de fácil aplicação :
Problema e Solução
Design System 1.0 Beta
Um sistema de design, ou design system (DS) é uma coleção de componentes de interface reutilizáveis, guiados por padrões claros de estilo e interação, que podem ser montados juntos para construir qualquer número de aplicações.
O que é um design system DS
Design System 1.0 Beta
Um sistema de design não é apenas uma coleção de recursos e componentes usados para criar um produto digital. Uma grande caixa de peças de Lego UI que podem ser montadas de maneiras quase infinitas.
O que é um design system DS
Entender não apenas o que, mas o porquê, por trás do design de um sistema é fundamental para criar uma experiência de usuário excepcional. Definir e aderir aos padrões é como criamos esse entendimento .
Mas não se trata apenas de um conjunto de peças, um design system possui estrutura e significado. É a incorporação de um sistema de conceitos.
Design System 1.0 Beta
A pesquisa e imersão realizada na Shift em Junho/2018 proporcionou acesso a uma um volume excelente de informações relevantes para a compreensão da cultura da empresa.
Através da pesquisa foi possível perceber valores e atributos presentes na marca, mas também atributos que deveriam estar presentes nas formas de aplicação da marca e não estão, e a interface dos sistemas é uma forma de aplicação da marca Shift.
O ideal é que uma pesquisa mais ampla se faça com usuários especificamente e também durante e após a implantação do design system no sentido de avaliar e aperfeiçoar a sua aplicação.
Pesquisa
Design System 1.0 Beta
Tecnologias Base
Como boa prática em criação de design systems sugere-se a adoção de um padrão de mercado como base tecnológica.
Foi realizada análise de uma série de sistemas de design disponíveis no mercado para identificação de um padrão base de consistência adequado ao público e a marca Shift.
Optou-se por usar como base o Lightning DS , um sistema aberto de design system da Sales Force e um dos mais consagrados no mundo na área de design de interfaces para sistemas, e também a estrutura de componentes do framework PrimeFaces.
1. Sobre o Design System SHIFT
Design System 1.0 Beta
Tecnologias Base
1. Sobre o Design System SHIFT
Que servirão de base e padrão tecnológico para o design system da SHIFT integrado as características visuais da marca com os componentes do Framework.
+
Importante:
A pesquisa de concorrência detectou que o PrimeFaces é um framework pouco usado na comunidade de desenvolvimento e considerado por muitos obsoleto para uso na web como desktop responsivo para sistemas principalmente por dificuldades de adaptação ao design responsivo adaptável. A sugestão estratégica seria usar o formato Lightning DS apenas como base que é mais moderno e adaptável.
Design System 1.0 Beta
O design system da Shift será composto pelos seguintes entregáveis:
Entregáveis
1. Sobre o Design System SHIFT
Design System 1.0 Beta
Em desenvolvimento como um extra não previsto no design system.
Manual da Marca
2. Manual da Marca Shift
Design System 1.0 Beta
Interface DS Shift - Conceitos
3. Interface Design System SHIFT
Este design system inclui recursos para criar interfaces de usuário consistentes e amigáveis,com linguagem de design adequada e de acordo com as melhores práticas em interfaces de sistemas.
Prevê um padrão visual consistente para cada componente da interface de modo a tornar a aplicação escalável.
A implementação de um design system é um processo evolutivo e deve ser acompanhado e monitorado para ser aperfeiçoado de forma permanente.
Design System 1.0 Beta
Conceitos
O Interface design system da Shift foi desenvolvido com base nos seguintes conceitos.
Consistência
Precisão e Detalhe
3. Interface Design System SHIFT
Design System 1.0 Beta
Conceitos
O design system da Shift foi desenvolvido com base nos seguintes conceitos.
Clareza
Eficiência
3. Interface Design System SHIFT
Design System 1.0 Beta
Acessibilidade
O que é acessibilidade?
A acessibilidade na Web garante que as pessoas com deficiências possam perceber, entender, navegar, interagir e contribuir com os aplicativos que você cria. Isso significa que as páginas são Perceptíveis, Operáveis, Compreensíveis e Robustas.
Isso inclui fornecer alternativas de interação de teclado para todas as ações baseadas em mouse, identificar adequadamente todos os campos e botões de formulário, fornecer alternativas baseadas em texto para todas as imagens, vídeos, ícones e SVGs, bem como criar componentes que transmitam adequadamente sua identidade, modelo de operação e estado para tecnologias assistivas.
O Design System da SHIFT permite o desenvolvimento acessível, fornecendo um conjunto de componentes semanticamente corretos, cada um com a marcação ARIA apropriada para que eles possam ser identificados corretamente aos usuários de tecnologias assistivas.
3. Interface Design System SHIFT
Design System 1.0 Beta
Cores
3. Interface Design System SHIFT
Design System 1.0 Beta
Layouts
Arquitetura da Informação
3. Interface Design System SHIFT
Design System 1.0 Beta
Iconografia
3. Interface Design System SHIFT
Design System 1.0 Beta
Tipografia
3. Interface Design System SHIFT
Design System 1.0 Beta
4. Biblioteca de componentes DS Shift
4. Biblioteca de Componentes
A biblioteca de componentes do DS Shift será composta por toda a normatização e estilização de cada componente da interface.
Será compatível com Bootstrap, React e PrimeFaces e poderá ser adaptada a outros diferentes frameworks de front-end e com a utilização de pré-processadores de CSS como LESS e SAAS, mas a aplicação será responsabilidade do desenvolvimento/programação.
Design System 1.0 Beta
Componentes
4. Biblioteca de Componentes
1. Textos/Títulos
2. Breadcrumbs
3. Botões e Grupos de Botões
4. Cards
5. Calendário
6. Formulários
7. Ícones
8. Imagens
9. Menus e Navegação
10. Modais
11. Mensagens de Diálogo
12. Mensagens de Alertas
13. Avisos
14. Mensagens de Erro
15. Painéis
17. Comentários
18. Poppovers
19. Tabelas de Dados
20. Abas
21. Tokens
22. Telas do Sistema LIS
Apresentação do funcionamento da biblioteca de componentes.
A Design System Library SHIFT será composta pelos seguintes:
Design System 1.0 Beta
Cronograma de Entregas
Estes entregáveis serão disponibilizados para a SHIFT via GITHUB e GoogleDrive a partir de:
A diferença em relação ao cronograma inicialmente proposto se deve à construção do manual da marca que foi imprevista, mas necessária e também pela extensão que alcançou a pesquisa.
Design System 1.0 Beta
Dúvidas, questionamentos, encerramento.
Obrigado.
Ubiratan Silva
UX/UI Designer Sênior/Lead
Online UX Team