Os princípios
As soluções e os "desenhos" para os interfaces web dependem da qualidade de construção e do design da solução. As bases e os estudos de design (UI), assim como a exeperiência de utilização (UX) são fundamentais para trabalhar as soluções, layout e os conteúdos web, que assentam em três príncipios:
- 1) Design elegante e funcional;
- 2) O chamado "copy" deve ser trabalhado por uma equipa especializada;
- 3) Algumas noções de design da página.
Ser prático e aplicar elegância...
A experiência de utilização e o design normalmente apresentam resultados! No entanto há que ter em conta que o conteúdo de texto ou imagens demasiado ornamentadas não trazem benifícios. As bases, padrões e os princípios de design são importantes para que a linguagem visual das soluções UI tenham consistência, clareza e intuição nos interfaces visuais.
As cores
Temos uma grelha de cores preparada para trabalhar de forma prática e inteligente. As cores estão esquematizadas com as informações básicas para que uma equipa de desenvolvimento web, de forma rápida e eficiente, possa implementar os estilos definidos. O objetivo é ganhar tempo e garantir que os projetos web da Fundação para a Ciência e a Tecnologia tragam consistência visual.
A paleta das cores, em esquema.
Para a grelha principal, primária e secundária, temos a predominância da cor branca e um esquema de cores neutro com cinzas claros e escuros, alguma gama de tons de azul e tons de verde (a cor base da marca institucional).
PALETA PRINCIPAL; PRIMÁRIA E SECUNDÁRIA
OS ALERTAS
O LINK
OS FUNDOS / SECÇÕES / RODAPÉS
Estamos também empenhados em cumprir os índices de contraste das cores padrão AA. Para isso, estamos a pensar apresentar (futuramente) uma área preparada para apresentar um esquema onde falaremos do contraste de cor suficiente entre elementos, para que os utilizadores com baixa visão possam utilizar da melhor forma os nossos interfaces.
A iconografia
A utilização dos ícones, enquanto símbolos, permitem facilitar e tornar mais rápido o reconhecimento visual das páginas web e de algumas áreas do interface.
Como utilizar
É conveniente que os pictogramas utilizados não sejam a única forma de identificar um determinado objeto de interação uma vez que apenas um pequeno conjunto de símbolos são reconhecidos universalmente. E por motivos de coerência visual, a FCT, também comunica com a iconografia personalizada dos componentes e elementos web das páginas e aplicações.
A tipografia
A escolha de uma boa tipografia pode resolver, em grande parte, os problemas de legibilidade e facilidade de leitura das plataformas web. A FCT, utiliza a Lora e Source Sans Pro como fontes principais. A coleção tipográfica - Lora e Source Sans Pro - estãos disponíveis na web e são open source.
Aplicar corretamente a tipografia
A tipografia correta já vem devidamente carregada no tema personalizado. Pode ainda efetuar uma configuração de forma manual na CSS com o font-family correto e a fonte embebida no HTML, tal como o exemplo mais abaixo.
Abcdef
123456Lora
Abcdfgh
123456Source Sans
<!-- IDENTIFICAR A TIPOGRAFIA NA CSS -->
<!-- Familia tipográfica Lora -->
font-family: 'Lora', serif;
<!-- Familia tipográfica Source Sans Pro -->
font-family: "Source Sans Pro", sans-serif;
<!-- EMBEBER A FONTE NO HTML -->
<link href="https://fonts.googleapis.com/css?
family=Lora:400,400i,700,700i"rel="stylesheet">
<link href="https://fonts.googleapis.com/css?
family=Source+Sans+Pro:200,300,400,600,700,900"
rel="stylesheet">
Ver os elementos básicos da tipografia sugerida.