Briefing e contrato em mãos!

Com o briefing em mãos, está na hora de criar o mapa do site e fazer um brainstorming. É importante manter seu cliente a par do que você está fazendo para que ele saiba o que está sendo feito. Se você desaparecer durante as primeiras semanas, seu cliente vai começar a enviar e-mails ou ligar para o seu telefone para saber como que as coisas estão indo. Caso você atualize-o constantemente, ele se sentirá mais seguro em relação ao seu trabalho.

Cobrando o cliente nas datas certas

É importante que você lembre as datas de cobrança. Para isto, utilize lembretes como os disponíveis no iCal (para Mac) ou até mesmo configure o Google Calendar para lhe enviar um lembrete três dias antes do vencimento de cada parcela. Dois dias antes, envie o e-mail de cobrança ao seu cliente para que ele lembre de pagar no dia.

Peça para que confirme o pagamento, assim você pode deixar anotado em seu calendário que ele efetuou o pagamento. Aproveite e agradeça toda vez que ele pagar ;)

A metade do projeto

Chega um ponto do projeto onde você já tem tudo quase pronto: o design foi aprovado e codificado em CSS/HTML e agora basta acertar os detalhes finais. Essa é uma das partes mais demoradas.

Os detalhes são os mais demorados

É importante fazer o seu cliente parte deste processo final para que ele possa verificar se está tudo como planejado.

Comece a fase do beta-testing, onde você analisa se o site funciona em todos os navegadores mais atuais, assim como sistemas operacionais diferentes. O Adobe Browser Lab é uma ótima ferramenta que permite que você teste em navegadores e SOs diferentes sem ter que instalar nada.

Lance o “Release Candidate”

Assim que o site estiver pronto e você acha que já dá pra deixá-lo visível ao público, vá fazendo testes variados com seu cliente. Acesse todas as páginas, reveja todo o conteúdo. Peça para que seu cliente tire um tempo para navegar pelo site todo quando ele tiver um tempo livre – evite de fazer isto durante uma reunião com ele, para que ele possa focar melhor.

Revendo o site durante seu tempo livre, o cliente pode se focar inteiramente no site e verificar tudo com calma. Assim não ocorre do cliente olhar tudo rapidamente e aprovar, pedindo para fazer alterações mais tarde, quando o contrato já expirou.

Colocando no ar e última cobrança

Pronto! Basta publicar o site a todos e fazer a cobrança final (se houver). Mas não pense que acabou! Se você quiser ter um serviço diferente, ainda existem mais coisas que podem serem feitas.

Manutenção e serviços adicionais

Ofereça serviços de manutenção ao seu cliente. Estes serviços podem variar de atualizar o código do site quando necessário até atualizar fotos dos produtos. Você pode oferecer um valor mensal fixo ou um preço especial por atualização. No entanto, lembre ao cliente que após o site ser publicado, alterações maiores no design e no conteúdo devem ser orçados a parte como um novo projeto.

Serviços adicionais podem incluir um acompanhamento de visitas e SEO (seu site já deve ter SEO, mas lembre-se que estas otimizações devem ter um acompanhamento constante para melhores resultados).

Agora sim, acabou. Seu projeto web foi entregue, o cliente adorou seu trabalho e você está feliz. Parabéns!

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Como lidar com projetos web? Parte 1
• Como estragar seu site – parte 2
• Como estragar seu site – parte 1
• Regras implícitas no web design
• 13 dicas para newsletters em HTML

O contrato: definindo tudo antes do início

Contrato: peça fundamental

O contrato é de extrema importância e muitas vezes é ignorado pelos web designers (e até mesmo os outros designers das outras áreas). Ele serve para proteger o seu interesse como profissional e os interesses do seu cliente. Eis algumas coisas que devem ser explícitas no contrato:

Descrição do projeto, revisões e layout

O que seu cliente está contratando? Explique todo o processo, desde o briefing até a geração de alternativas e finalmente o formato de entrega do projeto. É muito importante que você deixe claro em relação as revisões. Quantas revisões que seu cliente terá direito de fazer pelo preço acertado?

No xCakeBlogs, oferecemos até duas revisões pelo preço acertado. Por que? Pois alguns clientes abusam e não aprovam a primeira versão do layout, não aprovam a segunda e ainda pedem mais alternativas. É por isto que, se não for aprovado da primeira vez, revemos o briefing com o cliente para ver o que nós entendemos errado. Pedimos que o cliente faça uma crítica construtiva e compare com o briefing que ele enviou. É importante para sabermos o que foi feito de errado por nossa parte (ou se o cliente estava indeciso na hora que escreveu o briefing). Caso passe das duas revisões sem sucesso, informamos que novo pagamento e novo briefing deverão serem feitos. Isto fica explícito no contrato.

Pagamentos

No contrato deve estar escrito se a forma de pagamento é à vista ou parcelado (que é combinado previamente). Independente de qual for, deixe claro quando cada pagamento é feito. Se for a vista, peça para que seja pago no início do projeto para evitar que o cliente desista no final e não te entregue nada, e se você quiser ofereça algum tipo de remuneração em caso de desistência (por exemplo, 50% do valor pago ou a porcentagem de acordo com quanto do projeto já foi feito). Se o pagamento escolhido foi parcelado, informe as datas de pagamento de cada parcela e o valor delas.

É importante que você sempre peça um valor adiantado, independente de quem for o cliente. Até mesmo parentes podem tentar te passar a perna!

Direitos autorais e copyright

