Você está na página 1de 33

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

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


H. Neue (300) | Arial (300) 16px/18px 0px
Museo Sans (700) 14px/18px 0px
H. Neue | Arial (bold) 14px/18px 0px

Inline labels
NOVIDADE

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


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

AVISE-ME

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


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

ONLINE

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


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

DVIDAS

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


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.
Helvet. Neue | Arial (reg) 13px/18px 0px
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.

Contedo de uma clula.

Assunto

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?

Nome Sobrenome

Contedo de uma clula.

Lorem ipsum sit dolor amet, consectetur?

Nome Sobrenome

Contedo de uma clula.

hover

Ttulo

Ttulo

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.


hover

Contedo de uma clula.

Ttulo

Ttulo

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

hover

Contedo de uma clula.

Enviada de
Nome Sobrenome

7 Fev, 2012, 14h30


7 Fev, 2012, 14h30
7 Fev, 2012, 14h30

Deletar selecionados

Assunto

Enviada de

Lorem ipsum sit dolor amet, consectetur?

Nome Sobrenome

Lorem ipsum sit dolor amet, consectetur?

Nome Sobrenome

Lorem ipsum sit dolor amet, consectetur?

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

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

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


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

Disciplina Vestibulum Scelerisque


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


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

Editar

Listas

p. 11

Lista de Mdulos & Aulas

Lorem ipsum sit dolor amet

10

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.

Aula de vdeo lorem

Aula de vdeo lorem

2000
NOVO

1000

+5

Lorem ipsum sit dolor amet

+10

10

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.

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


Universidade Voluptat Metus

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

Disciplina Vestibulum Scelerisque

20

20

Disciplina Vestibulum Scelerisque

20

20

20 de colapsar lista de Disciplinas


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

Curso Lorem Ipsum


2 disciplinas

Universidade Voluptat Metus


Curso Lorem Ipsum

40

2 Disciplinas

40

40

2 Disciplinas

40

2 disciplinas

20

20

2 disciplinas

Disciplina Vestibulum Scelerisque

20

20

Disciplina Vestibulum Scelerisque

20

20

40

40

40

40

Hover no ttulo
do Curso
Disciplina Vestibulum Scelerisque
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
Disciplina Vestibulum Scelerisque
20 20

Disciplina Vestibulum Scelerisque

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.


Nome Sobrenome respondeu:

contedo

9 Fev, 2011, 16h25

Phasellus pretium interdum ligula eget fringilla. Maecenas quam est.


aes permitidas ao usurio

10px (margin)
11px (line-height)

Responder

42px (margin)

thumbnail

descrio

contedo

aes

Nome Sobrenome comentou no Mural de Nome Sobrenome:

7 Fev, 2011, 16h25

Cras id risus libero, ut condimentum ante. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos.

Post de texto (status / comentrio)


Nome Sobrenome comentou no Mural de Nome Sobrenome:

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

Nome Sobrenome respondeu:


8 Fev, 2011, 16h25

Phasellus pretium interdum ligula eget fringilla. Maecenas quam est.


Nome Sobrenome respondeu:

Digite sua resposta ao comentrio acima

9 Fev, 2011, 16h25

Phasellus pretium interdum ligula eget fringilla. Maecenas quam est.


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

Universidade Voluptat Metus > Curso Lorem Ipsum > Disciplina Vestibulum > Mdulo Not

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

Universidade Voluptat Metus > Curso Lorem Ipsum > Disciplina Vestibulum > Mdulo Not

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.

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.

Listas

p. 15

Post contendo um link (visualizao)

Lista de Ambientes (Ambientes que Participo)

Universidade Voluptat Metus

Nome Sobrenome comentou no Mural de Nome Sobrenome:


7 Fev, 2011, 16h25

Administrado por Nome Sobrenome


SIGLA

Cras id risus libero, ut condimentum ante. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos.
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.
Responder

300 Membros

10 Cursos

Lista de Cursos
Universidade Voluptat Metus

Curso Lorem Ipsum Metus


Criado por Nome Sobrenome

300 Membros

Lista de Recursos Educacionais Abertos (em Incio)

Aplicativo Educacional

Aplicativo Educacional

Autor: UNESCO
Ensino Mdio
Portugus
Cincias Exatas: Matemtica

Abrir

