Posts Tagged 'projeto'

Manual de revenda em webdesign (3)

Uma coisa que percebi em meus textos anteriores sobre esse tema foi a falta de uma ilustração de workflow para projetos de webdesign, do ponto de vista do contratante que terceiriza serviços de web.
Em outras palavras, as etapas que eu já sigo e que deveriam ser pensadas (e seguidas) pelo contratante (designer gráfico ou de outras áreas afins) para que as coisas fluam mais rapidamente e todos ganhem dinheiro com isso.

Não vou postar aqui metodologias como Pert-CPM ou Scrum (embora eu use a segunda), e sim as etapas e recomendações que diferenciam um projeto de web de um projeto de mídia impressa, para ficar nesse exemplo:

 Revenda web_ manual

  1. Seu briefing não é o briefing para projetos de web Seu briefing de design gráfico vai tratar de layout, valor do trabalho e data de entrega, sem considerar que 50% do trabalho pode depender de outros atores que não você (hospedagem do site, registro de domínio, pesquisa ou desenvolvimento de soluções para o projeto).
    Na dúvida, antes de pedir informações junto aos clientes, peça um briefing ao terceirizado e junte com o seu.
    .
  2. O projeto de web não começa no layout
    Pegou o briefing, faça uma estrutura (rascunho) do que o site vai ter em todas as páginas, o famoso WireFrame (*); ou se tiver funcionalidades, faça do wireframe um storyboard. Embora existam programas para esse fim, ele pode ser feito em qualquer programa de edição de imagem (do Corel, passando pelo Ilustrator, chegando ao Paint do Windows ou Photoshop).
    Ah, sim, e aprove esse wireframe com o cliente!
    Com ele o terceirizado pode te dar um valor (preciso) do projeto, sem que você perca tempo desenhando algo que não vai ser aprovado, ou reduzindo sua margem de lucro ao renegociar o que ficou apenas subentendido.
    .
    (*) o WireFrame, aqui, está para o projeto de webdesign como o moodboard (ou painel semântico) para projetos de comunicação visual. O Wireframe tem outras aplicações e finalidades, que fogem ao contexto desse texto.
    .
  3. Depois do contato, o contrato
    Se o orçamento/proposta for aprovado, entra em cena o contrato de serviços.
    Se o projeto só envolver conteúdo (texto e imagem p.ex) seu contrato pode se basear num projeto de mídia impressa. Se houver outras funções seu contrato tem de prever o famoso “plano B” (acordos sobre os entregáveis). Nesse caso peça opinião ao terceirizado para redigir esses termos, evitando arcar com prejuízos antecipadamente.
    .
  4. Antes de tomar decisões fale com o terceirizado
    Definiu as coisas, peça opinião antes de mostrar o layout ao cliente. Aceite as opiniões do terceirizado, tanto para podar como para plantar coisas em seu projeto; se discordar, tente chegar num meio-termo. Todos vão sair ganhando no final, com menos retrabalho, menor prazo de entrega e dinheiro no banco mais cedo.
    .
  5. Desenho é trabalho futuro, não é trabalho passado.
    Se você chegou na fase de desenho do site, já tem as seções e funcionalidades definidas. Assim sendo, não inclua nada de novo no layout em relação ao que foi colocado no Wireframe; tudo o que for desenhado tem de ter sido aprovado no wireframe para ser produzido e isso leva tempo. Coisas novas significam tempo e valores novos, que não foram acordados anteriormente.
    .
  6. Ninguém sabe tudo (ou o bastante)
    Fazer o rótulo de um produto longa vida não é o mesmo que fazer uma nova embalagem deste produto. São designs diferentes.
    Você não precisa fazer uma certificação em gerência de projetos (embora fosse bom) ou ser profissional de todas as áreas de negócio com que trabalha, mas tenha em mente que você vai levar um (bom) tempo até entender como o mercado de internet funciona (!) e que ele muda todos os dias (o livro que você leu sobre Google Marketing já está 50% ultrapassado antes de você terminar de ler).
    Assim sendo, aprenda com o erro dos outros, terceirize.
    É um exercício de bom-senso e humildade ao mesmo tempo.

Links relacionados:
Mood Board – ABC Design; Chocoladesign;

Design a la carte ou fast-food

Wallace Vianna é mestre em design pela ESDI/UERJ, designer gráfico e webdesigner.


sopa-lata

Imagem: site RG Terra 

prato-sopa
Imagem: Graciolli.com