Quem terá o direito autoral sobre o que foi criado? E quem terá a responsabilidade sobre o uso de fontes, fotos, arquivos vetoriais, etc? É ideal que, caso o cliente fornecer as fotos e fontes para serem usadas no layout, você deixe claro que o direito autoral é de responsabilidade dele. Já vi acontecer designers serem ameaçados de processo por terceiros pois seu cliente usou uma imagem deles como fundo para o site sem o consentimento do autor.

Prazos

Defina os prazos para cada etapa e data para entrega final. Lembre-se de dar uma margem de segurança, pois raramente o projeto é entregue exatamente na data prevista. Algumas vezes o cliente demora para preencher o briefing ou para aprovar uma das revisões, atrasando todo o processo. Deixe claro que, se o cliente não obedecer o cronograma (você deve definir a data limite para ele enviar o briefing, enviar o material para ser usado, aprovar as revisões, etc), você não deverá ser culpado pelo atraso na entrega.

Aprovação final

Consiga uma assinatura ou assinatura digital na versão final antes de ir ao vivo. Isto vai te salvar muita dor de cabeça se algo estiver escrito errado ou existe algum problema no código. Além do mais, isto dá ao seu cliente a confiança que ele precisa. Caso algo estiver errado após a aprovação final, você poderá cobrar adicional.

Cancelamento de projeto

Outra forma de se assegurar caso o projeto seja cancelado. Afinal de contas, você não pode ser lesado pelo tempo gasto com algo que foi cancelado antes de você receber uma compensação decente.

Os contratos não precisam ser sempre assinados e enviados via correios. Hoje em dia, a justiça já permite o uso e-mails como documento legal, então se seu cliente aprovar o contrato via e-mail já é válido (só não vale mensagens instantâneas como MSN ou “aceitação verbal”).

Existem muitos modelos de contratos disponíveis na web, basta dar uma procurada.

O briefing

Muitos designers pulam a parte do briefing por ser algo que as vezes o cliente demora a respoder, então eles fazem tudo às cegas. E isto só pode resultar em desastre.

Nem sempre é fácil entrar na cabeça do cliente, e isto será o seu salva-vidas. Pode até ser um briefing pequeno, mas com as perguntas certas você vai poupar muito tempo ao seu cliente e a você mesmo. O bom que briefings curtos podem até ser feitos via telefone (lembre-se de anotar tudo que ele falar!). Eis algumas coisas que você pode incluir em seu briefing, mas lembre de adaptá-lo aos projetos específicos que você faz.

Especificações técnicas

Dimensões, alinhamento e tipo de largura. Geralmente o cliente não vai ter idéia do que ele quer nesta parte, então nós no xCakeBlogs não colocamos este tipo de pergunta no briefing. Caso o cliente queira especificar que ele quer um layout com largura fluída, por exemplo, ele irá especificar isto de qualquer forma.

Pergunte também sobre domínio e hospedagem (seu cliente já possui? Caso não tenha, ele aceita sugestões?). Você irá fazer o upload da versão final do site, ou isto fica a encargo do cliente?

Conteúdo

Um mapa do site é bom. Peça que seu cliente defina quais páginas que serão criadas e o que ele terá de conteúdo. Se você ver que a estrutura não é das melhores, ofereça alternativas antes de começar o projeto.

Peça para que ele informe todo o conteúdo neste momento. Textos, logo, fotos, etc. Caso não esteja no contrato, informe-o que o texto precisa estar revisto e corrigido, e que as imagens já devem vir tratadas – tudo em formato digital! Já tive clientes me enviando texto escrito a mão (caneta e papel!) e fotos impressas. Quando falei que teria que cobrar para digitalizar tudo, o cliente ficou pasmo – afinal de contas, ele tinha escrito todo o texto no computador e, como não tinha impressora, passou tudo para o papel. As fotos? Ele também tinha em formato digital mas mandou revelar só para me entregar. Acho que ele nunca ouviu falar de “e-mail”.

Outra coisa que você pode pedir é todo o material de marketing prévio da empresa para você ter uma idéia de como eles administravam a comunicação empresarial no passado.

Dados de marketing

Público-alvo, percepção atual da empresa e percepção desejável, estilo, cores e formalidade do design. Além disto, a diferença entre eles e as empresas concorrentes.

Esta parte da diferença entre eles e as empresas concorrentes nem sempre pode ser algo claro. Muitas vezes o cliente procura defender sua empresa como se você fosse um comprador em potencial. É necessário lembrar ele que você precisa das informações reais. Se o preço do produto do seu cliente é maior do que do concorrente, por que é assim? Informe seu cliente que ele não precisa defender as diferenças, pois isto não vai lhe ajudar muito. A questão do preço por exemplo, pode ser por que a qualidade é maior (neste caso, você pode deixar o site com cara mais de “exclusivo”).

Peça por referências também. De preferência, referências do gosto do cliente. Em seguida, você vai analisar se as preferências pessoais do seu cliente são similares às preferências do público-alvo dele. Se notar uma diferença muito grande, informe isto. É importante ele saber que o site não é para agradar ao gosto pessoal do dono, mas sim ao gosto do público-alvo.

Amanhã continua o artigo. Fique ligado! Assine o feed RSS para não perder!

Inspiração: Onextrapixel

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Como lidar com projetos web? Parte 2
• Como estragar seu site – parte 2
• Como estragar seu site – parte 1
• Regras implícitas no web design
• 13 dicas para newsletters em HTML

Use estilos CSS inline

Pode esquecer usar páginas CSS externas ao enviar e-mails personalizados. A melhor solução é declarar o CSS dentro dos seus tags HTML. Como por exemplo: <p style=”color:#000;”>. Se você declarar a folha de estilos no cabeçalho, aplicativos online (como o Gmail) não vão conseguir fazer aquilo que você pediu.

