quinta-feira, 29 de abril de 2010

Efeitos da internet nas eleições 2010

eleicao2010Além do especial sobre mídias sociais, também foram destaques da edição de abril da Revista Webdesign os assuntos envolvendo as próximas eleições e o uso de estratégias digitais nas campanhas de políticos brasileiros.

Através da consulta de alguns profissionais da área, procuramos analisar os efeitos do planejamento criado pela equipe web de Barack Obama e o possível surgimento de um fenômeno semelhante no Brasil, além de como as agências digitais podem explorar este segmento.


A discussão foi tão boa que decidimos trazê-la para cá também. A seguir, confira o resultado das entrevistas com os especialistas Fabiano Carnevale, secretário nacional de comunicação do Partido Verde e membro da equipe do Gabeira.com desde 1998, e Moriael Paiva, diretor executivo de criação da Talk Interactive.


WD :: No documentário “Obama Digital”, alunos da Universidade Presbiteriana Mackenzie apresentaram as principais características envolvendo o planejamento de comunicação digital realizado na campanha de Barack Obama. Levando-se em consideração a realidade brasileira, o que podemos esperar para as próximas eleições, em termos de campanhas políticas digitais? Você acredita que haverá um uso massivo das ferramentas digitais por parte dos candidatos brasileiros?


Fabiano :: Primeiramente, é importante ressaltar que o tipo de campanha realizada por Obama é impossível de ser replicada no Brasil. Pelas diferenças entre a forma de utilização da internet nos dois países, de legislação e, principalmente, pelo tempo eleitoral, que no Brasil é limitada em quatro meses, enquanto nos EUA, dura quase dois anos. Isso nos obriga a recolocar a campanha pela internet no Brasil a partir dessas peculiaridades.


Tem muita gente (alguns sérios, outros nem tanto) vendendo a ideia de que, se o Obama fez lá, nós podemos fazer aqui, o que não é verdade. Mas é fato que o papel desempenhado pela internet nas estratégias de comunicação das campanhas será profundamente relevante por aqui nesse ano. Todos os candidatos e partidos estão se preparando para isso, o que difere é a quantidade de recursos alocados para esse tipo de campanha e, principalmente, as estratégias.


Moriael :: Acho que teremos, sim, um uso intenso. Mas também acho que quem tentar simplesmente copiar a fórmula digital do Obama pode se dar mal. Copiar o modelo on-line não é a solução. O sucesso da campanha americana foi uma estratégia inteligente de relacionamento para todos os canais, integrada, alinhada. Sair criando sites, Twitter, redes sociais digitais e não respeitar os princípios da interação e da comunicação de duas vias da internet não adianta.


Wd :: Ainda sobre a campanha de Obama, no livro “Eleições 2.0: a internet e as mídias sociais no processo eleitoral”, Antonio Graeff ressalta que, além de possuir um site de campanha adequado e eficaz, a estratégia digital foi além ao investir cerca de 16 milhões de dólares em publicidade on-line e criar e administrar perfis em mais de 15 redes sociais. Pela sua experiência na área, quais são as ações e as ferramentas mais recomendadas que devam ser utilizadas pelos candidatos brasileiros nas próximas eleições? Que tipo de “e-novidades” poderemos ver para as eleições de 2010?



Fabiano ::
Mais uma vez, as diferenças entre a legislação eleitoral brasileira e estadunidenses já demarcam uma fronteira. No Brasil, não poderemos fazer publicidade on-line em sites pagos, nem utilizar, por exemplo, os links patrocinados do Google, que foram fundamentais tanto na campanha do Obama quanto em exemplos recentes, como a eleição do senador republicano Scott Brown, em Massachussets, no fim do ano passado.


Então, não será a quantidade de dinheiro investido que fará a diferença por aqui e sim a capacidade de mobilização dos candidatos. A administração de perfis em diversas redes deve ser uma regra, ainda que no Brasil estejamos falando de cinco ou seis redes relevantes, como Orkut, Twitter, Facebook, YouTube e Flickr.


Não sei se teremos grandes novidades, e mais uma vez, não acredito que serão as novidades que farão a diferença. Uma noção básica na internet é que uma ferramenta só se torna relevante quando está massificada, quando a sua utilização se torna simples para o maior número de usuários.


No Brasil, estamos falando de um período muito curto de campanha. São quatro meses de campanha eleitoral, mas o eleitorado costuma se movimentar quando começa a propaganda na TV e só vira mesmo “papo de botequim” nas últimas semanas. Aí é que a campanha on-line pode fazer a diferença, que é quando os e-militantes começam a colocar em prática suas “estratégias”.


Moriael :: É uma pergunta importante. Cada campanha, político e região têm características em que um ou outro canal pode ter mais peso. A campanha deve se preocupar em atender bem todos os targets nos canais mais adequados, sem se preocupar com a moda do momento. Isso quer dizer que, em muitos casos, uma estratégia usando o bom e velho e-mail pode funcionar tanto quanto o Twitter, a plataforma do momento.



Wd :: Falando em mídias sociais, elas foram ferramentas extremamente eficazes na mobilização e engajamento de eleitores na campanha de Obama. Em sua opinião, quais são as vantagens e os riscos de se investir em meios digitais quando falamos de campanhas políticas no Brasil?


Fabiano :: Existe uma grande excitação por conta dos políticos e marqueteiros em relação a utilização da internet nas campanhas eleitorais. É importante ressaltar que a internet não vai fazer um candidato sem carisma virar um fenômeno eleitoral.


Ao contrário, é somente quando uma campanha vira conversa nas ruas é que ela vai para as redes, pois os eleitores começam a buscar as informações sobre as campanhas e você tem que municiar esse eleitor que vai chegar.


A dinâmica de sucesso é essa, das ruas para as redes, das redes para as ruas. A conversa no bar vai para o diálogo nas redes, e esse volta para o bar, para a universidade etc.



Moriael ::
O Brasil é um recordista mundial no uso das mídias sociais. Isso cria um palco excelente para a conversa política, o que já acontece. E, para mim, o maior risco é que políticos não respeitem as características desses espaços. Mídias sociais são canais livres, de conversa e interatividade. Usá-los como canal de propaganda, querendo só falar e não ouvir, pode ser um tiro no pé.


Wd :: Mensurar e apresentar os resultados de campanhas digitais é o principal argumento para convencer os políticos a investirem em ações on-line. De que maneira um processo de métricas web deve ser aplicado para este segmento?



Fabiano :: A internet para a política é orgânica não métrica. A linha que divide o sucesso e o fracasso de uma campanha on-line é quando os seus e-militantes começam a construir suas próprias estratégias, e isso não é facilmente mensurável.


Não descarto a importância de se mensurar o trabalho nas redes, mas é preciso ter em mente que o campo aberto para fazer alterações (a partir desses dados) é menor do que o que os especialistas em pesquisas qualitativas costumam atuar.


Isso se deve ao fato de que, nas mídias tradicionais, como rádio e TV, você comanda um grande broadcaster que transmite para milhões de pessoas, enquanto nas redes sociais são milhares de broadcasters transmitindo, retransmitindo, transformando e recolocando as estratégias oficiais sob seus próprios pontos de vista. A ideia básica é que, para cada e-militante (o broadcaster das redes), uma estratégia é colocada em prática.


Moriael :: Felizmente, esses canais são ricos em possibilidade de mensuração de resultados. Critérios como credibilidade, participação de apoiadores, engajamento são relativamente fáceis de medir em canais como Twitter e Orkut. Aliás, esses dados são tão importantes quanto número de seguidores, que às vezes parece sinal de sucesso.


Wd :: Como as agências digitais e os profissionais freelancers devem se preparar para atender este nicho de mercado?



Fabiano ::
Como não sou do mercado, não me sinto confortável para responder essa pergunta. Mas volto a ressaltar que a capacidade de mobilização das candidaturas é o que vai definir o sucesso da campanha on-line e não a quantidade de dinheiro investido.


Uma das principais vantagens da internet é a possibilidade de redução dos custos da campanha, mas a tendência que tenho acompanhado é que se está criando um novo espaço para o gasto de milhões. As cifras até agora apresentadas são irreais.


Moriael :: Fazer uma campanha digital requer tanto conhecimento político quanto do uso de ferramentas. Estar antenado à realidade política da região onde se quer trabalhar é fundamental. É importante pensar que, no fim das contas, o que importa é o voto no dia da eleição. Compreender que o melhor resultado de uma campanha digital é conseguir converter o chamado engajamento virtual em voto na urna.


Wd :: Para finalizar, vocês poderiam indicar bons exemplos de estratégias no mercado brasileiro?


Fabiano :: A campanha do Gabeira à prefeitura do Rio em 2008 é o principal exemplo nacional de como a mobilização on-line pode potencializar uma campanha, inclusive tendo papel decisivo na virada que quase o levou a vitória no segundo turno.


Citaria também a competente utilização da equipe on-line do Gilberto Kassab à prefeitura de SP, que mesmo com um candidato sem grande apelo para o público que tradicionalmente ocupa as redes, conseguiu construir excelentes formatos de participação dos e-militantes, como a coletiva para blogueiros e as desconferências criativas com os voluntários da campanha.


Moriael :: Poderia citar três exemplos:


1. (Sem puxar sardinha, mas já) Tenho segurança em dizer que o trabalho do nosso time na campanha do Kassab foi bem sólido. Muita participação, autenticidade e cobertura adequada. Kassab ouviu São Paulo pela web, em diversos canais. De site colaborativo, que ajudou no plano de governo, a uma rede social fechada que funcionou como QG para os mais engajados.


2. Beto Richa, no Paraná, usa a rede e as mídias sociais com eficiência há algum tempo. Na campanha para prefeito, o meio foi usado para coletar vídeos que foram ao ar na TV. Com muito sucesso.


3. O governador José Serra usa o Twitter de forma autêntica e eficiente. É um “governador” digital. Não apenas pelo número de seguidores, mas pelo uso que faz da interatividade promovida pelo canal. Ouve e conversa.

"

Prepare seu roteiro: eventos sobre internet

Confira o calendario de 2010Apesar da semana “cortada” pelo feriado de Tiradentes (e pelo de São Jorge também, no RJ), quem busca evoluir seus conhecimentos sobre web e também quer fazer um pouco networking, existem boas opções de palestras e eventos na área.

Para os cariocas, por exemplo, podemos indicar a segunda edição do In Net, que acontece no dia 24/04 (sábado), envolvendo apresentações sobre redes e jogos sociais e podcast. Já na próxima semana, a dica é conferir o Ciclo de Palestras Gratuitas, realizado pelo Instituto Infnet.


Em São Paulo e Curitiba, também não faltam boas opções. A partir do dia 22/04, a ENG realiza uma série de palestras e cursos gratuitos, com destaque para temas como Android, Flex, 3D e Vídeo Digital. Outra boa pedida é a palestra oferecida pela Impacta, em SP, no dia 22/04: “Como alcançar o Sucesso no mercado de TI, Gestão & Design“.


Façam seus roteiros e aproveitem estas oportunidades! Ah, quem souber de eventos realizados em outras regiões do país, pedimos que compartilhe tais informações através dos comentários deste post.

"

Novidade: coluna com notícias internacionais

Novidades na WebdesignO mês de abril marcou o lançamento da reforma gráfica e editorial da Revista Webdesign. Dentre as novidades, destaque para a criação da coluna Internacional. O objetivo deste novo espaço é apresentar os principais acontecimentos do mercado digital pelo mundo.

Mas o diferencial desta coluna aparece em seu caráter colaborativo: todo mês, profissionais brasileiros, atuantes em grandes agências internacionais, vão enviar suas impressões e compartilhar as novidades do segmento web direto das localidades em que se encontram.


Como pequeno aperitivo desta seção, confira a dica enviada recentemente por Ronaldo Jardim, sênior designer na agência Organic Inc, sediada em Toronto, no Canadá:


Tem início, no dia 25 de abril, a nona edição do FITC, que reúne alguns dos principais profissionais de criação do mercado internacional e local. Esse ano, o evento conta com palestras de nomes como David Eriksson, da North Kingdom, e representantes de estúdios e agências locais, como a Jam3media e a Tribal DDB Canada.


Ano passado, pude conferir o evento e posso garantir: é sempre bom estar próximo de pessoas criativas, trocar ideias, conhecer gente nova em nosso mercado… Então, fica aí a dica: FITC Toronto.

"

Artigo: Navegando no mar da educação

Artigo: Navegando no mar da educação: "

André BonnanoE-learning, LMS, SCORM, ADL… Estes são termos que têm ganhado grande destaque no meio acadêmico e corporativo, onde cada vez mais cresce a preocupação com a capacitação e compartilhamento de conhecimento.


Isso se confirma com pesquisas como a da Global Industry Analysts (GIA), que indica um investimento no mercado global de cerca de 52 bilhões de dólares até o final de 2010.


Assim, primeiro vamos entender o que é o e-learning. Tudo começou no início da década de 90, quando as mídias eletrônicas começaram a ser utilizadas no auxílio da aprendizagem, alavancado pela criação do CD-Room e softwares para apresentação.


Já na segunda metade da década, com o surgimento do e-mail, browser, HTML, streaming de áudio e vídeo, esses processos foram sendo aperfeiçoados e a utilização de meios eletrônicos (multimídias) para o auxílio da aprendizagem começou a ser vista com outros olhos.


Mas foi a partir de 2000 que o e-learning começou a tomar a forma do que conhecemos hoje. Fatores como o acesso à internet de alta velocidade, as novas tecnologias e o aperfeiçoamento dos designers de web trouxeram uma grande revolução ao mercado do ensino.


No Brasil, a grande maioria do material de e-learning, como CD-Roms e materiais de apoio, vinha de fora e era aplicado sem nenhum tipo de gestão educacional dos profissionais entendidos da área. Seu principal uso era das equipes de vendas, que buscavam informações sobre seus produtos para potencializar seus negócios.


Porém, o grande “boom” se deu com o surgimento dos cursos on-line e a preocupação das empresas em capacitar profissionalmente seus colaboradores, não só de vendas, mas de todas as áreas.


Hoje, não só as empresas, mas também professores e entidades de ensino, utilizam o e-learning como forma de auxílio na aprendizagem, disponibilizando meios on-line como portais, fóruns, cursos e até mesmo avaliações para – ao mesmo tempo – ensinar, compartilhar e analisar o nível de conhecimento e aprendizagem de seus colaboradores ou alunos. Algumas grandes empresas, inclusive, já começaram a integrar estes meios de capacitação com o plano de carreira de seus funcionários.


Existem no mercado softwares específicos para a gestão de capacitação e aprendizagem, chamados de LMS’s (Learning Management System – Sistema de Gestão de Aprendizado), onde por meio de um login e senha, todas as interações que o usuário faz com o portal são registradas, tais como cursos, resposta a enquetes, provas e certificações, e, através da análise desses registros, é possível obter dados efetivos sobre o seu desenvolvimento capacitacional.


Um dos LMS’s mais conhecidos atualmente é o “moodle“, utilizado por universidades como Mackenzie, e que está disponível para qualquer pessoa que queira utilizá-lo.


Interface do Moodle


Estas plataformas (LMS’s) utilizam um padrão chamado SCORM (Shrable Content Object Reference Model – Modelo de referência de objetos de conteúdo compartilhados), que é atualmente o mais usado para normatizar o segmento.


No próximo artigo, irei explicar mais sobre o SCORM e como utilizá-lo para gerar conteúdo para um LMS.


Por André Bonnano

Designer, fotógrafo e apaixonado pelas artes, atuante no mercado desde 1995, entrou para o mundo do e-learning quando ele ainda estava engatinhando e foi quando teve a oportunidade de aplicar seu conhecimento e criatividade a uma área ainda pouco explorada no Brasil. Atualmente, é diretor da empresa Magic Mind, especializada em e-learning (plataformas e conteúdos) e pioneira no que se diz respeito à mobile learning e aplicação de novos conceitos em aprendizagem.

"

Quem sabe faz a hora – Parte V: conheça o pligus Room

Quem sabe faz a hora – Parte V: conheça o pligus Room: "

pligusUma das etapas mais prazerosas no processo de produção da Revista Webdesign envolve a troca de ideias com a nossa comunidade e o envio dos mais diversos tipos de sugestões de pauta.


A mais recente delas apresentava a startup carioca pligus, que desenvolveu um serviço de comunicação e colaboração on-line em tempo real. Batizado de pligus Room, ele roda diretamente no navegador do usuário e já conta com a participação de mais de 900 usuários, espalhados por 60 países.


Diante da indicação, resolvemos conversar com Gustavo Scanferla, fundador da pligus, que conta um pouco da história deste projeto. Além do bate-papo, temos uma boa notícia: quem deixar um comentário neste post, indicando bons exemplos de startups brasileiras, estará concorrendo a convites para testar o pligus Room. Boa leitura e participe!


Wd :: Como surgiu a ideia de criar o pligus e quais são os seus objetivos?


Gustavo :: A idéia surgiu tem quase três anos. Portanto, ela evoluiu bastante nesse tempo. Mas já em 2007, a ideia era criar um site onde um grupo de pessoas pudesse ligar a webcam e o microfone ao mesmo tempo (coisa que praticamente não existia) e aproveitar que as pessoas estivessem reunidas para fazerem outras atividades em tempo real – colaboração remota -, que também não era nada comum.


O objetivo do serviço é facilitar a vida da pessoa que trabalha, de uma forma ou de outra, em equipe. Usar o pligus evita que grande parte das viagens ou locomoções seja feita para tomar decisões ou avançar um projeto, ou seja, é uma boa economia de dinheiro e tempo. Possibilita também que os funcionários trabalhem de onde quer que estejam, a qualquer hora (trabalho remoto, home office, viagem etc.).


Também é uma forma de ganhar dinheiro (diretamente) para pessoas que trabalham com treinamentos, consultorias, palestras ou e-learning, já que facilitaria e expandiria as possibilidades do trabalho delas.


Além disso, pude observar, nesse tempo, pessoas usando o pligus simplesmente para se divertir desenhando junto, conversando, mostrando fotos… E até fiquei sabendo que uma autora de livros se reuniu com os fãs dela para uma conversa no pligus. O mesmo ocorreu com um autor de tirinhas bem popular. Há também possibilidades para mesas-redondas, debates, fora as outras possibilidades que ainda não descobri!


Wd :: Quais recursos/investimentos foram necessários para colocá-lo no ar?


Gustavo :: O maior investimento foi no tempo: tempo para aprender a fazer tudo que precisaria ser feito, do zero. Como aprendi pela web, não gastei dinheiro com isso. Tempo também para o desenvolvimento todo. Investimento também em paciência e determinação já que foi um longo tempo.