Ao nos formarmos escolhemos a forma como iremos atuar no mercado: como empregado, autônomo ou empresário/profissional liberal. No desenvolvimento de projetos, em serviços de apoio a projetos (me especializei nessa área, por exemplo) ou gerência de projetos.
Na hora de desenvolver projetos também temos de tomar opções semelhantes: nossos clientes serão pessoas físicas ou jurídicas? Queremos desenvolver projetos personalizados ou pré-definidos?

Dá pra misturar os ingredientes desse almoço em categorias diferentes (projeto pré-definido para pessoa física, projeto personalizado para pessoa jurídica) mas misturar ingredientes duma mesma categoria pode gerar problemas. Começar um projeto pré-definido e terminar com um personalizado provavelmente vai deixar um buraco no orçamento do executor do projeto. O mesmo raciocínio vale na hora do designer terceirizar serviços. O terceirizado é remunerado para fazer e receber. Se o designer precisa refazer serviços, deve contar com uma equipe própria, com remuneração fixa, para esse fim. Cada coisa no seu lugar.

Quando era aluno de Freddy Van Camp, ele certa vez comentou que em todo trabalho primeiro vem o contato e depois vem o contrato. Sempre digo que em todo projeto o acordado tem de acompanhar o executado. Alguns projetos mais complexos começam no Metaprojeto *, mas isso não vem ao caso agora. O principal é ter bem claro o tipo de projeto se quer desenvolver e como ganhar dinheiro com isso.

Na faculdade de design nos é ensinado a pensar em projetos que envolvem o cliente do início a entrega, de forma a desenvolver produtos e serviços, que, mesmo não sendo únicos ou originais, sempre recebem este tratamento. Daí o problema que surge quando a concorrência oferece produtos pré-prontos e o designer não. O designer do século XXI precisa pensar em projetos de múltiplos formatos: impresso e digital; personalizados e pré-definidos; para pessoas física e jurídica; para grandes, médias e pequenas necessidades.

Na área de design existem muitas soluções prontas como o Fácil Print  ou construtores de sites da Locaweb . Tenho uma ex-aluna que comercializa cartões comemorativos impressos http://www.beneditodesign.com.br/index.htm, que é um tipo de projeto pronto. Tudo isso é design pré-definido, como lanchonete fast-food.

Em resumo: o mercado muda, exiguindo novas habilidades e competências, mas cada uma dessas habilidades é uma oportunidade nova de faturamento. Como diz o velho ditado, problemas são oportunidades disfaçadas de trabalho.

* Metaprojeto como o nome sugere, é algo além do projeto, ou melhor, é um projeto que antecede o projeto de fato. Se assemelha a um plano de negócios, que antecede o negócio, neste está descrito tudo o que pode envolver o negócio: objetivos, público-alvo, recursos necessários, valores atualizados, e até o que será feito se o negócio não der certo. Metaprojetos sáo um levantamento de todos os requerimentos do projeto e cenários possíveis para se avaliar a exiquidade do projeto.

Resumo e artigo de Dijon de Moraes, teórico de metaprojetos: Metaprojeto o design do design • Metaprojeto como modelo projetual 

Processos criativos

Wallace Vianna é mestre em design pela ESDI/UERJ, designer gráfico e webdesigner no Rio de Janeiro, RJ.


Fonte: http://www.presentationzen.com/presentationzen/2006/08/from_design_to_.html Adaptado de iStockphoto e Daniel H. Pink “A whole new mind”

Participei recentemente de um curso cujo conceito do trabalho (processo criativo) pode ser aplicado a projetos coletivos diversos. Achei digno de registro, pois estes cases servem de reflexão e modelo para organizadores que precisam desenvolver atividades envolvendo projetos coletivos com alunos, equipe ou colegas de trabalho, etc.

No primeiro trabalho coletivo, o tema e o escopo eram dados pelo organizador e o conteúdo era criado pela equipe participante.
Para não ficar muito abstrato vamos tomar como exemplo fictício um projeto para desenvolver um estande de vendas imobiliário; aqui há a maquete, material impresso, sala de recepção, vídeo… cada tarefa é desenvolvida por um grupo ou um indivíduo da equipe, de acordo com a habilidade de cada um.
O organizador tem os objetivos e as diretrizes do trabalho: neste cenário imaginário, fazer um estande, a fim de vender imóvel para classe média; o orçamento é baixo, e parte dos custos devem ser bancados por eventos paralelos, como um sorteio de um veiculo usado, doado.