Limite a largura do seu template

Quando estiver criando um template para suas campanhas via e-mail, não esqueça que muitos lêem suas mensagens em apps online (Gmail, Hotmail, YMail, etc). Estes geralmente possuem uma barra lateral que consome um certo espaço. Procure não passar de 600 pixels de largura.

Evite de usar imagens demais

Muitos dos aplicativos de e-mails bloqueiam imagens e dão a opção ao usuário liberar a visualização, então procure não depender demais de imagens para que seus usuários não vejam um e-mail em branco.

Ofereça um link para cancelar a assinatura

Tenha bom senso: não force seus leitores a receberem seus e-mails caso não queiram. Seria como se um vendedor trancasse a porta assim que você entrasse na loja. Além do mais, não oferecer uma opção de cancelar pode ter seu newsletter caracterizado como spam.

Ofereça uma versão web

Algumas vezes o código chega zoado ao usuário. Ofereça um link para visualizar o e-mail online que pode ter mais recursos.

Não use Flash

Quase todos os aplicativos de e-mail não conseguem ler objetos em Flash, então evite a todo custo inserir algo assim na mensagem.

Nossa newsletter - o Exército do Design

Sugira que seus leitores entrem em contato

Fazendo isto, você os convida para que tenham um relacionamento mais próximo com você, além de que ajuda a evitar que suas mensagens vão para a pasta de spam do usuário.

Não use formulários

Como no Flash, a maioria dos aplicativos de e-mail não conseguem renderizar formulários. Prefira utilizar um link para um formulário online.

Configure o tamanho de imagens

Adicionando a configuração de width e height em suas imagens ajuda a manter o layout mesmo quando imagens não são mostradas.

Use texto alternativo nas imagens

Caso as imagens não apareçam, o usuário pode pelo menos saber o que ele não está visualizando. Use a tag alt em suas imagens.

Não use PNGs com transparência

Alguns aplicativos não mostram transparência de PNGs, outros nem sequer mostram PNGs, então por que colocar? Infelizmente, os aplicativos ainda tem muito a evoluir.

Não use imagens em CSS

Imagens de fundo pelo CSS (como background:url(imagem.jpg);) não funciona nos aplicativos, então evite. Se precisar de um fundo, prefira usar uma cor chapada.

Tenha uma versão em texto

Ofereça uma versão em texto simples do seu e-mail para os que não conseguem visualizar HTML.

Uma tabela interessante sobre a compatibilidade de códigos HTML e CSS nos diferentes softwares e aplicativos online de e-mails é este do Campaign Monitor.

E caso você tenha interesse em receber uma newsletter pra servir de inspiração, que tal se cadastrar no nosso, o Exército do Design? Lá temos sorteios, artigos exclusivos e muito mais!

Adaptado de: Designer Daily

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Como lidar com projetos web? Parte 2
• Como lidar com projetos web? Parte 1
• Como estragar seu site – parte 2
• Como estragar seu site – parte 1
• Hierarquia visual de elementos

(Clique na imagem acima para ver em tamanho maior)

Traduzido por Canha. Original por Information Is Beautiful

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Patterns para download
• Como lidar com projetos web? Parte 2
• Como lidar com projetos web? Parte 1
• 13 dicas para newsletters em HTML
• Workflow – sites e softwares

Até agora, você deve ter os seguintes itens:

• Nome, descrição, público-alvo, concorrentes, etc da sua revista
• Manual de identidade visual do logo
• Nome das seções
• Fontes e cores definidos
• Templates dos layouts escolhidos
• Projeto editorial

Agora, basta juntar seu conteúdo.

Conteúdo

O objetivo destes artigos não é o de mostrar o passo-a-passo de como se cria uma revista, apenas como se diagrama ela. O conteúdo é geralmente moldado ao layout em vez de ao contrário.

Com o conteúdo (texto e imagens) em mãos, escolha o layout mais adequado entre os templates da revista. Formate o conteúdo de acordo, sempre respeitando todo o manual do projeto editorial. Lembre-se de seguir as várias dicas dadas nestes 5 artigos.

Afim de ver se o conteúdo está em bom tamanho e legível, faça o teste da pré-impressão imprimindo cada artigo em uma folha. No exemplo da revista que criei, cada folha terá um tamanho aproximadamente de uma página A4.

Exemplo de pré-impressão para verificar os tamanhos de fontes e contraste de cores

O boneco

O boneco nada mais é do que a revista pronta em tamanho menor, para analisar a disposição das páginas e conteúdo. Pessoalmente, recomendo imprimir em uma folha A4, frente e verso, e dobrá-lo – neste caso, cada folha teria quatro páginas: duas de um lado e duas do outro. Como você irá encaixar eles, notará que é preciso ver qual folha terá qual página.

Por exemplo: sua revista terá 40 páginas. Na primeira folha, você terá (na ordem) o seguinte: contra-capa (folha final da revista – geralmente com propaganda), capa (primeira folha da revista) e no verso, pós-capa (segunda folha da revista, geralmente com mais propaganda) e penúltima (folha antes da contra-capa).

Minha sugestão é: faça uma cola. Pegue um papel, corte em vários pedaços e vá dobrando um dentro do outro. Depois de atingir o número de páginas que você quer ter na sua revista, vá escrevendo o número das páginas na folha. Agora, desdobre tudo e veja como ficou. Notará que ficou similar ao esquema acima.

No meu boneco, imprimi os layouts ainda sem conteúdo pra ver se a diagramação ficou boa

Observações finais

Antes de mandar sua revista para a gráfica, algumas observações finais:

Cuidado com linhas viúvas. Linhas viúvas são aqueles parágrafos cuja última palavra (ou duas últimas) ficam em uma linha sozinha, mais ou menos
assim.

Evite imagens como fundo de texto. É uma questão de legibilidade. Se a imagem estiver muito colorida, por exemplo, o seu texto com uma cor só pode ficar difícil de ler.

Procure começar um artigo sempre na página da esquerda. Aqui no ocidente, lemos da esquerda para a direita. Logo, artigos que começam pela esquerda tem maior chance de serem lidos.

Anúncios, preferivelmente do lado direito. Por quê? Pois há uma maior exposição do lado direito. Pegue qualquer revista e folheie-a rapidamente. Notou como você viu quase só anúncio? “Mas por que não colocar meu conteúdo do lado direito, para chamar a atenção do leitor?” – por um motivo simples: quem paga a revista, são os anunciantes. E anúncios neste lado são mais caros.

Quem paga a revista, são os anunciantes. Note o caso da “Veja”: parece que 40% da revista é dedicada a publicidade. Mesmo com uma tiragem e venda super alta, o preço cobrado pela revista ao leitor não arca com todos os custos. Os valores de publicidade chegam a R$ 50.000 por uma folha inteira. São os anúncios que fazem com que a revista possa continuar existindo. Então quando estiver diagramando, deixe espaços bons para seus anunciantes.

Cuidado com a resolução. Qual será a resolução de impressão? A qualidade da sua revista será o equivalente a de um jornal? Ou algo mais dentro dos padrões atuais? Lembre-se de usar as imagens de acordo com isto. Por isso a importância de fazer uma pré-impressão em um tamanho aproximado. Use uma imagem de resolução muito baixa, e a impressão fica estourada. Uma de resolução muito alta, o resultado é um arquivo desnecessariamente pesado.

Finalizando

Agora, basta preparar o arquivo para a impressão. Esta é uma parte técnica que não vou explicar – se você não sabe como fechar um arquivo, sugiro que peça ajuda a quem sabe fazer isto bem.

No caso da minha revista, eu decidi imprimir em uma gráfica normal. Foi feito em tamanho super A3, frente e verso, refilado e dobrado. O resultado final foi este:

Dúvidas?

Irei responder dúvidas na medida do possível. Revistas não são minha área de atuação, mas tenho um domínio considerável do assunto. Basta deixar um comentário abaixo.

Espero que tenham gostado! ;D

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Como diagramar uma revista – parte 4
• Como diagramar uma revista? – parte 3
• Como diagramar uma revista? – parte 2
• Como diagramar uma revista? – parte 1
• Design de cartões de visita: o básico

Escolha das fontes

Parece ser uma escolha fácil de ser feita, mas é longe disto. Quando criei minha primeira revista para um projeto de faculdade (que deu inspiração a este blog), a escolha da fonte foi a mais difícil. Não é tão simples quanto dizer “vamos usar Arial e pronto”, pois há um problema enorme em relação a direitos autorais.

A maioria das fontes que você usa no seu computador são de uso gratuito para fins pessoais. Tente vender uma revista usando elas e logo logo você será descoberto pelo dono. Mas então como se escolhe uma fonte?

Antes de pensar na parte econômica, é necessário buscar uma fonte que sirva ao propósito. Neste caso, seria o da facilidade de leitura em impresso. A maioria das revistas preferem fontes sem serifa, pois em impressões de baixa qualidade ela ainda fica legível. Além disto, é necessário se preocupar com o kerning – o espaçamento entre uma letra e outra (se você não sabia disto, sugiro ler meu artigo sobre “O que é tipografia?” antes de continuar).

Em um tamanho normal de 12 pontos da fonte que você escolheu, um texto de 500 caracteres ocupa quanto espaço? É importante notar este tipo de detalhe, pois um espaçamento mesmo que 5% maior do que uma fonte de segunda escolha pode fazer com que sua revista fique maior que o esperado.

Note a diferença visível entre duas fontes similares

Note como a Geneva (que possui o mesmo tamanho da Arial) é mais espaçada entre as letras, fazendo com que ocupe meia-linha a mais com o mesmo número de caracteres – uns 10% do parágrafo total. Pode não parecer muito, mas a diferença entre uma revista de 100 páginas e 110 páginas é grande – o suficiente para deixar de colocar 10 páginas de publicidade.

Para ajudar a decidir melhor qual fonte usar, imprima o mesmo texto em fontes diferentes. Sim, é necessário imprimir! Fonte em tela fica diferente de fonte impressa. Preferencialmente, imprima um texto normal (e não o “nononono” que publicitários usam).

Após escolher sua fonte, agora é correr atrás para licenciar o uso dela. Entrar em contato com o autor, negociar um preço, fechar contrato, etc. Boa sorte ;)

Escolhendo as cores

A maioria das revistas tem algumas cores básicas que são repetidas páginas afora. A Super Interessante usa bastante o vermelho, a Info Exame, laranja, etc. Estas cores você pode usar no nome das seções (que você já já vai definir), em pequenos detalhes e tudo mais que você achar melhor.

O uso destas cores deverá ser sempre respeitado, assim como as cores de uma identidade visual são sempre (ou pelo menos sempre deveriam) serem respeitadas.

Definindo as seções

Você notou que, mesmo as revistas focadas a um assunto específico (ao contrário da Veja, por exemplo, que trata de vários assuntos), existem seções. A minha revista predileta, a abcDesign, possui algumas seções pré-definidas e outras mais livres. Por exemplo, existe Design & Cultura, Design e Sustentabilidade, Design e Educação, Fatos Gravados, Cases, Entrevista, etc. A maioria delas também possui autores fixos – Fatos Gravados é sempre escrito pelo Ericson Straub.

