Esse conteúdo foi desenvolvido para ser melhor visualizado em navegadores modernos.
Para um melhor aproveitamento, por favor atualize o seu navegador ou utilize o Chrome, Firefox ou Edge atualizado.
Design e projeto gráfico
O design e o projeto gráfico foi alterado para fortalecer a ênfase no conteúdo com todos os demais elementos resaltando seus valores e intenções.
Objetivos
O maior objetivo do novo projeto gráfico é equilibrar as demandas de flexibilidade, ênfase no conteúdo e agilidade no processo de produção.
A nova abordagem do conteúdo online dos cursos EAD é de elemento de ligação e complemento ao e-book, e com isso a quantidade de elementos de mídia e interação crescem consideravelmente enquanto as massas de texto reduzem. Essa conformação exige uma clara segmentação desses elementos e que seu papel no fluxo de conteúdo seja mais claro.
Outro aspecto importante que devia ser aprimorado era a intensidade de cores, contrastes e tamanho dos elementos. Foi observado que um grande número de usuários / alunos fazem os cursos no final do dia ou em trânsito, e por isso faz importante que o conteúdo seja de fácil leitura e que tenha um tom alegre e motivador.
Por fim, a consolidação do LMS Brightspace permite que o projeto gráfico seja fortemente orientado à se comunicar visualmente com ele, evitando confusão e conflitos de usabilidade.
Eclass
O ambiente onde o conteúdo será exibido tem grande impacto na forma como ele vai ser desenvolvido, seja na harmonia ou no contraste necessário. Todo esse projeto gráfico foi feito e testado dentro de uma simulação do Eclass, versão do LMS Brightspace adotado pela FGV.
Três características principais foram os eixos das restrições para o design: palheta intensa e diversa de cor, largura máxima da área de conteúdo de 980 pixels e múltiplos sistemas e elementos de navegação.
Dessas restrições surgiram as soluções:
dar ênfase ao limite da área dos conteúdos com os cards,
garantir a largura máxima destes compatível ao formato final,
uma área de arejamento ao redor do conteúdo para garantir destaque e respiro,
cor do fundo idêntica ao do ambiente para criar unidade com ele, e
eliminação do uso de elementos gráficos de setas em navegações internas para não criar confusão.
( acesso restrito à rede FGV )
Cartões (cards), faixas e papel
Um elemento presente nas versões anteriores é a metáfora de folha de papel. Aqui essa caracterítisca é extrapolada e o conteúdo é recortado em forma de cartões, fazendo uma referência visual à encartes e fichamentos. Cada um destes apresenta um segmento isolado do conteúdo, mas que se integra com os demais para construir o curso.
Esse espaço de respiro e recorte permite que se dê o destaque requerido aos componentes e mídias dentro de uma mesma página sem comprometer a sua unidade.
O cartão pode ser identificado pelo tipo de segmento e interação a que se destina, como vídeo, atividade, dica, etc. Cada uma dessas tem um padrão de cores próprio, colorindo a página, e como os cartões podem ser agrupado com outros cartões, formando visualmente um cartão maior e com uma variedade rica de elementos e cores únicos. Cada página ganha uma identidade própria que vai além da mancha de texto e imagens.
Partindo do conceito de cartões o papel se torna um elemento simbólico que passa a acompanhar os elementos secundários. Superfícies bimensionais mas com profundidade no arranjo com as demais.
Tipografias
Para garantir a leitura da forma mais confortável possível, e transmitir a descontração necessária, as tipografias escolhidas foram sem serifas com prevalência em curvas e fio regular.
Para o corpo de texto foi selecionada a família Open Sans do designer Steve Matteson e para os títulos e gráficos optamos pela Lato do designer Łukasz Dziedzic.
Suporte multi-browser e responsividade
Baseado nos dados de usuários nacionais, foram escolhidos os seguintes navegadores e resoluções como meta para o pleno funcionamento do layout e funcionamento dos componentes.
| Navegador | versão | 1920 x 1080 | 1024 x 768 | 378 x 667 | 360 x 640 | Touch |
|---|---|---|---|---|---|---|
| Desktop | ||||||
| Chrome | 50+ | x | x | |||
| Firefox | 46+ | x | x | |||
| Edge | 13+ | x | x | |||
| Internet Explorer |
11+ | x | x | |||
| Mobile | ||||||
| Chrome for Android |
53+ | x | x | x | x | |
| Safari | 9.3+ | x | x | x | x | |
Desktop
Chrome 50+
Firefox 46+
Edge 13+
IE 11+
Resoluções: 1920 x 1080 | 1024 x 768
Mobile
Chrome for Android 53+
Safari 9.3+
Resoluções: 375 x 667 | 360 x 640 | 1024 x 768