Gráficos de produtos 6 Técnicas para tornar as imagens mais informativas

Web designers se tornaram muito habilidosos com técnicas de marketing. Atrair o conteúdo da página é sempre bom, mas quando se trata de chamar a atenção dos visitantes, as imagens são a forma mais popular de mídia. Eles não exigem som como vídeos de demonstração e podem transmitir rapidamente informações importantes em questão de segundos. Pode parecer fácil, mas existem algumas técnicas notáveis ​​para construir imagens informativas em sites.

Estes incluem rótulos de recursos, capturas de tela em close-up, comparações de preços e outros detalhes minuciosos. Os designers da Web podem usar gráficos de informações para modelar novos aplicativos, softwares, videogames ou muitos outros produtos! Embora mais comumente você veja essas técnicas utilizadas em diferentes campos da tecnologia.

Confira as ideias abaixo, onde oferecemos não apenas dicas, mas exemplos da vida real de belos gráficos de produtos cheios de ótimas informações.

1. Expandir o seu conteúdo

Imagens informativas não devem ser usadas no lugar de um bom conteúdo de página da web. Em vez de use imagens para expandir seus pontos-chave e ilustrá-los claramente para seus visitantes. Uma das melhores maneiras de fazer isso é construindo uma pequena demonstração para destacar áreas importantes de um tutorial. Com alguns gráficos informativos e capturas de tela, é muito mais simples manter o interesse do leitor em cada etapa.

Quando você tenta demonstrar um tutorial de software (como o Photoshop), pode ser difícil transmitir a mensagem para o texto escrito. Os visitantes vão pousar em seu artigo e imediatamente começarão a julgar subconscientemente o material em uma fração de segundo. Web Designer Wall tem um tutorial fantástico sobre a construção de imagens arredondadas CSS3 acompanhadas por um gráfico acessível. Isso inclui alguns rótulos e uma foto em close do efeito.

Na página do artigo original, esta imagem adiciona uma imagem muito mais clara à sua cabeça em relação ao que você estará criando. O autor adicionou um pequeno link de demonstração, mas por que não incluir algumas imagens de demonstração? É muito mais provável que você chame a atenção com um vídeo de demonstração devidamente rotulado.

Tente evite adicionar imagens apenas por causa do conteúdo de mídia no seu post. Se você puder explicar seus métodos ou raciocínio sem uma imagem, comece aqui primeiro. Somente depois de rever a sua cópia da web, você deve considerar reiterar alguns pontos em um gráfico de imagem detalhado. Especificamente, você pode encontrar tutorial requer mais dicas visuais à medida que a complexidade aumenta. Dois exemplos podem incluir a criação de um banco de dados de um site ou um conjunto de dados de tabela.

2. Realce recursos notáveis

Como cada peça de software / tecnologia terá tantos recursos, é quase impossível explicar cada bit. Não apenas isso, mas é altamente improvável que seus visitantes estejam interessados ​​em ler mais de 20 rótulos em seu gráfico de informações. Atenha-se aos recursos mais interessantes e use rótulos para explicar um pouco mais a fundo.

Ao escrever a cópia da Web para o conteúdo da sua etiqueta evitar linguagem sem graça quando possível. Se os visitantes estiverem olhando para a versão mais recente do seu aplicativo, eles podem não se importar muito com as mudanças no esquema de cores. Como isso afetará seu fluxo de trabalho diário? Em vez disso talvez destacar o que é benéfico para eles, como um novo painel de interface ou conectividade multi-usuário. Estes devem ser geralmente recursos abstratos que você não pode ver apenas por “olhando” no produto.

Ter esse rótulo para explicar esses recursos imediatamente fornecerá a resposta mais abundante. Os visitantes sentirão que estão sendo tratados como compradores inteligentes e maduros, capazes de tomar suas próprias decisões. Se eles realmente gostarem dos seus recursos, isso dará um impulso maior para a compra do seu software ou produto.

Abaixo está um exemplo da página de atualização do Mozilla Firefox.

Você pode ver que os designers usaram linhas curvas pontilhadas para apontar rótulos e novos recursos. Estas são, na verdade, imagens de fundo posicionadas absolutamente dentro de um contêiner div. Surpreendentemente, todo o texto do rótulo também é escrito dentro de tags HTML (não apenas uma imagem grande).