Quais seções que sua revista terá? Os autores são fixos para estes? Haverá seções que serão fixas, inclusas em todas as edições e algumas especiais que serão esporádicos? E qual a ordem delas? A ordem precisa ser sempre a mesma em todas as edições.

Anote todas estas informações, inclusive fazendo um breve resumo do tipo de artigo de cada seção.

Desenvolvimento de templates

Como já explicado, os templates são layouts pré-definidos. Algumas revistas possuem centenas de templates que ditam como o conteúdo vai ficar, como que as imagens são dispostas e até mostram onde a publicidade deve permanecer.

A quantia de templates que sua revista terá depende do conteúdo dela. Quantas páginas você pretende ter por edição? Cada seção terá seu próprio layout fixo, ou o mesmo pode variar de edição para edição?

O ideal neste ponto é você esboçar vários layouts. Não tenha medo de ser feliz neste ponto. Esboce pelo menos 2 vezes mais layouts do que você pretende usar, e só depois selecione os que você acha que seguem um certo ritmo. Esses layouts você usará como template para seus textos.

“Canha, você não vai me ensinar a esboçar um layout?” Vixi. Outra coisa que um designer já deve saber antes de começar a pensar em diagramar uma revista. Vou ensinar os pontos básicos apenas – o restante, como utilização dos princípios básicos do design, fica por sua conta.

Como fazer um layout

Layout nada mais é que a disposição de informações sobre uma página. É o layout que vai determinar como e o que o leitor irá ler. Na maioria das vezes, o layout é composto de título, sub-título, chamado, artigo e talvez uma imagem. E existem infinitas maneiras de se fazer isto.

(Apenas um adendo aqui: O uso de imagens é altamente recomendável. Imagens chamam e prendem a atenção do leitor de uma maneira mais efetiva do que um chamado ou um título)

Quatro exemplos de um layout de duas colunas - poderia ter centenas

Como falei, existem infinitas maneiras de se diagramar estes poucos ítens. Solte a criatividade. Você pode, por exemplo, fazer com que uma página inteira se dedique ao título e chamada do artigo, tendo uma imagem de fundo. No entanto, cuidado com o uso excessivo de imagens de fundo. Uma imagem muito colorida facilmente distrai e dificulta a leitura em textos corridos.

Você pode encontrar vários exemplos de layouts de revistas no Google Images.

Apenas alguns dos layouts que rascunhei

E lembre-se sempre de aplicar os princípios básicos: alinhamento, contraste, repetição e proximidade.

Até agora…

Ok, um resumão do que você deve já ter até aqui:

• Nome, descrição, público-alvo, concorrentes, etc da sua revista
• Manual de identidade visual do logo
• Nome das seções
• Fontes e cores definidos
• Templates dos layouts escolhidos

Mas e onde você vai colocar todas estas informações para referência futura? É para isto que existe o…

Projeto Editorial

O projeto editorial serve para inserir todas as informações pertinentes a sua revista. É onde ficará também seu manual de marca, descrição do conceito e público-alvo, características técnicas de fonte, tamanho, espaçamento, etc do título, sub-título, chamada, texto, legendas e por aí vai.

Este projeto precisa ter tudo sobre sua revista e será consultado a cada nova edição para ver se está tudo padronizado.

Tenha este documento impresso em uma boa qualidade. Sugiro que encaderne ele, pois você irá utilizá-lo bastante enquanto tiver sua revista.

Pronto! Toda a parte teórica da sua revista está completa. Basta começar a preparar a primeira edição! E isto, faremos na próxima edição final!

Outros artigos da série “Como Diagramar Uma Revista”

• Como diagramar uma revista – parte 1
• Como diagramar uma revista – parte 2
• Como diagramar uma revista – parte 3

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Como diagramar uma revista? – parte 3
• Como diagramar uma revista? – parte 2
• Como diagramar uma revista? – parte 1
• Como diagramar uma revista – parte 5
• Design de cartões de visita: o básico

Antes de começar a esboçar sua revista, preste atenção em mais alguns detalhes. Sim, sei que até agora a única coisa que fizemos foi de olhar, analisar e fazer anotações. Mas design é isto. Como falei no início: se você achou que eu iria mostrar como abrir um software e diagramar algo sem propósito, estava redondamente enganado.

Detalhes menores

Até agora olhamos a revista em um ângulo mais aberto. Vamos focar em pequenos detalhes de uma revista.

A borda

Em algumas revistas, e em algumas páginas específicas você vai encontrar um artigo ou outro com uma borda na página inteira. Esta borda quase sempre está em volta de um artigo opinativo de um colunista específico. A borda indica que, o texto nela contido, não necessariamente expressa a opinião da revista. Ou seja, a opinião expressada é somente a do autor. Muito usado na “Carta aos Leitores”, escrita pelo editor, que pode não representar o que a revista ou os donos dela pensam.

Se for ter uma coluna de opinião pessoal, lembre-se de conter ela em uma borda para que fique visível o fato dela “não pertencer” (pelo menos não necessariamente) a ideologia da revista.

Rodapé

O rodapé nas revistas pode ser diferenciado, mas sempre possui três ítens distintos: O número da página, a data da revista (ou edição) e o nome dela. Em qual ordem e como exatamente é mostrado varia, mas estão sempre lá. Outra coisa importante do rodapé é o posicionamento: sempre no canto inferior externo. Ou seja, na página da esquerda, fica no canto inferior esquerdo e na página da direita, no canto inferior direito. Isto facilita a procura por páginas específicas. Lembre-se também de sempre colocar na exata mesma posição em todas as páginas.

Final de um artigo

