Openredu Graphic User Interface (G.U.I. 1.3.9a)

Graphic User Interface:
Guidelines & Components

v1.3.9a
ndice
p. 03
Estruturao dos prottipos em vetor
p. 04
Princpios
p. 05
Cores
p. 06
Grid & Modelo de Corpo
p. 07
Tipografia
p. 08
Tabelas
p. 09
Listas
p. 18
Formulrios
p. 21
Botes
p. 22
Navegao
p. 27
Alertas & Avisos
p. 28
Janela Modal
p. 29
cones & Smbolos
p. 31
Outros
Verso 1.3.9a
02 de agosto, 2013
Estruturao dos prottipos em vetor

Layers
As layers (camadas) buscam representar as
pginas e subpginas dos prottipos em vetor.
Alguns elementos so considerados essenciais e
comuns s pginas, portanto eles devem estar
sempre visveis e so marcados com um
asterisco (*) antes de seu nome.
As pginas do arquivo esto representadas por
seu nome na hierarquia do Redu. Dentro de uma
layer, havero outros elementos fixos relativos
pgina em questo e tambm representados
por um asterisco e suas subpginas,
significando um nvel a mais na hierarquia de
navegao. Elas so antecedidas pelo hfen (),
seguindo-se de outro hfen para um
subsequente avano. Por exemplo: Em Planos
(Planos), a pgina seguinte a lista de planos
associados a um curso (Lista de Planos). Ao
se clicar no curso, voc ver os detalhes de
utilizao do mesmo (Detalhes).
Observao
A correta nomenclatura das layers e seus objetos
estar alocada nos documentos locais, tais
como: Incio.ai, Disciplina.ai etc.
p. 03
Propriedades dos elementos

O CSS trabalha com diversas propriedades
grficas que podem ser simuladas pelo Adobe
Illustrator.
Normalmente, uma div representada por um
agrupamento de elementos. Os espaamentos
margin e padding, caso no sejam declarados,
podem ser obtidos atravs do espao existente
ou de formas retangulares em vetor (shapes
vazios que, com seu dimensionamento,
representam a distncia entre os elementos).
A janela Transform (Shift + F8) utilizada para
obter as coordenadas espaciais (X e Y) do
elemento selecionado e suas propriedades
width e height.
J a Appearance (Shift + F6) indica os efeitos
grficos aplicados a um vetor, tendo por
correspondentes no CSS: border-radius,
box-shadow, text-shadow e opacidade
(rgba).
Color (F6) mostra as cores de preenchimento
(color) e borda (border). Em Gradient
(Command + F9) podem ser obtidas todas as
informaes pertinentes construo de um
gradiente (*-gradient) no CSS3, como tipo
(linear ou radial), cor de incio e fim, posio da
transio e orientao.
Para todas as informaes tcnicas relativas a
espaamento, bordas, gradientes, sombras,
cores e tamanhos, utilize os arquivos .ai com
Adobe Illustrator CS5 ou superior.
Princpios
1. Simplicidade
Os espaos negativos devem ser elementos fundamentais de composio;
O contraste deve ser usado para enfatizar;
Formas simples, de fcil entendimento.
2. Dinamismo
O uso de grafismos e smbolos complementam a informao;
A composio visual deve aliar movimento forma;
Animaes so importantes. Devem transmitir fluidez, responsividade e (menos comumente) surpresa;
Os elementos grficos podem ser usados de maneira incomum e criativa.
3. Diverso
A comunicao deve conter, de maneira sutil, bom humor;
A interatividade do usurio com a interface deve ser estimulada;
O uso de gamification deve ser estimulado se trouxer estmulos e valor para todos os pblicos.
4. Diversidade
Misturas, adies e subtraes de cores, formas e elementos devem ser estimulados.
5. Transparncia
A comunicao textual / verbal deve ser transmitida de maneira explcita e concisa;
A interface deve prover feedback a uma ao requisitada pelo usurio;
Elementos grficos que demonstrem a idia de transparncia devem ser estimulados.
6. Compromisso
Seriedade (em uma dosagem controlada) importante;
Ter empatia e atender expectativas.
p. 04
A interface grfica do Redu consiste em espaos de trabalho com tonalidades que vo do branco ao
cinza e com realces pontuais coloridos. O branco tido como uma rea de foco no contedo, que
envolve textos e materiais multimdias.
Esses espaos de trabalho devem fortalecer e envolver o contedo do usurio, sem competir nem gerar
rudo grfico. Por isso, o cinza como cor de fundo fundamental para haver neutralidade. O contedo
o motivo do produto existir. Deve-se poder expandir, ampliar, comentar, guardar
O sistema cromtico composto, basicamente, de uma cor principal azul que reala e comunica
aes, links, locais e objeto. Ela complementada por outras duas, sempre relacionadas s causas e
consequncias. No caso, verde para sucesso, adio; vermelho para alerta, importncia.
A tipografia deve ser bsica, simples; se for para informar metadados, deve-se utilizar um cinza forte no
entanto, interessante haver contrastes com o que for realmente importante: nomes, aes, links, etc.
Ttulos de locais devem ser grandes, seguindo a escala proposta, e cinzas chamam ateno para si de
forma sutil, pela cor neutra. No tocante ao contedo, devem ser sempre preto.
Feedback visual, ou a responsividade da interface perante s interaes do usurio, deve ser composto
por trs segmentos:
1. Comunicao em forma de texto (explicar o qu, quando e como);
2. Animaes (expandir informaes ocultas, prover sensao de continuidade qualquer ao);
3. Justaposies (interaes mais complexas que podem ser feitas sem tirar o usurio de seu contexto
atravs de janelas modais postas em cima da interface original com uma leve camada semitransparente
escura de fundo).
cones e smbolos so um importante elemento do sistema visual da interface. Eles personificam,
comunicam, complementam a linguagem escrita utilizando-se de outra linguagem a visual e
tambm divertem.
Por fim, a marca do Redu e Redutech nunca devem se sobrepor marca do usurio/instituio.
Cores
p. 05
As paletas de azuis, verdes, laranjas, vermelhas e cinzas tm ao todo 25 cores que interagem com o preto
e branco. Suas especificaes devem ser sempre em RGB.
As cores azuis esto associadas s aes primrias e representam sees ativas, hyperlinks e ttulos. Os
verdes, por sua vez, associam-se a aes que foram (ou sero) resultados de algo positivo e esperado
pelo usurio. O vermelho est relacionado ao erro. O laranja, avisos que peam uma ateno
diferenciada.
O cinza compe a base para a relao do preto no branco fundamental na esttica da interface. As
suas tonalidades representam tanto reas como superfcies de aspecto tridimensional.
black
white
R: 219
G: 239
B: 247
R: 115
G: 195
B: 230
#1
R: 225
G: 241
B: 225
R: 77
G: 173
B: 214
#2
R: 171
G: 227
B: 133
#1
R: 255
G: 220
B: 220
R: 95
G: 192
B: 128
R: 255
G: 109
B: 109
R: 255
G: 238
B: 215
#3
#2
R: 193
G: 39
B: 45
#4
R: 255
G: 124
B: 53
#3
R: 230
G: 230
B: 230
#2
#4
R: 225
G: 39
B: 45
R: 255
G: 169
B: 53
R: 240
G: 240
B: 240
#1
#3
#2
#1
#4
R: 97
G: 160
B: 128
R: 232
G: 59
B: 59
R: 255
G: 200
B: 0
R: 247
G: 247
B: 247
#3
#2
#1
R: 21
G: 138
B: 196
R: 243
G: 94
B: 0
#4
R: 204
G: 204
B: 204
#3
#5
R: 243
G: 74
B: 0
#5
R: 179
G: 179
B: 179
#4
#6
R: 109
G: 110
B: 111
#5
#6
Grid & Modelo de Corpo
p. 06
Navegao Global
Navegao Local
Ambientes, Cursos, Disciplinas, Aulas, Perfis, Central de Ajuda, Central de Dev.
Navegao Local
Incio
Infos Contextuais
960px;
16 colunas;
Largura: 40px em cada coluna;
Margens: 10px esquerda & 10px direita em cada coluna.
Bloco com 3 colunas
Exemplo: bloco de 3 colunas de

