DESIGN

PARA A WEB
da interface ao branding
DESIGN
PARA A WEB
Larissa Miranda
João Alves
{Sumário
#História da Internet #Interface (www) #Processo Criativo

#Branding na Web #Mercado de Trabalho #O Futuro da Web

 I A t

R n e
e r
nt
Ó a I
d

I S T
H
COMO CHEGAMOS
ATÉ AQUI?
 1957

União Soviética lança com sucesso o

primeiro satélite na órbita da Terra.
O “Sputinik 1”.
1969

A primeira rede de quatro computadores

estava funcionando: A ARPANET.
 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.
 1990

Criado o primeiro sistema de busca de informação

online, muito usado por empresas e universidades.
 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
 C E
A
e b

F e W
id

ER Wo rld W

NT
I
O QUE É INTERFACE

DA WEB?
Na Web, chamamos de interface por
que há elementos gráficos (imagens,
textos) capazes de interagir com outros
documentos HTML na rede.
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.
 S O
S ivo
t

E
r ia
C

O C
R
AFINAL, POR ONDE
COMEÇAR?
BRIEF ç ã o . r r e n t e s .
e a t u a c o n c o
a m o d s d o s
O r ico-alvo. a n t a g e n
P ú b l e d e s v u á r i o.
t a g e n s . a o u s
Van ivo do sit ansmitid e a
Objet em a ser tr mações. . )
I m a g e i n f o r d a s ( . .
ú d o já u s a
Conte e prazo. a r k e t i n g
Verba entas de m
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.
 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.
WIREFRAMES

É a aplicação da arquitetura da informação em

esboço físico, a estrutura da interface do site.
 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)

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.
 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.
 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
 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.
Interfaces devem
fornecer feedback
sobre o estado atual.
Uma interface deve informar o usuário
sobre erro de tecnologia e/ou solicitar
a instalação de complementos.
Os usuários devem ser capazes
de descobrir funcionalidades e
informações explorando a interface.
Interfaces devem ser o mais eficiente
possível, minimizando a complexidade
das ações.
 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)
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.
 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);
Nós valorizamos o que nós entendemos.

Kevin Walker
 N G
I e b
aW

ND n

R A
COMO VIVEM AS MARCAS
NA INTERNET?
A Internet vem modificando vários
aspectos da vida das pessoas, incluindo a
forma das empresas se relacionarem com
seus clientes.
 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
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.

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.
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.
O sucesso de um produto está
relacionado à sua capacidade
de oferecer valor e satisfação ao
público-alvo.
 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
 D O l h o

A ba
ra

C e T
d

E R
M
COMO VIVER DE

WEB?
 AS PROFISSÕES

Desenvolvedor de Front-End
(html, css, java script, ui, ux,
noções de design e programação
visual.)
Desenvolvedor de Back-End
(Banco de dados, gerenciador de
conteúdo, php, ajax, asp.net, java,
java script, web apps.)
Webmaster (Responsável pela
gestão de um projeto de web,
com estratégias de branding e
programação.)
 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
ONDE ESTUDAR?
UNA (Tecnólogo em Design Gráfico)

Uni-BH (Tecnólogo Produção de Multimídia)

Uni-BH (Bacharelado em Sistemas de Internet)

PORTFOLIO

André Matarazzo: Sócio e Co-

fundador da Gringo Agência
Digital
Mantenha o simples, tire tudo que for supérfulo.
Isso é mágica.

André Matarazzo em entrevista ao The FWA - 2010

 RO e b

TU daW

FU
O
WEB 3.0

Web semântica, multi-plataforma, assessibilidade, interatividade e

novas tendência do Marketing digital.
STORYBOARDS
STORYBOARDS
REFERÊNCIA
OBRIGADO