Projeto Gráfico para o Diário de São Paulo

Anuncios criados por mim usando Photoshop e publicados em encarte do Diario de São Paulo em 28/8/2011 - domingo

CAPA DO ENCARTE

CONTRA-CAPA

ANUNCIANTES

Site feito em aula

Em meus anúncios de curso espalhados pela internet, sempre digo que "você pode fazer o site da sua empresa em aula". Então aqui está o trabalho da minha aluna Adriana, corretora de seguros da SCCorretora, feito em aula ontem. Segue a foto e o link.

www.seguroscalculoonline.com.br

Prepare-se! Os idosos estão invadindo a internet

Verifica-se um aumento exponencial da presença de seniores nas redes sociais o que denuncia um forte desejo de sair da solidão , comunicando com os outros. Contudo há um número considerável dos que não querem aderir às novas tecnologias, não por falta de tempo ou de capacidades, mas porque ao passarem à reforma, acomodam-se ao quotidiano e não disfrutam do seu dia a dia com os devidos incentivos. Perdem o interesse. Alegam que não vale a pena, que a aprendizagem é muito difícil e até mesmo "que burro velho não aprende línguas". Mas acaba de se verificar , que no ano passado, 29 % da população portuguesa entre os 55 e os 64 anos utilizou regularmente a Internet. Felizmente o interesse está a despertar nesta faixa etária e muitas vezes devido à pressão dos filhos e netos . Em cada dia que passaparece um maior número de pessoas a aderir ás redes sociais. Nos EUA, um estudo recente do Projecto Internet e American Life , concluiu que entre Abril de 2009 e Maio de 2010 o uso das redes sociais entre utilizadores da Internet com idades compreendidas entre os 55 e os 64 anos aumentou 88%. E no grupo etário dos 65 e mais anos , esta presença cresceu 100%. Fantástico, não é?
Vá, senhoras /es que passam o tempo a queixar-se da solidão ,façam um esforço e comecem a navegar connosco.
Verão que é divertido e apaixonante.
A minha amiga Linda é um exemplo perfeito de que a idade não limita o interesse pela vida.
Vamos?
Publicada por Dina Constança em 10:59

Design de Site

Layout para site de ourivesaria-sp.

Como instalar o WordPress?

Depois que migrei do Blogger.com para o super WordPress recebi alguns e-mails com dúvidas sobre como instalar o danado do sistema num host. Muitos reclamam que não existem muitas informações amigáveis em português, ou então reclamam que a instalação precisa de conhecimentos em MySQL e PHP, o que não é uma verdade completa. Muita gente começa no WP sem saber programar em PHP. Uns até acabam se interessando pela linguagem para brincar no seu blog e se descobrem como bons programadores. Claro que há aqueles blogueiros que não tem interesse em programar, mas querem mais flexibilidade na sua ferramenta de blog. Por esses motivos resolvi fazer um tutorial o mais amigável possível sobre a instalação do WordPress, mas é preciso ler com calma. Se precisar correr ou estiver com preguiça é melhor escolher outro dia ou outro tutorial, pois não escrevo muito bem. :)

Você primeiro, claro, vai ter que assinar um plano de hospedagem num host com PHP e MySQL. Há uma lista com hosts gratuitos, mas que devem ser usados por sua conta e risco, pois não testei nenhum deles. Eu realmente indico que você procure uma hospedagem paga pelas inúmeras vantagens, inclusive suporte personalizado. Você pode tentar a Dreamhost, apesar de ter um serviço incrível o suporte é em inglês pois é um host internacional, você também pode pesquisar preços de hospedagem no Buscapé, essa parte de hospedagem é você mesmo quem tem que decidir.

Você vai ter que saber que o WP usa esse MySQL como banco de dados para armazenar tudo que você vai escrever e configurar. Para tudo funcionar você precisa criar um novo banco de dados no seu host. Geralmente você faz isso usando o PHPMyAdmin, mas se ao abri-lo não tiver a opção de criar um novo banco de dados você pode procurar a opção “Banco de dados MySQL” no seu painel de controle, é fácil. Se não achar, qualquer coisa você pode infernizar o suporte do seu host e perguntar onde que faz o novo bd. :P
No meu exemplo vou dar o nome de “meubd” (sem as aspas) ao banco de dados. O MySQL também vai pedir um nome de usuário e uma senha para esse novo bd. Vou usar “meuusuariobd” e “minhasenhabd” respectivamente, no exemplo.
Adendo: Os hosts têm, por questão de segurança, o costume de colocar o seu nome de usuário como prefixo do nome do seu bd. Complicou? Se o seu nome de usuário for “maria” então o nome do seu bd será “maria_meubd”. Então preste atenção ao nome do seu banco de dados assim que ele for criado.

