O documento descreve o projeto de design de interface para o canal HBO. O projeto incluiu pesquisa de referências, mapa de navegação, wireframes e definição do layout final para as páginas home e de programa tanto para desktop quanto mobile.

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

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

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

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

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

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

8. 1. pesquisa de material (referências: logos, imagens etc)
Discovery HBO (atual)ABC Space
benchmark:

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

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

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

12. 3. wireframes
home página de programa

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

14. 3. definição de layout
linha estética: tipografia:
exemplo: interface metro do app zune

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

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

17. 5. definição de layout final - home
home home (mobile)

18. 5. definição de layout final - home

19. 5. definição de layout final - home

20. 5. definição de layout final - home

21. 5. definição de layout final - home

22. 5. definição de layout final - home

23. 5. definição de layout final - home

24. 5. definição de layout final - home

25. 5. definição de layout final - home (mobile)
home home (mobile)

26. 5. definição de layout final - home (mobile)

27. 5. definição de layout final - home (mobile)

28. 5. definição de layout final - home (mobile)

29. 5. definição de layout final - página de programa
página de
programa
página de
programa (mobile)

30. 5. definição de layout final - página de programa

31. 5. definição de layout final - página de programa

32. 5. definição de layout final - página de programa

33. 5. definição de layout final - página de programa

34. 5. definição de layout final - página de programa

35. 5. definição de layout final - página de programa (mobile)
página de
programa
página de
programa (mobile)

36. 5. definição de layout final - página de programa (mobile)

37. 5. definição de layout final - página de programa (mobile)

38. Obrigado ;)