• Sobre
• Cursos Online
• Orkut
• Youtube
• Twitter
• Contato

10-02-08

Site para uma cidade

Olha aí que legal, apareci na edição de outubro/2008 da excelente Revista WWW ( excelente porquê é bom mesmo, recomendo demais ). O pessoal da revista me mandou um desafio: criar um site governamental, mais precisamente para uma prefeitura, que fosse diferente, bonito, nada parecido com aqueles portais sem graça que normalmente vemos por aí.

Aceitei o desafio! Resolvi então fazer o layout da prefeitura de Jijoca de Jericoacoara. Nesta cidade encontra-se o lindo parque de Jericoacoara, com suas praias belissimas e dunas paradisíacas que, claro, já visitei.

É meus amigos, o bom de ser webdesigner trabalhando em seu doce lar é que você pode tirar férias em qualquer época do ano. Melhor ainda é aproveitar aquelas promoções bacanas de 50 reais que de vez em quando alguma companhia aérea lança por aí.

Bem, peguei algumas fotinhas que tirei por lá e fiz o layout. Comentei cada elemento do design, dizendo o porquê de cada coisa. Esse tipo de análise me lembrou muito as aulas do Curso de Design Web ou 10 Sites Reconstruídos. 

Além do meu layout, outros dois designers, Mandy Chan e Duncan Stevenson, aceitaram o desafio e fizeram suas propostas também. Uma ótima forma de estudo de layout,  entendendo as razões que levaram cada web designer a fazer o layout daquela forma. O resultado você encontra na Revista WWW que você pode adquirir na banca mais próxima ou clicando aqui.

Para o alto e Avante!

09-09-08

9 Layouts Web altamente funcionais, segundo Ben Hunt

Trago para o Avante essa ótima análise do webdesigner inglês Ben Hunt dono da agência web Scratch Media e autor de alguns ebooks, como o Business of Web design e Save The Pixel – The Art of Simple Web Design.

Na análise, Hunt lista alguns layouts que ele considera como seus favoritos no quesito layout funcional. São 9 layouts devidamente comentados, levantando alguns pontos interessantes. Como nem todo mundo gosta de ler em inglês,  fiz aqui um resumo traduzido do que Ben Hunt analisou. Vamos lá.

01. Traineo

Para Hunt, Traineo já é um clássico precoce dos layouts estilo Web 2.0. Um header escuro, luminosidade numa área de conteúdo aberta ( sem molduras e caixas fechando todo o conteúdo ) e o uso de cores vivas para chamar a atenção.

Segundo o webdesigner, Traineo é um excelente exemplo de estilo que favorece o trabalho, combinando perfeitamente conjuntos de informações e funções, mantendo um sentimento de simplicidade.  Utiliza bem o texto, distribuindo bem os espaços juntamente com uma navegação simples. Para ele, um super-exemplo a se seguir de uma concepção moderna de design voltado ao usuário.

02. iStockPhoto

Hunt destaca a elegância desse layout, voltado para a venda de fotos para usuários comuns.  No layout, o webdesigner observa a sólida barra superior de pequena altura e as cores neutras que permitem um maior destaque para a apresentação de seu principal produto: as imagens. A idéia é fazer com que não haja competição entre o layout e as imagens que estão expostas.

A primeira página é um bom exemplo de combinação de conteúdo leve ( fotos ) com conteúdo mais bruto ( caixas de pesquisa, valores, promoções ). A função das fotos é sugerir que dentro do site é possível encontrar uma série de opções de imagens em alta resolução enquanto ao lado encontramos em destaque a caixa de pesquisa e a tabela de preços bem visível, de forma direta e sem complicações.

03. Rememble

Para Ben Hunt, o layout da Rememble é um típico layout “divertido” no estilo Web 2.0. Isso é bem caracterizado pelas fontes simpáticas e arredondadas do logotipo do site. No topo temos uma barra sólida, grandes titulos e painéis coloridos para destacar informações de interesse do visitante. Logo no início encontramos um parágrafo de introdução que explica a funcionalidade do site, ou seja, diz logo de cara para quê veio.

04. Component Art

