Manual Portal UFG - Capítulo 4

4. WIREFRAMES

Um wireframe tem como finalidade apresentar a estrutura fundamental de uma interface gráfica. Por meio dele são definidas a organização das interfaces, a escala entre espaços, assim como a organização dos elementos e suas relações. A seguir são apresentadas as especificações dos itens que devem ser utilizados para os sites vinculados ao Portal UFG.

 

Figura 24 - Wireframe geral da interface inicial.

 

4.1 Área de acesso ao governo

A barra de Identidade Visual do Governo Federal (Figura 24) possui a função de padronizar, identificar e integrar sites e portais do Governo Federal. O seu uso é obrigatório e seu manual de aplicação está presente no site secom.gov.br.

 

Figura 25 - Área de acesso ao governo situada logo acima da identificação da unidade acadêmica.

 

Dimensões:

• a) Altura: 32px;
• b) Largura: variável.

 

Conteúdo:

• a) Ícone do Weby (acesso ao Weby);
• b) Bandeira + designação do país (Brasil);
• c) Acesso à informação;
• d) Participe;
• e) Serviços;
• f) Legislação;
• g) Canais.

 

4.2 Topo (Head)

Figura 26 - Wireframe do topo.

 

Dimensões:

• a) Altura: 140px;
• b) Largura: 1000px.

 

Conteúdo:

• a) Área de pesquisa e sistema UFG (Figura 26);
  

  • 
    Figura 27 - Área de pesquisa e Sistema UFG

• b) Área de acessibilidade
  
  1. 1. Em vista de se cumprir as normas de acessibilidade, o Portal UFG conta com uma área localizada na parte superior direita de sua interface chamada “barra de acessibilidade”. Ela é expansível a partir do botão de acessibilidade (Figura 27 e 28). Neste campo estão disponíveis ajustes de escala para tipografia, contrastes de tela, indicação de programas leitores de tela e ainda links relacionados à acessibilidade.
     
     

  2. 
     Figure 28 - Portal UFG presentando a barra de acessibilidade expandida.

  3. 
     Figura 29 - Botão de acessibilidade­
     
     

  4. 2. O ícone de acessibilidade é formado por uma linha com 2 px de altura, uma “caixa” azul de 168 x 36px, uma imagem icônica de 30px de diâmetro e um descritor (+Acessibilidade) (Figura 29).

  5. 
     Figura 30 - Construção do botão de acessibilidade.
     
     

  6. 3. O elemento tipográfico do botão, descritor, usa a tipografia Verdana em sua versão Bold com corpo de 16px na cor branca (#ffffff).
     
     

  7. 
     Figura 31 - Topo da interface sinalizado através de suas cores originais
     
     

  8. 4. Os contrastes de tela serão possíveis de três modos: azul, preto e amarelo. Abaixo segue o esquema cromático de cada um.
     
     

  9. 
     Figura 32 - Esquema cromático do contraste de tela na cor azul
     
     

  10. 
      Figura 33 - Esquema cromático do contraste de tela na cor preta
      
      

  11. 
      Figura 34 - Esquema cromático do contraste de tela na cor amarela
      
      

• c) Área de Redes Sociais;
  
  

  1. 
     Figure 35 - Portal UFG presentando o menu de redes sociais.

  2. 1. Em vista de potencializar a relação do usuário com a UFG, o Portal UFG conta com uma área localizada na parte superior direita de sua interface chamada “menu de redes sociais” (Figura 35). Neste campo estão disponíveis até quatro ícones de redes de sociais, podendo redirecionar a qualquer site de rede social desejada.
     
     
