Archive for the 'Tecnologia' 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.

 

Anúncios

13 mitos sobre web design e SEO/SEM

centauro_349_265

Imagem: ingolfo.de

Wallace Vianna é webdesigner e desenvolvedor web

Quando me encomendam certos serviços de internet – de web design a marketing digital – as pessoas normalmente desconhecem o assunto e desejam alguém que “coloque o bloco na rua” de modo rápido e eficiente.

Estranhamente as pessoas ignoram que o profissional contratado sabe mais do assunto do que elas, e isso acaba na levando a ruídos de comunicação, decisões equivocadas e decepções que poderiam ser evitadas facilmente.

Por isso fiz uma pequena lista de certas crenças e suposições que povoam a mente do público em geral em relação a web design, e, de tabela, marketing digital (SEO/SEM ou otimização e marketing de sites para buscadores de intrnet):

Continue lendo ’13 mitos sobre web design e SEO/SEM’

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;

DesignDrops (1)

Wallace Vianna é mestre em design e autor do blog Wally Vianna

Porque detesto navegadores de internet que vêm junto com sistemas operacionais:

Fabricantes de Sistemas Operacionais (S.O.) deveriam ser proibidos de fabricar navegadores de internet. Conhece algum bom navgador que venha embarcado no S.O.?

gmaps-no-chrome

Página do Gmaps no Google Chrome (para Mac)

gmaps-no-safari

Página do Gmaps no Safari (para Mac, quem vem junto com o S.O.)

Continue lendo ‘DesignDrops (1)’

HTML 5, CSS3, ActionScript 3: quando, onde e porque usar

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

Tecnologia sempre muda: celular, computador, páginas da internet… HTML 5 permite que se implemente certos recursos que eram muito difíceis de serem controlados até hoje, como incorporar um vídeo (que não seja Flash) na sua página HTML. Agora existem marcações/tags para essa e outras tarefas.

O HTML 5 se parece como o ColdFusion (CF), uma linguagem de marcação da Adobe, que poupa o webdesigner de programar: as marcações do HTML 5 chamam bibliotecas de código no navegador de internet, (permitindo manipular vídeo de maneira adequada e uniforme, como faz o Flash).

O CSS 3 é útil pois permite fazer uma série de coisas que antes eram feitas de modo improvisado: seja um gradiente (usando código e não imagens) até caixas com cantos arredondados (sem uso de tabelas com pequenas imagens ou grandes imagens com quinas arredondadas).

O ActionsScript 3 (AS 3) traz melhorias conceituais: agora o core (principal) do código fica na linha do tempo; os objetos (botões, por exemplo) chamam toda a programação, que está em um lugar só. Por outro lado não há interface visual para trabahar com esse código.

Os problemas para tirar proveito de tudo isso são o mundo a nossa volta: nem todos os computadpres possuem navegadores de internet atualizados, e mesmos estes não dão suporte a todos os recusos do HTML 5 e CSS3; nem todos os computadores tem Flash Player/Tocador de Flash atualizado também. Para piorar a Adobe possui um instalador/atualizador de Flash Player que não funciona na maioria das vezes, obrigando as pessoas a descobrirem soluções criativas para ver conteúdo Flash em AS3.
A pá de cal são os computadores de mão, que tem esquentado muito com aplicações em Flash. Muitas pessoas estão evitando usar Flash em seus sites “para celular” e a própria Adobe descontinuou suporte de Flash para dispositivos móveis.

Ou seja: o HTML, CSS e FLash “novos” são recursos interessantes mas o mundo a nossa volta – e os navegadores de internet – precisam evoluir para que possamos desenvolver páginas da web para a maioria das pessoas.

Aproveitando a oportunidade, queria divulgar dois textos: este primeiro discute os novos caminhos que o HTML 5 aponta para quem trabalha com internet (webdesign e desenvolvedor web): o artigo discorre sobre as novas marcações HTML 5 como <article> e <section> que substituiriam marcações “antigas” como <div>; os CMS (gerenciadores de conteúdo) já se utilizam dessas novas marcações.

http://blog.templatemonster.com/2012/04/17/html5-semantics-elements-replace-div-tag

Este outro artigo discute recomendações para sitios para dispositivos móveis (re/projetar o sitio para que se adapte a telas menores; destacar elementos de navegação pela cor e evitar camadas ou elementos pop-up)

http://blog.templatemonster.com/2012/04/18/mobile-web-design-usability-tips/

Ambos em inglês, mas valem uma leitura.

Manual de revenda em webdesign

Resumo: Este texto procura  dar dicas a profissionais de design sobre como vender adequadamente serviços terceirizados de internet (webdesign).


http://gartic.uol.com.br/desenhos/escravos-de-jo

Revenda de serviços na área de internet existe de várias maneiras. Há a revenda de espaço de hospedagem de sites, por exemplo: o provedor de hospedagem vende um grande espaço em disco para profissionais e empresas que revendem esse espaço subdividido em discos/pastas menores, para seus clientes finais. Todos ganham: o provedor de hospedagem vende no atacado e o contratante ganha no varejo.
Há os profissionais de design que terceirizam outras áreas (internet, p.ex.) como qualquer agência. O profissional de design ganha em oferecer gama de serviços – entre eles serviços de internet – e o webdesigner contratado ganha na quantidade de serviços que recebe. Onde quero chegar é aqui.