Component Art segue um estilo um pouco menos Web 2.0, segundo Hunt. Trata-se de uma combinação de uma grande quantidade de informações em uma interface muito simples. Desta vez, uma marca convencional + um menu horizontal no topo acima de um página misturando as cores preto e laranja.

Não há uma hierarquia bem definida nem grandes destaques, levando você a não ter uma orientação visual do que é mais importante e se ver obrigado a ler boa parte das chamadas.  E se esse era o objetivo, ele cumpre seu papel.

05. Purina

Esta famosa marca de ração para animaizinhos de estimação utilizou em seu site um familiar estilo de layout em painéis sólidos. Hunt diz gostar desse layout pela animação flash simples no cabeçalho que se encaixa perfeitamente ao layout, ajudado pelo zoom e cortes de fotografia, dando uma forte impressão da marca.

O resto do layout é bastante limpo e convencional. Com apenas 2 colunas principais, deixa o visitante mais seguro ao passear os olhos pelo conteúdo e a navegação é de fácil entendimento, mesmo usando menus suspensos. Hunt Lembra que trata-se de um layout simples, adequado para um vasto público-alvo.

06. Whishlitsr

Segundo Hunt, o mais interessante desse site é sua introdução. Em poucas linhas e num pequeno espaço ele diz para quê veio: “”Crie uma lista de desejos.  Compartilhe  com os amigos e a família.” Pronto. E Hunt complementa: “uma porção de sites se beneficiariam se dissessem tão claramente o que eles fazem, assim como esse site.”

Ben Hunt diz gostar das 3 colunas bem espaçadas e headings simples. Não se gasta mais que 10 segundos nesta página para se ter uma idéia do que ela é. 

07. My Musik Downloads

Esse layout, apesar da quantidade de informações, lembra muito o estilo Web 2.0. Isso de dá, segundo Hunt, pelo foco que se dá as informações, mesmo estando rodeado delas, fazendo com que a primeira página tenha uma grande eficácia.

Este layout consegue englobar uma série de informações importantes sem sobrecarregar a página.

08. Burstcast

Mais um exemplo de informação direta, objetiva. Em apenas 6 palavras este site diz o que ele faz: “Snap ot. Send it. Share it” com destaque para o Share It que é o grande barato do site. Logo abaixo, eles pegam um pequeno espaço do site para transmitir como funciona o sistema.

09. Unfortunate

Da mesma forma que os demais, esse site também comunica diretamente o que ele faz. É basicamente um serviço para criar mensagens de sorte, como aqueles biscoitinhos da sorte que ganhamos no China in Box. Só que dessa vez você que cria a sorte e compartilha com os amigos.

Logo de cara diz o que faz, em poucas palavras. Dá exemplos de utilização no próprio sistema e uma caixa destacada diz “Crie sua própria sorte!”. Simples não?

Para o alto e Avante!

09-04-08

Como vender sites sem ter portfólio?

Essa é uma dúvida muito comum entre muitos webdesigners em início de carreira. No Curso “Como Vender Sites” abordamos muito esse assunto e discutimos formas de se destacar e fechar negócios mesmo sem ter um portfólio grande de clientes.

Em nosso grupo de discussão, fiquei feliz ao ver o caso de sucesso do aluno e webdesigner Filipe Petter. Ele colocou em prática aquilo que já venho dizendo em outros artigos. É a velha e excelente técnica de oferecer algo útil para o cliente antes mesmo dele fechar negócio.

Trouxe para vocês as idéias do Filipe. Acho que será de grande ajuda para muitos webdesigners. Divirtam-se:

“Resolvi compartilhar com nossos nobres colegas uma técnica de vendas que “desenvolvi”, digo desenvolvi por que demorou bastante tempo até ter um bom retorno e ainda pretendo desenvolver mais.

 

Bom, primeiramente deixem me apresentar. Sou Filipe Petter, trabalho meio turno em uma empresa como suporte técnico mas quero ver se mudo isso, quero trabalhar criando algo em vez de ficar consertando o que os outros estragam.

Então, voltando a técnica que quero comentar, quando comecei a criar sites, alguns meses atrás, depois de ter feito alguns cursos e tal, me deparei com o seguinte problema:

 

