manual doaplicativo

Universidade de Brasília - UnBDepartamento de DesignDisciplina: Programação Visual 3Professor: Rogério CamaraAlunos: Claudia Schirmbeck,Gustavo Magalhães eMarcus Vinícius de Oliveira.

1.apresentação

2. conceito

3. marca

4. grids

5. ícones e significados

6. telas

7. usabilidade

8. resultados

x x

1

Apresentação

A difusão do jornal impresso ao longo da história se deu pela demanda de maior velocidade na circulação das informações pela sociedade. Tratava-se da notícia em movimento e foi pensado para acompanhar o leitor no caminho do trabalho, na mesa do café da manhã ou até mesmo para o curto intervalo entre o abrir e fechar do semáforo: tempo suficiente para ler as chamadas da primeira página.

Com a modernização dos meios de comunicação, dada pela popularização da televisão, do computador e posteriormente da internet, os jornais impressos perderam a força e a exclusividade da difusão de notícias e público diminuiu.

Vive-se num cenário em que os Smartphones são o novo meio de comunicação transeunte e que conver-gem todas as necessidades de seus consumidores em um objeto diminuto. Segundo dados coletados pela Google, em alguns países desenvolvidos ou emergentes, a parcela da população portadora de Mobiles chega a ultrapassar 50%.

Juntando os fatos explanados acima, foi feita uma pesquisa acerca da adaptação do jornal impresso para o meio digital. Constatou-se que não existe nenhum re-design de layout que se adapte às telas dos Mobiles e adotou-se como este sendo o objetivo do projeto editorial solicitado pela disciplina de Programação Visual 3.

2

Conceito

O m.news é um aplicativo que adapta os dados dos sites vinculados aos jornais para os diferentes ta-ma-nhos de telas dos Tablets e Smartphones. Tem como objetivo reinserir o hábito da leitura de notícias na rotina dos seus usuários e dá nova usabilidade aos grids que dispõe as informações lado a lado como referência direta aos jornais impressos.

A proposta é centralizar as informações e vinculá-las por um meio de atualização em tempo real e acesso rápido. O nome m.news surge exatamente do conceito de ‘notícia em movimento’, por isso a palavra ingle-sa ‘news’ que é o termo global para notícias e ‘m.’ que é a abreviação para ‘mobile’ em sites acessados at-ravés de dispositivos móveis.

Universidade de Brasília - UnBDepartamento de DesignDisciplina: Programação Visual 3Professor: Rogério CamaraAlunos: Claudia Schirmbeck,Gustavo Magalhães eMarcus Vinícius de Oliveira.

ne

ga

tivo

s

3

www.site.com m.site.com

Fonte Serifada / Jornal Impresso

+ Fonte Light sem Serifa / Notícia Digital

acesso via dispositivo móvelinterface responsiva

marca

proporções

3

x x

x

x

x

x

ne

ga

tivo

s

assinaturas

3

po

sit

ivo

v e r s ã op r e f e r ê n c i a l

v e r s ã oi c o n e

v e r s ã oe x t e n s a

v e r s ã or e d u z i d a

3

aplicações

histórico

Campinas recebe dez filmes da Mostra Internacional de Cinema#diversão #cinema #arte

Dilma comenta filme cearense Cine Holliúdy: 'Nosso Cinema pa...#diversão #cinema #arte

Irã e seis potências chegam a acordo sobre programa nuclear#economia #política #energia

Prova da Fuvest teve Drummond, Laerte e questões interdiscipli.....

vivo 12:34

3

cor e fontem. museo slab 700

roboto thin

cores

news

m.m.

#456C84 #757575 #21323E

#2E4663

4

gridsComo um dos conceitos do aplicativo é adaptar-se às diferentes telas, foram feitos os seguintes grids para a disposição das notícias. Eles foram pensados para melhor otimização do espaço e conforto de leitura para o usuário.

Grids dessa página e da seguinte foram desenvolvidos para Smartphones

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estru-tural aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estru-tural aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modoPodemos já vislumbrar o modo pelo qual o novo modelo estru-tural aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com

Item 1 Item 2 Item 3 Item 4

Podemos já vislumbrar o modoPodemos já vislumbrar o modo pelo qual o novo modelo estru-tural aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com

Podemos já vislumbrar o modoPodemos já vislumbrar o modo pelo qual o novo modelo estru-tural aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com

Item 1 Item 2 Item 3 Item 4

4

