O documento fornece diretrizes de estilo para um aplicativo do Facebook para o PRECE, incluindo tipografia, layout, cores e ícones. O objetivo é transmitir familiaridade e valores do projeto de forma simples e usável para motivar voluntariado.

1. Guia de
Estilo
© 2014
GuiadeEstiloApliqueAtivo
1

2. Índice
introdução navegação
Visão Geral - pag 03
Humor e Estilo- pag 04
tipografia ícones
Tipos escolhidos – pag 05 Icones principais – pag 13
Composição da Logo– pag 06 ícones dos stickers - pag
layout mídia
Grid– pag 07
Alinhamento dos itens do cabeçalho – pag 09
Alinhamentos dos elementos de body – pag 10
Rodapé – pag 11
Rodapé exclusivo da pagina inicial – pag 11
cores
Cores utilizadas– pag 13
GuiadeEstiloApliqueAtivo
2

3. VisãoGeral
GuiadeEstiloApliqueAtivo
O projeto visa a construção de um aplicativo para facebook para o
PRECE (Programa de Educação em Células cooperativas) com uma
identidade visual própria, mas semelhante ao do projeto a que é
filiado. A intenção é transmitir para o usuário do aplicativo sensação
de familiaridade e segurança. a mensagem e valores da empresa.
Planejamos também utilizar a posição de objetos gráficos e cores
para direcionar melhor o usuário àquilo de forma simples e usável.
Por ser um projeto com iniciativa voluntária, um de nossos objetivos
é fazer com que pessoas sejam atraídas para o projeto através do
aplicativo e que o mesmo transmita esse esse espírito solidário,
além de servir como divulgação.
3

4. GuiadeEstiloApliqueAtivo
HumoreEstilo
1. Jovem
Tipos leves e sem serifa, ilustrações, cores vibrantes,
2. Informal
3. Divertido
Os elementos usados na interface sugerem descontração, levando ao usuário a
sensação de estar não fazendo um teste chato, mas algo como um jogo.
4. Motivador
Nosso principal objetivo é motivar o usuário a se tornar um voluntário do
PRECE. Criamos o aplicativo de forma atraente e familiar para que o usuário
sinta que o aplicativo foi criado para ele. O texto na página inicial contribui para
isso.
4

5. TiposEscolhidos
• Logo
Tipo: PWSchoolScript
a b c d e f g h i j k l m n o p q r s t v x y z
GuiadeEstiloApliqueAtivo
• Corpo de texto
Tipo: Ubuntu
a b c d e f g h i j k l m n o p q r s t u v x y z
Tipografia
• Elementos
Tipo: Ubuntu Light
a b c d e f g h i j k l m n o p q r s t u v x y z
5

6. Construçãodalogo
• alterações na anatomia do tipo PWSchool foram necessárias:
Original
GuiadeEstiloApliqueAtivo
Final
1º passo
União entre as letras l e i, entre i e q, t e i, i e v.
Transformação do nome em vetor para a adaptação das linhas entre as
letras. transformando-as em contínuas.
PS: cor meramente ilustrativa. No aplicativo a cor utilizada é #FFFFFF
6

7. GuiadeEstiloApliqueAtivo
Layout
O grid foi criado a partir do Grid 960 de 12 colunas . Na posição horizontal, foi apenas invertido
Grid
7

8. GuiadeEstiloApliqueAtivo
Resultando no grid a seguir. Com 12 colunas verticais e 12 horizontais
Obs: A escala das imagens a seguir não refletem o tamanho real. Seu tamanho real é observado pelo grid.
8

9. Alinhamentodositensdocabeçalho
GuiadeEstiloApliqueAtivo
Fundo
Ocupa as 12 colunas e gutters na vertical e 1 coluna na horizontal.
A logo
Foi criada ocupando 4 colunas na vertical e 1 na horizontal. Respeitando o espaço de 1gutter antes da
primeira coluna para possíveis áreas de corte.
Usuário
Da 10ª a 11º coluna na vertical. 1 coluna na horizontal (não preenchida por completo).
9

10. GuiadeEstiloApliqueAtivo
Barra de localização
Ocupa as 12 colunas na vertical e 1 na horizontal. Cada parte que a compôe ocupa 4 colunas cada.
Alinhamentos do elementos de Body
Body
Preenche 12 coluna s na vertical e 9 na horizontal.
10

11. GuiadeEstiloApliqueAtivo
Desenho lateral
Ocupa 1 coluna na vertical e 9 na horizontal. Inserido no body
Rodapé
Ocupa as 12 coluna na vertical e apenas 1 na horizontal.
11

12. GuiadeEstiloApliqueAtivo
Barra de personalidade
Ocupa 4 colunas e 4 gutters na vertical 1 coluna e 2 gutters na horizontal. Presente apenas na terceira tela.
12

13. Cores
GuiadeEstiloApliqueAtivo
13