Pude contar também com o apoio do meu pai, que me deu de presente (comprou) alguns trechos de código que precisavam de licença comercial, já que obviamente eu não pretendia reinventar a roda!


Tais “presentes” não foram tão caros, mas foram de extrema importância para o pligus. Não pude comprar eu mesmo, pois me dediquei ao pligus desde o início, pegando apenas dois estágios (sou estudante de publicidade) que somaram cinco meses ao todo. Não tinha dinheiro de trabalho antes, pois não havia trabalhado, já que comecei o pligus com 17 anos. De recurso, tem eu (recurso humano) e o escritório aqui da minha casa.


Wd :: Quais foram os conceitos e as tecnologias utilizadas para a criação e o desenvolvimento do pligus?


Gustavo :: O Ruby on Rails facilitou demais o processo de desenvolvimento. Fiquei um bom tempo até escolher qual programação iria usar – e não me arrependi. O Adobe Flex (responsável pela Room em si) é ideal, pois é uma tecnologia feita com os aplicativos on-line em mente.


Wd :: Quais diferenciais você acredita que podem torná-lo reconhecido pelo mercado?


Gustavo :: Essa integração bem feita entre uma comunicação completa: onde todos os presentes podem usar áudio, vídeo e texto. E uma colaboração produtiva com recursos que não se vê por aí e que vão melhorar cada vez mais.


O atendimento aos usuários também é um diferencial importantíssimo. O objetivo é ser o mais rápido, pessoal e esclarecedor possível. O preço também será um bom diferencial, já que as pessoas pagarão menos por um serviço melhor.


Fora o diferencial de ter sido feito apenas por uma pessoa. Quase todos os concorrentes contam com equipes de 60 a 80 pessoas em média (muitas delas PhDs), trabalhando “full time”, com um ótimo salário e investimentos enormes (exemplo: Google, Adobe, Cisco). Ou seja: quando tiverem mais pessoas trabalhando, acredito que o pligus irá se destacar ainda mais. Com investimento então, melhor ainda.


Wd :: Que tipo de retorno você espera ter como este projeto?


Gustavo :: Um retorno que viabilize a consolidação da empresa pligus, possibilitando tanto a melhoria desse serviço atual (Room) como a criação de outros que acredito que possam ter um potencial ainda maior.


Outros destaques desta série:


- Quem sabe faz a hora – Parte IV: tu-dus


- Quem sabe faz a hora – Parte III: Ortografa


- Quem sabe faz a hora – Parte II: Zuinn


- Quem sabe faz a hora – Parte I: Logolícia


Observação:

Lembramos que a proposta desta série é ir além de entrevistas sobre novos projetos na web nacional. Após a publicação de cada uma delas, pedimos que vocês postem seus comentários e suas dúvidas para que este bate-papo virtual continue e assim possamos conhecer mais sobre o que se passa pela cabeça dos empreendedores digitais brasileiros. Além disso, não deixem de enviar sugestões para os próximos projetos que vocês gostariam de ver analisados neste espaço. Participe!

"

terça-feira, 27 de abril de 2010

WIN a free copy of Socialite 1.1 For Mac

Socialite-Icon-300x300All your social networks in one convenient place. You too could become more sociable for free! Here is your chance to get a free copy of the excellent social networking app Socialite. However, you will need to be quick as the winner will be chosen at the end of the day.



This freshly updated app from our friends at Realmac Software allows users to connect to their Facebook and Twitter accounts, read and share from their favourite RSS feeds and even access Digg and Flickr, all from within the beautifully designed app.


Find out more at: www.realmacsoftware.com


How to enter:


1. Make sure your’re following @icreatemagazine on Twitter


2. Tweet @icreatemagazine and tell us (in less than 140 characters) how your Mac keeps you sociable, using the hashtag #icreatesocial


3. We’ll pick one winner later on today and provide their code via Twitter DM


Good luck!

domingo, 25 de abril de 2010

Seven Must-See Web Design Videos and Presentations

In one of our previous articles, I put together a list of 7 must-see videos related to web design. Since then, I’ve come across a number of other videos from conferences and events, and I thought I would share some of those here.

The list includes a brief description of each video, some notable quotes from the presentations, and related links. So, sit back, take your time and enjoy some great technical insights and design principles from some well-known web designers, developers, and conference speakers.

[By the way: The network tab (on the top of the page) is updated several times a day. It features manually selected articles from the best web design blogs!]

The Influence of Print Design

Speaker: Jason Santa Maria

Part of the MFA in Interaction Design program, this is a candid and personal discussion of how print design and the technique of “storytelling” have affected the designs of the speaker in his professional career as a web designer.

Notable Quote:

“Over time I started looking at the way that publications look, and the way that web designs look, and I didn’t see that same connection, and I wondered why. So I want to go over some of the stuff I’ve discovered, and why web design looks the way that it does.”

Related Link:

Simplicity Sells

Speaker: David Pogue

Although not specifically about web design, this is an enlightening and entertaining TED Talk by New York Times columnist David Pogue. Pogue, who has authored many technology books, takes aim at technology’s worst interface-design offenders, and provides encouraging examples of products that get it right. To keep things interesting, he even occasionally breaks into song.

Notable Quote:

“I know one guy who spent $4,000 just on Photoshop over the years. Software companies make 35% of their revenue from just these software upgrades. I call it the software upgrade paradox, which is, if you improve a piece of software enough times, you eventually ruin it.”

Related Link:

Six Things Every jQuery Developer Must Know

Speaker: Elijah Manor

This somewhat technically-heavy talk from the Mix Conference provides an overview of several in-depth concepts that developers need to learn to bring their jQuery development to the next level. The discussion covers six things: “What Is ‘This’?”, “Am I Referencing the jQuery Object or a DOM Element?”, “Understanding Selectors”, “Combine and Minify Your Scripts”, “Different Ways of Storing Data”, and “The Dos and Don’ts of Events”.


 in Seven Must-See Web Design Videos and Presentations

Notable Quote:

“Whether you are a beginner or intermediate jQuery developer, if you don’t have a good understanding of the this statement then you’ll most likely find yourself stumbling along.”

Related Link:

Why Designers Fail and What to do About It

Speaker: Scott Berkun

Taken from the “From Business to Buttons” Conference, Scott Berkun talks about design failure and its causes. Sometimes it’s problems in our design process or how we carry it out that cause failure. But in many cases, it’s the other stuff, the non-design stuff, the business stuff that causes failure. Scott argues the need to consider these other aspects — pitching ideas, learning to talk the language of business, and so on — as design problems too.

Notable Quote:

“Studying the perfect cases doesn’t inform as much as the fail cases do.”

Related Link:

Great Designers Steal

Speaker: Jeff Veen

A very inspiring and informative talk based on a classic quote from Picasso (which he evidently “stole” from T.S. Eliot), “Good artists copy. Great artists steal”.

Notable Quotes:

“Every so often, there’s a product that works so well, that gets technology so right, that it appears almost to be like magic, and almost immediately, competitors do these superficial… knock-offs of the features that they see, hoping that they too can cash in on that success.”

“The key here is to be intentional with what we steal, to look at what the principles are behind the things that are successful, and steal those, rather than just a superficial copy.”

Related Link:

Using jQuery to Extend CSS

Speaker: Chris Coyier

At the 2009 Front-End Design Conference, Chris Coyier of CSS-Tricks fame entertains the audience and discusses the many benefits of using jQuery with CSS development, demonstrating how jQuery resolves many typical CSS issues, and even helps extend CSS in ways that CSS alone probably never will.

Notable Quote:

“[Choosing jQuery] is like choosing the guitar. If you’re going to pick an instrument to play, the guitar’s a cool one to choose, because there’s so much information about it out there. There’s a lot more [Google] results for ‘guitar tabs’ and ‘jQuery tutorials’ than there are for ‘banjo tabs’ and ‘MooTools tutorials’.”

Related Link:

Seductive Design

Speaker: Andy Budd

Andy Budd, at Build Conference 2009, thinks looks and first impressions do matter, especially in design, and he shows how such principles can be applied to “seducing” users through design.

Notable Quote:

“Often [seduction] is seen as a negative thing, it’s seen as bad. People think of it as leading people astray. However, I actually think that seduction can be a good thing, it can be a fun thing.”


© Louis Lazaris for Smashing Magazine, 2010. |

quarta-feira, 21 de abril de 2010

How to Create a Promotional Snail Mail Campaign

It’s important to promote your design business. This is especially true when economic times are challenging, you’ve got news to announce, or you’re simply hungry for growth. Many forms of promotion are available to the modern designer – with banner ads and Google AdWords among the most popular. In this digital age, it’s easy for web and graphic designers to overlook one of the most effective and fun forms of promotion: the mail campaign. In an era when people are accustomed to communicating electronically, the value and meaning of something you can hold in your hands is greater than ever before.

The promo mailer is perhaps most popular among illustrators and graphic designers working for editorial clients, which means that it is a powerful, untapped resource for some web designers. Likewise, it was probably a much more common practice ten years ago than it is today due to the rise of online promotion techniques – but those who ignore its potential are missing out on a tool with the power to gain new clients, increase web traffic, and attract publicity for your business and events.

3dtriplex Theudc1 in How to Create a Promotional Snail Mail Campaign

