Issuu on Google+

manual do aplicativo


Universidade de Brasília - UnB Departamento de Design Disciplina: Programação Visual 3 Professor: Rogério Camara Alunos: Claudia Schirmbeck, Gustavo Magalhães e Marcus 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


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

1


Conceito O m.news é um aplicativo que adapta os dados dos sites vinculados aos jornais para os diferentes tama-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 inglesa ‘news’ que é o termo global para notícias e ‘m.’ que é a abreviação para ‘mobile’ em sites acessados através de dispositivos móveis.

2


marca

Fonte Serifada / Jornal Impresso

negativos

+ Fonte Light sem Serifa / Not铆cia Digital www.site.com

m.site.com

acesso via dispositivo m贸vel interface responsiva

3


x x

x

x

x

3

x

proporçþes


assinaturas

versão icone

versão extensa

versão reduzida

negativos

positivo

versão preferêncial

3


aplicações

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

3


cor e fonte

m. m.

m. museo slab 700

roboto thin

news

cores #2E4663

#456C84

#757575

#21323E 3


Como 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. Item 1

4

Item 2

Item 3

Item 4

Item 1

Item 2

Item 3

Item 4

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo

Podemos 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

Podemos 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

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo

Podemos 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 suas atribuições.

Podemos 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 suas atribuições.

Podemos já vislumbrar o modo Podemos 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

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

grids


Item 1

Item 2

Item 3

Item 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 estrutural 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 estrutural 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

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo

Podemos 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 suas atribuições.

Podemos 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 suas atribuições.

Podemos 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 suas atribuições.

Podemos 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 suas atribuições.

4


grids

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

Esportes

Divirta-se

Histórico

Favoritos

Podemos já vislumbrar o modo Podemos 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 suas atribuições. Podemos já vislumbrar o modo pelo qual o novo modelo estrutural aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos

4

Podemos já vislumbrar o modo Podemos 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

Podemos já vislumbrar o modo

Podemos 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 suas atribuições.

Podemos 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 suas atribuições.

Podemos 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 suas atribuições.

Podemos já vislumbrar o modo Podemos 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


Esportes

Divirta-se

Histórico

Favoritos

Podemos já vislumbrar o modo Podemos 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 suas atribuições.Podemos já vislumbrar o modo pelo qual o novo modelo estrutural aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos

Podemos já vislumbrar o modo Podemos 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

Podemos 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 suas atribuições.

Podemos 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 suas atribuições.

Podemos já vislumbrar o modo Podemos 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 estrutural aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos dirigentes com relação às suas atribuições.

4


Esportes

Divirta-se

Histórico

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

4

Favoritos

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo

Podemos 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 suas atribuições. Podemos já vislumbrar o modo pelo qual o novo modelo estrutural aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos

Podemos 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 suas atribuições.Podemos já vislumbrar o modo pelo qual o novo modelo estrutural aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo

Lorem ipsum dolor sit amet

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo

Podemos 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 suas atribuições.

Podemos 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 suas atribuições.

Podemos 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 suas atribuições.

Podemos 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 suas atribuições.

Podemos 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 suas atribuições.


Esportes

Divirta-se

Histórico

Favoritos

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo

Podemos 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 suas atribuições.Podemos já vislumbrar o modo pelo qual o novo modelo estrutural aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos

Podemos 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 suas atribuições.Podemos já vislumbrar o modo pelo qual o novo modelo estrutural aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos

Podemos 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 suas atribuições.Podemos já vislumbrar o modo pelo qual o novo modelo estrutural aqui preconizado oferece uma interessante oportunidade para verificação das posturas dos órgãos

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo

Podemos já vislumbrar o modo

Podemos 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 suas atribuições.

Podemos 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 suas atribuições.

Podemos já vislumbrar o modo Podemos 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 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 suas atribuições.

4


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

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

Ciência e Saúde – direciona o usuário para o caderno 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íficas 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 Esportes.

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

ícones


telas vivo

12:34

usuário senha login cadastrar >> esqueci a minha senha

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.

6


vivo

12:34

vivo

12:34

vivo

12:34

meus jornais e-mail usuário senha cadastrar login

e-mail usuário enviar e-mail

eu, assinante meus conteúdos

>> esqueci a minha senha

logout

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

6

Tela 2.2 – Recuperação de senha esquecida, é 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’.


vivo

12:34

vivo

12:34

vivo

12:34

meus jornais

eu, assinante

meus conteúdos

correio braziliense

correio braziliense

configurações

folha de são paulo

folha de são paulo

histórico

new york times

new york times

busca

eu, assinante

meus conteúdos

logout

Tela 3.1 – Apresenta submenu da opção ‘meus jornais’. Quando o usuário seleciona uma das opções que aparecem no submenu, 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 acompanhar o prazo de validade de suas assinaturas e quando necessário, ser direcionado 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 ‘configurações’, ‘histórico’ ou ‘busca’. de ‘logout’.

6


vivo

12:34

busca cinema 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

Moradores participam de vídeos

6

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

vivo

12:34

histórico Campinas recebe dez filmes da Mostra Internacional de Cinema

vivo

12:34

configurações editar cadernos

#diversão #cinema #arte

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

editar histórico editar favoritos

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

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


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

brasília

terça

20º 29º

quarta

25º

2,6 m/s 61%

pancadas de chuva nas próximas horas

16º 22º

meus jornais eu, assinante meus conteúdos logout

6


navegação

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

meus jornais

meus jornais

meus jornais

correio braziliense

eu, assinante

eu, assinante

correio braziliense

correio braziliense

folha de são paulo

sua assinatura expira em 12 dias!

folha de são paulo

meus jornais eu, assinante

new york times

eu, assinante

new york times

renove aqui!

folha de são paulo

meus conteúdos

meus conteúdos

meus conteúdos

logout

logout

logout

click

7

rola p/ cima

rola p/ baixo

rola p/ lado

new york times

meus conteúdos

gira


meus jornais

meus jornais

editar cadernos

editar cadernos

editar histórico

capa

editar favoritos

cidades

meus jornais

divirta-se

eu, assinante

meus conteúdos

eu, assinante

meus conteúdos

eu, assinante

meus conteúdos

concursos esportes política/economia

configurações

configurações

configurações

estudante

histórico

histórico

histórico

tecnologia

busca

busca

busca

famosos e tv

logout

logout

logout

especiais

7


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

8

resultados



aplicativo m.news