Apliq

ueAti

vo

Guia de Estilo

© 2014

Gui

a de

Esti

lo

1

Apliq

ueAti

vo

Índice introdução navegação

Visão Geral - pag 03Humor e Estilo- pag 04

tipografia íconesTipos escolhidos – pag 05 Icones principais – pag 13Composição da Logo– pag 06 ícones dos stickers - pag

layout mídiaGrid– pag 07Alinhamento dos itens do cabeçalho – pag 09Alinhamentos dos elementos de body – pag 10Rodapé – pag 11Rodapé exclusivo da pagina inicial – pag 11

coresCores utilizadas– pag 13

Gui

a de

Esti

lo

2

Apliq

ueAti

vo

Visão Geral

Gui

a de

Esti

lo

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

Apliq

ueAti

voG

uia

de E

stilo

Humor e Estilo1. JovemTipos leves e sem serifa, ilustrações, cores vibrantes,

2. Informal 3. DivertidoOs 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. MotivadorNosso 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

Apliq

ueAti

vo

Tipos Escolhidos

• Logo Tipo: PWSchoolScripta b c d e f g h i j k l m n o p q r s t v x y z

Gui

a de

Esti

lo

• 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

Apliq

ueAti

vo

Construção da logo• alterações na anatomia do tipo PWSchool foram necessárias:Original

Gui

a de

Esti

lo

Final

1º passoUniã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

Apliq

ueAti

voG

uia

de E

stilo

Layout

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

Grid

7

Apliq

ueAti

voG

uia

de E

stilo

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

Apliq

ueAti

vo

Alinhamento dos itens do cabeçalho

Gui

a de

Esti

lo

FundoOcupa as 12 colunas e gutters na vertical e 1 coluna na horizontal.

A logoFoi criada ocupando 4 colunas na vertical e 1 na horizontal. Respeitando o espaço de 1 gutter antes da primeira coluna para possíveis áreas de corte.

UsuárioDa 10ª a 11º coluna na vertical. 1 coluna na horizontal (não preenchida por completo).

9

Apliq

ueAti

voG

uia

de E

stilo

Barra de localizaçãoOcupa as 12 colunas na vertical e 1 na horizontal. Cada parte que a compôe ocupa 4 colunas cada.

Alinhamentos do elementos de BodyBodyPreenche 12 coluna s na vertical e 9 na horizontal.

10

Apliq

ueAti

voG

uia

de E

stilo

Desenho lateralOcupa 1 coluna na vertical e 9 na horizontal. Inserido no body

RodapéOcupa as 12 coluna na vertical e apenas 1 na horizontal.

11

Apliq

ueAti

voG

uia

de E

stilo

Barra de personalidadeOcupa 4 colunas e 4 gutters na vertical 1 coluna e 2 gutters na horizontal. Presente apenas na terceira tela.

12

Apliq

ueAti

vo

Cores

Gui

a de

Esti

lo

13