“Como vou vender um serviço sem ter um portifólio? Como as pessoas vão
saber que eu sei o que estou falando, que estou apto a atender as
necessidades delas?”

 

Um belo dia, navegando pela internet, procurando um site de consultoria pra um amigo, comecei a perceber uma coisa, como tem empresas com um site extremamente feio, nem um pouco funcional e que te transmite a impressão que é uma empresa de fundo de quintal, mesmo muitas vezes se tratando de excelentes profissionais.

 

E então “plim” surgiu a idéia, cliquei naquele infame link “mailto”, que presume que todo mundo tem configurado e instalado um cliente de e-mail, e enviei um e-mail mais ou menos assim para a empresa:

 

“Prezado senhor (eu me dei o trabalho de pesquisar no site o nome do cliente)
Navegando pela internet, encontrei seu site por que procurava tal e tal coisa e blá blá blá… Contanto, fiquei preocupado com a imagem de sua empresa por conta do seu site que está assim, assado e blá blá blá…”

 

Resumindo, sentei o pau no site do cliente, enumerei milhares de defeitos, ou seja, disse que o site dele era um lixo e pronto. Não preciso nem mencionar que o cliente odiou meu e-mail e nao me contratou.

 

Mas com o tempo fui aprimorando essa abordagem, e hoje dedico um bom tempo analisando sites de potenciais clientes e mando um relatório não muito detalhado, mas com boas informações do que poderia ser melhorado se contratasse meus serviços.

 

Galera, os resultados são bem legais, de cada 10 e-mails que mando, 3 retornam, esses 3 eu procuro fazer um contato telefônico, marco uma reuniãozinha por telefone, e pelo menos 2 fecham.

 

Motivos pelos quais eu acredito que isso funciona muito bem:

1. Você vem com uma solução pronta para o cliente
2. Você demonstra interesse na empresa do cliente
3. Você mostra pra ele que pode ter uma boa experiência com seu site
4. Você mostra que conhece o que faz mesmo sem ter um portifólio

Motivos pelos quais isso é muito bom pra quem tá começando

1. Já tem identidade e cores definidas
2. Já tem um logo definido
3. Já tem domínio e hospedagem prontos

Motivos pelos quais clientes não fecham ou você tem que trabalhar muito pra fechar:

1. Cliente teve uma má experiência com a criação de seu site
2. Cliente não acredita que um site pode trazer lucro ou aumentar as vendas
3. Cliente se diz satisfeito com o que ele tem

Ta ai galera, essa é minha experiência.

Qual a sua?

Felipe Petter“

E então, diga aí! Qual a sua?
Para o alto e Avante!

08-20-08

Amadorismo de sites impede crescimento de empresas

Essa dica foi enviada pelo querido leitor Ivanberg Moreira. Trata-se de uma matéria bem legal da “Pequenas Empresas, Grandes Negócios.”  O texto aborda a subestimação por parte de algumas empresas da importância de um website para a sua lucratividade.

Acredito que esse texto servirá de bom argumento na hora de negociar um site com aquele cliente que tenta diminuir o valor do seu serviço e ameaça fazer com o sobrinho por um precinho camarada ( quando não é de graça ).

Leia mais…

07-30-08

Semelhanças entre o Cabeleireiro e o Webdesigner: erros de briefing

Semana passada fui cortar o cabelo, depois de dois meses de cabeleira. É, depois que percebi que estava ficando careca, deixei o cabelo por mais tempo e assim as pessoas ao invés de dizer que estou ficando careca, dizem que preciso cortar o cabelo.

Bem, mas não quero dar aqui dicas de estética capilar mas de briefing.

“Bruno, o que tem a ver cabelo com briefing?”

Tudo a ver. Sempre que você senta numa cadeira para cortar o cabelo, o profissional especializado em assuntos cabelísticos, mais precisamente o cabeleireiro, irá fazer algumas perguntas pra você. Nessa hora você, mesmo sem perceber, está sendo brifado. As perguntas nada mais são do que um briefing para saber que tipo de cabelo você gosta, que tipo de corte deseja e o que espera ver no final do serviço.

