Como cobrar um projeto de desenvolvimento de site?

Bem, esta é uma dúvida bem comum, tanto para iniciantes quanto para usuários avançados. Realmente definir um valor para o seu projeto é uma coisa bastante complexa, e depende muito de cada caso. Então o que farei aqui é expor o meu perfil e mostrar como cobro meus projetos, para ver se ajudo vocês a definirem uma "tabela pessoal".

Antes de mais nada, é preciso saber as fases que compõem um projeto de desenvolvimento web. São elas:

-Planejamento
-Execução
-Teste e Correção
-Publicação

O intuito deste artigo é ensiná-lo a cobrar pelos seus serviços, e não ensiná-los a trabalhar. Então farei apenas um resumo das tarefas de cada etapa.

Planejamento

Esta fase engloba certas tarefas: definição de briefing (necessidades do cliente, foco do projeto), definição de casos de uso, telas, serviços terceirizados necessários (fotografia, edição de imagens), coleta de dados e material do cliente e tudo o mais.

Execução

Já de posse de todo o material necessário, desenvolvem-se os primeiros modelos para aprovação do cliente, com estrutura de navegação construída.

Teste e Correção

Após a aprovação do layout pelo cliente, desenvolve-se o site e efetuam-se os testes de navegação com ênfase na usabilidade dos elementos, e na facilidade de acesso à informação

Publicação

Após aprovado e fechado, o projeto é hospedado e publicado na internet.

Para efeitos de composição de orçamento, tenha em mente o seguinte: o planejamento geralmente toma 30% do tempo total do projeto, o desenvolvimento leva outros 50%, seguidos de 25% de ajuste e testes. 5% ficam fora da conta, por serem tarefas de publicação.

Tendo estas médias em vista, a fase de planejamento normalmente serve de base para você desenvolver uma tabela de horas. Digamos que o meu tempo de planejamento em um site tenha sido de 20 horas (não, não é um prazo absurdo). Logo 30% do meu tempo de desenvolvimento equivale a estas 20 horas. Ou seja, jogando por cima cada 7 horas correspondem a 10% do desenvolvimento. Temos portanto que o projeto demorará 70 horas para ser desenvolvido.

Definido o total de horas necessárias, vamos à segunda parte: definição do seu valor/hora.

Este valor é relativo. Deve levar em conta o quanto você acha que vale seu trabalho, tendo em vista o quanto você investiu no seu conhecimento. Mas apenas para efeitos de ilustração, dividirei esta parte em 3 patamares, de acordo com a sua experiência de trabalho:

I- Desenvolvedor iniciante (noções básicas de gerência de projetos, desenvolvimento de acordo com as web standards): 15 reais/hora

II - Desenvolvedor web sênior (Nível I + conhecimento de mercado, noções de negociação, investimento em formação, mínimo de 2 anos de experiência): 25 reais/hora

III - Desenvolvedor web pleno (Nível II + 5 anos de experiência) 38 reais/hora

Logo, para os patamares, teríamos o seguinte valor de projeto:

I - 15,00 x 70: 1050,00
II - 25,00 x 70: 1750,00
III - 38,00 x 70: 2660,00

Vale lembrar que esses valores são relativos a tarefas de DESIGN. Existem sites dinâmicos em que você deve incluir mais uma fase, que é a de desenvolvimento do código. Não tenho uma medida exata de valores neste caso, mas o meu valor para desenvolvimento de código é de 55 reais/hora.

Bem, com este artigo espero ter esclarecido algumas dúvidas, e clareado um pouco algumas nuvens que pairam acima da cabeça dos desenvolvedores.

Os valores têm por base o mercado de Brasília, mas não acredito que seja muito diferente nos grandes centros.

Ps.: Mesmo trabalhando como freelancer, recomendo sempre criar a rotina de trabalhar 8 horas por dia, para evitar atrasar prazos. Trabalhando 8 horas por dia, e somente em dias úteis (segunda a sexta), este projeto seria entregue em cerca de 2 semanas (mas sabemos que isso nunca acontece ;) )