largura (160px) e suas margens
sobressalentes (10px por lado).
Exemplo: modelo de corpo de uma pgina do Redu. Este corpo ser

utilizado em diversas reas, como Incio, Disciplinas, Perfis etc. As
sombras no topo e base so tambm utilizadas nas linhas horizontais
separadoras (mesmas especificaes).
Tipografia
* Textos RTF so pginas geradas a partir de um editor RTF, como Aulas e Wiki.
** = margin-top; = margin-bottom
*** font-family (font-weight) font-size/line-height letter-spacing
Museo Sans (300, 500, 700, 900) a principal

fonte institucional, sendo complementada pela
Museo Sans Rounded (100, 300, 500) em ttulos
grandes. Para os corpos de texto, utiliza-se
Helvetica Neue ou Arial. Em Textos RTF*, so
utilizados 4 tipos de cabealho:
Listas
RTF
Heading 2 (ttulo);
Heading 3 (peso 700 e margins)**
Heading 4 (peso 700 e margins) e
Heading 5 (peso 700 e margins).
margins: 9px 18px
Lista no ordenada;
Lista no ordenada;
Lista no ordenada;
Lista no ordenada;
Lista no ordenada.
1. Lista ordenada;
2. Lista ordenada;
3. Lista ordenada;
4. Lista ordenada;
5. Lista ordenada.
Lista descritiva
Uma lista descritiva
importante para definir
termos. Indentao
padro: 18px
Head 1
Museo Sans Roun. (100) 60px/56px -4px ***

Helvet. N. | Arial (100) 60px/56px -4px
Heading 2
Museo Sans (300) 36px/36px -2px

Helvet. Neue | Arial (300) 36px/36px -2px
Heading 3
(900) 28px 9px

(bold)
Museo Sans (700) 21px/26x -1px

Helvet. Neue | Arial (reg) 21px/26px -1px
Heading 4
(900) 18px 9px

(bold)
Museo Sans (700) 18px/21px -1px

Helvet. Neue | Arial (bol) 18px/21px -1px
Heading 5
(700) 18px 9px

(bold)
Museo Sans (500) 16px/18px 0px

Helvet. Neue | Arial (reg) 16px/18px 0px
Heading 6
Heading 7

H. Neue (300) | Arial (300) 16px/18px 0px
H. Neue | Arial (bold) 14px/18px 0px
Inline labels
NOVIDADE