Alguns artigos ocupam mais de uma página. Como que o leitor vai saber que o artigo termina naquele parágrafo e que a próxima página é dedicada a um outro? Para isto, existem os símbolos de final de artigo. Não é nenhum mistério: os símbolos de final de artigo são para representar o final do artigo. Cada revista tem a sua específica:

Veja, Info e Super Interessante respectivamente

Identidade visual

A identidade visual de cada revista é composta de família, tamanho, cor e espaçamento da fonte. Também inclui as cores “institucionais”, nomes das seções e todos os ítens que compõe o visual da revista. A identidade visual é criada para ser seguida à risca. Serve para manter uma harmonia entre os artigos além de facilmente identificar qual revista que é, sem a necessidade de ter que ver o rodapé ou a capa.

Edições diferentes, mas é possível notar que é a mesma revista

Hora de colocar a mão na massa

Ufa, parece que cobri tudo de importante. Então, tá na hora de colocar a mão na massa.

O nome

Até agora, você deve ter um documento com tudo explicado sobre sua revista: o tema, o público, o diferencial, os concorrentes, etc. Está na hora de criar um nome. Esta parte é com você. Escolha algo que seja fácil de ser lembrado e falado.

Após criado o nome, você vai precisar se concentrar em uma identidade visual. Aí que o bicho pega. Lembre-se de focar no fato de que você está criando uma revista. O logotipo deve ser de fácil leitura e deve ser possível de diminuir ela a um tamanho muito pequeno.

Não vou ensinar o passo-a-passo de criar um manual de identidade visual: se você ainda não sabe fazer isto, sugiro que vá aprender primeiro. O manual é o básico que todo designer gráfico deve saber. Lembre-se de incluir as cores no qual o logo poderá ser impresso, o fundo que ele pode ter, tamanho e disposição dele, etc.

É importante notar que, ao contrário de um logotipo qualquer, o da revista precisa ser muito mais volátil. Muitas vezes o logo vai ficar sobre um fundo muito colorido, outras vezes vai ficar um pouco escondido por um título. Tente fazer algo o mais abrangente possível para que ele caiba em todas as situações.

Note como o logotipo aparece bem em um fundo colorido e fundo neutro

Exercício de hoje

Desenvolva seu manual de identidade visual do logotipo. Não se preocupe com o restante do layout ainda. Isto veremos no próximo artigo. Lembre-se sempre de comparar aos seus concorrentes e analisar como eles fizeram. Isto lhe dará uma boa idéia do que é bom e o que é ruim.

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Como diagramar uma revista – parte 4
• Como diagramar uma revista? – parte 2
• Como diagramar uma revista? – parte 1
• Como diagramar uma revista – parte 5
• Design de cartões de visita: o básico

A estrutura

Vou generalizar aqui – afinal de contas, muitas revistas são bem similares em sua estrutura. As que não seguem, são a excessão. Para facilitar nossa vida, falarei no mais comum; De início, a capa. Não necessito explicar mais que isso. Na contra-capa geralmente há algum anúncio de página inteira. Em seguida, o índice. Logo depois, o editorial. Aí em diante vem todo o conteúdo. Essa é a estrutura básica.

Pode comparar. Você notará que 99% das revistas são exatamente assim: capa, índice, editorial (ou informações sobre a revista ou editora).

Capa - Índice - Editorial

Agora note a estrutura página-a-página. É sempre a mesma história: título, chamada e texto. O título visa chamar a atenção inicial do leitor, a chamada tem como objetivo prender a atenção dele e por fim, o texto informa todo o restante. É só notar como é neste mesmo blog:

Repetição do layout

Seja consistente na hora de fazer o layout de sua revista. E tenha isto em mente ao diagramar a primeira edição. Se você notar, uma revista é igual em termos de disposiçõa de informações em todas suas edições. Faça um experimento: pegue duas revistas iguais porém de edições diferentes. Vá até o índice. Veja como as duas edições são bem similares em termos de estrutura.

Duas edições diferentes. Note a similaridade.

E isto não só na capa, índice e editorial. A estrutura é mantida na revista inteira, com leves modificações ali e aqui. Se você notar bem na imagem abaixo, retirada de uma edição da Veja, verá que o conteúdo é separado em cabeçalho e mais três colunas. As colunas tem espaçamento igual, e até o tamanho das fontes dos títulos dos 3 primeiros artigos são iguais. E o título daquele último artigo? Na verdade, aquele artigo era o primeiro da seção “Brasil”.

Templates

Templates são arquivos-base de layout que podem ser utilizados de diversas maneiras. Você pode utilizar o mesmo template em artigos de um assunto específico, ou mudar os templates de acordo com cada seção da sua revista. Algumas revistas possuem mais de 100 templates diferentes, que muitas vezes diferem só um pouco uma das outras.

Veja como exemplo a imagem abaixo. Imagem ocupando quase toda a metade superior da página, título logo abaixo, chamada ocupando o espaço de duas colunas e três colunas de texto.

No entanto, a imagem da esquerda é o primeiro artigo da seção “Internacional”, logo o mesmo vem com destaque. O título do artigo é em caixa alta, em contraste com a imagem da direita que é normal.

Na imagem abaixo, você pode perceber que o template ficou quase o mesmo em 3 páginas de um mesmo artigo. Isto também pode ser feito para diferenciar o artigo dos outros. Há também a presença de um dos ítens do design: a repetição. Note quantas vezes é utilizado o “Q” como parte do layout.

Exercício de hoje

