Professor:
Marcello Rosauro
Alunos:
Danilo Blum
Fernanda Sarmento
Gabriel Salles
Lucien Evangelista
Raquel Winter
Tadeu Garcia
Projeto de design de interface
Tema:
Canal de TV - HBO
1. pesquisa de material (referências: logos, imagens etc)
2. mapa de navegação
3. wireframes
4. definição de layout
5. definição de layout final
1. pesquisa de material (referências: logos, imagens etc)
Criado em novembro de 1972, HBO é um
canal de televisão por assinatura premiado e
criticamente aclamado por séries,
documentários, filmes, transmissões
esportivas e muito mais.
1. pesquisa de material (referências: logos, imagens etc)
Hoje, além dos canais transmitidos na TV, o serviço
foi expandido para o HBO GO e HBO NOW.
Uma extensão do serviço de
assinatura operadora de TV, tenha
acesso à todo o conteúdo da HBO
via streaming.
Sem a necessidade de um serviço de
assinatura de operadora de TV.
Tenha acesso à todo o conteúdo da
HBO via streaming por uma
mensalidade de $14.99 por mês.
(Ainda não disponível para o Brasil)
1. pesquisa de material (referências: logos, imagens etc)
"It's not TV. It's HBO."
instagram
"It's HBO."
twitter
"Bold, groundbreaking,
unique, and original."
facebook
instagram
twitter facebook
1. pesquisa de material (referências: logos, imagens etc)
linha do tempo do logotipo:
Informações retiradas de logopedia: http://logos.wikia.com/wiki/HBO
1972–1975 1975-1981 1981-hoje
1. pesquisa de material (referências: logos, imagens etc)
Discovery HBO (atual)ABC Space
benchmark:
1. pesquisa de material (referências: logos, imagens etc)
2. mapa de navegação
3. wireframes
4. definição de layout
5. definição de layout final
2. mapa de navegação
home
register login shop HBO NOW HBO GO contact series
...product GOT
2
1 e 2: Páginas representadas no wireframe e layout final.
Representação 1: home | Representação 2: página de programa
1
1. pesquisa de material (referências: logos, imagens etc)
2. mapa de navegação
3. wireframes
4. definição de layout
5. definição de layout final
3. wireframes
home página de programa
1. pesquisa de material (referências: logos, imagens etc)
2. mapa de navegação
3. wireframes
4. definição de layout
5. definição de layout final
3. definição de layout
linha estética: tipografia:
exemplo: interface metro do app zune
3. definição de layout
escala cromática: ícones e componentes:
#000000
#ffffff
#242424
#fcbd22*
*cor referente a cada série, inicialmente aparecerá a cor amarela por ser a série padrão do site.
1. pesquisa de material (referências: logos, imagens etc)
2. mapa de navegação
3. wireframes
4. definição de layout
5. definição de layout final
5. definição de layout final - home
home home (mobile)
5. definição de layout final - home
5. definição de layout final - home
5. definição de layout final - home
5. definição de layout final - home
5. definição de layout final - home
5. definição de layout final - home
5. definição de layout final - home
5. definição de layout final - home (mobile)
home home (mobile)
5. definição de layout final - home (mobile)
5. definição de layout final - home (mobile)
5. definição de layout final - home (mobile)
5. definição de layout final - página de programa
página de
programa
página de
programa (mobile)
5. definição de layout final - página de programa
5. definição de layout final - página de programa
5. definição de layout final - página de programa
5. definição de layout final - página de programa
5. definição de layout final - página de programa
5. definição de layout final - página de programa (mobile)
página de
programa
página de
programa (mobile)
5. definição de layout final - página de programa (mobile)
5. definição de layout final - página de programa (mobile)
Obrigado ;)

