Workshop Webinsider 2003

workshops webinsiderdesign para web

michel lent schwartzman

Agenda do dia

• 9:00h: Início do workshop• 10:40h: Coffee-break (20 min)• 12:40h: Almoço• 14:00h: Reinício• 16:40h: Coffee-break (20 min)• 19:00h: Término

Pauta do workshop0. Apresentação de projetos1. Criação, design, web, webdesign1.1 Debate2. Criação não: solução. O

processode design voltado para o

resultato3. Mercado hoje e amanhã3.1 Debate final

apresentação de credenciaishistórico profissional e apresentação de portfolio

QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.

RIO 19881993

puc-rio, freelance

Banda Bel | Primeiro offset | 1988

Convite para show | Banda Bel | 1989

Banda Bel | Logotipo | 1990

LP “Rei do Rio”, Banda Bel | 1991

Turnê “Rei do Rio” | Banda Bel | 1991

CD “Sambadrome” | Banda Bel | 1993

Marcas diversas | 1993

QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.

NYC9496

nyu/agency.com/euro.rscg

Primeiro experiência em HTML | 1994

Primeiro site profissional (prog HTML)| American Express University | Agency.com | 1995

Biquini Cavadão | MLS | 1995

QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.

RIO9600

mlab/10’/bowne/globo.com

Banco Itaú | Medialab | 1996

Shell do Brasil | Medialab | 1996

Site oficial do Ronaldinho | 10’Minutos | 1997

Lançamento Ronaldinho no JN | 10’MInutos | 1997

QuickTime™ and aMicrosoft Video 1 decompressorare needed to see this picture.

Site Institucional | Bowne | 1998

Brasil 500 | Bowne | 1999

Globo.com | Globo.com | 2000

SP0001

DM9DDB

Site Institucional | Itaú Seguros | 2001

Radio Triton | Triton | 2001

15ª Semna da Criacao Publicitaria | 2001

TV Interativa Itaú | Itaú | 2001

MAR02

10’Minutos, São Paulo

Hotsite Honda NXR | DM9 | 2003

Prêmio Empreededor do Ano | Ernst & Young | 2003

Portal Banco Real | Banco Real | 2003

Hotsite Honda FIT | DM9 | 2003

Klassicos Kaiser / Kaiser Oktoberfest | Bates | 2003

Hotsite Kaiser Bock | 2003

Portal Kaiser Music | Bates | 10’Minutos | 2003

Cliente atendidos | 10’ | 2003

Direção de Criação | Prêmios

1. criação, design, web, webdesignconceitos, fronteiras, modismos e práticas

verdades e mitos sobre criação

Design não é desenho

• Curso de Design no Brasil é chamado de Desenho Industrial (Industrial Drawing)

• Tradução do Design para ‘Desenho’ é uma forte contribuição para a confusão

• Fazer design não é desenhar

Desenhar e Design

• design  . [Ingl.] S. m. 1. Concepção de um projeto ou modelo; planejamento. 2. O produto desse planejamento. 3. Restr. Desenho industrial. 4. Restr. Desenho-de-produto. 5. Restr. Programação visual.

Design não é Arte

• Universo das artes plásticas, artes gráficas e da Comunicação Visual muitas vezes se confunde

• Artistas plásticos frequentemente se tornam ótimos comunicadores visuais

• No Design há o compromisso coletivo com a solução

QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.

QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.

A diferença entre criar e criar• Na separação entre a Arte e o

Design encontramos a diferença entre criar para a Arte e criar para o Design

• O verbo está presente nos dois universos

• Mas com significados completamente diferentes

Criar é propor soluções• A atividade do ‘criar’ no Design

é a busca da solução para um problema específico

• O verbo ‘criar’ deve ser usado com parcimônia

• A livre ‘criação’ não pode ser empregada no Design sob pena de distorcer seu objetivo final

compreendendo o design

A origem do design• Início indefinido