200

Autor: UNESCO
Ensino Mdio
Portugus
Cincias Exatas: Matemtica

10

200

Abrir

10

Autor: UNESCO
Ensino Mdio
Portugus
Cincias Exatas: Matemtica

Abrir

10

200

Universidade Voluptat Metus


Criado por Nome Sobrenome

Aplicativo Educacional

Autor: UNESCO
Ensino Mdio
Portugus
Cincias Exatas: Matemtica

Lista de Disciplinas

Curso Lorem Ipsum Metus

Abrir

Aplicativo Educacional

200

10

10

Disciplina Vestibulum Scelerisque Metus

10

Listas

p. 16

Lista de Membros
Lista de Recursos Educacionais Abertos

Aplicativo Educacional
Autor: UNESCO
Ensino Mdio
Lngua: Portugus
rea: Cincias Exatas: Matemtica

200

10

Aplicativo Educacional

10

Nome Sobrenome

Nome Sobrenome

Professor
22 contatos em comum

Professor
22 contatos em comum

Nome Sobrenome

Nome Sobrenome

Professor
22 contatos em comum

Professor
22 contatos em comum

Lista de Contatos

Autor: UNESCO
Ensino Mdio
Lngua: Portugus
rea: Cincias Exatas: Matemtica

200

Todos os thumbs so links

Lista de Recursos Educacionais Abertos (Aplicativos Favoritos)

Nome Sobrenome

Nome Sobrenome

Profisso
22 contatos em comum

Profisso
22 contatos em comum

Nome Sobrenome

Nome Sobrenome

Profisso
22 contatos em comum

Profisso
22 contatos em comum

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

Aplicativo Educacional
Autor: UNESCO
Ensino Mdio
Lngua: Portugus
rea: Cincias Exatas: Matemtica

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...
200 caracteres restantes.

Erro

Descrio

Erro

Descrio

Erro

Digitando...
200 caracteres restantes.

__/__/____
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

Lista de opes com texto

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
Lista de opes com texto

Digitando uma alternativa...

Como no ser um designer


Curso

Pesquise...

Lista de opes com texto

200 caracteres restantes.

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

Nome Sobrenome respondeu ao seu comentrio


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

Nome Sobrenome respondeu ao seu comentrio


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

Nome Sobrenome respondeu ao seu comentrio


no mural da disciplina Consectetur Amet

Navegao

p. 24

7 Jan, 2011, 16h25

Ex.: menu da Disciplina

Mostrar todas as atualizaes

Breadcrumbs
Universidade Voluptat Metus

Curso Lorem Ipsum

Disciplina Vestibulum Scelerisque

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)

Universidade Voluptat Metus

Gerenciamento

Universidade Volupta...

Autor:

brenome

edio por:

brenome

Universidade Voluptat Metus

Configuraes / Planos / Detalhes


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

Configuraes / Planos / Detalhes


Cabealho visto a partir do terceiro nvel de hierarquia com hover no primeiro nvel

Configuraes / Planos / Detalhes

Gerenciamento

Curso Lorem Ipsum


Universidade Voluptat Metus

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

Universidade Voluptat Metus

Gerenciamento

Curso Lorem Ipsum

Gerenciamento

Disciplina Vestibulum Scelerisque

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

Disciplina Vestibulum Sc...

Currculo

Biografia

Cursos

Disciplina Vestibulum Scelerisque


Disciplina Vestibulum Scelerisque

Abas (el godzilla)

Curso Lorem Ipsum

Cursos

Ativo hover

Disciplina Vestibulum Sc...

Recursos Educacionais Abertos

Aplicativos Favoritos

Tudo

Disciplina Vestibulum Scelerisque

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

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
Digite um nome e/ou endereo de e-mail para convidar

Nome Sobrenome

Nome Sobrenome
Digite um nome e/ou endereo de e-mail para convidar

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

Digite um nome e/ou endereo de e-mail para convidar

Convite enviado em 17 Fev, 2012, 16h00

Nome Sobrenome

fulanodetal@email.com

Convite enviado em 17 Fev, 2012, 16h00

fulanodetal@email.com

fulanodetal@email.com ainda no possui cadastro no Redu.

Convidar

Nome Sobrenome (Aluno)


Convite enviado em 17 Fev, 2012, 16h00

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