workshop webinsider 2003
DESCRIPTION
TRANSCRIPT
![Page 1: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/1.jpg)
workshops webinsiderdesign para web
michel lent schwartzman
![Page 2: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/2.jpg)
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
![Page 3: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/3.jpg)
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
![Page 4: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/4.jpg)
apresentação de credenciaishistórico profissional e apresentação de portfolio
![Page 5: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/5.jpg)
QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.
RIO 19881993
puc-rio, freelance
![Page 6: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/6.jpg)
Banda Bel | Primeiro offset | 1988
![Page 7: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/7.jpg)
Convite para show | Banda Bel | 1989
![Page 8: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/8.jpg)
Banda Bel | Logotipo | 1990
![Page 9: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/9.jpg)
LP “Rei do Rio”, Banda Bel | 1991
![Page 10: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/10.jpg)
Turnê “Rei do Rio” | Banda Bel | 1991
![Page 11: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/11.jpg)
CD “Sambadrome” | Banda Bel | 1993
![Page 12: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/12.jpg)
Marcas diversas | 1993
![Page 13: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/13.jpg)
QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.
NYC9496
nyu/agency.com/euro.rscg
![Page 14: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/14.jpg)
Primeiro experiência em HTML | 1994
![Page 15: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/15.jpg)
Primeiro site profissional (prog HTML)| American Express University | Agency.com | 1995
![Page 16: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/16.jpg)
Biquini Cavadão | MLS | 1995
![Page 17: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/17.jpg)
![Page 18: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/18.jpg)
QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.
RIO9600
mlab/10’/bowne/globo.com
![Page 19: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/19.jpg)
Banco Itaú | Medialab | 1996
![Page 20: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/20.jpg)
Shell do Brasil | Medialab | 1996
![Page 21: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/21.jpg)
![Page 22: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/22.jpg)
![Page 23: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/23.jpg)
Site oficial do Ronaldinho | 10’Minutos | 1997
![Page 24: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/24.jpg)
Lançamento Ronaldinho no JN | 10’MInutos | 1997
QuickTime™ and aMicrosoft Video 1 decompressorare needed to see this picture.
![Page 25: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/25.jpg)
Site Institucional | Bowne | 1998
![Page 26: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/26.jpg)
Brasil 500 | Bowne | 1999
![Page 27: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/27.jpg)
Globo.com | Globo.com | 2000
![Page 28: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/28.jpg)
SP0001
DM9DDB
![Page 29: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/29.jpg)
Site Institucional | Itaú Seguros | 2001
![Page 30: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/30.jpg)
Radio Triton | Triton | 2001
![Page 31: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/31.jpg)
15ª Semna da Criacao Publicitaria | 2001
![Page 32: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/32.jpg)
TV Interativa Itaú | Itaú | 2001
![Page 33: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/33.jpg)
MAR02
10’Minutos, São Paulo
![Page 34: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/34.jpg)
Hotsite Honda NXR | DM9 | 2003
![Page 35: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/35.jpg)
Prêmio Empreededor do Ano | Ernst & Young | 2003
![Page 36: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/36.jpg)
Portal Banco Real | Banco Real | 2003
![Page 37: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/37.jpg)
Hotsite Honda FIT | DM9 | 2003
![Page 38: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/38.jpg)
Klassicos Kaiser / Kaiser Oktoberfest | Bates | 2003
![Page 39: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/39.jpg)
Hotsite Kaiser Bock | 2003
![Page 40: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/40.jpg)
Portal Kaiser Music | Bates | 10’Minutos | 2003
![Page 41: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/41.jpg)
Cliente atendidos | 10’ | 2003
![Page 42: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/42.jpg)
Direção de Criação | Prêmios
![Page 43: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/43.jpg)
1. criação, design, web, webdesignconceitos, fronteiras, modismos e práticas
![Page 44: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/44.jpg)
verdades e mitos sobre criação
![Page 45: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/45.jpg)
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
![Page 46: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/46.jpg)
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.
![Page 47: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/47.jpg)
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
![Page 48: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/48.jpg)
QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.
QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.
![Page 49: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/49.jpg)
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
![Page 50: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/50.jpg)
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
![Page 51: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/51.jpg)
compreendendo o design
![Page 52: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/52.jpg)
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
![Page 53: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/53.jpg)
QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.
Mulheres na fábrica de velas (Alemanha)
![Page 54: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/54.jpg)
QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.
![Page 55: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/55.jpg)
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
![Page 56: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/56.jpg)
QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.
![Page 57: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/57.jpg)
QuickTime™ and aTIFF (Uncompressed) decompressorare needed to see this picture.
Dessau 1926, Wassily e Nina Kandinsky, Georg Muche, Paul Klee, Walter Gropius
![Page 58: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/58.jpg)
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
![Page 59: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/59.jpg)
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
![Page 60: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/60.jpg)
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.
![Page 61: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/61.jpg)
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.
![Page 62: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/62.jpg)
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
![Page 63: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/63.jpg)
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
![Page 64: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/64.jpg)
“Alto” da Xerox
![Page 65: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/65.jpg)
o design de interfaces e a web
![Page 66: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/66.jpg)
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
![Page 67: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/67.jpg)
![Page 68: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/68.jpg)
![Page 69: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/69.jpg)
![Page 70: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/70.jpg)
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
![Page 71: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/71.jpg)
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
![Page 72: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/72.jpg)
Websites existentes
![Page 73: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/73.jpg)
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
![Page 74: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/74.jpg)
![Page 75: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/75.jpg)
![Page 76: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/76.jpg)
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
![Page 77: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/77.jpg)
a importância da interface no mundo de hoje
![Page 78: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/78.jpg)
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
![Page 79: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/79.jpg)
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
![Page 80: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/80.jpg)
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
![Page 81: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/81.jpg)
o designer x o programador
![Page 82: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/82.jpg)
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
![Page 83: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/83.jpg)
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
![Page 84: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/84.jpg)
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
![Page 85: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/85.jpg)
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
![Page 86: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/86.jpg)
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
![Page 87: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/87.jpg)
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
![Page 88: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/88.jpg)
2. criação não: soluçãoo processo de criação e design voltado para resultados
![Page 89: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/89.jpg)
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
![Page 90: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/90.jpg)
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)
![Page 91: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/91.jpg)
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
![Page 92: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/92.jpg)
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
![Page 93: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/93.jpg)
PLANILHA DE CUSTOS
ARQUITETURA DE INFORMAÇÃO
![Page 94: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/94.jpg)
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
![Page 95: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/95.jpg)
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
![Page 96: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/96.jpg)
INTERFACE FUNCIONAL
EXEMPLO REAL
![Page 97: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/97.jpg)
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
![Page 98: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/98.jpg)
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
![Page 99: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/99.jpg)
![Page 100: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/100.jpg)
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
![Page 101: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/101.jpg)
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)
![Page 102: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/102.jpg)
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
![Page 103: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/103.jpg)
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
![Page 104: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/104.jpg)
3. mercado hoje e amanhão futuro da profissão
![Page 105: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/105.jpg)
panorama do mercado atual
![Page 106: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/106.jpg)
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
![Page 107: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/107.jpg)
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.
![Page 108: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/108.jpg)
Á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
![Page 109: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/109.jpg)
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
![Page 110: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/110.jpg)
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”
![Page 111: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/111.jpg)
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
![Page 112: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/112.jpg)
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
![Page 113: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/113.jpg)
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
![Page 114: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/114.jpg)
perspectivas de futuro
![Page 115: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/115.jpg)
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
![Page 116: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/116.jpg)
horroroso melhorzinho
![Page 117: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/117.jpg)
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
![Page 118: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/118.jpg)
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.
![Page 119: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/119.jpg)
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
![Page 120: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/120.jpg)
![Page 121: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/121.jpg)
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
![Page 122: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/122.jpg)
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
![Page 123: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/123.jpg)
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’?
![Page 124: Workshop Webinsider 2003](https://reader035.vdocument.in/reader035/viewer/2022062615/548b7676b47959d30c8b6184/html5/thumbnails/124.jpg)
São Paulo, novembro de 2003