Abraços!

A Bíblia do Flash 8 (em inglês)

Seguindo a linha da postagem anterior, desta vez posto a bíblia do Flash 8, editada à época ainda pela Macromedia. Apesar de antigo (para a internet, claro), é um excelente material de referência.

Download.

10 mentiras para enrolar designers e ilustradores inexperientes

1) "Faça esse trabalho barato (ou de graça) e no próximo pagaremos melhor"

Nenhum profissional que se preze daria seu trabalho de mãos beijadas na esperança de cobrar mais caro mais tarde. Você consegue imaginar o que um advogado diria se você dissesse "me defenda de graça dessa vez que na próxima vez que eu precisar de um advogado eu te chamo e pago melhor". Ele com certeza riria da sua cara.

2) "Nós nunca pagamos 1 centavo antes de ver o produto final"

Essa é uma pegadinha. A partir do momento que você foi contratado para fazer o trabalho você DEVE pedir uma entrada. O motivo é simples, você está trabalhando desde o momento que se dispõe a fazer a reunião de briefing. Talvez um cliente mais inexperiente queira pagar após ver alguns esboços. Cabe a você aceitar ou não.

3) "Esse trabalho será ótimo para seu portfolio! Depois desse você vai conseguir muitos outros"

Essa é uma das mais típicas. E costuma fazer vítimas principalmente entre jovens que ainda estão estudando. Para não cair nessa, basta pensar "quanto o seu cliente vai faturar com o seu trabalho?". Além disso, não esqueça que, mesmo que ele indique seu trabalho para outras empresas, com certeza ele dirá quanto custou (ou se foi de graça) e imagine o que os próximos irão querer?

4) Olhando para seus estudos e rascunhos: "Veja, não temos muita certeza se queremos seu trabalho. Deixe esses estudos comigo e vou falar com meu sócio/investidor/mulher, etc e depois te dou uma resposta"

Não dou 5 minutos para ele ligar para outros designers com seus estudos e conceitos criados na mão barganhando melhores preços. Quando você ligar de novo ele dirá que seu trabalho está muito acima do mercado, blá blá blá, e que Fulano Designer vai fazer o trabalho. Mas como eles conseguiram outro designer mais barato? Lógico, você já passou o conceito todo criado! Economizou horas para o designer que vai pegar o trabalho. Então, enquanto você não entrar em acordo com seu cliente NUNCA DEIXE NADA CRIATIVO no escritório dele!

5) "Veja, o job não foi cancelado, somente adiado. Deixe a conta aberta e continuaremos dentro de um mês ou dois"

Provavelmente não. Seria um erro você não faturar o que foi feito até o momento esperando que o trabalho continue depois. Ligue em dois meses e você verá que alguém estará trabalhando no job. E adivinhe! Eles nem ao menos sabem quem você é... e o dinheiro do início do trabalho, lógico, já era!

6) "CONTRATO?? Nós não precisamos assinar contratos! Não estamos entre amigos?"

Sim, estamos. Até que alguma coisa dê errada ou ocorra um mal-entendido, e você se transforme no meu maior inimigo e eu sou o seu "designer estúpido", aí o contrato é essencial! Simples assim! Ao menos que você não ligue em não ser pago. Qualquer profissional usa um contrato para definir como será o trabalho e você deve fazê-lo também!

7) "Envie-me a conta depois que o material for pra gráfica"

Por que esperar por esse deadline irrelevante? Você é honesto, não? Por que você deveria ficar preso a esse deadline? Uma vez entregue o trabalho, fature! Essa desculpa possivelmente é uma tática para atrasar o pagamento. Assim o material vai pra gráfica, precisa de alterações intermináveis e, adivinhe, ele arranja outra pessoa pra fazer as alterações necessárias, o material vai pra gráfica e você nem fica sabendo!

8) "O último designer fez esse job por R$ XX "