Se você não tiver nenhuma revista, vá a uma banca mais próxima e compre algumas. Podem ser revistas diferentes, e nem precisam ser revistas que você iria ler. O objetivo é você observar todos os aspectos do layout delas e como a informação é disposta. Se preferir, rabisque a estrutura de cada página em uma folha, apenas para compará-las depois. Quanto mais revistas você analisar (de publicações diferentes), mais você verá as possibilidades de layouts.

No próximo artigo…

Na terceira parte da série, você aprenderá sobre a escolha de fontes, cores e identidade visual. Além disto, está chegando a hora de você esboçar sua primeira revista. Fique ligado! Aproveite para assinar o feed e não perder o próximo!

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Como diagramar uma revista – parte 4
• Como diagramar uma revista? – parte 3
• Como diagramar uma revista? – parte 1
• Como diagramar uma revista – parte 5
• Design de cartões de visita: o básico

A parte prática

Como usar o InDesign? Como usar o Illustrator? Photoshop? Corel Draw? InkScape? Olha, vou ser franco: não vou ensinar isto. A parte prática é feita apenas no final do processo, e cada designer tem seu software de escolha. Aqui vou ensinar o mais importante: a teoria. Entenda que a teoria é a parte mais importante de todo o processo. Não adianta você querer abrir o InDesign e criar uma revista super legal se você não sabe como será a funcionalidade dele.

Antes de começar

Pode tratar de fechar seu software. Desligue seu computador. Não tente começar a diagramar antes de fazer todo o processo que antecede a criação no software. Como tudo no mundo do design, o processo é feito 90% fora do computador. Só a finalização que deve ser feita nele.

Escolha o tema

Ok, com isto feito, está na hora de pensar. Sobre o que vai ser sua revista? Qual o tema dela? Esse é o primeiro passo e o mais importante. Toda revista tem um tema principal – a Super Interessante trabalha com o tema de “conhecimento”. A Revista Caras é sobre notícias de celebridades. A Veja, notícias gerais. A Playboy…bom, você deve saber.

O tema deverá ser algo que você – ou as pessoas que vão escrever nela – domine. Eu nunca escreveria sobre design de moda pois é algo que não entendo nada. Mesmo se você não vá escrever na revista, apenas diagramar, procure saber sobre o assunto. Leia outras publicações a respeito, visite sites que tratam sobre ele, etc.

Com o tema definido, próximo passo:

Defina o público-alvo

Quem vai ler sua revista? Não me venha com a resposta “todo mundo”, pois cada revista tem um público-alvo por mais abrangente que possa ser. Quem lê a Super Interessante, por exemplo, é um público que está sempre buscando aprender mais sobre qualquer coisa. Mesmo se alguém lê a Super e a Caras, saiba que o público-alvo de cada uma das publicações é diferente (quem lê ambos é considerado uma exceção). A Veja é uma revista que procura tratar de qualquer notícia da atualidade, seja nas áreas de economia, política ou esportes. É um público-alvo abrangente, porém é diferente da revista Carta Capital – que pode até ter muitos assuntos em comum com a Veja – pois a Carta Capital é uma publicação de esquerda.

Conheça seu público-alvo

O que faz seu público-alvo? Qual a média salarial dele? Leitores da revista Tititi – uma publicação que acompanha as novelas brasileiras – são consideravelmente diferentes dos leitores da revista IstoÉ Dinheiro especialmente no quesito média salarial, pois os leitores da Tititi são (em grande maioria) pessoas que trabalham em casa ou em locais de renda média. Já os leitores da IstoÉ Dinheiro são pessoas que trabalham com bolsa de valores, finanças e negócios – considerados trabalhos de renda maior.

Qual o nível de ensino do seu público? Uma revista de direito tem uma linguagem diferente de uma de engenharia, que por sua vez tem uma linguagem diferente de uma revista noveleira.

Anote tudo isto em uma papel. Conheça bem seu público. Se você não faz parte deste público, pesquise sobre eles. Conheça pessoas que são os potenciais leitores de sua revista. Entenda o que eles fazem. Procure descobrir as nuanças do grupo – o que difere eles do resto da população.

Conheça seus concorrentes

A não ser que você esteja fazendo uma revista sobre plantação de grama ou algum tema absurdo, as chances de você ter um concorrente são grandes. A Playboy, por exemplo, tem como concorrente a VIP.

Você nem nasceu e já tem concorrentes

Como que seu concorrente aborda o assunto? Como que é a revista? Eles usam mais imagens do que texto? O que eles oferecem em termos de conteúdo? O que faz o seu público-alvo ler a revista deles? Quem anuncia naquela revista?

Faça uma lista com todos os pontos fortes e fracos do seu concorrente. Vale de tudo: até tiragem, disposição nas bancas, vendas online, quantidade de assinantes, qualidade de conteúdo, etc. E cuidado se você achar que seu concorrente não tem pontos fracos, ou que ele não tem pontos fortes – todos tem isto!

Com essa lista em mãos, está na hora de pensar. Pense: como que posso fazer os pontos fortes do meu concorrente ficarem mais fortes, só que pra mim? Como que posso usar os pontos fracos do meu concorrente a meu favor? Anote tudo (você deveria estar anotando tudo desde o início já). Filtre suas idéias em “viável” e “inviável”. Por exemplo, você pode fornecer desconto aos primeiros 1.000 assinantes mas fornecer algum brinde a eles no ato da assinatura vai fazer seu custo ficar lá em cima, eventualmente inviabilizando a idéia.

Agora que você já conhece bem seus concorrentes e conhece bem a si mesmo, está na hora de começar a esboçar a revista propriamente dita. Mas isto, só no próximo artigo ;)

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Como diagramar uma revista – parte 4
• Como diagramar uma revista? – parte 3
• Como diagramar uma revista? – parte 2
• Como diagramar uma revista – parte 5
• Design de cartões de visita: o básico