– Desde a primeira ilustração de uma obra destinada a um público específico

– Desde a fabricação de armas e apetrechos na idade média

– Talvez no começo da Revolução Industrial com início da produção em série

• Como conceito definido– Em 1919 com a fundação da Bauhaus na

Alemanha

QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.

Mulheres na fábrica de velas (Alemanha)

QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.

Arquitetura e Design• Hoje profissões distanciadas, são

como mãe e filha• A própria Bauhaus é fundada por

Walter Gropius, um arquiteto• Na espinhal dorsal das duas

atividades está a mesma estrutura de projeto, a mesma abordagem

• Ambas criam produtos o uso, mas em escalas diferentes

QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.

QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.

Dessau 1926, Wassily e Nina Kandinsky,  Georg Muche, Paul Klee, Walter Gropius

Design é projeto

• Fazer Design é fazer um projeto de um produto para uso do homem

• Este produto ser tridimensional, bidimensional, unilateral, interativo

• Independente da forma ou objetivo, todo produto existente no mundo parte de um projeto de Design

Design é propor soluções• Fazer um projeto de Design é

propor uma solução para uma situação problemática existente no mundo

• Este problema pode ser de comunicação, ferramenta, transporte, social, recreativo, etc

• Para cada problema, há uma solução através de um processo de Design

Design está a nossa volta• A melhor pergunta para se fazer

a um Designer é “o que é Design?”

• A reação do designer deve ser: começar a apontar para tudo que está a nossa volta

• Tudo que está a nossa volta é fruto de um projeto de Design

• Tudo.

QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.

QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.

QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.

As fronteiras do design• A família Arquitetura e Design

vinha dando conta de todas as fronteiras

• A Arquitetura cuidando dos espaços físicos

• E o Design de Produto e a Comunicação Visual de todos os objetos a nossa volta

• Até o surgimento da INTERFACE

A interface: uma nova fronteira• O surgimento da interface gráfica

cria uma nova fronteira para o Design• A interface gráfica tem suas raízes na

década de 50, mas é realmente desenvolvida em meados de 1970 pelo PARC (Palo Alto Research Center) da Xerox

• O primeiro computador a usar uma interface gráfica é o Alto

“Alto” da Xerox

o design de interfaces e a web

Web é a interface mais popular• A Apple com o Macintosh e

principalmente a Microsoft com o Windows, iniciaram o processo de popularização do computador pessoal e consequentemente da interface gráfica

• Entretanto, a Web é hoje o ambiente de interface gráfica mais popular do planeta

O surgimento da Web• 1989, Tim-Berners-Lee do CERN, organização

européia para pesquisa nuclear, inicia projeto para troca entre cientistas

• Em 1991, o projeto estava pronto e disponível para algumas universidades. Um pouco depois, podia ser usado via internet

• Em 1993, havia cerca de 50 servidores WWW no mundo inteiro

• Menos de 10 anos depois, a Web é usada por mais de 1 bilhão de pessoas no mundo

Crescimento da internet em hosts

0

5.000.000

10.000.000

15.000.000

20.000.000

25.000.000

30.000.000

35.000.000

40.000.000

45.000.000

1993199519971999200120032005200720092011201320152017201920212023202520272029

Fonte: Hobbes’ Internet Timeline

Websites existentes

Muito primitiva e limitada• HTML, principal linguagem de

formatação da Web é muito limitada

• Um sistema que precisa viver de ‘gambiarras’ pra funcionar

• Ferramental disponível para desenho é primitivo

• Enfrenta sérias questões de usabilidade e acessabilidade

Em terra de ninguém• A interface gráfica ainda está em terra de

ninguém• Não há concenso sobre por quem deve ser

feita e o que é preciso se saber para fazer• Há os programadores que não entendem

de design• Há os designers que não entedem de

programação• Há os que entendem de tudo um pouco,