• d) Assinatura + Marca UFG (Figura 36)
  
  1. 1. Tamanho (proporção) e hierarquia de tipografia
     
     • 1.1 Utiliza-se uma proporção a partir da marca da instituição UFG, um valor "X". Esse X vai determinar as distâncias entre cada elemento a fim de manter uma proporção. Existe uma hierarquia pelo uso da tipografia para a marca UFG quando utilizada conjuntamente com outra(s) unidade(s), formando assim uma assinatura visual unitária.
     • 1.2 Visualmente, utiliza-se da variação de peso na tipografia para indicar a hierarquia da assinatura UFG conjunta com outra(s) unidades. A marca da UFG tem maior peso visual em relação à tipografia. Para tal distinção hierárquica, utiliza-se a família tipográfica Myriad Pro com as seguintes versões dessa tipografia.
       
       1. UFG (1º nível) – bold;
       2. 2º nível - semi-bold;
       3. 3º nível – regular;

     • 
       Figura 36 - Exemplo de tamanho e proporção entre assinatura e marca UFG e determinação de distâncias entre elas

  2. 2. Construção das assinaturas
     
     • 2.1 Formato do arquivo .svg;
     • 2.2 Altura total da área das assinaturas 140px;
     • 2.3 Altura da assinatura 100px;
     • 2.4 Margens superior e inferior 20px;
     • 2.5 Margem esquerda 16px;
     • 2.6 Entre as assinaturas e as marcas utiliza-se um espaço de 26px, sendo 13px (1,5 X) de distância para cada assinatura em relação a proporção.
     • 2.7 Para destaque visual nas áreas do portal, utiliza-se uma área azul fazendo distinção das unidades anexas que compõem as assinaturas visuais conjuntas da UFG (Figura 34).

     • 
       Figura 37 - Medidas aplicadas

  3. 3. Hierarquia de cores das assinaturas e marca
     
     • 3.1 As assinaturas das unidades terão um destaque visual usando a cor como elemento de distinção. Assim, utiliza-se a tonalidade de código hexadecimal #ddedf1 em seu fundo para favorecer a localização do usuário durante a navegação.
     • 3.2 A área anterior às assinaturas, deve-se utilizar as cores hexadecimais (Figura 38):

     • #f0f5f9                       #ddedf1

       
       Figure 38 - Exemplo de aplicação de cores em hexadecimal.

       • a) Área não útil esquerda azul claro hexadecimal #f0f5f9;
       • b) As assinaturas devem ser aplicadas sob fundo de cor azul hexadecimal #ddedf1;
         
         
     • 3.3 A marca da UFG (símbolo e logotipo) deve ter fundo branco hexadecimal #ffffff (Figura 39).

     • 
       Figura 39 - Fundo da marca UFG branco, de hexadecimal #ffffff

     • 3.4 Assinaturas web UFG (Figura 40)
       
       • a) Recomenda-se o uso de programa de edição de imagens vetoriais para a implementação das assinaturas;
       • b) Após montagens dos padrões, deve-se transformar os texto em curvas.
       • c) Cada componente da assinatura deve ser salvo separadamente no formato SVG de acordo com os tamanhos indicados.

       • 
         Figura 40 -  Instruções para criação de assinaturas.

     • 3.5 Menu superior (Figura 41)
       
       • a) Alinhamento à esquerda e com margem de 16px;
       • b) Distância de um elemento e outro de 45px;
       • c) Tipografia (12px);
       • 
         Figura 41 - Exemplo de alinhamento e distância de elementos, bem como corpo de fonte utilizado no menu global
       • 
         Figura 42 - Exemplo de aplicação do menu superior no wireframe
         
         

 

4.3 Banner da interface inicial

A área de banner localizada na região central da interface (página) inicial do site (Figura 43 e 44) possui a função de destacar assuntos relevantes definidos pela equipe de gestão do site da Instituição/unidade, devendo ser produzido por cada unidade, de acordo com suas necessidades. Este banner possui uma largura de 1000px e 230px de altura.

Figura 43 – Posicionamento e tamanho do banner em relação ao wireframe.

 

Figura 44 - Exemplo de banner da interface inicial, no tamanho de 1000x230px

 

É recomendado que a estrutura dos banners seja composta por fotos únicas, sem fracionamento de imagens (Figura 45), respeitando o contexto de horizontalidade do projeto e evitando ruído visual, facilitando uma visualização rápida e efetiva por parte do usuário.

Figura 45 - Exemplo de aplicação de banner da forma correta

 

Figura 46 - Exemplo de aplicação de banner da forma incorreta

 

Figura 47 - Exemplo de banner no layout

 

4.4 Campo central