Item 1 Item 2 Item 3 Item 4 Item 1 Item 2 Item 3 Item 4

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estru-tural aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estru-tural aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estru-tural aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estru-tural aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estru-tural aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modoPodemos já vislumbrar o modo pelo qual o novo modelo estru-tural aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com

Item 1 Item 2 Item 3 Item 4

Os grids dessa página e das próximas foram feitos para Tablets. grids

4

Podemos já vislumbrar o modoPodemos já vislumbrar o modo pelo qual o novo modelo estrutural aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições. Podemos já vislumbrar o modo pelo qual o novo modelo estrutural aqui preconizado oferece uma interes-sante oportunidade para verifica-ção das posturas dos órgãos

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modoPodemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às

Esportes Divirta-se Histórico Favoritos

4

Podemos já vislumbrar o modoPodemos já vislumbrar o modo pelo qual o novo modelo estrutural aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.Podemos já vislumbrar o modo pelo qual o novo modelo estrutural aqui preconizado oferece uma interes-sante oportunidade para verifica-ção das posturas dos órgãos

Esportes Divirta-se Histórico Favoritos

Podemos já vislumbrar o modoPodemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às

4

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições. Podemos já vislumbrar o modo pelo qual o novo modelo estrutural aqui preconizado oferece uma interes-sante oportunidade para verifica-ção das posturas dos órgãos

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.Podemos já vislumbrar o modo pelo qual o novo modelo estrutural aqui preconizado oferece uma interes-sante oportunidade para verifica-ção das posturas dos órgãos

Esportes Divirta-se Histórico Favoritos

Podemos já vislumbrar o modoPodemos já vislumbrar o modo pelo qual o novo modelo estrutural aqui preconizado oferece uma interessante oportunidade para verificação das posturas

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Lorem ipsum dolor sit amet

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

4

Podemos já vislumbrar o modoPodemos já vislumbrar o modo pelo qual o novo modelo estrutural aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.Podemos já vislumbrar o modo pelo qual o novo modelo estrutural aqui preconizado oferece uma interes-sante oportunidade para verifica-ção das posturas dos órgãos

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.Podemos já vislumbrar o modo pelo qual o novo modelo estrutural aqui preconizado oferece uma interes-sante oportunidade para verifica-ção das posturas dos órgãos

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.Podemos já vislumbrar o modo pelo qual o novo modelo estrutural aqui preconizado oferece uma interes-sante oportunidade para verifica-ção das posturas dos órgãos

Esportes Divirta-se Histórico Favoritos

Os ícones, botões e elementos de navegação foram construídos especificamente para consolidar a identidade visual do aplicativo. Abaixo seguem os itens desenvolvidos ao lado dos seus significados.

5

ícones

Capa – Direciona o usuário para a primeira página do jornal com as principais informações do momen-to.

Ciência e Saúde – direciona o usuário para o cader-no Ciência e Saúde.

Cidades – Direciona o usuário para o caderno Cidades onde ele poderá acompanhar as notícias específicas da sua região.

Tecnologia – direciona o usuário para o caderno Tecnologia.

Famosos/TV – direciona o usuário para o caderno Famosos/TV com as notícias específicas sobre esse tema.

Política/Economia – direciona o usuário para o caderno Política/Economia com as notícias específi-cas sobre esse tema, em âmbito global.

Concursos – direciona o usuário para o caderno Concursos.

Favoritos – direciona o usuário para sua página de favoritos. Quando localizado dentro do grid da matéria, serve para favoritá-la.

Estudantes – direciona o usuário para o caderno Estudantes.

Histórico – direciona o usuário para o seu histórico de navegação.

Divirta-se – direciona o usuário para o caderno Divirta-se.

Histórico – direciona o usuário para o seu histórico de navegação (ícone para uso do grid interno).

Esportes – direciona o usuário para o caderno Es-portes.

Busca – direciona o usuário para o campo de busca por tags relacionadas às matérias.

6

telas

Tela 1– Tela de carregamento do aplicativo Tela 2– Login para usuário com opção para cadastro de não usuário e link para recuperação da senha.

login

>> esqueci a minha senha

cadastrar

usuário

senha

vivo 12:34

6

Tela 2.1 – Opção para cadastro que neces-sita apenas de e-mail, usuário e senha.

Tela 2.2 – Recuperação de senha esqueci-da, é necessário informar e-mail e usuário que conferem com o banco de dados.