mas não o suficiente para fazer um produto ideal

a importância da interface no mundo de hoje

Gera muita demanda• A explosão da Web e a necessidade da

construção de sistemas e de interfaces gráficas para este ambiente tem gerado muita demanda por profissionais qualificados

• Numa fase de superaquecimento do mercado (bolha) essa demanda inflacionou salários

• Hoje com um balanço maior entre demanda e oferta, ainda oferece boa remuneração

Profissionais migrantes

• Sem formação específica, até bem recente essa demanda veio sendo suprida por profissionais migrantes de outras áreas

• Basicamente profissionais de sistemas, de Design e sem profissão definida

Profissional ‘legítimo’ aparece• Primeiros cursos de formação

superior ou sequencial específicos colocam no mercado as primeiras levas de profissionais ‘legítimos’

• Aquele que tem ‘formação’ na área• Se essa formação é adequada ou

não, deve ser motivo para debate

o designer x o programador

Situação atípica• Pela sua situação ‘primitiva’, a

interface gráfica da Web ainda pode ser toda feita por um só profissional

• Quando surgiu, os sistemas eram ainda mais simples e o ferramental ainda mais inexistente

• Era obrigatório algum conhecimento de programação para se criar uma interface de ambiente Web

Limitada a projetos pequenos• Na medida em que a tecnologia

vem evoluindo, o projeto do “um homem só” se torna cada vez mais raro e cada vez mais limitado a projetos de pequeno porte

• Em projetos maiores e mais complexos, é necessária a formação de uma equipe multidiciplinar

A invenção do Webdesigner• A falta de software apropriado

também contribuiu para a confusão do designer com o programador

• Esse híbrido passou a ser conhecido como o ‘Webdesigner’

• Na medida em que o software evolui, há menos necessidade de se conhecer os dois lados da moeda

• Há espaço para a especialização

O ‘front-end’ e o ‘back-end’• Na realização de projetos

complexos, a tendência é que se tenha um divisor de águas entre a programação ‘front-end’ e a ‘back-end’

• O profissional de interface gráfica deve ficar responsável pelo ‘front-end’ e o resto com o programador

A Web é a ponta do iceberg• A Web é a principal e praticamente

nossa única maneira de explorarmos a internet hoje em dia

• Tudo é feito através do computador e do browser

• Mas o verdadeiro potencial da internet não se esgota na Web

• Com o desenvolvimento da tecnologia e dos aparelhos, um universo inimaginável de opções estará a disposição

Debate

• O que é um profissional de internet?• Qual a diferença entre o

Webdesigner e o designer para a Web?

• Faculdade x formação livre hoje e no futuro

• A resposabilidade do designer de interfaces perante o mundo

2. criação não: soluçãoo processo de criação e design voltado para resultados

Definição da situação problemática• Primeira prerrogativa: design de

interface• Quem é o cliente• Qual é a sua necessidade (problema)• Em que ambiente ele se encontra• Qual é sua realidade social e

referências• O que está dando origem a sua

necessidade de design• Condições de viablização do projeto

Análise de situações análogas• Quais são as referências que nosso

cliente forneceu para o projeto• Quem são os concorrentes de mercado do

nosso cliente• Que soluções de projeto os concorrentes

de mercado oferecem• Que outras soluções similares podemos

levantar• Documentação e análise de todo o

material levantado para referência (benchmark)

Definição de objetivos• A necessidade

– O que o cliente diz que precisa– O que achamos que o cliente precisa– O que o cliente realmente quer

• O público-alvo– Com quem o cliente quer falar– Com quem o cliente deve falar– Com quem o cliente realmente quer falar

• A definição– Qual objetivo o projeto procurará atingir

Planejamento e arquitetura de informação• Primeira listagem de idéias (brainstorm)• Estruturação das idéias em grupos de

informação• Definição do fluxo de informação• Especificação de sistemas e componentes• Estimativa do esforço em horas para