text-shadow: 0px 1px 0px #branco
AVISE-ME

text-shadow: 0px -1px 0px #vermelho4
ONLINE

text-shadow: 0px 1px 0px #branco
DVIDAS

text-shadow: 0px -1px 0px #laranja5
Cores: links de texto

Hyperlink de texto.
Hyperlink de texto.
Hyperlink de texto.
ativo; #azul3
hover; #azul4
visitado; #azul2
Exemplo de um pargrafo de texto. A tipografia da interface utiliza uma altura de linha mnima
de 18px (exceto em legendas e hyperlinks secundrios dentro do menu), combinando com a
altura dos cones. Elemento em negrito strong serve para indicar importncia
adicional sentena. nfase utilizada para reforar uma idia.
Bom, isto um exemplo de blockquote, usado para citar a frase ou pensamento
de outrem.
Nome precedido por trao eme.
Sans-serif (regular) 13px/18px 0px
200 caracteres restantes (legenda)
(regular) 11px/14px 0px
Hyperlink de nome.
(bold)
Hyperlink de pargrafo.
(regular)
Hyperlink de um item secundrio / ao.
(regular) 11px/11px 0px
@code {lucida console(reg); font-h:13px; line-h:18px; l-s:0;}
Tabelas
p. 08
Tabela com checklist
Ttulo
Ttulo
Contedo de uma clula.
Assunto
Lorem ipsum sit dolor amet, consectetur?
Nome Sobrenome
Nome Sobrenome
hover
Ttulo
Ttulo


hover
Ttulo
Ttulo
Hyperlink de uma clula.
Hyperlink de uma clula
hover
Enviada de
Nome Sobrenome
7 Fev, 2012, 14h30

7 Fev, 2012, 14h30
7 Fev, 2012, 14h30
Deletar selecionados
Assunto
Enviada de
Nome Sobrenome
Nome Sobrenome
Nome Sobrenome
7 Fev, 2012, 14h30

7 Fev, 2012, 14h30
7 Fev, 2012, 14h30
Deletar selecionados
Toda a linha um link,

podendo haver sublinks
Listas
p. 09
Lista de Cursos
Curso Lorem Ipsum
MATRICULADO
PRIVADO
Por: Nome Sobrenome

40
40
160 horas
20 disciplinas
100 professores
100 tutores
100 alunos
Quisque eget erat ut urna bibendum viverra. Curabitur et lectus enim, a iaculis urna. Nunc accumsan purus
congue ipsum fermentum at laoreet neque vestibulum. In viverra semper sem sed mattis. Nulla facilisi.
tags, tags, tags, tags, tags
Curso Lorem Ipsum
ABERTO
Gerenciar
Por: Nome Sobrenome

160 horas
20 disciplinas
100 professores
100 tutores
100 alunos
Quanto o usurio for administrador,

o link Editar aparece no canto
superior direito e a label
Matriculado eliminada.
Listas
p. 10
Lista de Disciplinas
Disciplina Vestibulum Scelerisque
Editar
Por: Nome Sobrenome

Aulas: 20
20
20
200 pedidos de ajuda (+20)
Mural da Disciplina: 2.000 conversas
20.000 respostas (+20)
Arquivos de Apoio: 200 arquivos


Por: Nome Sobrenome
Aulas: 20
20
20
200 pedidos de ajuda (+20)
Mural da Disciplina: 2.000 conversas
20.000 respostas (+20)
Arquivos de Apoio: 200 arquivos

Editar
Listas
p. 11
Lista de Mdulos & Aulas
Lorem ipsum sit dolor amet
10
Aula de vdeo lorem
Aula de vdeo lorem
2000
NOVO
1000
+5
Lorem ipsum sit dolor amet
+10
10
Aula de vdeo lorem
Aula de vdeo lorem
NOVO
+5
+10
Aula de vdeo lorem
NOVO
+5
+10
2000
1000
100 pedidos de ajuda

10 novos pedidos
Editar
Exemplo de mdulo visualizado por

um usurio administrador.
Listas
p. 12
Lista de Ambientes-Cursos-Disciplinas
Universidade Voluptat Metus

Hover no ttulo do Ambiente
Curso Lorem Ipsum

2 Disciplinas
Curso Lorem Ipsum

2 Disciplinas
40
40
40
40
Curso Lorem Ipsum

Curso
Lorem Ipsum
2
Disciplinas
40
40
40
40
Curso Lorem Ipsum

Curso
Lorem Ipsum
2
disciplinas
40
40
40
40
2 disciplinas
2 Disciplinas
Curso Lorem Ipsum
Curso Lorem Ipsum
Curso Lorem
Ipsum
Universidade
Voluptat
Metus
20
20
20
20
20 de colapsar lista de Disciplinas

Hover20
no boto
20 20
Disciplina
Vestibulum
20 20
Curso
Lorem
Ipsum Scelerisque
40 40
Disciplina
Vestibulum
Scelerisque
20 20
2 disciplinas
Curso Lorem Ipsum

2 disciplinas

Curso Lorem Ipsum
40
2 Disciplinas
40
40
2 Disciplinas
40
2 disciplinas
20
20
2 disciplinas
20
20
20
20
40
40
40
40
Hover no ttulo
do Curso
20 20
Curso Lorem Ipsum
Curso Lorem Ipsum
40
Curso Lorem
Ipsum
Universidade
Voluptat
Metus
Curso
Lorem
Ipsum Scelerisque
Disciplina
Vestibulum
Curso Lorem Ipsum
40
Curso Lorem Ipsum