This promotional mailer for Ultra Design Co. includes 3-D posters (complete with 3-D glasses!). Designed by Humberto Howard/UDC

Common types of mailers include postcards and brochures, but designers featured in this article have produced everything from faux newspapers to toys and even promotional eyepatches.

In other words, this can and should be much more than just another opportunity to promote your work. It is also an opportunity to have a heap of fun, think outside the rectangle, and even present former and potential clients with a unique objet d’art. If you give them a piece of art and design that they’re unlikely to forget, then they’ll be unlikely to forget you.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

How to Create a Postcard

Finally in How to Create a Promotional Snail Mail Campaign

Promo postcard by author and designer Dan Redding at Magnetic State

The type of mailer that you send is limited only by your imagination, but the most common form is the postcard (we’ll look at other forms momentarily). Postcards come in a variety of sizes (standard is 4.25” by 6”) and are available on cardstocks in a variety of weights and finishes. There is no right or wrong way to create a postcard design, but one steadfast rule is that your greatest talents and skills should be in the spotlight. You’ll probably only have a moment to connect with the recipient of your card, so be bold and communicative.

Your design work should go on the front – perhaps your strongest portfolio piece, or a small selection of them – along with your name, URL, and a list of services provided: ‘Illustration and Design,’ ‘Graphic Design and Web Design,’ etc. The back of the postcard usually includes a designer’s logo along with contact information. Some designers will print a huge logo or alternate design back here, while others will leave enough space for a personal, handwritten note. No matter what your design, make sure to consult USPS guidelines to ensure that your design is acceptable for mailing (any quality printing company can assist you with this).

Avoid the Trash Can

If your postcard looks like every other advertisement out there, it will probably end up in the recycling bin. In fact, it might not even make it past the intern that sorts the mail at that publication you sent to. Then it will get recycled, and in a week, your beautiful work will be five percent of a toilet paper roll on a shelf in a Wal-Mart in New Jersey. You don’t want that.

Vollmar4 in How to Create a Promotional Snail Mail Campaign

This beautiful, hand-silkscreened promo mailer by Jay Vollmar has a personal touch.

If your card makes it past the perils of the wastebasket and reaches the hands of your addressee – perhaps an Art Director at a record label or the CEO of a startup company – then you’ve done well. If he or she reads both sides and likes it enough to tack it onto the bulletin board for future reference, then you’re in great shape. And if you get a phone call the next time that Art Director has a freelance job, then you’re golden.

Your design work is not junk – it’s your passion – so your promo shouldn’t be junk mail. Make your promo memorable and personal. When it lands in the hands of Steven Q. Client, present Mr. Client with a design that is compelling and appropriate to his industry. Write him a note that is friendly and courteous while reminding him that you hope to hear from him the next time an appropriate freelance project arises. An even better way to make a great impression and stay out of the rubbish bin is to make an unusual or useful product instead of a postcard.

Print Your Design

If you’re very industrious (and you’ve got a good printer), you might print your postcard yourself. But for most designers, it makes the most sense to pay a professional printer to print a few hundred copies of your design.

Choose a print company that will provide accurate colors, high-quality printing, and accessible customer service. There are many of these available on the web; one fine example is Modern Postcard (author’s note: I am not affiliated, just a satisfied customer).

Don’t be wasteful. Check your printer’s environmental policy (a responsible printing service will make this available). Investigate their commitment to sustainability, recycling, and environmentally friendly products. Make your mailers count. Send to recipients who will be interested in your services.

Think Outside the Rectangle

Some designers eschew the pedestrian postcard in favor of a more adventurous option. Here are some creative promotional items that defy expectations.

Labzeus in How to Create a Promotional Snail Mail Campaign

This lovingly crafted mail package from Labzeus/Brian Neumann includes his portfolio on a flash drive. According to Mr. Neumann’s website, “The project involved package design (custom folder with die cuts), letterpress & foil stamping (letterset & folder), giclée printing (fold-out poster, 2-sided), chemical etching (flash drives) and hand embossments (sticker seal and poster front). I also sourced mailer boxes, custom labels and had branded packing tape created to round out the piece.”

Publico2 in How to Create a Promotional Snail Mail Campaign

Promotional ‘business card’ eyepatch designed by Paul Coors for the now-defunct art gallery Publico

Rand in How to Create a Promotional Snail Mail Campaign

These small buttons are emblazoned the famous logos of design hero Paul Rand. Why not make small gifts or accessories featuring your own work?

Vollmar in How to Create a Promotional Snail Mail Campaign

Promotional paddleball toy by Jay Vollmar

Hawk3 in How to Create a Promotional Snail Mail Campaign

Philadelphia illustrator Hawk Krall sends out ‘mega-packs’ of colorful food-themed goodies. “I get the best response from these,” says Hawk. “I send out about 150-200 of these to my best/newest contacts, made up of 3 or 4 postcards, stickers, tearsheets, hot dog magnets, etc.”

Hugo3 in How to Create a Promotional Snail Mail Campaign

This newspaper-style promotional brochure from Hugo & Marie garnered the consultancy lots of attention both online and off.

A word of advice: if you design an unusual item, says designer Derek Sussner, “take a mockup to the design consultants at the USPS before you show up with 700 things to mail, especially if they are dimensional, fragile, or out of the ordinary. That early consult can save some time, energy – and often, postage costs.”

All About Mailing Lists

So now you’ve got a few hundred copies of your beautifully designed postcard/portfolio brochure/novelty treasure map. Where do you send them? You need a mailing list. A good mailing list is something that you can purchase or develop on your own.

Your mailing list should consist of both former clients and potential clients. You’re contacting former clients to say hello and to reinforce your presence in their minds. You’re contacting potential clients to introduce your work and convince them to visit your site, call you, and ultimately, hire you. With any luck, some of those potential clients will be transformed into enthusiastic former clients list by next year.

Weiman2 in How to Create a Promotional Snail Mail Campaign

Postcard by Weiman Design LLC

How to Buy a Mailing List

Just like printing companies, a simple web search will turn up many companies that sell mailing lists. In fact, many printing companies are ‘one-stop shops’ that will not only print your mailers, but can also sell you a mailing list and even stamp, address, and send your items for you. If you choose this route, make sure the company you buy from is a reputable one. Get their representative on the phone and ask them what they can offer that’s suitable to your target audience. Make sure their lists were compiled recently and contain accurate information. If the list is over a year old, how many of those contacts have changed employers or positions? If one name is spelled wrong or one office incorrect, your mailer will end up at the bottom of the wastebasket – along with the money you spent developing and printing it.

Kuo in How to Create a Promotional Snail Mail Campaign

This postcard by Sam Kuo represents the theme of Halloween in New York City. Mr. Kuo has designed many clever mailers that acknowledge pop-culture phenomena and current events.

How to Build your Own Mailing List

For many designers, D.I.Y. (do it yourself) is an ethos to live by. Researching and compiling your own mailing list can be a highly effective and personal way to customize a list to the specific needs of your business. Sending to former clients and contacts is the easy part. But who else can you send to?

In order to build your own mailing list, you’ll need to identify a target audience. If you’re an editorial illustrator working for magazines, you might go to a bookstore and copy down the names and office addresses of art directors listed in the masthead of magazines you’d like to see your work in. If you’re a web designer, you might identify a target market (perhaps you specialize in promotional websites for filmmakers and videographers). Start Googling relevant companies and checking Contact pages for address listings. Don’t be afraid to get on the phone, introduce yourself, and politely inquire about an appropriate contact person who you might send to.

Hawk5 in How to Create a Promotional Snail Mail Campaign

Postcard by Hawk Krall

High and Low

When selecting targets for your mailing list, choose a wide range of recipients. You should choose people and organizations similar to those you’ve worked with before. These potential clients are likely to be suitable to your size, price range, and services. You should also contact your ideal clients – look for your ‘dream job.’ If there are any companies you’ve always wanted to work with, now’s the time to do some research and get in touch. Be resourceful and be professional.

Snail Mail is Your Friend

Whatever you decide to send, calculate accurate postage for each item and buy correctly valued stamps. When in doubt, take your item to the post office and ask questions.

If you’re sending postcards, buy postcard stamps from the postal service. In the U.S., these stamps are cheaper than standard first class stamps and will save you a good deal of money on a bulk mailing.

Send your mail so that it will arrive on a Tuesday or Wednesday (this rule also applies to your email newsletter). Not only is mail volume lighter after Monday, but work volume is lighter, too. Your recipient is likely to have a smaller amount of mail competing with yours for his or her attention on these days. He or she is also more to have a few more moments of attention to devote to something besides the day’s pressing work tasks.

Examples from Sussner Designer Co.

Sussner Design Company (aka SDCo) is a design firm that’s been doing superb (and award-winning) work in Minneapolis, Minnesota for over ten years. Derek Sussner – the company’s “proud owner guy,” according to their website – was kind enough to answer some questions about SDCo’s inventive promotional materials for this article.

SDCO in How to Create a Promotional Snail Mail Campaign

Sussner Design Company Promotional Brochure

“We printed about a 1,000,” Derek says of these newspaper-like brochures of the firm’s design work. “Of those, we mailed out 700. We use the rest as our portfolio when we meet with new clients, or to send to new people we come in contact with. Reflections printed them for us. We have a great, long-standing relationship with them. We create all of Reflections’ promotional materials – so we print our own self-promo materials for trade. These brochures/mailers have been pretty successful for us. And they are a great way to stay in front of people we haven’t talked to in awhile.”