Durante a criação dos conteúdos pequenas apresentações são feitas e o organizador define o que deve ou não ser mudado ou acrescentado nas criações dos sub-grupos.

Essa estratégia de “criação coletiva” poupa o organizador de criar o conteúdo, deixando-o livre para dirigir a criação e ao mesmo tempo cria comprometimento e envolvimento dos participantes.

Um lado a se criticar do processo é que mudanças podem ocorrer a qualquer momento (até minutos antes da entrega do trabalho), o que pode gerar estresse e a eventual falta de participação de todos os envolvidos, em algum momento.
Um lado a se valorizar é a qualidade final, tanto pela quantidade de conteúdo gerado pelo grupo quanto pela qualidade de elaboração das partes desenvolvidas, por cada membro da equipe. Um trabalho em grupo acaba passando pelo olhar crítico de todos os envolvidos, o que reduz a possibilidade de equívocos que uma única pessoa poderia incorrer.
Enfim, é um processo com resultados – no conteúdo e na forma – distintos de um trabalho coletivo dirigido por somente um organizador, ou quando o trabalho é individual.

O segundo projeto coletivo que participo é mais tradicional, mas com resultados interessantes: ocorre quando o organizador do trabalho já definiu o conteúdo e a forma, e solicita ao grupo a execução dos conteúdos. Aqui, o grupo é um mero executor do projeto do organizador, mas há a possibilidade de colaboração de terceiros, vindos de fora do grupo, que acrescentam idéias a partir de suas expertises.

Ainda no exemplo do projeto de um estande imobiliário, a “colaboração externa” pode ser através de um grupo de atores no local, realizando uma encenação ao vivo, personificando uma família – futuros moradores do imóvel – desfrutando de uma piscina imaginária; isso pode ser uma forma de atrair atenção e desejo de interessados no imóvel, ou no sorteio do automóvel que irá financiar os custos do estande.

O ponto crítico desse processo é que não há criação dos participantes, apenas talento a ser apresentado para resolver as tarefas exigidas.
O lado positivo é que os objetivos aqui são bem claros desde o início, o que gera credibilidade do organizador ao dirigir a equipe e tranqüilidade no grupo ao gerar os resultados.

O importante enfatizar aqui é o fato de que em ambos os casos as novas idéias – de dentro ou de fora do grupo – são fundamentais para que se crie massa crítica e conteúdo inovador no projeto desenvolvido. A definição do formato do trabalho – criação coletiva ou individual; desenvolvimento criativo ou execução dirigida – vai depender da personalidade do(a) líder-organizador(a) que pode ser mais democrática e emotiva ou mais centralizadora e focada nos detalhes. O tipo de projeto também vai definir a estratégia utilizada: o projeto a ser desenvolvido pode ter um perfil mais criativo e informal ou mais calcado na boa execução. O fundamental , em qualquer caso, é ter os objetivos bem definidos, mesmo que estes objetivos mudem ao longo do caminho (como no caso dos projetos criativos).

Gerenciamento de links

Todo site com conteúdo dinâmico ou que muda/evolui ao longo do tempo deve ter estruturas que gerenciem links movidos ou removidos. Motivos:

  • Os usuários e buscadores da web guardam endereços antigos por mais tempo do que o proprietário do site poderia desejar.
  • Remover esses links antigos ao longo do tempo pode ser uma tarefa trabalhosa
  • Quando se fala em SEO (Otimização para sistemas de busca) links antigos podem ser relevantes, seja para quem já fez link para seu site, seja para SERP (Página de resultados de buscas) defasados.

Bons provedores de hospedagem fornecem este tipo de redirecionamento, através de uma página (definida pelo provedor ou pelo proprietário do site) que informa um link inexistente (a famosa página de erro 404).

Na falta de uma hospedagem que gerencie links quebrados, o webdesigner deve ter um fluxograma da estrutura de seu site. Antes de projetar a nova versão do site deve fazer uma lista das principais páginas antigas, e repeti-las na versão nova, mas tendo como conteúdo apenas a informação de que a página foi movida ou não existe mais.

 

No segundo caso – hospedagem que não forneça gerenciamento de links quebrados – uma tag/marcação <meta> que direcione automaticamente a página “antiga” para a página “nova” resolve a questão de modo rápido.