Banco criado, baixe o zip no site do WordPress e descompacte os arquivos no seu PC. É preciso agora dizer ao WP as três informações do banco de dados recém criado. Dentro da pasta “wordpress” procure o arquivo “WP-config-sample.php” e abra no seu bloco de notas, você vai ver uns códigos bonitos que precisam ser modificados, não se assuste é muito simples.

Na terceira linha encontramos o seguinte texto:
define('DB_NAME', 'wordpress'); // The name of the database
Modifique ‘wordpress’ para o nome do banco de dados que foi criado anteriormente, nesse meu exemplo aqui vai ficar:
define('DB_NAME', 'meubd'); // The name of the database

As linhas que seguem no arquivo são:
define('DB_USER', 'username'); // Your MySQL username
define('DB_PASSWORD', 'password'); // ...and password
Há espertinho! Já deve saber o que fazer hein? Onde tem ‘username’ você vai mudar para o nome de usuário que você criou e o ‘password’ é a senha definida para o bd. Então no exemplo aqui vamos ter:
define('DB_USER', 'meuusuariobd'); // Your MySQL username
define('DB_PASSWORD', 'minhasenhadb'); // ...and password

Feito isso vá em Arquivo > Salvar como, salve o arquivo na pasta “wordpress” com o nome “WP-config.php”.
Agora é a hora de subir essa pasta para o seu servidor de hospedagem usando um programa de FTP. Recomendo o Filezilla ou o SmartFTP.
Com a pasta “wordpress” no ar mude o nome dela para “blog”, faça isso agora. Mudar o nome dessa pasta no futuro é possível, mas não é uma boa idéia, repito: não é uma boa idéia.

Nome da pasta escolhido? Então agora você finalmente precisa instalar o WordPress. Abra o seu navegador e acesse o endereço do seu blog, por exemplo www.meusite.com/blog. Vai aparecer um aviso em inglês pedindo pra você instalar o WP. Clique no link no final da frase e siga os passos.
“First Step”, depois preencha o campo com aquele que vai ser o título do seu blog e o outro com o seu e-mail. Antes de seguir dê uma verificada para ver se seu e-mail está correto. É só clicar em “Continue to Second Step”, o WordPress vai gerar uma senha aleatória e mandá-la para o e-mail especificado e criar suas tabelas no banco de dados e configurar-se sozinho. Deve aparecer a seguinte:

Seu nome de usuário é “admin” e a senha é o número aleatório que ele apresenta nessa página. No exemplo da imagem temos “40e3f1” como senha. Copie esse número para logar no sistema pela primeira vez.
É só clicar no link “log in” e colocar “admin” (obviamente sem as aspinhas) no “username” e no “password” colocar o número que ele gerou. Se por um acaso você o perdeu nesse tempão, abra o e-mail especificado na instalação que lá estará a senha.

Com essa senha estranha em mãos é uma boa idéia mudá-la. Já dentro do sistema, vá em “Users” e preencha os campos “New password” e “Type it one more time” com a sua senha pessoal que você quer definir para o blog, vê se não vai colocar “1234″ ou seu número de celular pra todo mundo descobrir depois.

Acesse www.meusite.com/blog e veja se está lá o post e o comentário de exemplos. Agora é só ir atrás de um tema estiloso, instalar os plugins que você achar interessante e dizer a todo mundo que você é Powered by fuckin’ lovely WordPress. ;)

Também foi criado o Portal WordPress e criei um post com dicas que podem ser seguidas depois da instalação.
Apensar de eu não indicar o uso do WP em português pelo fato da documentação dele ser toda em inglês, no site taijiquan.pro.br você encontra o arquivo de tradução e também as instruções de como configurar para português.
Divirta-se!

E quando o cliente diz que seu layout tá uma “merda”?

FAZ CARA DE PAISAGEM

Data de publicação: 27/05/2011
Me perdoem pela palavra de baixo calão, um tanto indigesto, mas é a mais pura realidade. Quem aqui nunca escutou da boca de um cliente, do chefe ou até mesmo de um amigo que “seu layout tá uma merda”? Mesmo os melhores web designers já escutaram isso pelo menos uma vez ou algumas dezenas de vezes antes de serem o que são.


Mas Bruno, tenha piedade. Meu layout estava lindo! E mesmo assim o cliente disse essa asneira. Culpa dele que não tem bom gosto!
Será mesmo? Será que a culpa não é do Web Designer, sempre é do cliente?