SDCo10YearPoster72 in How to Create a Promotional Snail Mail Campaign

Sussner Design Co. Ten-Year Anniversary Poster

When Derek is asked whether he purchases his mailing lists or generates them in-house, he responds, “Both. The mailing list that works the best is the one we keep in-house. We add people we work with, have worked with in the past, people we’ve met and/or submitted proposals for, colleagues, industry partners, and a few networking friends. We also purchased a list (and we’ve renewed it several times). From what I can tell, we’ve never generated a face to face meeting from the purchased list.”

Happy Hour in How to Create a Promotional Snail Mail Campaign

Sussner Design Company Happy Hour Spinner

The Sussner ‘happy hour spinner’ is a whimsical, functional, and extremely clever item that allows the user to put his or her happy hour destination in the hands of fate. The item was the follow-up to a Lunch Spinner, which Derek hopes to re-create soon. “We’re also looking to create a version the can be customized by the recipient – so they can be used by our out-of-town clients and friends.”

Derek’s says the company’s goal for promo mailers “is always that people keep them – and even better – display them on or around their desk. And the best scenario is that it causes them to write you an email or call you with a new project. I also like it when the leftover promos have a life span so you can continue to use them, hand them out, or send them with other capabilities presentations.”

Moving in How to Create a Promotional Snail Mail Campaign

Moving announcements and event notifications are other common types of promotional mailers.

Derek’s advice on the most important attribute of a successful mailer is simple: “It has to grab someone’s attention. Hopefully, it slows the motion of the arm down – if someone notices it on their way to throwing it in the garbage.” The truth of the matter is that all printed promotional matter – no matter how clever – is ultimately disposable. That’s why promo items need to create a mental and emotional impact on the audience’s mind as quickly and deeply as possible.

In Conclusion

Exceptional design work is promotion in itself. Keep your clients happy and follow your own path as an artist and craftsperson. Word of mouth will keep clients and fans of your work coming back to hire you or check in on the evolution of your creative talent. In fact, a designer at one popular screenprinting and graphic design studio contacted for this article said, “You’ll be interested to discover that we actually do not have any promotional material! Our posters have worked as an effective promotional material for us for years. Don’t ask me how, but they do.” The truth is that this award-winning studio stays on top because its designs are exceptional and original each and every time. It has also been in business for many years – accruing clients, awards, and publication in popular design magazines all the while.

However, for designers that work at new or growing businesses – some of which launched during a daunting economic downturn – promotion is a valuable tool. It can also be a great way to express your personal creative energy between jobs for professional clients.

Besides, Thomas Edison once said “Everything comes to him who hustles while he waits,” and Jay-Z said “You can’t knock the hustle.”

So promote, promote, promote!


© Dan Redding for Smashing Magazine, 2010.

Starting Out Organized: Website Content Planning The Right Way

So many articles explain how to design interfaces, design graphics and deal with clients. But one step in the Web development process is often skipped over or forgotten altogether: content planning. Sometimes called information architecture, or IA planning, this step doesn’t find a home easily in many people’s workflow. But rushing on to programming and pushing pixels makes for content that looks shoehorned rather than fully integrated and will only require late-game revisions. [By the way: The network tab (on the top of the page) is updated several times a day. It features manually selected articles from the best web design blogs!]

Your New Project: How It Goes All Too Often

Dayone-planning in Starting Out Organized: Website Content Planning The Right Way

On day one things are great. You’ve landed a new job, the client is excited, you’re stoked and the project will be great. First things first: you have to collect the main materials to begin the design. You send the client an email asking for what you need.

On day two you get the following:

  • A TIFF logo (in CMYK) via email;
  • A set of logo standards that include the RGB values, via email (separately);
  • A disc full of photos with various names (like “DSC09080978″);
  • A fax that labels the photos according to their file names;
  • An email that lays out the top and second-level navigation, as the client sees it;
  • A phone that makes last-minute changes to the top-level navigation;
  • An email with a DOC attachment full of text for various pages (but not all of it).

And on day three you get an email that makes half of the junk you got yesterday obsolete.

You’re only three days in, and the project is already no fun. You got into Web design to make great layouts, solve problems and create functional art that breathes through programming. It never occurred to you that cleaning up your client’s disorganization would be a part of the gig.

We know that a great website relies on all parts working in harmony. To achieve this, you have to start on the right foot at the beginning of the project. You need an organizational system that does the following things:

  • Allows you to organize deliverables from various media;
  • Lets you rapidly make changes when needed (it’s called planning for a reason: things change!);
  • Helps you collaborate with all stakeholders;
  • Shows how the project is developing and what’s left to do;
  • Ideally launches you into the actual design and building phase.

The Architecture: Every Brick Counts

Architecture-planning in Starting Out Organized: Website Content Planning The Right Way

Your website’s users will have to “live” inside your website for a period of time. Because of this, some real-world architectural principles apply to website planning. A sense of context and “place” helps users find what they’re looking for. When we talk about the architecture of a website, we’re talking about the hierarchy of its navigation and its structure. We’re not talking about graphics, text or anything cosmetic.

You can plan your architecture in many ways.

Card Sorting

Indexcards-planning in Starting Out Organized: Website Content Planning The Right Way

Card sorting is a way to organize content based on hierarchy. To try it, simply put all of the pages for your website onto index cards. Ask stakeholders to sort those cards into logical stacks that represent the hierarchy of your website’s navigation. It’s a great exercise to make sure that the content on your website can be found in the most logical place and that like-minded content is grouped and named appropriately.

  • What’s it for?
    To gather feedback on what pages should go where on your website.
  • What’s good about it?
    It’s a great way to learn the assumptions of multiple users.
  • What’s bad about it?
    The results should be taken with a grain of salt. Your participants will be making a lot of guesses and assumptions.
  • In sum
    One major task in website development is making people feel included. Card sorting is an interactive process that helps people feel like they are contributing.

A few resources to learn more about card sorting:

Content Inventories

Content-inventory-planning in Starting Out Organized: Website Content Planning The Right Way

A content inventory is a great way to understand the breadth of your website and the purpose of each page. Simply create a spreadsheet of all your pages and their corresponding URLs. But a content inventory gets much more useful when you add things like page notes and single-sentence summaries of why a page exists. Use a content inventory to quickly understand topography and figure out what should fit where. It is a great way to think through a redesign but may not be the best way to plan new websites.

  • What’s it for?
    To understand the context and purpose a website’s pages.
  • What’s good about it?
    Once it’s complete, dragging things around and playing with alternate navigation schemes is easy. It also makes it easy to see the topography of your website.
  • What’s bad about it?
    Laborious to create. It’s not of much use during the development phase, and it gets out of date pretty quickly.
  • In sum
    A content inventory is a great way to find unnecessary pages on your website. Forcing yourself to look at each page in turn and summarizing its usefulness nearly outweigh the disadvantages of this method.

A few resources to learn more about content inventories:

Paper and Sketchboards

Sketchboarding-planning in Starting Out Organized: Website Content Planning The Right Way

Sometimes paper just feels good. The free form allows for incredible expressiveness, and nothing is faster for capturing ideas. Unfortunately, the drawbacks are tough to ignore. Paper is easy to lose, hard to share, wasteful and not very useful past the early stages of a project. Eventually, everything for a website becomes digital, and so going digital as soon as possible is best. Use paper to capture thoughts in a meeting to brainstorm and to explore. But do yourself a favor and transcribe or scan the information as early as possible.

  • What’s it for?
    To quickly and collaboratively sketch out a website architecture.
  • What’s good about it?
    You can move pieces of paper around. And drawing with markers is fun. It’s also great for energizing a group and quickly scanning a lot of ideas.
  • What’s bad about it?
    Once your big sketchboard is complete, it has to be transcribed into another format to be useful.
  • In sum
    Beware the feel-good meeting! Sketchboard meetings are fun and seemingly productive, but you’ll often wonder afterwards what you actually achieved. Ideas come quickly, but the real work comes in deciding whether any of them are appropriate for the project.

A few resources to learn more about sketchboarding:

Site Map Diagrams

Illustrativegraphs-planning in Starting Out Organized: Website Content Planning The Right Way

A visual site map is quick to make, fairly expressive and easy to change. People have all sorts of methods for building site map diagrams. Whatever your tool, the diagram is a useful way to demonstrate hierarchy. It clearly shows the relationships between pages and tells you where your website is too shallow or deep.

  • What’s it for?
    To visually explain the relationships between pages on your website.
  • What’s good about it?
    Nothing better illustrates the hierarchy of a website than a diagram with lines and arrows indicating the relationships between pages. Clients naturally understand it.
  • What’s bad about it?
    The actual relationships between pages can be hard to grasp. What looks good on a chart might not work well on a website. And a site map diagram is not really useful during the development phase, quickly becoming a dead documents.
  • In sum
    A site map diagram is a quick way to sketch navigation and hierarchy. Don’t try to cram in other bits of information that just don’t fit.

A few resources to learn more about site maps and diagrams:

Which to Choose?

There is no one right way to plan the architecture for a website. Depending on the size of the website, you might use all of these techniques. They’re not opposed or mutually exclusive—just different means to similar ends.

