Teste - 04

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 28 - Wireframe geral da interface inicial. [IMAGEM ALTERADA]

 

4.1 Área de acesso ao governo

A barra de Identidade Visual do Governo Federal (Figura 29) 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 29 - Á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 30 - Wireframe do topo. [IMAGEM ALTERADA]

 

Dimensões:

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

 

Conteúdo:

• a) Área de acessibilidade
  
  • 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 31 e 32). 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. O elemento tipográfico do botão, descritor, usa a tipografia Verdana em sua versão Bold com corpo de 12px na cor branca (#FFFFFF).
    
    

  • 
    Figure 31 - Portal UFG presentando a barra de acessibilidade expandida. [IMAGEM ALTERADA]

  • 
    Figura 32 - Botão de acessibilidade­ [IMAGEM ALTERADA]
    
    

  • 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).

  • 
    Figura 33 - Construção do botão de acessibilidade. [IMAGEM ALTERADA]
    
    

     

  • 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.
    
    

  • 
    Figura 34 - Esquema cromático do contraste de tela na cor azul [IMAGEM ALTERADA]
    
    

  • 
    Figura 35 - Esquema cromático do contraste de tela na cor preta [IMAGEM ALTERADA]
    
    

  • 
    Figura 36 - Esquema cromático do contraste de tela na cor amarela [IMAGEM ALTERADA]
    
    

• c) Área de Redes Sociais;
  
  

  1. 
     Figure 37 - Menu de redes sociais. [IMAGEM ALTERADA]

  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é oito ícones de redes de sociais, podendo redirecionar a qualquer site de rede social desejada.
     
     
• d) Assinatura + Marca UFG (Figura 38)
  
  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 38 - Exemplo de tamanho e proporção entre assinatura e marca UFG e determinação de distâncias entre elas [IMAGEM ALTERADA]

  2. 2. Construção das assinaturas
     
     • 2.1 Formato do arquivo .svg;
     • 2.2 Altura total da área das assinaturas 100px;
     • 2.3 Altura da assinatura 100px;
     • 2.4 Margens superior e inferior 16px;
     • 2.5 Margem esquerda 16px;
     • 2.6 Entre as assinaturas e as marcas utiliza-se um espaço de 24px, sendo 14px de distância entre a assinatura da UFG e a área de assinatura da unidade e 10px entre a área de assinatura da unidade a própria assinatura.
     • 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 39 - Medidas aplicadas [IMAGEM ALTERADA]

  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 40 - 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 41 - 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 43 - Instruções para criação de assinaturas. [IMAGEM ALTERADA]

          

 

Para baixar as marcas da UFG para o topo e o menu com rolagem, clique aqui.

 

4.3 Banner da interface inicial

A área de banner localizada na região central da interface (página) inicial do site (Figura 44 e 45) 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 46 – Posicionamento e tamanho do banner em relação ao wireframe. [IMAGEM ALTERADA]

 

Figura 47 - Exemplo de banner da interface inicial, no tamanho de 1000x230px [IMAGEM ALTERADA]

 

É 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 48 - Exemplo de aplicação de banner da forma correta

 

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

 

Figura 50 - 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 51). 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 51 - 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 52).

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

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

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

 

Figura 54 - Aplicação sem índices de medidas. [IMAGEM ALTERADA]

  

4.6 Apresentação de docentes

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

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

 

Figure 56 - 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 57 – 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 58). 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 58 - 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 59)

• 
  Figura 59 – 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 60 - Exemplo de layout

 

4.8 Dimensionamento do menu com rolagem

Quando houver rolagem do site passar do topo, há o dimensionamento do menu que fica fixo de forma flutuante sobre o site, contanto a assinatura da unidade, a marca da UFG e os botões de acesso do menu, busca e acessibilidade. (Figura 61)

Figura 61 - Dimensionamento do menu 

 

 

Figura 62 - Métricas do menu dimensionado