Trago para vocês um exercício muito bacana que faço com todos os meus alunos do Curso de Design Web. A idéia é desmitificar a história de que sempre a culpa é do cliente que não entende o estilo de sua “arte”. Neste exercício apresento um briefing fictício para todos os alunos, com prazo de entrega e outras orientações. Cada briefing é analisado de forma personalizada, onde comento através de áudio e rabiscos no layout como foi o desempenho do aluno, apontando o que pode ser mudado e sugerindo melhores formas de apresentação.

Durante o curso são sugeridos 3 trabalhos de criação, todos analisados por mim. Nos últimos anos tive a oportunidade de avaliar mais de 1200 trabalhos de layout e graças a essas análises pude identificar alguns erros comuns entre os web designers.

Vamos começar então com um briefing de mentirinha que servirá de guia para a criação do layout:

Briefing
Qual o nome do site?
Empresa Exemplo

Fale um pouco sobre a Exemplo
A Exemplo é uma empresa de consultoria e soluções em negócios dos mais diversos segmentos. Presta serviços para empresas que precisam de consultoria para seu business.

Quem é seu público principal?
Pessoas de classe AB, empresários e executivos, acima de 30 anos

Você está imaginando uma certa aparência e sensação para o site?
Sim, imaginamos algo bem clean, com um grande destaque emocional na imagem. Imaginamos a foto de um de nossos colaboradores, sorrindo e com grande destaque chamando para a pesquisa do IDC que apontou a empresa Exemplo como a empresa com colaboradores e clientes mais felizes do Brasil. Quem sabe uma foto de nosso colaborador dentro da empresa, sorrindo, em frente a uma de nossas paredes floridas, acho que deixaria a home do site bem viva, alegre.

Queremos um site simples, somente apresentando a empresa, sem necessidade de atualizações constantes, nem newsletter, sem busca, a capa deve ser focado na imagem e no destaque para essa pesquisa.

Quais serão os itens do menu e as seções que deverão compor o layout?
O menu deverá conter os itens: a empresa, clientes, portfolio, blog, localização e contato. Só deve ter o logotipo, o menu e uma imagem de destaque para a pesquisa que aponta a Exemplo como um exemplo de empresa feliz.

Você tem padrões existentes, como logos e cores, que devem ser incorporados?
O logotipo segue abaixo, as cores pode ser as cores do logo, vermelho e preto.



Proposta de layout do Web Designer 1

Aí está o layout que o Web Designer de número 1 apresentou. No geral percebemos total falta de sintonia entre o layout e o briefing. Isso sem falar nos erros técnicos que encontramos nesse design como a mistura de fontes (contei 4 tipos de fontes diferentes), o excesso de gradientes, os desalinhamentos e a falta de contraste entre o texto e o background. Vejamos:

1. Logo: jamais devemos distorcer imagens, fotos, textos, muito menos o logotipo do cliente. O nosso querido amigo web designer deu uma esticada legal no logotipo, dando o “efeito” de distorção. Quer aumentar ou diminuir? Faça mantendo a proporção. Se quer aumentar a largura em 50%, por exemplo, aumente também a altura em 50%.

2. Menu no topo: aqui temos três erros. Primeiro, o conteúdo do menu está completamente diferente do menu dito no briefing. Não podemos acrescentar ou retirar itens do menu sem consultar o cliente. Segundo, se o background é escuro, porquê usar uma fonte na cor escura? Se tivesse usado a cor branca, por exemplo, evitaria a “gambiarra” do uso do glow que ficou artificial e exagerado, deixando o layout mais pesado visualmente. Terceiro, se tem tantas opções assim no menu, porquê colocá-lo no topo, onde se tem menos espaço? Isso fez com que as opçòes ficassem muito próximas, parecendo ser a linha de um parágrafo, onde não conseguimos diferenciar cada opção.

3. Menu à esquerda: além de ficar redundante, já que temos o mesmo conteúdo no topo, o menu vertical encontra-se totalmente desalinhado. Note que a primeira opção está mais para a esquerda, a segunda mais para a direita e assim segue o desalinho. O correto é iniciar o item abaixo exatamente onde começa o item acima, ou seja, alinhado à esquerda.