Isso é irrelevante. Se o último designer era tão bom por que ele te chamou? E quanto o outro cobrava não significa nada pra você. Pessoas que cobram muito pouco pelo seu tempo acabam fadadas ao insucesso (por auto-destruição financeira). Faça um preço justo, ofereça no máximo 5% de desconto e não abra mão disso.

9) "Nosso orçamento para esse job é de XX reais"

Interessante, não? Um cara sai para comprar um carro e sabe exatamente quanto ele vai gastar antes mesmo de fazer uma pesquisa. Uma quantia de trabalho custa uma quantia de dinheiro. Se seu cliente tem menos dinheiro e ainda assim você quer pegar o trabalho, dedique menos horas a ele. Deixe isso bem claro ao seu cliente, que você dedicará menos tempo que o estimado para finalizar o trabalho porque ele não pode pagar por mais horas. A escolha é sua.

10) "Estamos com problemas financeiros. Passe o trabalho para nós e, quando estivermos em melhor situação, te pagamos."

Claro, mas pode contar que, quando o dinheiro chegar, você estará bem lá no final da lista de pagamentos. Se alguém chega ao ponto de admitir que está com problemas financeiros então provavelmente o problema é bem maior do que parece. Além disso, você por acaso é um banco para fazer empréstimos? Se você quer arriscar, pelo menos peça dinheiro adicional pelo tempo de espera. Um banco faz isso, não faz? Por que provavelmente esse é o motivo deles quererem atrasar seu pagamento, ter 6 meses de dinheiro "emprestado" sem ter que pagar juros, o que não aconteceria se ele tivesse que emprestar do banco. Não jogue dinheiro fora!

Bom, o motivo de tudo isso não é deixar você paranóico ou coisa do tipo, mas sim injetar um pouco de realidade no mundo de fantasia da maioria dos designers. Você certamente vai tratar com pessoas muito diferentes de você. As motivações e atitudes certamente são diferentes. Eu infelizmente vejo, muitas vezes, exemplos de pessoas envolvidas em situações com a mais nobre das intenções e acabam literalmente se dando mal. Porque a maioria dos designers enxergam os trabalhos como uma oportunidade de fazer aquilo que mais gostam com dedicação, simplesmente porque amam o que fazem! A outra parte não tem a negociação tão idealizada ou romantizada, muito pelo contrário.

Como lidar com todas essas coisas e ainda assim fazer um trabalho criativo? Boa pergunta! É por isso que ir atrás da informação é importante. Você aprende a trabalhar com todas as técnicas do design, mas não aprende a arte da negociação. Muitos designers ignoram este aprendizado, o que é um grande erro. Sugiro que o mínimo seja incorporado assim certamente você não sentirá seu trabalho como uma grande perda de tempo e dinheiro!

Fonte

Tradução de Debora Behar

Retirado na íntegra do Mundo Gump

CSS: Caixas com cantos arredondados

Tradução livre de artigo originalmente publicado na tutorialvault.

Bem, o efeito final é este:

Caixa com cantos arredondados

Primeiramente, você precisa de duas imagens: a parte de cima e a parte de baixo da caixa. Fiz as minhas no Fireworks, e ficaram assim:

caixa_topo.png


caixa_baixo.png

A "mágica" da técnica é associar cada imagem como background de um elemento HTML. Isso cria uma vantagem óbvia, que é a de você montar uma estrutura bem definida, mantendo seu código semântico. A estrutura ficará desta forma:

<div class="caixa-curva">

<h2>Caixa com cantos arredondados</h2>

<p>Este texto se quebra automaticamente, sem deformar o formato da caixa.</p>

</div>



Vamos agora ao CSS:

.caixa-curva
{
width: 300px;
margin: 10px;
background-color: #c3d0d4;
}

.caixa-curva h2
{
background: #c3d0d4 url(../images/caixa_topo.png) no-repeat left top;
color: #f4fbfd;
padding: 10px 15px 5px 15px;
}