Hover no ttulo
da Disciplina
20 20
20
20
Listas
Anatomia de um post
Nome Sobrenome comentou no Mural de Nome Sobrenome:

7 Fev, 2011, 16h25
(width)
32px 10px (margin)
(height)
34px
10px (margin)
descrio
18px (line-height)
data
11px (line-height)
10px (margin)
Cras id risus libero, ut condimentum ante. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos.
Nome Sobrenome respondeu:
8 Fev, 2011, 16h25
Phasellus pretium interdum ligula eget fringilla. Maecenas quam est.

contedo
9 Fev, 2011, 16h25

aes permitidas ao usurio
10px (margin)
11px (line-height)
Responder
42px (margin)
thumbnail
descrio
contedo
aes
7 Fev, 2011, 16h25
Post de texto (status / comentrio)

7 Fev, 2011, 16h25
Visualizando as ltimas respostas...
Cras id risus libero, ut condimentum ante. Class aptent taciti sociosqu ad?
Responder
Em incio de tpicos, nos posts primrios: margin [bottom] 2px

8 Fev, 2011, 16h25

Digite sua resposta ao comentrio acima
9 Fev, 2011, 16h25

Mostrar todas as 22 respostas
Responder
Cancelar
Postar
Listas
p. 14
Post originado de um Ambiente (visualizado pela Viso Geral)
Post contendo um link (pr-visualizao)

Modelo sem thumbnail
Universidade Voluptat Metus > Curso Lorem Ipsum
Nome Sobrenome criou a Disciplina
7 Fev, 2011, 16h25
Dummy Text Discipline
http://www.youtube.com/watch?v=2kq3kEOPyec
Universidade Voluptat Metus > Curso Lorem Ipsum > Disciplina Vestibulum > Mdulo Not
Nome Sobrenome publicou a Aula
7 Fev, 2011, 16h25
Aula de vdeo lorem
Nome Sobrenome comentou na Aula
7 Fev, 2011, 16h25
Aula de vdeo lorem
Redu Experimento na Escola do Recife

www.youtube.com
Neste vdeo so apresentados os resultados de uma experincia de uso do Redu
na Escola do Recife, PE.
Cancelar
Cras id risus libero, ut condimentum ante. Class aptent taciti sociosqu

ad litora torquent per conubia nostra, per inceptos himenaeos.
Responder
Enviar
Modelo com thumbnails. Em caso de apenas um, os botes de seta desaparecem
http://www.youtube.com/watch?v=2kq3kEOPyec
Post dentro de um Ambiente

Nome Sobrenome publicou a Aula
7 Fev, 2011, 16h25
Aula de vdeo lorem
Nome Sobrenome comentou na Aula
7 Fev, 2011, 16h25
Aula de vdeo lorem
Cras id risus libero, ut condimentum ante. Class aptent taciti sociosqu

ad litora torquent per conubia nostra, per inceptos himenaeos.

www.youtube.com
Neste vdeo so apresentados os resultados de uma experincia
de uso do Redu na Escola do Recife, PE.
Listas
p. 15
Post contendo um link (visualizao)
Lista de Ambientes (Ambientes que Participo)

7 Fev, 2011, 16h25
Administrado por Nome Sobrenome

SIGLA
www.youtube.com
Neste vdeo so apresentados os resultados de uma
experincia de uso do Redu na Escola do Recife, PE.
Responder
300 Membros
10 Cursos
Lista de Cursos
Curso Lorem Ipsum Metus

Criado por Nome Sobrenome
300 Membros
Lista de Recursos Educacionais Abertos (em Incio)
Aplicativo Educacional
Autor: UNESCO
Ensino Mdio
Portugus
Cincias Exatas: Matemtica
Abrir
200
Autor: UNESCO
Ensino Mdio
Portugus
10
200
Abrir
10
Autor: UNESCO
Ensino Mdio
Portugus
Abrir
10
200

Criado por Nome Sobrenome
Autor: UNESCO
Ensino Mdio
Portugus
Lista de Disciplinas
Curso Lorem Ipsum Metus
Abrir
200
10
10
Disciplina Vestibulum Scelerisque Metus
10
Listas
p. 16
Lista de Membros
Lista de Recursos Educacionais Abertos
Autor: UNESCO
Ensino Mdio
Lngua: Portugus
rea: Cincias Exatas: Matemtica
200
10
10
Nome Sobrenome
Nome Sobrenome
Professor
22 contatos em comum
Professor
Nome Sobrenome
Nome Sobrenome
Professor
Professor
Lista de Contatos
Autor: UNESCO
Ensino Mdio
Lngua: Portugus
200
Todos os thumbs so links
Lista de Recursos Educacionais Abertos (Aplicativos Favoritos)
Nome Sobrenome
Nome Sobrenome
Profisso
Profisso
Nome Sobrenome
Nome Sobrenome
Profisso
Profisso
Como se formam os ventos