4. Imagem: essa ilustração de perfil de um executivo não diz muita coisa a não ser que se trata de um homem de terno e gravata com a mão no bolso. Não passa a emoção que o cliente desejou transmitir, a felicidade de seus funcionários e clientes. Além disso a cor de fundo, tanto do background do site como da imagem principal, está com um excesso de gradiente. Lembre-se que gradiente é efeito de luz e sombra e este deve exercer um efeito natural. O que, na natureza, possui esse tipo de iluminação e sombra, indo do branco para o azul? O efeito fica plástico e irreal. Se deseja usar gradiente, use transições mais suaves, de um azul escuro, por exemplo, para um menos escuro, imitando uma iluminação real sobre uma superfície azul. E evite excesso de gradientes, como no caso deste layout.

Além disso esse efeito de bevel do retângulo da chamada não se vê mais desde 1996. Peso desnecessário.

5. Texto-chamada: nada mais do que um papo alegre que pouco diz. Espaço desperdiçado, ao invés de um vazio “seja bem-vindo” poderia ter aproveitado o espaço para fazer a chamada que o briefing pedia, falando sobre a pesquisa do IDC. Além disso o texto tem leitura dificultada pela falta de contraste (fonte de cor escura com background também escuro) e totalmente colado na caixa, é fundamental a margem interna para descolar a chamada e assim dar seu devido destaque.

6. Total desalinhamento dos textos: É necessário manter o alinhamento, no caso o preferível é que seja a esquerda.

7. Alinhamento centralizado: uma vez escolhido o alinhamento, mantenha esse alinhamento em todas os textos presentes no site, ao menos que o site seja experimental e os diversos tipos de alinhamento sejam propositais. Porém no caso dos portais e sites de conteúdo, lembre-se que nós ocidentais lemos da esquerda para a direita. O alinhamento a esquerda é um padrão de leitura que todos nós esperamos. Nesse caso não pode haver dúvidas, alinhou o logo a esquerda, o menu a esquerda, todos os textos estão alinhados a esquerda, não coloque um dos textos alinhados à direita nem no centro. Todos os textos devem seguir o mesmo padrão.

8. Informativo: além do briefing ser claro que o site não terá esse tipo de seção, tecnicamente esta caixa de cadastro tem diversos erros. Desde a falta da margem interna em relação a moldura até o botão, exagerado, distorcido, com uma sombra forte, irreal e com textura pesada. Opte por botões mais simples e de fácil visualização



Proposta de layout do Web Designer

2.Agora veja o layout que o Web Designer de número 2 apresentou. Tecnicamente falando o layout está correto e até mesmo bonito. Tudo bem alinhado, equilibrado, com um background de textura agradável e padrão de fontes bem definido.

O layout acima é um típico exemplo do layout bonito mas que “tá uma merda” para o cliente. O Web Designer volta com a maior raiva, dizendo que o cliente não entende nada de design e que é um brega. Porém note que o erro é 100% do web designer.

Isso se deve a má interpretação do briefing. O cliente disse claramente que queria um layout com foco na imagem e na chamada da pesquisa do IDC. Que bastava o logotipo, menu e a chamada, nada mais do que isso. E ainda disse claramente que não era pra ter nenhuma caixinha de newsletter e busca. Aí o Web Designer, totalmente desatento, sem ler o briefing direito, faz um layout bonito mas que não atende a expectativa do cliente.

É como se o cliente precisasse de um caminhão e você entregasse uma Ferrari. Ferrari é um carro bonito, mas o cliente precisa de uma carreta pra levar sua produção para a outra cidade. Logo sua Ferrari, pra ele, é uma “merda”, pois não atende seus objetivos.

Proposta de layout do Web Designer 3


Ah! Agora sim! Justamente o que o cliente pediu. Note o logotipo, o menu e a grande foto de destaque, com o texto casando com a imagem e chamando para a pesquisa do IDC. A foto está espontânea, mostrando a felicidade de um dos funcionários da empresa Exemplo. Veja o detalhe da parede que o cliente citou, esta parede é da empresa e esta foto estava no material que os outros 2 web designers também receberam. Porém o Web Designer de número 3 captou bem o briefing, acertando na mosca o que o cliente queria.

Note também que é um layout bonito e extremamente simples de se fazer, não exigiu efeitos mirabolantes, apenas a boa técnica e uma foto bonita. Um layout que poderia ter sido feito em qualquer software gráfico.

Atendeu as expectativas, fez um layout equilibrado e por isso escutou do cliente um “seu layout tá uma m… aravilha!”

Quer ser analisado e ter sua orelha puxada por mim como fiz nesse post? Então conheça o Curso de Design Web.

Para o alto e Avante!
Aproveite e visite meu site.

http://www.brunoavila.com.br

Sugestões: contato@comunidadeweb.com.br