Acho que esse método não é útil somente para os robôs de rastreamento do Google, mas também para os usuários de dispositivos móveis que normalmente não conseguiam acessar a página inteira.

Observe também como o recurso Panorama está à esquerda oferece um pequeno “Saber mais” ligação. Esta é possivelmente a melhor prática em que você pode entrar ao construir gráficos de informação! Se você tiver páginas ou âncoras alternativas na mesma página, seus visitantes poderão clicar nesses links para entender mais sobre recursos complicados.

Lembre-se de que gráficos informativos são usados ​​para exibir facilmente teasers e recursos de produtos para seus visitantes. Então, embora você esteja limitado no espaço em torno do gráfico, você pode sempre oferece a chance de aprender mais em uma página externa.

3. Etiquetas Simples e Não-intrusivas

Rótulos são realmente o aspecto mais importante na criação de gráficos de produtos informativos. Os visitantes provavelmente precisarão entender diferentes áreas em seu produto, software, sites, aplicativos móveis etc. Infelizmente, o uso de tabelas e listas com marcadores pode ir tão longe. Quando você realmente precisa explicar os recursos do produto, é importante escolher hotspots para rotulagem.

A Apple Computers é possivelmente o melhor exemplo de detalhes de rótulos simplistas. Você pode perceber essas técnicas exatas em seus gráficos ao examinar tablets, laptops ou o iPhone infame. Suas características e especificações técnicas são geralmente as mesmas de outros fabricantes de computadores de grandes marcas. No entanto, seus modelos gráficos são tão originais que os produtos estão praticamente se vendendo.

Observe que quando você quebra o processo é muito mais simples do que você imagina! Gráficos de produtos são apenas uma parte padrão do design geral do site. Mesmo que você esteja vendendo fertilizantes ou lençóis ou cartões comerciais, você pode usar essas técnicas de rotulagem em bom uso. E embora a Apple tenha alguns gráficos informativos realmente simplistas, eles não são a única empresa a fazê-lo. Experimentar Pesquisando por empresas no seu nicho para ver se eles exibem etiquetas informativas ou teaser no site deles.

4. Imagens com Conteúdo Dinâmico

Para alguns desenvolvedores da Web, pode não ser suficiente simplesmente criar um gráfico rotulado de seu software. Pode haver muitos recursos exclusivos que você deseja examinar, mas conter dentro de uma pequena parte de sua página da web. É possível construir uma série de etapas introdutórias Liderando visitantes em uma pequena demonstração de produtos.

Newsberry ilustra elegantemente um exemplo disso. Na sua home page, você notará uma área de blocos com uma pequena mini-navegação por baixo. Eles incluem 5 etapas ao longo do processo com diferentes capturas de tela e alguns textos descritivos que acompanham. Mesmo que você não tenha ideia do que o Newsberry é usado, conteúdo introdutório explica as coisas muito claramente. Você ainda tem alguns links de demonstração em toda a série de slides.

Conforme você percorre seu conteúdo, percebe que muitos slides contêm capturas de tela dentro de uma pequena janela do navegador. Este efeito é realmente muito simples de imitar! Você só precisa encontre uma imagem para usar como imagem de fundo e redimensione as imagens para caber dentro. Concedido este efeito não vai funcionar para todos os produtos, mas é uma boa maneira de enquadrar telas de um aplicativo da web.

5. Limpar Screenshots e Fotos do Produto

É possível incluir todos os melhores rótulos e recursos para seus produtos, mas ainda assim perder as vendas. o screenshots e fotos que você escolhe para o seu gráfico são tão importantes quanto todos os detalhes. No Windows e no Mac OS X, há maneiras de tirar screenshots de toda a sua área de trabalho com atalhos de teclado. Usando este método combinado com algum tempo no Photoshop você pode acumular demonstrações de recursos muito interessantes.

Se o seu produto é muito complicado, você deve tentar juntar algumas imagens diferentes. O exemplo acima do site do Tweetbot usa círculos azuis para indicar uma ação de toque no aplicativo. Em vez de uma única captura de tela com muitos rótulos, considere o uso de uma pequena galeria de imagens do jQuery para combinar de 3 a 5 gráficos diferentes. Isso lhe dá mais oportunidades para foco em diferentes perspectivas do produto enquanto os visitantes são oferecidos uma experiência muito mais rica.

