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