Archive for the 'Projeto' Category

Dicas para freelancers

Post simples e direto para quem quer aprender os primeiros passos em gêrencia de projetos, do blog da Locaweb: 3 dicas importantes para freelancers, por Jhenifer Pollet.

Assuntos abordados: como fazer contato, cobrar, e gerenciar o tempo.

 

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 

Manual de revenda em webdesign (2)

Wallace Vianna é designer gráfico e webdesigner no Rio de Janeiro, RJ.

escravos-de-jo
Fonte da foto: http://www.pragentemiuda.org/2011/05/brincadeira-e-musica-escravos-de-jo.html

Sempre comento com alunos que gerenciar um projeto é tão (ou mais) trabalhoso quanto fazer um projeto. Não gerenciar é fazer dois (ou mais) projetos e receber apenas um. Ou seja: ruim gerenciando, pior não gerenciando.

Gerência de projetos é uma das trocentas matérias que a faculdade não ensina aos formandos, e, portanto, temos de aprender de alguma forma. Até sendo empregado você tem de gerenciar seu tempo e suas atividades para entregar o que lhe pedem. Sendo autônomo, profissional liberal ou empresário essa necessidade aumenta exponencialmente.

Acredito que não é preciso reinventar a roda: a nossa volta existem exemplos de gerencia de projetos, você pode escolher um deles – ou parte de vários – que se aplicam ao seu modo de pensar e sentir o mundo (essa frase não é minha é de Bill Gates).

Assim sendo, tenha em mente que quando você desenvolve um projeto sozinho(a), sem depender de terceirizados (fornecedores ou colaboradores), você pode se dar ao luxo de renegociar prazos, etapas e valores com o cliente final sem dar satisfações nem comunicar a terceiros. Num projeto com mão-de-obra  terceirizada isso não acontece.

Por isso, se você cair na armadilha de mudar o combinado com o cliente no meio do caminho, não vai ter muito espaço de manobra com o terceirizado, sem aviso prévio. Em resumo, se as duas pontas do projeto – cliente e terceirizado – não estiverem em sintonia em relação a preços, prazos e propostas, você terá de administrar prejuízos.

Mas você pode evitar isso! Vamos a alguns exemplos práticos dentro da área de webdesign:

Você é designer de mídia impressa e conseguiu um trabalho de desenvolvimento de site.
Você não faz sites mas tem o cliente, habilidade para desenhar e conduzir projetos em mãos.
Nesse momento:

1) Você contratou um terceirizado para fazer o site de seu cliente.
Você não tem um layout aprovado pelo cliente final mas precisa de um orçamento do terceirizado (para dar seu orçamento ao cliente final). Você pode fazer um wireframe* (estrutura) do site, a partir das necessidades de seu cliente.

Exemplo de wireframe

wireframe1

wireframe2

Exemplo de layout

layout1

layout2

O wireframe (neste caso, um verdadeiro storyboard) tem tudo o que o layout final vai ter: elementos, textos, posicionamento, tamanhos, funcionalidades visíveis ou descritas… tudo o que será preciso para o terceirizado dar um orçamento.

2) Você não tem todos os layouts aprovados, mas tem de colocar o bloco na rua com o que tem.
A dica anterior vale aqui também. Aprove com as partes – cliente e terceirizado – um wireframe do que será feito; depois faça o layout a partir dele (preencha os espaços das imagens, insira o texto definitivo, aplique as formações necessárias). Na pior das hipóteses você terá de negociar a aplicação de um sombreado e uma borda com o terceirizado, mas não o layout inteiro.

3) Você tem uma procuração informal para decidir as coisas pelo cliente pois (a) o cliente é muito ocupado (b) o cliente quer ver resultados (c) seu inconsciente quer passar uma imagem de competência (d) é assim que você trabalha em outros tipos de projetos

Sinto dizer, mas ao aceitar da gráfica uma prova de impressão sem mostrar ao cliente, ou aprovar um acabamento com o cliente sem conversar com o gráfico, você corre o risco de uma das partes – cliente ou terceirizado – não querer pagar ou refazer o trabalho. O mesmo se dá com projetos de internet.

Faça as conversas fluírem entre as partes: aprovou algo com o terceirizado, mostre ao cliente (ou vice-versa) antes de mandar fazer. É uma prova de bom-senso e humildade.

4) Ser flexível é diferente de não saber onde se quer chegar.
Definir previamente as coisas significa que outras pessoas programarão suas vidas baseado no acordado com você.
Se seu objetivo é transportar confortavelmente o cliente e o terceirizado para um lugar, você pode flexibilizar a condução, mas não o local de destino.
Você pode flexibilizar os pedidos com o terceirizado e cliente, mas sem mexer em valores e no escopo do trabalho. Conseguiu levar as pessoas com conforto no lugar combinado, com todos aceitando trocar a viagem no seu carro por um passeio de táxi? Então você cumpriu o combinado, sendo flexível.