Com citei em outro texto, sobre o Adobe Muse, webdesign e midia impressa (design gráfico) são semelhantes no conceito, mas não guardam muitas semelhanças. Ambos lidam com informação visual e diagramação, mas no caso do webdesign essa informação pode ser ouvida (deficientes visuais que acessam sites/sitios com leitores de tela) ou interagida (no caso de sites com conteúdo dinâmico – blogs, por exemplo). O briefing para vender um livreto provavelmente não será igual para vender um hotsite (site/sítio sazonal ou pequeno sítio dentro de um sítio maior). Assim sendo, resolvi fazer um pequeno manual para quem deseja terceirizar ou revender serviços de internet (webdesign). Motivo: já fui contactado para boas propostas de trabalho (do ponto de vista financeiro ou de portfólio) que não se efetivaram, entre outras razões, por falta de certas informações:

1) Faça o briefing correto. Costumo classificar o briefing como técnico, criativo ou executivo (ou um misto dos três). Posto um pequeno exemplo aqui que peguei emprestado da antiga revista Webdesign da Arteccom.
É importante fazer a sabatina completa e ser psicólogo, pois, antecipar as necessidades do cliente facilita a vida dele e se traduz em trabalho para você.
Um exemplo de como as perguntas certas podem fazer a diferença: um cliente contratou por conta própria um serviço de internet e apenas “desejava” uma funcionalidade nele. Logo após me contratou e pediu para colocar a funcionalidade desejada, mas eu descobri que não podia ser, no serviço contratado. Tempos depois descobri a solução em outra empresa, mas o cliente já não desejava migrar, pois já tinha organizado todo o seu trabalho na empresa atual.

Se eu fosse chamado desde o início e não fizesse todas as perguntas na hora certa, a necessidade iria passar em branco, e ainda seria acusado de indicar um serviço ruim (!). Se eu fizesse as perguntas certas desde o início, iria filtrar esse desejo do cliente.
Pensar nas necessidades antes de contratar serviços é semelhante a pensar na gráfica certa, antes de diagramar o trabalho.

2) Solicite de dois a três orçamentos com custos diferentes ao terceirizado, para que o cliente final possa ter opções dentro do sua verba. Mas isso depende de que você:

3) Evite orçamentos “para o mesmo dia”. Se o orçamento depender de terceiros, coloque pelo menos 2 dias para o terceirizado poder tirar dúvidas ou fazer levantamentos. Um bom orçamento normalmente será mais barato e preciso do que um orçamento feito às pressas. Por isso:

4) Leve o terceirizado para conversar com o cliente final, se puder. Se não puder, peça um modelo de briefing completo para o terceirizado. Como citei no tópico anterior, um boas perguntas podem ser a diferença entre um orçamento impreciso e caro que será recusado e outro, preciso, e aprovado com preço justo.

5) Faça as conversas fluírem entre as partes interessadas. Um exemplo: se você tem dúvidas sobre o que o cliente deseja, não consegue extrair a informação por desconhecer a atividade terceirizada ou não sabe se é possível entregar o que lhe pedem, não queira “fazer surpresa” ou superestimar seus conhecimentos na matéria. Os dois tópicos anteriores são sugestões para ganhar tempo nestes casos. Assim sendo,

6) Seja humilde. Faça um curso sobre o serviço terceirizado, assista palestras ou solicite informações ao terceirizado sobre como as coisas funcionam nesse metièr.
Uma forma de ser humilde é pedir opinião para quem vai fazer o site, de fato,  antes de apresentar o layout ao cliente. Você pode até ficar decepcionado(a) de saber que aquela linda página de abertura é um obstáculo para que o site de seu cliente seja localizado pelo Google, mas certamente vai achar uma alternativa tão bonita o quanto.
O personagem Dilbert das tirinhas de quadrinhos diz que “todos somos ignorantes em áreas diferentes”. Ninguém sabe tudo sobre informática, nem Bill Gates.
Ok, design é projeto, muitos administradores gerenciam projetos fora de sua área de formação, mas todos bons administradores sabem lidar com pessoas (essa frase não é minha, é de Jack Welsh, ex-presidente da GE) para fazer a coisa certa.
Outro motivo é que as coisas mudam muito depressa: se você acha e-mail marketing (mala direta digital) o máximo em publicidade com custos baixos ainda não ouviu falar em marketing de mídia social. Tenho um cliente que faz uso intensivo disso para divulgar e fomentar seus produtos e serviços, com excelentes resultados.

Enfim, essas recomendações são úteis quando trocamos de lado do balcão, e passamos a  ser clientes dos profissionais contratados.

Links de hipertexto em Flash

O Flash é uma tecnologia adequada a internet? Jacob Nielsen colocou esse tema de modo claro ao afirmar, décadas atrás que o Flash – coqueluche da internet no seu lançamento – era incompatível com o ambiente da internet. Os motivos são vários, alguns persistem até hoje:
links feitos em Flash não necessariamente possuem destaques (sublinhados ou borda) que  indicam os estágios da navegação (links não-visitados, visitados, e atuais, p.ex, como o HTML se esforça a indicar até seus limites[*])

Fiz uma tentativa de resolver essa questão de navegação em Flash, e como já ví outros sites com essa mesma preocupação, fico feliz de saber que estou no caminho certo: além do texto flash mudar de cor ao passar o cursor sobre o link, o link assinala através da cor a página/tela atual e as demais páginas.

(Exemplo de flash com links de hipertexto)

Download do exemplo


Nota(s):

[*] o HTML indica através de cores se uma página foi (ou não foi) visitada, e a página atual. Mas não tem como indicar se a página atual  é uma página visitada, ao mesmo tempo. Algumas estratégias utilizando ou não tecnologias complementares como CSS procuram resolver estas questões: posso retirar o link da página atual da barra de navegação para indicar a página que estou, ou formatar o link da página atual com uma cor ou estilo diferente, via CSS, com o mesmo fim.