When picking your method of architecture planning, consider these things:

  • How big is the website?
    The sheer size of some websites makes some of these methods cumbersome or impossible.
  • What type of website is it?
    The card-sorting method, for example, is perfect for e-commerce websites but overkill for blogs.
  • Who is your client?
    The less Web-savvy the client, the more elaborate your descriptions and plans will have to be. If your client understands websites, then you can be a bit more brief (but not too brief!).
  • Consider your workflow.
    Try out all of the ideas, and then pick a lightweight, simple process that you and your clients can understand. If you find yourself filling in information that isn’t useful or illustrative, then you’ve gone off track. Adopting a process that allows you to do the bare minimum is good in this case.

A few tips on architecture planning:

  • Organize content according to user needs, not an organizational chart or how the client structures their company.
  • Give pages clear and succinct names.
  • Be sympathetic. Think of your typical users, called personas, and imagine them navigating the website. What would they be looking for?
  • Consider creating auxiliary way-finding pages. These pages would lie beyond the main navigation of your website and structure various pages according to specific user needs.
  • If you can’t succinctly explain why a page would be useful to someone, omit it.
  • Plan the architecture around the content. Don’t write content to fit the architecture.
  • When dealing with clients, especially clients at large companies with many departments, keeping egos in check can be tough. Keep everyone on point with constant reminders of the true goals of the website.
  • Not everything has to be a page. Use your hierarchy of content as a guide. Some items might work better as an FAQ entry or as sidebar content. Make sure your architecture-planning method does not blind you to this.

The Architecture Is The Home, Not The Content Itself

Like the website itself, each of your pages has a structure and hierarchy as well. The architecture helps users find the right page. The hierarchy and semantics help users find the right content on that page. Too often, copywriting is an afterthought in Web development. No matter how attractive, clever or interactive a website is, its main purpose is to convey information. A great website is designed around the content.

Most of the tools that are great for planning architecture are not so good for planning content. This causes many people to skip the process of content planning, to abandon their copywriters and to use their CMS as a content organizer (i.e. leaving it as an afterthought).

HTML Wireframes

Yourownwireframes-planning in Starting Out Organized: Website Content Planning The Right Way

Making your own wireframe is a smart way to demonstrate your plans to collaborators. It’s a great visual tool and very expressive. The drawback of using manual wireframes is that they are… well, manual. You’ll end up spending time on the front-end getting everything just so and more time on every revision. While manual wireframes are the perfect tool for many DIY coders, keep things simple! If you over-design your wireframes, your client will focus more on cosmetics than substance.

  • What’s it for?
    HTML wireframes are a natural extension of other architecture-planning methods. They fill in the architecture by showing the content and markup on the pages.
  • What’s good about it?
    They’re illustrative and easy to understand. Clients immediately grasp them and how they translate to the next step.
  • What’s bad about it?
    Getting a structure that works can be tricky. You have to manually mark up content. And they’re not a great way to work with multiple collaborators.
  • In sum
    HTML wireframes are a great way to envision and plan website content. If you’re a freelancer or on a small team, they’re a great option.

A few tips on manual wireframes:

  • Once you get a good style sheet and structure, leave the wireframe alone. It’s not supposed to be elegant or beautiful. In fact, the fewer the distractions and the simpler, the better. The point is for people to concentrate on the content.
  • Work on naturally transitioning from wireframe to development. A simple script or some find-and-replace magic can put all that useful markup into your working product.
  • For simple websites, use wireframes in the first stage in development. If you mark up your content properly, you may only need CSS after that.

Plain Old Text

Texteditor-planning in Starting Out Organized: Website Content Planning The Right Way

Many copywriters reach for MS Word or Apple Pages when starting to write website content. The simple tools are often the most useful and powerful. In this case, that’s only partly true. While text editors are a great way to quickly organize text, they have their drawbacks in website planning.

  • What’s it for?
    Text editors are a quick and easy way to organize text for a website.
  • What’s good about it?
    They’re readily available, and almost anyone can use them. Their ubiquity and revision-tracking features make them great for collaboration.
  • What’s bad about it?
    The mark-up created by text editors doesn’t translate well into the Web world. Clients often don’t understand how a linear document translates into a free-form website architecture. Embedding images and attaching files to pages can make the document cumbersome and not great for migrating to the development stage.
  • In sum
    Text editors are useful for planning the actual text of a website. What’s missing is the navigation and how the attached files will be organized. Don’t prevent collaborators who are comfortable with text editors from working this way, but move the content into a more workable format quickly.

A few tips on using text editors for website planning:

  • If you’re using a text editor to organize website content, use RTF format instead of the proprietary file format of the editor. It will make a lot of things easier for you later.
  • Create a simple numbering system that makes the pages in your document correspond to the more visual architecture you have created separately.

Slides

Powerpoint-planning in Starting Out Organized: Website Content Planning The Right Way

As with text editors, many people already own a tool that creates slides, such as PowerPoint or Keynote. In fact, for many office professionals, it’s the only layout tool they own. Thus, many websites are planned in PowerPoint. Its availability and relative ease of use make it a good option for some workflows.

  • What’s it good for?
    Slideshow creators are used to easily sketch the structure and to link pages.
  • What’s good about it?
    They’re readily available, and almost anyone can use them. Their basic layout features liberate many people who would otherwise struggle to convey their thoughts.
  • What’s bad about it?
    Slideshow creators are great at getting information in but poor at getting it back out. Their graphic creation abilities often complicate the goal of the process. (Plus, a lot of cute icons will suddenly start to appear in your content!)
  • In sum
    Slideshow tools are a great makeshift wireframe creator. They use a familiar process in a new way. But you’ll face a trade-off when you begin building the website.

A few tips on using slideshow creators for website planning:

  • Don’t get too creative with “designing” your pages. Avoid color, graphics and anything else that does not specifically illustrate the hierarchy of content.
  • Keep your system very simple. The goal is to make it illustrative and quick. The more complicated it is for you to drag pages and update links, the more reluctant you will be to explore new options for the layout.

Jumpchart

Jumpchart-planning in Starting Out Organized: Website Content Planning The Right Way

Jumpchart lets you make simple and quick HTML wireframes. Whatever planning method that works for you is a good one. But in our studio, we find that no tool gives us as much flexibility or momentum as Jumpchart, and that’s why it’s our tool of choice. It simply organizes content hierarchically, compiles feedback and exports to the next stage of the development process.

  • What’s it good for?
    Jumpchart is a natural extension of manual HTML wireframes.
  • What’s good about it?
    It automates some of the most important parts of the manual HTML wireframing process, with the collaboration and formatting options that many people want. It also exports.
  • What’s bad about it?
    Jumpchart requires a paid subscription to plan larger websites.
  • In sum
    Jumpchart is a great way for small teams and remote collaborators to visually organize content. The ability to export to XHTML and WordPress (WXR) makes for a rapid transition between the planning and development stages.

A few tips on using Jumpchart for website planning:

  • Use Jumpchart as a single spot for all the deliverables in your website project. Images and documents can be attached to individual pages.
  • Use the permission system to control who can see and who can edit.
  • For those who plan the content before the architecture (like us!), Jumpchart is a great way to ease into the site map.

Putting It All Together

Finding the right combination of tools and processes is an important part of planning a website. A lot of thought should go into even the smallest website. This can be daunting for even the best developer, but we’ve yet to cover one of the biggest obstacles to the development process: the client.

Calling the client an obstacle is not fair, of course, but it feels that way occasionally. Clients can throw a wrench in the cogs of the best process. Take pity on them, though. They have jobs and lives like the rest of us. This “website” thing is usually just another line on their long list of action items. To create a planning process that embraces the human component, consider how you can better accommodate their needs.

The Inevitable Revisions: Being Fleet of Foot

Running-planning in Starting Out Organized: Website Content Planning The Right Way

Clients change their minds. It’s in their genes to be indecisive and difficult. If they knew what the heck they were doing, they wouldn’t need us. Our job is to turn their mess into perfection. Despite the mess, budget and timeline, your work will be judged on its own merit. You either got it right or you didn’t, and there’s no passing the buck.

This Scylla and Charybdis are no reason to stop trying. What you need is a workflow that embraces change rather than resists it.

  • Make sure your planning method is not tedious. If updating a simple page title in PowerPoint takes you 10 minutes, rethink your method.
  • Follow the order of the steps. Starting on later steps before previous steps are approved is tempting. Don’t!
  • Bundle revisions. You’ll kill your budget if you make individual changes as they come.
  • Encourage your client to take time in the planning stage. No matter how close the deadline, this is the one part you shouldn’t skimp on.
  • Make sure your contract specifies consequences for revisions. Be explicit.

Collaboration: Bring Stakeholders Together or Die Trying

If you plan in a vacuum, you’ll only end up with a pile of lint. The secret to efficient planning is to include those with authority in the process. If you spring architecture and content on stakeholders late in the game, expect far-reaching changes that require backtracking.

Get architecture, content and deliverables approved before moving on to the next steps. Modern CMS’ have templates that can accommodate a wide variety of content, and this might make it seem as though content organization and architecture aren’t your problem, but they are! If you write the CSS and programming without understanding what exactly you’re building, you will be forced either to backtrack or to fit content into a template that isn’t ready for it. Content comes first.

  • If you’re planning online, email everyone when you can. If you plan on paper, print multiple copies in the hopes that more stakeholders will see the plan before you move on.
  • Get clear, direct approval of major steps in writing. If your client is hesitant, they may be hiding that they’ve failed to get approval from higher-ups. Asking for an email or signature forces the issue. It may sound confrontational, but most clients will understand and appreciate your thoroughness.
  • Ask for meetings. Most creative people hate them, but a successful project requires collaboration. You would be surprised what comes out of a 10-minute phone call.