desenvolvimento de cada seção do projeto• Priorização de áreas essenciais e

secundárias• Orçamento e definição de verba para

desenvolvimento

PLANILHA DE CUSTOS

ARQUITETURA DE INFORMAÇÃO

ORÇAMENTO SITE

Planejamento e arquitetura• Levantamento de informações 4 hrs• Análise e determinação de objetivos 2 hrs• Estrutura de navegação 3 hrs

Redação• Definição de conteúdo 10 hrs• Redação dos textos 20 hrs

Design de interface• Definição de funcionalidade 15 hrs• Design gráfico 45 hrs• Roteiro e animações 25 hrs

Implementação• Absorção do design em HTML 35 hrs• Programação em FLASH 40 hrs• Criação de trilha e efeitos de áudio 20 hrs• Ajustes e finalização de implementação 10 hrs• Ferramenta de publicação para notícias 20 hrs

Módulos adicionais• Estruturação da base de dados 25 hrs• Criação e programação da newsletter 5 hrs• Testes e ajustes 3 hrs

TOTAL

Condições de pagamento:1ª PARCELA (no 'ACEITE')2ª PARCELA (em 30 dias)3ª PARCELA (em 60 dias)

40%30%R$1.793,25

R$1.793,25

R$135,00

R$675,00

R$742,50

30%

R$2.550,00

R$1.875,00

R$5.977,50

R$2.391,00

Design de interface

• Primeira definição é a nível estrutural, sem influência do design gráfico (brand)

• Definição de elementos mestres• Definição de telas mestres• Definição da necessidade de

funcionalidade de cada tela do sistema

INTERFACE FUNCIONAL

EXEMPLO REAL

Protótipo e usabilidade (1)• Programação simples de protótipo

funcional– Links que permitam a navegação– Interação simples

• Testes de usabilidade– Pouco ou muito estruturados– Feitos com pessoas não envolvidas no projeto

• Análise e reação sobre resultados– Identificação de problemas estruturais– Correção de interface– Novo protótipo– Novo teste

Design gráfico• Definição gráfica sobre interface

funcional• Alteração da estética, comunicação,

marketing• Redação de conteúdo• Manutenção dos elementos funcionais• Aprovação das telas estáticas• Ajustes eventuais

Protótipo e usabilidade (2)• Nova programação de protótipo

simples• Novos testes de usabilidade com os

mesmos usuários da versão anterior• Identificação de eventuais

problemas funcionais causados pelo brand

• Análise e reação sobre resultados

Implementação

• Desenvolvimento do software de ‘front-end’ e ‘back-end’ necessário para dar suporte aos objetivos de negócio do site e funcionalidades de interface

• Cheque de consistência• Debug priorizado conforme prazo

de execução (cosmético, funcional, grave)

Ajustes

• Versão beta testada em ambiente controlado

• Site funcionando com estrutura final

• Abertura gradual para maior número de usuários

• Últimos testes e ajustes de problemas

Publicação

• Liberação do endereço para acesso público

• Comunicação gradual ao mercado sobre a publicação do novo projeto

• Monitoramento de acessos e funcionalidade

• Análise de logs para identificação de problemas de funcionalidade ou de conteúdo

3. mercado hoje e amanhão futuro da profissão

panorama do mercado atual

Perspectivas de mercado• Começou incipiente e cresceu

rápido• Passou por fase de

superaquecimento (bolha) seguida de depressão exagerada

• Passa por uma fase de consolidação e retomada de negócios

• Tende a ficar cada vez mais concorrido e especializado

Atenção: esse gráfico é uma completa “selvagem suposição”, principalmente no que se refere a curva de demanda do mercado. As curvas de oferta e capital são um pouco mais confiáveis, mas também não estão baseadas em números reais, tendo sido usadas apenas em caráter ilustrativo.

Áreas de atuação

• O design e a programação começaram sendo as únicas áreas existentes para se trabalhar com a Web

