1

2

6

4

logo identi�cador da Fundação Bradesco, patrocinadora do curso; tem local �xo de aplicação, sempre no alto e à esquerda do layout da tela do curso; zona de máxima visibilidade.

fundo acinzentado pois, a leitura no branco �ca ruim; luminosidade do branco é muito forte e atrapalha a leitura. a inteção é que o usuário consiga ler o texto.

4

3

3

5

1

2

5

tela de abertura do curso; surge no início decada módulo; tem o objetivo de informar ao usuário qual curso está realizando.

logo do próprio Outlook 2010 pré-de�nido pela Miscrosoft; foi colocado com alinhamento centralizado e acima da linha de base ( ) na telacom tamanho relativamente grande pois, tem o proprósito de orientar o olhar do usuário em primeira instância para qual é o curso que será trabalhado.

Informações de qual módulo está e qual seu conteúdo (título) que se repetem a cada tela de abertura com variações a cada módulo.

6 cor amarela pré-de�nida pela Microsoft com variações de: #F5B91A RGB 245 185 26

a#FBFAD9RGB 251 250 217 referentes ao logo do próprio software.

#E5EAEERGB 229 233 237

4

3

1

2

grid - w: 562 px; h: 312pxduas colunas - entre colunas 20pxNos dá a liberdade para diagramar de várias formas dentro desse espaço.

1

espaço entre os textos e a imagem: 18.25 px

2

3

3

Texto diagramado na tipogra�a Segoe Ui Regular; corpo 12 ; neste caso acima o alinhamento é justi�cado porém, há variações dentro do grid proposto; cor preta mas, nao 100%, resultando numa cor mais acinzentada. Essa cor para o usuario é melhor para seu conforto visual. Usa-se bold, itálico quando necessário. Tipogra�a é tão importante como qualquer outro elemento visual. Segoe ui é uma tipogra�a sem serifa (usuário obtém uma maior facilidade na leitura).

4

Uso de imagens: formatos que foram usados : Jpeg, GIF, PNG. Visando sempre boa qualidade da imagem mas, lembrando sempre que o peso do documento não pode ser muito grande pois, demora para carregar o arquivo dependendo da velocidade da internet do usuário. As imagens sempre são relacionadas com o os textos da mesma página, repesentando visualmente o que esta sendo discutido.

#404041RGB 64 64 65

Para mais informações da tipogra�a Segoe Ui, acesse: http://msdn.microsoft.com/pt-br/library/windows/apps/hh700394.aspx

1Uso de animações - animações em Flash (SWF) que o próprio usuário toma contato com o exemplo do assunto. Nessas animações são dadas mais informações de maneira mais interativa.

1

aproximação do usuário deu-se a necessidade de desenhar um personagem; personagem acompanha durante o curso todo, em alguma telas opersonagem fala ou apenas é usado como elemento de apoio; quando há falas, o documento do personagem é salvo em formato GIF (para que o personagem consiga mexer os olhos) e as falas são gravadas em audio MP3 e editadas no Camtasia - programa de edição de vídeo.

tela de boas vindas que aperece em cada início de módulo com o objetivo de dar identidade para o curso todo além de apresentar oconteúdo que será tratado nesse módulo.

2

1

1

2

3

3 Cabeçalho e rodapé �xos, montados como página MASTER para todo o curso no próprio software CourseLab para manter a identidade.

3

1

1Uso de videos - videos curtos, que mostram como se usa o recurso que esta sendo tratato na página, mostrando caminhos de como executar tal recurso do software. Salvo no formato �ash movie/extenção SWF.

1tela de fechamento com mensagem de motivação “parabéns” que aperece todo �nal de módulo, assim como a tela de abertura que da uma identidade para o curso. O usuário recebe a mensagem do que foi estudado e do que seraá tratado no próximo módulo.

O texto destacado sempre na cor

uso de formas/vetor para dar destaque a alguma informação.

1

2

2

3

3

#F89D1DRGB 28 157 29

Introduzir:- falar que escolhi essas telas pois o que irei analise se repetem. Ex... as cores ( padrão cromático) se repete em todo o curso. - falar o que eu vou analisar ( cores – matiz, saturação, valor, contraste sintaxe e relações ; tipogra�a ( fonte, alinhamento,tamanho cor da fonte....etc) e assim por diante.- dizer que escolhi o modulo 2 pois contem todos os os elemenos visuais para o aprendizado do usuário. O mudulo 2 tem tudo o que sera analisado

****analisar odem de telas como se o usuário estivesse fazendo o curso.A tela de abertura e fechamento se repete em cada modulo, e ha variações das telas do meio. ****

- irei numerarar cada item a ser analisado e depois farei uma analise de tudo!!!

cor vermelha eh usada como sinalizadora, que indica a area devolvida sob analise.vermelho tem um indice de contraste mto alto para o que queremos destacar.