Displina Design de telas

  • 2.
    Professor: Marcello Rosauro Alunos: Danilo Blum FernandaSarmento Gabriel Salles Lucien Evangelista Raquel Winter Tadeu Garcia Projeto de design de interface Tema: Canal de TV - HBO
  • 3.
    1. pesquisa dematerial (referências: logos, imagens etc) 2. mapa de navegação 3. wireframes 4. definição de layout 5. definição de layout final
  • 4.
    1. pesquisa dematerial (referências: logos, imagens etc) Criado em novembro de 1972, HBO é um canal de televisão por assinatura premiado e criticamente aclamado por séries, documentários, filmes, transmissões esportivas e muito mais.
  • 5.
    1. pesquisa dematerial (referências: logos, imagens etc) Hoje, além dos canais transmitidos na TV, o serviço foi expandido para o HBO GO e HBO NOW. Uma extensão do serviço de assinatura operadora de TV, tenha acesso à todo o conteúdo da HBO via streaming. Sem a necessidade de um serviço de assinatura de operadora de TV. Tenha acesso à todo o conteúdo da HBO via streaming por uma mensalidade de $14.99 por mês. (Ainda não disponível para o Brasil)
  • 6.
    1. pesquisa dematerial (referências: logos, imagens etc) "It's not TV. It's HBO." instagram "It's HBO." twitter "Bold, groundbreaking, unique, and original." facebook instagram twitter facebook
  • 7.
    1. pesquisa dematerial (referências: logos, imagens etc) linha do tempo do logotipo: Informações retiradas de logopedia: http://logos.wikia.com/wiki/HBO 1972–1975 1975-1981 1981-hoje
  • 8.
    1. pesquisa dematerial (referências: logos, imagens etc) Discovery HBO (atual)ABC Space benchmark:
  • 9.
    1. pesquisa dematerial (referências: logos, imagens etc) 2. mapa de navegação 3. wireframes 4. definição de layout 5. definição de layout final
  • 10.
    2. mapa denavegação home register login shop HBO NOW HBO GO contact series ...product GOT 2 1 e 2: Páginas representadas no wireframe e layout final. Representação 1: home | Representação 2: página de programa 1
  • 11.
    1. pesquisa dematerial (referências: logos, imagens etc) 2. mapa de navegação 3. wireframes 4. definição de layout 5. definição de layout final
  • 12.
  • 13.
    1. pesquisa dematerial (referências: logos, imagens etc) 2. mapa de navegação 3. wireframes 4. definição de layout 5. definição de layout final
  • 14.
    3. definição delayout linha estética: tipografia: exemplo: interface metro do app zune
  • 15.
    3. definição delayout escala cromática: ícones e componentes: #000000 #ffffff #242424 #fcbd22* *cor referente a cada série, inicialmente aparecerá a cor amarela por ser a série padrão do site.
  • 16.
    1. pesquisa dematerial (referências: logos, imagens etc) 2. mapa de navegação 3. wireframes 4. definição de layout 5. definição de layout final
  • 17.
    5. definição delayout final - home home home (mobile)
  • 18.
    5. definição delayout final - home
  • 19.
    5. definição delayout final - home
  • 20.
    5. definição delayout final - home
  • 21.
    5. definição delayout final - home
  • 22.
    5. definição delayout final - home
  • 23.
    5. definição delayout final - home
  • 24.
    5. definição delayout final - home
  • 25.
    5. definição delayout final - home (mobile) home home (mobile)
  • 26.
    5. definição delayout final - home (mobile)
  • 27.
    5. definição delayout final - home (mobile)
  • 28.
    5. definição delayout final - home (mobile)
  • 29.
    5. definição delayout final - página de programa página de programa página de programa (mobile)
  • 30.
    5. definição delayout final - página de programa
  • 31.
    5. definição delayout final - página de programa
  • 32.
    5. definição delayout final - página de programa
  • 33.
    5. definição delayout final - página de programa
  • 34.
    5. definição delayout final - página de programa
  • 35.
    5. definição delayout final - página de programa (mobile) página de programa página de programa (mobile)
  • 36.
    5. definição delayout final - página de programa (mobile)
  • 37.
    5. definição delayout final - página de programa (mobile)
  • 38.