• Produtoras e empresas de informática eram os únicos lugares

• Complexificação da atividade abriu novas áreas

Concorrentes e novos concorrentes• O tipo de profissional

concorrente também mudou• No começo, todos concorriam

com todos e ninguém era originalmente do meio

• Amadurecimento traz hoje um profissional mais especializado, com mais formação

A nova geração• A nova geração não precisa ser

tão auto-didata quanto os pioneiros

• Já se forma em cursos, escolas técnicas e universidades

• É mais embasada e ao mesmo tempo vai se especializando mais nas diferentes áreas em contraste com o profissional “sabe-tudo”

Tipos de profissional / empresa• Hoje é possível encontrar

profissionais nas mais diferentes empresas, nas áreas de TI, design, publicidade e marketing

• O trabalho tem sido contratado por:– O cliente diretamente– Agências de comunicação

Modelos de funcionamento• Profissional liberal

– Trabalha sozinho e/ou com parcerias para tarefas específicas

• Studios de design – Entre 3 e 8 profissionais – Maior foco no design, front end e na

programação simples

• Produtoras de internet– Entre 10 e 30 profissionais– Criam sites médios do começo ao fim

Modelos de funcionamento• Empresas de TI

– Mais de 30 profissionais– Desenvolvem sistemas de TI completos,

independente da sua relação com a Web– Projetam interfaces como complemento de seus

sistemas

• Agências de internet– Entre 5 a 15 profissionais– Foco na estratégia, criação e atendimento aos

projetos– Não tem equipe interna fixa, contrata de acordo

com as necessidades de cada projeto

perspectivas de futuro

A internet além da Web

• A Web é a segunda forma mais popular de acessarmos a internet (a primeira é o email)

• Hoje, toda nossa relação com a internet se dá através de um mesmo equipamento primitivo: computador pessoal

horroroso melhorzinho

O fim da internet e da Web• Quando tivermos mais e melhores

opções de acesso, a Web tende a perder sua importância ou eventualmente desaparecer

• Internet ainda é muito rudimentar e por isso está muito presente no nosso dia-a-dia

• Na medida em que funcionar bem e se incorporar no cotidiano, vamos deixar de pensar na tecnologia e passar a pensar no serviço que ela nos oferece

QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.

Ninguém se preocupa em como uma geladeira funciona.

Apenas se ela está cheia ou não.

O mundo de interfaces• A informática entrou para nunca mais

sair das nossas vidas• Todo aplicativo de informática vai

sempre demandar alguma interação• Toda interação sempre demandará

uma interface• Durante muito tempo, essa interface

ainda será GRÁFICA• Em um mundo de interfaces gráficas o

designer é peça FUNDAMENTAL

A especialização das profissões• Mais e melhores projetos virão• Ferramentas mais aprimoradas• Todos esses indicativos nos levam a

acreditar na necessidade de profissionais menos generalistas e mais especializados, com funções mais definidas

• A separação entre Design e Tecnologia deve seguir o caminho da Arquitetura e da Engenharia civil

Caminhos seguros a seguir• Independente do tipo de interface e do

tipo de projeto de design, o processo de trabalho seguirá sendo sempre o mesmo que vimos hoje

• Ele se adapta a qualquer tipo de tecnologia ou ferramenta final

• É fundamental que se coloque a tecnologia sempre em segundo plano e que se invista todo o possível em conceito e teoria

• Tecnologias mudam todo mês, conceitos e teorias passam séculos se aprimorando

Debate final• O ‘fim’ da Web é o fim do ‘Webdesigner’?• Como se preparar para o futuro e levar o

dia-a-dia?• Como os profissionais ‘generalistas’

podem se especializar sem voltar para a escola?

• Do que abrir mão na hora da especialização se gosto de tudo?

• Quanto tempo isso vai levar para se tornar realidade? Quando é o ‘futuro’?

São Paulo, novembro de 2003