Titulo Estágio
Sistema de Estilos – um caso de estudo
Local do Estágio
CMS
Enquadramento
Geralmente, os sistemas de estilos em Visualização de Informação seguem os guias do sistema de identidade de uma determinada empresa [1]. Estes sistemas providenciam informação sobre como aplicar os principais estilos e elementos de design do sistema de identidade (e.g., logo, tipografia, cores, layouts) nos modelos de visualização (e.g., gráficos de barras, linhas, ou mapas). De forma semelhante ao sistema de identidade, os sistemas de estilos de visualização especificam um conjunto de princípios, regras e componentes que devem ser aplicados transversalmente às diferentes ferramentas, softwares e ambientes da mesma empresa (e.g, website, aplicações mobile ou materiais impressos). Ao invés de providenciar um modelo para cada ferramenta, o sistema de estilos providencia um conjunto de especificações de forma a ajudar a empresa a atingir um grau superior de consistência e uniformidade em múltiplas plataformas e ferramentas.
Os exemplos existentes podem ser divididos em três grupos: (i) sistemas de estilos; (ii) sistemas de estilo e exemplos de aplicação; (iii) sistemas de estilos e o respectivo código. Os sistemas de estilos em geral cobrem as aplicações e fornece orientação sobre os princípios básicos de design que todas as visualizações de uma empresa / instituição devem seguir. Na segunda categoria, os sistemas de estilo são geralmente acompanhados de exemplos de códigos, dependendo da estrutura, que devem ser aplicados nas visualizações. Na terceira categoria os sistemas de estilos são implementados diretamente numa framework, que disponibiliza vários modelos de visualização com os estilos integrados.
Um exemplo é o sistema de estilos desenvolvido para a IBM pelo estúdio Accurat [2], que em primeiro lugar, fornece um conjunto de estilos que estão de acordo com a linguagem visual da marca da IBM, assim como uma aplicação que exemplifica a aparência visual do modelos de visualização e fornece directrizes de composição, storytelling e do uso da animação e interacção. Outro exemplo do sistema de estilos é o Material Design da Google [3], que inclui a definição dos princípios e tipos de modelos de visualização, dicas para a selecção dos modelos, uma especificação detalhada dos estilos e os comportamentos de interação visuais.
[1] Elder, K. L., & Cesal, A. (2020). Should We Teach Data Visualization Using Data Visualization Style Guides?. Issues in Information Systems, 21(4).
[2] https://www.accurat.it/work/ibm-language
[3] https://material.io/design/communication/data-visualization.html#principles
Objetivo
- Estudo do estado da arte e do trabalho relacionado com o tema;
- Desenvolvimento de uma metodologia e de um conjunto de guias para o desenvolvimento de sistemas de estilos;
- Levantamento do tipo de modelos de visualização e tipo de dados usados na empresa e criação da taxonomia correspondente;
- Aplicação dos conhecimentos adquiridos nos pontos anteriores para o desenvolvimento do projecto;
- Criação do sistema desenvolvido no contexto do caso de estudo da empresa Feedzai.
Plano de Trabalhos - Semestre 1
- Revisão da bibliografia e Estado da Arte;
- Estudo de metodologias para a elaboração de sistema de estilos;
- Elaboração da proposta de dissertação.
Plano de Trabalhos - Semestre 2
- Estudo e realização de experiências;
- Desenvolvimento do sistema de estilos;
- Integração com a empresa do caso de estudo;
- Escrita da Dissertação.
Condições
A dissertação será realizada nas instalações do grupo CMS do CISUC.
Trata-se de uma dissertação na área de visualização de informação que integra tanto uma componente tecnológica como comunicação visual. Dependendo do ambiente de desenvolvimento, o/a aluno/a deverá ter conhecimentos de programação em Processing e/ou linguagens de programação genérica (e.g., c++, Java), ou programação em p5.js e/ou d3.js ou uma linguagem de programação para a web genérica (e.g., Javascript).
Durante a fase de candidaturas, dúvidas relacionadas com esta proposta devem ser esclarecidas através de email ou de uma reunião presencial/videoconferência.
Contactar orientadores:
Catarina Maçãs (cmacas@dei.uc.pt)
Evgheni Polisciuc (evgheni@dei.uc.pt)
Orientador
Catarina Maçãs / Evgheni Polisciuc
cmacas@dei.uc.pt 📩