Autor: Gama, Paulo; Paiva, Rubens; Estilingue Filmes
Ensino Mdio
Lngua: Portugus
rea: Geografia: Questes ambientais, sociais e econmicas
200
10
Autor: UNESCO
Ensino Mdio
Lngua: Portugus
200
10
Abrir
Lista de Colegas de Curso
Todos os thumbs so links
Nome Sobrenome
Nome Sobrenome
Professor
Curso Lorem Ipsum
Professor
Curso Lorem Ipsum
Nome Sobrenome
Nome Sobrenome
Professor
Curso Lorem Ipsum
Professor
Curso Lorem Ipsum
Listas
p. 17
Lista de artigo na Wiki

Lista de versionamento na Wiki
Nome Sobrenome
7 Fev, 2011, 16h25
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque est
eget felis rhoncus laoreet. Quisque pulvinar faucibus tincidunt. Integer...
2 -
Etiam consectetur tellus ac vehicula sodales, lectus lectus vestibulum arcu, sit
amet luctus nisl nunc nec magna. Phasellus in fermentum neque. Cras ornare
diam in nunc fermentum id convallis purus euismod. Praesent interdum, neque a
dictum gravida, nibh turpis pulvinar quam, eget pretium dui lectus non felis.
Etiam consectetur, tellus ac vehicula sodales, lectus lectus vestibulum arcu, sit
amet luctus, nisl nunc nec magna. Integer consequat turpis et diam ullamcorper...
Nome Sobrenome
7 Fev, 2011, 16h25

1 +
2 -
2 +
Observe tambm que os elementos de percepo social esto em sua

capacidade mxima (4 dgitos ou 30 pixels de largura).
Verso atual do artigo.
1 +
2 +
2000
Exemplo de um artigo na Wiki com thumbnail fofinho cute :-)
Voltar para esta verso
Nom
Lista-boto
This is the lists hyperlink.
Lista boto
Lista mista (boto e lista)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque est
eget felis rhoncus laoreet. Quisque pulvinar faucibus tincidunt. Integer...
Etiam consectetur tellus ac vehicula sodales, lectus lectus vestibulum arcu, sit
amet luctus nisl nunc nec magna. Phasellus in fermentum neque. Cras ornare
diam in nunc fermentum id convallis purus euismod. Praesent interdum, neque a
dictum gravida, nibh turpis pulvinar quam, eget pretium dui lectus non felis.
Etiam consectetur, tellus ac vehicula sodales, lectus lectus vestibulum arcu, sit
amet luctus, nisl nunc nec magna. Integer consequat turpis et diam ullamcorper in
molestie velit gravida. Nam leo magna, ornare at suscipit eget, elementum in
antenorium.
Nom
Curso Lorem Ipsum
40
2 Disciplinas
Boto
Link
Lista com contedo

This is the lists content.
This is the zebra-styled lists content.
This is the zebra-styled lists content.
Lista
40
Formulrios
p. 18
Padres
Label
Descrio
Label
Descrio
Label
Digitando...
200 caracteres restantes.
Label
Valor digitado
Seleo
Seleo
Seleo
Data
Formulrio desativado
Descrio
rea de texto
Descrio
Sucesso
Descrio
Sucesso
Descrio
Sucesso
Digitando...
Erro
Descrio
Erro
Descrio
Erro
Digitando...
__/__/____
Erro
Lista de opes
Hm... acho que aconteceu algum erro aqui.
Opo um;
Opo dois;
Opo trs: o comportamento de mais de uma linha
exemplificado nesta opo;
Opo quatro.
Descrio
Lista de opes
Opo um;
Opo dois.
Formulrios
p. 19
Arquivo
Lista de opes com texto
Nenhum arquivo selecionado.
Search
Pesquise...
Descrio
Search com filtros
Pesquise...
Srgio Designer
Descrio
O formulrio Search poder aumentar

de tamanho quando estiver ativo.
Exemplo de uso: GitHub.
Srgio Fontes
Designer
Perfis
Srgio Fontes
Designer
Ambientes de Aprendizagem
Digitando uma alternativa...
Como no ser um designer

Curso
Pesquise...
Busca Geral
Descrio
Perfil
Ambiente
Sua pesquisa...
Digitando...
Formulrios
p. 20
Label empilhado (modelo)
Tamanho alternativo (el godzilla)
Label
Descrio
Larguras padro dos formulrios

Descrio
Descrio
Descrio
3 col. (160px)
4 col. (220px)
Label
Descrio
Label
Descrio
Label
Digitando...
Label
Valor digitado
5 col. (280px)
Rich Text Format

Descrio
Descrio
Descrio
Descrio
6 col. (340px)
7 col. (400px)
8 col. (460px)
9 col. (520px)
Devem existir duas possibilidades de formatao

de texto na interface. Na mais bsica,
disponibilizado um estilo padro de texto,
havendo distino para links.
Mais completa, a segunda categoria permite ao
usurio diferenciar tipos de estrutura semntica
(como ttulos, subttulos, corpo de texto e
nfase); tipos de pargrafos (alinhamento, cor);
alm de adicionar elementos grficos como
imagens e links. S ser possvel ter esse
controle sobre a formatao do texto em aulas.
Formatao de texto avanada:

Bold, italic, strikethrought;
Paragraph format
1. Seo (Heading 3);
2. Subseo primria (Heading 5);
3. Subseo secundria (Heading 7);
3. Corpo de texto (Body);
4. Cdigo (Body).
Font-family
a. Sans-serif (Helvetica/Arial);
b. Serif (Georgia).
Subscript & superscript;
Ordered list, unordered list;
Alignment (left, center, right);
Indent (increase, decrease);
Insert image, table & anchor;
Maximize RTF Editor.
Botes
p. 21
Padres
Tamanho alternativo (el godzilla)
Primrio
Padro
Sucesso
Perigo
Normal
Primrio
Padro
Sucesso
Perigo
Hover
Primrio
Padro
Sucesso
Perigo
Padro
Sucesso
Perigo
Active hover (filter)
Primrio
Padro
Sucesso
Perigo
Desativado
Adicionar
Carregando...
Sucesso
Padro
Normal
Primrio
Sucesso
Padro
Hover
Primrio
Sucesso
Padro
Padro
Primrio
Sucesso
Padro
Desativado
Active (pressed)
Primrio
Com cones
Primrio
Active
(pressed / hover)
Navegao
p. 22
Navegao global (logado & deslogado)

Redu Rede Social Educacio
redu.com.br/ambientes
Incio
Incio
Ambientes
Ambientes
Aplicativos
Pesquise...
Quanto o Redu custa?
Grid: inicio
Grid: fim
Redu Rede Social Educacio

redu.com.br
Voc ainda no se
identificou no Redu.
No possui conta? Cadastre-se, grtis
Entre no Redu
Entre com sua conta para acessar seus cursos, aulas e amigos.
Login
Seu login ou e-mail cadastrado
Senha
Sua senha
Mantenha-me conectado
Entrar
Esqueceu seu login ou senha? Clique aqui
Footer
Quando Custa
Central de Ajuda
Desenvolvedores
Siga-nos
na web
Blog
Poltica de Privacidade
Termos de Uso
Tudo o que encontrar aqui pode ser copiado, modificado, distribudo e reutilizado,
desde que algumas condies sejam respeitadas e as previstas em lei. Observe tais
condies em cada contedo.
CNPJ: 12.359.885 / 0001-07
Botes da Navegao Global

Normal
Hover
Incio
Incio
Incio
Incio
Notificaes: 3
Ambientes
Ambientes
Nome Sobrenome quer se conectar a voc

7 Jan, 2011, 16h25
Recusar ou Aceitar
Active (pressed)
Incio
Incio
Ambientes
Notificaes: 3
AConvites:
label com2as novidades ir
sumir assim que o dropwdown
for fechado (colapsado).
Nome Sobrenome quer se conectar a voc
7 Jan, 2011, 16h25
Recusar ou Aceitar
Ttulos dos Portais
Convites: 2
Nome Sobrenome publicou o mdulo Lorem

Ipsum Sit Dolor na disciplina Consectetur Amet
7 Jan, 2011, 16h25
Portal de
Portal de
Nome Sobrenome respondeu ao seu comentrio
Aplicativos
Aplicativos
Nome Sobrenome publicou o mdulo Lorem

Ipsum Sit Dolor na disciplina Consectetur Amet
7 Jan, 2011, 16h25
Nome Sobrenome lhe convida a participar do
Meu Perfil
Mensagens (5)
Configuraes
Parceiro
Sair

no seu mural
7 Jan, 2011, 16h25
Nome Sobrenome lhe convida a participar do

curso Curso Lorem Ipsum
7 Jan, 2011, 16h25
Recusar ou Aceitar

no mural da disciplina Consectetur Amet
7 Jan, 2011, 16h25
no seu mural
7 Jan, 2011, 16h25
Nome Sobrenome
Mostrar todas as atualizaes
editar
Recusar ou Aceitar

no mural da disciplina Consectetur Amet
Navegao
p. 24
7 Jan, 2011, 16h25
Ex.: menu da Disciplina
Mostrar todas as atualizaes
Breadcrumbs
Curso Lorem Ipsum
Usado para dar percepo de hierarquia e localizao. Localizado abaixo do contedo.
Aulas
99+
Mural
Wiki
Ex.: menu da Aula
Aulas
99+
1. Aula de vdeo lore...

Mural
10
Arquivos de Apoio
Membros
Wiki
5
5
1 nvel
2 nvel
3 nvel
10
Arquivos de Apoio
99+
Membros
Curso Lorem Ipsum
99+
99+
99+
Ex.: menu contextual
Os nveis anteriores so representados pelos cones azuis. O nvel atual pela moldura de sombra azul.
Ambientes: 10
Navegao local
Viso Geral
Meu Mural
Ex.: aes contextuais
Cursos matriculados: 50
Viso Geral
Ambientes
99+
Meus Favoritos
Configuraes
Minhas Conexes
Ex.: menu da Viso Geral
Aula finalizada?
Aula finalizada
Colegas de Curso: 1.800
Hover
Mensagens
Contatos: 200
Configuraes
99+
Hover
Pedir ajuda
Voc na Disciplina:
1. Aula de v...
1. Aula de v...
Aulas: 4 / 20
Aulas: 4 / 20
Aulas: 4 / 20
20%
Comentrios: 200
Dvidas: 200
20%
Mdulos: 1 / 5
20%
20%
Mdulos: 1 / 5
20%
Navegao
Cabealhos (Incio)
Gerenciamento
Universidade Volupta...
Autor:
brenome
edio por:
brenome
Configuraes / Planos / Detalhes

Cabealho visto a partir do terceiro nvel de hierarquia. No caso, a pgina Detalhes