Explaining: Heel Meet Arrow

Achilles-planning in Starting Out Organized: Website Content Planning The Right Way

You may be a great designer, programmer, architect or manager, but if you can’t show progress and convey ideas to clients, you will fail. Clients need feedback. They need to see where you are heading with the project. Telling them is one thing; show them another. Many potentially great websites were derailed because the designer did not effectively explain what was happening to the client.

  • Show, don’t tell. No matter how much head-nodding you see, if you only tell your clients what you will do, they’ll be confused later. Either poor memory or communication will sink your ship every time.
  • Don’t format content too much. Keep it simple. Some people start pushing pixels right after planning. Others start working on interface wireframes. Whatever you do, empower yourself or your designers to make primary decisions about font, color and layout. If your content wireframe or diagram is too elaborate, it will impinge on the design. Let the decision-makers focus on the content, navigation and what-goes-where, rather than muddying the process with filler graphics.

Moving On: The Button That Launches a Thousand Ships

So you’ve dodged all potential problems so far. The die is cast, and the plan is laid. It’s time to start designing and building the website. Do you have to start over now, or will your plans accelerate the process? It’s been said before, but a plan that has no momentum is wasted. If you have to retype, reorganize or re-explain your plan in order to start the next step, you’ve been wasting time.

A great design process builds on the website’s content. A great process allows you to build on the last step. To be cost-effective and efficient, the process should include only the critical steps. An awkward transition from planning to building a website is a common roadblock. Frequently, the people who plan a website and communicate with the client aren’t the people who actually build the website. This means that the planning documents have to be expressive and comprehensive in conveying the process that has been followed to date.

Avoid costly revisions and staff frustration by having a process that slingshots you into development rather than requires backtracking and further investigation. Sure, the process should be fluid, but a good plan ensures momentum.

A Few Parting Practical Tips

  • Be specific about your wants with clients. Ask for digital text, Web-sized images, etc.
  • Keep all deliverables in one place, and put them there as soon as you get them!
  • Ask for written changes, preferably via email so that they’re time-stamped.
  • Use Google’s advanced site search to quickly learn about the current website’s size and shape if your project is a redesign.
  • Ask your client for access to old stats. Learning how people have been accessing content is important if you will be planning a new website.
  • Avoid being too specific in the early stages. Work from general to specific, and don’t get bogged down in details until they become important.

Wrapping Up

As professionals, we need to embrace better planning methods in our projects. Being agile is great, but don’t outrun your client or the goal of the project. True agility is about being adaptable and reacting quickly. Planning a website is a daunting task, but it can be done if you stick to a process that works.

  • Understand the goals of the website.
  • Gather resources.
  • Organize resources at top level and then at page level.
  • Assess your work based on user profiles.
  • Demonstrate your plan.
  • Get approval.
  • Move on.

So many of us design too fast. You need to make so many decisions before working on a visual wireframe or pixel-based mockup. If you start designing before understanding the breadth and depth of the content that your website will contain, you’ll inevitably have to cram stuff into places that it doesn’t fit.

Building a website is like telling a good story. It starts with a cohesive outline and clear plot. No matter how fantastic your website looks or works, eventually someone will read it. Someone will have to navigate it. Truly great websites pay attention to content and organization. There’s no way to fake that late in the game. Greatness comes from a solid plan.

(al)


© Kristin Wemmer for Smashing Magazine, 2010.

The Ultimate Guide To Cloning In Photoshop

Photoshop’s wide array of cloning tools is the cause of many of the absolute best and worst works created with the application. In a skilled and experienced hand, these tools lead to phenomenal results. In the hands of a careless artist, Photoshop cloning can be disastrous to the credibility of the result. This article introduces the several cloning tools available in Photoshop and goes over the proper usage and best practices of each.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

The Clone Stamp Tool

The Clone Stamp tool is the oldest and most widely known of the cloning tools. The basic concept is that you duplicate certain portions of an image using a source, destination and brush.

2-sourceset in The Ultimate Guide To Cloning In Photoshop
Use the “Option” key (”Alt”) to set the source.

To clone out the name on the tombstone above, you would select a source that shares the texture of the area you want to replace. In this case, the area around the words provides an ample source of stone texture from which to clone.

To begin, simply click on the preferred source area while holding down the “Option” key (”Alt” on a PC). Then, with no keys held down, begin painting over the area you want to replace. The image area from the source will be transferred to the destination.

To be able to use this tool effectively, let’s look at the relevant settings.

Basic Settings: Brush

Below, you’ll find the default settings when the clone stamp is selected.

1-clonestamp in The Ultimate Guide To Cloning In Photoshop
The clone stamp’s basic settings.

The first setting you’ll want to familiarize yourself with is for the brush. Photoshop does not restrict cloning to a basic default brush. Instead, it allows you to use any brush you want, allowing you to create an unlimited number of effects. In the example above, and in most cases in fact, a small to medium-sized round soft brush gives the best result.

3-hardvssoft in The Ultimate Guide To Cloning In Photoshop
A hard brush creates noticeable seams.

As you can see, a hard brush often creates visible edges along the path of the clone. The transition is much smoother on the left side, where a soft brush was used. Both sides suffer from noticeable replication, but this was intentional to exaggerate the cloned area. We’ll discuss how to avoid this later.

As stated, while a soft round brush is recommended for basic cloning, a number of interesting effects can be created using alternate brushes. For instance, below I’ve used a scatter brush shaped like a leaf to add some visual interest to the photo.

4-scatterbrush in The Ultimate Guide To Cloning In Photoshop
Use a scatter brush to create interesting particle effects.

Experiment with the opacity, blending mode and brush flow for an even wider variety of results. For more information on using these features, check out the article “Brushing Up on Photoshop’s Brush Tool.”

Basic Settings: Sample

Under the “Sample” menu are three options: Current Layer, Current & Below and All Layers. These options affect the area you are sourcing. Here’s a visual illustration of how each mode works:

5-sample in The Ultimate Guide To Cloning In Photoshop
The area cloned depends on the selected layer and sample mode.

As you can see, with Current Layer selected, the clone stamp ignores pixel data contained in any other layer. Conversely, All Layers ignores all layer distinction and clones any visible pixels in the document (invisible layers will be ignored). Finally, Current & Below samples pixels from the selected layer and any visible layers behind it.

Basic Settings: Adjustment Layers

The final basic setting (the circle with a diagonal line through it) lets you decide whether the clone stamp tool should sample adjustment layers when cloning. Adjustment layers, such as Hue/Saturation and Levels, are meant to be a non-destructive way to change the appearance of layers. So, you can make drastic changes to a layer or group of layers without destroying the original pixels.

Because of this, turning on Ignore Adjustment Layers When Cloning is almost always a good idea. This allows you to clone the original image, which can then be affected by an ever-changeable adjustment layer. If you do not choose to ignore the adjustment layer, the adjustment becomes permanent in the cloned areas.

In the layer set-up below, turning on Sample All Layers would by default clone pixels from both the background layer and the adjustment layer in the foreground. Turning on Ignore Adjustment Layers prevents this.

6-adjustmentlayer3 in The Ultimate Guide To Cloning In Photoshop
You can choose to ignore adjustment layers when cloning.

The Spot Healing Brush

As you can see below, the Spot Healing Brush tool is located under the Eyedropper tool and above the Brush tool, and it can be accessed quickly by hitting J on the keyboard.

7-spothealingbrush in The Ultimate Guide To Cloning In Photoshop
Type J to bring up the Spot Healing Brush.

The Spot Healing Brush is by far the simplest cloning tool in Photoshop. With little to no experience, you can repair small areas of an image. The secret to using the tool is in the name: Spot Healing. The tool is intended not for large areas of replacement, but rather to remove little unwanted spots, such as a scratch on an old photograph or a mole on a person’s face.

To use the tool, simply hover over the area you want to replace and click once. Photoshop does all the work by examining the pixel data around the spot and seamlessly integrating the data into the destination.

9-beforeafter in The Ultimate Guide To Cloning In Photoshop
The Spot Healing Brush is perfect for repairing old photographs.

As you can see above, the tool does a remarkable job of not leaving behind any noticeable artifacts or repeating patterns. The trick is to go slowly and work on very small portions of the image. Select a spot to fix, and use a brush that’s only slightly bigger than the selected imperfection. The larger the brush, the more likely you are to clone unwanted portions of the surrounding area, and the more noticeable the repetition of pixels will be.

8-smallbrush in The Ultimate Guide To Cloning In Photoshop
Use a brush slightly bigger than the target spot.

The Healing Brush

The Healing Brush tool, located under the Spot Healing Brush tool, is very similar to the Clone Stamp tool. To begin, Option + click (Alt + click on a PC) to select your source, and then carefully paint over the destination to transfer the pixels. The Healing Brush performs this operation with more built-in intelligence than the Clone Stamp.

As with the Spot Healing Brush, the Healing Brush attempts to automatically blend in the cloned pixels with the environment around it.

11-puppyface in The Ultimate Guide To Cloning In Photoshop
The Healing Brush tool automatically blends the source with the destination.

As you can see, using the Clone Stamp to clone the puppy’s eye results in a straight copy of the pixels, while the Healing Brush does a much better job of blending with the background.