5) Ninguém está livre de problemas. Como diz um certo ditado norte-americano “shit happens” (numa tradução livre, problemas acontecem). Sempre coloco em meus contratos de serviços prestados que, na impossibilidade de cumprir a risca o que foi planejado, as partes – contratante e contratado – entrarão num acordo, com cada qual abrindo mão de algo. Se não for possível, o trabalho se encerra ali, e tudo o que não pôde ser entregue ou faltou ser pago, é reembolsado – ou pago – proporcionalmente (esse é um dos motivos de eu trabalhar em etapas).

6) Tenha em mente que projetos de (web)design podem ser como um fast-food ou restaurante a La Carte.
Se seu cliente tem pressa, ele precisa de um projeto “fast-food”: um site expresso, com layout baseado em modelos não-originais, e serviços adicionais igualmente prontos. Neste caso não há como satisfazer todos os desejos do cliente, apenas colocar o bloco na rua.
Se o seu cliente deseja um projeto personalizado (o oposto do anterior), deverá se planejar com antecedência, pois os custos e prazos de entrega serão maiores.

Em ambos os casos envolver o cliente no processo além de ser uma mostra de humildade, ajuda a diminuir ruídos na comunicação.

Enfim, listo essas situações comuns na esperança de que alguém, que procure soluções ou se identifique com estes problemas, possa resolver questões de trabalho. Não tenho a pretensão de mudar o mundo, mas sim de colaborar para um mundo melhor.


Nota:

* Se o cliente – ou você – não entende um wireframe, use a criatividade: faça um desenho qualquer do site para o cliente ver e, a partir dele defina áreas (caixas) onde entrarão os elementos finais (wireframe). Mostre ao terceirizado as caixas com indicação de funcionalidades, tamanhos e posicionamentos (o wireframe), e, mais adiante, com o tudo aprovado, mostre o desenho final da página. Isso agiliza o processo e evita ruídos entre o combinado e o entregue.

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

Layout versus resolução de tela (3)

Atualmente existem dezenas de dispositivos (equipamentos, aparelhos) no qual sua página de internet pode ser vista: ceulares, smartfones, tablets, computadores de mesa ou portáteis. E isso subentende vários formatos de tela, desde as telas tradicionais de micro de mesa em proporção 4:3 ou 1:1 passando pelas telas wide-screen/panorâmicas até os micros portáteis e de mão.

Como citei num artigo anterior, existem técnicas de projeto que ajudam ao projetista de internet (webdesigner) a definir as dimensões de seu site se o cenário for limitado a telas tradicionais, em duas ou três resoluções de tela.

Em monitores 4:3 e 1:1, até 17 polegadas, as resoluções de tela seriam:
800 x 600 pixels, com área útil sem rolagem de tela em 760 x 410 pixels
1024 x 768 px, com área útil de 1000 x 600 pixels
1280 x 1024 px, com área útil de 1260 x 856 pixels

Em monitores panorâmicos 16:9 até 17 polegadas as resoluções de tela seriam:
1440 x 900 pixels
1280 x 600 px
1280 x 768 px
1280 x  720 px
1176 x 664 px

Mas todos esses cuidados acabam não sendo úteis se seu layout vai ser visualizado em dispositivos portáteis que podem ser horizontais ou verticais.

Fonte: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Teoricamente sites em CSS são rediagramados automaticamente para aparecer em dispositivos pequenos (como celulares).
Dispositivos ou navegadores de internet que não rediagramam o seu site o exibem em zoom (visualização que aumenta ou diminui o layout, em escala).
Por fim, pode-se fazer duas versões do mesmo site, uma para dispositivos tradicionais, outra para portáteis mantendo a estrutura e conteúdo (HTML) e mudando a folha de estilos (CSS).

Aí entra o Design Responsivo (responsive design) que nada mais é que o uso de tecnologias para web (HTML, CSS, Javascript, Flash) a fim de rediagramar seu layout para a maioria das situações possíveis: horizotal ou vertical; tela tradicional ou panorâmica; dispositivo de mesa ou de mão.

Fonte: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Cada tecnologia trata a sua maneira estas questões de projeto de interfaces para internet, seja escalonando o layout conforme a resolução de tela (Flash, p.ex.) ou ocultando/recortando/redistribuindo o conteúdo (CSS); portanto cabe ao projetista de internet (webdesigner) estudar a tecnologia a ser utilizada em seu projeto de sites para esse fim.

Em termos práticos pode-se usar bibliotecas de código (como o JQuery) para implementar esses recursos rapidamente, ou desenvovler seu site em CMS (gerenciadores de conteúdo, como o WordPress) que já possuem recursos para adaptar o site a diferentes dispositivos.