Aqui é particularmente útil o projetista de internet (ou webdesigner) saber quais as opções do navegador que podem interferir na navegação, e que podem ser desabilitadas no computador do internauta. Muitos computadores estão num contexto (escolas, acesso público) em que a programação (scripts com links) e recursos de navegação (tag <meta>com links) podem estar desabilitados por questão de segurança (para não baixar vírus ao computador do usuário) ou restringir acesso a sites “não-permitidos” no ambiente. Nesse sentido, código “redundante” (que pode ser interpretado por alguns como “obsoleto”) pode ser efetivo para essas situações. Por exemplo, caso a tag META de redirecionamento esteja desabilitada no navegador (computador?) do usuário, deve-se exibir um link “comum” para a localização da nova página, ou alerta de que scripts podem estar desabilitados no navegador (tag NoScript).

Em muitas ocasiões um site pode ter hotsites (campanhas de curta duração, sazonais) ou determinadas seções possuem endereços longos apesar de serem importantes. O redirecionamento de URLs também é útil para criar um endereço “curto” – para seu site ou página, facilitando o acesso. Como existem sites especializados em criar esses endereços curtos, se o redirecionamento for por curto prazo, utilizar uma URL do tipo http://seusite.dominioY.com pode ser uma boa solução de custo-benefício.
Se, ao contrário, o redirecionamento – ou URL “curta” – for utilizada por longo prazo (ou se uma URL mais personalizada for necessária para passar imagem mais profissional, sem usar subdomínios de terceiros) deve-se considerar a criação de novos domínios (http://www.campanha.com) que podem apontar para uma pasta do site principal (http://www.nomedosite.com/campanha) .

Por fim, ao criar estrutura de pastas e subpastas em seu site, lembre-se de sempre ter uma página index (ou default) em cada subpasta (ou sub-nível) de seu site. Isso facilita a navegação por “texto” permitindo o usuário navegar pelas as subpastas, caso o resultado de buscas o leve a uma subpasta qualquer do site .

Lembre-se de que o navegador sempre procura uma página “index” ou “default” após ser digitado o endereço do site, com ou sem sub-diretórios.

Enfim, gerenciamento (direcionamento e redirecionamento) de links e endereços na web é uma prática necessária para quem projeta conteúdo para a internet.

Artigo publicado originariamente no site Catabits

Modelos versus originais

Em minhas aulas de webdesign oriento os alunos no uso de modelos de layout no desenvolvimento de sites por diversos motivos:

– Criação de cultura visual. Navegar por entre imagens com grau de similitude (onde não mais se distingue o diverso ou o comum) é diferente de navegar por imagens que carregam grau de semelhança entre si (no conceito, tema ou estrutura). Para quem tem espírito crítico, é oportunidade de perceber que, por exemplo, a cor preta não se aplica normalmente ao tema alimentação. Para quem não tem cultura visual ou talento nato para desenho [*], é a chance de escolher um bom desenho antes de iniciar seu layout para a web.

– Encurtar a estrada entre a criação e a realização. Já tive alunos que insistiram em ficar na frente do Photoshop por uma semana sem produzir literalmente nada (!).

Apesar disso, tenho de reconhecer que do ponto de vista da criação, os templates/modelos padecem de um defeito inerente a sua função: não relacionam o conteúdo escrito com a informação visual. P.ex., por mais que um modelo para “site educacional” seja bonito, ele dificilmente dará conta de comunicar (no seu projeto visual) o conteúdo de minha apresentação (seja ela botânica ou eletricidade elétrica). E a iconografia utilizada dificilmente se justificará mesmo dentro do próprio contexto visual – porque aqueles traços semelhantes a um código de barras estão no topo do meu site, cujo fundo é uma textura de madeira?

Independente dos prós e contras, cada qual – modelo ou criação legítima – cumpre seu papel social. Quem procura ter uma presença na internet nem sempre deseja altos custos, e aí entram os sites de modelos com cadastros de domínio automatizados, e serviços disponibilizados em planos de pagamento. Ter uma presença na internet – assim como ter um cartão de visitas ou portfólio de trabalhos realizados – é o espelho de uma necessidade (por exemplo, se comunicar com os clientes ou ter um mostruário de serviços).

Por outro lado, contrariando o senso comum, os serviços “sob medida” acabam se valorizando em relação aos serviços “empacotados” (os famosos modelos, neste caso). Quem opta por ter um serviço original deseja, entre outras coisas, realizar algo que não existe no mercado, diferenciação ou algum tipo de excelência (no produto ou resultado obtido). Aí o webdesigner pode ver uma oportunidade de remuneração compatível com suas pretensões e anos de estudo, mas apenas se investir continuamente em sua formação. Inovação é diferencial e este só pode existir como fruto de Pesquisa e Desenvolvimento (P&D).

Eu particularmente acredito que o webdesigner pode atuar em pelo menos duas áreas “consagradas”: criação de novos serviços /produtos “empacotados” ou desenvolvimento de soluções customizadas. E ambas passam pela P&D. Um exemplo dentro do contexto deste artigo seria um serviço de construção de sites a partir de de modelos que trouxesse embutido serviços de chat em Flash, conectado a celulares; o outro exemplo já existe na praça: desenvolvimento de sites personalizados para estratégias de comunicação específicas, de grandes empresas. Em resumo, existe espaço para todos, resta a nós escolher sua área de atuação, com ou sem modelos.

_________________________________________________
Nota:
[*] Vale lembrar aqui que, fazer layouts para web não pressupõe necessariamente formação clássica em desenho; muitos webdesigners/projetistas de internet famosos como Hillman Curtis não sabem desenhar à mão livre e isto não os impediu de alcançar prestígio na atividade; isto se explica muito pelo fato de que a geração atual teve acesso às facilidades da informática mais cedo que a geração anterior, e que, desenhar em computador- latu sensu – independe de precisão manual ou formação em desenho, e sim de cultura tecnológica específica – coisa que qualquer adolescente que passa horas navegando na internet possui de sobra, mesmo que não se dê conta disso.

Texto pubicado originariamente no site Catabits

Contexto e conteúdo (2)

Fonte: imagem e ação pi

Queria acrescentar algumas dicas baseadas em “erros comuns” ao fazer ou distribuir telas de apresentações (slide-shows):

Cada tela deve ter uma descrição rápida do que se trata. Mesmo uma captura de tela de um software pode não ser compreensível “por sí” sem uma descrição razoável. O título da tela e a legenda da foto podem não ser suficientes mesmo se tratando de uma sequência de telas, de um mesmo assunto.

Um exemplo da importância da descrição da tela é no uso de termos técnicos. Incluir termos sem tradução ou explicação é como dar de presente um livro com muitas frases em idioma que o presenteado não domina. Ainda. Isso é particularmente verdade em apresentações que primam pelo design, com “grandes fotos” ou ilustrações que ocupam toda a tela. A foto de uma auto-estrada pode ser um recurso poético para explicar que todo processo demanda um caminho, mas é ineficaz para explicar o que foi/será dito (verbalmente) durante a apresentação. Pense num conceito qualquer: toyotismo, por exemplo. Pode ser ilustrado com uma estrada, mas a estrada não explica o que é o toyotismo, enquanto “caminho para um objetivo”.

Outro exemplo são as apresentações multimídia em tempo real (o famoso broadcasting, ou “ao vivo”). quem já não se pegou na rua vendo uma cena importante na TV… sem som nem legenda (closed caption ou narração textual). Fazer transmissões ao vivo implica emter algum tipo de narração textual do que se diz. O problema é que eventos assim possuem chat para os participantes falarem o que quiserem, além do áudio. No caso da internet. a prioridade deveria ser a apresentação (imagens, com ou sem texto) e o áudio do palestrante transcrito ao vivo, depois o chat; mas os idealizadores de sistemas de broadcast via web ainda não pensam nisso.

Para quem faz apresentações multiplataforma (de PC com Windows para um outro tipo de computador e sistema operacional) considere abrir sua apresentação com antecedência e acertar as coisas que saíram do lugar: fotos espelhadas, textos ocultos por baixo dos desenhos, transições que sumiram… por isso sempre converta suas apresentações em mais de um formato: imagens “estáticas”, HTML, etc. Isso é particularmente importante para quem faz apresentações multimídia (com vídeo, áudio, animações).

Para não ter sustos, leve a apresentação num laptop, de preferência o mesmo que usar para montar a apresentação. Se for disponibilizar a apresentação em sites que distribuem esse tipo de conteúdo, lembre-se que o site pode sair do ar no momento que o material for procurado. Se puder se dar ao luxo de ter uma mesma apresentação (imagens, telas da apresentação, video, áudio) em mais de um lugar na internet, melhor. A seguir, exemplo de tela com apresentação que se explica totalmente sem o apresentador, e que pode ser lida como “tela estática” sem perder seu brilho (já que os elementos de design sustentam o texto com eficiência).

Fonte: FastCommerce, Clearsale. Palestra

Artigo publicado originariamente no site Catabits

Outro texto relacionado:
PPDESDI – Apresentação sem decepção