Design para a web - da interface ao branding

DESIGNPARA A WEB

da interface ao branding

DESIGNPARA A WEB

Larissa MirandaJoão Alves

{Sumário#História da Internet

#Branding na Web

#Interface (www)

#Mercado de Trabalho

#Processo Criativo

#O Futuro da Web

{HISTÓRIA

da Internet

COMO CHEGAMOS

ATÉ AQUI?

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

1957

1969

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

1974 1981Definições de algumas regras para arquitetura de rede que chamaram de “Internet Trasmission Control Program”

Publicado e adotado o novo protocolo chamado TCP/IP. Foi a chegada da Internet que nós conhecemos.

1990

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

1991

1993

Lançado o programa concorrente ao Gopher 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.

{INTERFACE

World W

ide Web

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.

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

TIM BERNERS-LEE

{PROCESSOCria

tivo

AFINAL, POR ONDE

COMEÇAR?

BRIEF

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.

O ramo de atuação.

Público-alvo.

Vantagens e desvantagens dos concorrentes.

Objetivo do site.

Imagem a ser transmitida ao usuário.

Conteúdo e informações.

Verba e prazo.

Ferramentas de marketing já usadas (...)

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

Tela

Cores

Resolução

ProximidadeContraste

Imagens

RepetiçãoLegibilidade

Rolagens

Hierarquia de informação

Tipografia

AlinhamentoGráficosConsistência

Grid

UI

UXA 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

Virtuais

Limitações ou deficiências físicas;

Uso de código incompatível com browsers;

Falta de dispositivos como teclado e mouse;

Resolução em que o site foi projetado;

Dificuldade na compreensão de textos;

Uso de tecnologias mais recentes;

Falta de compreensão do idioma;

Plataformas (celulares, tablets);

Nós valorizamos o que nós entendemos.

Kevin Walker

{BRANDING

na Web

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

{MERCADO

de Trabalho

COMO VIVER DE

WEB?

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

AS PROFISSÕES

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

Webmaster

Júnior: R$ 2.814,00Pleno: R$ 3.613,00Sênior: R$ 4.457,00

Júnior: R$ 3.720,00Pleno: R$ 4.758,00Sênior: R$ 5.322,00

Júnior: R$ 4.139,00Pleno: R$ 5.798,00Sê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

{O FUTURO

da Web

WEB 3.0

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

STORYBOARDS

STORYBOARDS

REFERÊNCIA

OBRIGADO