Quando tira uma foto do seu PC ou smartphone, a imagem é sempre salva com zoom de 100%. Editores de imagem como o Photoshop têm a capacidade de redimensioná-los, mas muitas vezes perdem detalhes. Então, como você pode encaixar esse gráfico em seu pequeno site? Uma das melhores técnicas é ampliação em que você dimensiona o aplicativo e cria seções ampliadas das partes mais importantes. Essa técnica é vista mais comumente em software do que em produtos físicos - detalhei o processo de design abaixo.

6. Construindo um efeito de "Lente de Zoom"

Eu vou estar construindo os passos para construir um efeito de lupa no Adobe Photoshop. Se você estiver usando outro editor gráfico, provavelmente poderá executar as mesmas tarefas, mas os menus e comandos serão diferentes.

Um dos melhores exemplos dessa técnica está na página inicial do aplicativo Things for Mac. O gráfico tem o aplicativo reduzido para que caiba perfeitamente na página, junto com uma pequena sombra projetada. No entanto, em algumas das áreas importantes, você notará um círculo com o conteúdo interno muito maior. Eles até adicionaram um brilho interno branco para aparecer como uma luz refratada brilhando através de uma lente.!

Bônus: "Lente Zoom" Efeito Photoshop Tutorial

Para começar, pegue uma captura de tela que você gostaria de usar para seu gráfico. Eu tirei uma tela rápida da home page do Hongkiat. Eu vou cortar apenas a janela do navegador e redimensionar para cerca de 700px. Você deve redimensionar a largura para caber dentro da área de conteúdo do seu próprio site. Agora faça uma nova camada sobre este fundo e faça uma seleção circular enquanto segura o turno para mantê-lo proporcional. Preencha com qualquer cor que você quiser.

Passo 1

Mantendo o círculo selecionado, altere o% de preenchimento no painel de camadas para 0%. Sob a camada FX, adicione um traço preto de 1px-2px e um brilho interno branco. Você pode reduzir a opacidade para menos iluminação branca.

Passo 2

Ainda mantendo o círculo selecionado, mova-se para a sua camada de fundo e pressione ctrl (Para o usuário Mac, é o comando ou a tecla cmd.) + c para copiar. Em seguida, faça uma nova camada acima do plano de fundo, mas abaixo do círculo de ampliação e cole. Você pode, alternativamente, apenas pressionar ctrl + j para duplicar uma nova camada com apenas a seleção in-tact.

Pressione ctrl + t para abrir a ferramenta de transformação. Agora dimensione a nova camada duplicada enquanto segura mudança manter tudo proporcional e alt manter o centro estacionário.

etapa 3

Pressione ctrl e clique no ícone da camada de lupa para fazer sua seleção novamente. Note que você ainda deve estar destacando a camada de fundo duplicada no painel de camadas (a que está diretamente sob nossa lupa), o que significa que ela terá um fundo azul claro.

Pressione Ctrl + Shift + i para inverter a seleção atual. Agora, clique em excluir para limpar o lixo extra da captura de tela redimensionada. Para um pouco de efeito adicionado, abra o menu FX da camada para adicionar uma pequena sombra projetada. Você também pode desenhar uma linha vertical fina de 1 px e usar o Filtro Liquify (Filtro> Liquify) crie uma alça pequena!

Conclusão

Para projetar gráficos fantásticos de produtos, você deve se lembrar do básico. Os visitantes simplesmente querem entender o que você está tentando vender! A maneira mais fácil de obter essas informações é através de uma série de capturas de tela ou um único gráfico detalhado. As etiquetas são apenas a segunda peça deste quebra-cabeça, onde você pode descrever os conjuntos de recursos mais importantes.

Quando você unir todas essas técnicas, provavelmente começará a notar o quadro maior. Os downloads e as compras vão disparar - especialmente se você colocar seus gráficos no centro e na frente da sua home page. Essas técnicas são perfeitas para designers gráficos e web começarem no campo do design de produtos. Nós detalhamos algumas ideias abstratas, mas gostaríamos de ouvir seus pensamentos na área de discussão abaixo!