Professor:Marcello Rosauro

Alunos:Danilo BlumFernanda SarmentoGabriel SallesLucien EvangelistaRaquel WinterTadeu 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 ;)