Cabealho visto a partir do terceiro nvel de hierarquia com hover no primeiro nvel
Gerenciamento
Curso Lorem Ipsum

Gerenciamento
Curso Lorem Ipsum
Gerenciamento
Disciplina Vestibulum Scelerique
Cabealho visto a partir do terceiro nvel de hierarquia com hover no segundo nvel
Cabealhos (Ambientes)
Universidade Voluptat...
Gerenciamento
Curso Lorem Ipsum
Gerenciamento
Gerenciamento
Por:
Nome Sobrenome
Mdulo Lorem ipsum sit dolor

Cabealho de um Ambiente na perspectiva de um aluno. Os cabealhos ao lado so visto sob a
perspectiva de um gestor um aluno os veria sem o menu do Gerenciamento.
20
200
1. Aula de vdeo lorem
100
100
Navegao
p. 26
Filtros (Viso Geral)
Abas & sub-abas

Perfil
Subnvel da aba
Conta
Planos
Conexes
Hover
Currculo
Biografia
Tudo
Conexes
Currculo
Biografia
Disciplina Vestibulum Sc...
Aulas
Todos os Cursos e Disciplinas

Curso Lorem Ipsum
Cursos
Ativo
Currculo
Biografia
Cursos

Abas (el godzilla)
Curso Lorem Ipsum
Cursos
Ativo hover
Recursos Educacionais Abertos
Aplicativos Favoritos
Tudo
Conexes
Cursos
Todos
Paginao
Mostrar mais...
Aulas
Comentrios
Dvidas
Filtros
100 professores
100 tutores
100 alunos
Hover
100 professores
100 tutores
100 alunos
Active (pressed)
Aluno
Com dropdown
Alertas & Avisos
p. 26
27
AJAX spinners
Tooltip
Cinza: utilizado nas requisies feitas em botes. Moldura: 16px de largura, 18px de altura.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices porta nisl.
Descrio secundria
Azul: utilizado nas requisies feitas em links de texto e botes.. Moldura: 16px de larg., 18px
de altura.
Azul horizontal: utilizado em links secundrios de texto. Moldura: 16px de larg., 11px de altura.
Popover
Ttulo do popover
Mensagens do sistema (sobrepostas)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Mauris ultrices porta nisl, at tempor nunc commodo eu.
Phasellus pulvinar euismod turpis nullam.
Ops! Quando alguma coisa no funciona bem, este aviso mostrado...
Muito bem! Pelo visto, a ao foi bem sucedida. E o usurio precisa saber disso.
Popover #2 (descrio, tags, marcadores)
Aviso. Sr. usurio, h algo que voc precisa saber, porm sem urgncia.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
ultrices porta nisl, at tempor nunc commodo eu. Phasellus
pulvinar euismod turpis nullam.
Lendo... carregando... processando...
Mensagens em bloco
Barras de progresso
Aviso. Sr. usurio, este tipo de mensagem pode surgir no prprio
contexto da interface, seja no corpo principal ou nas colunas laterais.
Por exemplo: pode-se anunciar uma nova funcionalidade, uma ajuda
importante ou mesmo uma mensagem de boas vindas.
Ir para um outro lugar
33%
66%
100%
33%
66%
100%
Janelas Modais
p. 28
Janela modal diferenciada para o cadastro
Cadastre-se no Redu.
gratuito, rpido e fcil.
Redu Experimento na Escola do Recife PE
Caso tenha uma conta no Facebook, voc pode evitar o trabalho de preencher formulrios ao associar s
forma, o cadastro feito de forma automtica.
Opcional.
Ou preencha os formulrios abaixo e crie seu Perfil no Redu.

Nome
www.youtube.com
Sobrenome
Seu primeiro nome

Seu ltimo nome
E-mail
Seu e-mail de c
Confirmao
Digite novamen
Janela modal com contedo interativo embedded
Login
Ttulo da janela modal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices porta
nisl, at tempor nunc commodo eu. Sed sagittis ornare vehicula. Vestibulum
dapibus massa at mi lobortis sagittis. Mauris vel leo nisi, imperdiet ornare.
Padro
Primrio
Como ser o seu apelido?
Senha
O Login define como ser o endereo de

sua pgina no Redu.
Ex.: redu.com.br/pessoas/seulogin
Confirmao
Aceito os Termos de Uso da plataforma Redu.
Digite uma senh
Digite novamen
Cancelar
cones & Smbolos
p. 29
Incio
Aprenda /
Personal Learning
Ensine
Avise-me
Parceiro
Conta
Custo / Faturas
Descrio /
Informaes
Marcador / Tag
Busca
Ambiente
(Instit. ou Prof.)
Curso
Disciplina
Mdulo
Aula
Pgina de texto
Documento
Exerccio
Mdia
Rating-star
Staff
Administrador /
Gestor
Professor
Tutor
Aluno
Arquivo de Apoio
Editar
Apagar luz
Acender luz
Compartilhar
Perfil
Amigos
Contatos /
Colegas de classe
Membros
Adicionar amigo /
Cadastrar-se
Favorito
Remover do
favorito
Privado
Pblico
Moderao
Mural
Comentrio
Dvida
Resposta
Agrupamento /
Atualizao
Calendrio
Anexo
Invisvel
Visvel
Correto /
Finalizado
Mensagens
Nova mensagem
Mensagens
enviadas
Chat
Lista
Matricular-se
Geolocalizao
Applets
Wiki
Relatrios
Configurao /
Gerenciamento
Biografia
Curriculum Vitae
Experincia
Profissional
Experincia
Acadmica
Aplicativo /
API
Mobilidade
Tour
Badges
Tempo / horrio
*cones em perodo de transio. Os debaixo daro lugar aos de cima.
cones & Smbolos
p. 30
10
01
Central de Ajuda
(48px)
Central de Dev.
(48px)
Ambientes
(48px & 16px)
Portal de Apps
(48px & 16px)
Termos de
Contrato
Poltica de
Privacidade
Contato
Atendimento
Online
10
01
Central de Ajuda
(66px)
Central de Dev.
(66px)
Ambientes (66px)
Portal de
Aplicativos (66px)
Orculo
Professor
Independente
Instituio de
Ensino
Empresa
R.E.A. (64px)
R.E.A.
(32px & 16px)
Especialista
(32px & 16px)
Outros cones &