E como estava dizendo, semana passada fui ao cabelereiro ( em alguma cidades, macho que é macho vai em barbeiro mas aqui o pessoal diz cabeleireiro mesmo ). Era a primeira vez que cortava o cabelo com este profissional e portanto, tive que ser brifado. Já me adiantei, dizendo que queria o cabelo partido para o lado, do mesmo jeito que corto e penteio desde 1 ano de idade. Disse ao cabelereiro: está vendo esse penteado? Pois então, você só precisa baixar o volume do meu cabelo e deixá-lo do mesmo jeito, no mesmo formato, não tem mistério.

Eu queria meu cabelo assim, com esse penteado. Bastava tirar o volume.

Simples, acredito que até vocês entenderiam. O cabelo do mesmo jeito, só baixar o volume. Depois de informado o tipo de cabelo e como gostaria que ele ficasse após o corte, o rapaz entrou em ação. Só que ele estava cortando de uma maneira estranha. Puxava meu cabelo, enrolando, fazendo pontas e picotando. Aquilo era incômodo, parecia que estava arrancando meus cabelos pela raiz ou então passando a faca neles. Mas não reclamei. Sei como é quando um layout está pela metade. Se o cliente ver o layout pela metade, acha que dali vai sair uma coisa horrorosa. Então não é bom opinar na hora que se está produzindo. Logo deixei o homi trabalhar.

Para minha surpresa, após passar o espanador para tirar os restos de cabelo e tirar o lenço em volta do pescoço fiquei surpreso quando vi que ele tinha dado como finalizado o serviço. Afinal, ao olhar no espelho, meu cabelo estava assim:

Após o laquê ( Laquê é o novo! ), minha cabeleira ficou assim. Super moderno não acham?

Agora pergunto a você: o que tem a ver esse cabelo com o que eu tinha pedido? Absolutamente nada. Não sei o que passou pela cabeça do cabeleireiro mas o que parece é que ele ignorou o briefing, não escutou nada do que eu disse e fez algo completamente diferente do que tinha pedido. É como se ele tivesse feito este cabelo pensando que seria a melhor solução para mim, por ser, segundo ele, um corte “super-moderno”. Porém, ele fez sem me consultar se este tipo de corte me agradaria.

Pedi então para refazer todo o cabelo e repeti novamente o que tinha dito no início. Ele refez, a contra gosto e aparentando decepção por não ter entendido sua “arte”.

Quando me vi nessa situação me lembrei automaticamente do nosso trabalho e o que venho dizendo sempre por aqui. O que aconteceu comigo no salão de cabeleireiro foi o mesmo que acontece com centenas de webdesigners que não interpretam o briefing de forma correta e apresentam ao cliente algo totalmente fora de suas expectativas. Resultado: o cliente manda voltar e fazer de novo da mesma forma que mandei o cabeleireiro fazer de novo o corte de meu cabelo.

Agora, acontece o contrário também. O cliente diz que não sabe o que quer e diz ao cabelereiro que confia na criatividade e no seu bom-gosto. O cabeleireiro faz o cabelo que achar melhor e o cliente não gosta. O mesmo acontece no webdesign. O cliente diz que confia em você, não diz nada no briefing e quando você apresenta o layout, ele não gosta. Então muito cuidado com esse tipo de situação, tente fazer o cliente responder cada pergunta do seu briefing.

E cuidado com os cabeleireiros. Vai que você sai de lá ruivo?

Para o alto e Avante!

07-15-08

Site funcionando em todas as resoluções

Dia desses recebi um email do nosso querido leitor Raenner, de Itabira – MG. No email ele pergunta:

Bruno, queria saber como fazer que um site funcione em
todas as resoluções. usando Dreamweaver. Se não der para colocar no
Avante, pelo menos dê uma dica, irá ser muito interessante um post no
Avante sobre este assunto.

Ok, Raenner, então vamos lá. Existe muito, mas muitos textos, artigos e dicas referentes a este assunto na Internet. O que vou fazer aqui é comentar um deles. Primeiro leia o texto  publicado no Fator W, Projetar layout líquido é justiça com o usuário, de Leonardo Procópio. Nesse artigo, Leonardo nos mostra as vantagens de utilizar um layout líquido.  Layout líquido ou fluído  é nada mais do que um site diagramado com valores de largura em porcentagem. Um exemplo, sem frescura, é quando você coloca tudo dentro de divs com larguras em porcentagem. Capiche?