Faça seu site inteiramente em tabelas

Sites em tabelas eram algo grande 10 anos atrás. Hoje em dia, não é mais prático isto. A atualização do código de um site em tabelas é uma tarefa complexa, além de gerar muita dor de cabeça. xHTML e CSS avançaram tanto nos últimos anos e seu uso facilita a vida de programadores e designers.

Fazer alterações em um site com xHTML e CSS é muito mais fácil para os dois profissionais. Os designers podem apenas alterar o CSS, sem ter que tocar no código do programador e vice-versa. Sites como da Universidade Tuiuti poderiam ser simplificados facilmente.

Sei que falar da necessidade de usar xHTML e CSS aqui é como ensinar o padre a rezar missa, mas tem muita gente que ainda acha que tabelas são o futuro da web.

Tente entender este código. Lhe desafio!

Insira vários pop-ups ou faça seu site abrir em uma nova janela

Se você quiser ser levado a sério, não tente controlar o navegador do seu usuário. Não faça seu site abrir em uma nova janela com largura e altura fixa, sem a barra de ferramentas dele. Navegadores atuais já bloqueiam automaticamente pop-ups, então há chances de que seu site nem abra.

Até anúncios que são abertos em pop-ups são uma perda de tempo. Mesmo que você esteja ganhando R$ 0,01 com cada impressão de tela, saiba que você estará perdendo público. Claro, se seu objetivo for de  enganar o usuário para ganhar dinheiro e não estiver nem aí se ele vai voltar ao seu site, aí é outro assunto. É besteira colocar pop-ups justamente por causa dos navegadores que bloqueiam, mas creio que se o seu objetivo for este, você provavelmente está lendo este artigo para realmente estragar seu site.

Abra links em uma nova janela

Pessoas vão me crucificar por isto, eu sei. De um lado, os orgulhosos donos de sites não querem que seus links abram na mesma janela para que o usuário não saia dele. Então qualquer coisa que a pessoa clica é aberta em uma nova janela.

Do outro lado, os usuários normais que – por causa destes orgulhosos donos de sites – não podem controlar como eles mesmos navegam na web. É a famosa discussão de “usar ou não usar o target=_blank“.

Minha opinião sempre foi clara: nunca tente controlar as ações do usuário. Se ele quiser abandonar seu site, ele irá. Mesmo se o link abrir em nova janela automaticamente, ele vai fechar a janela do seu site se ele quiser. Afinal de contas, para um usuário abrir um link em nova janela, é simples: basta clicar com o botão do meio do mouse no link ou clicar segurando o botão CTRL (ou CMD) do teclado. Até mesmo um clique com botão direito selecionando “Abrir link em nova janela / aba” já serve. Mas e como fazer com que um link não abra em uma nova janela? O usuário não tem como fazer isto.

Uma analogia simples: a velocidade máxima permitida na cidade é de 60 km/h. Os orgulhosos donos de sites – que neste exemplo são fabricantes de carros – fabricam carros que não podem ultrapassar a velocidade de 60 km/h. Os usuários normais – que são os compradores de carros – não podem exceder este limite mesmo se estiverem em uma rodovia, que possui uma velocidade máxima de 110 km/h. O usuário não tem controle sobre algo que é dele: o carro (que na analogia, é o navegador).

Por isto que, toda vez que um desenvolvedor vem se defender por usar o target=_blank, eu sempre respondo: pare de pensar como um dono de site por um momento. Pense como um usuário normal. O usuário normal tem como escolher entre abrir em nova janela ou não. Se você obrigar ele a abrir em nova janela, ele não tem nenhuma outra opção. Você, como pessoa, prefere ser obrigado a fazer as coisas ou quer ter uma escolha?

Faça seu site funcionar apenas em um navegador

Note como não falei “faça seu site funcionar apenas no Internet Explorer” ou Firefox, Safari, Chrome, etc. Tem muitos desenvolvedores e web designers que fazem seu site funcionar apenas em um, qualquer que seja. Mesmo se o público-alvo do seu site for apenas usuários de um navegador específico, não quer dizer que você deva relaxar e fazer ele funcionar apenas nele, ficando totalmente zoneado em outros.

Não vou entrar na discussão de qual navegador é melhor, o importante é que seu site funcione no mínimo nos 4 navegadores mais populares em suas versões mais recentes. Internet Explorer 6? Dispenso comentários. Quem ainda usa aquilo provavelmente não merece a atenção de ninguém.

Use cores ruins

Fundo rosa-choque e fonte em amarelo. Que coisa agradável. Sim, você tem todo o direito de gostar destas cores, mas é legível? Não custa nada procurar uma paleta de cores boa – tem até sites ótimos pra isso: o ColorLovers (meu favorito) e o ColorSchemer. Faça testes antes de lançar um site: envie o link para um amigo e pergunte pra ele se ele consegue ler o texto. Pergunte se não dói os olhos.

Argh! Meus olhos! Meus pobres olhos!

Aprenda um pouco sobre design e desenvolvimento

Essa é a maior dica que dou a quem pretende ser um web designer algum dia. Aprenda bastante primeiro. Claro, você nunca vai parar de aprender coisas novas – mesmo com 12 anos trabalhando na web, sei apenas 50% do que gostaria de saber e menos de 10% do que é possível se aprender.

Existe material o suficiente na web e em livros. Leia bastante, experimente bastante.

Artigo inspiracional.

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Como lidar com projetos web? Parte 2
• Como lidar com projetos web? Parte 1
• Como estragar seu site – parte 1
• Regras implícitas no web design
• 13 dicas para newsletters em HTML