Smbolos
Dvidas &
Informaes
Sobre o Redu
Redimensionar
Janelas do Chat
Sons do Chat
Customizao
Fotos
udio
Galeria
Autocomplete
p. 31
Convites
Digite um nome e/ou endereo de e-mail para convidar
Nome Sobrenome
Nome Sobrenome
fulanodetal@email.com (Convidar para o Redu)
Aluno
Nome Sobr
Nome Sobr...
Nome Sobrenome
Nome Sobrenome
Nome Sobrenome
fulanodetal@email.com (Convidar para o Redu)
Fulano de Tal
Nome Sobren
No achamos Fulano de Tal. Busque por outro nome ou um endereo de e-mail.
Nome Sobrenome
Nome Sobrenome
Lista de convites
Nome Sobrenome
Convite enviado em 17 Fev, 2012, 16h00
Nome Sobrenome
fulanodetal@email.com
fulanodetal@email.com
fulanodetal@email.com ainda no possui cadastro no Redu.
Convidar
Nome Sobrenome (Aluno)

Thumbnails
Usurio
Ambientes de Aprendizagem
Instituio 32px
Instituio 64px
Instituio 90px
Usurio 90px
(Listas)
Instituio 160px
Usurio 64px
(Contatos)
Usurio 32px
(Mural)
Usurio 48px
(Chat)
Usurio 160px
R.E.A.s e Wiki
Curso 32px
Curso 64px
Curso 90px
Wiki 104px
Listas
Curso 160px
R.E.A. 160px (Ambiente)
R.E.A. 32px & 90px

(Listas)
Wiki 156px
Listas
Potencializando
o talento das pessoas.
2010-2013. CNPJ: 12.359.885/0001-07

Openredu Graphic User Interface (G.U.I. 1.3.9a)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Openredu Graphic User Interface (G.U.I. 1.3.9a)

Uploaded by

Copyright:

Available Formats

Graphic User Interface:

Guidelines & Components

Estruturao dos prottipos em vetor

Grid & Modelo de Corpo

Alertas & Avisos

cones & Smbolos

Estruturao dos prottipos em vetor

Propriedades dos elementos

Grid & Modelo de Corpo

Ambientes, Cursos, Disciplinas, Aulas, Perfis, Central de Ajuda, Central de Dev.

Bloco com 3 colunas

Exemplo: bloco de 3 colunas de

Exemplo: modelo de corpo de uma pgina do Redu. Este corpo ser

Museo Sans (300, 500, 700, 900) a principal

margins: 9px 18px

Museo Sans Roun. (100) 60px/56px -4px ***

Museo Sans (300) 36px/36px -2px

(900) 28px 9px

Museo Sans (700) 21px/26x -1px

(900) 18px 9px

Museo Sans (700) 18px/21px -1px

(700) 18px 9px

Museo Sans (500) 16px/18px 0px

Museo Sans (300) 16px/18px 0px

Helvet. Neue | Arial (reg) 11px/11px 0px

Helvet. Neue | Arial (reg) 11px/11px 0px

Helvet. Neue | Arial (reg) 11px/11px 0px

Helvet. Neue | Arial (reg) 11px/11px 0px

Cores: links de texto

200 caracteres restantes (legenda)

(regular) 11px/14px 0px

Hyperlink de um item secundrio / ao.

(regular) 11px/11px 0px

@code {lucida console(reg); font-h:13px; line-h:18px; l-s:0;}

Tabela com checklist

Contedo de uma clula.

Contedo de uma clula.

Contedo de uma clula.

Contedo de uma clula.

Lorem ipsum sit dolor amet, consectetur?

Contedo de uma clula.

Contedo de uma clula.

Lorem ipsum sit dolor amet, consectetur?

Contedo de uma clula.

Lorem ipsum sit dolor amet, consectetur?

Contedo de uma clula.

Contedo de uma clula.

Contedo de uma clula.

Contedo de uma clula.

Contedo de uma clula.

Contedo de uma clula.

Contedo de uma clula.

Contedo de uma clula.

Hyperlink de uma clula.

Contedo de uma clula.

Hyperlink de uma clula.

Contedo de uma clula.

Hyperlink de uma clula.

Contedo de uma clula.

Hyperlink de uma clula

Contedo de uma clula.

7 Fev, 2012, 14h30

Lorem ipsum sit dolor amet, consectetur?

Lorem ipsum sit dolor amet, consectetur?