Pois então, no texto Leonardo cita também as desvantagens do layout líquido.

A desvantagem do layout líquido é que ele é bem mais difícil de projetar que o fixo. O desenvolvedor tem que observar diferentes resoluções, não pode usar posicionamento absoluto para os objetos e uma série de outros fatores.

É, em algumas resoluções o site pode ficar feio, o texto muito solto e comprido e todo o site ficar com aspecto de “linguiça”. Por isso que até hoje o layout líquido não pegou. Talvez uma prova disso esteja no próprio layout do Fator W. Veja o que Leonardo disse em 2005:

Aqui no fator W, uso layout líquido. A coluna de informações varia de acordo com a área disponível na tela. Isso permite que tanto quem usa 800×600, 1024×768 ou 1152×864 vejam o site usando todo o espaço disponível na tela.

É, mas se você notar, ao entrar no Fator W, o site não é mais líquido. Quem entra no site utilizando resolução 800 x 600 tem que apelar para a barra de rolagem horizontal. Acho que até o Leonardo cansou do layout líquido por conta da dificuldade de trabalhar com esse tipo de construção. O texto foi escrito em 2005, portanto, de lá pra cá o layout do Fator W deve ter mudado.

Bem, ainda prefiro o layout fixo, prevendo uma resolução mínima. Como sei por estatística que mais de 90% dos meus visitantes usam resoluções acima de 1024 x 768, trabalho com essa resolução mínima, criando o layout baseando-se nessa resolução.  Porém, daqui a um tempo essa minha preferência pode ser mudada. Há 10 anos criava sites baseados em resoluções 640 x 480. O que precisamos então é ficar antenados nas mudanças.

Para o alto e Avante!

07-09-08

Web design no SPTV

Dia desses passou uma matéria bem legal sobre o mercado de Web Design no SPTV, telejornal local da Rede Globo destinado a São Paulo. Na matéria vocês poderão ver as dependências da Área Comunicação onde dois Web designers da agência foram entrevistados, Seiji Himoro e Jhun Kusano. Para representar o webdesigner freelancer, Fábio Martinez falou um pouquinho das vantagens de se trabalhar sozinho.   Além disso a matéria dá dicas sobre o mercado, mencionando inclusive a média salarial do Webdesigner.

Leia mais…

06-23-08

Quero ser um Webdesigner!

Recebi um email de André, um leitor do Rio Grande do Sul que diz o seguinte:

“Olá Bruno! Gostaria de um conselho. Gosto muito de informática. Trabalho há 7 anos numa loja e quero crescer (eu sei q posso) então, por favor me ajude, me aconselhe, o que devo fazer, que cursos… enfim … agradeço muuuuuiiiitttoooo pela ajuda!”

Sim, você pode crescer. Veja o exemplo do Ubirajara. Com força de vontade e observação, vai-se longe.

O email do André me deu uma idéia. Vou colocar aqui um passo-à-passo sintético e objetivo de como começar no webdesign.

Cursos

1. Procure cursos básicos, que qualquer SOS, Microlins, Microcamp e cursinhos de informática tem. Eles irão mostrar para você o básico do básico. Aqueles que o pessoal chama de “Curso de Webdesign” mas que só ensinam mesmo o basicão do HTML, Photoshop ou Fireworks e Dreamweaver. Lá na frente você verá que um bom webdesigner precisa saber um pouco mais, porém cursos como esses são importantíssimos pois será o seu primeiro contato com as ferramentas, termos e protocolos como http e FTP.

2. Após aprender as ferramentas básicas e essenciais, busque se aprofundar no conhecimento teórico do design. Conheça por exemplo os cursos que ministro, todos para webdesigner de nível intermediário, onde proponho um aprofundamento da teoria em favor da prática. Com esses cursos o webdesigner irá conhecer novos caminhos, aguçando a criatividade e compreendendo como funciona o processo de criação. Veja em http://cursos.brunoavila.com.br

3. Experimente fazer algum curso, mesmo que básico, de php ou outra linguagem semelhante. Mesmo que você não queira ser programador, poderá lhe ajudar bastante no dia-à-dia.