Tela 3 – Menu para usuário assinante de jornal. Contém as opções ‘meus jornais’, ‘eu, assinante’, ‘meus conteúdos’ e opção de ‘logout’.

login

>> esqueci a minha senha

cadastrar

usuário

e-mail

senha

vivo 12:34 vivo 12:34

enviar e-mail

usuário

e-mail

vivo 12:34

meus jornais

eu, assinante

meus conteúdos

logout

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

6

Tela 3.1 – Apresenta submenu da opção ‘meus jornais’. Quando o usuário seleciona uma das opções que aparecem no sub-menu, ele é direcionado para a primeira página do jornal escolhido.

Tela 3.2 – Apresenta submenu da opção ‘eu, assinante’. Onde o usuário pode acom-panhar o prazo de validade de suas assi-naturas e quando necessário, ser direciona-do para a página de renovação do jornal escolhido.

Tela 3.3 – Apresenta submenu da opção ‘meus conteúdos’. Onde o usuário pode ser direcionado para as telas de ‘configu-rações’, ‘histórico’ ou ‘busca’. de ‘logout’.

eu, assinante

correio braziliense

folha de são paulo

new york times

meus jornais

vivo 12:34

meus conteúdos

correio braziliense

folha de são paulo

new york times

eu, assinante

vivo 12:34

logout

configurações

histórico

busca

meus conteúdos

vivo 12:34

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

6

Tela 3.3.1 – Tela de busca, onde o usuário insere uma palavra-chave e obtém os resul-tados de acordo com as tags. As notícias estão caracterizadas com as cores do cad-erno de origem.

Tela 3.3.2 – Tela de histórico, onde o usuário tem acesso às últimas notícias vistas com suas respectivas tags e cor do caderno em que está localizada. Clicando sobre a notícia, o usuário é direcionado para a sua página.

Tela 3.3.3 – Tela de configurações onde o usuário pode alterá-las. Possui as opções de ‘editar cadernos’, ‘editar histórico’ e ‘editar favoritos’. de ‘logout’.

busca

cinema

Campinas recebe dez filmes da Mostra Internacional de Cinema#diversão #cinema #arte

Moradores participam de vídeos

Dilma comenta filme cearense Cine Holliúdy: 'Nosso Cinema pa...#diversão #cinema #arte

vivo 12:34

histórico

Campinas recebe dez filmes da Mostra Internacional de Cinema#diversão #cinema #arte

Dilma comenta filme cearense Cine Holliúdy: 'Nosso Cinema pa...#diversão #cinema #arte

Irã e seis potências chegam a acordo sobre programa nuclear#economia #política #energia

Prova da Fuvest teve Drummond, Laerte e questões interdiscipli.....

vivo 12:34

configurações

editar cadernos

editar histórico

editar favoritos

vivo 12:34

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Podemos já vislumbrar o modo pelo qual o novo modelo estrutu-ral aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

Tablet – As telas para Tablets possuem a mesma arquitetura das telas para Smartphones, com a mudança de que publicidades e informações adi-cionais foram inseridas para aproveitamento do espaço.

6

brasília terça

25º 2,6 m/s61%

20º 29º

pancadas de chuva nas próximas horas

quarta

16º 22º

meus jornais

eu, assinante

meus conteúdos

logout

navegação

7

A seguir, estão esquematizados os elementos de navegação do menu inicial do aplicativo.

meus jornais

eu, assinante

meus conteúdos

logout

eu, assinante

meus conteúdos

logout

correio braziliense

folha de são paulo

new york times

meus jornais

logout

meus jornais

meus conteúdos

correio braziliense

folha de são paulo

new york times

eu, assinante

meus jornais

meus conteúdos

eu, assinante

correio braziliense

folha de são paulo

new york times

sua assinatura expira em 12 dias!

renove aqui!

click rola p/ cima rola p/ baixo rola p/ lado gira

7

meus jornais

eu, assinante

logout

configurações

histórico

busca

meus conteúdos

meus jornais

eu, assinante

logout

configurações

histórico

busca

meus conteúdos

editar cadernos

editar histórico

editar favoritosmeus jornais

eu, assinante

logout

configurações

histórico

busca

meus conteúdos

editar cadernos

capa

cidades

divirta-se

concursos

esportes

política/economia

estudante

tecnologia

famosos e tv

especiais

resultados

8

Por fim, estão apresentadas as telas finais com a simulação nos dispositivos.