1. DESIGN
PARA A WEB
da interface ao branding

2. DESIGN
PARA A WEB
Larissa Miranda
João Alves

3. {Sumário
#História da Internet #Interface (www) #Processo Criativo
#Branding na Web #Mercado de Trabalho #O Futuro da Web

4. I A et
Ó R
d aI
nt
er
n
I S T
H

5. COMO CHEGAMOS
ATÉ AQUI?

6. 1957
União Soviética lança com sucesso o
primeiro satélite na órbita da Terra.
O “Sputinik 1”.

7. 1969
A primeira rede de quatro computadores
estava funcionando: A ARPANET.

8. 1974 1981
Definições de algumas Publicado e adotado o
regras para arquitetura novo protocolo chamado
de rede que chamaram TCP/IP. Foi a chegada
de “Internet Trasmission da Internet que nós
Control Program” conhecemos.

9. 1990
Criado o primeiro sistema de busca de informação
online, muito usado por empresas e universidades.

10. Lançado o programa concorrente ao Gopher
1991 desenvolvido pela CERN: o WorldWideWeb.
Ele era capaz de entender textos que
continham links para outros documentos.
Popularização e lançamento do código-fonte
do WorldWideWeb em domínio público sem
nenhuma taxa. 1993

11. C E
A
eb
F e W
id
ER Wo rld W
NT
I

12. O QUE É INTERFACE
DA WEB?

13. Na Web, chamamos de interface por
que há elementos gráficos (imagens,
textos) capazes de interagir com outros
documentos HTML na rede.

14. TIM BERNERS-LEE
Os documentos HTML foram criados pelo
cientista da CERN Tim Berlers-Lee, era o
início de uma evolução sem limites.

17. S O
E S C ria tivo
O C
R

18. AFINAL, POR ONDE
COMEÇAR?

19. BRIEF ão. entes.
e atuaç c oncorr
amo dalvo.
O r ico- s dos
tagen
P úbl desvan
s e e. suário
.
tagen o sit
Van ivo d a ao u
smitid
bjet a ser tran ações.
O em
I mag do e inform s (...)
ú usada
Conte e prazo. ting já
Verba entas de marke
Ferram
Conjunto de informações obtidas em reunião para
se inciar o projeto e definir os objetivos. Mas não
se prenda a ele, faça um estudo dos concorrentes
e vá em busca de dados mais precisos.

20. AI
A Arquitetura da
Informação ou Design
da Informação é o
planejamento da
informação do site, com
métodos de hierarquia de
conteúdo e estruturação de
fluxo de navegação.

22. WIREFRAMES
É a aplicação da arquitetura da informação em
esboço físico, a estrutura da interface do site.

23. Você não estará olhando para a informação da
maneira como as cores serão usadas para os links
de navegação (considerado o ‘como’).
Você estará olhando para o que consiste a
navegação (considerado o ‘o que’).
Molly E. Holzschlag - 250 HTML and Web Design Secrets (2004)

25. A visão do usuário começa da esquerda para a direita, de cima
para baixo, mas ela não se mantém de forma linear.

27. UI
A User Interface ou Interface de Usuário consiste
na composição visual de um ambiente interativo
e amigável entre homens e máquinas.

28. Elementos básicos da interface para a web
Identidade Diagramação
Cores Tipografia Proximidade Grid
UI
Contraste Consistência Repetição Hierarquia de
Legibilidade Gráficos Alinhamento informação
Tela
Resolução
Imagens
Rolagens

29. UX
A User Experience ou
Experiência de Usuário é
a base de uma navegação
consistente e auto
explicativa, facilitando o
entendimento do usuário.

30. Interfaces devem
fornecer feedback
sobre o estado atual.

31. Uma interface deve informar o usuário
sobre erro de tecnologia e/ou solicitar
a instalação de complementos.

32. Os usuários devem ser capazes
de descobrir funcionalidades e
informações explorando a interface.

33. Interfaces devem ser o mais eficiente
possível, minimizando a complexidade
das ações.

34. As pessoas estão atrás de informação ou
interação, comportamentos que geram
necessidade de realização de tarefas.
Felipe Memória - Design para a Internet: Projetando a experiência
perfeita. (2005)

35. ASSESSIBILIDADE
É fazer com que
qualquer pessoa
tenha acesso
facilmente ao
conteúdo do site
e não tenha sua
navegação restrita
por fatores físicos
ou virtuais.

36. Restrições de navegação
Físicas
Limitações ou deficiências físicas;
Dificuldade na compreensão de textos;
Falta de dispositivos como teclado e mouse;
Falta de compreensão do idioma;
Virtuais
Uso de código incompatível com browsers;
Uso de tecnologias mais recentes;
Resolução em que o site foi projetado;
Plataformas (celulares, tablets);

37. Nós valorizamos o que nós entendemos.
Kevin Walker

38. N G
D I naW
eb
A N
R

39. COMO VIVEM AS MARCAS
NA INTERNET?

40. A Internet vem modificando vários
aspectos da vida das pessoas, incluindo a
forma das empresas se relacionarem com
seus clientes.

41. Definindo alguns termos:
SOBRE A MARCA – “Podemos dizer que é a união de
atributos tangíveis e intangíveis, simbolizados num
logotipo, gerenciados de forma adequada e que
criam influência e geram valor.”
José Roberto Martins - Branding: Um manual para você criar, gerenciar e
avaliar marcas - 2006 - Global Brands

42. SOBRE BRANDING – “O Branding é um sistema de
ações interdisciplinares que visa o estabelecimento
de imagens, percepções e associações pelas
quais públicos de interesse se relacionam com
uma marca, seja ela de pessoa, lugar, produto
ou empresa. Em suma: construir e administrar
a identidade de uma marca por meio de todos
os pontos de contatos experienciados por seus
públicos.”
Delano Rodrigues - Naming - O nome da marca.

43. Antes da internet, as pessoas falavam
pessoalmente sobre as marcas de uma
para outra ou entre grupos e não tinham
muitos canais para registro.

44. Hoje, há mais espaços para falar e
tornar público esses assuntos como
em blogs, fóruns, redes sociais e etc:
as chamadas Mídias Sociais.

45. O sucesso de um produto está
relacionado à sua capacidade
de oferecer valor e satisfação ao
público-alvo.

46. O mundo inteiro é seu mercado; você pode se
conectar com seus clientes imediatamente, em
qualquer lugar do globo. Mas o mundo também é
seu concorrente.
Fiore, 2001

47. D O al ho
C A
d e Tr
ab
E R
M

48. COMO VIVER DE
WEB?

49. AS PROFISSÕES
Desenvolvedor de Front-End
(html, css, java script, ui, ux,
noções de design e programação
visual.)

50. Desenvolvedor de Back-End
(Banco de dados, gerenciador de
conteúdo, php, ajax, asp.net, java,
java script, web apps.)

51. Webmaster (Responsável pela
gestão de um projeto de web,
com estratégias de branding e
programação.)

52. Média Salarial
Front-End Back-End
Júnior: R$ 2.814,00 Júnior: R$ 3.720,00
Pleno: R$ 3.613,00 Pleno: R$ 4.758,00
Sênior: R$ 4.457,00 Sênior: R$ 5.322,00
Webmaster
Júnior: R$ 4.139,00
Pleno: R$ 5.798,00
Sênior: R$ 7.121,00

53. ONDE ESTUDAR?

54. UNA (Tecnólogo em Design Gráfico)
Uni-BH (Tecnólogo Produção de Multimídia)
Uni-BH (Bacharelado em Sistemas de Internet)

55. PORTFOLIO
André Matarazzo: Sócio e Co-
fundador da Gringo Agência
Digital

61. Mantenha o simples, tire tudo que for supérfulo.
Isso é mágica.
André Matarazzo em entrevista ao The FWA - 2010

62. RO eb
TU daW
FU
O

63. WEB 3.0
Web semântica, multi-plataforma, assessibilidade, interatividade e
novas tendência do Marketing digital.

64. STORYBOARDS

65. STORYBOARDS

66. REFERÊNCIA

67. OBRIGADO