Home

DWD:2 (Design/Web/Design 2)

1. O etc Nomes em mai sculas e min sculas s o tratados como id nticos A entidade que controla os registros de dom nios no Brasil a FAPESP Funda o de Amparo Pesquisa do Estado de SP Seu Comit Gestor estabelece mais algumas restri es dom nios registrados nas categorias EDU BR GOV BR e MIL BR AM BR FM BR NET BR e TV BR por exemplo obedecem a regras espec ficas para seu registro Para pessoas f sicas o dom nio NOM BR Outros nomes de dom nio poss veis no Brasil s o segundo a FAPESP Para entidades e pessoas jur dicas AGR BR Empresas agr colas fazendas AM BR Empresas de radiodifus o sonora ART BR Artes m sica pintura folclore EDU BR Entidades de ensino superior COM BR Com rcio em geral ESP BR Esporte em geral FAR BR Farm cias e drogarias FM BR Empresas de radiodifus o sonora G12 BR Entidades de ensino de 1 e 2 grau GOV BR Entidades do governo federal IMB BR Imobili rias IND BR Ind strias INF BR Meios de informa o jornais bibliotecas etc MIL BR For as Armadas Brasileiras NET BR Empresas de Redes da Anatel ORG BR ONGs sem fins lucrativos PSI BR Provedores de servi o Internet REC BR Atividades de entretenimento divers o e jogos SRV BR Empresas prestadoras de servi os TMP BR Eventos tempor rios como feiras e exposi es TUR BR Entidades da rea de turismo TV BR Empresas de radiodifus o de sons e imagens ETC BR Outras entidades Para pro
2. Conte do mapa e navega o Ao contr rio dos livros e jornais que s o previs veis ou do r dio e televis o que s o lineares n o h como saber o que h em um website Por isso importante evidenciar onde est o visitante como chegou ali e para onde seguir a partir desse ponto Os mapas podem ser desenhados das formas mais esdr xulas poss veis O que importa dar ao usu rio a manipula o e controle sobre a situa o N o se esque a que um produto digital um conjunto de documentos importante que o visitante saiba reconhecer no emaranhado de possibilidades caminhos a se seguir Entrada de dados e resposta Voc j reparou que nossos pais e av s se comportam como se tivessem medo de quebrar aparelhos ou de tomar choque se apertarem os bot es errados N o se age assim por acaso provavelmente na poca dos primeiros aparelhos eletr nicos um bot o poderia significar uma explos o ou algo pior Leve isso em considera o quando criar reas que impliquem em a es do usu rio bom que ele saiba que clicou em um bot o ou que preencheu um formul rio Som e interfaces O som pode ser usado de duas formas em uma interface integrado a ela para deixar o usu rio a par do estado do sistema ou alertando o usu rio de algum fato que uma tarefa acabou por exemplo Se uma interface tem diferentes estados ou modos cada um pode ter um som particular quando se entra ou sai dele Isso pode enfatizar o modo
3. necess ria alguma atualiza o que n o seja autom tica Em que periodicidade 7 H um cronograma de produ o Ele envolve todos os parceiros realista Ah ent o t Mente quem diz que acerta os prazos Uma velha piada em est dios diz que voc leva 90 do tempo para fazer 90 das tarefas e outros 90 ou seja o mesmo n mero de horas para fazer os 10 finais tempo esse gasto em finais de semana noites viradas e pizza Isso acontece porque n s simplesmente n o sabemos medir tempo com precis o e porque todo processo cerebral n o mec nico n o pode ser sistematizado Em outras palavras tem horas que produzimos como motonetas envenenadas e tem horas que somos menos produtivos que funcion rios de reparti o p blica Desesperar se com isso ir contra a natureza humana Com os dados do projeto bem definidos deve se dividir a produ o em etapas e estimar um prazo para cada uma delas considerando as que forem simult neas Com isso h um tempo total e um prazo parcial para cada etapa Se alguma atrasar as outras j ficam alertadas Quando n o erramos os prazos o inesperado acontece para nos atrapalhar de m quinas dando pau e blecautes a uma pris o de ventre Por isso calcule um m nimo de 30 do tempo previsto para cada tarefa e coloque como adicional para cuidar do imprevisto Monte o cronograma e fa a seu or amento com base nesses par metros Deve ajudar mas n o garantido Ali s nada Produtor
4. Partilha um mesmo documento pode ser manipulado simultaneamente por diversas pessoas e Personaliza o um documento pode ter um formato e ou abrang ncia espec ficos para cada usu rio 4 5 Tecnologia Imagine a seguinte hist ria um canal de TV a cabo resolve fazer um programa high tech e convence seus clientes e anunciantes a topar alguns programas que s podem ser visualizados por quem tenha um Home Theater com tela de 63 polegadas em cristal l quido O argumento seria o bvio p blico selecionado recursos melhores dire o de arte inovadora al m da associa o da imagem do canal alta tecnologia mesmo que poucos ou quase ningu m pudesse visualizar seu conte do E esse conte do n o seria muito diferente de um Faust o com efeitos especiais Para o resto dos mortais n o haveria op o veriam uma vinheta com um aviso que seu aparelho de TV era fraco demais para dar conta do recado O caso que voc acabou de ler seria inimagin vel do ponto de vista de qualquer pessoa com um m nimo de bom senso Infelizmente eles s o muito comuns na internet A cada dia mais f cil ver sites desenhados para monitores grandes incompat veis com equipamentos mais velhos dependentes de sistemas potentes de transmiss o e de programinhas plug ins sofisticados A situa o piora se levarmos em considera o que as novidades tecnol gicas que esses sites trazem n o agregam valor a seu conte do S o comuns casos de de
5. capaz de fazer um site Qualquer um Bom n o exatamente Como diria George Orwell todos s o iguais mas alguns s o mais iguais que os outros Embora seja fundamental o talento um animal bravo e indisciplinado e nem sempre est dispon vel na hora em que precisamos dele E talento sem disciplina s a metade do esfor o A id ia deste livro mostrar a voc algumas regras para ajud lo a criar layouts estruturados fundamentados e consistentes atrav s dos quais seu talento poder florescer e brilhar S o regras que n o t m nada a ver com computadores e nem t m a inten o de limitar sua cria o muito pelo contr rio Seu objetivo ajud lo a entender por que uma interface considerada boa e ajud lo a desenvolver suas id ias S o regras que devem ser reconhecidas e analisadas para depois serem descartadas invertidas adaptadas Quero ajudar a estimular sua curiosidade e questionamento fazendo com que voc n o aceite as solu es mostradas na WWW como definitivas Este livro n o um manual de t cnicas um manual de questionamentos Ele se prop e a instigar explicar e perguntar e nesse processo ajuda voc a criar produtos inventivos criativos e inovadores Ele pretende agir como a estaca que a gente coloca do lado de uma plantinha nova para que ela cres a forte e saud vel Quando o objetivo for alcan ado a estaca pode ser jogada fora e ningu m mais se lembrar dela Enfim seja bem
6. Intelig ncia Artificial cria o de Redes Neurais Algoritmos Gen ticos Fuzzy Logic etc Implementa o de Ambientes de Seguran a Apresenta es em CD ROM e DVD ROM Consultoria e Implementa o de intranets e Desenvolvimento de Sistemas Espec ficos CRM ERP WebCallCenter etc A Farol Digital tem pouco mais de um ano Entre seus clientes est o McDonald s sistema de software que comp e a McEntrega RedeCard integra o de internet intranet extranet e transa es online a Safenet e o portal da dupla Zez Di Camargo e Luciano hospedado no portal Globo com 8 3 Organiza o dos grupos de informa o Aprovado o projeto a primeira coisa a se fazer analisar todo o conte do Esque a as estruturas e a navega o e organize os dados em conjuntos baseados em seus temas principais O ideal formar tr s ou quatro grandes conjuntos n o mais do que isso Esse processo ajuda a focar a mensagem e a estabelecer o que fundamental comunicar Elementos que perten am a dois conjuntos ficar o em sua intersec o Se voc est tendo alguma dificuldade em separar esses conjuntos imprima uma tira de papel para cada elemento e tente organiz los espacialmente se concentrando na relev ncia da uni o Algo como isto tem a ver com isto que tem a ver com aquilo Isto e isto s o mais pr ximos isto viagem e assim por diante Agora hora de estabelecer as rela es entre cada elemento Fazer linhas entre
7. em que o nico caminho voltar para a Home Page Ou aqueles em que o visitante for ado a passar por v rias p ginas intermedi rias sem conte do at chegar informa o Ou aqueles cujos links n o funcionam para acabar com esse tipo de problema que existe a Arquitetura de Informa o que visa a organiza o de grandes massas de dados preparando rotas de acesso a eles Ela est se mostrando fundamental em cole es de produtos como livros de refer ncia supermercados lojas de CDs e de departamentos cat logos sites na internet e CD ROMs O nome pomposo mas a fun o se baseia em um conceito simples que o mesmo do design o bom senso Uma arquitetura eficiente torna a informa o acess vel e compreens vel a outras pessoas qualquer que seja seu n vel de conhecimento Como os maravilhosos museus de ci ncia e hist ria natural ela transforma o que complexo em peda os simples e estimula seu desenvolvimento Latch op es de organiza o N o se pode falar de Arquitetura de Informa o sem citar o pai da mat ria Richard Saul Wurman que cunhou o termo e seu conceito em 1975 Segundo ele o que faz a comunica o poss vel a possibilidade de identificar em seu interlocutor o que ele n o compreende verificar se h algum interesse em compreend lo e descobrir a melhor estrutura para transmitir a informa o Essa informa o deve se relacionar com conceitos que ele j compreende e trazer alg
8. pr tica seu p blico consegue ler seu texto Mesmo Est disposto a fazer esse esfor o sacrif cio Ent o beleza n o est mais aqui quem falou seu texto est bom 7 Integra o n o deixe seu design desafinar Depois de testar todos os conceitos individualmente hora de harmoniz los agrup los alinh los simplific los orden los ou sintetizando integr los N o adianta nada um layout seguir alguns princ pios em umas p ginas para quebr los em outras Como maestro de uma sinfonia n o deixe sua pe a desafinar Esses s o apenas alguns conceitos A experi ncia e o bom senso e uma certa dose de talento s o fundamentais para se fazer design E bom se reciclar constantemente e buscar sempre novas formas de a o 3 1 Grids cada coisa em seu lugar Uma das melhores formas de se organizar os elementos em uma p gina ou tela usar grades de alinhamento tamb m chamadas de grids Essas ferramentas dividem o espa o vis vel em reas e d o maior consist ncia a um layout S o o terror de quem est come ando a fazer design e a salva o de quem j tem alguma pr tica Sua fun o criar ordem no caos que pode se transformar um documento O grid padroniza os espa os e ajuda o usu rio a achar o que procura no lugar esperado todas as vezes E for a o designer a pensar construtivamente de forma estruturada para que o visitante n o tenha que descobrir a cada instante o que foi projetado Se e
9. um verdadeiro v o da imagina o A busca por informa o dentro de uma grande massa de dados pode ser um esfor o enorme muitas vezes desesperador A situa o tende a piorar medida que os sistemas ficam mais ricos O caminho em busca de informa o relevante dentro de um universo como este em breve se tornaria invi vel com as ferramentas dispon veis hoje em dia Conscientes do problema pesquisadores de interfaces quebram a cabe a em busca de uma ferramenta para representar visualmente a informa o de cada parte de um sistema digital Esse processo de visualiza o se chama metaconte do Ele se baseia em uma estrutura tridimensional que se reorganiza o tempo todo E como se em uma biblioteca os livros pudessem se reposicionar de acordo com o tema pesquisado e ao olhar para a capa de um deles fosse poss vel ter uma no o exata de seu conte do O metaconte do uma das aplica es mais abrangentes da paisagem informativa Uma das id ias mais desenvolvidas de metaconte do substitui a atual met fora da desktop nos computadores pessoais por um visualizador tridimensional que permita ao usu rio o v o atrav s de um espa o povoado por representa es visuais de informa o Pode se voar em todas as dire es em diversas velocidades Em princ pio s se pode ver as principais bolhas no espa o mas ao se mover em dire o a elas seu conte do se torna grande o suficiente para ser identificado Esses itens po
10. A tecnologia esse espet culo de m gica cont nuo muda as nossas vidas enquanto aumenta e encolhe nosso campo cultural A narrativa pulou da p gina para a tela e para a p gina na tela a m sica precisa agora ser vista al m de ouvida os computadores bagun aram nossa rela o com a informa o e a internet seguindo a tradi o da televis o terminou por demolir o resto da solidez que t nhamos As coisas parecem se mover depressa demais mas a realidade que os conceitos que agrupavam e aprisionavam os conte dos est o sendo demolidos rapidamente deixando todo mundo confuso Para se inventar um produto novo usando uma tecnologia igualmente nova preciso examinar cada pequeno objeto que pegamos v lo cuidadosamente calcular as sensa es de quem o utiliza pensar com sua cabe a e criar uma pe a que s poderia ser utilizada por ele explorando essas sensa es Assim uma secret ria eletr nica n o um eletrodom stico mas a frustra o de quem quer falar com algu m ao telefone e n o o encontra Uma mensagem gravada nesse aparelho tem que dar esse conforto Um website n o o folheto de uma empresa e nem precisa ter os links esquerda mas deve ter as refer ncias de quem o consulta n o de quem o faz Correndo velocidade da luz sem sair do lugar nos agarramos s categorias nem sempre tendo o cuidado de examin las Elas s o nossas placas de orienta o em uma paisagem confusa gastas de t o velhas e us
11. N o vou fazer falsos elogios a essa fase pois todo mundo sabe que um saco fazer a parte mais trabalhosa e menos criativa do est dio digitalizar fotografias tra ar logotipos reduzir a quantidade de cores em imagens procurar refer ncias gerar quadros de anima es adaptar fam lias de letras para cones trabalhar imagens de fundo e t tulos Um saco mas muito importante para a forma o Ao lapidar o processo o assistente toma conhecimento de cada etapa e aprende a dar aten o aos detalhes bom permanecer pelo menos um a dois anos nessa fun o antes de se dizer designer Isso n o significa que um assistente n o tenha talento ele apenas n o tem experi ncia ou consci ncia suficiente do processo Se voc est trabalhando sozinho todo cuidado pouco estabele a um conceito bem forte e crie uma linha de design coerente com ele Se o seu design n o encaixa no conceito n o force mude um deles Mas mantenha sempre a unidade das p ginas pois qualquer inova o que fuja da sua linha de design tem mais chances de ser fatal do que de apresentar alguma esp cie de xito G nio Este artigo publicado na design Gr fico n 11 uma esp cie de desabafo do Diretor de Cria o contra os auto intitulados geninhos que nos mostram layouts muito mais em busca de elogios que de opini es Situa o convencional voc est pensando uma solu o de design para um endere o Internet e nada absolutamente nada
12. Ou voc solit rio e s quer ver pessoas conversando imaginar suas hist rias Ou voc mora em Joa aba e quer discutir cinema iraniano Ou est para se mudar para o Rio e n o conhece nada por l Ou marcou viagem para Cabo Verde e s sabe que fica na frica Ou est nos Estados Unidos e sente saudades de casa Ou ainda quer saber as melhores trilhas de bicicleta na Serra da Bocaina Ou tem um parente com Alzheimer e n o sabe o que fazer Ou precisa de um advogado Ou s quer um pouco de sacanagem Ouvir fofocas Pegar conselhos As salas de chat listas de e mail e grupos de discuss o da internet s o as novas ruas igrejas partidos padarias pra as p blicas onde as pessoas apressadas e atarefadas e estressadas conseguem ser um pouco humanas S o simples espa os para que todos possam trocar id ias brigar brincar pedir ajuda postar mensagens conviver ser humano enfim O excesso de tecnologia entupiu todo mundo de trabalho a tal ponto que todos ficam cansados demais para sair quando chegam em casa Isso estimula o encasulamento as pessoas ficam cada vez mais isoladas fechadas sozinhas Em um ambiente social mut vel e imprevis vel cada vez mais as pessoas querem pertencer a um grupo Muitos procuram mais do que informa o quando entram em um sistema online vendo os como lugares em que podem interagir com outras pessoas pedir conselhos compartilhar experi ncias etc mesmo que n o seja em ambientes reais com pes
13. Pok mons AAARRGGGHHHHH Malditos Pok mons Eles est o em todos os lugares Nas suas variantes Fogo gua El trico Grama Gelo Guerreiro Veneno Voador Paranormal Fantasma Drag o eles est o por toda a parte Nas formas de Arbok Fearow Beedril Carterpie Ivysaur Bulbasaur Kakuna Metapod Charizard Blastoise Charmeleon Ekans Venusaur Pidgeot e Pidgeotto e Pidgey Raticate Rattata Squirtle Buterfree Charmander Raichu Spearow e do fiel indefect vel e onipresente Pikachu eles est o em cada esquina Evoluindo com a Pedra Lunar ou a Pedra Trov o a mando de seus treinadores n o h lugar em que eles n o estejam Espertos com suas malditas Pok balls eles est o em cada cantinho Em suas aventuras com Ash Brock e Misty contra o Team Rocket de Jesse James e do trapaceiro Pok mon Meowth ser que existe algum bendito lugar em que eles n o estejam um saco mas n o tem jeito eles est o mesmo por toda a parte Modinha miser vel de qualidade duvidosa esse seriado japon s um dia vai acabar e da s ouviremos falar de Tentacruel Geodude Graveler Golem Ponyta Rapidash Slowpoke Slowbro Magnemite Magneton Farfetch d Doduo Dodrio Shellder Cloyster Gastly Haunter Gengar Onix Drowzee Hypno ou Voltorb em alguma onda retr besta ainda mais ef mera Ainda bem Mas imagine por um instante se essa onda n o acabasse muito pelo contr rio se o que estiv ssemos vendo fosse s o come o de u
14. an lise de planos estrat gicos de empresas que pretendam montar uma opera o online Apesar de mais focada no planejamento que no design ela interessante porque integra produtos ou servi os online a seu mercado e concorr ncia Chamada de iD5 essa metodologia tem cinco fases consecutivas 1 Estrat gia de neg cios reconhecimento do ambiente levantamento dos objetivos e recursos iniciais an lise do planejamento estrat gico nicho de mercado e concorr ncia mapeamento de oportunidades Com esses dados em m os desenvolve se uma estrat gia para atingir o consumidor e definine se a dire o que a empresa tomar A partir da o plano de implementa o e suas prioridades s o tra ados reunindo as reas envolvidas 2 Planejamento de solu es conhecimento adquirido define se o modelo operacional fun es e necessidades Monta se o projeto gr fico inicial mapas modelos l gicos de dados arquitetura do sistema e plano de estrutura o 3 Detalhamento seguindo as diretrizes criativas definidas na fase anterior nessa fase que se desenvolvem todos os elementos necess rios para o produto completo mapas detalhados design estrutural cria o de todas as interfaces e pontos de interatividade prepara o dos modelos de dados para gera o e atualiza o de p ginas e sua integra o com sistemas preexistentes de inform tica A identifica o problemas ou gargalos estruturais ocorre aqui 4 Desenvolvimento
15. cada experi ncia interpretada de uma forma diferente de acordo com a hist ria pessoal de cada um Uma chuva forte que apague um inc ndio pode significar para um ndio que Tup teve piedade enquanto que para um homem urbano e civilizado pode significar que coincid ncia feliz As coisas n o s o como as percebemos Cada inst ncia de um objeto uma oscila o nos rg os dos sentidos A mente sincroniza essas oscila es gerando uma sintonia que se reflete como 66 A99 percep o um morcego por exemplo n o v objetos mas sim os escuta A linguagem uma representa o simb lica que gera outras oscila es A mente humana unifica todos esses sinais e capaz de armazen los e reproduzi los sincronizando as oscila es externas percep es com as internas experi ncia Um beb recebe sinais puros ainda n o modulados por sua vontade medida que cresce vai sincronizando esses sinais e se familiarizando com o mundo Grandes intelig ncias e grandes conquistas s o menos quest o da capacidade de processamento e mais capacidade de se estar apto a extrair pistas relevantes de cada processo As pessoas de grande sensibilidade ou capacidade para descobrir coisas t m na verdade uma aten o de rastreamento imensa usando toda a informa o ambiental para de maneira r pida corrigir a rota de seu discurso e condutas Assim o desenho de uma ma a palavra ma se
16. cio e vai ficar muito mais f cil fazer um site Provavelmente algumas das suas respostas voc ver nas p ginas seguintes e Possibilidades de design alguns sites s o lindos Outros inovadores Neles cada imagem cuidada o projeto gr fico coerente uniforme um espet culo e Grandes id ias e commerce ICQ MP3 reservas de passagens home banking RPG romances interativos comunidades virtuais webmail salas de chat sexo virtual a web parece o chap u de id ias do professor Pardal a cada instante um novo recurso produto ou servi o e Agilidade de informa o de um texto do Ezra Pound a uma foto de um trombone d para se achar de tudo na web Mesmo que seja dif cil e tome tempo ainda muito mais f cil que achar a mesma informa o sem ela e Personaliza o os websites est o cada dia mais espertos eles sabem quem voc do que gosta o que faz e como faz E fazem isso para dar dicas sugest es e recomenda es Funcionam como aquele vendedor bacana que sabe seu estilo e s d bola dentro e Servi os de pedir uma pizza a mandar flores a web pode ser um grande auxiliar para um s bado noite Pois Com todos esses motivos era para as pessoas estarem passeando cada vez mais pelos sites mas o que acontece exatamente o oposto Tanto que h algum tempo as listas de hot links eram muito populares e hoje ningu m fala mais nelas O des nimo com o conte do da WWW cada vez
17. com os elementos preparados est tudo pronto para a programa o estrutura o de servidores e sua conex o cria o dos bancos de dados testes de funcionalidade e usabilidade e 5 Lan amento ajustes finais no projeto prepara o dos elementos campanhas de rela es p blicas e propaganda e acompanhamento de seu desenvolvimento A metodologia que uso Por ter trabalhado com diversas equipes de um grande n mero de empresas n o costumo impor minha forma de pensar a nenhum grupo de trabalho Muito pelo contr rio prefiro absorver elementos da cultura de cada cliente para montar seu site de uma forma bastante personalizada Existe uma s rie de etapas que sigo mais baseado em bom senso que em qualquer f rmula heur stica Elas s o doze 1 Defini o das necessidades e objetivos da empresa em um ambiente digital por que estar T Desenvolvimento do conceito comercial criativo t cnico e seus objetivos Especifica es planejamento e cronograma Organiza o dos grupos de informa o e seu fluxo design estrutural Design texto e dire o de cria o Produ o de conte do Integra o de conte do Programa o e integra o de software so 5005 CEIA no o Testes e controle de qualidade 10 Lan amento e marketing 11 Manuten o e 12 Acompanhamento do usu rio Essas etapas s o feitas individualmente mas no correr do processo muitas delas acabam se acumulando invertendo ou sim
18. es S o os principais elementos de contato entre o usu rio e o produto digital por isso devem ser desenhados com muito cuidado Se verdade que eles devem acompanhar todo o estilo da interface muito mais importante que eles sejam pr ticos e de compreens o f cil caso contr rio ser o in teis S mbolos elaborados s o muito dif ceis de fazer por m duradouros Os signos universais para os sexos funcionam melhor que muitos desenhos de banheiros de restaurantes descolados A n o ser que voc tenha uma excelente id ia para substituir os tri ngulos e quadrados que representam os controles de um videocassete n o o fa a pode ser que seu usu rio n o tenha uma percep o t o criativa Duas hist rias curtas sobre banheiros para que voc tenha id ia do desconforto que um cone confuso pode causar 1 No interior da China a maior parte dos banheiros tem os nomes masculino e feminino escritos na porta Em Kanji alfabeto chin s 2 Na it lia comum vermos banheiros com os dizeres Bambini meninos e Bambine meninas e 3 Existe uma velha hist ria de um garotinho que foi para os Estados Unidos e entrou no banheiro feminino pois leu Women como U OMEN o homem Na real somos todos estrangeiros quando entramos em um site novo Outro ponto importante os bot es e cones n o precisam ser tridimensionais No come o eles eram assim para imitar os bot es do teclado sugerindo ao usu rio o que fazer
19. estamos na realidade querendo criar rela es espaciais para orientar o leitor a ver os objetos em uma certa segii ncia Isso n o f cil pois n o h como prever como um leitor reagir a eles Duas escolas da psicologia tentaram descobrir como absorvemos as mensagens que nos empurram diariamente o Behaviorismo dos Estados Unidos e a Gestalt alem Ambas foram desenvolvidas nos anos 20 enquanto a primeira se preocupava com as formas de aprendizado a outra focava o estudo da percep o em especial da percep o visual e acabou gerando uma s rie de conceitos que se n o servem como regras pelo menos podem nos ajudar a entender o que teoricamente se passa na cabe a de quem consome nossos layouts Deixemos o Behaviorismo para os psic logos e vamos nos concentrar na Gestalt cujo principal objetivo era explicar porque o mundo tem essa apar ncia para pessoas comuns em ambientes naturais Cientistas especializados como Max Wertheimer Wolfgang K hler e Kurt Koffka estudaram as propriedades das formas do mundo visual em nossa percep o e fizeram v rias revela es que se hoje parecem bvias nem sempre o foram A Gestalt quase uma filosofia Ao mostrar como funciona nosso processo de percep o nos faz questionar o ambiente que nos cerca Os antigos se orientavam pelas estrelas e atribu am desenhos e significados mitol gicos s constela es que serviam tamb m para contar hist rias e medir o tempo Hoje como n o mai
20. ficos ou pixels em vez dos gen ricos cent metros um bom come o O grid deste livro por exemplo As linhas cinzas s o a pauta Todo o texto se ap ia nelas mesmo que contorne alguma imagem As linhas horizontais mais escuras dividem a rea total para que imagens possam ser apoiadas O texto corre em duas colunas blocado Imagens podem ocupar uma coluna inteira ou meia por isso essas linhas verticais de apoio que ficam bem no meio das colunas de texto 3 2 Fazendo um grid 1 7 8 Fa a um levantamento completo dos elementos que ser o usados no layout ou conjunto de layouts e Elementos de texto t tulos subt tulos legendas etc e Imagens ilustra es e fotografias e e Elementos decorativos tabelas fios e linhas Organize os elementos em grupos tem ticos veja quais falam com os outros e constituem grupos dentro do documento e que por isso precisar o ser colocados juntos Alguns exemplos e Ilustra es ou fotos com legendas e e T tulos subt tulos e textos Me a a rea total e til Fazendo um site considere a rea m nima necess ria que n o deve prejudicar seus usu rios e o espa o para barras de rolamento Em design gr fico considere o manuseio e transporte Divida o espa o em colunas e linhas elas ajudam a estabelecer propor o regularidade estrutura e ritmo ao seu layout N o precisam ter um tamanho fixo mas bom que sejam proporcionais entre si
21. los 8 10 Manuten o e acompanhamento do usu rio Depois de tanto trabalho hora de botar a boca no trombone n o se esque a de avisar a assessoria de imprensa do seu cliente para que ela comunique o fato aos principais ve culos da rea se n o tiver uma assessoria e s nesse caso contacte voc mesmo Pode deixar uma rea para cr ditos no site vis vel mas n o evidente Ela deve seguir o princ pio da etiqueta da roupa s a v quem procura por ela N o adianta s atrair a aten o de um visitante para um endere o digital necess rio sustent la sen o ele ser um equivalente do acidente de tr nsito todo mundo que passa quer ver mas n o se compromete E fazer com que um usu rio desinteressado volte a um site de que n o gostou pode significar um enorme esfor o de propaganda O processo de produ o de um endere o digital n o termina quando o material est funcionando sem erros no ar Uma boa dose de empenho necess ria por isso bom Administrar o site ver se ele est no ar quais s o as p ginas mais visitadas e o que faz mais sucesso nele Responder a todos os e mails o mais r pido poss vel Isso n o significa uma resposta autom tica deve ser personalizada Usu rios acostumados com o imediatismo da internet aceitam uma demora de at um m s para a resposta a uma carta mas n o toleram mais que alguns dias para a resposta a um e mail Estimular o visitante cada pessoa que de
22. o define a cor de fundo cor do texto dos links de hipertexto posi o e tamanho das imagens e assim por diante Seu c digo muito simples parecido com as primeiras vers es de editores de textos P ginas geradas em HTML s o din micas como textos se adaptam janela aberta e v o montando o layout de acordo com os recursos dispon veis de tal forma que o resultado pode ter diversas formas e tamanhos diferentes conforme o computador tipo de browser tamanho da janela ou quantidade de plug ins instalados Desesperador Que nada fascinante Os documentos em hipertexto presentes na web s o parecidos com p ginas escritas em editores de textos a largura das linhas e comprimento do documento varia de acordo com o tamanho das janelas dispon veis Assim demanda muito cuidado preparar um material que seja consistente e coerente para todas as m quinas ou em que as perdas sejam as menores poss veis Em seus prim rdios o HTML n o apresentava muitos recursos al m dos links de hipertexto algumas op es de layout como negrito e it lico e a capacidade de colocar imagens Com a evolu o dos browsers foram surgindo comandos mais sofisticados e programas editores especializados em criar c digos a tal ponto que hoje em dia poucos designers escrevem HTML diretamente da mesma forma que quase nenhum designer gr fico escreve c digo PostScript a linguagem da impress o a laser Hoje existem v rias vers es do HTML e cada browse
23. o diante da novidade Os textos das pr ximas p ginas s o extra dos de alguns artigos que escrevi e exp em algumas de minhas inquieta es a respeito desse novo mundo Eles n o t m finalidade pr tica direta mas podem ajud lo a criar algo realmente novo e impensado S culo XXI guia do usu rio Chegou O sonho de um mundo cheio de m quinas em que apertamos bot es finalmente chegou e ningu m parece se dar conta disso ou pelo menos estar satisfeito Analisando tudo o que se fala sobre a virada do mil nio percebemos que ela anunciada mais como um assustador bug que com a era de Aqu rio A sensa o geral que agora que chegamos t o falada Utopia sentimos um enorme desconforto e uma irresist vel saudade de casa Em todos os lugares as pessoas se queixam da vida moderna o estresse o tr nsito a correria das grandes cidades a lentid o dos computadores a inefic cia dos celulares colesterol triglic rides e todas as agruras e incertezas de uma era digital Fazem um enorme sucesso as lendas de alquimia os contos medievais e a imagem de uma vidinha tranquila nas pequenas comunidades anal gicas do come o do s culo um tempo em que carreiras e geladeiras eram constru das para durar para sempre cuja nica rede de informa es era a fofoca e a coisa mais pr xima da realidade virtual era o Para so Muitas pessoas assumem uma nostalgia esquizofr nica de um tempo n o vivido sentindo saudades da Paris
24. quase extintos medida que a internet fica mais segura e o transporte de dados adquire maior capacidade informa o que demanda transporte f sico e n o pode ser atualizada em tempo real dever desaparecer Para contornar o problema est o surgindo documentos din micos que mesmo gravados em CD ROM conectam se internet e atualizam suas informa es no ato da opera o Assim d para se levar a maioria dos dados no CD e conectar com as informa es atualiz veis pela internet 4 6 P ginas pessoais Nos primeiros tempos da populariza o da web festejou se a exist ncia de p ginas pessoais websites individuais que dariam rede mundial um ar mais democr tico Como uma variante das tribunas em que qualquer um poderia subir e discursar sobre qualquer coisa A id ia louv vel e alguns endere os digitais fazem jus a ela s o impressionantes pelo conte do e dedica o de seus mantenedores quase altru stas mesmo que n o se goste do tema No fundo cada um de n s especialista em alguma coisa selos futebol carros Sandra Bullock e um site pessoal pode ser um lugar bacana para se disponibilizar esse tipo de informa o fazer contatos e at trocar id ias O desenho de websites sem objetivo comercial direto considerado por alguns a mais nova manifesta o da arte pop Na mesma linha diz se que a www o maior evento p blico de arte da hist ria pera devagar com o andor Se de certa forma louv vel a
25. vel como o celular Tamb m pode ser cativante como a correspond ncia profunda como uma consulta a um especialista imprevis vel como um papo de boteco A web a web Suas limita es tecnol gicas e as possibilidades do hipertexto fazem dela uma m dia de texto por enquanto Um revist o imprevis vel com n mero e ordem das p ginas vari veis Ou a web pode ser como um dep sito de livros usados um sebo Tem informa es em todos os formatos e material organizado de um jeito que n o valoriza seu conte do empilha os volumes lado a lado imaginando que quem vai consult los sabe exatamente o que quer e onde encontrar Assim existem volumes que nunca ser o lidos mesmo que sejam maravilhosos Ao contr rio de uma biblioteca eles n o t m uma ordem expl cita A sensa o que passa a de uma estante bagun ada h de tudo mas preciso procurar procurar procurar O conte do desta cole o organizado em sites Dentro deles h um n mero vari vel de documentos de hipertexto que todo mundo chama de p ginas apesar de serem muito mais ricos que isso Essas p ginas web s o ativas podem mudar de tamanho e propor o a cada instante e dependem totalmente das condi es do computador em que o material est sendo visto capacidade de processamento recursos multim dia tamanhos dos monitores e janelas dedicadas para a internet fam lias de letras browsers plug ins tecnologia velocidade de acesso tudo
26. adaptaram asas e de que depois se reclama por falta de aerodin mica os banners atuais precisam de servidores dedicados auditorias profissionais especializados gr ficos e equipes de vendas que muitas vezes podem significar um custo pesad ssimo para um site Em uma situa o surreal vender publicidade fica mais caro que produzir o pr prio ve culo Compare com a rela o custo benef cio que uma revista tem em imprimir quatro p ginas a mais para acomodar quatro novos anunciantes e fica f cil perceber que alguma coisa est errada Mas n o haveria tanto barulho se o banner fosse ruim e caro apenas para o ve culo O que acontece que para os anunciantes ele tamb m n o grande coisa muito pelo contr rio Vendido como uma panac ia para se descobrir o perfil detalhado do consumidor percebeu se que n o era bem por a as taxas de clicktrough s o mais baixas que retorno de mala direta e os custos muito muito altos Se voc tem alguma d vida aplique a velha lei da oferta e procura quantos sites existem Quantas p ginas eles portam Quantos banners cabem diariamente em uma p gina s fazer a conta que se v que n o d pra cobrar o mesmo pre o que um an ncio de revista ou comercial de TV Caro para o anunciante car ssimo para o ve culo Como a obriga o principal de qualquer m dia levar a marca ao seu consumidor todos esses preju zos poderiam ser contornados se pelo menos parte do p blico ainda estivesse sati
27. auditoria e manuten es peri dicas R tulos H uma m stica na categoriza o das coisas Desde crian as estamos acostumados a classificar tudo que vemos ouvimos e sentimos em pequenas gavetas de acesso f cil restritivo e imediato Assim da mesma forma que uma cadeira um m vel feito de madeira as ci ncias s o exatas humanas biol gicas os objetos s o cl ssicos ou populares art sticos ou comerciais N o h meio termo um mundo de absolutos habitado por pessoas t midas ou encrenqueiras ou gordas ou carecas ou sedent rias Os museus s o exibicionistas dessa compuls o classificat ria mas n o s o os nicos Em revistas TV jornais e na conversa das pessoas vemos cada vez mais o impulso que nos faz parecer velhos ranhetas Nesses tempos digitais nada poderia ser mais perigoso O encapsulamento e a defini o em categorias podem ser elementos de seguran a pois nos garantem um certo controle mas s o muito perigosos Sempre que rotulamos algo ou algu m automaticamente o limitamos e perdemos o contato com a real experi ncia de conhec lo o que morte para o design ou cria o em geral No ciberespa o as fronteiras s o muito t nues tudo corre muito r pido e um link pode levar a opini es opostas Como uma revoada de vaga lumes todos os conceitos parecem virar de cabe a para baixo misturando se opondo se completando se Os tempos mudaram e o mundo se apresenta a n s de m ltiplas formas in ditas
28. com os visitantes mais leais e atrav s deles atrair outros tamb m leais fazendo os voltar diversas vezes Para desespero dos anunciantes mais e mais consumidores tomam consci ncia de que internet n o de gra a e ficam mais seletivos quanto ao teor da mensagem divulgada e ao tempo que leva para ser transmitida Um dado dif cil de avaliar o n mero de pessoas que desiste de um servi o online porque o custo n o compensa o benef cio A Rede Globo em seu primeiro website colocava uma narra o de seu locutor Galv o Bueno falando Globo e voc Tudo a ver At na internet que tinha 250kbytes de tamanho e levava na poca aproximadamente oito minutos para poder ser ouvido Realmente nada a ver Estudo de Caso Coca Night Para ampliar mercado e n o ficar associada ao segmento de diet ticos a Coca Cola optou por um reposicionamento de seu produto light no mercado buscando novos consumidores noite em ocasi es festivas Esse novo posicionamento se chamaria Coca Cola Light Night e seria marcado por um conjunto de a es de promo o propaganda assessoria de imprensa e amostragem do produto em bares e restaurantes da moda Nesse cen rio a internet seria complementar s a es de massa Propus dire o da empresa que experimentasse colocar a internet no centro das aten es todas as a es promocionais e de comunica o ocorreriam em torno do site e de seu conte do que mostraria o melhor d
29. com que o leitor logo se aborre a ou nem se interesse por ele muito usado nos layouts tradicionais convites de casamento alguns cartazes de m sica erudita demonstrativos financeiros e em estruturas em que n o preciso chamar a aten o Conseguir o equil brio din mico entre os elementos de um layout com pontos de interesse e elementos que chamam a aten o muito mais dif cil Para isso preciso usar elementos de pesos e tamanhos diferentes que se oponham e se complementem criando movimento e interesse para que o usu rio sinta vontade de examinar toda a tela sem ficar com a impress o de que tem algo faltando ou sobrando Uma boa forma de se conseguir um layout equilibrado com elementos diferentes usar contrastes e trabalhar com reas vazias se dois elementos t m tamanhos cores formas ou dire es diferentes eles naturalmente ficam com pesos diferentes e podem ser mais facilmente equilibrados Depois de pronto o layout tente remover ou real ar algum de seus elementos Se a sensa o resultante for a de estar sobrando ou faltando alguma coisa que o layout est equilibrado 3 Contrastes cores e brancos Para entender contraste vamos imaginar uma coisa muito mais prosaica tr s casais de namorados No primeiro ele um capacho faz tudo o que ela quer e concorda com tudo o que ela diz Temos a uma rela o concordante No segundo eles t m suas diferen as e vivem cutucando um ao outro A
30. de anima o pr programada copiando modelos de sites de sucesso com os links esquerda da tela ou bot es tridimensionais que mudam de cor quando s o clicados usando clip arts em cones que precisam de legendas etc etc etc ah se um g nio me desse um nico desejo eu desinventaria a clip art e alguns programas de ilustra o a fome mundial bem que poderia esperar um pouco Mas afinal o que um WEBdesigner Que centauro esse que a m dia gosta tanto de popularizar Qual a sua forma o O que ele tem que fazer profissionalmente Seriam os webdesigners designers que entendem de web Mas existe gente que n o entende de web hoje em dia Ou seriam eles designers que sabem programar Seriam eles enfim designers Diretores de Arte Ou programadores enrustidos Na minha humilde opini o sejam o que forem eles est o extintos s o resultado de uma poca em que n o era poss vel separar o design da programa o e os coitados tinham que perder um tempo enorme na gera o de excresc ncias do tipo tabelas HTML para fatiar as imagens Por sovinice de patr es que n o entendem direito de design muitos designers coitados s o obrigados a programar Mal sabem seus chefes que resultados obtidos por um designer programador est o bem longe de ser a soma dos de um designer com os de um programador muito pelo contr rio Acredito sinceramente que designer designer e ponto final Designers gr ficos usam programas gr ficos de
31. de dados de bares e restaurantes das Vejinhas locais Essa se o tinha que ser diferente do portal para justificar a visita do usu rio Para isso criamos um question rio de inten es ajudando o a encontrar no meio das centenas de op es dispon veis algo que combinasse com ele e suas inten es para a noite Com as op es selecionadas o site desenvolvido pela produtora ZeroUm procura os estabelecimentos dispon veis e mostra as respostas E s clicar em uma das op es que se chega resenha do restaurante fornecida pela Veja Com Quem nessa se o digitalizamos o torpedo o bilhetinho paquera t o comum nos bares S que com uma diferen a em vez de ver a apar ncia da pessoa e procurar conhec la melhor fazemos o contr rio o usu rio se cadastra e participa da atividade com um apelido d uma s rie de dados a seu respeito o que gosta de fazer que tipo de m sica ouve h bitos etc Da pode procurar sua alma g mea ou outra n o t o g mea assim sem ver uma nica foto mandar e receber torpedos como o faria nos sistemas de webmail Ao se criar um produto com patroc nio exclusivo temos uma situa o contr ria dos banners pois para o e Consumidor a a o cria um novo servi o e canal de conte do e Empresa a a o aumenta e qualifica a visita o e audi ncia ajudando na imagem de marca e Ve culo a a o patrocina a cria o de servi os e faz com que novos prod
32. e brigam no tr nsito Que pena eles eram t o engra adinhos quando crian a hoje s o apenas pat ticos N o adianta ler um mont o de livros sobre design de uma vez como n o adianta fazer 1 400 abdominais se voc sedent rio O que vale mudar de postura fazer o c rebro se mexer aliment lo com id ias doidas coletar refer ncias de todos os lados e acima de tudo n o esperar resultados r pidos A cultura como a fisicultura demanda tempo 8 5 Prot tipos e aprova o Mostrar layouts para o cliente uma atitude de defesa se ele v e aprova um prot tipo mudar pouco o produto final o que representa menos trabalho in til Como n o existe cliente que n o d palpites o ideal conduzir as decis es para que os preju zos de design sejam os menores poss veis A melhor forma mostrar prot tipos fotos de telas feitas normalmente em algum programa gr fico que s o meros layouts do resultado o texto falso as imagens ainda n o est o comprimidas e n o h uma nica linha de c digo programada O prot tipo um conjunto de imagens n o de documentos Esse processo apresenta v rias vantagens Pra come ar o cliente pode mudar tudo Se n o gostou de uma foto se as pol ticas do departamento n o permitem uma cor se houve erros de compreens o ou mudan as no pedido tudo male vel N o h preocupa es com posi o de tabelas programa o de cenas em Flash ou n mero de cores de
33. e com rela o rea til total Avalie os elementos de cada grupo tem tico e determine seu espa o m nimo e m ximo necess rio Padronize as dimens es do grid e finalize o tamanho de linhas e colunas Considere as exce es e desvios e analise como estes s o acomodados na estrutura sem quebr la Se n o for poss vel refa a o grid Varie Crie op es de arruma o de todos os elementos na estrutura do layout Fa a os ajustes finais regule tamanhos posi es e ajuste os elementos dentro dos grids Desde que bem definidos os grids auxiliam o designer na confec o de diversos layouts Eles n o precisam ser necessariamente caretas ou cheios de caixas ou mesmo terem cara de jornal 3 3 Caligrafia tipografia e legibilidade Cada letra um desenho Exagerando um bocado cada letra um pequeno milagre Gra as a elas podemos registrar nossa hist ria transmitir a cultura divulgar a ci ncia etc etc etc Letras s o muito bonitas s o pequenos desenhos fon ticos que sobreviveram a todas as doideiras da hist ria Se voc parar para examinar todas as curvas e detalhes de um simples r min sculo vai entender melhor do que estou falando Letras podem ser de tudo s n o s o fontes Fonte uma est tua de pedra que costuma ficar no meio de uma pra a cuspindo gua Letra letra Pode tamb m ser chamada de tipo ou face do ingl s typeface As letras e a escrita parecem ser daquelas inven es
34. em um Adobe Illustrator em um Macromedia Freehand e em um CorelDraw um layout o mesmo usando o Adobe PageMaker ou o QuarkXPress uma imagem Photoshop a mesma em um Mac e em um PC o material criado para a WWW tem um s rio problema de padroniza o seu conte do pode ser diferente conforme o programa monitor ou computador utilizado Isso acontece porque os documentos HTML s o din micos e dependentes da m quina que os mostra ao contr rio dos materiais de editora o eletr nica Se o computador do usu rio n o tiver a fam lia de letras em que o material foi composto a substituir pela que estiver dispon vel se a tela for pequena demais pode ser que elementos fiquem amontoados se forem poucas as cores dispon veis talvez as imagens n o saiam bonitas se o browser for antigo alguns recursos podem n o funcionar Para piorar certas cores s o diferentes de Mac para PC A web se desenvolve muito rapidamente e s vezes nos tornamos dinossauros sem o saber Por isso reserve um tempinho para visitar o site dos fabricantes de browsers e ver o que est rolando de novo O caminho mais curto para isso clicar no logotipo animado do Browser que fica normalmente no canto superior direito HTML HTML Hyper Text Markup Language a principal linguagem utilizada para se fazer documentos de hipertexto Ela n o usa como o C ou o Java fun es e c digos matem ticos Como o nome diz uma linguagem de marca
35. em um ve culo Muitas vezes necess rio criar em um site o pr prio ve culo Pois se ainda n o poss vel saber exatamente quem est visitando um site f cil identificar de onde vem quantas vezes j O visitou quais as horas e dias em que o tr fego mais intenso quais as se es mais visitadas browsers e vers es mais utilizadas e um mundo de informa es que a m dia convencional incapaz de gerar A pr xima onda da publicidade na internet vai ser capaz de identificar um indiv duo determinado dentro de um p blico selecionado e ating lo em cheio Algo como vem a um novo carro com um enorme espa o interno Ideal para voc que divorciado tem tr s filhos e casa na praia Perceba que essa estrat gia funciona ao contr rio das inconvenientes malas diretas ali s muito mais para malas que pra diretas que o chamam pelo nome e erram na mosca ao oferecer um curso de ingl s para quem morou no Reino Unido ou uma escola prim ria para quem n o tem filhos nem pensa em t los 7 3 Porque banners n o prestam Diz a lenda que em um tempo que a internet era divertida e ningu m falava de startups e bilh es uns maluc es que cuidavam do site da revista Wired receberam um pedido de um de seus anunciantes de m dia impressa um an ncio na web Depois de muito pensar n o chegaram a conclus o nenhuma e apelaram para uma gambiarra colocaram uma fina faixa colorida de um lado a outro da tela com o
36. encarar o feroz mercado sozinho analise sua infra estrutura aquele macintosh performa velho pode abrir o bico e n o aguentar a onda de seus trabalhos novos e boa sorte Voc vai precisar dela Talvez at mais do que imagina 10 1 Seu est dio Quando se est come ando normal sentir uma s rie de medos curiosidades anseios Os caras que chegaram l parecem inacess veis e inating veis A diferen a entre seu est dio e as grandes ag ncias parece gigantesca E o pior dessa situa o que a maioria dos publicit rios e designers com relativo sucesso fazem quest o de refor ar essa id ia Antes que voc desenvolva sentimento de inferioridade veja minha hist ria Provavelmente ela ter muitos pontos em comum com a sua Era um escrit rio bem pequeno no quinto andar de um pr dio decadente de uma avenida igualmente decadente na zona sul de S o Paulo As paredes eram de um bege manchado pelas marcas de poeira que os quadros e o PABX do antigo inquilino tinham deixado Manchado e bege tamb m era o carpete s que de um tom um pouquinho mais escuro Uns m veis velhos e persianas tortas completavam o cen rio O ar condicionado quando funcionava era barulhento demais para ser suportado Apesar de tudo isso aquele era para mim o lugar mais bonito do mundo O pr dio abrigava um Bob s uma tica e uma padaria no andar t rreo Cheguei l em uma manh quente de fevereiro estava com um gesso no bra o esquerd
37. escrevemos explicando o porqu estamos fazendo uma justificativa Isso um texto justificado Aqueles textos alinhadinhos nas duas margens s o chamados blocados justificado tradu o ruim do ingl s justified ajustado e muito usados em layouts cl ssicos N o devem ser utilizados em colunas estreitas pois podem criar rios de espa os em branco entre as palavras dificultando a leitura 4 A Internet a resposta Qual era mesmo a pergunta Todo mundo estava feliz e satisfeito com a publicidade o marketing direto e as v rias formas de comunica o de massa quando sem ser convidada e sem pedir licen a surgiu a tal rede mundial e todos os seus servi os que at hoje pouca gente sabe quais s o A Internet e os outros produtos de comunica o digital CD ROM DVD ROM multim dia realidade virtual videogames WAP P2P ICQ etc s vezes parecem como sexo para adolescentes ningu m sabe o que direito mas todo mundo fala sobre e quer fazer E por mais insatisfat ria que seja a experi ncia fazem quest o de cont la para todo mundo em detalhes E isso acontece porque como o sexo para adolescentes a internet uma experi ncia nova digital diferente de tudo que j foi feito antes em termos de comunica o A TV lembra na maior parte de sua comunica o teatros e tribunas que s o conhecidas desde que o mundo mundo O jornal e as revistas usam papel que desde crian as ao manipular o Tio Pat
38. fam lias de letras que n o estejam no computador do usu rio Outra vantagem do HTMLA a possibilidade da montagem de p ginas em camadas ou layers Como transpar ncias qualquer conte do que estiver nessas camadas flutuar sobre o documento que estiver carregado no browser DHTML quer dizer Dynamic HTML e uma evolu o do HTMLA4 tamb m compat vel com a mesma fam lia de browsers Ele usa scripts para a anima o dessas camadas permitindo que p ginas sejam din micas e interativas sem que se tenha que carregar nenhum plug in Para muitos programadores os scripts DHTML s o uma evolu o do JavaScript outros acham que a linguagem inst vel De qualquer forma a quest o est fora do m rito deste livro Para voc o que importante saber que enquanto uma p gina DHTML pode ter elementos crescendo e voando na tela esses elementos s o imagens precisam ser carregadas e isso toma tempo Minha sugest o de uso se a anima o for indispens vel o documento for simples e envolver pouco acesso a bancos de dados use Flash Se for atualizado automaticamente tiver muito conte do ou acessar sistemas sofisticados e commerce por exemplo use HTML ou DHTML Voc sempre poder colocar uma anima o em v deo ou Flash dentro desses documentos sem que para isso tenha que comprometer sua opera o Editores HTML Para facilitar o trabalho do designer que n o tem um programador disposi o existem diversos prog
39. grid usa o princ pio da Gestalt de reconhecimento de formas est veis e fortes Ao organizar o conte do da p gina ou tela em grandes imagens ajuda o leitor a agrupar os elementos em conjuntos de significado e orienta a leitura Ele n o precisa ser retangular pode seguir qualquer forma O calend rio maia em refer ncia ao Sol era organizado em uma estrutura circular O mesmo acontece em mapas astrais O grid retangular o mais comum por um motivo bastante simples os pap is e as telas de TV e computador s o retangulares Espa os horizontais e verticais Outro princ pio da Gestalt o relacionamento entre objetos em um campo visual estimula o uso sensato dos espa os horizontal e vertical Espa os horizontais s o a entrelinha o espa o entre os par grafos o espa o entre um texto e uma imagem os espa os entre duas imagens e assim por diante Espa os verticais s o margens larguras de colunas espa os entre objetos e textos espa o entre cones e bot es etc Em uma rela o equilibrada eles s o m ltiplos entre si Alterar um deles implica na altera o de todos os outros Os espa os horizontais e verticais interagem e influenciam para transmitir ao usu rio a estrutura do documento que percebida como um todo dinamicamente de uma s vez Por isso preciso considerar os espa os horizontais e verticais e sua interfer ncia na p gina como um todo Medir p ginas em unidades mais precisas como pontos tipogr
40. interessado no conte do de um hipertexto sem dispersar empregando os mesmos artif cios utilizados pelos textos mais antigos persuas o e sedu o Se um sistema de hipertexto n o for totalmente claro e objetivo mas pelo contr rio estimular a curiosidade do seu leitor sugerindo que sua explora o poder levar a caminhos surpreendentes se em vez de mostrar mapas ele sugerir rotas alternativas para o conhecimento estimular no leitor um interesse em desvendar o conte do como um videogame Esse interesse pode se manifestar em uma experi ncia de longa dura o em que o visitante consulte diversas p ginas algumas mais de uma vez ou atrav s de repetidas e sucessivas visitas at saciar sua curiosidade um processo in dito muito diferente do que se faz em m dias convencionais Na nsia de explicar o mundo digital de dar refer ncias palp veis para o leitor de um sistema de hipertexto muitos sites usam met foras mal sucedidas do mundo real outros se apressam em mostrar todo o conte do informativo dispon vel desde o primeiro instante em que o visitante entra N o h nada de errado nisso ali s deveria ser regra para endere os puramente t cnicos ou informativos mas perde se um pouco do charme da descoberta e explora o sacrificando parte do poder de sedu o que a descoberta de um novo mundo digital poderia proporcionar Situa o t o frustrante quanto algu m que nos conte o final de um filme ou l
41. isso faz uma enorme diferen a a tal ponto de n o ser comum dois computadores verem a mesma tela Considerando que cada leitor consultar as telas na ordem que quiser podemos dizer que quanto mais rico for o conte do de um site maiores ser o as chances de que a experi ncia de cada visitante seja nica Ou seja internet n o linear Ou melhor internet n o sequencial nem tem ndice Parece bvio N o A partir de agora vamos examinar os princ pios do design e como eles se aplicam na comunica o digital Por enquanto voc s precisa ter uma regra em mente WWW n o TV n o r dio n o m dia impressa Claro De novo WWW n o TV n o r dio n o m dia impressa Claro Mesmo Ent o vamos l 4 2 O que voc precisa saber O que h de t o diferente afinal Para come ar n o existe m dia virtual design virtual cria o virtual Isso porque virtual quer dizer inexistente Aprendemos nas aulas de f sica que virtual a nossa imagem no espelho pois ela n o existe mas parece estar l Os computadores e sistemas digitais fazem aparecer componentes virtuais p ginas que n o existem de verdade que n o podem ser tocadas n o t m cor cheiro ou forma O r dio ao descrever situa es e ambientes tamb m trabalha com o virtual A maior parte das coisas que hoje nos s o virtuais v m atrav s de uma tecnologia digital mas nem tudo que digital virtual e vice versa As inform
42. jarg o Nenhum engenheiro se apresenta como ganhador de diversos pr mios como se fosse um cavalo treinado nem diz que quer fazer uma estrada igualzinha que est na moda em Heidelberg Tampouco um sujeito se diz psic logo depois de ler um livro de Jung Em compensa o h designers Gra as a atitudes prepotentes como essas tomadas indiscriminadamente por pessoas sem forma o ou prepara o o estere tipo do designer no Brasil t o injusto ao contr rio de pa ses como a Espanha ou Su a De uma classe dessas o cliente normalmente formado em reas de ci ncias exatas ou exatizadas como economia administra o de empresas advocacia ou rela es p blicas tende a se proteger reagindo negativamente Contrata os servi os e palpita o que puder usando argumentos inacredit veis que v o da cromoterapia e Feng Shui ao simples n o gostei De todas as interfer ncias a pior o h bito de criar Frankensteins misturando partes de v rios layouts em uma nica pe a Para essas pessoas qualquer um pode fazer um site na Web logotipo ou an ncio como qualquer um pode compor uma m sica fazer um filme ou escrever um texto Muitos acreditam que o dinheiro gasto com programa o visual um desperd cio S o comuns coment rios do tipo mas tanto dinheiro para fazer s isto ou n o mudou quase nada do meu logotipo ou ainda quero aquele neg cio que eu vi em uma capa de CD Um dos maiore
43. linguagem Java da forma errada para fazer t tulos animados bot es animados etc utilizando os tais applets N o vale a pena melhor utilizar imagens do tipo GIF animado ou plug ins como o Shockwave ou Flash j que a Java tem um tempo de carregamento maior que outras tecnologias e seu desempenho menor Isso tudo pode desestabilizar o sistema e fazer travar o computador do visitante o que n o exatamente simp tico Voc n o precisa aprender nenhuma dessas linguagens para fazer um site muito pelo contr rio Elas s o como rem dios devem ser colocadas na hora e locais certos por profissionais especializados Tentar colocar uma rotina que achou na rede em seu site pode gerar resultados catastr ficos Imagens e cores Ao contr rio das outras m dias os documentos da web n o aparecem prontos na tela s o constru dos peda o a peda o primeiro a p gina e sua cor de fundo depois textos e imagens etc As telas s o divididas em pixels picture elements e eles s o a unidade m trica das p ginas e de suas imagens Ou seja n o h cent metro na web pois uma mesma imagem pode variar de tamanho conforme o tipo de monitor O formato mais comum de tela tem 800x600 pixels O que define o tamanho de uma imagem a quantidade de espa o necess rio para armazen la suas dimens es e a informa o de cor de cada pixel Assim uma imagem de 30x30 pixels e 256 cores ocupar mais espa o que uma com o mesmo tamanho e um n m
44. logotipo do cliente no meio Como n o tinham nenhum nome criativo para empregar chamaram seu quebra galho de faixa que em ingl s atende pelo singelo apelido de banner Come ava a toda a nossa confus o Se a lenda verdadeira ou n o o fato que banners s o muito arbitr rios em formato tamanho peso tecnologia e virou moda falar mal deles especialmente entre o pessoal de cria o que reclama de suas limita es e n o sabe muito bem o que fazer com eles Mas isso fugir do real problema Ao compararmos o banner com o an ncio impresso spot de r dio ou comercial de TV percebemos porque ele uma gambiarra que tem vida limitada e est deixando todo mundo preocupado An ncios publicit rios de m dias ditas convencionais em sua maioria t m um custo operacional irris rio para o ve culo s o eficientes para os anunciantes e se n o encantam o p blico pelo menos n o o atrapalham J o banner caro para o anunciante car ssimo para o ve culo e nefasto para o consumidor E por isso que t o ruim No in cio dos tempos banners eram apenas bot es a mais que ficavam nos rodap s dos sites imagens que n o davam trabalho algum Os mais conhecidos eram o do Internet Explorer e o do Flash convidando o visitante a atualizar seu software De adapta o em adapta o chegou se ao formato atual divis es em full e half banner rod zio e controle do n mero de impress es por dia Como um fusca a que se
45. naturalidade a tal ponto de n o duvidar que ser webdesigner deve at ajudar a vida sexual de muita gente garantindo boas cantadas ei princesa vamos fazer uma multim dia no meu ap ou at servindo de pontap inicial para muito papo furado regado a lcool Em outras palavras est na moda ser webdesigner muito chic Ou em portugu s hype cool cult fashion hip talvez Ainda mais sexy se o webdesigner usar um Macintosh programar flash usar dreamweaver fazer arquitetura de informa o para sistemas WAP Como diria o Chico ai quem me dera ser gar om ter um sapato bom quem sabe at talvez ser um gar om franc s falar em champignon falar em molho ingl s pra te dizer gentil Como reconhecer um webdesigner Eles s o coloridos u Usam cabelos coloridos sombrancelhas coloridas tatuagens coloridas roupas coloridas piercings coloridos Mais ou menos como os clubbers mas com uma atitude mais cyber meio Londres se que voc me entende mano Se n o entender azar voc est por fora unplugged n o ouve MP3 n o tem n mero de ICQ n o sabe o que o iBest n o tem p gina pessoal anal gico n o existe Todas essas cores infelizmente nem sempre correspondem a id ias igualmente coloridas J vi muita gente colorida com portf lio vagabunda com p ginas que contam o n mero de visitantes cheios de GIF s de quinta categoria letras que voam e se deformam usando todos os exemplos
46. o logotipo em um lugar que fique bonitinho mas transmitir a mensagem Quando bem feito isso funciona melhor at que a publicidade para refor ar a imagem de uma empresa principalmente em seu p blico mais importante seu quadro de funcion rios O manual de identidade visual ajuda a relacionar o logotipo com suas aplica es mas n o as limita d o tom Ele explica em detalhes a identidade corporativa para que a empresa n o tenha que reinventar a roda toda vez que us lo N o significa colocar o logotipo sempre do mesmo jeito e na mesma posi o mas adapt lo ao contexto como adaptamos certas frases e conhecimentos a uma conversa Quem n o as adapta fica rid culo vomitando chav es 1 7 Cada coisa com seu porqu Pe as gr ficas com um design bem feito s o normalmente equilibradas e harmoniosas todos os seus elementos se combinam para formar um resultado que muito mais que a soma das partes Esses elementos t m normalmente pesos tamanhos e formatos completamente diferentes mas se tirarmos algum deles temos a impress o de que algo est faltando e o conjunto todo fica estranho irregular Como uma orquestra levemente desafinada Ou como um quadro incompleto Te rico demais Ent o imagine uma sopa salgada demais Ou um bolo doce demais Ou um acaraj apimentado demais Ficou mais f cil A culin ria o melhor exemplo de harmonia que existe no dia a dia e deve servir de exemplo para o design Todos sabem que a cul
47. olfato s o refor ados pela vis o pois s o pouqu ssimas as coisas que fazemos com os olhos fechados Quando vemos sintetizamos uma s rie de outros sentidos Saber reconhec los diferenci los e represent los a base de uma boa id ia de design 1 5 Tintim por tintim o impacto dos m nimos detalhes Uma das diferen as mais vis veis entre o trabalho de um designer experimentado e o de um iniciante com jeito pra coisa est no acabamento Empolgados com a for a de uma id ia nova muitos deixam de lado a produ o O resultado que poderia ser genial acaba ficando com aquela cara mambembe das produ es estudantis ou caseiras o argumento e o roteiro at que s o bons mas o produto aquela velha hist ria deixa passar que ningu m vai reparar Muita gente usa essa regra para imagens que est o um pouco fora de foco colunas levemente assim tricas imagens com a cor quase certa fam lias de letras parecidas texto revisado por cima e assim por diante A pressa o prazo apertado o estresse o sono tudo desculpa para deixar passar pequenos deslizes algumas gambiarras defeitos que ningu m de bom senso repararia e mesmo que reparasse n o levaria a s rio E a realidade que na maioria das vezes n o se repara mesmo Muitas vezes o erro m nimo e n o interfere na comunica o como um todo mas deslizes desse tipo passam a impress o de um material mal acabado estranho malfeito descuidado como aq
48. os nomes dos vencedores as pe as premiadas o evento de premia o etc Se a posi o do link for melhor colocada poderemos ter Veja os resultados do XXIII Festival de Cannes Veja os resultados do XXIII Festival de Cannes Veja os resultados do XXIII Festival de Cannes Veja os resultados do XXIII Festival de Cannes Ou mesmo Veja os resultados do XXIII Festival de Cannes Veja os resultados do XXIII Festival de Cannes O que j d uma id ia bem mais clara do que espera o visitante imagens dos resultados lista dos resultados hist rico descri o do evento caracter sticas do festival a cidade evitando que se carregue uma p gina toa Alinhamentos Um texto pode estar alinhado esquerda que a forma mais f cil de se ler a n o ser bvio que voc esteja escrevendo em chin s japon s hebraico ou rabe nossos olhos marcam uma margem l em a linha inteira de texto e pulam at a linha de baixo Textos centralizados costumam ser est ticos Podem ser usados como t tulos de produtos cl ssicos ou tradicionais N o se deve us los para textos corridos porque os olhos do leitor n o saber o onde come a a linha pois n o t m a margem para se apoiar Alinhar um texto direita uma solu o de contraste bastante radical e costuma chamar muito a aten o Em longos textos t o dif cil quanto o layout centralizado pois n o h refer ncia de onde come a a linha Quando cometemos um erro e
49. os sites deixem de uma vez de estar atrelados estrutura de p ginas reflexo do mundo editorial e passem a ter estrutura de cenas e ambientes como um cinema ou TV cujo diretor seria o usu rio Plug ins Al m do leitor de Flash existem v rios programas auxiliares que podem ser instalados em seu browser aumentando sua capacidade e conforme o computador a probabilidade de dar pau Esses programinhas s o chamados de plug ins A maior parte deles distribu da gratuitamente na rede direto dos endere os de seus fabricantes ou das telas iniciais dos browsers Os mais importantes s o Macromedia Shockwave o browser permite que se coloque anima es pequenos programas multim dia jogos e a es interativas dentro das p ginas de um site Dispon vel em www macromedia com br downloads Real Player permite que sons e v deos gravados em formato Real sejam tocados medida que s o transmitidos Em http huxley real com real player player html Pegue a vers o basic que gratuita Adobe Acrobat Reader para visualizar documentos no formato PDF Portable Document Format muito usado por e books Ideal para documentos que n o podem perder seu layout original an ncios e cartazes Dispon vel em http www adobe com br products acrobat readstep html QuickTime Player v deos gravados neste formato podem ser sejam tocados medida que s o transmitidos Dispon vel em http www apple com quicktime download iPix util
50. primeiro beijo estagi rios diante do primeiro layout aprovado isso sem contar o velho exemplo da primeira vez Ah que alegria que fasc nio que medo que prazer Pena que dure pouco cada vez maior a quantidade de pessoas que se empolga com um brinquedo novo e em pouco tempo enjoa dele e parte em busca de algo diferente Sempre que h uma tecnologia ou experi ncia nova a rea o do p blico passa por um ciclo de entusiasmo e des nimo Chamo isso de ciclo da descoberta Ele tem sete etapas ignor ncia fasc nio posse explora o ang stia decep o e h bito Em princ pio ningu m sabe nada e os pobres coitados que sabem s o chamados de g nios As pessoas comuns at evitam comentar sobre o tema ou disfar am falando em termos gen ricos fingindo falta de interesse Muitas pessoas tratavam a internet dessa forma Se o mundo novo n o absolutamente rid culo ou dispens vel a pessoa para n o correr o risco de ficar como o ltimo jornalista que ainda usa m quina de escrever corre atr s da nova tecnologia v tudo o que ela proporciona e fica absolutamente fascinado meio besta at Como aqueles pais que t m o primeiro filho e falam do exame de fezes do moleque at em reuni es de diretoria chato mas houve uma poca em que muitos falavam de internet usando uma grandilogii ncia pedante e um monte de termos em ingl s Fascinados vamos tentar aprender um pouco mais a fase da p
51. quais seus diferenciais em rela o ao que j existe N o adianta desenvolver planos para atuar em um segmento onde j h forte concorr ncia estabelecida 2 Defina claramente quais s o as fontes de receita e quais os valores que podem ser cobrados para prestar o servi o 3 Saiba porque este servi o ir atender uma determinada necessidade e a tecnologia necess ria para implement lo 4 Analise o mercado se h concorr ncia e o que pode ser feito para neutraliz la estabele a parcerias exclusivas que agreguem vantagens para o projeto 5 Garanta que sua equipe tenha conhecimento da rea de neg cio em que o projeto ir atuar 6 Tenha conhecimento fiscal e legal do mercado 7 Estude a possibilidade de expans o geogr fica regional e de gera o de fontes de receita complementares 8 N o esque a de registrar todas as propriedades Marca dom nio da URL Patentes de Software etc 9 Avalie custos e capital necess rio a investir e estabele a um cronograma focado em resultados quanto ir gastar e quanto ir faturar 10 Desenvolva um plano de marketing e rela es p blicas inteligente e eficaz o neg cio n o deve necessariamente depender de grandes gastos com marketing para ter xito 10 Vamos falar de voc Design arte Designers e diretores de arte s o descolados bacanas joinhas Est o em eventos badalados s o engra ados e despreocupados usam roupas coloridas A profiss o n o poderi
52. que existiram desde sempre mas n o exatamente assim As min sculas por exemplo v m do latim e s foram desenvolvidas entre os s culos VI e VIII para facilitar a escrita m o o imp rio de Carlos Magno estava se expandindo e era necess rio aumentar o n mero de B blias Para escrever mais r pido monges adaptaram os formatos das letras criando desenhos menores ao longo do texto Essas letras minor menos importantes eram chamadas de minuscule deixando as majuscule de major para iniciar os nomes pr prios Na l ngua alem os substantivos at hoje se iniciam com letras mai sculas Por volta de 1454 o ourives Gutemberg inventou a prensa de tipos m veis tornando o trabalho de alinhar letras formar linhas compor par grafos e imprimir muito mais f cil de artesanal para mec nico A impress o ficou mais r pida e popular mas o design ainda era o mesmo A maioria das letras derivava de desenhos da renascen a especialmente de Veneza Esses designers tipogr ficos por sua vez se inspiraram nas inscri es feitas na coluna romana de Trajano esculpidas por volta de 114 D C N o era f cil criar uma fam lia de letras naquela poca primeiro era preciso desenhar todas as letras m o esculpir moldes em madeira com o negativo de cada forma moldar seus carimbos em chumbo derretido que foi substitu do mais tarde por uma liga met lica de chumbo e antim nio e formar um molde para cada letra criada A palavra abra
53. que o visitante esteja conectado a algum servidor p blico bibliotecas ou universidades ou em seu local de trabalho diversas pesquisas afirmam que mais da metade de quem acessa no trabalho ou escola tamb m a utiliza em casa estar pagando uma taxa de em m dia R 2 00 por hora de acesso usu rios de banda larga ou de conex o por celular muito mais O acesso gr tis uma id ia muito simp tica e popular mas seu modelo comercial ainda n o se mostrou sustent vel e Indisponibilidade na maioria dos casos a partir do instante em que o internauta se conecta rede ele se desconecta de qualquer contato telef nico Essa indisponibilidade tem seu custo que pode ser refletido em oportunidades perdidas de lazer ou trabalho A todo esse custo internet podem se somar os custos de energia el trica desgaste de equipamento e transtornos sa de sedentarismo tendinites e outros males do uso de computadores e voc come a a perceber porque as pessoas n o perdem mais horas surfando sem destino muito pelo contr rio cada vez mais o que acontece conecta a web acessa o site pega a informa o extrato banc rio resultado de jogo situa o do tr nsito endere o etc desconecta Por isso a qualidade n o a quantidade o que vale A longo prazo um site se mede e se sustenta pelo benef cio que proporciona Em vez de fazer qualquer coisa para aumentar a visita o a seu site melhor solidificar sua rela o
54. que se chegue a movimentos diferentes Em movimentos diferentes ver autores diferentes e t cnicas diferentes em uma espiral recursiva sem fim acumulando dados e informa es ao conhecimento do visitante O projeto da galeria vale para qualquer processo da macroeconomia ind stria de p es S necess rio organizar sua informa o M ltiplos pontos de vista A maioria das hist rias que conhecemos nos apresentada sob um nico ponto de vista seja ele um narrador neutro onisciente um personagem ou mesmo um mero observador Um sistema de hipertexto permite que uma mesma hist ria seja apresentada sob diversos pontos de vista em diversos momentos dando uma abrang ncia muito mais ampla e uma compreens o melhor do assunto Imaginemos uma hist ria com cinco personagens em cinco epis dios momentos cap tulos Teremos uma seqii ncia linear de elementos Se a mesma hist ria for contada de cinco formas diferentes uma para cada personagem teremos vinte e cinco cap tulos Se o autor fizer pequenas altera es na estrutura do texto dando ao leitor a possibilidade de come la em um cap tulo aleat rio e seguir em qualquer sequ ncia os mesmos vinte e cinco cap tulos poder o gerar 3125 hist rias poss veis 55 Ao acrescentar a opini o de um narrador em mais cinco cap tulos pode se gerar 15 625 hist rias 56 e assim por diante Com um pouco de esfor o de roteiro e estrutura o os cap tulos de uma hist ri
55. rela o conflitante O terceiro casal daqueles improv veis e paradoxalmente mais comuns eles s o completamente diferentes entre si ele m sico e sedent rio ela gerente financeira e esportista A rela o contrastante Qual das tr s tem mais chances de ser mais interessante verdadeira e intensa Responda com paix o n o com pragmatismo A designer americana Robin Williams divide a rela o entre os elementos de um layout nessas tr s categorias concordante conflitante e contrastante A primeira acontece quando n o h contraste algum entre dois elementos em uma p gina e seu resultado normalmente insosso margens do mesmo tamanho t tulo e texto feitos na mesma letra e quase o mesmo corpo dando a impress o de apostil o Uma rela o conflitante ainda pior quando o designer resolve inovar mas n o ousa muito Surgem dela pequenas diferen as de tipo corpo e estilo de texto imagens com pequenas varia es no estilo tamanho moldura posi o etc As similaridades dificultam a leitura porque as atra es visuais n o s o as mesmas concordantes nem s o diferentes contrastantes Por isso elas entram em conflito causando um resultado desequilibrado e estranho desagrad vel de se ler Um layout contrastante por sua vez atrai a vis o na hora e cria uma real curiosidade e interesse Ele pode variar o tamanho peso estilo forma e cor Quanto maior a quantidade ou intensidade dos contrastes
56. ser novidade em comunica es mas bastante utilizado em l gica de programa o matem tica De certa forma o que certos roteiristas de cinema fizeram sobre o trabalho que diversos roteiristas de quadrinhos fizeram sobre a hist ria e os personagens originais de Batman amp Robin Uma grande galeria Um dos maiores problemas dos museus do mundo seu acervo como consegui lo transport lo fazer seu seguro e exibi lo com seguran a Outro problema sua efic cia como transmitir os dados de uma forma did tica para cumprir sua fun o social Uma galeria virtual pode ser a solu o Como um sistema digital n o precisa obedecer s leis da F sica pode se criar um ambiente em que uma sala maior que o pr dio inteiro ou que o museu se transforme em uma sala de aulas ou confer ncias a qualquer instante Nesse exemplo ao entrar na galeria acessando seu endere o digital o visitante teria acesso a um conjunto de obras de destaque como uma exposi o Se alguma obra o interessasse poderia examin la com mais calma ou conhecer o acervo permanente um conjunto de obras espalhadas pelos melhores museus do mundo O museu teria diversas salas dedicadas a movimentos pintores e t cnicas Em cada sala diversos quadros estariam expostos De cada obra examinada o visitante poderia ler textos ver v deos sobre seu autor movimento e t cnica De uma t cnica ver outras obras usando t cnicas semelhantes mesmo
57. sistemas digitais tamb m chamadas de GUI Graphical User Interfaces ou simplesmente de interfaces Se forem simples diretas agrad veis e divertidas far o com que seu usu rio se esque a que est usando a ferramenta e se concentre na tarefa Se forem complicadas ou mal feitas dar o mais trabalho Imagine que voc est com um parafuso solto e precisa apert lo Solu o Uma chave de fenda N o tem Use uma faca N o tem Que tal um clipe de papel Ou uma tesoura Ou a unha do ded o Cada uma dessas ferramentas pior que a anterior e leva muito mais tempo para realizar a tarefa espec fica Se voc quebrar a unha no processo vai se lembrar dele durante dias e provavelmente continuar com o parafuso solto Se no momento que identificou o problema voc tivesse uma boa chave de fenda do tamanho certo provavelmente j teria se esquecido dele Da surge uma distor o muitos gostam de avaliar um website pelo n mero de p ginas visitadas ou pelo tempo gasto em cada visita Se esquecem que ao contr rio da TV r dio ou revistas o processo de consulta s informa es na Web ativo e muitas vezes o usu rio n o est feliz por perder um temp o l Em uma ferramenta verdadeiramente eficiente como o Yahoo o processo simples e envolve tr s fases pergunta resposta sa da um processo r pido e envolve poucas p ginas mas muito satisfat rio O mesmo acontece em bons sites de refer ncia e e commerce U
58. suas imperfei es e tend ncias tamb m aquele sujeito que tem o t o apreciado bom senso maravilhosa habilidade que at hoje nenhuma m quina conseguiu reproduzir 6 Arquitetura de informa o Ningu m em s consci ncia pensa em construir uma casa sem pelo menos trocar uma id ia com um arquiteto O mesmo vale para reformas estruturais como mudar a rede hidr ulica ou a montagem de um pr dio comercial Os motivos s o pra l de bvios sem planejamento as paredes podem ficar tortas janelas podem dar para o vazio e quartos podem dar inveja a clausuras de convento Na melhor das hip teses uma casa constru da sem planejamento tem janelas sem sol quartos quentes e portas abrindo para o lado errado Pena que quando o assunto internet poucos pensem em um planejamento da informa o por menor que seja Muitos websites acabam virando o equivalente digital das casas de uma favela ou aldeia medieval em que um quarto se emenda em outro em um labirinto confuso e tortuoso A maioria das pessoas que os constr i se procupa com o layout das telas com as tecnologias que ele pode suportar com sua capacidade de atualiza o tecnol gica e at com sua manuten o peri dica mas esquecem de sua estrutura Ou seja preocupam se com tudo menos com o pobre do visitante que se perde em montanhas de p ginas links e efeitos at chegar na informa o que estava procurando se der sorte Muitas das pessoas que enjoaram da internet reclamava
59. sugeriu que nossa ignor ncia o desconhecimento que temos a respeito de um tema qualquer pode ser dividida em duas categorias problemas e mist rios Quando encaramos um problema podemos n o conhecer sua solu o exata mas temos uma id ia razo vel do que esperamos como resposta Quando o que se tem pela frente um mist rio s nos resta olhar para ele maravilhados e espantados n o tendo a menor id ia de suas causas ou estrutura Boa parte das religi es crendices e mitologias surgiram para explicar mist rios do dia a dia Todos os povos primitivos t m raz es po ticas e ing nuas para fen menos esquisitos como a noite a chuva a morte medida que n s crescemos e vamos nos tornando adultos velhos mist rios passam a ser simples problemas e acabamos ficando pragm ticos Arrogantes com nosso conhecimento criamos novos mitos para as coisas que n o temos mais vontade ou paci ncia ou energia para pesquisar o funcionamento E nos tornamos velhos com a cabe a cheia de mist rios que como n o temos coragem de desvendar resistimos o quanto pudermos Olhe para qualquer site na internet com os olhos de um leigo todos s o pequenos mist rios caixas pretas que n o fazemos a maior id ia de como desvendar E o que muito pior n o estamos nem a Como que se clica em uma palavra e se l outro texto Como poss vel ir t o r pido de um site a outro da Dinamarca para a Nova Zel ndia Onde estou se em uma janela
60. t m paz para pesquisar e desenvolver suas id ias com maior grau de especializa o o que explica boa parte da qualidade gr fica e diversidade dos servi os oferecidos pelos sites Por aqui ganhamos habilidades m ltiplas independ ncia e criatividade o que nos d uma vis o melhor do processo como um todo Nas pr ximas p ginas vamos examinar as principais fun es relacionadas produ o de multim dia Para isso contei com o depoimento de alguns amigos que s o profissionais experimentados na rea nos mais diferentes n veis com os quais eu concordo 150 bom lembrar que fun es distintas n o significa que sejam sempre realizadas por funcion rios diferentes algumas s o terceirizadas outras contratadas para a empreitada outras s o parcerias consultorias e assim por diante Leia o texto de todos e tente identificar o que eles t m em comum entre si talvez voc seja bem parecido com v rios deles e nem desconfie 9 1 O webdesigner esse pobre centauro Escrevi este artigo para a edi o n 37 da revista Design Gr fico Gerou resultados explosivos O reproduziram no site da revista Mais explos es N o podia deix lo de fora De acordo com a Voc S A webdesigner a profiss o do futuro No r dio um spot de uma escola promove o curso de webdesign sob a mesma tica De vez em quando me surpreendo com a quantidade de pessoas que falam a respeito de webdesigners e de webdesign com a maior
61. tecnol gicos ou cibern ticos chamado de ciberespa o Ele vale para qualquer tipo de comunica o remota de resposta imediata como o telefone chat r dio etc Ao desligar o aparelho esse espa o deixa de existir Quando estamos lendo um livro imaginamos os personagens a partir das informa o que nos mostram S o pessoas que n o existem em um mundo que n o existe Se um espa o n o existe ele imagin rio fantasioso inver dico virtual S acontece nas nossas mentes Imagine por exemplo uma macarronada N o uma macarronada qualquer mas uma tremenda macarronada daquelas que s uma nonna faz Com um molho de tomate peda udo soltando fuma a Com queijo parmes o ralado grosso por cima manjeric o alm ndegas por melhor que fosse a fotografia ou filme que mostr ssemos na revista n o seria t o bom quanto a imagem do macarr o que se forma na mente de cada um Por qu Porque o macarr o virtual re ne as melhores lembran as de todos os macarr es reais j vividos e experimentados sendo garantidamente maravilhoso Se um macarr o fica t o bom o que dizer de viagens alucin genas por hipnose ou da vedete do virtualismo o sexo O sucesso dos RPGs Role playing Games mostra como poderoso um mundo virtual No in cio do jogo os personagens concordam com as regras que definem o que poss vel no jogo a verossimilhan a e depois da imergem em um mundo paralelo parecido com o nosso mas difere
62. temperamentos idas e vindas ao banco que obrigam aquele lado esquerdo empoeirado do c rebro a trabalhar Lado esquerdo que se mostra bem til para aquela programa o b sica em HTML javascript e actionscript flashiano tudo isso ocupa uma parte consider vel de seu tempo exercendo a fun o cerne da profiss o designer Pr requisitos s o c rebro organiza o f experi ncia no mundo profissional n o aut nomo indispens vel para n o cometer erros b sicos at de ordem cont bil equipamentos que funcionem uma boa rede de contatos com colaboradores programadores fornecedores parceiros e poss veis clientes o principal claro Se vale a pena Bem se por um lado a correria muita e a jornada de trabalho varia do cio a 48 horas di rias de Photoshop por outro n o vemos aquele diretor folgad o da poderosa holding multinacional de propaganda comprar um iate com os dividendos do suado trabalho de um submisso designer muito menos aquele chefe chato reclamando dos quinze minutos de atraso de manh ou dizendo que vamos todos trabalhar no feriado em que cai seu anivers rio o gostinho da liberdade uma liberdade que pode aprisionar mais que qualquer outro emprego mas que continua sendo a boa e velha liberdade Dica para quem est come ando n o comece N o antes de estar bem preparado Avalie friamente a qualidade de seus trabalhos reflita se voc j tem a experi ncia b sica necess ria para
63. um GIF Mas deve deixar claro para o cliente que aprovada essa proposta o pr ximo layout ser programado e sua estrutura n o poder mais ser alterada tipos de letras posi o de elementos formatos de imagens depois de aprovados devem ser fixos Ele poder alterar textos e fotos mas a estrutura b sica do layout estar garantida Esse processo acelera os layouts iniciais agiliza sua aprova o evita trabalho in til e facilita a rela o entre o cliente e o designer 8 6 M os obra Chegou a hora de arrega ar as mangas vestir a luva de tendinite ligar o som limpar o mouse pegar bolachinhas e mandar bala no conte do tendo em mente o conceito e a dire o da cria o Id ias geniais s ser o geniais se encaixarem sen o devem ser guardadas para outro trabalho Se forem muito boas poder o reformular o conceito o que significa na pr tica recome ar Acima de tudo n o invente surpresas se o cliente aprovou um prot tipo execute o Se voc teve uma id ia melhor pode at mostr la como op o mas lembre se de que ele vai invariavelmente querer fazer um Frankenstein As ferramentas de software s o muito importantes nessa fase Um est dio deve sempre ter pelo menos um PC e um Mac mesmo que sejam velhos para testar o produto em v rias plataformas Al m disso importante Um editor de textos para a digita o de textos grandes e ajustes em linhas de c digo Dois tipos s o teis um simples para alte
64. um editor de texto para corrigir eventuais falhas na programa o um programa de edi o de imagens para web e claro um de upload Depois m o na massa bit a bit coisa de artes o dos tempos modernos o produtor respons vel pela constru o de um sistema que vai ser usado por pessoas e que portanto deve funcionar bem E o momento em que todo o trabalho anterior converge para o produto final Pronta a parte grossa do site o pode se dependendo da necessidade trabalhar em parceria com um programador acompanhando o andamento do processo pois erros de comunica o sempre acontecem e podem ser minimizados com um pouco de aten o Nesse momento testes de usabilidade podem salvar seu site Produto pronto hora de mandar para o cliente que normalmente o mostra pra todos na empresa na fam lia no condom no e pede modifica es Esperar que um site saia pronto na vers o 1 0 pura ilus o Nessa hora comum que o cliente pe a para fazer algo que n o o mais apropriado embora ele acredite firmemente que seja necess rio Sobra para o produtor municiar o atendimento com raz es pelas quais as coisas est o daquela maneira Muita gente faz simplesmente o que o cliente pede como diz o chav o publicit rio o cliente sempre tem raz o e quanto maior a verba maior a raz o mas se isso pode sacrificar a qualidade n o devemos pensar pequeno Al m de tudo o site vai fazer parte de seu portf lio Embora
65. um jogo de futebol Voc j reparou que quase ningu m l o manual de um novo programa de computador Ou melhor os que o l em normalmente s o fazem depois de oper lo e quebrar a cara ou quando algo d errado A maioria quer explorar o programa brincar com ele descobrir suas potencialidades o mesmo princ pio que leva um beb a colocar um chinelo na boca ou os dedos na tomada Agora lembre se do jornal que voc recebe em casa todas as manh s Voc realmente precisa de todas aquelas p ginas impressas ou o importante a informa o impalp vel que elas cont m Quando lemos um jornal n o necess rio saber quantas p ginas ele tem ou seu total conte do N o importante saber se ele fala sobre futebol quando estou lendo sobre economia Isso informa o irrelevante desnecess ria Mas como em papel imposs vel criar material a partir do nada o jornal de domingo acaba tendo que ser volumoso com mais da metade de seu conte do desnecess rio e pronto para ir para a usina de reciclagem Ou seja jornal e not cia n o s o a mesma coisa A m dia de massa os transformou em sin nimos por falta de op o pois imposs vel por enquanto entregar um jornal diferente para cada leitor Disseram que a fotografia iria acabar com a pintura mas o que ela fez foi abrir novos horizontes trazendo mais id ias e par metros e amplificando o panorama O mesmo pode se dizer do cinema teatro e pera Da mesma
66. uma com um texto grande e seis outros menores um para cada linha De uma forma simplificada o ritual do I Ching consiste em fazer uma pergunta ao or culo jogar as moedas de forma a obter dois hexagramas relacion los entre si e com a experi ncia pessoal do leitor para chegar a uma resposta Essa estrutura aberta e o ritual das perguntas e moedas n o mudado nos ltimos tr s mil anos nos permite deixar de ser leitores para nos tornarmos agentes do texto A combina o de dois hexagramas gera 4096 poss veis textos que combinados com a pergunta do leitor e sua realidade resultam em infinitas respostas O I Ching um livro que n o foi feito para ser lido do in cio ao final Se voc tentar l lo em seqii ncia vai chegar a um texto que n o faz sentido Ao mesmo tempo se o ritual for seguido risca n o h como chegar totalidade do conhecimento e conte do do livro um livro ileg vel pelos padr es convencionais pois n o segue as conven es da leitura passiva Outro exemplo de texto grande demais para ser lido o Cem Trilh es de Poemas Cent Mille Milliards de Po mes escrito por Raymond Queneau em 1961 Este livro pequeno tem 10 sonetos cortados em uma tira para cada linha formando 140 elementos O leitor estimulado a combinar aleatoriamente as linhas gerando 1014 combina es de sonetos ou 100 trilh es Ningu m l todas as op es elas n o est o l para serem lidas As experi ncias mais delir
67. valem a pena Empatia compreens o simpatia admira o tarefa do designer descobrir o que cada produto tem de exclusivo especial e evidenciar isso na comunica o N o existe um assunto absolutamente lugar comum por todos os pontos de vista necess rio descobrir seu valor Descoberta a mensagem como trat la A t nica ou jeit o da comunica o deve ser evidente primeira vista pelo menos na maioria dos casos Um material ir nico n o deve ser apresentado como s rio trag dias n o devem ser diagramadas como se fossem grandes brincadeiras Fa a o falso ser evidente sen o pode parecer um defeito Um tomate marrom considerado um defeito Um tomate p rpura um efeito Por isso ao elaborar um layout o designer deve ter em mente qual a rea o que quer provocar no leitor e manipular esse sentimento estimulando o ou o atenuando medida que a percep o avan a na efici ncia deste controle que est a habilidade de comunica o O est mulo de resposta o que diferencia belas obras herm ticas de trabalhos verdadeiramente estimulantes 3 Princ pios de design A execu o de um design consistente envolve mesmo que seja instintivamente conceitos est ticos consagrados como fun o e estrutura al m dos princ pios b sicos da Gestalt Todos esses fatores s o meras varia es do mesmo tema de sempre o bom senso Eles podem ser resumidos nesses sete t picos I Proximidade e alinhamento el
68. vem sua cabe a De repente surge uma id ia Voc a Aplica a id ia imediatamente b Desenvolve op es para a id ia ou c Joga fora Pode parecer incr vel turminha do NewDesign mas a velha escola de cria o recomenda a ltima op o Se voc est liso de id ias o melhor dar um passeio ver as pessoas na rua esquecer dos problemas distrair tomar uma cervejinha ver no v deo um musical dos anos 40 ou minhas solu es prediletas ouvir m sica comprar um gibi bem besta tipo Tio Patinhas ou M nica e ler do come o ao fim O mesmo vale para um jornal daqueles que se torce e sai sangue ou para uma como a Caras O importante deixar os neur nios empoeirarem pois algum probleminha do dia a dia est bloqueando sua cria o E porque n o usar ansiosamente a primeira id ia Sinto muito meu amigo mas porque ela n o boa Na maior parte das vezes ela sai dura cerebral demais conceitual demais para ser divertida Seu c rebro est travado e voc est for ando a sa da de uma id ia um processo t o artificial quanto ir ao banheiro quando n o se tem vontade O resultado inclusive pode ser parecido ou n o sai nada ou impublic vel Pois tanto esfor o pra nada A s ndrome da primeira id ia um mal que ataca estagi rios em ag ncias de propaganda clientes que t m id ias geniais e profissionais que est o mais empenhados em mostrar que s o bons que em preparar algo divertido e inteligent
69. vida poder divulgar seus produtos servi os a oferecer atendimento ao consumidor e at estimular vendas Mas ser que uma floricultura uma pizzaria um canil uma metal rgica ou um est dio de futebol realmente precisam colocar um site na internet para divulgar seus servi os e lan amentos O principal motivo para se colocar um site no ar e que deve tamb m orientar o seu conte do muito simples relev ncia Ao contr rio da m dia impressa que recebida passivamente e sem esfor o o que levaria um usu rio a gastar dinheiro e tempo para consultar o site de uma cervejaria Ser que o consumidor sabe que o site existe Ele o visitar N o adianta colocar um videogame como atrativo no site de uma empresa de seguros o visitante n o est indo l para isso E pior ser se o jogo for bom pois vai distrair o consumidor do seu objetivo Alguns dos motivos que justificariam o website de uma empresa s o e constru o de melhor relacionamento com o p blico alvo abrir um canal de contato direto com o consumidor 24 horas por dia est mulo da resposta do usu rio cria o de grupos de consumidores menores custos na distribui o de material promocional explicativo divulga o de informa es atualizadas constru o de banco de dados para comunica o direta com o p blico alvo pesquisas e oportunidades de neg cios aumento da distribui o internacional e penetra o em mercados estrangeiros e comm
70. DWD 2 O livro Design Web Design 2 foi escrito em 1999 e publicado em 2000 portanto j est um bocado velho Alguns aspectos t cnicos e profissionais ainda se mant m Outros felizmente mudaram bastante Ele foi disponibilizado neste site na forma de p ginas abertas a coment rios porque gostaria de ouvir de voc s sua opini o com rela o s mudan as N o tenho d vidas que em alguns pontos ele foi superficial demais ou mesmo em que em outras ele est completamente ultrapassado Na minha opini o livros t m a mesma fun o das obras de arte estimular a discuss o e a reflex o N o devem ser considerados fontes de saber ou beleza mas elementos vivos que promovam dentro das cabe as das pessoas verdadeiras revolu es na forma de se pensar e encarar o mundo essa sim uma bel ssima e indiscut vel habilidade humana Na poca de sua publica o eu disse a seu respeito que Todos t m direito a seus 15 Megabytes de fama e qualquer um capaz de fazer um website Qualquer um Bom n o exatamente Este livro pretende estimular sua curiosidade e fazer com que voc n o aceite o que v na Internet como definitivo muito pelo contr rio Ele trata de Design da World Wide Web e de Comunica o Digital em geral N o um livro de t cnicas um manual de questionamentos Antes da introdu o com o t tulo Vers o 2 0 n o tenho culpa que o termo web2 seria inventado quatro anos depois e tornaria qualquer 2 0 um cha
71. E isso porque n o se falou no espa o em que eles vivem roupas h bitos alimentares etc A resposta a cada uma dessas perguntas vai ajudando a construir um espa o virtual no melhor estilo da colcha de retalhos Se o autor for bom podemos ter um Casablanca um A Sangue Frio ou mesmo uma pera como Carmen Mesmo as hist rias mais simples que voc conta no dia a dia tamb m t m suas refer ncias seu hist rico e o ponto de vista de cada personagem Em um espa o limitado folha de papel ou fita de v deo n o h como saber todos os pontos de vista ou mesmo todos os hist ricos e interferir na hist ria fic o Transfira a mesma hist ria de assassinato para um espa o virtual como um videogame ou um RPG antes de conhecer a trama os jogadores tentam descobrir o m ximo de cada personagem suas armas e temperamento Da entram no jogo tentando interferir nos destinos dos seus personagens Podem ver um mesmo fato sob diversas ticas e propor solu es inusitadas Voc pode at achar bobo mas uma possibilidade liter ria ainda inexplorada pelos Guimar es Rosa ou James Joyce do s culo XXI Navegar impreciso Quando uma pessoa est procurando informa o na WWW dizemos ela est navegando ou surfando na internet Esses conceitos podem ser po ticos ou rom nticos talvez at ousados mas s o errados O processo est mais pr ximo de saltando ou pescando para haver uma navega o en
72. Euros Pessoas come ariam a olhar para voc de um jeito estranho s porque voc achou que Weedle e Wartortle eram pratos da cozinha h ngara que Seel Dewgong Grimer e Muk eram dan as b lgaras e que Lickitung Koffing Krabby e Kingler pr ticas de ca a esquim Na empresa em que voc trabalha profissionais bem estabelecidos e com carreiras garantidas deixariam seus empregos para trabalhar em Clefable Parasect Golbat Rhyhorn Rhydon Poliwag Seadra Scyther que apesar do nome n o eram aqueles laborat rios onde se escondem cientistas malucos que querem poluir o mundo com um g s verde e de cujo Mr Mime n o era o CEO Assustado voc acaba entrando em um curso para aprender que Dragonite n o doen a nem que Nidoran Nidorina Arcanine Vaporeon Venonat Jolteon Omanyte Snorlax Vulpix Flareon e Porygon s o nomes de rem dio gen rico Nenhum desses nomes faz sentido para sua cabe a perturbada e voc come a a se achar burro se perguntando se algu m na fam lia Magmar ou tem s ndrome de Starmie E o nico nome que fica na cabe a o tal Pikachu mesmo assim voc n o consegue soletr lo Desesperado voc come a a mentir pra fingir que entende tudo de Pok mons mas se trai ao descobrir que Nidorino Omastar e Missigno n o s o aqueles nomes esquisitos que tem no sert o nem que Kabuto Primape Machoke Dratini Kabutops Paras Kangaskhan Tauros Lapras Pinsir Tangela e Marowak s o cidades de pa
73. PARE e Proibido estacionar variam conforme a cultura Manipula o direta importante dar ao usu rio a sensa o de controle das atividades do computador Mover o mouse uma atividade f sica que deve ter uma resposta f sica no mundo digital l pis desenhando t picos iluminados O usu rio sempre quer saber quais s o as fun es dispon veis e o que fazer a cada instante Assim ele e n o o computador quem deve iniciar e controlar todas as a es de um sistema Todos n s aprendemos e reagimos melhor quando estamos engajados em um processo de descoberta E sempre bom lembrar que j que o computador uma ferramenta deve ser agrad vel e divertido us lo O que evitar em uma interface N o existem regras espec ficas sobre o que deve e o que n o deve ser feito em uma interface mas como regra geral conden vel Repropositar a m dia n o se deve adaptar o conte do produzido para a m dia convencional para um produto digital pois as linguagens s o completamente diferentes e o resultado pode ficar estranho Confundir o visitante deve se fazer o design com coer ncia e consist ncia Como n o existem regras os elementos da interface podem ficar em qualquer ponto da tela mas uma vez colocados em um ponto devem permanecer nele por todo o produto Complicar a navega o e levar a becos sem sa da o bot o de volta para a home page deve ser usado somente em ltima inst ncia Se um web
74. VR p ginas geradas dinamicamente bancos de dados e sistemas de busca ao acesso de todos ficou muito mais f cil fazer design digital Muitas empresas de inform tica se especializam em programa o e gera o de infra estrutura Com isso viram fornecedores e d o aos designers possibilidade de inventar cada vez mais Mas ao mesmo tempo parece me que um v rus continua a se manifestar muitas pe as criadas para clientes importantes ainda t m objetos in teis tridimensionais girando s para estarem l Ou coisas t picas de p ginas pessoais como arrobas girat rias envelopinhos que voam setas que giram textos coloridos fundos de tela confusos O pior de tudo que h uma est tica embutida nessas p ginas pessoais E ela como o Kitsch as cal as boca de sino e as batas psicod licas vai demorar para desaparecer e ainda bem capaz de voltar para nos assombrar Se voc duvida s pensar que o designer David Carson que entre outras coisas fez o projeto gr fico da revista Trip se inspirou nas placas de rua desenhadas nas redondezas de sua casa 5 Interface Ningu m ou quase ningu m gosta de usar computadores S o m quinas estranhas fr geis que nos deixam trancados em salas escuras e causam v rios problemas sa de Em compensa o todos gostamos de ferramentas que nos ajudem a realizar um trabalho de um culos a uma pin a Essa a id ia que deve estar por tr s das interfaces de
75. a a melhor maneira O que tenho que saber antes de fazer isso O que posso endender deste coment rio a princ pio t o inocente Em que situa es se aplicam ou n o as regras de determinado guru Essa inquieta o muitas vezes gera desconforto ansiedade que n o pode se transformar em hesita o E importante entender que n o necess rio ter respostas para todas as perguntas mas preciso saber e quais s o as perguntas certas e e onde encontrar as suas respostas mesmo que voc n o fa a a menor id ia de quais elas sejam Farol Digital uma produtora fora do eixo Depois de criados pela ag ncia ou est dio muitos sites s o finalizados por empresas dedicadas que como tudo na web n o precisam estar na mesma cidade que a equipe de cria o A FarolDigital por exemplo uma produtora com estrutura qualidade e tecnologia de dar inveja Por isso que mesmo de Goi nia me atendia via ICQ SEDEX e mail e de vez em quando pessoalmente Com mais de 30 profissionais em v rias reas eles fazem Cria o de Campanhas onLine banners hotsites Cria o de Sites Portais em WWW e WAP Cria o de Aplicativos e Sistemas aplicativos ligados a Banco de Dados formul rios CGIs Sockets Protocolos Com rcio Eletr nico B2B B2C C2C aplica o de camada criptografada homologa o de seguran a em sites portais disponibiliza o de pagamento por Cart o de Cr dito Boleto Banc rio e D bito Online
76. a es dispon veis na Internet s o digitais o espa o que elas determinam que virtual Quando clico e vejo uma p gina quando entro em uma sala essa p gina ou sala n o existem de verdade S o proje es que fazemos para tentar compreender o mundo esquisito que o digital Complicado Desculpe me Em resumo virtual algo como a Julia Roberts que n o existe no mundo real Esse foi seguramente o conceito mais dif cil e in til Ele s serve para dar uma pequena no o do tipo de ambiente em que voc est entrando Os outros s o mais pr ticos d o uma no o geral dos elementos usados no design para a internet Se voc j sabe um m nimo pule essa se o P ginas e sites WWW Site em ingl s quer dizer s tio lugar Um site internet pode ser definido como o lugar ou o endere o de uma pessoa ou empresa na WWW Na realidade apenas espa o em um disco r gido de um computador ligado internet O conte do de um website s pode ser alterado por um grupo restrito de pessoas autorizadas mas qualquer um pode v lo Ele funciona ao contr rio das caixas postais de e mail para que qualquer um pode mandar conte do mas s autorizados podem v lo Dizemos que um site est no ar quando ele pode ser acessado via internet O conte do de um site um conjunto de documentos multim dia de acesso remoto nada mais O que existe nessa multim dia que faz a diferen a algumas cont m te
77. a noite em oito cidades selecionadas Eles gostaram da id ia mas levantaram os seguintes problemas e Como gerar um cat logo completo de todos os endere os de bares e restaurantes do pa s e Como garantir que n o houvesse omiss es ou erros Antes mesmo de responder a essas perguntas chegamos a outros pontos importantes 1 O neg cio do cliente n o produzir not cia 2 Produzir um banco de dados desse tamanho seria caro e demorado demais 3 Esse banco de dados n o seria consistente pois nunca teria sido testado 4 Mesmo que fosse excelente enfrentaria resist ncia do consumidor e 5 Aqui entre n s voc confiaria em uma dica de uma empresa de refrigerantes Claro que n o pois dif cil acreditar que seja completamente isenta Percebi que o importante para a empreitada era oferecer acesso informa o de qualidade com patroc nio exclusivo da Coca Cola e isso n o significava necessariamente ter que produzir a tal informa o Da corremos atr s de parcerias Precis vamos de um guia de entretenimento e noite que tivesse um banco de dados confi vel e consistente e seu equivalente em papel pois nosso p blico ia muito al m do internauta t pico Em S o Paulo achamos uns jornais e a Revista VejaSP no Rio jornais e a VejaRio Nas outras cidades tamb m N o restou d vida nosso ve culo ideal ali s o nico poss vel tinha que ser a revista Veja edi o local Da surgiu uma id ia com cara de Miss o Im
78. a podem n o ter fim serem misturados s experi ncias dos leitores em um exerc cio nico de comunidade Esse processo em parte usado na forma o e estrutura o de comunidades virtuais 12 1 Hiperespa o e ciberespa o Imagine que voc est sentado a uma mesa com duas outras pessoas A e B f cil calcular a dist ncia entre elas e a sua dist ncia para cada uma medida em que voc se afasta da mesa a dist ncia entre elas parece diminuir e fica mais dif cil calcular a diferen a entre a sua dist ncia para uma e para outra Com uma dist ncia cada vez maior fica mais dif cil diferenciar as duas pessoas ou a sua dist ncia para cada uma delas Em uma situa o limite como se a lei de Newton fosse revogada e as duas pessoas ocupassem o mesmo lugar no espa o ao mesmo tempo A sua dist ncia para cada uma delas seria a mesma Isso uma das defini es de Hiperespa o Nele as dimens es f sicas n o importam mais e para falar com algu m do outro lado da rua ou na China o esfor o seria o mesmo assim que ao apertar o bot ozinho hiperespa o a nave vai para o mesmo espa o s que em um local diferente Parece com algo conhecido Pois Ao falar com uma pessoa pelo telefone voc est em uma casa ela est em outra O contato telef nico n o o leva para l nem a traz para onde voc est mas cria um espa o intermedi rio inexistente onde ambos convivem Esse espa o proporcionado por meios
79. a ser mais bacana a come ar pelo nome cria o O designer n o deve ser interrompido pois est criando Ele faz isso o tempo todo um g nio quase sempre incompreendido Tanto que perde muito tempo discutindo o bom e o mau design entenda se como bom aquele feito por ele e como mau o feito pela concorr ncia Parecem aqueles poetas que tentam vender seus livrinhos na porta de espa os culturais ou bares alternativos e que reclamam do sistema esmagador triste dizer mas a maioria dos designers composta por cinderelas que acreditaram na fantasia Depois de passar tanto tempo tentando convencer o cliente da import ncia da unidade e coer ncia visual em um trabalho e buscando traduzir visualmente a maioria dos conceitos muitos designers acabam acreditando que realmente s o especiais Um designer especial Sem ironia Em um mundo brutalmente verbal dif cil encontrar algu m visualmente alfabetizado capaz de ler uma fotografia e formular um visual interessante Designers s o compositores que como poetas e m sicos coordenam uma sinfonia de elementos gerando um resultado harm nico Como esse resultado na maioria das vezes inusitado ele precisa de muita autoconfian a e auto estima para n o matar uma id ia nova em nome de uma poss vel rejei o do p blico Por isso que como a maioria dos artistas muitos designers t m egos imensos e comportamentos inaceit veis S que sempre bom le
80. adas Reflexos de controle elas nos reafirmam que h um tempo e um lugar para tudo Declarando o que certo e o que errado elas refor am estere tipos murmurando a falsa humildade do senso comum que nos faz ter um ar enjoado de conoisseurs nost lgicos de tempos que nunca existiram As categorias s o sistemas f ceis confort veis Use as mas duvide delas Elas s o as regras do jogo mas talvez n o mais do que est sendo jogado Clement Mok um dos maiores arquitetos de informa o dos Estados Unidos divide o processo de produ o de um sistema de comunica o digital em quatro fases defini o conceito cria o e implementa o Defini o coleta e an lise dos dados dispon veis identifica o de objetivos e sua an lise seguindo par metros pr ticos or amento e prazo A abrang ncia e profundidade de um projeto s o definidas nesta fase Conceito fase de avalia o do conte do e estrutura o da informa o Defini o dos dados relevantes prioridades e interliga es a fase do planejamento que define em que parte do projeto ficar o as informa es e que meios ser o utilizados som fotografias ilustra es diagramas texto v deos para divulg la o momento de constru o de modelos e prot tipos para checar sua viabilidade Cria o design e finaliza o da interface Aglutina o das diversas m dias e concatena o das partes do projeto definido nas fases anteriores O projet
81. ado esquerdo A habilidade gr fica tarefa para o pensamento anal gico do lado direito Tenho uma profunda e sincera admira o pelos malucos que enfrentam uma selva de linhas e mais linhas de vari veis de c digo sem medo Voc j conversou com um programador daqueles bem doid es E tentou respeitar o seu ponto de vista escutando o que ele fala e tentando seguir a sua linha de racioc nio Experimente esquecer a apar ncia entusiasmo ou mesmo as roupas deles reze ali s para que fa am o mesmo com voc e preste aten o nas suas id ias nelas est a maioria das solu es criativas de design e roteiro de que voc precisa Muitas pessoas que trabalham hoje com comunica o digital querem ser profissionais multifacetados tentando dominar a criatividade e a t cnica Isso n o funciona porque essas reas n o s o complementares e o que acontece que uma acaba passando por cima da outra fazem sites com belo design mas com navega o ruim ou tentam for ar a barra para o uso de uma tecnologia qualquer sem necessidade Pode parecer rid culo mas o que n o falta para a execu o de belos e eficientes websites a tecnologia O problema que a maioria dos websites est sendo feita por profissionais que ainda n o entenderam direito para que serve o hipertexto e como us lo ou seja n o conhecem as ferramentas com que trabalham a que mora o problema Ou como diz aquela m sica se n o sabes aonde vais porque teima
82. adrado careta ou algo do g nero E sempre bom lembrar que as revistas MTV e Supermercado Moderno usam praticamente o mesmo formato de papel com layouts e mensagens completamente diferentes Cabe ao designer desenvolver sob essas premissas algo criativo e visualmente interessante Respeitar conte dos sua prioridade e pontos de interatividade n o significa seguir o padr o careta da maioria dos portais que conhecemos Alguns j est o come ando a mudar 6 2 Grupos de dados Uma das cr ticas que se faz s pessoas que usam a internet como fonte de pesquisa a falta de profundidade dos conhecimentos citam se autores e teorias alimentados exclusivamente pelo encontrado em uma pesquisa r pida sem refer ncias de base Isso acontece porque a maior parte das pessoas se preocupa com a informa o simples e n o se preocupa com seu contexto Ao planejar um website necess rio levar em considera o tr s categorias de material informativo dado informa o e conhecimento Sua rela o constr i um sistema de informa o Dados est mulos isolados fatos independentes irrelevantes O dado a unidade b sica de informa o A casa branca o dia est chuvoso estou com fome fogo na Amaz nia s o dados e ficam armazenados na mem ria de curta dura o Como estes n s recebemos todos os dias do leite que acabou na geladeira ao novo ministro da sa de Os dados s o descart veis Ningu m cap
83. agem na web tem essa defini o a solu o reduzir seu tamanho aumenta o n mero de pixels inch ou deix la com uma qualidade sofr vel n o se podem inventar novos pixels Neste livro muitas vezes opto pela segunda alternativa Formatos Se voc trabalha com editora o eletr nica esque a o TIFF e o EPS eles n o s o lidos pela maioria dos browsers trazem informa es desnecess rias para quem ler uma imagem na tela e s o grandes demais Os formatos mais usados s o GIF e JPEG GIF Graphics Interchange Format Padr o criado pela CompuServe que suporta no m ximo 256 cores ou 8 bits de informa o para cada pixel da imagem E poss vel controlar seu peso alterando o n mero de cores Suas principais caracter sticas s o Podem ser animadas o formato permite segii ncias de imagens com tempo criando anima es Podem ter reas transparentes uma ou mais de suas cores podem ser definidas como transparentes permitindo que se veja a cor ou imagem de fundo Podem ser entrela adas podem ser carregadas progressivamente na tela o que faz que uma vers o r stica da imagem seja vis vel rapidamente JPEG Joint Photographic Experts Group Padr o criado por esse grupo da International Standards Organization a ISO Normalmente usado para fotografias esse padr o comprime imagens descartando reas repetitivas ou com baixo n vel de detalhe Essa compress o varia de O a 100 e pode gerar arquivos bem pequeno
84. ama o Pensar em viabiliza o s atrapalha o processo N o importa saber como programar em todas as linguagens e plug ins Tudo o que se deve ter em mente para que serve cada coisa suas possibilidades limita es e usos Isso n o f cil pois preciso esquecer tudo o que se sabe sobre design e publicidade feitos para o papel ou TV e tudo o que se acha que sabe sobre sites e come ar do zero trabalhando com l pis e papel e inventando as id ias mais malucas poss veis e entreg las assim no papel e no Photoshop para os programadores Fim da fase I Depois desses del rios criativos hora de colocar o p no ch o Ali s como diria um amigo meu os quatro p s conversar muito com o programador ou empresa de produ o e ter enormes doses de paci ncia ao explicar que aquilo que vai dar trabalho para fazer e aparentemente n o acrescenta nada ao conte do do site na realidade fundamental para o design Designers e programadores costumam nutrir uma rela o destrutiva de desprezo m tuo Um acha que o outro bitolado e pregui oso o outro acha que o primeiro adora frescuras e firulas sem sentido que s comprometem a compatibilidade e a navega o Ambos est o errados e assim n o se vai a lugar algum A rela o deveria ser o inverso j que s o pessoas especialistas em reas t o diferentes que at ficam em metades separadas do c rebro A habilidade l gica especialidade do pensamento digital que fica do l
85. amente copiado de um americano U n s n o somos o povo mais criativo do mundo Por que a gente nunca xeroca o jeito como os caras sempre olham pro futuro e n o para o lado para ver o que o outro est fazendo E a preocupa o com educa o Poder amos xerocar por o toner no m ximo e ampliar 200 que ainda seria pouco Demora um tempo para ter uma vis o cr tica mas do ponto de vista daqui de cima o Brasil criativamente t indo pro lado errado que atr s dos americanos S para dar um exemplo de por que n o fazer isso um dos principais diretores do Art Center que considerada uma das melhores escolas do mundo me disse textualmente que os brasileiros est o sempre entre os mais criativos da escola O interessante seria saber o que eles sabem e fazer do nosso jeito Como est agora n s fazemos do nosso jeito mas nem de longe sabemos o que eles sabem E algumas empresas brasileiras de internet ainda fazem pior pois s fazem do jeito deles Precisa aprender design puro de interfaces tipografia hist ria da arte etc Entender porque eles fizeram e o que aconteceu no come o para ver o que hoje Para mim a faca e o queijo est o na nossa m o S que a faca velha e cega E o queijo com certeza tem que ser Minas Frescal e n o esse horr vel e plastificado Cheddar que eles adoram por aqui s vezes me sinto um ignorante no meio dos iluminados nessa terra Um trapalh o no Partenon Imagino o barulho que alguns dos meu
86. antes em papel podem ser feitas com facilidade em sistemas de hipertexto na web Livros como O Jogo da Amarelinha de Julio Cort zar cujos cap tulos podem ser lidos em ordens diferentes s o pr hist ria dos links Livros cheios de refer ncias como um Finnegans Wake de James Joyce tamb m E at livros fant sticos como Alice no Pa s das Maravilhas de Lewis Carroll s o mais f ceis de se ambientar em um site O texto comum linear como o conhecemos apenas um caso especial do hipertexto multi linear Caso especial em que a conven o l lo palavra a palavra do in cio ao fim Em outras palavras o hipertexto um texto tridimensional e portanto n o tem come o nem fim Sua estrutura o que conseguimos reproduzir de mais parecido com o funcionamento do c rebro humano pois os eventos n o acontecem em seqii ncia mas simultaneamente S o v rias coisas acontecendo ao mesmo tempo e cabe a seu leitor organiz las Um bom exemplo disso acontece quando voc n o consegue come ar um texto apesar de ter todas as informa es na realidade voc est tendo uma enorme dificuldade em colocar toda aquela informa o em gavetas de conceitos seq enciais e lineares Regra r pida para fazer modelos simples de hipertexto e Escreva pequenos textos independentes entre si mas com elementos em comum e Marque todas as palavras de cada texto que possam servir de conex o com os outros e Crie tabelas de conex o marcando
87. ao ponto e estimular o usu rio a o Essas s o apenas algumas dicas Na d vida sempre consider vel usar o bom senso 8 2 Especifica es planejamento e cronograma O que diferencia uma estrutura profissional de produ o do sitezinho feito pelo sobrinho a clara determina o de par metros o que se quer que ferramentas est o dispon veis e de quais deveremos lan ar m o necessariamente nessa ordem n o o contr rio e como dever ser feito Acima de tudo tenha em mente que seu site deve Manter se simples e objetivo o usu rio web n o tem tempo para papo furado Ser realista melhor fazer um site simples que cumpre o prometido que propor sistemas elaborad ssimos e n o conseguir realiz los e Ter par metros claros de avalia o ver se cumpre os objetivos da comunica o Sugiro uma lista de t picos Perguntas a se fazer ao cliente 1 Qual o produto digital desejado CD ROM website quiosque multim dia intranet s interface s arquitetura de informa o 2 Por que esse produto Que caracter sticas mobilidade abrang ncia disponibilidade levaram sua escolha 3 A a o ser isolada ou far parte de uma campanha mais abrangente envolvendo outros meios de comunica o 4 Quais s o os objetivos da empresa com o produto ganho institucional amplia o de mercado venda de produtos ou servi os 5 Qual o perfil do usu rio o que quer o que espera do produ
88. ar Primeiro sua estrutura como se fosse feita de arame depois todo o seu conte do Sua tinta seria a luz como as espadas de Star Wars Os objetos criados por essa caneta seriam objetos de luz imateriais e ao mesmo tempo fant sticos O que iria acontecer com essas esculturas de luz Como elas seriam guardadas Poderia desenhar com elas no escuro Essa caneta seria vi vel comercialmente Sei l Nunca pensei nesses assuntos Talvez porque n o fossem relevantes Talvez porque estivesse mais preocupado em imaginar o que aconteceria se as formigas que viviam na casa da minha av consumissem aquele vidro fedorento de Emuls o Scott e realmente crescessem e ficassem mais fortes A inf ncia era realmente uma poca interessante Confesso que fiquei assustado quando descobri que debaixo do asfalto das ruas existia terra e que nessa terra existiam minhocas Foi uma surpresa quando percebi que ao usar o apontador de l pis no dedo do meu irm o saiu sangue e n o ficou pontudo Lembro me bem de ter ficado de castigo quando ganhei uma caixa de carimbos e ilustrei algumas paredes de casa Ou quando descobri que o olho esquerdo e o olho direito formavam imagens diferentes e esqueci de comer para ficar piscando Muito tempo mais tarde lembro me de ficar maravilhado quando vi pela primeira vez um microcomputador e o que podia fazer aquela maquininha fascinante e entorpecente ali s n o sugestivo que se chame de usu rio tanto as pessoas que c
89. as da internet Muito bonito todo esse papo de new media mas o fato que a internet mudou muito pouco Desde os primeiros exerc cios quase acad micos do come o da d cada de 90 at hoje os sites continuam lerdos feios e chatos com quase as mesmas coisas barras de links esquerda logotipos no canto superior coisas animadas que piscam e pulam conte do excessivo desnecess rio confuso ou desfocado com cones esquisitos textos com clique aqui muito barulho e pouco servi o de verdade Enquanto isso os videogames est o cada vez mais sensacionais o c digo fonte dos DVDs j foi quebrado MP3 faz com que os milhares de reais gastos em sua cole o de CDs pare a um estrondoso desperd cio Linux de gra a e amea a o Ruindows e mail funciona em telefone celular SimCity em PalmPilot ICQ um v rus que corr i muito mais horas de trabalho que qualquer ILOVEYOU adolescentes de piercings e cabelos coloridos continuam sendo o nico grupo capaz de acertar o rel gio de um videocassete crian as decoram todos os nomes dos malditos Pok mons e eu e voc perdidos nesse turbilh o ouvimos profetas profetizando sobre qualquer coisa e n o sabemos a quem recorrer Que raio de abismo cultural separa as crian as de hoje dos adolescentes estes dos jovens profissionais de trinta e poucos anos e estes de seus experientes colegas de cingiienta e poucos Boa parte da culpa da lei de reserva de mercado para produtos de i
90. ates d ao usu rio a op o de escolher a tela que quiser montar e enviar seus dados preenchendo um formul rio Automaticamente a p gina constru da e colocada no ar uma solu o r pida e f cil mas limita o servi o aos servidores que o disponibilizam e n o d quase nenhuma op o de layout al m do b sico Flash Por trabalhar com internet h quase dez anos e ser f das possibilidades dos sistemas de hipertexto eu sempre desconfiei de applets java plug ins ou quaisquer anabolizantes que se colocavam nos sites simplesmente por consider los desnecess rios por que arriscar o conte do de um site s para deix lo mais bonitinho Se o hipertexto por si s j uma ferramenta fascinante e pouco explorada por que ficar com invencionices N o preciso dizer que eu n o gostava nem um pouco de Flash Na minha opini o um site teria que valer muito a pena para justificar download instala o reinicializa o e o risco de travar a m quina Mas com o tempo o plug in ficou mais est vel as m quinas mais potentes muitos sites passaram a usar a tecnologia e novas vers es de browsers o traziam instalado o que acabou mudando minha opini o Percebi que a busca pela megacompatibilidade acaba atuando nos websites como a chuva em uma corrida de f rmula 1 nivela por baixo e restringe o que poderia ser um grande espet culo a uma monotonia sem fim Continuo contra o uso de Flash em aplica es que poderiam ser
91. ausa disso muito pelo contr rio Seu design reflete claramente seu conte do Um website deve ter conceito e foco ou seja deve ter claro o que se prop e a fazer e mais do que isso O que se prop e a n o fazer Surgiu uma nova oportunidade fa a um novo site n o tente aglutinar tenistas e jogadores de futebol dentro da categoria esportistas mesmo que todo o mercado todos os seus concorrentes e at os principais sites dos Estados Unidos o estiverem fazendo N o pense na forma com que seus amigos tratam as namoradas deles ou se o seu vizinho recicla lixo pense no seu p blico foque sua aten o no que ele quer e n o d ouvidos aos outros Nesse mundo digital e impessoal mostre para ele que nico n o uma palavra vazia que ele agradecer 7 5 Do que as pessoas mais gostam e o que elas odeiam nos sites A web demais Tem sempre uma novidade muito legal Mais do que uma tecnologia ela parece um organismo vivo com imagens bonitas coisas teis e grandes id ias legal passear por sites desconhecidos descobrindo sua estrutura Tudo o que a gente precisa est l As rela es de espa o e tempo podem ser alteradas as possibilidades s o praticamente infinitas Ao mesmo tempo a web um saco lenta cheia de lixo demora um temp o para achar algo que preste trava o computador tem conte do desatualizado Voc j parou para pensar o que mais curte na rede E o que mais odeia Fa a esse exerc
92. avega o e seus cones ou textos Essa a parte mais importante da estrutura o de uma interface e por mais incr vel que possa parecer normalmente a mais ignorada Muitos designers de sites e mesmo de comerciais de TV interativa e DVDs est o t o preocupados em criar um layout harmonioso que parecem se esquecer que os produtos digitais devem ser funcionais pois tratam suas barras de navega o como meros elementos acess rios do design sempre bom lembrar que por mais bonito que seja o site como um todo na barra de navega o que seu usu rio vai concentrar sua aten o Afinal por mais bela que seja a pintura de um carro para o painel e para a dire o que olhamos quando estamos guiando O design de informa o a sinaliza o que torna claros os ambientes e suas divis es facilitando a compreens o As placas de orienta o nas g ndolas de um supermercado como as barras de navega o e cones de websites s o formas de organizar as estruturas de navega o em um ambiente Elas identificam a l gica impl cita na disposi o do ambiente f sico e se n o houver a criam e ajudam seu usu rio a identificar onde est e para onde quer ir o que torna sua experi ncia mais agrad vel No meio impresso os elementos usados para isso s o os t tulos legendas gr ficos e fotos que ajudam o leitor a se orientar na p gina Na web s o bot es cones barras de navega o mapas do site Como n o h estr
93. az de dizer com precis o a hora em que escovou os dentes todos os dias da semana que passou a n o ser que isso fa a parte de um ritual Dados guardados t m um valor pitoresco ex tico o nome de um personagem de desenho animado um termo t cnico esquisito ou a escala o de um time de futebol em 1974 s o alguns exemplos Informa o quando um dado se torna relevante ele se transforma em informa o por isso que se chama processamento de dados a t cnica de sua aglutina o em conjuntos relevantes para a gera o de relat rios Quando essa t cnica feita por uma m quina ela chamada de informa o autom tica ou inform tica Por mais que os cientistas de computa o queiram criar m quinas capazes de gerar informa o a tal da intelig ncia artificial quem decide se os dados t m relev ncia para serem conectados somos n s A informa o resultante dessa combina o de dados Conhecimento o mais raro e duradouro tipo de material informativo O conhecimento se forma quando a informa o se conecta experi ncia pessoal e passa a fazer parte dela Conjuntos de valores educa o religi o ideologia cultura ou mesmo experi ncias sensoriais afetivas transcendentais e sociais s o na realidade conjuntos de informa es aplic veis na hist ria particular de um indiv duo Se a nova mensagem novo dado se encaixa nesses padr es tem se um aprendizado que gerar conhecimento Por isso
94. c logo brit nico Davis Lewis Essa s ndrome caracterizada por tens o irritabilidade e sentimento de abandono causada pela sobrecarga de informa es na rede comparada com a que o ser humano comum estava exposto antes Boa parte dela causada pela tens o e press o que conceitos artificiais como tempo real provocam Ou pela necessidade compulsiva de se transformar dados em informa o palp vel A situa o atual mostra a necessidade urgente da busca de novas ferramentas de pensar O homem moderno bombardeado pela m dia e pelas diferentes formas de acesso aos mais diversos dados Ao mesmo tempo que se exige dele uma velocidade cada vez maior de decis es h uma necessidade de um pensamento cr tico para avaliar a enxurrada de informa o suas fontes e conex es Somos uma civiliza o banhada por informa es e constitu da por pessoas desatentas ansiosas e despreparadas para tirar conclus es sensatas baseadas no ambiente volta O resultado a cria o de pseudoculturas O neurologista Henrique Del Nero sintetiza Cobra se do c rebro moderno o desempenho de um carro de corrida e ao mesmo tempo a const ncia e a falta de manuten o de um carro de passeio Um carro de corrida deve sofrer ajustes para se adaptar a cada situa o nova A mente humana tamb m As velocidades cada vez mais r pidas fazem parte da corrida evolutiva Achar que n o h espa o para a manuten o ignor ncia E complemen
95. cadabra por exemplo demandava cinco moldes para a letra a dois para b dois para r e assim por diante Edgar Allan Poe escreveu um conto divertid ssimo x ing a paragrab sobre esse processo A primeira inova o tecnol gica de peso foi a inven o do linotipo no final do s culo XIX permitindo que se chumbassem linhas inteiras de tipos de uma s vez Da o nome lin o type At o come o do s culo XX as regras para o desenho de letras eram as mesmas dos entalhadores de pedras romanos com pequenas exce es A primeira letra a romper completamente com a estrutura cl ssica se concentrando em suas formas b sicas e na comunica o foi a Futura desenhada por Paul Renner em 1930 Anos depois surgiram Helvetica e Univers No final dos anos 80 ainda era comum o uso de processos mec nicos para se fazer impressos tipos moldados fotolitos feitos diretamente a partir de fotografias artes finais desenhadas a nanquim ou montadas a partir de colagens e outros materiais feitos m o A Desktop Publishing viabilizada pelos produtos das empresas Apple Xerox Adobe Aldus Linotype s se tornou realidade fora dos Estados Unidos no in cio dos anos 90 Hoje qualquer computador pode permitir a seu usu rio a cria o e altera o de formas de letras dando a qualquer um a possibilidade de inventar alfabetos e aplic los Serif Sans serif Voc j deve ter ouvido falar por a de letras s
96. ce que fica grudado no dente depois do almo o um pequeno detalhe que compromete o conjunto inteiro O design especialmente o design gr fico e de web para voc Bom depende Voc adora letras Acha linda a curva que o Q do Goudy faz Gosta de mexer com cores detalhista Adora pesquisar tipos de papel e formatos Acha videogames ou RPG experi ncias interessantes de linguagem Se a resposta foi um apaixonado SIM sem vacilar nem um pouquinho a profiss o sua para o bem ou para o mal Se a quest o financeira pesar mas pesar muito abandone a rea Voc sempre poder ser um bom advogado ou cirurgi o pl stico com uma cole o de belos quadros em casa 1 1 Qualquer imbecil faz design design designers e Frankensteins Voc conhece algu m que se meta a besta de criticar uma estrada uma pr tese ou um sat lite de telecomunica es a n o ser que eles estejam evidentemente errados colocando vidas em risco Pode acreditar que n o seja louco um engenheiro que mande emendar uma ponte p nsil a uma antena parab lica Pois compare com m sicas Mesmo que n o entendam nada de compassos ou harmonias todos se sentem no direito de criticar uma trilha sonora baseados exclusivamente em seu gosto pessoal Com culin ria ou layouts n o diferente Infelizmente gosto n o se discute lamenta se parte da cultura individual e resqu cio de sua forma o portanto subjetivo e male vel E para piorar o gost
97. conex o mais lenta N o h d vidas que uma p gina turbinada com plug ins tem mais recursos e portanto pode ser mais bonita mas ser que mais eficiente Afinal n o um n mero de coisas animadas que piscam e pulam na tela que fazem de um website um Yahoo Existe plug in para quase tudo compress o e expans o de documentos visualiza o de imagens v deo e multim dia nos mais diversos formatos de MPEG a Microsoft Powerpoint impress o de selos de correio telefonia via browser visualiza o de mapas m sica assinatura digital videoconfer ncia livros eletr nicos VRML chat edi o HTML videofone visualiza o e opera o de ambientes 3D multiusu rio visualiza o din mica tridimensional de mol culas visualiza o de panoramas virtuais sintetiza o e reconhecimento de voz navega o por voz otimiza o de mem ria sintetiza o de sons de equipamentos antigos como o Commodore 64 etc etc etc a velha hist ria enquanto existir algu m disposto a consumir sempre haver algu m para produzir Java JavaScript CGI etc Apesar de sua abrang ncia o HTML n o suficiente para algumas tarefas espec ficas da WWW como acesso a bancos de dados gera o de p ginas autom ticas e processos de seguran a Para isso s o necess rias linguagens de programa o mais ricas como a t o falada Java As mais comuns s o CGI Common Gateway Interface uma linguagem para que o usu rio co
98. confesse que nem sempre seja poss vel convencer o cliente tentar fundamental E para isso a regra simples argumentos convincentes e acima de tudo racionais Nesse processo final muito comum fazer e refazer v rias vezes o mesmo trabalho Se conselho vale algo fa a sempre como se fosse a primeira vez Faz parte da personalidade de quem produz querer sempre mexer com coisas novas mas aparar as frestas t o importante quanto iniciar o site e nos detalhes que se v a qualidade do trabalho Com as modifica es finais feitas o produto est pronto para ir ao ar certo N o Ainda temos que resolver como ser atualizado fun o do produtor garantir que a ferramenta de atualiza o que ser operada por pessoas comuns sem no o de t cnica seja funcional e de f cil entendimento Programador pensa como programador jornalista pensa como jornalista e o produtor tem que saber como todo mundo pensa para fazer um produto intelig vel E essa a caracter stica mais importante do produtor multidisciplinariedade Estar atendo a tudo saber o que se espera do site como o p blico o est entendendo como os outros envolvidos est o participando do projeto avaliar a qualidade do trabalho dos colegas e estar sempre atento s mudan as Aprender sempre com tudo de livros artigos e sites at coment rios ouvidos em uma tarde de domingo Isso acaba fazendo do produtor uma figura inquieta questionadora Ess
99. corrente e evitar confus o Entretanto necess rio tomar cuidado com e Restri o o excesso n o acrescentar significado interface e provavelmente ser irritante e Redund ncia o som n o deve ser a nica indica o de que algo aconteceu Deve sempre existir uma indica o visual para refor o e e Invas o muitos sons podem ser sutis e mesmo assim garantir a transmiss o da mensagem Sons invasivos ou desagrad veis podem ser ofensivos ou intimidat rios Sons repetitivos podem se tornar irritantes depois de exposi o prolongada 5 3 Por uma est tica digital Pode parecer muito estranho talvez at meio rid culo mas uma das coisas que mais sinto falta na web hoje em dia de tradi o Seria t o bacana se pud ssemos ter contato com anos e mais anos de hist ria da digitalidade ou seus similares para nos entupir de refer ncias Ah perder dias em busca de refer ncias em uma pesquisa divers o pelas interfaces e roteiros dos Gauguins digitais seus Leonardos Disneys S focles Ionescos Pirandellos Van Goghs Hitchcocks Spielbergs usar os hyperlinks como Arist teles Capote Joyce Pessoa Vin cius seria t o bom poder citar influ ncias de arte sacra de escrita carol ngia de mitologia tupinamb em nossas interfaces Seria lindo mas bom acordar nada est disposi o pois n o tinha sido inventado na poca deles E se temos a nosso favor um terreno criativamente virgem em que ainda n
100. criar novas estruturas que surgiram coisas como um Mortal Kombat Ultima Sim City Quake e muitos outros Precisamos de um choque de id ias tecnologias para elas n s temos de mont o A web est t o obcecada em imitar os modelos tradicionais que esquece de sua verdadeira riqueza Faltam boas id ias produtos que fa am a diferen a coisas bacanas e simples que deixem as pessoas felizes e satisfeitas Como fazer isso Com l pis e papel Talvez umas cervejas ajudem Para muitos criar esse tipo de coisa um mist rio Para desenvolver bons produtos digitais e para se desenvolver como profissional na era digital preciso abrir a cabe a e transformar esses mist rios em problemas Assim ser bem mais f cil solucion los Essa na minha opini o a principal fun o da Arquitetura de Informa o Malditos Pok mons Voc entende alguma coisa de Pok mons Eu confesso que n o entendo nada Na poca em que escrevi este artigo o desenho animado era uma esp cie de mania nacional com todos os termos esquisitos de seu ambiente Mas em muitos aspectos seu mundo t o herm tico e incompreens vel quanto o da internet Com isso em mente escrevi este artigo sem nenhuma inten o de ofender seus f s Quem conhece o mundo Pok mon n o entendeu do que se trata e qual sua rela o com o design para a internet Quem n o sabe nada deu boas risadas Leia o e pense em como seus clientes pensam na internet Pok mons Pok mons
101. da O terreno de uma paisagem informativa um simples banco de dados A estrutura da informa o que d a ela suas caracter sticas Para que n o fique muito te rico vou exemplificar o controle local autom vel um website de uma empresa razoavelmente herm tica uma ind stria qu mica por exemplo pode usar desse conceito e criar um roteiro do tipo play a informa o corre linearmente informando passivamente o visitante como se fosse um v deo at que ele aperte a tecla stop Aparecem os bot es e ele retoma o controle do site A parte linear fornecer insumos para que as pessoas saibam do que se trata o site o que perguntar e a partir disso saber onde clicar Acompanhe a descri o de uma paisagem informativa de acordo com Muriel Cooper e David Small pesquisadores do grupo de linguagem vis vel do Instituto de Tecnologia de Massachussetts N o parece uma experi ncia psicod lica noite Voc est dormindo Voc flutua sobre sua casa deslizando tranquilamente no c u noturno Voc voa cada vez mais alto veloz como o pensamento e acha um espa o denso de informa o A paisagem muda lentamente algumas informa es desaparecem outras se aproximam at que ficam claros seus contornos e relevo Ao olhar mais atentamente para uma parte da imagem novos interesses v m mente eles parecem constela es no horizonte Com um pensamento voc pode ir a qualquer uma delas procurando descobrindo
102. da Escola de Comunica es e Artes da USP Pos vamos de gente grande e arm vamos planos mirabolantes para tentar conquistar o mundo Metidos ouv amos Mahalia Jackson Alberta Hunter e Carmen McRae j que ningu m tinha grana para comprar um CD e o jeito foi se virar com uma vitrolinha do Mickey e discos de vinil de um sebo Quase um ano depois veio a secret ria eletr nica Antes quando a gente deixava o est dio deriva e sa a para pegar um cinema na sess o das 4 larg vamos o telefone fora do gancho para parecermos ocupados e importantes Na verdade n o t nhamos quase nada para fazer o dia inteiro ent o Jog vamos videogames brinc vamos de fazer retoques mirabolantes no Photoshop faz amos refaz amos e refaz amos logotipos Claro que tamb m apost vamos corrida em cadeiras com rod zios e jog vamos h quei usando duas cadeiras um canudo de papel vegetal e um disquete estourado com gols de papel o Acabei montando uma escola de Macintosh para ocupar o tempo livre conhecer uma galera ganhar um dinheiro Fiz as apostilas de QuarkXPress FreeHand e Photoshop mais pirateadas de todo o Brasil ali s se algu m tiver uma dessas por favor mande para mim pois perdi os originais e queria guardar uma de lembran a E a Kropki foi se firmando se firmando se firmando N o preciso dizer que n o havia absolutamente nenhum planejamento Ali s quando havia dava 100 errado Depois de um ano e meio resolvi abrir uma emp
103. dade de leitura como um autom vel que sai do asfalto para entrar em uma estrada de terra e depois voltar ao asfalto Isso significa uma mudan a de velocidade e tom de voz e usado com frequ ncia em cita es de palavras estrangeiras pouco conhecidas Marketing n o leva it lico entrepeneurship leva It lico tamb m usado quando citamos o que algu m disse ou quando se quer um tom ir nico como em Ele foi com a Cris ao cinema Experimente trocar o it lico para cada palavra dessa frase e veja como a ironia muda foi ele quem foi ele foi mesmo foi com a Cris foi ao Cinema LETRASSEPARADAS s o uma solu o radical para a mudan a de ritmo e reconhecimento de palavras S o o equivalente de uma palavra soletrada Evite usar esse recurso com min sculas pois seu desenho original n o prev tamanha separa o A cor outro recurso muito importante em um texto Conforme a posi o e o contraste com o resto do layout uma pequena palavra colorida pode chamar mais a aten o que o negrito ou at do que o texto inteiro Na web cores devem ser usadas com cuidado e de forma bastante expl cita j que tamb m s o sinais de links de hipertexto Por falar em hipertexto a posi o de um link em uma frase costuma indicar para que tipo de conte do a liga o levar Por exemplo a frase Veja os resultados do XXIII Festival de Cannes N o muito precisa pois pode levar a qualquer tipo de informa o uma tabela com
104. de saber Pois se na web pode tudo cabe tudo por que a maioria dos sites tem bot es do lado esquerdo da tela Ora porque assim que tem sido assim que tem que ser pensa a maioria e os clientes est o nessa maioria N o h infelizmente nenhuma est tica A B blia e outros antigos documentos s o a base de qualquer ergonomia que possamos vir a querer para a m dia impressa o teatro a base para a TV e isso j feito h muitos muitos anos e foi se aperfei oando com o tempo Quanto a n s muitos sites n o s o muito diferentes dos bancos de dados que controlam o estoque das farm cias mais vagabundas e eles s o parecid ssimos no que diz respeito experi ncia do usu rio aos car ssimos sites de internet banking e e commerce triste e estimulante mas n o existe web com cara de web E o que afinal web com cara de web Sei l como voc tamb m estou tentando descobrir A resposta como sempre est l fora preciso prestar aten o no mundo de coisas que acontecem nossa volta nos trabalhos experimentais nas id ias mais esdr xulas sen o ficamos viciados e nossa criatividade n o se renova 5 4 Interatividade Uma das palavras mais gastas da internet hoje em dia a tal da interatividade N o importa onde como ou com que objetivo tudo deve ser interativo comerciais de TV cartazes de rua revistas card pios pe as de teatro Se h um porqu um significado por tr s n o interessa
105. dem ser outras bolhas ou elementos de conte do Quando se v um item que se quer examinar basta clicar nele O usu rio que voa dentro de um espa o multidimensional encontra diferentes objetos inteligentes e n o se perde pois o ambiente proporciona o contexto Cabe ao visitante descobrir entre as m ltiplas conex es oferecidas quais s o as que valem a pena e em que n vel de profundidade Uma representa o como essa pode parecer ainda mais confusa e delirante que a internet mas acredita se que essa ferramenta traga se n o ordem pelo menos uma maior compreens o dos v rios bancos de dados conectados Poucos imaginariam no come o da d cada de 80 que o mouse e o sistema de pastas cones e latas de lixo se tornaria t o popular Por mais natural que ele seja bom lembrar que n o existe nenhum equivalente na natureza a janelas com conte do ou barras de deslocamento 7 Quem precisa de um website Todo mundo quer estar na internet Por que exatamente poucos sabem mas o fato que as empresas se sentem arcaicas se n o tiverem o seu registro de dom nio WWW Isso pode ser complicado pois um site ruim desatualizado ou com dados errados pode ser muito mais nocivo imagem da empresa que simplesmente n o estar l realmente necess rio fazer um site na internet para a divulga o de produtos e servi os Os resultados justificar o o esfor o Se a empresa envolvida a Sony ou a Volkswagen n o h sombra de d
106. demais usa se a id ia de p gina web ou p gina digital Um website composto de v rios documentos de hipertexto intercalados e dos recursos relacionados a eles imagens sons v deo multim dia etc que ficam gravados no disco r gido do servidor Cada vez que um computador acessa esse endere o uma c pia digital do primeiro arquivo de hipertexto transmitida chamando todos os recursos aos quais est interligada E a tal home page que costuma ter nomes como index htm ou welcome html Dom nios e seu registro Um computador que armazene sites e esteja conectado internet chamado servidor Para podermos identific los em qualquer ponto do mundo atribui se a cada servidor um endere o chamado de Unique Resource Locator ou URL Como um c digo postal ou telefone esse endere o um conjunto de 4 algarismos separados por pontos que v o de 0 0 0 0 a 255 255 255 255 Para facilitar a memoriza o desses n meros n o brincadeira guardar coisas como 177 128 134 6 ou similares inventou se o sistema de dom nios ou nomes nicos que s o associados a uma URL S o os nomes de sites que voc conhece que logo depois do www t m o formato nome do dom nio categoria pa s Voc pode registrar qualquer nome de dom nio se ele n o foi registrado por outra pessoa ou entidade ele obedece aos padr es de nomenclatura n o pode ter espa os acentos cedilha pontua o e a maioria dos caracteres especiais amp
107. desiludidas tristes apaixonadas nervosas imagine a frase n o me falta mais nada para cada uma dessas express es Um layout eficiente pode funcionar como uma express o facial para cada tipo de mensagem uma cara diferente Um material diagramado para falar de sab o e limpeza de pele n o pode ter a mesma solu o de design de um falando de guerra civil Formato dimens es e adimensionalidade Qual o tamanho e as dimens es do seu layout Revistas cartazes folhetos outdoors e comerciais de TV t m caras completamente diferentes Mesmo na internet as p ginas web podem ser quadradas compridas ou largas Ou uma combina o de todas essas formas Que um cartaz deve ter menos texto que uma p gina de jornal razoavelmente evidente mas como devem ser dispostos os elementos de forma que o layout n o fique pobre ou polu do A f rmula mais segura criar um projeto para cada pe a a ser produzida e n o adaptar uma mesma solu o para diferentes formatos Os formatos comuns variam das propor es 1 1 at 1 2 e s o os de consulta mais f cil Dimens es estranhas podem causar mais impacto mas s o mais dif ceis de se operar A toda a o corresponde uma rea o O que voc quer dizer com seu layout Que tipo de emo o quer estimular Seu consumidor pode amar ou odiar o seu trabalho mas n o deve ficar indiferente a ele caso contr rio a comunica o n o valeu Se o importante s o as emo es que emo es
108. dicou esfor o dinheiro e tempo para a visita a um website deve ser estimulada a participar opinar perguntar reclamar contar problemas e aguardar respostas Abrir um canal de comunica o entre a empresa e o consumidor o n vel do internauta alto e ele espera ser tratado como igual Se ele fez todo o esfor o de chegar at o site e cadastrar seu e mail a empresa deve no m nimo responder altura As pessoas s o simples E voc uma delas Esque a tudo o que escrevi Tudo o que foi dito at aqui n o vale absolutamente nada se o designer ficar olhando para seu umbigo concentrado em seu estupidificante talento e n o se preocupar com o usu rio com o consumidor com quem vai ver todos esses trecos que estamos desenhando Existem excelentes ag ncias de propaganda e est dios de design no Brasil que s o especialistas em criar campanhas cultas inteligentes e estupendas que levam v rios pr mios menos um o reconhecimento de quem a v Todo esse psicologu s que foi colocado neste livro s serve para uma coisa tentar entender o que se passa na cabe a das pessoas quando v em layouts Gestalt Bauhaus e outros nomes impronunci veis n o foram colocados aqui para que voc se exiba perante seus clientes mas para que fique melhor preparado Se reparar bem vai ver que o texto desse livro coloquial s vezes at coloquial demais Tem um mont o de exemplos relacionando o design com culin ria ou ocasi es sociais ou ac
109. dividual e a manipula o que muita gente adora chamar de interatividade os documentos se reorganizam e se acumulam o que torna cada contato uma experi ncia nica Na sua ess ncia ela bem parecida com um bate papo t pico um assunto vai levando ao outro que leva a mais um e assim por diante de uma forma agrad vel de acordo com o interesse do ouvinte Parece tamb m com uma conversa com uma crian a de cinco anos na fase dos porqu s uma palavra que ela n o entendeu leva a uma nova hist ria e a velha esquecida Um site que respeite essa linguagem estar fazendo web com cara de web e que s poder acontecer na web O digital s vai valer a pena quando puder proporcionar algo que o papel n o proporciona e isso pode demorar para acontecer No come o a internet super legal um clic e voc est em Paris no Louvre Outro e voc est fazendo compras em Nova Iorque sem tirar o pijam o E da O que fazer com isso tudo Pra que serve tanta informa o A televis o teve que esperar mais de 30 anos para perder a cara de teatro filmado ou de cabe as falantes e mesmo assim boa parte de sua programa o ainda poderia estar no teatro ou r dio Foi s quando a gera o que cresceu vendo Jeannie um g nio resolveu fazer TV com cara de TV que surgiu o videoclipe e a MTV E da mesma forma que n s n o nos entusiasmamos com livros ou teatro da mesma forma que nossos pais as pr ximas gera es v o achar o cinema e e
110. e normalmente aquela id ia f cil at meio bvia que qualquer um teria Como qualquer um teria qualquer um acaba tendo e a piada n o tem a menor gra a como aquele sujeito que em uma festa faz quest o de agradar Todo mundo quer dist ncia Antigamente era mais dif cil fazer uma primeira id ia vingar O processo de cria o tinha muito de artesanato e at ficar pronto uma id ia melhor chegava Quem aprendeu a desenhar usando um mouse e n o sabe como produzir aqueles efeitos dos filtros do Photoshop usando t cnicas de fotografia e laborat rios deve tomar cuidado para n o fazer em design o equivalente a uma m sica dos Engenheiros do Hawaii ou Kid Abelha E o que pior achar genial O trabalho em cria o uma habilidade como outra qualquer Para se arriscar a viver dele necess rio algum talento inicial mas isso n o suficiente A pr tica deve ser desenvolvida com muitos exerc cios e trabalho duro at que o processo seja natural Lembra quando voc resolveu aprender a dirigir No come o muito esfor o e muitas batidinhas Com o tempo fica mais f cil Quanto tempo Para alguns umas semanas Para outros v rios anos E como exercitar a cria o Fazendo exerc cios ora O c rebro um m sculo como outro qualquer e precisa se mexer para ficar em forma Existe um ditado alem o muito bacana para essa teoria Du bist was Du iBt ou voc o que come Seu c rebro s vai produzir mater
111. e metade do investimento feito em propaganda era jogado fora e que era imposs vel descobrir qual metade Na internet em compensa o pode se identificar tantas coisas do usu rio que chega a impressionar a ponto de muitos neoparan icos terem medo de um Grande Irm o Como ao entrar em um site o usu rio conecta seu computador a um servidor e transfere documentos poss vel sem muito esfor o saber a data hora tipo de computador sistema operacional e browser utilizado Com a ajuda de programas dedicados poss vel saber quais p ginas foram visitadas se esta a primeira vez que o site visto ou se um retorno quais s o as reas mais visitadas qual o caminho que a m dia dos visitantes faz no site por qual p gina entra e por qual sai de que cidade a conex o feita quais s o os principais servidores que o acessam de quais banners vem a informa o etc etc etc E tem mais tamb m d para saber quais mensagens de erro ele encontra e em que partes do site quais s o os arquivos mais baixados e em que fregii ncia em resumo n o d para saber o sexo do internauta se ele est com fome ou se seu cabelo est despenteado para isso o computador ainda precisa perguntar mas do ponto de vista do servidor d pra saber quase tudo Isso pode parecer assustador mas na maioria das vezes o tipo de dado resultante s vale para que o servidor identifique tr fego erros e reas que demandem aten o e assim aum
112. ear Nossas assimila es do mundo entretanto s o visuais At para uma coisa t o abstrata como dinheiro Pense em 100 reais Pensou Pois N o muito mais f cil imaginar a nota ou as coisas que se compram com ela do que um n mero a n o ser que voc esteja pensando no extrato banc rio As imagens como os sons podem servir a v rios fins conforme o contexto Mas se estiverem ligadas a palavras sua interpreta o estar comprometida As palavras limitam nossa visualidade nos dizem o que ver Legendas em fotos s o lidas para que se conte ao leitor o que est acontecendo quando o que basta olhar Imagens sem palavras s o como o cen rio visto por um turista que n o fala a l ngua de um pa s a nica forma de entender olhando Aprende se assim a ver toda a cena e descobre se detalhes que permaneceriam escondidos para sempre O estrangeiro passa a ver coisas que os nativos n o v em pois sem palavras ele tem que decidir por si s do que trata cada imagem Na pr escola as crian as s o estimuladas a usar ferramentas visuais como blocos l pis de cera e pintura a dedo Rapidamente os meios art sticos s o trocados por instru es verbais e lineares dos textos Muito ocasionalmente uma ou outra disciplina pede um diagrama ou mapa e na universidade a arte j desapareceu do curr culo Somos o tempo todo orientados a fazer verbaliza es a explicar conceitos a preparar argumentos Com essa forma o n o d
113. elizmente n o fui pra KH E acredito que enquanto Fidel Castro estiver vivo o mundo n o ver muitos sites que residem em CU Para maiores informa es voc pode acessar a FAPESP atrav s do endere o www registro br sem o com Ou fora do Brasil a ICANN Internet Corporation for Assigned Names and Numbers em www icann org Se voc quer saber se determinado dom nio foi registrado nos Estados Unidos pode usar a ferramenta WHOIS da Network Solutions em www networksolutions com Browsers De todos os tipos de programas que existem para acessar servi os da internet os mais populares s o os browsers ou programas leitores de hipertexto Esses programas ativam a conex o procuram um site e transferem documentos da a sigla que precede a maioria dos endere os na web ser http www querendo dizer ativar c digo de transfer ncia de hipertexto hyper text transfer protocol para transferir um documento que est na world wide web Os dois browsers mais utilizados s o o Netscape e o Microsoft Internet Explorer Sua fun o original era somente mostrar os documentos de hipertexto de uma forma graficamente agrad vel e f cil de utilizar Com sua populariza o vers es mais novas incluem interpretadores JavaScript e adendos para suportar v rias tecnologias Ao contr rio da padroniza o que acontece na desktop publishing em que o conte do n o muda conforme o programa ou computador uma arte em EPS sempre a mesma
114. em graphic design A diferen a que tem entre o que os estudantes fazem aqui e a melhor revista ou livro ou qualquer coisa que tenha tinta no papel no Brasil t o grande quanto a diferen a entre o porta avi es Minas Gerais e o U S S Omaha Em propaganda ainda d para tentar competir mas em m dia impressa e web d medo E o pior que eles t m os mesmos programas as mesmas vers es os mesmos livros na estante que os designers brasileiros O que acontece Foi o que eu me perguntei no in cio Uma das aulas que tive era basicamente uma s rie de excurs es aos melhores escrit rios de design dos EUA na Costa Oeste Pensei que ia encontrar o segredo l mas que nada Igualzinho que nem que n is Me senti em casa S faltou ver algu m lendo sobre o campeonato brasileiro na p gina de esportes At a t o propalada meia quadra de basquete presente nos escrit rios mais cool agora tem em qualquer lugar Por que ent o meu Deus por qu Eu me perguntava s vezes eu via v rios designers com computadores piores do que tinham os redatores das ag ncias em que trabalhei mas o que sa a da impressora era o melhor design que eu j tinha visto Ignorante deslumbrado vendido americanizado amigo da garotada podem me chamar do que quiser mas n o tem compara o A explica o me veio lendo as 150 p ginas de artigos sobre hist ria do design que fui obrigado a ler e resumir Se ao menos os profissionais brasileiros gastassem tant
115. em restos de fax em jornal velho Outra caracter stica admir vel das pessoas que dizemos ter talento est no processo com que elas realizam suas obras primeiro recolhem as mat rias primas e as combinam trabalhando cada elemento para faz lo se destacar e ao mesmo tempo se harmonizar no conjunto Quase toda grandeza conquistada com a seriedade de um sapateiro que primeiro aprende a montar as partes para construir um todo Isso toma tempo requer experi ncia e constru do com o cuidado em cada detalhe s assim que se faz n o tem outra receita Infelizmente a maioria das pessoas n o come a pelas partes mas pelo todo e o quer pronto sem disposi o ou esfor o Essa cultura fast food f cil de se identificar est em gente que larga academias ou cursos de instrumentos musicais desiste de escolas de l nguas e acredita em emagrecimento milagroso Impression veis n o percebem que a busca por um resultado sem aten o na dedica o e detalhe s gera frustra o e ang stia Pra piorar a tal sorte de principiante s atrapalha pois falta aos espertinhos que acertam no primeiro lance e se julgam geniais a dedica o o que gera ainda mais insatisfa o a m dio prazo Talento ou jeito para a coisa importante mas n o justifica a pregui a f cil dar receitas de design e de como se tornar um bom designer mas a sua realiza o implica em dedica o estudo pesquisa e outras qualidades que igno
116. ementos que perten am a um mesmo grupo devem estar pr ximos II Equil brio propor o e simetria todos os componentes devem ser complementares HI Contraste cores e brancos layouts din micos chamam a aten o e causam impacto IV Ordem consist ncia e repeti o voc tem toda a liberdade para criar as regras mas deve segui las V Simplifica o simplicidade sin nimo de eleg ncia objetividade e acima de tudo clareza VI Legibilidade textos existem para serem lidos VIL Integra o o design n o pode desafinar 1 Proximidade e alinhamento Em um supermercado os sacos de arroz ficam juntos Em um arm rio as meias ficam juntas Em uma estante os livros ficam juntos Em uma geladeira os ovos ficam juntos Em uma academia de gin stica os aparelhos ficam juntos Em uma fazenda os cavalos ficam juntos Em um bar as cervejas ficam juntas Em uma festa um casal fica junto Claro Essa a primeira regra elementos que t m algo em comum devem estar juntos no layout ou seja alinhados e agrupados para que o leitor os reconhe a como um grupo Quando as coisas que pertencem a um mesmo grupo est o espalhadas a impress o de uma bagun a Aplique isso aos exemplos acima e tire suas pr prias conclus es Juntos um termo muito gen rico e pode significar um monte de coisas Em um nibus lotado muitas pessoas est o juntas e isso n o necessariamente um sin nimo de organiza o A id ia dessa re
117. empre um grupo de textos sua concatena o e seus pontos de liga o s o fundamentais Existem roteiros lineares Sua estrutura tem uma seqii ncia obrigat ria Esse tipo de estrutura o 39 6G costuma ter setas para avan ar voltar ou ir para a home page que est mais para um ndice que para uma tela de entrada Um degrau acima est o os roteiros hier rquicos que parecem organogramas O visitante empurrado para n veis hier rquicos cada vez mais espec ficos at chegar a uma informa o desejada como se fazia nos bancos de dados antigos Para consultar uma p gina relacionada necess rio fazer o caminho de volta por v rias telas Eles s o parecidos com os antigos livros de geografia da s tima s rie em que o clima da regi o Sudeste e o da Centro oeste est o separados por 4 meses e mais de 30 p ginas apesar de serem similares e inter relacionados Essa estrutura o costuma ter em cada tela bot es de volta e home page Existem roteiros conectados que respeitam a forma de pensar do visitante e aglutinam a informa o por similaridade Assim algu m interessado em marketing pode saber tamb m um pouco sobre cria o mesmo que nunca procurasse por esse tipo de informa o Esses roteiros costumam fazer um uso inteligente dos links e estruturas de hipertexto Nos roteiros verdadeiramente interativos a participa o de um internauta n o s por e mail e n o passiva A organ
118. endo que os melhores tempos da nossa vida nos s o proporcionados pela espera mas que ela nos d pausa em uma correria estimula a reflex o e nos faz aproveitar melhor as coisas incontest vel Ou existe coisa pior que viver de fast food Quantas vezes voc n o viveu um momento que queria que n o acabasse nunca Deitado debaixo de uma rvore com algu m olhando o c u o contato entre as pessoas toma tempo e nesse tempo n o s informa o pura e simples que se troca Demoras e pausas s o imprevis veis no mundo de troca de informa o S o o tempo no qual a vida acontece e em que se trocam outras experi ncias sensoriais afetivas sinest sicas prazeirosas intang veis e enriquecedoras Cada cultura tem sua pr pria percep o do tempo e seu significado Para os chineses especialmente para os velhos chineses o tempo presente tem uma dimens o rid cula desimportante que s um pa s com mais de cinco mil anos de hist ria pode oferecer Talvez isso fa a dos americanos povos mais hist ricos e ansiosos que os europeus Talvez n o O que importa que nossas vidas s o marcadas tanto pela velocidade quanto pela lentid o O tempo inquestionavelmente nosso mais rico recurso e o que mais sofre risco de extin o No dia a dia das grandes cidades vemos barbaridades cometidas no tr nsito em nome de uma ansiedade o desespero das pessoas com os telefones celulares que n o funcionam a irrita o que surge
119. enhum Jo o Gilberto inventou nenhuma Bossa Nova digital temos tamb m contra n s o fato de nenhum Jo o Gilberto ter inventado nenhuma bossa nova digital e termos que ficar confinados a nossos escassos recursos como homens das cavernas esperando a descoberta do fogo E quando o fogo digital for descoberto saberemos reconhec lo Por desconhecimento e falta de exemplos n o h na internet a riqueza visual nem mesmo de um videoclip ou um videogame Por mais que geninhos talentosos venham a encher nossa paci ncia com suas pira es tecno flash todo mundo precisa de refer ncia e a pr pria web nova demais e livre demais para s la Por isso n o adianta procurar na internet as influ ncias gr ficas que possam servir de refer ncia para o seu trabalho pois elas simplesmente n o est o l Picasso j dizia que antes de se desenhar abstra es preciso saber desenhar e muito bem o cl ssico Mimados pelo excesso de liberdades olhamos para as p ginas em branco da web e n o sabemos o que fazer Invocamos nossos bookmarks e neles n o encontramos inspira o a resposta simplesmente n o est por l Da por pressa pregui a ou simplesmente por falta de refer ncias criamos as coisas como todas as outras coisas s o criadas c pias das c pias das c pias dos primeiros sites feitos por quem entendia de HTML mas n o sabia nada de design ou comunica o e da vem todo o blablabl que voc j est careca
120. ente sua efici ncia Ele ainda n o tem autoriza o para identificar se voc est vendo aquele site porn ou mesmo para identificar o e mail de quem o visita essas informa es s o sigilosas e responsabilidade do provedor de acessos que elas continuem assim At porque para quem pretende vender um produto ou servi o n o vale a pena levantar um monte de informa es individuais mas sim tend ncias de grupos sociais Se por exemplo um site mais acessado noite vale a pena concentrar suas promo es e a aten o para poss veis sobrecargas em seu tr fego nesse per odo Esses programas de auditoria de visita o s o normalmente instalados nos servidores e funcionam transparentes s o completamente invis veis para o usu rio final Cookies Essa tecnologia de bastidores n o tem nada a ver com aqueles sites que como a Amazon com o reconhecem a cada nova visita Nesse caso o que normalmente ocorre a grava o de um cookie um inofensivo arquivo de texto em uma rea bem espec fica do seu browser Cada vez que um site desse tipo visitado ele l o arquivo de cookies e mistura essa informa o com o que tem armazenado em seu banco de dados Eles s o bastante pr ticos pois personalizam boa parte dos produtos e servi os Mas se voc sentir que sua privacidade violada por eles e n o quiser que isso aconte a basta entrar nas op es de seguran a de seu browser e desabilitar a op o de receb
121. entos HTML se adaptam ao tamanho da janela em que est o dispostos Esse processo din mico facilita a leitura mas costuma destruir muitos layouts Um recurso importante para garantir um m nimo de ordem o uso de tabelas dividindo a rea em um mosaico cujas c lulas podem ser agrupadas alinhadas ou ajustadas Como framesets elas podem ter o tamanho determinado em pixels ou percentuais Elementos nas c lulas de uma tabela t m dimens es e alinhamento fixos e n o se acomodam ao tamanho da p gina web Se isso pode prejudicar a leitura o visitante pode precisar usar as barras de rolagem para ter acesso a todo o conte do em compensa o garante a posi o dos textos e imagens em um layout e pode gerar p ginas imensas doideiras do tipo 6000x6000 pixels rea til e Scroll Bars Ao contr rio do papel que tem um tamanho fixo e identific vel de p gina a comunica o digital n o se restringe s limita es f sicas do monitor As scroll bars aquelas barras de deslocamento que ficam nos cantos da tela permitem que nos livremos das dimens es fixas transformando o monitor em um buraco de fechadura Atrav s desse visor podemos monitorar os documentos digitais seja qual for o tamanho deles Ele pode se aproximar da p gina zoom in afastar se dela zoom out ou deslocar se por ela atrav s das barras de rolamento Assim podemos trabalhar com documentos de v rios tamanhos e formatos manipulando e descobrindo a i
122. erce ou venda de produtos e servi os menores custos no atendimento ao consumidor suporte aos esfor os de propaganda e marketing Essas vantagens devem compensar o esfor o e investimento para a constru o de um site eficiente e atualizado os custos de propaganda para a divulga o da sua exist ncia e o treinamento de funcion rios Ou seja entrar na web um processo que envolve a empresa inteira Ele deve ser crescente e cont nuo Por isso esque a essa hist ria de atualizado em 1 4 97 pois um website n o estanque est tico limitado N o existe primeira edi o ou nada parecido Ele deve ser avaliado frequentemente reestruturado constantemente e modificado sempre que poss vel assim que funcionam as empresas assim que evoluem as pessoas isso que se quis dizer ao se definir a internet como algo gil e pulsante Acima de tudo importante saber se o poss vel consumidor usu rio da internet e em caso positivo que servi os ele procura l Um endere o digital bem feito e divulgado pela m dia pode servir como Fonte de informa o As pessoas acessam a internet em busca de informa o Um site o melhor lugar para colocar um cat logo de produtos e servi os Canal institucional Outro uso excelente para a rede o de rela es p blicas Ao contr rio da maioria dos ve culos de comunica o um site pode divulgar uma s rie de informa es institucionais sem chatear o leitor O e
123. erifadas ou sem serifa Em uma defini o resumida serifa a haste perpendicular que termina os principais tra os de algumas letras Esta letra N Times New Roman Bodoni tem serifa esta n Frutiger Helvetica n o Esse recurso facilita a leitura de textos impressos pois ajuda a aglutinar as letras em palavras No design gr fico quase obrigat rio o uso de letras com serifa para textos longos como jornais revistas e livros J para a cria o digital devemos restringir o uso deste tipo de letra a t tulos ou aplica es em tamanhos grandes pois na baixa defini o dos monitores as serifas s o elementos a mais para dificultar o reconhecimento de cada letra e conseq ente legibilidade Um texto fala Uma coisa bvia em que poucos pensam um texto escrito a transcri o de uma fala por mais t cnica que seja Ao escrever um texto imagine se ou imagine a personagem que voc est criando falando o Qualquer mudan a na sua estrutura reflete uma altera o do ritmo ou volume em que as palavras s o lidas Assim um texto em negrito chama a aten o para uma palavra em uma frase como se ela fosse falada mais alto Bold seu equivalente em ingl s quer dizer algo como gord o impertinente proeminente dois amigos bem gordos fundaram em uma poca o EXTRABOLD DESIGN O Negrito retarda a leitura e faz com que as palavras se destaquem por isso deve ser usado com cuidado Ele funciona como uma esp cie de afirma o e
124. erigosos e n o andavam a mais de 60 km h partos e visitas ao dentista eram realmente dolorosos e podiam custar a vida Isso sem contar espartilhos sabonetes fedorentos maquiagens pegajosas e l minas de barbear que realmente cortavam Ou sem comodidades m nimas como cuecas ou absorventes internos z peres lycra velcro teflon Cujo nico meio de transporte para a Europa era o tedioso navio cheio de pulgas ratos baratas escorbuto e tuberculose sem ar condicionado e cuja viagem demorava s culos Tsk tsk tsk sempre bom lembrar que sushi e caf expresso eram excentricidades de imigrantes h apenas 20 anos uma poca de libera o sexual mas sem o Viagra que todos cedo ou tarde aben oaremos Se pretendemos sobreviver e explorar as maravilhas de uma era digital que se avizinha precisamos aprender a pensar digitalmente a usar as m quinas online como verdadeiras extens es do nosso pensamento sem amaldi oar nossas ferramentas de trabalho At porque lutar por um estado buc lico n o uma op o A melhor forma buscar na tecnologia formas de resgatar nosso esp rito humano nossas caracter sticas independentes e primitivas das quais muitas vezes nos envergonhamos virtudes como f esperan a caridade emo es como paix es e dio al m claro dos sete pecados capitais isso que nos conecta aos tempos de Shakespeare n o uma roupa de algod o cru Fala se que a internet separa as pessoas verdade Mas e
125. ero menor de cores Esses n meros esquisitos para definir a quantidade de cores 64 256 16 milh es s o assim porque um sistema digital armazena a informa o em caixinhas que s admitem dois estados poss veis ligado desligado Essas caixinhas s o chamadas de d gitos bin rios Binary Digits ou Bits Assim de acordo com seu n mero temos o n mero de cores Assim uma imagem com 128 cores pesa oito vezes mais que uma do mesmo tamanho com 16 cores O mesmo vale para imagens com quantidades de cores intermedi rias tr s cores ocupam 2 bits por pixel 50 cores ocupam o mesmo espa o que 64 E n o preciso dizer que uma imagem com 33 cores ocupa duas vezes mais espa o que o equivalente com 32 cores Pra piorar Macs e PCs n o compartilham as mesmas 256 cores 40 delas s o completamente diferentes por isso sempre bom checar a imagem nesses dois sistemas ou usar um padr o web safe com o m ximo de 216 cores Mas n o se preocupe a maioria dos programas de manipula o de imagens permite controlar o n mero de cores e selecionar um padr o compat vel com todas as plataformas Nossos olhos n o t m capacidade de diferenciar mais de duzentos tons diferentes de uma mesma cor Por isso uma imagem monocrom tica de 8 bits por pixel 256 cores nos parece uma fotografia em tom cont nuo Ao se combinar essa gama de tons das tr s cores b sicas da luz teremos 256 vermelhos x 256 verdes x 256 azuis 16 777 256 c
126. es p ginas brancas s organizada por ordem alfab tica Uma lista classificada p ginas amarelas pode ser organizada por local cidade bairro ou regi o depois por categoria de servi o com todas as categorias listadas em ordem alfab tica e dentro de cada uma delas os profissionais e empresas tamb m organizados por ordem alfab ticas Por toda parte assim outro exemplo s o os cat logos de carros usados divididos por categoria fabricante tamb m uma categoria tempo de uso e pre o hierarquia Supermercados organizam seus itens por categoria farm cias empilham seus rem dios em ordem alfab tica pessoas s o atendidas nos restaurantes por ordem de chegada e assim por diante A escolha do crit rio de organiza o fundamental J imaginou usar troc los Pense nos sites que est fazendo Quais s o os grupos de informa o envolvidos Como eles podem ser organizados s vezes na escolha do crit rio de organiza o est a solu o criativa que far com que o site se destaque De qualquer forma os dados devem estar organizados por relev ncia ou seja por terem algum ponto em comum e poderem ser interligados experi ncia do leitor O processo de Arquitetura de Informa o Por determinar os roteiros que o usu rio poder percorrer dentro de um site e sua rela o com o sistema a Arquitetura de Informa o tamb m chamada de Design de Interatividade Existem v rios processos para se planejar a arq
127. esa coloca um classificado no jornal chamando pessoas e n o se identificando Essas pessoas mandam seus resum s para uma caixa postal qualquer Da s o avaliadas por headhunters e consultores e se valer a pena chamadas para uma entrevista com uma psic loga e talvez alguma pessoa da empresa Bacana Deve at funcionar Para design e profiss es art sticas funciona exatamente ao contr rio o diretor de cria o ou equivalente d sinal verde para uma contrata o e avisa a faixa salarial A partir da os profissionais da empresa saem perguntando e procurando criativos de destaque que estiverem fazendo algum sucesso em outras ag ncias ou at em outras reas interligadas como ateliers de artistas pl sticos produtoras de v deo e escrit rios de arquitetura A not cia corre no boca a boca e os candidatos come am a se apresentar ligam para a empresa e marcam entrevistas para mostrar seus portf lios tamb m chamados de pastas a algum profissional da cria o Este os analisa d algumas dicas e se valer a pena o indica para o diretor de cria o que quem vai decidir todo o processo Normalmente n o importa onde e por quanto tempo o profissional trabalhou o que vale a pasta bons trabalhos id ias legais produtos inteligentes Pr mios s o acess rios se o profissional tiver ganho algum n o precisa dizer o outro saber bvio que quem nunca passou por um est dio ou ag ncia grande teve menos oportunidades de
128. esse processo O problema que as pessoas est o trabalhando em reas cada vez mais espec ficas o que se por um lado aumenta o foco e t cnica por outro faz com que percam a id ia geral do que est o fazendo Da fazerem partes que podem at ser legais mas que n o combinam no todo Um mesmo molho n o pode ser usado para linguado codorna e coelho O design especialmente o design digital serve para criar um ambiente para a informa o e torn la consistente Por isso cada pequeno elemento tem que ter um porqu N o adianta colocar um grafismo em cada canto da tela s para estar l Em uma situa o ideal todos os textos fotos ilustra es e layout acontecem a partir de uma mesma id ia O problema que acontece exatamente o contr rio muitas vezes o design uma usina de reciclagem de m dia reaproveitando tudo o que j est pronto e fazendo concess es ao conceito para adaptar o layout Muitas empresas consideram a WWW uma vers o online do saco sem fundo e enfiam tudo o que podem nos seus sites do balan o anual a dicas de cinema na maior parte das vezes em informa es incompletas que nunca ver o uma atualiza o Outras empresas e muitos designers fazem para cada tela um layout diferente E ainda h os que preferem n o se arriscar e fazem tudo sempre igual A internet nova e muitas de suas regras ainda est o por serem descobertas mas isso n o significa que seja a casa da M e Joana mu
129. estar conscientes de que eles nem sempre seguir o nossos conselhos Existem quatro tipos de rela o entre o texto e a imagem Redundante os mesmos elementos s o reproduzidos visual e verbalmente repetindo as id ias principais e contando a mesma hist ria Nesses casos ler o texto ou ver a imagem traz exatamente a mesma informa o Complementar texto e imagem apresentam conte dos diferentes E preciso ver os dois modos para que se entendam as id ias principais Cen rio um dos elementos define um cen rio ou ambiente e conta a situa o O segundo conta uma hist ria dentro desse ambiente Suplementar os conte dos de texto e imagem s o diferentes Um modo domina mandando as id ias principais enquanto o outro refor a elabora ou as explica Ao se combinar os elementos sempre bom levar em conta que o usu rio n o est nem ligando para qual dos dois o mais importante ele procura por informa o e ela deve ser refor ada Para isso bom conectar o texto imagem relacionando os atrav s de legendas e ndices auxiliando o leitor a entender o que est se passando Se o conceito for mais dif cil bom refor lo com redund ncia detalhando a imagem ou repetindo a informa o no texto 2 Preparando o terreno Voc certamente j viu crian as brincando de fotografia ou cinema Lembre se como elas fazem pequenas molduras com as m os para enquadrar as cenas Na realidade elas n o est o reu
130. exist ncia de mais um canal de comunica o para artistas em sites que nunca seriam vi veis comercialmente outros est o aproveitando o canal para um exibicionismo sem par metros A quest o uma s h algo a dizer Se n o houver ou se n o conseguir atualiz lo n o o diga At porque a tal democracia virtual limitada Pois se f cil conseguir um espa o em um provedor de acessos est cada dia mais dif cil pagar os custos de bons redatores fot grafos designers e programadores para se produzir um conte do decente Ali s a est tica desses sites um cap tulo parte Sem a menor no o de princ pios de design e navegabilidade mais fascinados pelas possibilidades que a tecnologia oferece que conscientes das necessidades de comunica o muitos autores de sites pessoais agem como adolescentes em rod zios de pizza tentando consumir o m ximo Isso cria na cabe a de muitos a necessidade de algo piscando e pulando na tela para um site de sucesso a est tica dos sem no o que seria at c mica como o a est tica das videocassetadas se todo mundo tivesse opini o formada a respeito do que bom e do que ruim na internet como acontece com a televis o mas muita gente n o v diferen a entre o ing nuo e o profissional E se quem aprova o website tamb m n o entender de design ou comunica o a situa o s pode piorar Com tecnologias tipo Flash Cascading Style Sheets QuickTime
131. ez por todas que n o d pra fazer frameset em Flash 12 Comunica o n o linear se que ela existe Apesar do muito que se fala de comunica o digital e de como ela n o respeita as tradicionais estruturas lineares e dimensionais n o existe comunica o n o linear Mesmo que os est mulos sejam os mais variados poss veis e a percep o do leitor seja extraordin ria a multiplica o das mensagens e possibilidades de conex o gera uma comunica o que permite v rios caminhos poss veis mas nunca dois ao mesmo tempo pois quando visualizamos um texto fora de sequ ncia imaginamos imediatamente outro corrigido em sequ ncia Isso fundamental para quem pretende criar conte do em hipertexto O que chamam de comunica o n o linear portanto pode ser melhor descrito como uma forma de express o que permite v rias segii ncias poss veis todas lineares multilinear ou comunica o multidimensional organizada em camadas como p ginas de texto impressas em papel transparente que oferecessem ao leitor v rios textos Ele n o precisa come ar em um ponto espec fico nem ter final certo que deve come ar em algum lugar mas a home page n o obrigat ria N o h a necessidade de uma seqii ncia nem da divis o do conte do em departamentos fixos e estanques muito pelo contr rio A hierarquia pode ser m vel alterando conforme o interesse do visitante Al m disso as telas podem ter ordem aleat ria Um
132. feitas em HTML como bancos de dados formul rios p ginas de texto simples ou din mico at por n o acreditar que a web se resuma a isso Por m se o importante for a anima o din mica e cen rios que se alteram com o tempo ou movimentos do mouse poderemos jogar o visitante em superf cies imprevis veis no melhor estilo videogame Fazendo assim estamos devolvendo web sua caracter stica explorat ria t o comum no in cio e que estimulava as pessoas a surfarem para que descobrissem coisas novas N o se pode esquecer que design ruim se faz em qualquer coisa Flash inclusive mas se o uso de Flash limita seus usu rios por obrig los a instalar um programa pelo menos n o obriga os designers a fazerem malabarismos de programa o al m de estimul los a fazer anima es de grande porte Al m disso se bem planejado um site em Flash n o faz restri es a tamanhos de monitor ou de janela o que pode ser mais limitante para o usu rio O que mais me fascina no Flash n o a sua capacidade de trabalhar com imagens vetoriais ou com toda e qualquer fam lia de letra PostScript que se tenha em uma m quina meu fasc nio da mesma forma que meu fasc nio pelo hipertexto est na revolu o e democratiza o que uma coisinha dessas faz na linguagem da internet deixando a ainda mais pr xima da vida real Como a televis o e ao contr rio do HTML o Flash traz para a internet a dimens o de tempo fazendo com que
133. fissionais liberais ADM BR Administradores ADV BR Advogados ARQ BR Arquitetos ATO BR Atores BIO BR Bi logos BMD BR Biom dicos CIM BR Corretores CNG BR Cen grafos CNT BR Contadores ECN BR Economistas ENG BR Engenheiros ETI BR Especialista em Tecnologia da Informa o FND BR Fonoaudi logos FOT BR Fot grafos FST BR Fisioterapeutas GGF BR Ge grafos JOR BR Jornalistas LEL BR Leiloeiros MAT BR Matem ticos e Estat sticos MED BR M dicos MUS BR M sicos NOT BR Not rios NTR BR Nutricionistas ODO BR Dentistas PPG BR Publicit rios e profissionais de prop mkt PRO BR Professores PSC BR Psic logos QSL BR Radioamadores SLG BR Soci logos TRD BR Tradutores VET BR Veterin rios ZLG BR Zo logos O c digo de pa s dos Estados Unidos US mas muito pouco usado A maioria dos sites registrados por l n o leva a termina o de pa s s o os famosos pontocom Dos outros pa ses vale guardar AR Argentina CA Canad DE Alemanha ES Espanha FR Fran a IT It lia JP Jap o KR Cor ia e PT Portugal E os dom nios em CN China devem emplacar em pouco tempo Por cultura in til saiba que o Afeganist o AF a B snia BA o Nepal NP e o continente Ant rtico AQ se que h algo por l BH n o mineiro ET infelizmente neste planeta MR fica bem longe de MS PF muito mais chique que um prato feito eu infelizmente n o estou em TO mas f
134. forma a internet e a comunica o digital s v o valer a pena se puderem proporcionar estruturas inovadoras e diferentes imposs veis de se criar em outras m dias S a poderemos dizer que estamos descobrindo sua verdadeira linguagem At l estaremos com m micas pobres apesar de bonitinhas Com a internet nunca foi t o f cil mudar de canal ou desistir da leitura no meio Fazer design para a WWW n o f cil porque cada tela pode se comportar de uma forma diferente s o browsers computadores sistemas operacionais cores letras tamanhos de monitor etc N o h como desenhar documentos que fiquem iguais em todos os sistemas a n o ser que se nivele por baixo Por isso muito importante saber o que o meio comporta e o que n o comporta Toda linguagem tem sua sintaxe que o conjunto de regras que a estrutura e sua po tica que s o id ias criativas elaboradas a partir dessas regras Se n o conhecemos a sintaxe s poderemos elaborar po ticas por acaso ou sorte e n o d para contar com isso todos os dias O design gr fico tem v rias regras organiza o do material em p ginas ndice t tulos etc N o seria fascinante e desafiador se de repente todas as regras de design e todo o design como o conhecemos desaparecesse Se o papel e a rela o do design com o leitor fossem completamente reinventados Assustador Pois Eis o desafio do design digital Para imaginar suas possibilidades imagine uma revista diferen
135. go havia se perdido no meio do caminho Acho que era o que chamavam de alma A desencanei Deixei minhas s cias nessa poca j ramos tr s donos com a Hiperm dia e remontei a Kropki com uma estrutura menor mas organizada eficiente e consciente Atr s da casa tinha umas redes para a galera descansar depois do almo o e na frente um gramado para deitar em um dia de sol do inverno enquanto discutimos um briefing Sa da Kropki h tr s anos entregando a para dois amigos e de l j trabalhei em Nova York Londres e em grandes ag ncias de propaganda de S o Paulo Para todos os lugares que vou levo comigo o esp rito dos primeiros dias do meu est dio montando equipes unidas amigas e divertidas em que todos principalmente eu s o apaixonados pelo que fazem Quando olho para tr s percebo que fiz a coisa certa Em muitos momentos o jeito foi errado mas a coisa era certa E isso que me deixa t o feliz Nessas horas desligo o celular e saio sorrateiramente para dar uma volta no quarteir o assim ningu m me pergunta o motivo daquele sorriso besta no canto da boca 10 2 Seu portf lio e promo o como tornar as suas pe as conhecidas Um curriculum vitae pode ser bom para avaliar a trajet ria e compet ncia de profissionais cujas habilidades n o s o diretamente palp veis como diretores de marketing nutricionistas psic logos e gerentes de RH O processo de sele o razoavelmente simples a empr
136. gra aplicar um dos princ pios da Gestalt n s reconhecemos e agrupamos elementos que estiverem pr ximos uns dos outros Isso n o significa uma camisa de for a tradicional mas um m nimo de coer ncia pois ao agruparmos os elementos os relacionamos e damos sentido a eles Uma das caracter sticas do design de quem est come ando na rea a grande quantidade de elementos que parecem estar soltos jogados em algum lugar na p gina ou tela sem nenhuma rela o com as margens ou mesmo com os outros elementos de texto Isso costuma dar um enorme trabalho e desconforto ao leitor que fica tentando procurar os elementos em comum Esse esfor o todo faz com que ele n o goste ou desista do layout mesmo que n o saiba explicar o porqu J um layout que tenha seus elementos alinhados permite que se possa ver os espa os em branco e agrup los isol los ou continu los E o leitor passa a ter para identificar na tela dois ou tr s grupos e n o mais uma por o de pequenos elementos isolados O agrupamento tamb m estabelece uma rela o entre os elementos nos grupos e entre os grupos mostrando sua hierarquia e sugerindo uma ordem de leitura Isso facilita o acesso informa o e faz com que seu leitor se sinta mais confort vel transmitindo melhor a mensagem um processo instintivo e n o significa colocar cada elemento num canto da tela muito pelo contr rio Al m de agrupados os elementos devem estar alinhados e esse a
137. ial derivado do que recebe Por isso necess rio entupi lo com est mulos informa o Para idosos que adoram TV os m dicos recomendam palavras cruzadas Para qu Para evitar um derrame mantendo o c rebro ativo Com o tempo o m sculo cerebral endurece e o exerc cio fica ainda mais dif cil gerando desconforto e dores pode acreditar E a um malabarismo mental equivalente a fazer cinco abdominais vira uma tarefa herc lea Para alguns isso acontece antes dos 20 anos uma pena Seguindo o mesmo racioc nio existe uma enorme diferen a entre o seu tio que dan a bem e um Nijinsky entre aquele cunhado que adora um viol o e um Paco de Lucia entre todos n s e um Picasso ou um Leonardo E onde est essa diferen a Para come ar no talento n o tem jeito Mas tamb m em uma obstina o cega e muita muita pr tica N o estou dizendo que com exerc cios nos tornemos Matisses ou Gauguins mas que sem desafiar a verve criativa a cada instante o que temos de talento desperdi ado Aquele tio que dan a bem se tivesse se dedicado em tempo integral dan a desde os 18 anos poderia ser um core grafo como o Antonio Gades por que n o Imaginem o Gilberto Gil aposentado como gerente de produto da Gessy Lever quanto desperd cio Por isso se voc adora comer pipocas na frente da TV n o largue a pipoca largue a TV V passear leia uma revista ou mesmo converse com o pipoqueiro um enorme exerc cio e requer muito mais f
138. identes de tr nsito etc Precisar de tudo isso n o precisava tanto eu como voc somos capazes de nos expressar em um portugu s mais culto e elaborado com constru es subordinativas Mas isso faria com que sua velocidade de leitura baixasse e talvez voc nem chegasse at aqui Ent o pra qu Na realidade as pessoas s o simples Muito simples E gostam de coisas simples emo o divers o companhia alegria e sobretudo informa o As pe as de Shakespeare s o imortais por serem simples e tratarem de temas muito simples trai o paix o inveja dio Elas poderiam ser entendidas por qualquer um desde que encenadas e traduzidas para o portugu s cotidiano Mas dizer que as pessoas s o simples n o quer dizer que sejam simpl rias Ou burras Elas n o precisam de ningu m para educ las nem para dizerem onde clicarem Mesmo que precisem certamente n o ser voc Nem eu Muita gente mais rica culta e inteligente que n s n o faz a menor id ia da forma de um j em Stone Serif nem as dificuldades para se escrever um javascript e vive muito bem sem isso Pense nisso E adapte seu design a seu p blico n o tente fazer o contr rio O resultado poder ser gratificante 9 Equipe Quantas pessoas s o necess rias para uma produ o de material digital Nos Estados Unidos h equipes de 60 profissionais para um nico projeto No Brasil tr s pessoas cuidam s vezes de 8 clientes Ponto para ambos por l eles
139. if cil que muitos adultos apresentem severas falhas de compreens o visual ou de m dia em geral Em uma era de comunica o visual crescente esse problema ainda mais grave Pessoas que n o leiam imagens a n o ser que saibam analis las question las e at resistir a elas s o quase analfabetas em uma linguagem que mais que qualquer outra tem tudo para ser verdadeiramente universal Se voc tem alguma d vida veja o disco que foi mandado com a sonda Viking para fora do sistema solar ele leva imagens com sauda es e sons de diversos pontos da Terra pois assume que s na fic o cient fica os ETs falavam ingl s Muitos de n s olham imagens para compreender melhor a informa o Um conceito complexo pode ser facilmente explicado em rabiscos feitos com uma caneta em um guardanapo de boteco ou em uma lousa muitos artigos ficam mais claros quando h tabelas ou explica es Isso acontece porque a palavra um conceito mais complicado que a imagem e o texto escrito mais dif cil ainda pois a imagem de uma palavra Para piorar o texto pode apresentar refer ncias estilos e constru es elaboradas est tica repeti o exemplos met foras que melhoram seu estilo mas atrapalham sua compreens o coisa que uma imagem n o tem Em resumo se a imagem pode ser at did tica o texto n o deve se dar esse luxo O designer deve perceber analisar compreender e propor Todos os sentidos tato audi o paladar
140. importante n o a estabilidade em si O ambiente pode e deve mudar medida em que os usu rios interajam mas eles devem ter um conjunto de pontos s lidos como refer ncia Testou Pois teste de novo Uma das partes mais importantes do processo de produ o de uma multim dia o teste se os links existem se as fotos carregam se as p ginas est o certas se o bot o verde leva para a imagem verde e assim por diante Esse processo pode ser exaustivo e no cansa o ou repeti o muitos erros cruciais podem escapar Os tr s tipos mais importantes de testes s o e Conte do testa se o conte do est correto e relacionado A revis o de textos entra aqui e Funcional testa se o produto funciona se suas imagens carregam se a ordem das p ginas est correta se os cones em todas as p ginas levam para os lugares certos se o som entra no momento esperado se o v deo funciona etc e Ambiental testa se o material funciona no computador do usu rio Analisa os v rios equipamentos nas mais diversas configura es browsers e plug ins O processo de testes minucioso e deve ser feito verificando cada pequeno detalhe Envolve a revis o dos principais t picos adapta o das m dias produzidas ao projeto gr fico e elabora o do material final Lembre se por mais cansado que esteja nunca deixe passar nenhum detalhe pois s o sempre esses erros os que aparecem no final quando a pressa e o cansa o j passa
141. in ria uma arte e demanda muita muita pr tica E um dos principais cuidados n o exagerar nos ingredientes Salvo em pratos como moquecas e feijoadas poucos componentes que fazem o sucesso Bons cozinheiros s o cozinheiros experientes que fazem com que at um bife com fritas daqueles bem martelados cujo suco molha o arroz soltinho contrastando com batatas fritas bem crocantes fique sensacional Ficou com fome Eu tamb m lembrei da minha av Pois esque a a fome e compare esse bife com o design O designer um harmonizador de elementos por isso deve se comportar como um maestro ou um cozinheiro Pode ser dif cil avaliar o design e separar o bom do ruim e gosto n o se discute Mas existem algumas regras que se n o s o completas pelo menos d o uma for a Funcionam como um livro de receitas d o refer ncias Se forem seguidas risca dar o resultados eficientes e comportados Se forem seguidas com inven o podem dar maravilhas ou cat strofes Quanto maior for a pr tica menos cat strofes acontecer o O computador ajudou a criar m sica e design sem a pr tica e o resultado n o dos mais animadores espero n o ver o dia em que s for considerado bom cozinheiro aquele que operar bem o computador Em uma sociedade informatizada todas as pessoas ganham a habilidade t cnica para tirar fotos escrever t tulos criar desenhos fazer layouts e escrever texto Livros como este s o escritos para encorajar
142. inhas sabemos como funciona J para a comunica o digital n o existem par metros refer ncias ou estruturas conhecidas Assim como n o h com perd o da m palavra paradigmas faz se de tudo e tudo lindo lindo lindo um desbunde Falar em qualidade seguramente mudar de assunto A entrada dos computadores nas comunica es causou tr s revolu es em um per odo de pouco mais de dez anos virando empresas de cabe a para baixo desempregando e abrindo espa o para novos profissionais Primeiro foi a desktop publishing ou editora o eletr nica que substituiu todo o processo de design gr fico que vinha sendo feito com poucas modifica es desde a inven o da tipografia m vel pelo velho Gutenberg Depois foi o v deo digital que substituiu as c maras de tubo e o processo de edi o usando fitas magn ticas e gera es Agora a internet que chega para deixar todo mundo confuso N o toa que ela provoque tantas rea es apaixonadas A chegada da internet na realidade tem muito pouco a ver com a inform tica e n o pode ser comparada com a transforma o causada pela entrada dos Macintoshes coloridos nos est dios em 1986 eu sei voc n o dessa poca mas saiba que livros inteiros como esse j foram feitos sem computador A editora o eletr nica e o v deo digital nada mais s o que meras extens es de um processo que todo mundo estava acostumado a fazer troca se a Letraset pelas fam
143. inhas surjam para mercados espec ficos Colaborativas ou participativas a marca passa a assumir a lideran a nas a es junto a seu p blico consumidor promovendo a es educativas comunit rias que ampliem a compreens o e a imagem de marca Nesse caso o papel da comunica o digital crucial Ela pode criar rela es personalizadas e consensuais Isso n o significa perguntar o nome do visitante e reproduzi lo nas p ginas de um endere o internet mas descobrir seus anseios e tentar realiz los medida que uma empresa escuta o consumidor informa e respeita seus valores estimulando o torna se cada vez mais f cil estabelecer uma rela o de confian a fidelidade e respeito O que torna um ve culo vi vel seja ele um CD ROM ou a xilogravura do Cordel de Dona Nen um patroc nio Para uma entidade ou empresa patrocinar um ve culo necess rio que ele d retorno ou seja atinja uma parcela significativa do p blico alvo e divulgue sua mensagem para pessoas antes desconhecidas Da esse contato gera dinheiro que financia mais ve culos e assim por diante Converg ncia das m dias Muito se fala na converg ncia das m dias uma esp cie de am lgama que combinaria r dio TV impressos internet etc gra as s tecnologias digitais Apesar do ar futurista essa situa o j acontece hoje em dia em v rios ambientes Veja os perfis profissionais no final do livro os especialistas est o cada vez mais multidisci
144. is Deve se dar acesso a qualquer informa o relevante e ligada p gina que se estiver vendo em um ou dois cliques Para o acesso a qualquer outra informa o tr s cliques o m ximo 8 4 Dire o de cria o projeto gr fico e linha de design Determinar o conceito criativo e o ambiente em que a comunica o ocorre fundamental para se fazer um site de sucesso Esse tal conceito o que vai estabelecer o jeit o do site estilo t nica texto interface o design enfim E como ach lo Usando o bom senso A primeira coisa a se pensar do que trata o site Do que voc est falando um produto tradicional inovador tecnol gico caro popular qual a dele Depois disso qual a vantagem real que ele traz para quem o est consultando Por ltimo o que ele tem que os outros n o t m Foi pensando assim e n o mostrando uma foto do produto e colocando uma s rie de bot es para clientes servi os caracter sticas t cnicas e revendas que se criaram embalagens e campanhas publicit rias geniais O conceito o mais importante Se ele est claro bem definido e transmite seguran a todos os outros elementos conte do arquitetura interface navega o se integram mais facilmente Sen o o design fica inconsistente e a mensagem se perde Designers n o nascem feitos sua forma o demorada e pouco formal O normal come ar como assistente de arte o primeiro degrau acima do estagi rio
145. is r pida e clara poss vel pois a qualquer vacilo ele est a um clique de outro website Para que a interface seja clara ela deve usar s mbolos f ceis de se entender Se n o der para fazer bons cones facilmente intelig veis n o force a met fora use texto E infal vel e voc sempre poder disp lo em uma fam lia de letras extravagante Uma interface deve sempre levar em conta Mobilidade O design digital combina elementos est ticos com anima es v deos letreiros e com a pr pria movimenta o que o usu rio faz de todos esses elementos Essa harmonia delicada os outros ve culos de comunica o s o inteiramente est ticos ou din micos e deve ser levada em conta na cria o de uma interface para que o resultado final n o incomode Navega o N o necess rio dizer ao leitor de um livro ou revista como navegar por ele o processo quase sempre o mesmo n o importa qual seja o t tulo e o leitor j est habituado a virar as p ginas No meio digital essa mamata n o existe por isso importante dar ao visitante uma orienta o em sua explora o do espa o virtual Conex o Liga es de hipertexto s o pontos de conex o com outros documentos e desvios na leitura linear de um texto Por isso sempre importante tomar cuidado com o destaque das liga es J que a cor formato ou elemento gr fico pode direcionar a aten o do leitor e indicar o sentido da liga o de hipertexto Icones e bot
146. ites curtos com promo es tamb m chamados de hot sites concentram a informa o em poucas telas para chamar a aten o do visitante sem desvi lo do curso original da sua leitura Equivalentes a promo es e campanhas de varejo e Educativos endere os digitais que visam transmitir muitas informa es para educar o p blico alvo Normalmente utilizados por institui es e associa es Equivalentes a newsletters e Comunidades grupos de discuss o sobre temas espec ficos formando espa os male veis controlados pelos pr prios usu rios Equivalentes a espa os comunit rios patrocinados 7 2 Publicidade de massa e internet A comunica o digital revira todos os conceitos que conhecemos de m dia e propaganda e por isso que se fala tanto nela A publicidade convencional foi estruturada para um mercado de m dia de massa falando para milh es de consumidores ao mesmo tempo Sob esses par metros n o d para se promover debate intera o nem participa o J as formas digitais de comunica o alteram a percep o do consumidor e sua toler ncia por isso necess ria uma adapta o da mensagem A internet n o um ve culo uma m dia Seus milh es de sites que s o ve culos n o an ncios Isso muito importante e acaba sendo o que faz a diferen a entre um site bem feito e outro s bonitinho O site da Bombril deve ser a revista da Bombril n o o an ncio engra adinho do Carlos Moreno O vi
147. ito pelo contr rio Por ser livre a web demanda fortes estruturas de rela es entre seus documentos e um projeto gr fico bastante r gido sem que isso fa a dela uma coisa careta No fundo s o os mesmos pontos que diferenciam uma revista de um amontoado de folhas coloridas de papel 1 8 Percep o um processo ativo Al m de se ver para se fazer design necess rio pensar no que se v S que a vis o e compreens o do ambiente n o s o processos simples muito menos passivos A maioria das pessoas acredita que quando vemos s absorvemos informa o N o t o simples assim Na verdade a vis o percep o e leitura s o processos din micos uma esp cie de di logo que envolve leitor e objeto Quando olhamos para uma paisagem layout tela ou p gina temos uma tend ncia natural e instintiva a organizarmos o que vemos Os v rios elementos que comp em o campo visual definem estruturas resolvem ambigiiidades e imp em conex es dizendo nos o que ler e em que ordem Muitos dos problemas que vemos em design acontecem porque o leitor quer ler a p gina de um jeito e o designer imp e outro Ou muda as regras de leitura o tempo todo A organiza o espacial de um texto pode ser usada para refor ar ou calar uma mensagem O uso de espa os em branco a organiza o do conte do em linhas e colunas a composi o de palavras e imagens podem ajudar a influenciar a forma com que se l um texto Ao se fazer um layout
148. ivamente a fazer um trabalho com muito tes o o que afinal o que nos mant m vivos n o um cargo de criativo em um departamento hom nimo 9 2 Incuba o e novos produtos Qualquer um capaz de ter boas id ias para um website Transform las em neg cio lucrativo entretanto coisa para bem poucos Isso apavora o investidor ainda mais se for estrangeiro Para canalizar recursos de grandes grupos de investimento em boas e vi veis id ias existem as incubadoras e aceleradoras de neg cios Elas analisam as oportunidades p blico mercado e eventuais anunciantes ajudando inventores a se tornarem empreendedores Segundo Indio Brasileiro Uma Aceleradora de Neg cios uma evolu o do conceito de incubadora uma empresa que acelera a viabiliza o de projetos com aplica es na rea pontocom Para isso avalia o plano de neg cios partes legal e fiscal equipe tecnologia posicionamento de marca e estrat gia comercial monitorando gastos e investimentos Uma empresa seja ela pontocom ou n o sempre deve ser criada para dar lucro Por isso se voc est montando seu site lembre se que empreendendorismo se faz com muito controle de custos inova o e incentivo gera o de demanda Afinal capital de risco n o capital de desperd cio Enumero 10 mandamentos essenciais para um plano de neg cios vencedor na Internet 1 Defina claramente qual o modelo de neg cio qual sua vis o e
149. ivro que estamos come ando a experimentar S o as novas formas de contar hist rias que podem transformar o hipertexto em uma experi ncia interessante Para mostrar como bom inovar em roteiro vamos ao cinema o que faz um Quentin Tarantino de t o legal assim Seus folhetins sangrentos com atores canastr es que usam palavr es como v rgula entre as palavras Certamente n o Isso passaria despercebido como mais um filme do Chuck Norris ou algo do g nero Mas ao picotar a hist ria e colocar o fim antes do meio ele mostrou que mesmo no cinema uma narrativa n o precisava ter aquela estrutura linear caretinha Ele n o foi o primeiro nem ser o mais importante s hoje o mais popular isso j era feito na nouvelle vague mas Resnais e Goddard s o muito chatos O que importante que essas inova es de roteiro respeitam as limita es do meio ningu m est falando em cinema com cheiro nem tridimensional nem 180 o bom e velho tel o no audit rio Imagine uma hist ria dessas que acontecem todos os dias como um caso amoroso ou um assassinato A estrutura simples sujeito vai l e d um tiro no mo o ou um beijo na mo a Finito Ou pode ser que o sujeito d um tiro no mo o por causa da mo a j melhor Ou o sujeito pode dar um beijo na mo a s pra matar o mo o e assim por diante Quem o sujeito Quem o mo o Quem a mo a Ela casada Com o mo o Ou com o sujeito Mas que baita confus o
150. iz que o sobrinho faz melhor por um d cimo do pre o que voc pede ele usa uma pizza semi pronta comprada no Carrefour O cliente pede todos os ingredientes do seu estoque pois acha que isso far a pizza mais atrativa Mesmo assim voc faz um bom trabalho mas ele reclama que n o tem garfo e faca em casa por isso n o consegue com la Muitas marcas est o sofrendo uma transforma o nos ltimos tempos de imagens est ticas s lidas e est veis propagadas pela m dia de massa elas est o se tornando cada vez mais ativas e participantes no dia a dia de seus consumidores e de suas comunidades E a comunica o digital assume um papel importante nesse processo Em um ambiente de multiplicidade a presen a que uma delas faz junto a seu p blico consumidor crucial para sua afirma o Em um mercado interativo ela deve conversar com o consumidor Por isso elas est o mudando de est ticas para interativas e depois para colaborativas Est ticas a marca por si s Sua for a um residual de seu hist rico e campanhas de m dia de massa Sua abrang ncia e longevidade s o limitadas Interativas a marca escuta seus consumidores atrav s de telefones de Atendimento ao Consumidor cartas e e mail e procura esclarecer d vidas tomar atitudes positivas e at aceitar sugest es para a altera o de seus produtos Esse constante feedback do mercado faz com que seus produtos estejam cada vez mais adequados ao p blico e que novas l
151. iza o das telas feita de forma din mica de acordo com o interesse do visitante Ainda mais interativos s o roteiros multidimensionais em que o visitante mergulha nos diversos n veis de um site que s o m veis e intercambi veis Em um site desses imposs vel medir seu n mero de p ginas ou estrutura que parece uma Mandala ou um cubo Rubik 6 5 Paisagens informativas Como apresentar o conhecimento de uma forma acess vel Existem muitas formas A tradicional criar uma narrativa em que a informa o se desdobra como em livros e palestras Ou sistemas espaciais sem uma segii ncia predeterminada como fotografias diagramas e mapas Outras formas s o ainda mais abrangentes como m todos conversacionais baseados em perguntas e respostas ou ainda atividades pr ticas workshops e simula es que permitem s pessoas a constru o de modelos e seu manuseio Para reunir esses meios de informa o em um ambiente digital desenvolveu se um conceito chamado paisagem informativa em que os dados est o dispon veis em v rias formas e estruturas Ao chegar a uma paisagem informativa o visitante pode escolher v rias op es de visualiza o seguir uma trilha linear vivendo a experi ncia passivamente do come o ao fim como se estivesse em um nibus Ou ter controle local como se estivesse dirigindo um autom vel Mapas podem mostrar uma vis o panor mica do territ rio e guias podem acompanhar o visitante em sua jorna
152. izado para visualizar fotografias 360 Dispon vel em http www ipix com download html Para instalar um plug in em um browser necess rio 1 baix lo fazer seu download se conectar ao fabricante e transferir o programa para sua m quina 2 desligar o browser 3 instalar o plug in em um diret rio espec fico e 4 em alguns casos reinicializar o computador Considerando o tempo levado para copiar e instalar o plug in e que esse tipo de programa for a o computador a usar mais mem ria podendo travar o sistema o usu rio n o o far a n o ser que todo o esfor o valha bastante a pena justific vel por exemplo a instala o de Shockwave para um fabricante de videogames mostrar demonstra es de seus jogos O mesmo vale para uma loja de CDs ou v deos que queira usar o plug in Real para mostrar trechos de clipes Mesmo nesses casos deve se levar em conta os usu rios que n o quiserem ou n o conseguirem instalar esse tipo de programa em sua m quina e dar a eles op es de acesso ao conte do do endere o digital O uso de plug ins controverso Se para alguns designers eles podem ser uma ferramenta de liberta o para o visitante em busca de informa o ele pode ser um calv rio a n o ser que seu uso seja fundamental para a transmiss o do conte do Infelizmente nem todos pensam assim Muitos endere os internet fazem uso de plug ins para mostrar que est o acompanhando as novas tecnologias e tornam a
153. la tamb m conecta mesmo que seja sem contato f sico Se n o fosse assim as salas de chat n o seriam t o populares No come o do s culo escrev amos cartas agora mandamos e mail ou ICQ e a mensagem de ambos n o t o diferente assim As hist rias de hoje como os seres humanos de hoje s o as mesmas de sempre e tratam daqueles que por mais que tenham se tornado Sapiens continuam sendo fundamentalmente Homo A que ponto teremos que chegar para que os personagens de Fellini a Guernica as m sicas de Cole Porter se tornem incompreens veis Certos est o os evolucionistas que dizem que nosso futuro n o est no que seremos ou vestiremos ou onde viveremos caracter sticas male veis mas sim no que pensamos Muita coisa muda em um ambiente digital e ao mesmo tempo nada muda s o as rela es humanas de sempre que agora s o automatizadas e ganham dimens es mundiais O sucesso da Amazon se deve quase que exclusivamente ao fato de ter sido uma das primeiras a perceber essa tend ncia e ao inv s de mimicar a concorr ncia resolveu se comportar como a livraria ou a mercearia da esquina trabalhando com sua freguesia reconhecendo seu local no mundial adivinhando seus anseios e fazendo sugest es no melhor estilo gostou deste Ent o leve este tamb m Da mesma forma que este texto que foi escrito na praia mais um exemplo da tecnologia usada como meio n o como fim N o assim que deveria ser As tias velh
154. le assim t o bom porque apavora quem est come ando Exatamente por falta de pr tica Como n o est o habituados com a estrutura n o conseguem conceber grids inovadores ou ocupar criativamente seus espa os e acabam se prendendo a uma camisa de for a estrutural Pura bobagem O processo correto deve ser examine os elementos a mostrar monte o grid encaixe os elementos Se n o se encaixarem sinal de que o grid n o funciona Nesses casos deve se redesenh lo Mas aten o s se faz um grid para todo o projeto gr fico de uma revista ou website N o existem documentos com um grid para cada p gina isso Calvinball O grid d apoio legibilidade reconhecimento alinhamento e compreens o da mensagem Se ele for bem feito vai garantir a repeti o os elementos ficam sempre nos locais esperados composi o facilita o equil brio dos elementos na interface e comunica o sua estrutura previs vel facilita a compreens o das diversas telas de uma interface Seu principal uso a unifica o do campo visual em uma mensagem consistente e harmoniosa Acima de tudo um grid deve se encaixar como uma luva ao layout e servir exclusivamente para ele e para nenhum outro S assim teremos certeza de que ele est adequado Grids muito gen ricos s o como folhas em branco s que com umas linhas para atrapalhar Grids muito detalhados s o como folhas de papel quadriculado igualmente in teis Refer ncias visuais O
155. lias de letras de computador o aer grafo pelo Photoshop e o resto continua igual J para a internet tudo muda ao fazermos cria o digital n o estamos aprendendo a falar outra l ngua estamos aprendendo outra forma de comunica o E a n o d para traduzir um texto em alem o para linguagem de surdo mudo At d mas o resultado pobre A internet n o ser a ltima revolu o pelo contr rio de agora em diante elas tendem a ser cada vez mais constantes e volumosas V m a a TV interativa o papel digital e a wireless broadband Depois disso nem o c u ser o limite 4 1 Design gr fico vs design digital berimbau n o gaita Pense em um videogame Mesmo que voc nunca tenha jogado fa a um esfor o Pense em um Super Mario que voc tem que subir e descer escadinhas etc N o se sabe qual o tamanho do pr dio ou quantas escadas existem para se percorrer simplesmente corre se tentando descobrir Imagine um Quake Doom ou qualquer outro do g nero Voc est l matando seus inimigos sem saber o porqu nem quantos vai ter que matar Tampouco sabe o ambiente em que est mas isso realmente o incomoda N o Na realidade voc n o precisa fazer a menor id ia do ambiente muito pelo contr rio Descobri lo explor lo analis lo o verdadeiro nome do jogo O que importa a eterna redescoberta e n o um mapinha pronto dando tudo mastigadinho tintim por tintim Como em uma conquista e rela o amorosa Ou em
156. linhamento deve ser consistente bom repeti lo em todas as p ginas sempre que o assunto ou a hierarquia de elementos texto bot o foto barra de conex o forem os mesmos Para romper com um alinhamento preciso consci ncia para calcular o impacto e coragem o novo alinhamento deve ser evidente e chamar a aten o Se for s um pouquinho d a impress o de descuido Sem alinhamento o que temos uma sensa o desconfort vel de quarto bagun ado 2 Equil brio propor o e simetria O que equil brio Dois pesos iguais em uma balan a est o equilibrados mas dois garotos com pesos diferentes tamb m podem estar equilibrados em uma gangorra desde que o mais leve esteja mais perto do centro Em uma aquarela japonesa uma imagem enorme e quase transparente est equilibrada com o carimbo assinatura de seu pintor normalmente uma forma quadrada vermelha e densa Simetria mais f cil de entender uma forma geom trica que apresenta dois lados iguais de um mesmo eixo como borboletas A maioria das culturas ocidentais influenciada pelos moldes de simetria e perfei o romanos em que se buscavam as formas ideais absolutamente sim tricas Essas formas podem ser bonitas mas s o est ticas e artificiais f cil criar e produzir um layout sim trico com todos os elementos centralizados ou duplicados do outro lado Mas esse tipo de layout n o chama a aten o normalmente mon tono e desinteressante fazendo
157. ltado previs vel Dia chegar em que as pessoas finalmente entender o que internet n o TV da mesma forma que TV n o r dio com imagens da mesma forma que cinema n o teatro filmado da mesma forma que videoclip n o aquela dublagem feita pelo cantor Pablo no quadro Qual a M sica do S lvio Santos A estaremos redimidos CD ROM n o CD RUM Nem CD ROOM DVD idem CD ROM abreviatura de Compact Disc Read Only Memory um documento armazenado na mem ria que s pode ser lido read only e que foi gravado em um CD Esse meio de armazenagem de dados tem a vantagem de n o ser magn tico por isso mais dif cil de ser apagado que um disquete comum tamb m maior nele cabem 670 MB de informa o aproximadamente 480 disquetes comuns Sua maior desvantagem est em seu pr prio nome uma vez gravado n o pode ser alterado Se algum dado estiver errado a nica solu o regravar todo o CD Em um primeiro exame o CD ROM parece bacana pois armazena todas as informa es no disquinho n o depende de tipos de browsers tamanhos de telas nem das fam lias de letras instaladas no computador do usu rio S que enfrenta todos os problemas dos meios f sicos como livros ou revistas prensagem distribui o desatualiza o etc Para piorar ele precisa de um aparelho especial para sua leitura o drive Em uma an lise mais fria essa tecnologia o pior de dois mundos Por enquanto ainda melhor que a inter
158. m da dificuldade de acesso informa o Parece loucura uma rede que foi feita para facilitar a comunica o pecando pela dificuldade de acesso informa o A maioria dos conte dos dos endere os digitais departamentalizada classificada em grupos com pouca mobilidade entre as se es subdividindo e especializando a informa o como em sistemas de inform tica Mesmo quando a interface divertida ou bonitinha a navega o peca ficando presa a uma camisa de for a estrutural triste de se ver Um site deve ser leve como dan a E n o estou falando s de imagens A estrutura o encadeamento o texto todo seu conte do deve ser transmitido de uma forma sedutora e persuasiva Mais do que isso sua estrutura deve passar despercebida para que o conte do e s ele apare a E isso n o nada f cil Antes de se fazer um website preciso planejar sua estrutura e mapa Isso se faz com l pis e papel imaginando as principais reas e suas conex es Todo site por menor que seja tem que ter um diagrama com tudo o que existe nele S assim d para conhec lo rapidamente e ter acesso a todas as informa es Muitos endere os substituem o mapa por um mecanismo de busca ou por um question rio Isso na maioria das vezes n o funciona E como entrar em uma loja de CDs e em vez de ver produtos expostos encontrar um funcion rio perguntando o que se quer comprar S o comuns os websites do tipo beco sem sa da
159. m dos melhores exemplos de interface gr fica a desktop base dos computadores Macintosh t o eficiente que depois serviu de modelo para o Windows e outros sistemas operacionais Ela mostra elementos que se parecem com objetos reais pastas disquetes e lata de lixo e introduz outros imagin rios mas bastante pr ticos janelas com documentos e textos Quando surgiu os pr prios engenheiros da Apple tomaram um susto ao ver que as pessoas gostavam de trabalhar com um Mac Isso porque a op o da poca o DOS n o tinha imagens e mostrava uma tela escura preta ou verde com um C _ esperando comandos em linguagem de programa o A Apple Desktop Interface um bom exemplo da abrang ncia que uma a o de design pode ter pois ela n o s mudou a cara dos computadores e programas como tamb m a rela o das pessoas com eles Desde 1984 a intera o baseada em comandos e no bin mio lembre se e digite vem sendo substitu da pela rela o de aponte e clique muito mais natural e eficiente Mas o que afinal uma interface Ela o ponto de contato entre um ser humano e uma m quina Se essa m quina for uma bicicleta ser o conjunto formado pelo seu banco guid o pedais e c mbio No que nos diz respeito a cara dos websites ou programas multim dia o int rprete entre um computador que entende de cliques do mouse e impulsos el tricos e seu usu rio o ambiente gr fico do produto digital o canal de comunica
160. ma nova era Pok mon Imagine jornais e revistas s rias dedicando parte de seu precioso espa o a explicar as diferen as de um Sandshrew para um Sandslash Imagine palestras e programas de TV para explicar que Abra Kadabra e Alakazam n o s o mais s palavras m gicas faladas pelo Mandrake Imitando a maravilhosa pe a O Rinoceronte do Ionesco imagine que seus colegas come assem a se interessar por Chansey Horsea Goldeen Seaking Staryu a ponto de s falarem disso e passarem a renegar tudo o que fizeram anteriormente Que a Design Gr fico criasse uma se o para o design de Pok mons Que o espa o do desenho na TV aumentasse e que muito mais sites fossem criados para falar do tema Na NASDAQ empresas de Pok mons fariam uma reviravolta com seus IPOs e aumentariam a carga dos cyberd lares em criaturinhas mutantes Enquanto isso um Pok mon latino de sombrero e radicado em Buenos Aires iria tentar unificar pela 450 vez aquele continente cucaracha abaixo do equador A onda do Pok mon gr tis criaria filas quilom tricas nos postos de troca No seu escrit rio voc seria procurado por um moleque imberbe de cabelos prateados e embrulhado em celofane que falaria maravilhas da onda dos monstrinhos de empresas ganhando uma fortuna com isso Uma fortuna Sim algo em torno de uns R 1000 com Hitmonlees e Hitmonchans Voc o mandaria passear e ele sairia na capa da Exame cuidando de um investimento de risco de milh es De
161. mail pode ser um excelente canal de comunica o com a empresa e seu Atendimento ao Consumidor Fonte de pesquisa E poss vel saber os h bitos e prefer ncias do consumidor sem precisar de entrevistadores nem de uma estrutura cara e complicada Um website pode servir como excelente fonte de dados Promo es Visitantes de um site se forem bem direcionados s o consumidores potenciais 7 1 Tipos de websites Muitas empresas consideram seu endere o internet como um produto nico e coeso que deve concentrar todas as informa es produtos servi os e revendas O resultado a cria o de monstrengos websites enormes complicados e de navega o confusa em que o usu rio se perde antes de conseguir a informa o desejada Esse mesmo endere o digital poderia ser dividido em uma s rie de pequenos produtos diretos e objetivos voltados exclusivamente para uma parte do p blico alvo Imagine uma f brica de alimentos com tr s p blicos e o consumidor final buscando informa es de produtos revendas e promo es e um nutricionista ou profissional da rea m dica procura de informa es nutricionais espec ficas e e um investidor corporativo pesquisando dados faturamento desempenho etc Cada um desses p blicos tem um interesse diferente na marca e vai em busca de informa es espec ficas Ao encontrar dados irrelevantes ele desiste do site Por que n o criar ent o tr s endere os diferentes e objetiv
162. mais comum e as raz es s o e Lentid o quantas vezes voc teve que ficar esperando um temp o para ter acesso informa o de um site Imagens pesadas demais banners demais tecnologias demais Flash demais ou at texto demais fazem com que se tenha menor velocidade menos n mero de visitantes menor resposta H coisa mais irritante que aquele maldito Aguarde carregando na entrada de um site e Excesso de bugigangas in teis existem tecnologias que trabalham contra o usu rio s o aquelas que tornam uma p gina mais lerda ou dependem de um plug in para serem carregadas e esse plug in n o acrescenta nada ao conte do s uma firula de design Quantas p ginas feitas em Flash poderiam ser feitas em HTML e JavaScript Se assim porque fazer com que o usu rio baixe um plug in e espere um temp o para carregar o site s para ver uma letrinha mais bonitinha Ou um desenho animado e Coisas que piscam e pulam certos websites parecem vidros traseiros de Kombis de tantos badulaques e apetrechos pulando e piscando nas suas telas S o layers em DHTML GIF animados sons e outros trecos em Java e Javascript janelas pop up etc Ser que n o se percebe o quanto eles dificultam a leitura e incomodam e Informa o escondida a web foi feita para facilitar o acesso das pessoas informa o A n o ser que seu objetivo seja fazer com que o visitante se perca dentro do mundo de informa o que voc est mo
163. mais interessante poder ser S importante ter coragem n o se pode ser t mido e avan ar meio sinal Meio contraste tem nome e seu nome conflito O designer deve orquestrar o espa o em branco Muitas pessoas consideram os espa os em branco de um layout como reas perdidas e por isso tentam preench las com texto e imagens Os espa os vazios s o elementos importantes para o desenho de um layout entrelinhas colunas e margens s o alguns lugares onde d para us lo Ele funciona para equilibrar espa os refor ar a unidade de grupos harmonizar reas e aumentar o contraste S o exatamente o que d forma ao design como aquela velha hist ria do escultor que para transformar uma pedra grande na est tua de um cavalo tirou todos os peda os que n o se pareciam com o animal 4 Crie as regras que quiser mas depois respeite as Sempre que jogamos cartas com parceiros com quem n o estamos acostumados surge um papo inicial para definir o que permitido quanto vale cada ficha se poss vel bater sem ter canastra como s o contados os pontos o que vale cada carta e assim por diante Uma vez definidas as regras elas n o podem ser mudadas at o final da rodada Isso consist ncia No design de um conjunto de documentos telas de uma multim dia ou website programa o visual de uma empresa projeto gr fico de uma revista vale o mesmo princ pio tudo permitido menos mudar as regras no meio do processo Veja
164. mas por associa es de id ias Esse recurso imita o aprendizado humano e n o novidade Uma boa aula uma hiperm dia Notas de rodap ou bibliografia tamb m o s o s o formas mais arcaicas de dizer ao leitor onde est a informa o complementar a respeito do assunto A novidade do hipertexto que ele s vi vel em um sistema que abrigue a mensagem desconectada de seu suporte Um sistema digital como as telas de um computador uma possibilidade Um tutor grego outra possibilidade Uma m e ou pai pacientes tamb m o s o Para dar um exemplo mais palp vel hipertexto funciona como uma segii ncia de p ginas interligadas sem numera o trazendo informa es complementares a respeito de um assunto Se o interesse do leitor for superficial ele pode ser lido em cinco minutos Se for mais profundo os textos v o entrando em segii ncia at cobrir o assunto por inteiro partindo para assuntos relacionados ou temas parecidos Trabalho para um ano de exaustivas pesquisas ou mais Desde que o leitor se conven a a manipular o texto o computador s um acess rio a mais Alguns textos m sticos t m essa caracter stica O I Ching um deles Um dos grandes cl ssicos da antiguidade ele vem sendo usado h milhares de anos como or culo e para medita o Seu sistema de s mbolos foi inventado h mais de cinco mil anos e composto de 64 hexagramas que s o combina es de 6 linhas em dois estados poss veis 26 cada
165. mbrar que UM DESIGNER N O UM ARTISTA na melhor das hip teses um artista em fun o do mercado Ele pode fazer a embalagem mais linda e premiada do mundo contanto que ajude a vender Ele pode fazer o relat rio anual ou folheto mais chique deste sistema solar contanto que mostre bem os produtos e id ias do cliente Enquanto o artista deve ser coerente consigo pr prio o designer deve lealdade ao cliente e ao produto ficando a arte em segundo plano N o gostou Pois v fazer artes pl sticas Um bom designer n o deve ter seu estilo pessoal pois seus projetos s o resultados de um m todo objetivo Ao contr rio do artista ele trabalha em grupo visando est tica da l gica Para o design vale sempre a regra da observa o O que seu cliente faz O que presente no cotidiano dele Quais s o os elementos significativos Chico Buarque faz m sicas comoventes tiradas do dia a dia sem gra a de uma classe m dia esmagada M gica Duvido Mesmo o famos rrimo e manjad rrimo David Carson tira suas id ias de desconstru o tipogr fica de placas pintadas por gente simples dos bairros pobres perto da sua casa Essas id ias ing nuas muitas vezes s o brilhantes exatamente por n o procurar nada especial extraterrestre e sim tentar retratar o que se v Os donos de uma banca de jornal pr xima de casa tiveram outro dia uma id ia dessas impressionados com o crescente n mero de v deos pornogr ficos venda e com o constra
166. mesmos mas n o queremos nos dar ao trabalho de encenar escrever ou desenhar algo grandioso e nem queremos dedicar tempo para isso nos fazemos acreditar que existe um dom divino e rar ssimo Assim nossa vaidade favorece o culto personalidade pois s quando pensado como algo diferente distante e especial inacess vel portanto o g nio n o incomoda A origem do talento bastante question vel e a maioria das teorias modernas prova que ele tem muito a ver com a forma o do indiv duo filhos de musicistas ouvem m sica em casa desde crian a e a associam a treino e paci ncia por isso se tornam melhores candidatos a m sicos Escritores jornalistas e advogados certamente leram muito desde a inf ncia por isso seu texto mais fluido Assim designers que n o t m familiaridade com o processo tendem a ser mais limitados que seus colegas estudados Fica muito mais f cil compreender o que um dito g nio tem de especial quando acompanhamos de perto a dedica o ferrenha de pessoas focadas em uma s forma de arte pesquisa ou atividade Veja um cientista ou cozinheiro por exemplo eles passam o dia inteiro procurando est mulos e correndo atr s de novidades Cada nova descoberta comemorada e combinada com as anteriores e dessa forma agem como crian as que fazem perfumes misturando todos os ingredientes do banheiro Compare os com ilustradores que n o param de desenhar ou designers que v em design em cartazes rasgados
167. mo funciona o arco do violino Ou por que n o inventam um chiclete de coco Ou ainda que vermelho bonito faz o sangue n o Pode parecer uma vis o rom ntica da profiss o mas muitos designers n o se acreditam capazes de fazer outra coisa da vida a n o ser lutar incansavelmente por uma est tica melhor ou mais inventiva Alguns se sentem quase obrigados a isso o tempo todo como aqueles professores de portugu s que inconscientemente corrigem as derrapadas que escutam pelo r dio ou TV mesmo que ningu m v ouvi los Um designer nunca est satisfeito e nesse ponto d at para compar los com cientistas curiosos sempre propondo nunca considerando uma solu o como definitiva Seriam os designers cientistas com charme N o Acredito que da estaremos exagerando um bocado at mesmo para pessoas conhecidas por terem egos incontrol veis Uma melhor defini o talvez fosse que os designers s o os rbitros do bom gosto e nos orientam a separar o que bonito do que feio Eles servem para mostrar s pessoas o que elas realmente querem e orientam o caminho para chegar l Sua responsabilidade enorme e para isso devem se concentrar nos m nimos detalhes para que o que fazem seja harmonioso e funcione Por isso um designer se irrita quando o cliente s prop e a troca da cor do fundo de uma embalagem Essa troca s vezes o equivalente meia branca para quem veste terno e sapato pretos ou ao pedacinho de alfa
168. n a Assim n o faz sentido for ar o usu rio a decorar qualquer dado que o computador j saiba O usu rio interage diretamente com a tela do computador tanto que sempre que a m quina trava queremos dar um tapa no monitor n o na CPU ele v na tela o que est fazendo e aponta para o que v Por isso os objetos e cones devem ter uma apar ncia condizente com a sua fun o S quando o usu rio estiver certo do que quer e familiarizado com o sistema comandos de teclado podem ser uma boa solu o para garantir rapidez A navega o e comunica o devem ser facilitadas Ao contr rio dos outros meios de comunica o as dimens es e estrutura de um sistema digital s o sempre imprevis veis por mais convencionais que sejam A interface deve facilitar a explora o e leitura Voc pode colocar seus bot es em qualquer ponto da tela contanto que eles fiquem na mesma posi o por todo o site cones n o s o obrigat rios Pequenas ilustra es cones e bot es s devem ser colocados em uma interface se facilitarem a comunica o muito comum o uso de elementos acess rios degrad s ou anima es dispens veis dificultando a leitura e tornando a interface mais lenta e confusa Nesse caso uma boa alternativa pode ser troc los por texto J um cone simples sint tico e claro funciona melhor que um amontoado de palavras A placa de proibido virar direita seria compreendida at por um alien gena J as placas de
169. ndo O que est nela de menor import ncia O mesmo vale para o resto do computador quando estamos vendo um website Essa rela o din mica o que figura pode ser fundo e outro elemento pode ser promovido a qualquer instante A apar ncia de uma imagem depende e muito do fundo Atributos como tamanho brilho forma e cor percebida variam completamente conforme o ambiente em que est uma imagem Qualquer objeto do campo de percep o influencia todos os outros 3 Agrupamento de imagens As figuras podem ser agrupadas ou relacionadas de acordo com sua proximidade continuidade ou semelhan a formando outras imagens ou estabelecendo rela es entre elas O agrupamento depender da continua o elementos que parecem estar em uma linha visual cont nua tendem a ser agrupados juntos As pessoas tendem a continuar as linhas que v em emend las assim que os antigos imaginavam desenhos das constela es Essa regra fundamental para um detalhe muito importante dos layouts que n o pode ser descuidado o alinhamento Elementos alinhados em uma p gina d o a impress o de maior estabilidade e seguran a 4 Figuras fortes s o est veis Apesar de todos os elementos de um campo visual se influenciarem existem figuras que s o mais resistentes e est veis S o formas neutras que se isolam da confus o geral Essas formas s o normalmente simples regulares sim tricas e fechadas com um contorno regula
170. net pois n o depende das linhas telef nicas nem das limita es dos browsers mas esse panorama est mudando cada vez mais r pido CD ROM e DVD ROM possuem o mesmo aspecto tamanho e espessura mas a capacidade de armazenagem muito diferente O DVD ROM pode armazenar at 7 vezes mais dados 4 7 Gbytes Al m disso o DVD permite grava o em dupla camada em um nico lado o que aumenta a capacidade para 8 5 GB e a grava o em dois lados aumentando a capacidade de armazena o para 17 GB Por armazenar mais dados o DVD ROM suporta conte do com melhor cor nitidez e clareza com excepcional apresenta o de detalhes finos da imagem Um filme gravado em um DVD ROM usando a compress o MPEG pode ter a dura o de at duas horas e 13 minutos com uma qualidade espetacular 6 canais de udio dolby digital canais de som digital em tr s l nguas e adi o de legendas em quatro l nguas adicionais As possibilidades de trabalhos em multim dia s o enormes mas segundo AleMcHaddo diretor da 44 Bico Largo Multim dia podemos enquadr los em quatro tipos Institucionais apresentando uma empresa produto ou pessoa Cat logos ou Portf lios Digitais mostrando v rios produtos e ou trabalhos descrevendo cada um deles Jogos videogames e Filmes Interativos filmes que podem ser vistos escolhendo a ordem posi o de c meras ou assunto As m dias CD ROM e DVD ROM dever o se tornar como o LP a fita cassete e o VHS formatos
171. nform tica que s caiu em outubro de 92 Essa bravata tupiniquim deixou em todos n s segiielas culturais incur veis enquanto crian as que nasceram h 7 anos ou menos acham o computador mais natural que uma bicicleta para todos n s ele pode at ser pr tico interessante til mas temos medo de um 1984 do poder dos Hackers de usar cart o de cr dito nos envergonhamos em ser chamados de usu rio e portamos um orgulho ing nuo e infantil em pensar que no ntimo poder amos at viver muito bem sem ele E quem esse tal usu rio Usu rio no meu tempo quem usava drogas Provavelmente no seu tamb m Talvez por isso se diga tanto que algumas pessoas est o viciadas em internet Honestamente isso rid culo como dizer que algu m est viciado em falar O usu rio uma pessoa comum como n s a quem oferecido um poder formid vel e que n o sabe muito bem o que fazer com isso Como uma bela menina de 14 anos que n o faz a menor id ia do fasc nio que causa em velhos de mais de 30 e at tem um bocado de medo deles O usu rio comum n o quer saber de WAP banda larga e commerce ou outros bichos Essa nomenclatura o deixa confuso perdido O que ele quer algu m para conversar uma boa sugest o de presente uma dica bacana de restaurante um hotelzinho na praia para o feriado Pensando bem todos n s conhecemos muito bem os usu rios de tecnologia digital eles s o nossos irm os nosso sobrinhos nossas tias aq
172. nforma o Fica f cil na WWW fazer uma revista em que uma p gina tem formato diferente do seu pr prio verso ou um quarto que maior do que a casa inteira Maluco n o Uploads Downloads Para transferir documentos HTML imagens aplicativos ou mesmo sites inteiros entre seu computador e um servidor a que se tenha usam se programas de FTP file transfer protocol Eles mostram em uma janela o conte do do diret rio especificado no servidor e permitem que voc troque arquivos como se estivesse copiando pastas de um disquete para seu computador A velocidade de transfer ncia depende da qualidade da sua conex o Quando se transferem documentos do computador pessoal para o servidor o processo chamado de upload O processo contr rio chama se download O download sua tradu o algo como transfer ncia da carga para baixo tamb m pode ser feito diretamente no browser Depois de feito o upload de um site recomend vel test lo no ar porque v rios probleminhas como processos n o compreendidos pelo servidor documentos n o transferidos links errados ou erros de conex o podem acontecer Tudo isso para fazer um website Sim e muito mais Isso s o come o Mas fique tranquilo Essas coisas s o f ceis de se pegar no dia a dia dos trabalhos S necess rio ter consci ncia de seu real valor e significado 4 3 O que voc n o precisa saber Quem est envolvido na cria o de sites deve ESQUECER a progr
173. ngimento de pais que viam suas crian as olhar as fitas e fazer perguntas resolveram cobrir com papel sulfite e fita adesiva os exemplares do topo da pilha Se um adulto quisesse ver que pegasse os de tr s e visse vontade Resultado das tr s bancas da pra a a que vende menos t tulos er ticos mas a que tem mais p blico geral Em resumo ao fazer seu website n o se preocupe em ver o que o pessoal da Nike ou da Wired est aprontando nem tente descobrir o que h de mais moderno em HTML e plug ins muito pelo contr rio tente descobrir no material que voc vai fazer elementos singelos de destaque e identifica o e trabalhe neles Pois se a interatividade e o excesso de efeitos podem at atrair n o conseguir o prender o visitante que busca participa o e reconhecimento S o como uma maquiagem que cedo ou tarde descoberta O que preciso para ser aut nomo Ser aut nomo se saber se virar no bom sentido claro o papel de um designer em uma empresa claro e objetivo voc tem sua mesa um computador chegam briefings saem layouts para programadores produtores assistentes fora de uma empresa come a o one man show nas m os o banjo nas pernas o bumbo e na boca a gaita Voc o atendimento o financeiro o contato o produtor muitas vezes o programador e finalmente o designer N o uma profiss o c moda de modo algum Idas e vindas a clientes dos mais diversos tipos tamanhos gostos e
174. nha voz e meus cabelos quaaaanta diferen a Boa leitura ndice DWD 2 1 6 5 Paisagens informativas 68 Introdu o 2 7 Quem precisa de um website 70 1 Design a cara do mundo civilizado 4 1 1 Tipos de websites 12 1 1 Qualquer imbecil faz design design 7 2 Publicidade de massa e internet 13 designers e Frankensteins 5 7 3 Porque banners n o prestam 16 1 2 Talento vs Pregui a 7 7 4 Qualidade da experi ncia foi bom pra 1 3 Carta da Calif rnia 8 voc meu bem 77 1 4 Pensando visualment 1 5 Do que as pes mai m eo 1 5 Tintim por tintim o impacto dos m nimos elas odeiam nos sites 80 detalhes 12 8 O processo de produ o e suas etapas 82 1 6 Identidade corporativa miss o e vis o 8 1 Algumas dicas de marketing 86 empresarial 13 8 2 Especifica es planejamento e 1 7 Cada coisa com seu porqu 14 cronograma 87 1 8 Percep o um processo ativo 15 8 3 Organiza o dos grupos de informa o 90 1 9 Rela o palavra imagem 17 8 4 Dire o de cria o projeto gr fico e linha 2 Preparando o terreno 19 de design 91 3 Princ pios de design 21 8 5 Prot tipos e aprova o 94 1 Grids ca isa em seu 2 8 6 M os obra 95 3 2 Fazendo um grid 27 8 7 Controlando as entranhas do c digo 96 3 3 Caligrafia tipografia e legibilidade 28 8 8 Registro em mecanismos de busca 97 4 A Internet a resposta Qual era mesmo a 8 9 A
175. nindo nada s isolando o ambiente volta do espa o que pretendem analisar Se h algum princ pio de design deve ser esse real ar caracter sticas individuais de objetos e destac los do ambiente com bom senso Com essa id ia na cabe a muito mais f cil Mas como bom senso e observa o s o conceitos vagos demais vamos a dados mais objetivos Antes de come ar a trabalhar necess rio que o designer conhe a bem seu produto Para isso ele deve levar em considera o e Objetivos qual o tipo de produto e o que se pretende com a comunica o e P blico para quem a comunica o e Conte do o produto em si Formato suas dimens es e propor o e e Resposta o que se pretende com ele A comunica o s ter valido se o p blico ficar com vontade de fazer alguma coisa depois de ver a interface clicar bot es mandar e mail participar interagir Objetivos para que serve o material Toda a o de comunica o deve visar a alguma coisa expor o produto destacar suas caracter sticas pre o condi es etc Por isso sua inten o precisa estar bem clara para n o deixar d vidas Um material de venda deve falar de pre os e condi es um institucional falar da empresa e sua atua o um informativo ser imparcial etc Para que uma tarefa fique bem realizada necess rio definir um objetivo N o existe nada mais irritante que um comercial indeciso Eles s o como pessoas que n o
176. nos anos 20 ou da It lia na renascen a Outros p em a culpa de toda essa incerteza na revolu o das tecnologias de informa o que deveria aumentar nossa produtividade para garantir nos mais horas de lazer mas acabou dando errado pois estamos mais produtivos do que nunca e ao mesmo tempo mais sobrecarregados Os mais radicais acham que hora de parar com essa onda esmagadora e voltar aos princ pios b sicos do ser humano como os Talebans do Afeganist o ou os Amish que vivem em comunidades agr colas nos Estados Unidos Mesmo entre os mais moderados h um vis vel desconforto com a velocidade das mudan as Provas de resist ncia atl tica que submetem pessoas de aparente bom senso a cinco dias no meio do mato sem nenhum aparelho eletr nico s o um bom exemplo dessa confus o de valores entre os atletas vencedores a absoluta maioria treina em academias muito bem equipadas come energ ticos que s o a fina flor da engenharia de alimentos e veste roupas com fibras inimagin veis Ora por que ent o satanizar a pobre da eletr nica S por que ela a mais vis vel e democr tica das tecnologias Da mesma forma que abor genes t m medo que fotografias lhes roubem as almas n s seres humanos modernos informados cultos e inteligentes morremos de medo que a tecnologia nos roube a humanidade deixando nos isolados lobotomizados pragm ticos e melanc licos Acreditamos que os progressos da ci ncia n o valem nada pois n
177. nsiga trocar informa es com o servidor como em um formul rio de compras O usu rio envia seus dados o CGI verifica sua validade e encaminha o pedido a um banco de dados Por muito tempo esse sistema foi o estilo de comunica o mais utilizado apesar de sobrecarregar o servidor quando os dados solicitados s o em grande quantidade Pode ser um programa desenvolvido em v rias linguagens como C Perl ou SQL Structured Query Language feita especialmente para mexer com bancos de dados Javascript e outros scripts surgiram para aliviar o servidor de tarefas simples executando as diretamente no computador do usu rio Script ou rotina um nome pomposo para um peda o de c digo que vai embutido junto com o HTML entre comandos lt SCRIPT gt e lt SCRIPT gt Al m do popular e compat vel Javascript existe o VB Script tecnicamente semelhante por m superior em concep o de programa o Ela apresenta mais recursos mas tem a desvantagem de funcionar apenas em produtos Microsoft Java um conjunto de tecnologias que s o executadas no servidor e no cliente em forma de applets programelhos Ele inclui uma nova linguagem e seus recursos de suporte um interpretador Virtual Machine drivers de banco de dados JDBC sistema operacional JavaOS JavaPC e assim por diante Bons usos da Java est o para comunica o de rede em aplicativos multiplataforma para gerenciar bancos de dados servi os remotos etc Muita gente tem usado a
178. nte Essa experi ncia na rea psicanal tica chamada de Psicodrama e levada bastante a s rio O espa o que aparentamos manejar quando navegamos atrav s de documentos de hipertexto pura imagina o estamos estendendo o ato de leitura tradicionalmente linear para uma terceira dimens o quando viajamos atrav s de um link como se duas p ginas estivessem coladas nessa palavra As possibilidades que se abrem para a literatura s o enormes e criam oportunidades para que o leitor se engaje nessa experi ncia como quem se deixa levar por um sonho ou alucina o em que as rela es de causa ou cronol gicas deixam de existir A Internet o que as tecnologias podem nos dar de mais pr ximo do hiperespa o Com um simples clique estamos do outro lado do mundo Usando frames estamos em dois lugares no espa o ao mesmo tempo Mas por ser tecnol gico apenas um ciberespa o Cabe ao designer inventar mundos que explorem essas tecnologias estimulando a imagina o do visitante para isso que serve o Design 12 2 Comunidades digitais as novas igrejas partidos padarias S o tr s da manh Voc n o consegue dormir direito Precisa de algu m para conversar Amenidades Ou n o A quem vai recorrer Na realidade voc brigou com a namorada e quer espairecer Ou sacaneou algu m no trabalho e precisa abrir seu cora o Mas n o quer ser identificado Ou sua vida est meio sem gra a e voc procura por um pouco de emo o
179. o preciso criar pensando nas possibilidades do meio n o em suas limita es A prop sito veja recebi este texto outro dia por e mail eu odeio piadinhas que circulam pela internet mas n o posso deixar de publicar partes deste de autor an nimo Se vend ssemos pizzas como produzimos sites Um poss vel cliente liga pra pedir uma pizza Do que n o se sabe ele s a quer porque todo mundo que ele conhece tem uma E avisa que pediu a mesma pizza pra 5 outras pizzarias e s pagar a que gostar mais No meio do trabalho ele pede pra voc mandar uma pr via de como ela est para sua aprova o Depois de receber a pr pizza pede uma altera ozinha substituindo a mussarela amarela por verde porque ele gosta mais de verde Isso faz com que voc tenha de jogar a pizza antiga fora e produzir uma nova que al m de dar mais trabalho ficar de gosto duvidoso O cliente pede 500 pizzas a serem feitas em 15 minutos pois ele est com uma festa para come ar e s lembrou de ligar agora Voc destaca seus melhores pizzaiolos pra atender a esse pedido urgente e deixa as pizzas dos outros de lado o que faz com que todos eles reclamem do atraso Ap s produzir quase todas as pizzas ele liga avisando que n o precisa mais de pressa porque errou o prazo Na verdade voc tinha 4 horas Outro pede uma pizza incrementada e n o entende como se pode cobrar t o caro por ela sendo que o boteco da esquina faz por bem menos Ou d
180. o dinheiro para aprender design quanto gastam para colocar RAM no computador quantos designers ou diretores de arte brasileiros com menos de 30 anos conhecem a hist ria da tipografia 20 Quantos t m o Netscape 5 instalado 70 Por que David Carson apareceu Porque cansou de surfar Por que ele desapareceu Sim ele desapareceu Quem foi El Lissitzky Por que nunca ouvi ningu m citar o nome dele Quem conhece o trabalho de Bradbury Thompson pode levantar a m o Essa uma discuss o sobre a est tica do trabalho e tamb m sobre o conte do do designer ou diretor de arte H algum tempo atr s os melhores designers no mundo publicaram um documento chamado First Things First 2000 Em poucas palavras eles diziam que a propaganda ao mesmo tempo que sustentava os designers e diretores de arte tamb m escravizava a criatividade a coisas triviais e banalizava o racioc nio enquanto outros desafios e tentativas realmente novas ficavam na gaveta esperando um tempo livre que nunca chegava porque o mundo sempre precisava vender dentifr cio e cart es de cr dito Mas o incr vel que os mesmos ianques que inventaram esse consumismo todo protegem a educa o em design a todo custo Estava na hora da gente ser antrop fago de novo comer todas essas influ ncias que eles mandam para a gente via FEDEX e devolver os caro os Toda vez que leio as not cias da internet brasileira vejo que algu m est lan ando um servi o desavergonhad
181. o come a a tomar forma e perde sua caracter stica mec nica ganhando uma estrutura mais criativa e visualmente rica Implementa o s ntese das id ias e atividades dos processos anteriores programa o e testes E a poca da reavalia o do design e sua prepara o final Roger Black outro grande designer usa outras quatro fases instru es p ginas teste prot tipo e lan amento Instru es descri o da abrang ncia do trabalho tarefas a serem executadas e seus respons veis Defini o de um mapa do endere o digital e levantamento de todos os recursos necess rios para a sua produ o O cliente mostra seus objetivos e necessidades o est dio faz o planejamento estrat gico e engenharia P ginas teste diferentes formas de abordagem de um produto digital em diferentes estilos D o uma id ia geral do que poder ser o produto final O cliente opina e refina o conte do e o est dio entra com o design e marketing Prot tipo desenho final da interface testes programa o e aprova o pelo cliente Implementa o assim que o prot tipo estiver revisado e aprovado hora do lan amento Para isso necess ria a programa o do conte do levantamento e adequa o de todas as m dias documenta o e prepara o de estilos que possam ser seguidos pela equipe de atualiza o iD5 um plano de neg cios online A consultoria iXL como a maioria das empresas do g nero tem uma metodologia usada para a
182. o do usu rio final com o conte do de um sistema de computador Em outras palavras onde tudo acontece A interface uma das partes mais importantes de um website pois concentra a rela o visitante sistema o que apresenta informa es e est mulos e recebe respostas colocando a manipula o nas m os do usu rio Por isso muito mais que um visual bonitinho deve ser o elemento de transi o entre o mundo real e o digital O ideal que ela seja transparente invis vel natural sint tica intuitiva pr tica N o deve ser excessivamente realista pois a met fora vai ficar for ada afinal o usu rio sabe que est mexendo em um computador 5 1 Caracter sticas de uma interface Ao contr rio dos cinco mil anos de hist ria da palavra escrita o design de espa os digitais um processo t o recente que ainda n o existem regras ou movimentos est ticos para defini lo Alguns princ pios b sicos de legibilidade se conservam simplifica o harmonia contraste outros s o invertidos o tipo de letra adequado para a leitura e outros ainda s o completamente novos n o existe regra para a cria o de liga es de hipertexto O mais comum hoje em dia a adapta o de id ias do design gr fico ou da televis o para os meios digitais o que n o passa de uma solu o provis ria bom levar em conta O tamanho da tela vari vel CD ROMs costumam limitar a rea til em 640x480 pixels browsers podem ocupar qualque
183. o e o direito carregava uma revista Gr fica novinha Falei com o seu Nem sio zelador e o Manoel ascensorista me levou at o conjunto 501 me ajudando com a chave para abrir a fechadura emperrada Entrei liguei o ar condicionado e li a revista Depois passei a m o nos m veis olhei para a paisagem l embaixo e comecei a fazer planos enquanto durava a minha hora de almo o meu est dio que legal vai ser muito legal Voltei para meu emprego ainda teria que trabalhar at o final do m s e passei o resto do dia pensando no que faria Tempos depois vendi uma bicicleta juntei toda a pouca grana que tinha pedi um refor o emprestado para meus pais e comprei meu primeiro Macintosh Um m s depois viria o telefone Tr s meses depois eu teria um estagi rio Cinco meses depois deu para pagar meus pais O nome Kropki viria s no m s seguinte Ele significa pontos em polon s Por que ponto Ora porque ponto o elemento essencial do design Por que polon s Ora ta uma boa pergunta por que n o At porque s o t o poucos os que falam polon s o dava mais pano pra manga N o foi f cil chegar a esse nome o est dio era para se chamar quadrados cada vez menores mas ainda bem a gente desencanou Nomes assim eram comuns Um amigo tinha montado o PLN O D O R design gr fico n o n o era um nome grego era sigla para pimenta nos olhos dos outros refresco N s ramos essencialmente alunos
184. o for executado desenhado provado n o adianta nada Muitos layouts s o brilhantes na cabe a de quem os criou mas t m como resultado um produto med ocre gra as a falhas na fotografia no texto na diagrama o no ator e assim por diante Por melhor que seja a id ia ela s valer se houver muito trabalho para refin la aquela hist ria dos 99 de transpira o E assim que quando olhamos os portf lios de candidatos a designers ou diretores de arte reconhecemos em poucos instantes a diferen a entre quem tem experi ncia e um iniciante por mais talentosos que sejam assim tamb m que avaliamos a qualidade de um filme no cinema logo no in cio da hist ria se as imagens est o meio escuras se o som n o nenhuma maravilha a hist ria ter que ser muito melhor para agradar O talento continua sendo fundamental o principal ingrediente da receita Mas mesmo a id ia mais talentosa pode parecer insossa se n o for bem preparada e temperada claro que s vezes todo o material aparece pronto em um estalar de dedos Diz se que o Led Zeppelin n o gosta da m sica Smoke on the water porque ela foi composta em meia hora enquanto eles olhavam um inc ndio no hotel em que estavam E justo essa m sica se tornaria a mais famosa deles Disse Led Zeppelin Puxa desculpe quis dizer Deep Purple Viu como uma besteirinha pode estragar tudo 1 6 Identidade corporativa miss o e vis o empresarial Imagem identidade A iden
185. o pessoal uma das principais formas para se demonstrar personalidade e refinamento o que o torna um elemento terr vel nas m os de gente insegura ou segura demais Hoje em dia todos querem mostrar que t m bom gosto e dar palpites sobre obras art sticas e composi es visuais mesmo que estejam completamente equivocados ou que n o tenham nenhuma informa o a respeito tornando muitas vezes o trabalho do designer um mart rio Por mais chato que seja um paciente em um hospital ele dificilmente dir ao m dico como quer ser operado e que resultado pretende obter principalmente se isso fizer mal a sua sa de Por que ent o muitos insistem em alterar os layouts do pobre designer ou diretor de arte arruinando sua legibilidade impacto unidade e harmonia ou combinando elementos de layouts diferentes Se contrataram os servi os de um designer por que querem mexer no seu layout Parte da culpa da pr pria classe de designers e diretores de arte Como n o h uma forma o espec fica requerida fica muito dif cil avaliar se um sujeito bom ou n o Em salas de m dicos e advogados h paredes forradas de diplomas M dicos est o sempre de branco advogados de terno N o se fala em feeling ou instinto mas em ci ncia N o h arrog ncia nem superioridade criativa mas a consci ncia de um conhecimento espec fico que deve ser explicado M dicos adoram dar pequenas aulas sobre o funcionamento do corpo dos pacientes e o fazem sem
186. o s ndico digital O processo de produ o de um website envolve uma s rie de tarefas complementares e fica muito mais f cil se temos um profissional especializado para dar conta o produtor Eu tive a sorte de trabalhar com produtores muito bons como a Ana L cia Em suas palavras o processo E Fiat Lux depois de ter o material reunido arquitetura de informa o feita e o lay out aprovado hora de finalizar transformar o que era s uma id ia em um site utiliz vel Para isso a organiza o fundamental necess rio saber preparar as etapas coordenando a equipe para ter o material pronto na hora certa E o que preciso para produzir um site Primeiro estar a par das tecnologias a se usar Conhecer programas e linguagens t o importante quanto saber como e quando us los Muita gente acha que conhecer HTML e Flash o suficiente para ser produtor mas isso muito limitado Programas mudam tecnologias mudam suportes mudam e sempre importante pensar em maneiras diferentes de se produzir o mesmo material At porque nem sempre a maneira mais comum a melhor Para isso recomend vel que se conhe a um pouco de tudo de design a programa o Se es bem estruturadas e material acompanhado de perto podem economizar muito muito trabalho E nessa rea ser eficiente fundamental Para isso recomendo o dom nio de um programa HTML WYSIWYG Flash ou qualquer tecnologia especial que venha a ser utilizada no site
187. onsomem drogas quanto as que operam computadores Todas essas coisas me fascinavam e ainda me fascinam Mas o que mais me impressiona at hoje o quanto isso passa despercebido pelos outros Outro dia ouvi um sujeito dizer que f cil reconhecer um diretor de arte eles usam roupas inacredit veis an is nos dedos mais inc modos ouvem sons esquisitos e fazem pratos maravilhosos em restaurantes do tipo por quilo N o sei n o acho meio preconceituoso Quando estava no segundo grau muitos carinhas da minha classe segregavam um sujeito que usava brinco Hoje ele casado anda de mountain bike e foi campe o de um enduro de resist ncia no meio do mato Amigos da minha idade acham nojento gente que usa piercing ou tatuagem Tsk tsk tsk Um dos maiores publicit rios que conhe o se veste e anda como se fosse um professor de matem tica t nis cal as jeans surradas camisa de algod o branco culos fundo de garrafa e canetas no bolso dif cil definir pessoas e desenhar um website custa muito mais caro e d muito mais trabalho que uma simples ida ao shopping Tive um assistente que se ficar sem dinheiro pode ir trabalhar em um restaurante de nouvelle cuisine e outro que n o sabe desenhar um tri ngulo Ambos usavam jeans e camiseta Tudo isso no fundo uma enorme besteira Para se fazer design n o necess rio ter nada de especial nenhuma habilidade espec fica S preciso ver perguntar e questionar como qualque
188. or a de vontade que voc imagina Os resultados entretanto podem ser fascinantes Desde uma boa id ia at a simples desconex o com o mundo real fechando as portas da racionalidade para a cria o criar coragem e ganhar for a Observe uma crian a inquieta ou seja normal ela pergunta tudo quer saber mais l muitos livros sobre planetas e dinossauros Adora desenhar e criar m sicas monta jogos e brincadeiras com as coisas mais esdr xulas de uma lumin ria ao tapete da sala Faz associa es de id ias malucas inventa m quinas de voar carros com uma roda s avi es com tr s asas tem amigos invis veis c digos secretos e passa horas brincando debaixo da chuva Agora observe o comportamento de m sicos ilustradores arquitetos e escritores s o distra dos usam roupas inacredit veis fazem perguntas esquisit ssimas sobre por exemplo mitoc ndrias l em tudo que passa pela frente de bulas a Machado de Assis ouvem m sicas que poucos conhecem s o normalmente muito engra ados e imprevis veis verdadeiras crian as crescidas Eu disse crian as Pois Muitas delas crescem e viram aqueles adolescentes chatos metidos que querem ser iguais a todos do seu grupo e mesmo assim ficam dizendo que s o diferentes Adoram falar mentiras e contar vantagens Eu disse adolescentes Desculpe quis dizer mauricinhos Ou pessoas que falam milh es de termos em ingl s Ou que falam que o Brasil n o presta Ou que andam armados
189. ores Por isso quando uma imagem tem 16 7 milh es de cores dispon veis para cada pixel ela tem qualidade fotogr fica Por que imprime t o mal Qualquer um que j capturou uma imagem na internet e a tentou imprimir sabe que o resultado muito aqu m do desej vel ainda mais se essa impress o for profissional Todos os jornais e revistas que falam de sites o fazem em fotos pequenas ou de baix ssima qualidade Isso ocorre porque os processos de forma o de uma imagem na tela usando pixels e em uma impressora usando pontos s o completamente diferentes Pixels s o pontos de luz e por isso combinam as cores Vermelho Verde e Azul em uma unidade de cor pr pria cujo sistema crom rico o RGB de Red Green Blue J os pontos de impress o s o tinta e n o podem ser misturados para n o borrar Por isso cria se uma ret cula em que as cores b sicas de impress o Cyan Magenta Amarelo e Preto fiquem umas do lado das outras sem se tocar A esse sistema chamamos de CMYK Y de Yellow K de black j que o B de Blue Para reproduzir um pixel em uma impressora s o necess rios v rios pontos A rela o n o linear mas para se fazer uma id ia a defini o de 72 pixels por polegada do monitor equivale aos 600 dots pontos de impress o por polegada da impressora Para se fazer uma impress o de qualidade s o necess rios no m nimo 2540 dots o que equivale a uns 250 pixels por polegada Como nenhuma im
190. os com caracter sticas de linguagem e design pr prios espec ficos para cada p blico alvo A experi ncia est fazendo com que muitas empresas descubram o caminho da segmenta o A gigantesca Microsoft n o conseguiria reunir toda a informa o a respeito de seus produtos e servi os em um nico endere o e mesmo seu portal de informa es e servi os MSN se liga a outros sites seus que v o da escolha de ve culos Carpoint orienta o de viagens Expedia Alguns dos tipos de websites comerciais mais populares e Institucionais divulgam a empresa faturamento hist rico e abrang ncia mundial Se concentram mais em dados institucionais que em produtos ou servi os S o equivalentes digitais dos relat rios anuais de empresas e Produtos concentram a comunica o em produtos caracter sticas e benef cios S o voltados exclusivamente para o p blico alvo Equivalentes a an ncios e cat logos e Profissionais para a divulga o de servi os prestados por aut nomos Equivalentes a folhetos e Servi os endere os de consultoria e venda de servi os espec ficos Muitos concentram um grande volume de informa o para mostrar a expertise e evidenciar a necessidade da contrata o de um profissional Equivalentes a apresenta es e palestras e Entretenimento jogos e brincadeiras normalmente utilizados para a lan amentos de produtos Equivalentes a revistas de passatempos e gincanas e Promocionais s
191. os t picos de um diagrama pode ficar confuso ent o melhor partir para uma tabela ou lista numerada com cada conte do individual os que se referem a ele e os a que ele se refere Com a organiza o em grandes grupos e a tabela de conex es j d para se ter uma boa id ia de toda a informa o dispon vel e como ela se comportaria se em vez de um website existisse uma pessoa explicando a quais s o os assuntos mais referenciados quais s o os temas mais importantes quais as principais d vidas e como acontece o fluxo dessas informa es de onde se parte para onde se vai Com isso o mapa est quase pronto e n o tem nada a ver com aqueles organogramas que a gente est careca de ver Seu formato lembra as aulas de matem tica em que aprend amos a teoria dos conjuntos uni o intersec o lembra Elementos que perten am a um mesmo conjunto t m rela es entre si Os que perten am a dois conjuntos est o em uma rea mista As linhas que cortam os conjuntos representam os saltos mudando de um tema para outro A hora de finalizar conjuntos muito grandes podem ser divididos peda os de conjuntos podem ganhar autonomia e a rela o entre os elementos deve ser revista Veja quais elementos merecem destaque desde a tela inicial e o mapa est pronto N o se esque a o conjunto de documentos de hipertexto deve tentar imitar o pensamento Por isso tente integrar as p ginas o m ximo poss vel nunca dema
192. osse hora de tentar entender como tudo aquilo funciona como tirar algum proveito como pertencer ao seleto grupo das pessoas que fazem Em design f cil de identificar essas pessoas s o aquelas que usam clip arts bot es tridimensionais efeitos prontos do Photoshop ou anima es pr programadas do Flash Todos passam por essa fase ou uma equivalente mas n o tem problema elas est o aprendendo Depois da posse a explora o cozinhar n o t o complicado nem coisa de m gico e voc experimenta uns temperinhos diferentes para aquele velho fil de frango Quando algu m elogia seus pratos voc se faz de desentendido Voc passa a se sentir habituado com a t cnica e exercita o talento sem bloqueios a fase ideal mas muito dif cil ficar nela Considerando toda a energia que foi gasta no aprendizado e no dom nio da t cnica incluindo a perda de tempo em que se gasta com atitudes como usar gravata colorida ou casaco de couro ou camiseta branca para fora da cal a em um look desencanado chega se a uma fase perigosa a ang stia Ang stia de ter que ir dormir enquanto a internet continua funcionando ang stia de saber muito mas n o saber tudo ang stia de querer colocar sites compat veis com a ltima vers o de cada browser e com todos os plug ins existentes O angustiado nunca est satisfeito e quer mais cada vez mais Resultado faz sites impenetr veis usa um jarg o dif cil e precisa de muitos plug ins
193. otivos para coloc lo no ar ent o n o ponha E n o conte para ningu m quando o atualizou pela ltima vez Alguns desses sites pelas datas de sua ltima atualiza o parecem galp es abandonados 8 O processo de produ o e suas etapas Ok ok At agora muita teoria tudo muito bonito Mas imagine que voc tem um website para fazer por onde come ar A id ia desta se o esclarecer o processo cada designer tem uma metodologia que gosta de patentear com uma sigla pr pria e todas elas dizem mais ou menos a mesma coisa A produ o de websites consistentes e coerentes passa por quatro fases A Briefing ou conceito defini o do foco do website seu consumidor objetivos de marca e vendas a ser apresentado Essa fase procura conhecer o cliente seu consumidor e o que o levaria a gastar algum dinheiro para acessar a internet a parte mais dif cil e a mais importante B Estrutura ou roteiro como vai ser a navega o atrav s do endere o a ordem das p ginas e todas as alternativas de visita o E a hora da defini o do mapa conjuntos de dados e arquitetura de informa o C Interface design de estruturas informativas barras de navega o e rela o computador usu rio O design estrutural projeto gr fico e dire o de arte acontecem aqui formando a cara do site D Programa o ou manuten o escolha da tecnologia e sua utiliza o na viabiliza o do projeto sua consist ncia
194. ou qualquer outro nome inventado por um consultor ou guru de m dia gringo Mais do que isso preciso voltar s origens descobrir o que emociona e aplic lo sen o estaremos agindo como a TV dos anos 50 que imitava o r dio Os meios de comunica o como os conhecemos n o devem desaparecer muito pelo contr rio O que dever acontecer um equil brio din mico como j aconteceu com cinema teatro r dio etc S dever o desaparecer as formas de comunica o que n o tinham raz o de existir A televis o n o vai perder seu poder mas mudar de status tornando se mais uma m dia O que desaparecer o monop lio provocado pela limita o tecnol gica At porque o problema n o est na tecnologia mas no que vai dentro dela Considere a TV aberta se fizermos uma pesquisa entre os telespectadores perguntando qual o seu maior problemas acredito que poucos dir o que a qualidade da imagem j que o sistema que usamos foi feito para mostrar uma imagem boa em uma televis o de tamanho razo vel at 21 Provavelmente a maioria das pessoas diria que o problema est na programa o e n o h HDTV ou udio de alta fidelidade que mude isso O maior problema que a cria o enfrenta para o desenvolvimento de um bom website hoje em dia exatamente esse sua valoriza o enquanto ve culo necess ria uma revolu o criativa para fazermos com que os sites sejam t o bacanas quanto o resto da propaganda e para iss
195. ou se interativo ou arcaico mon tono passivo atribua o nome que achar mais adequado Isso tudo controverso Se timo ter a oportunidade de responder a um an ncio conversar com uma empresa marca ou produto trocar id ias com especialistas por outro lado um saco ser obrigado a isso Muitos sites t m dezenas de bot es e cliques e links e coisas que piscam e pulam e berram pela sua aten o s para poderem contar que t m dezenas de milhares de p ginas mesmo que para isso obriguem o usu rio a uma s rie de a es para as quais ele n o estava com o menor esp rito A interatividade acabou ficando como o sexo nos anos 90 o pecado est exatamente em n o falar nele Tsk tsk tsk Ningu m quer interatividade o tempo todo v rias vezes muito mais confort vel sentar na frente do computador relaxar e deixar o website rolar seja com sons anima es ou m sica do que ser obrigado a ter um monte de op es para sair por a fazendo calo no dedo indicador da m o direita de tanto click J foi o tempo em que a internet era a grande novidade e hipertexto uma caixa preta magn fica e indecifr vel mas isso n o significa que todo mundo tem as novas vers es de todos os programas Se voc se cristalizou em algum ponto do processo bom ter em mente que a maioria dos seus usu rios continua achando que computadores s o m quinas complicadas feitas para dar pau e j percebeu que a parte mais rica da in
196. outras divide personagens busca refer ncias depende de pontos de vista e tem um final aberto Mesmo os contos de fadas que come am com era uma vez e terminam com e viveram felizes para sempre se apressam em definir que o bandido malvado e o mocinho bonzinho Por uma limita o tecnol gica aprendemos que os livros filmes e document rios devem ter um final mesmo que seja um the end ou game over Enquanto isso na vida real as pessoas continuam interagindo com outras e com o meio e a hist ria nunca tem fim pois um processo org nico cont nuo interativo e influenci vel Enquanto livros e filmes devem ter seu final documentos de hipertexto podem prosseguir medida que haja interesse abrindo conex es para outras hist rias Por isso ler uma narrativa de hipertexto pode tomar muito mais tempo que ler uma narrativa convencional Ou levar menos de um d cimo Por n o ter divis es e cortes claros entre os epis dios ou linhas narrativas existem poucos pontos em que o leitor pode interromper temporariamente a leitura ou dar por terminada uma vers o entre as v rias poss veis Al m de tudo isso o leitor deve decidir a cada conex o se deve ir em frente ou se desviar de seu caminho Ir para a frente pode levar a movimentos circulares ou a voltar a um momento anterior Desesperador Formid vel S o essas possibilidades que podem ser exploradas e nunca foram tentadas Veja uns poss veis modelos de hi
197. para cada texto quais s o os textos que levam a ele e quais s o os que saem dele e Organize as liga es evitando afunilamentos textos com muitos pontos de entrada ou de sa da e e Estruture esses textos em uma hiper ret rica dando ao visitante uma falsa sensa o de controle sobre os links enquanto o leva para o ponto desejado 6 4 Roteiros Muitos endere os digitais est o procurando uma forma de roteirizar suas p ginas para conseguir alguma esp cie de ordem no caos do conte do de um sistema de hipertexto Essa preocupa o fundamental porque muitas vezes a coloca o indiscriminada de liga es de hipertexto em uma mensagem pode desviar o leitor do conte do original Uma segii ncia ordenada de documentos faz com que o visitante se envolva progressivamente como quem ouve uma hist ria Se ela for bem contada grandes ser o as chances de que a escute at o final ou volte para escutar mais Um bom roteiro deve deixar o visitante livre para saltar entre diversos textos sem mudar de tema Deve ser abrangente o suficiente para dar uma ilus o de liberdade sem permitir que se desvie da linha mestra da comunica o Esse processo delicado j que imposs vel prender um visitante a um website A visita sempre volunt ria e a tentativa de bloquear essa liberdade pode trazer o efeito contr rio o visitante se vai e n o volta pois se sente tolhido ou entediado No entanto poss vel manter o leitor
198. para transmitir uma simples mensagem Depois de perceber que n o poss vel conhecer a internet em sua totalidade da mesma forma que n o d para ver simultaneamente todos os canais de uma TV ou estar em todas as festas ao mesmo tempo vem a decep o t o errada quanto a ang stia Isso acontece porque cada nova descoberta apresentada como uma panac ia como um meio que vai suplantar todos os outros trazendo a solu o final Quem acredita nisso se decepciona fazer o qu Quando nada mais resta h o h bito a rotina Aquela mesmice em que nada acontece e tudo extremamente mon tono N o h exatamente um prazer em se fazer novos endere os internet e todas as p ginas t m quase a mesma cara Ou em casos piores o abandono total profissionais que n o se atualizam nem se prop em a reformular seus conceitos Terr vel Em termos Nem todos os casamentos terminam em monotonia nem todos os professores d o aulas ma antes nem todas as crian as enjoam de seus brinquedos da mesma forma que nem todos os designers acabam caindo na mesmice Para isso necess ria uma atitude com rela o ao design calma ningu m aqui vai falar em comportamento pr ativo nem nenhuma bobagem do g nero tomando alguns cuidados para n o ser levado pelo marasmo N o podemos nos esquecer que um designer cria interfaces para que as pessoas que as utilizem esque am que usam computadores Por isso elas precisam ser naturais divertidas e inte
199. permite que uma pessoa esteja em dois ou mais lugares no espa o ao mesmo tempo atrav s de sua estrutura de quadros ou frames divide se a tela em peda os e cada peda o pode mostrar um documento diferente Assim poss vel em uma mesma tela estar consultando um site no Brasil um na Alemanha e um no Jap o A maioria dos sites hoje em dia se utiliza dessa estrutura certamente voc j viu v rios deles Pena que t o poucos percebam a riqueza desse recurso O processo razoavelmente simples um documento inicial com a estrutura dos quadros carregado o frameset e ele avisa o browser quais p ginas vir o em que ordem e posi o Essas p ginas podem estar em qualquer lugar da internet e uma a o em uma pode alterar o conte do de outra O frameset composto por frames que s o documentos web normais compridos ou largos pequenos ou grandes n o importa A estrutura do frameset que ir determinar sua ordem e posi o Um frame pode ter quatro tipos de formatos Fixo sua largura altura definida em pixels Um frame pode ter 100 pixels de largura outro 150 outro 30 Se a soma dos frames for maior ou menor que a largura total do monitor o ltimo ser esticado ou comprimido Percentual suas dimens es variam conforme o tamanho do monitor Um frame pode ocupar 10 do total pouco importa o tamanho da janela Proporcional suas dimens es variam conforme o espa o ocupado pelos outros frames Mi
200. pertexto Hist rias interativas participativas Um sistema de hipertexto via internet permite a constru o de uma hist ria multi autoral ou seja um texto com muitos autores O autor tradicional muda de postura e se torna um coordenador Ele cria uma linha narrativa b sica e alguns personagens com hist rico e car ter difuso Publica os tr s primeiros cap tulos para que o leitor tenha uma id ia dos personagens e de seu ambiente Depois abre a narrativa para que qualquer pessoa possa inserir trechos sugest es ou personagens narrativa principal que passa a ser uma grande hist ria coletiva A estrutura parecida com a de jogos de sal o em que um participante come a uma frase que continuada por outro at que todos os integrantes tenham falado e se chegue a uma hist ria totalmente diferente da planejada A obra coletiva p blica e qualquer colaborador que n o concorde com os rumos da hist ria pode criar narrativas dissidentes Lego Um hipertexto ainda pode funcionar como os blocos LEGO o leitor apresentado a um conjunto de pequenos textos imagens sons e v deos com a op o de combin los vontade at construir uma hist ria sob medida fa a sentido ou n o A essa hist ria podem ser acrescentados v rios elementos para montar um conjunto Desse conjunto ou de suas partes outros se apropriar o e construindo seus pr prios blocos formar o uma estrutura auto alimentada sem final Esse processo pode
201. plesmente englobadas por outras Consideramos para o processo como um todo quatro grandes fases L pis defini o e estrutura 1 a 4 Photoshop design e produ o visual 5 a 7 C digo programa o e testes 8 e 9 e Manuten o lan amento atualiza o e suporte 10 a 12 Para cada fase bom contar com profissionais ou equipes especializadas Antes de come ar re no os profissionais envolvidos todos os que consigo o que nunca passou de 70 da equipe e discutimos o projeto integralmente Acertadas as diferen as de vis o e compreens o as equipes trocam id ias medida que realizam as tarefas at que o projeto esteja finalizado Nas etapas 1 4 6 e 8 fundamental a presen a de um profissional multidisciplinar como um Arquiteto de Informa o Diretor de Cria o ou Coordenador de Projeto para que o material final saia uniforme sem emendas ou diferen as de filosofia Como voc pode ver cada profissional tem metodologia e filosofia diferentes mas todos se baseiam em um conceito s lido e um planejamento seguido risca para que o produto final saia consistente eficiente funcional e muito mais do que simplesmente bonitinho 8 1 Algumas dicas de marketing Deixando as coisas bastante claras este n o um livro de marketing e nem h espa o nesse livro para fundamentar os argumentos deste cap tulo Resumo aqui um pouco do bom senso que tirei de artigos t cnicos livros espec ficos e conversa
202. plinares Do jeito que as coisas andam daqui a pouco morreremos de vergonha das estruturas arcaicas em que cria o criava planejamento planejava m dia veiculava e internet bom internet usava cabelos coloridos roupas inacredit veis e piercings em uma l ngua que falava de termos esquisitos de n meros incompreens veis e inaudit veis mas com um faturamentozinho desprez vel Mas converg ncia das m dias muito mais que um nome bonito para se exibir em palestras e conven es At os gerentes de marketing mais simpl rios dos clientes est o percebendo que sorrateiramente as novas tecnologias de comunica o permitem cada vez mais que as m dias se misturem e se potencializem ganhando uma enorme for a criativa e deixando de ser s as veiculadoras de uma id ia N o que isso nunca tenha sido testado voc certamente j viu outdoors chamando para sites an ncios com CD ROM encartados e programas de TV com e mails mas eram exce es ou alegorias nada corriqueiro Esta situa o est mudando mais r pido que se aprenda a pronunciar click trough rate e se j foi rom ntico o tempo em que uma bela foto um bom t tulo e um texto cheio de sacadinhas bem humoradas conseguiam fazer o consumidor se comover essa poca j era de carros colados em outdoors a velcro em revistas as fronteiras da cria o para a m dia est o cada vez menores Em comunica o digital n o adianta criar apenas uma mensagem legal para ser usada
203. por 50 anos Com isso os desenhistas industriais ganharam prest gio ferramentas e p blico para quest es como legibilidade e unidade visual como ningu m de bom senso imaginaria E at mudaram de nome viraram designers N o vou falar aqui do muro de Berlim ou da Guerra Fria mas quase me formei profissionalmente na que pode ser considerada a pr hist ria da comunica o moderna As c maras de v deo tinham tubos e n o podiam ser apontadas para a luz os programas de TV eram editados usando fitas magn ticas de duas polegadas os est dios de design eram lugares quentes midos e fediam a benzina a ponto de deixar muito assistente de arte completamente doid o Lembro de ter crescido ao som da m quina de escrever do meu pai e me assusto ao ver alunos que nunca conheceram uma boa duma Remington mec nica das que engripam a fita e sujam os dedos da gente Tive que aprender a desenhar um alfabeto inteiro em Times New Roman decalcar Letraset fazer bromuro pestapar fotocomposi o analisar quadricromia Tudo isso faz um temp o foi l pelos idos de 1985 7 veja voc Depois disso veio a democratiza o da produ o gr fica e de repente todo mundo podia fazer an ncios folhetos e cartazes Da o v deo se popularizou a web as tecnologias wireless e broadband j viraram carne de vaca todo mundo usa computador de m o e a TV interativa quase uma realidade Uau Todos t m direito a seus 15 Megabytes de fama e qualquer um
204. poss vel criar um ve culo Eu estava morrendo de medo Na minha cabe a jornalistas seriam puristas demais com rela o a seus filhos editoriais n o permitindo a opini o de ningu m Medo besta mas fazer o qu N o foi na melhor das esperan as que fiz dois layouts para exemplificar a id ia e sugerir revista Veja que criasse uma nova se o Veja Noite com o patroc nio exclusivo da Coca Cola Light A id ia estava mais para mecenato que para patroc nio a Veja teria liberdade total para criar o que quisesse em sua se o Noite contanto que mantivesse a lista completa de bares e restaurantes em um banco de dados e fechasse o patroc nio para a Coca Light Para minha enorme surpresa o editor chefe adorou o projeto e aprovou o integralmente Dei uns 15 gritos depois que deixei o pr dio da Editora Abril pois ainda n o acreditava est vamos inventando um novo tipo de m dia muito mais eficiente que o Banner pois n o demandava nenhuma consulta Os acessos ao site eram mais significativos que qualquer taxa de clicktrough e elevavam um produto categoria de programa no estilo do velho Rep rter Esso O site quando sa mos a noite fazemos duas perguntas 1 O que fazer e 2 Com quem Conforme a idade estado civil ou grau de relacionamento talvez a segunda pergunta seja desnecess ria mas a primeira n o Foi pensando nelas que estruturamos o site O Que Fazer acesso a todas as informa es do banco
205. quando n o se consegue atingir um padr o ideal de beleza de f sico de intelig ncia de efici ncia Ao igualar o real ao eficiente perpetuamos uma id ia positivista em que a acelera o progresso o principal objetivo da vida como um todo ordem e assim minimizamos o valor do contato humano engra ado que as mesmas pessoas que cultivam essa efici ncia do tempo real como viciados at os workaholics se apaixonam por cidades pequenas e reclamam por uma melhor qualidade de vida Ora por que esse tempo n o instant neo n o percebido como tempo para a reflex o Ou tempo criativo Ou como uma caracter stica da pr pria qualidade de vida Talvez isso explique a popularidade de esportes como o Golfe em que o tempo e a caminhada t m um papel importante Plantas para crescer levam tempo Flores s o bonitas porque s o ef meras e demandam cuidado O p r do sol dura poucos minutos e s aparece uma vez por dia E muito mais bonito que um c u inteiro lil s ou cor de laranja como acontece algumas vezes em Cubat o Ao passearmos nas paisagens informativas digitais temos a impress o que nossa cultura se enriquece quando o que acontece o contr rio nos tornamos dep sitos de dados e cita es impensadas n o refletidas Isso d o que pensar Pois no fundo nada do que vemos ao nosso redor real a n o ser a nossa disposi o a aceit lo Problemas e mist rios O linguista Noam Chomsky uma vez
206. que um produto de comunica o digital um programa de computador Por isso ele deve ser amig vel f cil de usar e mostrar ao usu rio o que est fazendo e como faz lo Tr s princ pos da ind stria de inform tica podem ser muito importantes na hora da avalia o do seu website Resposta e di logo E necess rio informar o usu rio das a es do computador quando esperar demoras quando o processador estiver realizando outras tarefas etc A comunica o deve ser breve direta e expressa na linguagem do usu rio evitando o jarg o t cnico Perd o Pessoas cometem erros E importante perdo los Um sistema deve permitir que o usu rio volte atr s na maioria das a es e avisar quais forem irrevers veis Usu rios gostam de aprender como crian as explorando com muita a o e muito feedback Como resultado muitos cometem erros ou exploram mais do que gostariam Uma interface deve ser tolerante e compreensiva ou seja permitir o que for razo vel deixando claro que nada ser quebrado E deve avisar quando entram em territ rio arriscado permitindo os voltar atr s com eleg ncia ou mesmo avan ar sabendo quais s o as consequ ncias Estabilidade percept vel Nos sentimos confort veis em um ambiente que se mant m compreens vel e familiar Para acompanhar a velocidade de processamento e mudan a de um sistema digital os usu rios precisam de alguns pontos est veis de refer ncia a ilus o de estabilidade que
207. r crian a saud vel o faria tentando compreender as riquezas e particularidades do mundo isso e n o um ou outro comportamento fashion que faz do design uma atitude Vivemos uma poca de muitas mudan as Algumas s o t o radicais que parecem ter sido projetadas pela mente delirante de um psicopata Outras nos transportam para ambientes t o esquisitos que parecem ter sa do de um desenho animado psicod lico Essa mudan a de par metros que os pedantes insistem em chamar de paradigmas deixa todo mundo meio perdido com aquela sensa o desconfort vel de se estar no meio de um nevoeiro sem um nico ponto de refer ncia confi vel Afinal tudo o que se cria j velho tudo o que se aprende n o presta pra mais nada e tudo o que s lido literalmente desmancha no ar A World Wide Web abriu fronteiras inacredit veis pela primeira vez os profissionais de layout e artes gr ficas t m acesso a um p blico enorme que pode ver seus trabalhos a qualquer instante Alguns dizem que o conjunto das tais p ginas pessoais a maior exposi o p blica de arte da hist ria Sob alguns aspectos esse p blico at maior que o dos publicit rios pois n o tem restri es de tempo Pela primeira vez esses profissionais v em surgir uma necessidade de comunica o gigantesca pois se uma embalagem ou um cartaz poderiam ser a es espor dicas e restritas um website n o o N o d para reutiliz lo ou mant lo igual
208. r e vis vel A mais est vel e forte delas o c rculo N o tem cantos sim trico com rela o a seu centro e muito simples Esse tipo de figura t o forte que n o se desintegra nem se mistura com os outros elementos do layout e em competi o com estruturas mais fracas vence sempre Al m dos c rculos elipses quadrados ret ngulos tri ngulos e outras formas geom tricas algumas letras e n meros tamb m podem ser elementos sim tricos bastante fortes desde que sejam destacados do texto e mostrados bem grandes V rias dessas formas e figuras fortes s o utilizadas para se organizar os elementos em um layout 1 9 Rela o palavra imagem Os principais elementos para se compor um design s o a imagem e a palavra Eles interagem e se completam transmitindo melhor a informa o Relacion los pode ser uma bela dor de cabe a Quando valorizar o texto Quando valorizar a imagem O que um dever falar O que fica para o outro dizer A forma mais apropriada para se mostrar informa es depende das caracter sticas dos usu rios e da complexidade da tarefa Textos simples s o mais f ceis de se entender do que diagramas simples J esquemas ou situa es complexas s o muito melhor explicados por imagens Ao juntar imagens e palavras de uma forma harmoniosa o designer estar criando uma estrutura para que as pessoas possam usar a informa o Se queremos que nossos leitores sigam uma ordem necess rio gui los e
209. r nada pois essa pr tica pode sujar a imagem de uma empresa e nunca mais acreditar o que o endere o digital seja in dito Um endere o digital precisa estar constantemente atualizado N o se deve usar informa es antigas e deve se tirar do ar qualquer fato errado ou j acontecido As m quinas n o funcionam sozinhas Para um endere o digital eficiente com promo es e interatividade bom ter profissionais para conduzi las atender o p blico direcionar ou responder todos os e mail recebidos O volume de dinheiro gasto em um projeto WWW um investimento Al m de ganho institucional a Internet respons vel por uma grande economia na produ o impressa e sua distribui o Uma empresa deve ser rigorosa ao construir sua imagem na Internet deve falar com profissionais e esperar gastar dinheiro na sua cria o e produ o N o porque a qualidade final baixa para ser vista em um monitor que se deva dispensar um fot grafo profissional ou um sistema sofisticado muito pelo contr rio Os sites web variam muito a maneira com que apresentam seu conte do Vale a pena considerar antes de anunciar o contexto em que as diversas p ginas web e suas faixas publicit rias ser o vistas N o se deve atrair a aten o e os cliques de acesso a qualquer custo se o conte do n o valer a pena Deve se tentar direcionar o visitante para que ele saiba o que o espera para evitar decep es E importante ir rapidamente
210. r tamanho em um monitor Muitas pessoas usam monitores de 800x600 pixels outras de 832x624 ou 1024x768 Mesmo a tela sendo grande nada impede o usu rio de abrir uma janela pequena Como n o existe tamanho fixo nem definitivo para a interface que aparecer na tela o design deve ser bastante vers til para poder se acomodar a qualquer configura o Consist ncia deve existir uma forma coerente de a o para que o usu rio se familiarize com o sistema Ele n o deve ser for ado a tentar adivinhar como o programador pensou muito pelo contr rio Por isso importante achar uma boa solu o de design e mant la por toda a interface As pessoas procuram padr es e formas reconhec veis nos espa os para se orientarem e conseguirem entend los ao entrarmos em ambientes desconhecidos gastamos um tempo razo vel tentando nos situar dentro deles Por isso que muitas vezes ao sairmos de um elevador viramos para a dire o errada Em um website a import ncia da consist ncia ainda maior pois n o h espa os reais nem dimens es fixas Tudo pode acontecer at sermos redirecionados a outro site Por isso importante mostrar para o visitante que ele n o deixou o ambiente Essa consist ncia deve ser visual manter a cara das telas mec nica navega o e conceitual a t nica do site em todas as telas Estruturas de aponte e clique n o lembre se e digite A maior parte das a es se ap ia em reconhecimento n o lembra
211. r tem seus c digos pr prios O que funciona em um pode ter um efeito completamente diferente em outro Por isso t o importante testar o site antes de mand lo para o ar DHTML Como toda linguagem de programa o HTML evolui e cria novas funcionalidades algumas percept veis por qualquer usu rio outras que s o s pequenas corre es de c digo Comandos s o criados aglutinados ou eliminados e nesse processo ela se torna mais est vel e compat vel com um n mero maior de browsers e plataformas j houve tempo em que era necess rio escrever praticamente o dobro de linhas de c digo para garantir que usu rios de Netscape e Explorer vissem a mesma tela Para al vio do programador elas tamb m se tornam mais f ceis de se operar O pre o que se paga por isso que vers es mais antigas de browsers n o conseguem l los Vive se ent o um dilema seu site pode ser mais interessante mas estar acess vel por um n mero mais restrito de usu rios Esse fator limitante pode ser contornado ao gerarmos vers es de sites para garantir compatibilidade ao mesmo tempo que estimula a atualiza o de seus usu rios A vers o 4 0 da linguagem HTML hoje em dia a mais popular Compat vel com as vers es 4 0 ou superior do Netscape e do Internet Explorer uma de suas principais vantagens o trabalho com CSS ou Cascading Style Sheets estilos de layout que podem ser transportados para v rias p ginas em alguns casos levando junto
212. ra a internet parecem ter consci ncia ou dar import ncia a essas particularidades tentando concorrer com a televis o no que ela faz de melhor filmes novelas e desenhos animados sons entretenimento passivo e comerciais Ao fazer isso acabam produzindo um material pobre e se esquecendo das caracter sticas principais da comunica o personalizada via internet informa o sob medida e em diversos n veis de abrang ncia comunica o interativa e personalizada participa o em comunidades de informa o uso de bancos de dados escolha pessoal de conte do e entretenimento ativo e autodirecionado Por isso antes mesmo de pensar em estabelecer qualquer restri o ao seu visitante plug ins tamanho de monitor vers o de browser caixa de som imagine a seguinte hist ria voc passa um temp o cantando aquela sua colega de escrit rio que uma maravilha Voc est meio barrigudo mas de tanto insistir ela topa tomar um vinhozinho e ouvir uns CDs na sua casa que fica do outro lado da cidade Na hora combinada ela chega de t xi Voc a mede de cima a baixo e manda a dar um pulo em uma das lojas da redondeza para comprar um batonzinho sem o qual ela n o entra Afinal um batom n o algo t o caro ou dif cil de se encontrar Algo parecido com a cena do Jack Nicholson no restaurante de Melhor Imposs vel em que ele reclama que teve que descolar um palet para entrar no sal o enquanto ela pode usar um vestidinho caseiro O resu
213. ram Cada detalhe t o importante quanto o todo 8 8 Registro em mecanismos de busca Uma das formas mais comuns de pessoas que nunca ouviram falar de voc e n o fazem a menor id ia de que apito seu website toca chegarem a ele atrav s dos mecanismos de busca sites como Yahoo Cad ou outros como o RadarUOL e AltaVista O registro nesses sites gratuito e bastante f cil por m alguns cuidados devem ser tomados no cadastramento para que ele seja mais eficiente A maioria desses servi os pede para que se escolha uma categoria e se escreva uma descri o do seu site ao submet lo Analise com muito cuidado todas as categorias dispon veis e seu texto antes de envi los Se poss vel at os imprima e leia com cuidado pois uma vez feito praticamente n o h volta s o esses textos e n o o nome da sua empresa que valem nesse instante at porque se o usu rio souber o nome da sua empresa ir direto ao seu site n o passando por servi os de busca Na escolha de categorias uma dica se voc estiver em d vida sobre qual escolher escolha a menos povoada pois h maiores chances de seu site aparecer nela Isso tamb m vale para a inscri o em pr mios e em servi os de hospedagem gratuita de sites 8 9 Auditoria e medi o do tr fego Bill Bernbach fundador da DDB e um dos mais criativos publicit rios de todos os tempos criador entre outras da campanha think small para a Volkswagen costumava dizer qu
214. ramas editores de c digo HTML basicamente de tr s tipos 1 HTML texto editores de c digo puro Parecem editores de texto simples com bot es para a cria o de fun es especiais S o r pidos diretos e eficientes mas como sua interface n o amig vel eles s devem ser usados por pessoas com experi ncia em HTML Esse tipo de programa muito usado por programadores pois d a eles v rias ferramentas de produtividade para gerar um c digo limpo em pouco tempo 2 WYSIWYG gr ficos editores gr ficos lembram programas de layout de p ginas como o Adobe PageMaker ou o QuarkXPress ou mesmo o conhecido Microsoft Word Esse tipo de programa mais usado por designers por causa de sua interface mais amig vel e visual poupando o de mexer nas entranhas do c digo Abreviatura de What You See Is What You Get algo como o que se v o que se obt m esse tipo de programa normalmente evitado por programadores pois d a eles menos controle sobre o c digo gera documentos com linhas desnecess rias de programa o pesados demais ou incompat veis com certas vers es de browsers Mesmo assim para quem n o entende de c digo s o uma m o na roda 3 Online autom ticos existe ainda um tipo de editor feito para quem quer colocar um site no ar e n o faz a menor id ia por onde come ar Muito usado por sites de hospedagem de p ginas gratuitas esse servi o online mostra uma s rie de modelos templ
215. ramos quando dizemos que n o somos iluminados Sem disciplina o talento s metade do caminho E a rec proca pra l de verdadeira O medalhista ol mpico Gustavo Borges treinou por uns meses na piscina do clube que freqiiento Era estimulante ver que mesmo com sua gl ria ele chegava todos os dias no mesmo hor rio nadava suas piscinas humilde e concentrado e ia embora quieto Em compensa o h designers como dizia o fil sofo Nietzsche acreditar que um artista seja genial e n o dar valor a um professor ou engenheiro n o passa de uma infantilidade da raz o 1 3 Carta da Calif rnia Trabalhar com websites me fez conhecer melhor o design gr fico dos Estados Unidos e desconfiar que a diferen a b sica dos gringos para n s estava na escola n o no mercado de trabalho Da recebi esta carta de um amigo que foi estudar na Calif rnia Leia e tire suas conclus es Finalmente terminou o Fall Term no Art Center College of Design Como todo bicho est pido e eu sou bicho no Art Center fiz a asneira de pegar aulas demais e acabei quase afogado em trabalho Durante umas cinco semanas pelo menos dormi menos de cinco horas por noite e vi mais aquela mo a que aparece quando o Illustrator abre do que a minha mulher Aqui dizem que todas as hist rias t m duas vers es a coberta de a car para os parentes ou a verdadeira Vou na vers o Muhammad Ali direto no est mago o Brasil est pelo menos 15 anos atrasado
216. rar partes do c digo sem se preocupar com formata o e outro mais sofisticado para que o redator escreva os textos e j os entregue convertidos em HTML Browsers variados em diversas vers es para testar o resultado em diversos tipos de computadores de usu rios Programas para ilustra es que trabalham com curvas para formas geom tricas bot es e logotipos como Adobe Illustrator Macromedia FreeHand e Corel Draw Programas para retoques fotogr ficos para melhorar a qualidade gr fica das fotografias digitalizadas alterando cada pixel da imagem como o insuper vel Adobe Photoshop Programas de finaliza o de imagens s o usados para reduzir o n mero total de cores de uma imagem e convert la ao formato final O Photoshop a partir de sua vers o 5 5 resolve o problema Programas para a edi o de sons e v deos usados no processo de edi o e prepara o de mat rias primas para uma multim dia Se o produto final for CD ROM ser necess rio um aglutinador ou ferramenta de autoria como o Director ou Authorware da Macromedia para reunir todas as mat rias primas e programa o em um nico aplicativo Um programa de layout HTML de prefer ncia do tipo WYSIWYG Um programa de Upload para transferir o material digital para o provedor de acessos Programas de codifica o para plug ins como Macromedia Flash Real iPix MP3 e Adobe Acrobat 8 7 Controlando as entranhas do c digo N o se pode esquecer
217. rativas Isso s vai acontecer quando o designer mantiver um estado cont nuo de fasc nio e explora o como aqueles professores que d o uma aula espetacular com tanta paix o que at comovem Tenho o imenso orgulho de dizer que meus pais s o assim Cr ditos O livro Design Web Design 2 foi escrito por Luli Radfahrer http www Juliicom br e disponibilizado no endere o http www luli com br dwd2 A convers o para PDF foi feita por Marcus Danillo http danillonunes net usando o software OpenOffice org http www openoffice org e o site Media Convert http www media convert com
218. resa e uma conta em banco para a pessoa jur dica que conforme o dia tamb m servia para comprar cuecas ou pagar cervejas Da mesma forma a conta de pessoa f sica tamb m dava uma for a para saldar fotolitos e disquetes Alguns trabalhos deram certo por absoluto milagre outros por interven o divina Ningu m sentia firmeza no que sabia e isso nos levou a fazer boas amizades com gente de bureau fotolito e gr fica Uns trabalhos deram muito errado dando o maior preju chegamos a perder um cromo original de um cliente pra l de importante fizemos algumas burradas com outros clientes e segu amos em frente sem medo Ali s or amentos eram um cap tulo parte o pre o de cria o variava conforme as necessidades b sicas de um disco do Zappa a um final de semana acampando na Ilha Grande Tom vamos um Jack Daniel s ou um vinho do Porto no fim do dia muitas vezes jant vamos pizza da padaria e Jog vamos sinuca antes de ir para as modorrentas aulas Com o tempo ganhei dinheiro assumi responsabilidades e posei de executivo Eu e minha s cia Sandra fizemos umas escolhas pra l de erradas ficamos estressad ssimos brigamos com amigos viv amos emburrados Mas ao mesmo tempo a Kropki crescia inventamos outras empresas como a Hiperm dia a primeira ag ncia de propaganda digital do Brasil e chegamos a ter 23 funcion rios em um galp o metido a besta no cora o da Vila Madalena Parecia tudo muito legal mas sentia que al
219. rfwear tamb m E nem o designer mais desmiolado pode imaginar um com a cara do outro A velha filosofia de guerra japonesa afirma que se voc conhece a si pr prio e a seu inimigo vencer todas as batalhas Se conhece a si pr prio mas n o conhece a seu inimigo para cada vit ria sofrer uma derrota Se n o conhece nem a si pr prio nem ao inimigo perder todas Por isso antes de se mostrar ao usu rio questione se A quem sua interface se dirige Qual a cara h bitos influ ncias e refer ncias do seu p blico Se voc n o sabe descubra para n o passar rid culo Consulte refer ncias do que eles acham legal e do que acham vagabundo Quanto maior for a identifica o mais adequado ser o design O p blico poder at rejeit lo mas certamente ir ouvir a mensagem Vale lembrar que o design deve ser transparente ou seja fazer com que o produto apare a por suas caracter sticas pr prias e n o ter uma id ia gr fica e tentar encaixar o produto dentro dela por mais art stico que isso possa parecer Ou seja antes de criar necess rio ouvir o p blico tentar identificar seus costumes valores e refer ncias Do que mesmo voc estava falando O que est escrito no texto O design deve refletir seu conte do para que o leitor j saiba do que se trata antes mesmo de ler a primeira palavra Isso funciona como a express o das pessoas quando as encontramos desanimadas euf ricas cansadas
220. s mas com qualidade sofr vel Imagens com bom contraste alto n vel de detalhamento e muitas cores n o suportam muita compress o Cada caso demanda uma compress o diferente dos outros N o existem imagens de alta qualidade que sejam pequenas mas a melhor rela o pode ser conseguida ao se digitalizar o original em alta resolu o e eliminar todas as impurezas da imagem pois o que para n s sujeira como um fundo branco acinzentado por exemplo para o computador considera como informa o Esse trabalho costuma compensar Existe uma vers o progressiva do JPEG que permite o entrela amento da imagem Na maioria dos casos a imagem que carrega gera um resultado feio demais mas sempre vale a pena tentar Usos de imagens em sites Existem quatro tipos de fun o que uma imagem pode realizar em um website e simplesmente ilustrar servir como um bot o com link de hipertexto e agir como um mapa imagemap com reas clic veis e e atuar como uma imagem de fundo Essa imagem ser combinada em uma esp cie de mosaico por isso muito importante tomar cuidado com suas emendas Muitos gostam de usar imagens enormes como fundo N o h nenhum problema nisso contanto que a p gina n o demore muito para carregar Deve se acima de tudo tomar um cuidado especial para que as imagens de fundo n o sejam confusas demais ou tenham muitos elementos caso contr rio poder o comprometer a legibilidade Frames e framesets A www
221. s clientes Nossa vis o exercer papel importante na forma o e sustenta o de empresas l deres Bl bl bl Se pedirmos a qualquer funcion rio da empresa incluindo o que escreveu o texto que nos conte o que est escrito l sem colar poucos saber o A identidade de uma empresa como uma rela o afetiva n o adianta impor nem relatar preciso sentir Se os funcion rios est o realmente comprometidos na busca de excel ncia isso evidente todos est o com os olhos brilhando trabalhando at tarde e super satisfeitos sem pensar em trocar de emprego nem que uma empresa maior ofere a um sal rio maior Se a empresa for assim o cartaz com sua vis o e miss o in til Sen o hip crita a que entra o design de identidade corporativa se uma empresa quer ser conhecida como inovadora ela deve ser realmente inovadora e para que todo mundo saiba disso ela deve parecer inovadora A identidade a express o da vis o de uma empresa e o trabalho do designer exprimir essa inten o em uma forma pura e eficiente em um desenho f cil de ser compreendido S assim seu discurso ser coerente e nico Uma mensagem consistente ajuda a clarear e divulgar toda a vis o de uma empresa Depois de definido o design necess rio aplic lo ou descobrir formas de transmitir essa mensagem nos v rios lugares em que a imagem da empresa vis vel do cart o de visitas ao pr dio Isso n o significa colocar
222. s com profissionais da rea Antes de colocar um endere o digital no ar importante conferir sua qualidade pois muito dif cil recuperar um endere o ruim ou inconsistente Isso significa um investimento em an ncios nos meios de comunica o convencionais para ser visitado novamente Muitas vezes a empresa se decepciona porque pensa que um endere o Internet vai aumentar as vendas Por enquanto isso raro A maioria dos sites serve para divulgar informa es institucionais e servi os contribuindo apenas indiretamente para as vendas Mesmo os sistemas de e commerce enfrentam problemas de confiabilidade e log stica al m de n o poderem dar ao usu rio a satisfa o instant nea de sair com um produto na m o bom procurar saber se o consumidor vai usar as informa es do seu endere o digital sen o ele in til N o se v TV em um site de ag ncia de propaganda n o se participa de sala de chat em sites de empresa n o se procura uma empresa farmac utica para ver dicas de gin stica a n o ser em casos muito espec ficos E muito importante que o consumidor se identifique mande pelo menos seu e mail para receber comunica o futura Isso garante um banco de dados para promo es N o vale a pena colocar um endere o digital no ar s porque os outros colocaram Se n o o primeiro da categoria tente ser o melhor poss vel Apesar de c pias serem f ceis e razoavelmente corriqueira na WWW nunca se deve copia
223. s em correr 4 4 Possibilidades e limita es Falamos mil maravilhas das caracter sticas do design na internet e suas possibilidades mas a realidade bem diferente a maioria dos sites lerda feia e chata s dar uma passeada pelos sites das principais empresas do Brasil que o resultado desanimador a maioria pobre vazia espartana Os que fazem algo diferente criam endere os confusos cheios de informa o irrelevante e de bugigangas tecnol gicas que precisam de downloads lerd ssimos ou travam qualquer computador que n o seja do ltimo tipo n o tenha mundos de mem ria nem esteja usando o ltimo modelo de browser claro que n o s o todos assim Existem exce es louv veis mas s o poucas E isso n o exclusividade brasileira Mesmo estando no ar h mais tempo e terem um p blico maior sites americanos sofrem do mesmo mal Os que fazem melhor se enquadram em sua maioria em duas categorias os bonitinhos cujo layout imita a m dia impressa e os tecnol gicos que falam uma l ngua esquisita e t m mil coisas que piscam e pulam na tela O primeiro peca pela covardia ao n o usar bem os recursos da rede O segundo pelo excesso ao n o entender que usar esses recursos n o quer dizer us los todos de uma s vez A internet tem v rios recursos que os outros meios de comunica o n o t m Os dois principais s o a personaliza o cria o de ve culos que permitem um contato verdadeiramente in
224. s grandes e talentosos amigos fariam se estivessem aqui Um grande abra o Luiz Evandro 1 4 Pensando visualmente Para se fazer design necess rio ver E al m disso conseguir transmitir essa experi ncia visual para seus interlocutores S que ver n o uma tarefa simples e na maiorias dos casos muito subjetiva O que evidente para alguns pode passar despercebido para outros Ou voc nunca ouviu a express o puxa nem reparei Uma imagem diz se vale por mil palavras Acredito que valha um pouco mais algo em torno de oito milh es j que necess rio um espa o de 34 Megabytes mais que todo o texto da B blia para armazenar digitalmente os dados capturados em um negativo 35mm digitalizado em alta resolu o Como as imagens mentais s o muito mais detalhadas que uma simples fotografia f cil entender porque um sujeito barbudo faz com que a gente se lembre de outro barbudo mesmo que os tenhamos conhecido em lugares e situa es completamente diferentes Indo um pouco mais al m na realidade o mundo n o simplesmente tridimensional nossa organiza o dos sentidos que nos faz v lo assim medida em que voc vai lendo este livro outras dimens es est o interferindo na sua percep o S o emo es cheiros tato pensamentos mem rias interfer ncias que simplesmente n o levamos em conta e encaixamos em uma conven o como se nada disso existisse e a leitura fosse simples e lin
225. s necess rio olhar para as estrelas ou se guiar por elas poucos conseguem v las como mais do que um amontoado de pontos brancos em um c u azul preto e pouqu ssimos conseguem sinceramente enxergar qualquer forma o estelar mais sofisticada que o Cruzeiro do Sul ou as Tr s Marias 1 Organiza o entre elementos Uma das primeiras descobertas da Gestalt foi que as coisas t m sua apar ncia n o s pelas propriedades de suas partes individuais mas tamb m e principalmente por sua organiza o Mostraram que podemos ver algumas formas que n o existem na realidade mas cuja rela o entre suas partes sugere Os objetos com que temos que lidar no mundo pr tico m quinas autom veis pr dios etc falam conosco visualmente como grupos organizados e exatamente a rela o entre esses elementos que faz com que reconhe amos um objeto assim que reconhecemos cadeiras feitas dos materiais mais estranhos o mesmo princ pio que nos faz reconhecer se a m sica parab ns a voc est sendo tocada por um rg o uma soprano um coral ou pela Marylin Monroe as pessoas reconhecem as rela es entre as notas mais que as notas em si 2 Imagem vs fundo Depois de reconhecer objetos pelas rela es entre suas partes as pessoas focam a aten o neles e os separam do fundo destacando os Essa separa o muito comum Imagine um livro que voc esteja lendo em cima de uma mesa o livro a figura a mesa o fu
226. s problemas que a profiss o de design enfrenta hoje em dia a falta de par metros s lidos para a sua an lise N o h como analisar uma pe a de design sem levar em conta caracter sticas como dinamismo legibilidade e equil brio e o resultado que a maioria dos clientes aprova ou rejeita baseado em seu gosto pessoal ou na argumenta o do profissional que apresenta a campanha o que pode levar a grandes distor es Pode parecer estranho a quem n o da rea mas quando um designer ou diretor de arte est olhando um anu rio ele est estudando Ele est colecionando refer ncias visuais e vendo como colegas de profiss o no mundo inteiro resolvem problemas similares N o ele n o est procurando uma fonte legal para copiar Ele est se alimentando de refer ncias da mesma forma que um arquiteto pesquisa plantas e um cientista l f rmulas matem ticas aquela velha hist ria de ser o que se come 1 2 Talento vs Pregui a Trabalhando com design ou comunica o qualquer que seja o ve culo ou sua fun o nele voc vai cansar de ouvir falar em talento como se fosse uma palavra m gica Pessoas talentosas s o cultuadas por muitos que as acham iluminadas m gicas divinas Se que conselho vale alguma coisa n o caia nessa Talento muito importante mas n o nada divino Parte dessa hist ria de atribuir genialidade a pessoas com habilidades bem desenvolvidas autodefesa como gostamos muito de n s
227. sabem o que querem uma enorme perda de tempo Outro erro s o os materiais disfar ados que t m um objetivo e fingem ter outro O consumidor pode at se distrair a princ pio mas logo acaba desmascarando a inten o e da fica chato A melhor estrat gia de comunica o a verdade mostre o melhor que o produto tem e diga o que quer diretamente como fazem pessoas produzidas para uma festa Se o consumidor n o estiver interessado n o perder tempo nem se irritar com voc Caso contr rio grandes ser o as chances de uma enorme aporrinha o Voc sabe com quem est falando Cada mensagem a seu p blico crian as n o acostumadas a grandes volumes de texto precisam de letras leg veis e grandes Adolescentes preferem recursos multim dia e fotografias coloridas Na maioria dos casos eles j t m ou n o se importam em baixar um plug in mas s o muito bem informados das novas tend ncias visuais e n o suportam nem respeitam uma c pia Se a publica o for t cnica os fluxogramas e f rmulas devem tomar lugar de destaque e assim por diante N o existe nada mais rid culo que velhos se fazendo passar por adolescentes Cada grupo social ou de interesse espec fico tem sua linguagem pr pria com c digos especiais Quem nunca participou de uma sala de chat pode achar estranho algo como oi pessoALL algu m quer tc comigo MOrina Todos os an ncios de sab o em p parecem ter a mesma cara todos os an ncios de su
228. sentar bem voc e suas id ias Ponha no ar queime um cd ou grave num zip n o leve um portf lio digital numa pastinha de impressos Voc tamb m vai precisar de um e mail para contato N o o utilize para pedir emprego mas para pedir dicas Assim voc mata a d vida do que um portf lio honesto e faz um genial S n o tente ser engra adinho e ntimo demais Lembre se que o mercado pequeno e voc n o vai querer virar um mala logo de cara Assim que voc tiver tudo o que precisa e entrar numa grande ag ncia produtora est dio a coisa funciona assim cheque seus e mails ligue o ICQ verifique a lista de jobs procure o atendimento para saber mais sobre o trabalho porque o briefing nunca est claro reclame do prazo verifique o material dispon vel e chegue conclus o de que n o o bastante Tudo bem real A parte boa com o mapa do site na m o comece a criar Id ia P blico Conte do Tecnologia Refer ncia Arte Texto Fonte Pense estude fa a e refa a Muito suor e tentativas depois mostre para algu m de prefer ncia o diretor de cria o Ele vai ajudar muito mesmo que na hora s pare a que ele est acabando com o seu trabalho Passe para a tecnologia reze para o cliente aprovar exatamente como est e parab ns seu site est no ar 11 Modernidades S o muitos esquisitos os tais tempos modernos As coisas est o acontecendo t o r pido que nos fazem ficar perdidos e sem rea
229. ses da selva africana Os monstrinhos viram realidade e conquistam as corpora es mais tradicionais e voc come a a colecionar cart es de visita com nomes que mais parecem est dios de design ingl s Bellsprout Electrode Diglet Cubone Exeggcute Oddish Tentacool Quando voc finalmente descobre que Dragonair n o uma linha a rea asi tica chegou a hora de desistir Da voc contrata um carinha desses esquisitos para lidar com coisas de nomes que mais parecem produtos do 0800 14 06 Vileplume Poliwhirl Jigglypuff Dugtrio Electabuzz Poliwrath E d vontade de fazer a piadinha n o responda ainda voc ainda pode ganhar um Weepinbell um Victreebell um Exeggcutor um Nidoqueen mas voc n o tem mais humor para essas coisas E corre o risco de parecer o tio da Sukita por isso deixa pra l Palavras horrorosas surgem a cada instante Nidoking Clefairy Wigglytuff Zubat Gloom Ninetails Venomoth Persian Psyduck Golduck Manky Growlithe Machop Machamp Weezing Jinx Magikarp Gyarados Ditto Eevee Aerodactyl Articuno Zapdos Moltres Mewtwo Mew Meyu Desesperado e empapado em suor voc grita Da voc acorda Ufa E percebe que foi tudo um horr vel pesadelo Ao tomar um belo banho gelado sorri por nada disso ser verdade E veste sua roupa clubber coloca o piercing e vai de patinete trabalhar como webdesigner em uma pontocom esperando que o cliente largue a m o de ser burro e entenda de uma v
230. sfeita se interessasse clicasse ou pelo menos se divertisse com os banners mas exatamente o contr rio que acontece Qualquer pesquisa de recall dir o que todos n s sabemos ser bvio que o consumidor em geral n o d a m nima para os banners tendendo a olhar para o site como se eles n o existissem Pessoas com 15 minutos de experi ncia em internet j sabem da quantidade de lixo que circula na web e n o clicam mais Pra piorar muitas das novas tecnologias prejudicam a leitura ou at d o pau no browser o que n o exatamente simp tico 7 4 Qualidade da experi ncia foi bom pra voc meu bem Mais do que aproveitar as caracter sticas particulares da internet necess rio descobrir o que leva uma pessoa a visitar um site qual a vantagem que ela leva l E depois construir o site inteiro em torno dessa vantagem A web funciona como extens o da propaganda convencional enquanto a m dia de massa trata da imagem de produto servi o ou empresa a internet trata de relacionamento informa o e participa o Ela uma das poucas formas de propaganda em que o receptor paga para cada instante de exposi o S o tr s custos e Linha telef nica por mais que as formas de conex o por banda larga sejam realidade sempre vale lembrar que na maioria dos casos o modem ainda est conectado a um fio telef nico e a conta do final do m s pode ser uma surpresa bastante desagrad vel e Provedor de acessos a n o ser
231. signers de TV usam programas de v deo Designers de produto usam programas de modelagem designers de websites usam Flash ou DreamWeaver administradores de empresas usam Excel e n o precisam saber de cor a tabuada do oito a raiz quadrada de tr s ou o logaritmo de doze na base quatro o talento e a dedica o que fazem um designer n o uma roupa colorida e uma atitude fashion N o estou dizendo que n o se deva usar roupas coloridas ou tingir os cabelos de verde pois estaria dando um tiro em meu pr prio p mas que isso n o condi o obrigat ria nem suficiente para ser designer Em outras palavras essa uma profiss o como qualquer outra e se voc for bom vai acabar se destacando mesmo que tenha o fen tipo de um professor de qu mica Ali s muitos amigos meus designers de muito talento n o se intitulam webdesigners e usam roupas normais como gente normal A internet est tomando posse do glamour que j foi da propaganda nos anos 80 atrai pessoas de todos os tipos inchando o ego de muitos e premiando gente que n o tem necessariamente tanto talento assim Convivo com publicit rios e alunos de publicidade h aproximadamente vinte anos e achei que j tinha visto de tudo em termos de arrog ncia e atitude vazia mas percebo que as piores partes desse filme est o sendo reprisadas Ficarei contente quando a internet deixar de ser moda pois isso atrair para a profiss o somente gente s ria e compenetrada disposta exclus
232. signers delirantes que prop em ao cliente sites com telas iniciais de 400K ou mais mas poucos pensam em usu rios das classes C D ou terceira idade Enquanto os produtores de sites brasileiros n o descobrirem que n o est o nos Estados Unidos e come arem a preparar material compat vel com o p blico suas necessidades anseios equipamentos e infra estrutura telef nica a internet n o ser levada a s rio como ve culo de comunica o O resultado pode at ser bonitinho mas quem se importa sempre bom lembrar que os programas de TV ainda s o compat veis com receptores em preto e branco Seu site pode usar todas as tecnologias avan adas do mundo contanto que isso agregue valor a seu conte do Mas lembre se sempre que ele um ve culo de comunica o e deixe sempre uma vers o para quem n o tem uma m quina poderosa Afinal de contas audi ncia n o se joga fora Toda TV um aparelho multim dia Existe um lugar sensacional para se passar v deos chama se televis o um aparelho multim dia bacana pois tem at controle remoto e permite que o usu rio se refestele em um sof enquanto janta e assiste Comparada com ela a internet pobre feinha limitada e bastante sem gra a Por que se preocupar ent o Porque a web n o um canal de TV a cabo nem uma alternativa para a videolocadora Pelo menos n o por enquanto Por mais bvias que sejam as diferen as entre essas duas m dias poucos que preparam conte do pa
233. sitante quer sempre mais espera mais quer informa o trocar id ias dar a sua opini o Ele est completamente concentrado na frente do monitor por isso t o exigente e impaciente Por isso Os sites devem respeitar conceitos como legibilidade contraste estrutura e acima de todos esses projeto gr fico N o adianta sair criando p ginas adoidadamente em um website sem um planejamento baseado em uma firula gr fica uma teoria esot rica ou no planejamento do pessoal da inform tica Isso n o pode dar certo A adapta o de formato um recurso conhecido da propaganda Um an ncio de m dia impressa um comercial de TV e um spot de r dio devem ser adaptados para se aproveitar ao m ximo as caracter sticas de cada m dia De nada adiantaria filmar uma fotografia est tica e narrar seu texto para adaptar um an ncio para a TV Tamb m n o adianta apesar de ser muito comum tirar a trilha sonora de um comercial e toc la no r dio Infelizmente pouca gente pensa nisso e produz material especialmente para a internet e o resultado um desastre sites est ticos e sem gra a ou parecidos com jornais ou tentando imitar os efeitos da televis o A propaganda precisa mudar para dar certo na internet Se a m dia de massa empurra informa o para o consumidor na web ele coleta o que quiser preciso entender como a web funciona e aplicar esse conhecimento N o adianta criar pop ups drop downs intersitials push media
234. site est bem feito e estruturado um assunto levar a outro e n o ser preciso voltar para a tela inicial e recome ar a navega o Excesso de texto ou letras em corpos pequenos mais dif cil ler em um monitor do que em uma folha de papel Usar imagens escuras demais densas ou que demorem para carregar o usu rio de um sistema digital est com toda a sua aten o voltada para o monitor por isso tende a ser mais exigente e impaciente Pode notar que um telespectador espera com tranquilidade os dois a tr s minutos do comercial de TV J na web 5 2 Elementos de uma interface Qual o assunto Uma interface precisa ser bastante clara e objetiva Deve deixar evidente onde para se clicar e onde n o N o pode dar margens a d vidas e ambigiiidades Acima de tudo um instrumento de comunica o por isso deve transmitir a informa o da melhor forma poss vel Mesmo que o usu rio n o goste de um website importante que saiba do que se trata Isso n o quer dizer que deva colocar frases do tipo clique aqui para entrar ou outras besteiras do g nero n o desse tipo de objetividade que estamos falando Isso ofende a intelig ncia do usu rio e s dificulta a comunica o O importante dar certezas ao usu rio Um website uma apresenta o uma demonstra o uma aula E deve se comportar como tal Acima de tudo deve ser previs vel e f cil de usar dando acesso a toda a informa o da forma ma
235. soas reais ou mesmo que n o sejam experi ncias reais O conte do n o importa o importante pertencer Fala se por a que a internet uma rede de computadores interligados Bobagem A internet uma rede de pessoas conectadas isso sim Pessoas com experi ncias anseios id ias e acima de tudo uma intelig ncia que est muito longe de ser artificial O servi o About com dos Estados Unidos identificou essa tend ncia e montou um portal em que gente comum com interesses pra l de corriqueiros ganha espa o para falar sobre aquilo que especialista seja profissionalmente ou o que muito mais interessante um hobby Assim se voc precisa saber algo sobre anestesiologia ou quer um guia de viagens com dicas completamente isentas t o isentas que podem at estar desatualizadas este o lugar gente aut ntica informa o aut ntica com todas as suas incorre es como se fal ssemos com elas ao vivo Um belo exemplo do que chamo de rede de pessoas 12 3 Ansiedade de informa o Muitas pessoas se angustiam ao entrar em contato com a internet ou com grandes sistemas baseados em hipertexto pois perdem os par metros de tamanho Outras se desesperam porque desligam o computador e sabem que a internet continua funcionando Outras ainda se irritam porque o computador evolui muito mais r pido que podem acompanhar Procurar informa es na rede pode gerar a s ndrome da fadiga da informa o como batizou o psi
236. ssa hist ria de ficar duas horas sentado em uma sala escura de uma chatice incompar vel Pela primeira vez em mais de 3000 anos o design m vel e participativo Pena que poucos saibam disso e se preocupem em estruturar sites adequados realidade do que est o promovendo Pois nunca em toda a hist ria recente das comunica es um meio foi t o livre de dogmas e estruturas Algumas caracter sticas para se levar em conta Adimensionalidade um produto de comunica o digital n o tem dimens es f sicas nem h como saber o volume de informa o dispon vel estimulando a investiga o Alinearidade o conte do pode ser consultado na ordem e conex o que o leitor quiser Disponibilidade os documentos est o sempre m o Hipertexto cada assunto abordado em um documento pode apresentar diversos n veis de profundidade conforme o interesse do leitor Manipula o um mesmo conte do pode ser visualizado alterado e transformado v rias vezes Multim dia ao combinar dados em diversos formatos som fotografias v deos desenhos animados e texto esses meios permitem uma comunica o mais abrangente e espec fica como um jornal com som uma TV com texto imprim vel ou um r dio com imagem Multim dia em uma estrutura de hipertexto chamada de hiperm dia Participa o o receptor participa no processo de comunica o de forma ativa determinando que mensagens quer escutar definindo quando quer ser emissor
237. st o habituados a beber vinho em restaurantes e enchem seus copos at transbordarem Ou como novos ricos que misturam todas as cores e perfumes poss veis em combina es inacredit veis Precisamos salv los de si pr prios e de sua inseguran a destrutiva tarefa do designer orient los e apoi los para que se chegue a resultados elegantes O argumento inicial na maioria das vezes olha como est o fazendo l A gente poderia seguir na mesma linha o que d seguran a ao cliente e o deixa mais receptivo a coment rios N o adianta nada brigar com o cliente nem tentar impor uma vis o j que gosto n o se discute e o dinheiro dele A outra grande dificuldade est no pr prio designer que muitas vezes quer fazer de um novo site o showcase de novas tecnologias para mostrar que capaz O resultado costuma ser como os portf lios de gr ficas coisas medonhas usando prata coisas feinhas usando verniz coisas pavorosas usando papel importado coisas de arrepiar usando impress o em seis cores Um cartaz pode ser lindo ou conforme seu ambiente ser mais um elemento para contribuir com a polui o visual A base da simplicidade uma regra de outra escola alem a Bauhaus less is more ou seja na simplicidade de uma comunica o est sua grande sofistica o Existem bons exemplos de cartazes compostos com mais de 30 fam lias diferentes de letras mas s o casos raros de designers muito habilidosos Quando mais de
238. sto Todos os formatos podem se misturar o que d um controle maior para o frameset Framesets podem estar dentro de outros framesets e essa estrutura pode se prorrogar indefinidamente Uso muito a estrutura de frames em meus sites para ampliar a quantidade de informa es dispon veis e maleabilidade Apesar de todos os recursos dispon veis a maioria das pessoas usa frames para duas fun es b sicas Centralizar as p ginas como n o h controle do tamanho do monitor do visitante muitos designers querem garantir seu layout com estruturas do tipo lt FRAMESET ROWS 400 gt ou do tipo lt FRAMESET COLS 600 gt limitando a largura e a altura do monitor do visitante a 600x400 pixels Esse recurso controverso pois prejudica os usu rios que t m equipamento melhor nivelando por baixo como a chuva em corrida de F rmula 1 ndice divide se a tela em duas partes uma fixa que fica normalmente esquerda ou na parte de cima com uma lista de todos os links dispon veis E outra vari vel com as p ginas propriamente ditas Esse processo sacrifica em m dia uns 20 a 25 da rea til com uma informa o dispens vel Ou voc acha fundamental mostrar o ndice em todas as p ginas de uma revista ou jornal Se para seu projeto a barra de navega o fundamental pelo menos tente minimizar seu espa o evitando grafismos colocando a na horizontal ou na forma de um menu drop down Tabelas Os docum
239. strando o que n o muito dif cil considerando que n o d para se saber o real tamanho de um site vale sempre a pena colocar guias de orienta o mapas barras de navega o menus mecanismos de busca e assim por diante Navega o inconsistente quer coisa pior que estar noite em um bairro desconhecido e perceber que se est andando em c rculos Pois assim que alguns dos sites nos deixam quando est o cheios de links quebrados estruturas confusas e muitos cliques at chegar informa o desejada Design e layout ruins letras voadoras ou que mudam de forma bom deixa para l Texto inadequado jarg o termos t cnicos excesso de intimidade e o pior erros de portugu s Falta de cuidados com os detalhes imagens escuras demais fundos mal recortados legibilidade ruim tamanho ou cor de link inconsistente imagens ou documentos inexistentes s o coisas t o deplor veis quanto um cadar o desamarrado E muitas vezes fazem com que seu layout tome um tombo equivalente Design prejudicando o conte do muito cuidado com o design e nenhum com a estrutura navega o ou performance o equivalente digital daquelas pessoas bonitas demais que ficam se olhando no espelho o tempo todo Qual a imagem que fazemos delas Ora bonitinha mas ordin ria Websites em constru o desatualizados todos os sites de toda a internet est o e estar o sempre em eterna re constru o Se n o h m
240. sua aplica o ideal em palavras isoladas em uma frase como em todos os banc rios disseram que iriam entrar em greve se n o fossem atendidos Uma frase inteira em negrito acaba soando como uma ordem um par grafo ou texto inteiro em negrito perde seu valor ret rico Nosso c rebro n o est acostumado a ler as letras individualmente mas em blocos de palavras Por isso t o comum quando estamos distra dos lermos palavras que n o est o no texto e n o t m nada a ver com seu conte do na realidade confundimos seu desenho com outra de desenho parecido como pato gado pote gota etc As letras min sculas com seu desenho particular e hastes ajudam a nossa compreens o enquanto as mai sculas com sua estrutura quadradona fazem com que tenhamos que identificar as palavras letra a letra reduzindo drasticamente a velocidade de leitura Um texto COM TODAS AS LETRAS EM MAI SCULAS lido muito lentamente e s deve ser usado em situa es de muita nfase Na web o equivalente de um grito Fam lias de letras do tipo cursivo que imitem a caligrafia n o devem ser dispostas em mai sculas pois n o foram feitas para isso H lico foi criado originalmente na It lia para reproduzir a escrita do Papa e economizar espa o no papel Seus inventores s o os tip grafos Aldus Manutius e Francesco Griffo por isso seu av ainda chama o texto em it lico de grifo A inclina o do eixo das letras faz com que se mude a veloci
241. ta com O c rebro mente est todo o tempo a fazer uma s ntese da informa o que chega dispersa Se essa informa o muita e chega muito r pido pode amplificar quadros de patologias ansiosas A mente continua a mesma N o haver uma revolu o do lado de fora se n o houver algo proporcional do lado de dentro necess rio um posicionamento cr tico com rela o a essa avalanche de informa o A maior dificuldade que temos para isso nossa total falta de refer ncias Em um mundo digital e interconectado que se modifica rapidamente e exige de seus integrantes um poder de decis o cada vez mais abrangente um erro pode causar uma cat strofe como as que vemos no mercado financeiro Essa constante exig ncia amea a o ser humano e o deixa acuado pois n o compreende o universo digital nem sabe como se posicionar com rela o a ele Isso sem d vida uma das maiores causas de estresse ansiedade e ang stia da modernidade 12 4 O ciclo da descoberta Repare como um beb v o mundo sua volta olhos arregalados m os tentando pegar tudo que estiver ao alcance um fasc nio total s observar e voc ver que o mesmo acontece com crian as aprendendo a escrever ou a andar de bicicleta adolescentes diante de um carro novo casais rec m casados pais diante do primeiro filho ex inquilinos em sua primeira casa pr pria microempres rios no novo escrit rio professores na primeira aula namorados no
242. te Para come ar na forma ela um cubo Em cada uma das suas seis faces existe uma capa diferente dizendo respeito a um conte do diferente Ao abrir a revista mais surpresas as p ginas n o t m numera o nem ordem fixa Podem ser lidas em qualquer segii ncia como fichas soltas medida que as p ginas s o lidas a sua ordem se altera As mat rias n o t m fim v o se misturando e complementando de tal forma que a impress o que se tem que todo o conte do um artigo s emaranhado e complexo Esse conte do pode ser lido rapidamente como um resumo gil e sint tico Ela seria uma revista viva que funcionaria como um bate papo com um especialista no assunto se voc quiser saber muito pode passar horas conversando e aprender um mont o de termos t cnicos Se s quiser uma no o geral em cinco minutos ter toda a informa o que precisa Revistas assim s s o vi veis na web como revistas que s tenham p ginas triplas dobr veis com furos que permitam ler duas mat rias ao mesmo tempo ou cujo texto vivo e se mexe e cujas imagens s o v deos A riqueza da m dia bem maior do que foi quando come amos a ver cor no material impresso O meio digital tem v rias particularidades que nunca existiram antes e completamente diferente de todas as outras m dias mas leva peda os de todas elas A web gil como o r dio abrangente como o jornal rica como o videogame envolvente como a TV em alguns casos m
243. ternet o e mail A web para a maioria dos velhos usu rios um lugar com 99 9 de puro lixo a tal ponto que n o vale mais a pena garimpar Hoje em dia para o usu rio n o o fato de clicar que faz a diferen a mas o que h de verdadeiro e significativo por tr s desse clique Ele aprendeu a valorizar se como cidad o de um universo segmentado e espec fico ainda que virtual e n o engole mais qualquer besteira Sabe que seu tempo precioso e olha para a web com muita desconfian a Se for poss vel ter acesso ao que precisa de um simples esclarecimento compra de um drive de DVD ROM com o m nimo de esfor o essa ser sem d vida sua escolha A interatividade s o tempero de um website Se n o colocar nada ele fica insosso besta desperdi ando uma das caracter sticas mais ricas do meio Se colocar demais n o d pra encarar A arte est em escolher o ponto mesmo que seja o de comida baiana mexicana ou indiana s vezes s estamos procurando por informa o na internet N o queremos participar brincar Jogar interagir nem ver um mont o de fotos bonitas e joinhas quanto mais f cil e direto for seu acesso melhor Sob esse ponto de vista n o estranho o que sites de comunidades descobriram de especial humanos Pode at parecer um paradoxo para quem ainda n o est acostumado com a internet mas j que todo mundo tem tecnologia bancos de dados e sistemas seguros um consultor humano com todas as
244. tidade corporativa de uma empresa como ela se coloca perante o mundo Essa identidade est em cart es instala es folhetos cartazes propaganda website em seus funcion rios no que a imprensa diz seu posicionamento estrat gico na sociedade uma geral da empresa A primeira coisa que vem cabe a quando falamos em identidade visual de uma empresa seu logotipo Isso acontece porque o logo para os ntimos normalmente o primeiro e muitas vezes o nico contato que ela ter com seu p blico Por isso t o importante e deve sintetizar todos os elementos que diferenciam essa empresa do resto Um bom logotipo muito mais que um desenho bonito ou uma sacada visual uma declara o de inten es e n o deve deixar d vidas Algum desses gurus de administra o em uma a o delirante definiu que as empresas deveriam ter impressas em um cartaz e coladas em todas as paredes significativas sua vis o e miss o empresariais Se voc nunca viu um cartazete desses sorte sua normalmente um treco meio bvio ufanista e complexo Diz algo como Nosso objetivo visa Excel ncia na qualidade dos servi os dentro dos ambientes interno e externo Para alcan ar a nossa meta h um efetivo comprometimento entre os componentes da equipe em exercer um papel estrat gico na forma o e sustenta o de empresas l deres Nossa Miss o fornecer compet ncia em marketing visando ao sucesso e perenidade de nosso
245. to quais s o suas queixas com rela o aos servi os prestados hoje 6 Ele tem todos os dados que quer publicar textos fotos pessoas de contato estrutura f sica Em que estado est esse material Ser necess rio reverbalizar ilustrar traduzir ou refotografar Existe alguma possibilidade de esse material ser entregue em formato digital 7 Que tipo de resposta surpresa divers o chamada a o informa o se pretende do usu rio Perguntas a se fazer ao est dio 1 Qual o produto Existe uma clara defini o do que se quer O cliente conhece a tecnologia e sabe o que esperar de seus efeitos Como est o as expectativas 2 Existe uma clara defini o do volume de trabalho promessas e limites de produ o prazo m ximo n mero de layouts ou horas limite Alguns servi os que parecem f ceis podem se tornar verdadeiros pesadelos quando esse requisito n o cumprido 3 Quais s o as ferramentas mais adequadas n o importa se voc as tem ou n o para a realiza o da tarefa Isso importante para se ter uma vis o realista do projeto 4 Quais ser o os profissionais externos envolvidos fot grafos redatores ilustradores Existe a necessidade de se contratar auxiliares ou profissionais de produ o 5 Quais ser o as tecnologias envolvidas para fazer o produto JavaScript DHTML Real Flash CGI Existe a necessidade de se terceirizar alguma infra estrutura t cnica ou servi o especial 6
246. tr s fam lias s o misturadas em uma p gina o resultado normalmente ruim Essa mesma regra vale para cores efeitos especiais caixas sombras sublinhados setas textos em negrito ou it lico e outros elementos Na d vida prudente simplificar um layout simples na pior das hip teses pode passar despercebido Um layout polu do tem tantos elementos disputando a aten o do leitor que a comunica o se perde como uma conversa em uma feira Ao tentar construir mundinhos em seus websites muitos designers esquecem do mundo real de suas linguagens e s mbolos N o necess rio reinventar a roda verde quer dizer ir vermelho parar Textos grandes ou em negrito s o mais importantes que textos pequenos A leitura da esquerda para a direita e fotos costumam ilustrar o que lemos Soa familiar O que n o significa que um website tenha que mimetizar a realidade muito pelo contr rio Os primeiros sites de bancos tinham imagens em 3D simbolizando uma ag ncia virtual com um resultado evidentemente falso e rid culo Pegou t o mal que hoje em dia dif cil ver websites assim Isso acontece porque a met fora deve simbolizar o que um elemento significa na vida real n o sua verdadeira forma A est a verdadeira simplifica o 6 Legibilidade Voc consegue ler os textos do seu site Facilmente Ent o est bom N o Ent o n o presta T o simples assim Radical demais Bom isso s a minha humilde opini o Mas vamos
247. trabalhar com bons profissionais e grandes verbas por isso precisa ser mais talentoso para aparecer J que um curr culo n o vale nada para a rea criativa ou quase nada seu verso pode ser usado como rascunho para alguma boa id ia ou para anotar recados de telefones o neg cio caprichar na pasta Se sua primeira tentativa de emprego coloque trabalhos escolares volunt rios ou fict cios ningu m est preocupado em saber se eles existiram de verdade o importante mostrar talento Mostrar ali s uma palavra chave Para se apresentar material desenvolvido para a web n o necess rio marcar uma entrevista basta um e mail com os endere os digitais que se tenha criado ou com uma p gina pessoal Lembre se que mentira tem pernas curt ssimas e se voc mentir seu papel em uma pe a v o questionar todas as outras sem exce o Outra coisa se voc n o tiver orgulho de uma pe a n o a mostre melhor uma pasta com poucos e consistentes trabalhos que uma penca de balangand s Id ias s o obras coletivas se for avaliar uma pasta leve em conta as parcerias Se s h uma id ia boa parab ns ao chefe ou ao companheiro de equipe Se h v rias id ias boas verifique os nomes das fichas de cr ditos quanto mais nomes melhor o profissional Ou nas palavras de Angela Bassichetti Se voc est come ando vai precisar de um portf lio Ainda n o precisa ser genial Tem que ser no m nimo honesto apre
248. tre dois pontos necess rio haver o mar o espa o uma estrada um elemento intermedi rio entre eles Quando um computador brasileiro acessa um endere o internet nos Estados Unidos h uma navega o de verdade realizada pelos impulsos eletr nicos mas n s n o temos a menor consci ncia dela Se com um clic do mouse deixamos o Brasil e vamos parar na China e de l para a Fran a n o existe navega o para o usu rio Podem at existir rotas compostas por saltos mas n o h espa o intermedi rio Por esses motivos o processo tamb m pode ser comparado a uma pescaria o usu rio do sistema procura uma informa o captura a em algum servidor e a traz para seu computador N o existe preocupa o com navega o ou com a ordem e intercala o de p ginas em design gr fico pois todos sabem como navegar atrav s de um livro ou revista s virar as p ginas O mesmo vale para sistemas lineares passivos como a TV ou r dio que o receptor n o precisa fazer nada Na comunica o digital a estrutura das p ginas e a forma de l las varia conforme o caso por isso fundamental guiar o leitor Tipos de roteiros Para se fazer um texto comum linear e unidimensional como este que voc est lendo preciso organizar as palavras em frases par grafos e assim por diante tomando todo o cuidado para que sua concatena o de id ias n o disperse o leitor mas ao contr rio cative o cada vez mais Como um hipertexto tem s
249. u cheiro ou fotografia s o elementos completamente diferentes mas equivalentes para a mente Essa a id ia b sica da representa o gr fica das interfaces 6 3 Hipertexto Voc sabe a diferen a entre super e hiper As duas palavras querem dizer a mesma coisa exagero excesso Uma latim super e a outra grego hiper Hipertexto quer dizer a mesma coisa que supertexto um texto enorme que comunica muito Mas ao mesmo tempo diferente da Encyclop dia Britannica O hipertexto funciona como uma segii ncia de documentos interligados O internauta que navega em p ginas de hipertexto vai acumulando conhecimento at se satisfazer Se esse encadeamento de textos re ne outras m dias som fotos v deos etc o que se tem um documento multim dia com recursos de hipertexto ou simplesmente uma hiperm dia Hipertexto e hiperm dia s o formas melhores de se acessar a informa o que as m dias comuns lineares Usando hipertexto o usu rio pode se mover atrav s de estruturas de informa o n o sequencialmente mas fazendo pulos entre os v rios tipos de dados de que necessita Com hiperm dia pode se acessar a informa o expressa em uma enorme variedade de formatos Uma das maiores atra es dessas tecnologias sua capacidade de suportar um m todo mais natural de se processar informa o pois elas funcionam de uma forma parecida com a mente humana que n o recebe a informa o linearmente
250. uditoria e medi o do tr fego 98 pergunta 31 8 10 Manuten o e acompanhamento do 4 1 Design gr fico vs design digital usu rio 99 berimbau n o gaita 32 9 Equipe 101 4 2 O que voc precisa saber 34 9 1 O webdesigner esse pobre centauro 102 4 3 O que voc n o precisa saber 45 9 2 Incuba o e novos produtos 104 4 4 Possibilidades e limita es 46 10 Vamos falar de voc 105 4 5 Tecnologia 4 10 1 st di 1 4 6 P ginas pessoais 50 10 2 Seu portf lio e promo o como tornar 5 Interface 51 as suas pe as conhecidas 109 5 1 Caracter sticas de uma interface 52 11 Modernidades 111 5 2 Elementos de uma interface 54 12 Comunica o n o linear se que ela 5 3 Por uma est tica digital 56 existe 117 5 4 Interatividade 57 12 1 Hiperespa o e ciberespa o 120 6 Arquitetura de informa o 58 12 2 Comunidades digitais as novas igrejas 6 1 Design estrutural 61 partidos padarias 121 6 2 Grupos de dados 62 12 3 Ansiedade de informa o 122 6 3 Hipertexto 63 12 4 O ciclo da descoberta 12 6 4 Roteiros 65 Cr ditos 125 Introdu o Curiosidade inova o e descoberta o desafio do design digital Quando eu era pequeno sonhava ter um tipo de caneta diferente uma caneta que me permitisse desenhar objetos tridimensionais em pleno ar Queria desenhar uma pir mide F cil come aria desenhando um quadrado no papel e depois puxaria a caneta para cima e a pir mide iria se materializando no
251. uela roupa que n o combina e ningu m sabe dizer o porqu tremendamente pedante dizer que um leitor ir notar uma coluna de texto que esteja 0 2mm mais larga ou que algumas imagens estejam levemente desalinhadas mas algo na diagrama o o incomoda e o mal estar persiste O designer deve ser pedante e detalhista quando o assunto em quest o for o layout em que se est trabalhando Perfeccionista obstinado ou chato s o outros adjetivos cab veis Deve se desesperar e se irritar por bobagens que ningu m repararia pois afinal tamb m para isso que ele foi contratado Um velho ditado em est dios de ag ncias de propaganda que a pressa passa e a porcaria fica ou seja na hora em que o trabalho final estiver pronto nenhuma desculpa ser v lida para um deslize por menor que seja Essa preocupa o bvia e f cil de se compreender em outras profiss es por melhor que seja o cirurgi o pl stico ningu m admitir que ele quebre um dente de um paciente durante a opera o por melhor que seja o pol tico todos reparar o se ele fala menas coisa ou cem real por melhor que seja o gar om nenhum cliente o suportar se ele enfiar o dedo no prato de sopa Aos que realmente acreditam que o talento o principal e que ele justifica quaisquer aberra es lembro que boa parte da gra a de uma piada vem da habilidade de seu contador O talento por si s n o justifica tudo muito pelo contr rio Se n
252. uele sujeito que nos fechou o carro no tr nsito Ser que t o dif cil fazer comunica o para esses caras Ser que preciso fazer an ncios com cones Que alguma multinacional com foco na latinoam rica venha nos dizer como fazer comunica o com seus sites que lembram novelas Televisa Honestamente eu duvido Est nascendo uma cultura popular digital N s somos as suas tias acostumadas com Jeannie um G nio e achando que isso televis o Os novos Spielbergs est o agora em casa sujando fraldas ou Jogando videogames e n o se preocupam com o que vem pela frente Nunca teremos sua vis o mas podemos estar preparados para eles Tempo irreal Um termo muito usado para definir a cultura de resultados instant neos em que vivemos o tal tempo real que simboliza o instant neo o tudo ao mesmo tempo agora S que n o h nada verdadeiramente real em tempo real e certamente nada de humano nele Se voc parar para pensar vai ver que a demora e a espera o que nos d contato com o mundo de verdade Esperar por um prato pode ser um bom motivo para papear como esperar pela conta ou por um cafezinho Ou esperar o sol se p r o dia raiar o chuveiro esquentar Uma mulher esperando um beb parece t o serena Do mesmo jeito que aquele sujeito distra do que olha pela janela vendo a paisagem enquanto o nibus n o chega a seu destino Crian as esperando pelo Natal s o t o radiantes etc N o d para radicalizar diz
253. uitetura de informa o de uma grande massa de dados O que uso envolve as etapas 1 Identifica o do problema Classifica o de suas particularidades Levantamento de dados Defini o de estruturas hier rquicas LATCH Aglutina o de temas relevantes Estudos de navegabilidade e Er ON SA o D Pontos de interatividade Com esses t picos bem detalhados d para se ter uma no o completa do universo de informa o dispon vel A partir disso definimos o mapa de estrutura do sistema que pode ser feita como um organograma como um grupo de conjuntos matem ticos e suas intersec es ou usando um conjunto de c rculos conc ntricos m veis para definir sua estrutura organizacional tanto faz O importante mostrar os caminhos que o usu rio possa percorrer no sistema Esse processo n o uma obra pessoal nem art stica Ele deve considerar o conte do e como a informa o servir ao usu rio Independente da vontade do designer deve se concentrar na resolu o de problemas Com o progresso dos sistemas digitais e das interconex es de hipertexto importante dar s pessoas ferramentas cerebrais para a administra o dos vastos volumes de informa o que surgir o nos pr ximos anos Design de informa o visualizando estruturas Pronta a estrutura de informa o hora de torn la vis vel avaliando seu contexto e deixando o usu rio vontade nesse ambiente desconhecido a que entram as barras de n
254. uma revista seus an ncios n o t m nenhuma rela o entre si S o layouts independentes cada qual com sua fam lia de letras contraste e alinhamento e disposi o de fotos J p ginas editoriais levam elementos estruturais barras tipografia n mero de p gina colunas fotos que t m uma ordem impl cita bastante r gida Existem pessoas que querem fazer em cada p gina de revista ou documento de um website um layout diferente com tipografia cores espa os e fundos pr prios Isso normalmente n o funciona pois n o d unidade e desorienta o usu rio a tal ponto que ele pode se perguntar se ainda est dentro do mesmo site 5 Simplifica o Voc j ouviu falar em chic simple uma categoria de objetos b sicos ao mesmo tempo que tremendamente elegantes fundamentais no dia a dia S o cl ssicos como um isqueiro Zippo ou uma camisa branca de algod o ou uma cal a Levi s 501 Apesar do nome a simplicidade e eleg ncia s o dif ceis de se conseguir pois t m um enorme poder de s ntese simplicidade requer objetividade firmeza clareza de mensagem e eleg ncia de design N o uma p gina branca com uma foto e um texto uma p gina em que o branco ocupa um lugar preciso e estudado A primeira dificuldade que temos em simplificar est no cliente muitos confundem simplicidade com pobreza e querem mais elementos mais cores mais brilhos mais anima o mais luz Eles n o t m culpa s o como pessoas que n o e
255. uma vantagem no processo Na introdu o de seu livro Information Architects Wurman define poeticamente a avalanche de dados dos tempos modernos comparando a a uma tsunami onda gigantesca provocada por terremotos submarinos H uma tsunami de dados quebrando nas praias do mundo civilizado uma onda de informa o n o relacionada e crescente formada por bits e bytes vindo em uma desorganizada incontrol vel incoerente cacofonia de espuma Nada nela facilmente relacion vel nada vem com organiza o metodol gica medida que ela quebra nas praias vemos pessoas com suas cal as e sapatos molhados andando estupidamente em dire o gua sorrindo um falso sorriso de confian a e controle A tsunami uma parede de dados dados produzidos em uma velocidade cada vez mais r pida em volumes cada vez maiores para se armazenar Volumes que aparentam dobrar a cada dia Mais r pido mais e mais e mais Para Wurman as formas de se organizar informa o s o finitas e sintetizadas pela sigla LATCH Local mapas Alfabeto Tempo per odos hist ricos e linhas de tempo Categoria grupos gen ricos como verduras em supermercados ou vitaminas em farm cias e Hierarquia do maior para o menor do mais claro para o mais escuro S cinco formas veja voc Qualquer outra forma que tentei acabou recaindo em uma dessas acima claro que podemos combin las em diversos n veis Uma lista telef nica de assinant
256. unca teremos tempo para aproveit los mesmo que hoje em dia tenhamos uma expectativa de vida saud vel e produtiva muito maior que a dos nossos av s Mas ser que a tecnologia algo t o estranho ao ser humano Ou ser exatamente o contr rio n o seria a tecnologia um dos ingredientes mais essenciais da humanidade O que nos destacaria das outras esp cies sen o uma irrita o e uma insatisfa o geral com o estado das coisas a ponto de procurarmos sempre mud lo N s macacos pelados desde o Homo Habilis inventamos ferramentas para modificar o mundo e nunca nos satisfizemos com elas a tal ponto de estarmos mais para Homo Dissatisfactens que para Sapiens De qualquer forma n o h como parar o progresso Os regimes autorit rios que acreditam nisso agem como a crian a que fecha os olhos para se tornar invis vel A evolu o tecnol gica est presente em toda a parte n o uma conspira o de um grupo de manipuladores chamado de sistema e seus industriais sempre em busca de dinheiro for ando nos atrav s da publicidade a comprar coisas in teis e fr geis O socialismo n o quis ver isso for ou um igualitarismo entre pessoas que sempre buscaram melhorias e deu no que deu Al m do mais tecnologia qualidade de vida e nem o mais l rico dos mortais quer voltar para o passado com toda a raz o Ou voc iria a um tempo qualquer tempo em que chuveiros e telefones n o funcionavam direito carros eram p
257. utos j nas am pagos ampliando o leque de servi os em opera es rent veis e de qualidade Forma vs conte do Pense nos cinco sites que voc acha os mais bonitos Agora pense nos cinco sites que voc mais visita Pois por que nunca s o os mesmos Seria o design na internet uma firula nessa terra de CNNSs e Yahoos e salas de chat Existem sites que visitamos por causa do conte do escrito expresso direto e s o altamente significativos Bonitos ou feios seriam visitados de qualquer jeito E existem aqueles outros aos quais a gente vai s porque s o lindos de morrer e isso tamb m conte do Se n o fosse assim nenhum de n s ouviria m sica pois ela n o tem finalidade pr tica Mas se voc tivesse que escolher entre perder uma perna ou nunca mais ouvir m sica garanto que a escolha n o seria assim t o f cil A disputa entre forma e conte do normalmente s acontece quando n o existe uma clara defini o da sua fun o objetivo e p blico e isso muito mais comum do que se imagina Na internet vemos sites que se prop em a fazer praticamente tudo com resultados desastrosos esfor o desperdi ado como uma chicotada no mar Um website de sucesso normalmente tem design e conte do em perfeita harmonia N o se prop e a abra ar o mundo ou ser o melhor em todas as categorias A comunidade de um Geocities n o mostra not cias o Hotmail n o tem chat a Amazon n o d e mail de gra a E n o s o menores por c
258. utura fixa esses elementos s o fundamentais e sua posi o precisa ser sempre a mesma seja qual for Afinal de contas em um ambiente virtual o design de informa o t o fundamental quanto a arquitetura em um pr dio ele que determina as rela es entre os espa os 6 1 Design estrutural Portais e websites de conte do atualizado dinamicamente n o podem se dar ao luxo de ajustar o layout de cada p gina pois isso atrasaria muito o processo Nesses casos o design segue os mesmos princ pios de uma revista todas as suas se es s o estudadas cuidadosamente e se prepara um Projeto Gr fico indicando os lugares que os elementos gr ficos ocupar o em cada tipo de p gina Um projeto gr fico de um produto digital no entanto envolve bem mais elementos que seu equivalente em papel fotos textos bot es formul rios e outras reas de intera o com o usu rio Ele normalmente n o feito pelo designer mas pelo produtor ou arquiteto de informa o Esses profissionais identificam e categorizam as a es que poder o ser feitas a cada p gina e testam sua intera o e conex o pois assim que for implementado qualquer altera o envolver programa o e altera o das p ginas individualmente o que consome muito tempo e esfor o Os diagramas desenvolvidos s o encaminhados para o designer gr fico servindo de refer ncia para seu trabalho Isso n o significa necessariamente que o design fique engessado qu
259. v o ele era apresentado assim Esta a vers o 2 0 do meu livro Design web Design Se voc leu a original preta com um labirinto na capa vai ver que esta aqui tem v rias coisas em comum com ela algumas at exatamente iguais t bom t bom v rios erros de digita o foram corrigidos pois tive mais tempo agora Mas isso n o significa que ela seja uma en sima edi o revista e atualizada pois muito mais do que isso O que voc tem em m os praticamente outro livro Como eu n o sei escrever sobre outra coisa e gostei muito do nome anterior resolvi mant lo Se voc der uma sapeada no ndice ver que a se o de design n o mudou quase nada at porque os pilares de design como legibilidade e equil brio n o mudaram mas o resto bem o resto sofreu uma reforma geral alguns conceitos foram ampliados e o que considero mais importante coloquei a opini o de um monte de gente que tive a sorte de conhecer e com quem tive conversas pra l de elucidat rias Tamb m tomei a liberdade de colocar aqui uns quatro artigos de que gostei muito e que acho importantes para ilustrar alguns conceitos e um case do qual me orgulho O resultado de tudo isso um livro bem bacana pelo menos na minha imodesta opini o Se voc j leu o outro considere comprar este tamb m Se este seu primeiro contato com um livro meu espero que se divirta Como voc pode bem ver eu n o mudei muito desde aquela poca Mas mi
260. vejo o UOL e em outra a Wired Como pode uma janela ser maior que toda a tela do meu computador Como um pequeno site pode abrigar dentro de si um grande site Essas perguntas bvias simpl rias pat ticas at s o muito importantes para quem se preocupa em desenvolver um bom site e fundamentais para quem busca empatia com o visitante portanto essenciais para o desenvolvimento de websites Olhe no espelho e voc ver um excelente exemplo de inova o e resist ncia quando aprendemos uma nova tecnologia ou forma de comunica o estamos abertos a todas as novas informa es dispon veis formatos programas estruturas Com nosso pouco conhecimento fazemos verdadeiros milagres Depois de alguns meses aprendendo e dominando a t cnica pregui osamente nos adaptamos a uma ferramenta e preferimos faz la dar n em pingo gua a estudar formas alternativas Antes de criar um site necess rio ver seus objetivos com clareza e reinventar a roda n o importa o que a concorr ncia faz n o importa o que o usu rio est acostumado a ver n o importa o que existe de mais novo em tecnologias Importa o conte do Veja um bom exemplo videogames No in cio da d cada de 80 quem acreditasse que coisas como um Telejogo Philco ou um Space Invaders iriam movimentar uma ind stria de bilh es deveria com raz o ser chamado de maluco Mas foi exatamente porque o pessoal envolvido na cria o desses produtos se preocupou em inovar e
261. vindo A casa humilde por m honesta 1 Design a cara do mundo civilizado Muita gente acha que design uma coisa f cil que s demanda talento Alguns acreditam que esta uma atividade f til uma firula muitas vezes desnecess ria Ou uma subdivis o da propaganda um emprego para artistas temperamentais que esperneiam por causa de um fundo azul O que design afinal A tradu o direta do termo desenho mas deveria significar projeto Em uma defini o pra l de resumida os designers criam a cara do mundo civilizado Quase todos os produtos e marcas que se v em um espa o urbano foram criados por designers de um parafuso aos bot es de um elevador A cadeira em que voc est sentando o computador que voc usa seu autom vel ou nibus tudo isso tem a m o de um designer Algumas id ias bacanas como a bicicleta o garfo as sand lias Birkenstock e a garrafa de coca cola persistem Outras como o puff pogobol bilboqu e a tandem bicicleta para dois desaparecem e n o fazem hist ria Ao contr rio do glamour que pode aparentar a profiss o costuma reunir abnegados idealistas gente que luta por uma causa quase que perdida que a de criar produtos que fa am a diferen a para um mundo mais confort vel e bonito Costumam ser teimosos e at pouco soci veis muitas vezes seu apego ao produto sacrifica sua rela o com muitas pessoas Um designer costuma ser inquieto e fazer as perguntas mais estranhas co
262. visitante pode ver como primeira p gina uma mensagem do interior do site e visit lo de dentro para fora Pode parecer estranha a proposta de uma narra o sem come o e com v rias sequ ncias poss veis mas exatamente o que acontece quando conversamos ou discutimos com outras pessoas o come o da conversa simplesmente o in cio da comunica o n o o come o da hist ria Como cada pessoa pode criar rela es a partir de cada ponto do texto e como essas rela es podem lig lo a outros textos outras partes do mesmo texto ou mesmo a outros pontos de sua experi ncia pessoal n o existir uma sequ ncia obrigat ria de assuntos e por suas conex es n o haver conclus o pois sempre existir um outro texto de continua o da narrativa At mesmo uma hist ria sua qualquer do tipo cara ontem me aconteceu uma coisa inacredit vel vai recorrer a epis dios anteriores e fazer pausas para explicar certos pontos de destaque Isso acontece porque o tempo cont nuo e as coisas n o come am nem terminam em lugar algum Muitas vezes voc conta um fato para algu m e depois tem que ficar um temp o explicando alguns detalhes para a hist ria fazer sentido Outras pessoas s o famosas por contarem hist rias que nunca terminam Conclus o Isso tudo me faz pensar na quest o da conclus o necess ria uma conclus o um final para todas as narrativas Na vida real isso n o acontece qualquer hist ria se conecta com
263. xtos extensos outras cole es de fotos outras ainda estimulam a participa o e a conex o dos visitantes a bancos de dados utilizando recursos de hipertexto Muitos chamam um website de Home Page Outros chamam cada tela de Home Page Na verdade home o nome dado primeira tela de sites de navega o simples usando a mesma met fora se o endere o completo o s tio ou local a primeira p gina o lar um local ntimo ou amig vel que o recebe Ela deve ser bonita de acesso f cil mostrar do que trata o endere o e o que fazer ali Se estiver perdido volte para casa e veja como seguir adiante Endere os digitais com navega o bem trabalhada n o usam home page T m claro uma primeira tela para recepcionar o visitante e depois entrela am seu conte do ligando informa es relacionadas Da mesma forma que n o se volta recep o de uma empresa quando se vai de um departamento ao outro um site bem desenhado n o deve fazer com que o visitante volte para a home page Convencionou se chamar de p ginas os documentos de hipertexto armazenados na WWW Eles n o s o exatamente p ginas pois t m dimens es e caracter sticas muito diferentes de seus equivalentes em papel Mas tamb m n o s o telas uma vez que seu conte do pode facilmente ultrapassar as dimens es de uma tela Talvez o certo fosse documento web ou elemento de hipertexto Como esses termos s o espec ficos e sofisticados

DWD:2 (Design/Web/Design 2)

Contents

Download Pdf Manuals

Related Search

Related Contents