O campo central da interface inicial possui a função de apresentar três campos no máximo, pensado nisso sugere-se as categorias: 1) notícias, 2) editais, 3) projetos ou documentos (Figura 45). Recomenda-se o uso desta ordem dos elementos. A definição de destaque na home é atribuída pela equipe responsável pelo conteúdo do site, a partir de marcação no ato da publicação. Caso não haja marcação, o sistema adota o critério de data de postagem da notícia ou evento, para visualização na home.

Figura 48 - Exemplo de aplicação de conteúdo no campo central no wireframe, destacado pela parte colorida.

 

4.5 Interface interna

As interfaces internas são compostas por uma divisão ortogonal dos espaços (grid) que possibilita a utilização da interface em até 4 colunas, para a organização de conteúdo (texto e imagens). Quando não há imagens pertencentes à uma interface, a mancha gráfica será composta integralmente pelo texto, ocupando uma largura total de 933px com altura livre para o conteúdo. Nos wireframes projetados são apresentados os conteúdos esperados para as interfaces internas comuns a qualquer site vinculado ao Portal da UFG (Figura 49).

Figura 49 - Exemplo de conteúdo textual, sem imagens.

A configuração a seguir (Figuras 50 e 51) pode ser usada, por exemplo, para apresentação de corpo docente ou equipe, com fotos e descrição.

Figura 50 - Exemplo de conteúdo composto por imagens e descrições textuais.

 

Figura 51 - Aplicação sem índices de medidas.

 

4.6 Apresentação de docentes

A interface para a apresentação de docentes é compostas por uma lista dividida em duas colunas, (Figura 49). Quando o cursor do mouse é sobreposto sobre o nome do docente, é apresentada uma caixa de informações lateralmente (Figuras 50 e 51).

Figura 52 - Exemplo de conteúdo textual, sem imagens dos indivíduos.

 

Figure 53 - Apresentação da caixa de informações lateral, lista da esquerda, assim que o cursor do mouse posiciona-se sobre o nome do docente.

 

Figure 54 – Wireframe da apresentação de docentes.

 

4.7 Rodapé (footer)

Na campo de rodapé deve conter informações gerais sobre a unidade, sendo a apresentação final dos conteúdo das interfaces do portal (Figura 55). Nele encontram-se a assinatura ou a marca da unidade acadêmica, endereços e telefones para contato, links úteis e ícone de acesso a informação (obrigatório por lei).Assim, como em todo o portal, as margens laterais da área de conteúdo possuem um espaço de resguardo de 16px.

Figura 55 - Aplicação de conteúdo no rodapé

 

• a) Links rápidos
  
  • 1. Módulo de 1000px;
  • 2. Espaço entre colunas 12px;
  • 3. Margem de alinhamento superior de 40px;
  • 4. Tipografia (Verdana Bold 12pt = 16px);
    
    
• b) Recursos
  
  • 1. Dúvidas frequentes
    
    
• c) Divisão em 4 colunas (Figura 56)

• 
  Figura 56 – Wireframe da área de rodapé.

• • 1. Módulos 229px;
  • 2. Espaço entre colunas 16px;
  • 3. Margem de alinhamento superior de 40px;
  • 4. Margem de alinhamento inferior de 40px;
  • 5. Tipografia (Verdana Regular 9pt = 12px);
  • 6. Links (Verdana Bold 9pt = 12px)
    
    
• d) Primeira coluna
  
  • 1. Identifica marca ou assinatura do órgão ou unidade;
  • 2. Alinhado ao centro da coluna (vertical e horizontalmente);
  • 3. Altura máxima de não possui;
  • 4. Largura máxima 230px
    
    
• e) Segunda coluna
  
  • 1. Abreviatura - Nome da unidade (Verdana Bold);
  • 2. Endereço (edifício);
  • 3. Nome do Câmpus;
  • 4. CEP - Caixa postal;
  • 5. Cidade - estado – país
    
    
• f) Terceira coluna
  
  • 1. Telefone;
  • 2. Fax;
  • 3. Horário de atendimento
    
    
• g) Quarta coluna
  
  • 1. E-mail (Verdana Regular sublinhado 9pt = 12px);
  • 2. Webmail;
  • 3. Fale conosco;
  • 4. Marca de Acesso à Informação (alinhamento pela base 116px X 50px) – obrigatório por lei

• Figure 57 - Exemplo de layout