.caixa-curva p
{
background: #c3d0d4 url(../images/caixa_baixo.png) no-repeat left bottom;
margin: 0px;
padding: 5px 15px 10px 15px;
text-align: left;
}

O código garante as bordas arredondadas, e o texto não provocará quebra da caixa.

Qualquer dúvida, postem nos comentários.

Abraço e até a próxima!

Download do Fireworks 8, versão trial

Se você, assim como eu, achou a versão CS 3 ridiculamente pesada, disponibilizo abaixo links para download da versão Trial do Fireworks 8. Esta versão não é ilegal, pois é o download disponibilizado pela Adobe em sua versão trial.

Para instalar, baixe primeiro as três partes para o mesmo diretório, então extraia a partir do arquivo de extensão rar. A seguir é só executar o executável do instalador.

Links:

http://rapidshare.com/files/31809991/f0820070516.r00
http://rapidshare.com/files/31811744/f0820070516.r01
http://rapidshare.com/files/31813513/f0820070516.rar

Instalando mais de uma verão do IE na mesma máquina

Se você trabalha com desenvolvimento de sites, principalmente seguindo as W3C standards, e gostaria de ter mais de uma versão do Internet Explorer em sua máquina, agora você pode. Para tal, apenas baixe o programa Multiple IE (Site aqui ou download direto do meu espaço no 4Shared aqui - é só esperar o link de download aparecer).

O passo mais recomendável é que você instale o IE 7, e depois este programa. Ele instalará em seu PC instâncias do Internet Explorer versões 3, 4.01, 5.01, 5.55 e 6. Agora você pode ver o comportamento do seu site em todas estas versões (no entanto, recomendo que instale apenas a versão 6, no máximo a 5.55, isso é suficiente para realizar testes de compatibilidade levando em conta uma margem segura de usuários).

Observação: O campo de URL da versão 4.01 não funciona. Para abrir algum site, use o atalho Ctrl + O e digite o endereço na caixa de endereços que vai se abrir.

Channel Tecnologia: Prévia da terceira versão do site

Para quem quiser dar uma olhada (e preferencialmente opinar sobre), acessem a prévia da terceira versão do site da Channel Tecnologia, empresa em que trabalho.

Gastei os últimos dias resolvendo alguns pormenores do layout, como problemas com elementos de menu, imagens e tudo o mais. O próximo passo é decidir se desenvolvo uma nova apresentação flash para a home page ou se uso uma imagem... O tempo dirá. Por enquanto parece-me que este é o último problema a resolver.

Ah sim, utilizei ajax em algumas partes, como no menu Soluções (não deveria-se considerar isso Ajax "na essência"... Mas como faz parte das funções que o definem, tá valendo) e também na página como funciona o CBS (ajax interfere na maneira de mostrar a imagem demonstrativa - é só clicar no link "Visão Geral do CBS" no submenu à direita da página e você verá :D ).

De qualquer forma, críticas e sugestões são muito bem vindas!

;)

Convertendo imagens para duas cores

Outro efeito interessante e bastante simples de se usar... Em uma imagem só. Prometo não fazer isto muitas vezes! Hehehe

Clique no thumbnail para visualizar...

Efeito papel amassado

Um post pra ajudar a algumas pessoas da minha comunidade no orkut, que estavam tendo problemas para conseguir o efeito. Procurei ser o mais simples e direto possível na postagem, se não consegui, por favor, postem suas dúvidas nos comentários.

Existem outras coisas por vir ainda com essa imagem, como tornar as bordas mais realistas, e aplicação de texturas. Mas isso fica pra um post futuro, mesmo porque a idéia é ensinar a pescar, não dar o peixe.

Clique na imagem para acessar o tutorial.

Sobreposição/Encaixe de Imagens

Um recurso muito útil e usado. O meu tutorial é simples, mas através dele você consegue o conhecimento para aplicar em outras áreas.

Clique aqui para acessá-lo.