This built-in intelligence proves extremely helpful when cloning a subject with diverse colors, textures and lighting conditions. Using the Clone Stamp in these situations can leave you with a lot of noticeably patchy spots that really stand out from the surrounding area.

10-facefix in The Ultimate Guide To Cloning In Photoshop
The Healing Brush Tool makes it easy to clone visually complicated areas.

The photograph above is a good example of a subject with a fairly complicated surface. Using the Clone Stamp tool would have made it quite difficult to paint over the cracked areas while retaining the integrity of the stained stone. Much of the discoloration would have been sacrificed as you sourced smoother areas to erase the cracks. However, the Healing Brush was able to effectively replace the cracked areas with smoother areas, while sampling from the surrounding area to replicate the stains.

The Patch Tool

The final healing tool we’ll examine is the Patch tool, which can be found under the Healing Brush tool, as seen below.

12-patchtool in The Ultimate Guide To Cloning In Photoshop
Tip: hit Shift + J to cycle between the tools in the fly-out menu.

The cloning tools we’ve examined so far are best when used meticulously on small portions of an image. By contrast, the Patch tool is the best way to clone large, relatively uniform areas. As with the other healing tools, the Patch tool not only performs a straight clone but attempts to blend in the edge of the selected area with the target environment.

To use the Patch tool, either make a selection with any of the selection tools, or simply select an area with the Patch tool’s built-in lasso. There are two modes to choose from for the behavior of the patch: “Source” and “Destination” (found in the menu bar above the document area).

Source Mode

With the source mode selected, first select the area of the image you want to replace, and then drag that selection to the area you want to source. For instance, to eliminate the golf ball in the image below, you would first select the area around the golf ball, and then drag that selection around to find the best source.

13-source in The Ultimate Guide To Cloning In Photoshop
In source mode, first select the area you want to replace.

As you drag the selection around to find a suitable source, watch the destination (i.e. your originally selected area) for a preview of what the source pixels will look like in that area. Keep in mind that this preview is a straight clone without any blending (the final image will look much better). Release the selection to see the actual result.

14-noball in The Ultimate Guide To Cloning In Photoshop
The Patch tool’s result.

As you can see, it does a pretty impressive job of blending the source and destination pixels all on its own. But going over areas that need improvement with the Healing Brush is good practice.

Destination Mode

With “Destination” mode selected, the area you select first will be the area that is replicated elsewhere. For instance, if we start with the same selection as before, dragging the selection this time gives us a preview of copying the ball to a new location.

15-destination in The Ultimate Guide To Cloning In Photoshop
Patch tool destination mode.

After you release the selection, the golf ball is copied to a new area of the image and blended with the surrounding pixels.

16-twoballs in The Ultimate Guide To Cloning In Photoshop
Result of “Destination” mode.

The Clone Source Palette

The Clone Source palette (found under Window → Clone Source) is an invaluable resource for professional-quality cloning. This tool gives you much more control over the results and functionality of the Clone Stamp and Healing Brush.

The Clone Source palette contains three primary sections: cloning source, offset adjustment and overlay options.

17-clonesource in The Ultimate Guide To Cloning In Photoshop
The Clone Source palette.

Cloning Sources

In the first section in the Clone Source palette, you can define multiple areas of an image as a source from which to clone and/or heal.

18-sources in The Ultimate Guide To Cloning In Photoshop
Defining multiple sources.

The image above illustrates an example of when you might want to define multiple sources. To save a source, click on one of the five source buttons, and then Option + click (Alt + click) with either the Clone Stamp or Healing Brush. That location will now be saved to that button. Now, select the next button in line, and do the same in another part of the image. Once your sources are loaded, you can quickly shift between them simply by clicking the related button.

Notice that the file name appears just under the clone source buttons. This is because you can actually select a clone source outside of the image that you’re working on. Simply open a different file and set the clone source. Then, when you go back to the primary file to paint with the Clone Stamp or Healing Brush, the pixels from the other image will function as the source of the clone.

Offset Options

The second section of commands in the Clone Source palette really increase the variety of cloned results available to you. You can set exact coordinates for the source, change the size of the cloned result relative to the original source, tweak the rotation of the result and set a precise offset (again, relative to the original source).

19-hayclone in The Ultimate Guide To Cloning In Photoshop
Tweaking the cloned results.

You can see these transformation effects in action in the example above. The two bails of hay are actually one and the same, but they look considerably different because of the offset options. First, I set both the width and height to 90%, so that the cloned bail would appear slightly smaller than the original. Then I changed the width to -90% to flip the clone horizontally (you could change the height to a negative number to flip the image vertically). Finally, I set the rotation to 10° to give the illusion of a small hill.

Overlay Options

The overlay options are among the most helpful features in the Clone Source palette. Years ago, cloning involved a lot of guess work because it was difficult to tell exactly what the selected sample would look like without actually applying it. The guesswork has been eliminated with the “Show Overlay” command. When “Show Overlay” is selected in conjunction with the “Clipped” option, your brush is shown with a preview of the clone source inside. This is extremely helpful when attempting to clone inorganic areas with straight edges, such as a brick wall.

20-overlay in The Ultimate Guide To Cloning In Photoshop
An overlay of the source is displayed within the brush.

Note that if you choose to turn on the overlay but turn off “Clipped,” then your entire clone source layer will be shown surrounding the brush.

21-notclipped in The Ultimate Guide To Cloning In Photoshop
An overlay of the source is displayed within the brush.

Working this way is actually quite difficult because the source significantly blocks your view of the destination. But if you prefer it, try reducing the opacity of the overlay so that you can see the image below.

Vanishing Point

Vanishing Point takes cloning to an entirely new dimension, literally. The tool makes it possible to set up primitive planes across your artwork, which a clone then follows to simulate a three-dimensional space. Vanishing Point has a ton of features and potential applications, and it really merits its own entire article, so this will be just a brief introduction.

When you open up the Vanishing Point dialog (found under the “Filter” menu item), you’ll see a large preview of your image, along with a small set of tools on the left side.

22-vanishingpoint in The Ultimate Guide To Cloning In Photoshop
The Vanishing Point dialog.

Grab the tool sitting second from the top to set up your initial plane. With this tool, click once on each of the four corners, outlining the desired plane. Once you’ve created an initial plane, you can Command + click (Control + click on a PC) to extend the plane perpendicularly. Some images, though, like this old barn, won’t have perfect angles. In this case, you’ll have to create a second plane, entirely distinct from the original.

23-twoplanes2 in The Ultimate Guide To Cloning In Photoshop
Setting up planes.

Once you’re satisfied with the planes, grab the Clone Stamp (fourth from the top), and Option + click the desired source (in our case, the barn door). Then clone the door onto the front-facing wall using the same method you would use with the normal Clone Stamp tool. Turn “Healing” on in the drop-down menu above the image preview to ensure that the source is properly blended into the destination.

24-vp-result2 in The Ultimate Guide To Cloning In Photoshop
Vanishing Point result.

As you can see, Photoshop interpreted the planes fairly well. Some fine-tuning and clean-up are definitely necessary if we want a believable image; but overall, the result is extremely impressive, given the lack of work required.

5 Quick Tips For Better Cloning

Now that we’ve examined each tool in depth, let’s close by recalling a few things to keep in mind if we want to clone with professional results.

Take Your Time

As you undertake a cloning project, the quality of the result is directly proportional to the amount of time you put into it. Cloning photographic details can be incredibly tedious work. The world has become well acquainted with Photoshop magic, so never assume that no one will notice your blunders.

Duplicate the Active Layer

The very first step to take when cloning parts of an image is to duplicate the layer you’ll be working on (or to just work on a new transparent layer). Realizing that you made a mistake so long ago that your “Undos” don’t go back far enough to fix it is beyond frustrating. Keeping the original image on a hidden layer gives you the flexibility to revert any part of an image to its original state.

Be Selective With Your Tools

Each cloning tool has its strengths and weaknesses, as outlined above. Never arbitrarily grab a tool and stick with it for the duration of a project. Consider which tool is best suited to the particular area of the image you’re working on. On large projects, no single tool creates believable results on its own. Use two or more tools in synergy to achieve a realistic result.

Watch for Obvious Duplication

25-grass in The Ultimate Guide To Cloning In Photoshop
Sloppy cloning results in noticeable patterns.

If you’re not careful, duplicated pixels can become painfully obvious. This is especially true of areas that should look fairly organic, like the grass above. Instead of appearing natural, an obvious pattern emerges when you use the same section of an image over and over. To avoid this, make heavy use of the Clone Source palette. Use multiple sources; and change the size, rotation and orientation of the areas you’re cloning to give the illusion of an unmanipulated image.

Avoid Disasters

When retouching significant parts of an image, overlooking certain areas becomes all too easy.

26-disaster in The Ultimate Guide To Cloning In Photoshop
Where did her leg go!?

If you’re not careful, you could eliminate enough vital body parts to make the image humorous. Your goal is to prevent your work from showing up on Photoshop Disasters, which is where you’ll find the image above.

Conclusion

Cloning in Photoshop is a difficult task that requires significant time, studious attention to detail and an in-depth knowledge of several tools and commands. To improve the quality of your results, invest some time learning Photoshop’s entire cloning arsenal. Experiment with all of the options for each tool to get a better feel for where you can excel.

Additional Resources

(al)


© Joshua Johnson for Smashing Magazine, 2010.