4. Não deixe de fazer uma graduação. Você pode fazer publicidade, design ou até mesmo uma faculdade de webdesign. Nesse post cito algumas faculdades de webdesign, veja. Além de você aprofundar mais em alguns assuntos, lhe garantirá um ganho maior se você tiver um diploma debaixo do braço.

 

Livros

Outra opção muito boa é investir em livros. Vou citar algums livros que você deve ler, em sequência e que também não são tão caros. Coloco também o link caso você queira adquirir pela internet.

Webdesign - Eduardo Moraz
Livrinho básico e barato que servirá para aqueles bem novatos que não sabe nem o que é um FTP. É bom começar por esse livro.

Construíndo Sites com CSS e XHTML – Maurício Samy Silva
Bom livro para você ter noções de HTML e CSS.

Fireworks 8 – Silvana Tauhata
Gosto desse software para edição de layouts, muitos webdesigners optam por ele também. Caso este livro esteja caro, procure por livros de versões anteriores que são mais baratos e não muda muita coisa.

Adobe Photoshop CS2: Guia Prático e Visual – Anderson Vieira
Livros de Photoshop são bem caros, mas esse se propõe a ser barato e mostrar para os leigos e iniciantes os primeiros passos do Photoshop. 

Outros livros que indico, mais aprofundados, sobre usabilidade e design você encontra aqui do lado desse post. Mas é muito importante ter um conhecimento prévio das ferramentas que citei acima para continuar nos demais livros.

É isso! Agora divirtam-se!

Para o alto e Avante!

06-19-08

Mais um IBest!

Fiquei muito feliz esses dias por saber que as Lojas Visão conquistou o IBest Regional – PA. Pergunto: imagina quem fez toda a programação visual do site?

A repercurssão em Belém foi grande. Olha ai o Salim Junes, analista de marketing do Grupo Visão, na capa do caderno de Tecnologia do principal jornal do estado. E ele manda um recado pra gente:

“Firmamos esta parceria com Bruno Ávila há algum tempo, onde executamos o projeto de reformulação visual de nosso site o que nos deixou absolutamente satisfeitos com seu trabalho e empenho. A sua paixão e dedicação fazem a diferença! Este ano, pela primeira vez nosso site participou do prêmio iBest e através de júri popular foi eleito campeão regional (Pará).  Isso foi reflexo do reconhecimento dos usuários de nosso site que sabem dos esforços que temos em estreitar cada vez mais nosso relacionamento com eles. E ainda ratifica a parceria de sucesso estabelecida com Bruno Ávila.”

Êêêê! Valeu Salim! Valeu Paraenses!

Tenho que agradecer também ao Ronaldo Nascimento que participou desse projeto com sua arte da programação.

É isso aí! Para o alto e Avante!

06-10-08

Vendedor de aspirador de pó

História boa e divertida enviada por Mike, que se diz leitor assíduo de nosso blog.

Se esse vendedor tivesse feito um briefing antes com o cliente, isto não teria acontecido.

Uma dona de casa, num vilarejo, ao atender as palmas em sua porta…

- ‘Oh de casa, tô entrando!’

Ela se depara com um homem que vai entrando em sua casa e joga esterco de
cavalo em seu tapete da sala. A mulher apavorada pergunta:

- ‘O senhor está maluco? O que pensa que está fazendo em meu tapete?’

O vendedor, sem deixar a mulher falar, responde:

- ‘Boa tarde! Eu estou oferecendo ao vivo, o meu produto, e eu provo pra senhora que os nossos aspiradores são os melhores e mais eficientes do mercado, tanto que vou fazer um desafio: se eu não limpar este esterco em seu tapete, eu prometo que irei comê-lo!’

A mulher se retirou para a cozinha sem falar nada.

O vendedor curioso, perguntou:

- ‘A senhora vai aonde? Não vai ver a eficiência do meu produto?’

A mulher responde:

- ‘Vou pegar uma colher, sal e pimenta e um guardanapo de papel.
Também uma cachaça para te abrir o apetite, pois aqui em casa não tem
energia elétrica!’

Moral da história:
Conheça o seu cliente antes de oferecer qualquer coisa.

Para o alto e Avante!