A evolução do design de ícones

A Tecmundo, através de um infográfico, apresenta a história dos ícones. Sempre vale a pena ampliar o conhecimento.

Clique aqui para ver o infográfico.

Novidades no portfolio

Olá pessoal, meu portfolio digital está com novidades!
A marca Mimos e Gostosuras, especializada em cupcakes agora tem uma identidade visual. Após um rápido briefing junto ao cliente, a marca foi desenvolvida.

No espaço "Digitais" você encontra algumas novidades: o site do grupo teatral Os Levianos, o site Nas Ondas da Educação, para a Prefeitura de Guarujá, o site da Secretaria de Educação de Caçapava, o site da APS Nobreaks e as telas para o jogo Malhando a Caixola, disponível para Windows 8.


É isso, continuem acessando, em breve mais novidades! Valeu!

Livro: Design Thinking - Inovação em Negócios

Embora o nome “design” seja frequentemente associado à qualidade e aparência estética de produtos, o design como disciplina tem por objetivo máximo promover bem-estar na vida das pessoas. No entanto, é a maneira como o designer percebe as coisas e age sobre elas que chamou a
atenção de gestores, abrindo novos caminhos para a inovação empresarial.

O designer enxerga como um problema tudo aquilo que prejudica ou
impede a experiência (emocional, cognitiva, estética) e o bem-estar
na vida das pessoas (considerando todos os aspectos da vida, como
trabalho, lazer, relacionamentos, cultura etc.). Isso faz com que sua
principal tarefa seja identificar problemas e gerar soluções.

Design Thinking se refere à maneira do designer de pensar, que utiliza um tipo de raciocínio pouco convencional, o pensamento abdutivo. Neste tipo de pensamento, busca-se formular questionamentos através da apreensão ou compreensão dos fenômenos, ou seja, são formuladas perguntas a serem respondidas através de várias técnicas. Seguem algumas das principais etapas deste processo:

Imersão: diversas formas de pesquisa sobre o projeto e seus usuários, dentre elas, pesquisa exploratória, desk, entrevistas, um dia na vida, sombra, etc.
 
Análise e síntese: cartões de insight, mapa conceitual, personas, jornada do usuário, etc.
 
Ideação: brainstorming, workshop de cocriação, cardápio de ideias, matriz de posicionamento.
 
Prototipação: protótipo em papel, modelo de volume, encenação, storyborad, protótipo de serviços.

Para saber melhor, indico a leitura detalhada deste livro.

UI e UX Design: Qual a diferença?

Este post vem do Design Blog, por Dalton Silveira.

De um modo simplificado, podemos dizer que em um projeto de um carro, por exemplo, a interface (também chamado de User Interface, Interface de Usuário ou apenas UI) é toda a parte parte “física” do veiculo; ou seja, a forma. Já a experiência (ou User Experience, UX) é o prazer que o veiculo te proporciona ao dirigi-lo; ou seja, a sua experiência de uso do veículo.

Trocando isso para a nossa realidade como web designers, na criação de um site o UI Design é o “desenho do site” ou o conhecido mockup do site, enquanto o UX Design é toda a parte de interação e comportamento do site.

Ainda sobre UX Design, segundo o autor Unger em seu livro “A Project Guide to UX Design”, design de experiência do usuário é a criação e sincronização dos elementos que afetam a experiência dos usuários com um produto. Com isso é possível influenciar suas percepções e comportamentos.

Mas afinal, o que está dentro do que? UX faz parte do UI? Ou UI faz parte do UX?

Para responder essa pergunta, Dan Staffer criou um modelo de orbita interessante que explica exatamente como funciona:

Na imagem acima podemos perceber que o UX engloba todas as áreas, contudo na realidade ele só agrega a todas porque sem as demais não existe experiência do usuário.

Ou seja, de acordo com Unger, um User Experience Desinger (UX Designer) precisa ter conhecimento sobre o design de interface (UI), mas o UI Designer não precisa ter conhecimento de UX.

Design de Embalagens - Dicas

Com 2/3 das decisões de compra sendo decididas no ponto-de-venda e a publicidade convencional perdendo credibilidade, algumas outras áreas do marketing estão ganhando mais espaço. Como melhor atendimento, CRM, lojas mais bem pensadas e embalagem.

• Embalagem visível. Contraste é a chave. Quando todas as marcas gritam na gôndola, simplicidade pode funcionar. DICAS: Grandes pedaços de uma cor só, logomarca grande cercada de espaço em branco. EX: Kuat.


• Embalagem útil. A quantidade de opções é cada vez maior. Por isso, marcas inteligentes vão além da sua categoria. O que define sua posição é a utilidade, especialmente se um produto serve para várias coisas. DICAS:  layout consistente e fácil de comparar. EX: Ilhas, produtos de categorias diferentes próximos uns dos outros, produtos no caixa.


• Embalagem com diferenciação. Não é segredo que boa parte das decisões são tomadas com base em fatores emocionais e intuitivos. Sendo assim, a embalagem precisa conter os fatores-chave da marca. DICA: o design precisa ser mais eficiente (mostrando fatos) ou mais saudável ou mais autêntico (único) ou mais moderno que a concorrência à primeira vista.


• Embalagem com uma única mensagem. Assim como na propaganda, ou você diz uma coisa ou o consumidor não assimila nada. DICA: Mais informação, não fará o consumidor gastar mais tempo lendo, apenas diluirá a mensagem principal.


• Embalagem para aumentar o consumo. Como a história da pasta de dente cujo o consumo aumentou depois que mudaram o tubo, fazendo sair mais pasta. Ou como a nova embalagem Heinz citada no começo do post que aumentou o consumo em 68%. Embalagem eficiente é que aumenta vendas e se aumenta vendas, aumentando consumo. DICA: Criação de embalagens “prontas pra consumo”, fáceis de estocar e que evitam desperdício. EX: embalagem quadrada de cereal.


• Embalagem sustentável. As pessoas querem fazer o certo. Seja por anseios próprios ou por receio do que os outros vão pensar. Em muitos casos, é uma relação ganha-ganha. A empresa economiza e o consumidor compra algo ecologicamente correto.

Confira mais dicas em:
http://aulas.pro.br/paulo/?p=1784
http://www.sebraedesign.com/dicas-para-empresarios/projeto-de-embalagem/

On ou Off?

Feliz 2013 para todos! E para começar o ano no blog, apresento um vídeo que vale muito a pena conferir.

Você passa grande parte do seu dia em frente ao computador e ao voltar para casa continua utilizando-o? Não desgruda do seu celular, tablet…Checa as suas redes sociais a cada minuto e sente-se perdido quando fica sem sinal de celular ou internet?


O post de hoje traz uma reflexão sobre o on e o off - e o quanto a correria diária afasta as pessoas. O vídeo abaixo traz alguns pontos importantes sobre esta reflexão.

Sou totalmente a favor da tecnologia e das redes sociais, mas estar com pessoas é infinitamente melhor.

Novidades no portfolio

Fala povo, meu portfolio digital está com novidades!
Depois de um estudo detalhado, junto ao cliente, foi desenvolvido uma marca para a Casa de Carnes Estrela do Sul, na Vila Ema, representando muito requinte, tradição familiar e confiança que a casa transmite a seus clientes desde 1976.

No espaço "Digitais" você encontra três novidades: o site da Rede Calux de Supermercados, o site da Solum e um branding digital para o Workshop de Tecnologia da Planeta Educação.

Na área "Experimentais" foi colocado mais uma ilustração, entitulada de "Cereal Killer", que já foi produzida em camisetas.

É isso, continuem acessando, em breve mais novidades! Valeu!

Como as cores afetam as compras?

Você já parou para pensar qual é o grau de influência que uma cor representa em nosso dia a dia, e o quanto ela pode nos persuadir a comprar produtos e serviços?

Com esse infográfico criado pela Kiss Metrics, podemos ver que as cores têm uma representatividade forte nessa tomada de decisão. Algumas informações importantes extraídas do infográfico:

• 93% dos consumidores decidem a compra pelo visual
• 85% dos consumidores decidem a compra pela cor
• as cores aumentam o reconhecimento de uma maca em 80%

Clique para ampliar.

Dicas para um e-commerce bem desenhado

Grandes sites de comércio eletrônico são aqueles que conseguem conectar um usuário a um produto com um sistema que seja eficiente, fácil e divertido. Pensando neste ojetivo seguem algumas dicas:

1. Facilidade de navegação
O site precisa apresentar sequência e disposição das informações de forma com que o usuário navegue de forma natural e rápida. Os caminhos devem parecer óbvios e guiar os usuários desde a entrada até o caixa (saída) da loja virtual, tirando todas as suas dúvidas.

2. A página inicial é uma vitrine
A página inicial deve ser como uma vitrine de loja de shopping, apresentando os produtos certos, da forma certa e de um modo cativante, sem exageiros. Uma vitrine poluída afasta os clientes.

3. Destacar os produtos da forma certa
Os produtos devem ser separados por segmentos, estilos e até preços, como se fosse o interior de um supermercado bem sinalizado.

4. Hierarquia das informações
Mostrar as informações principais logo no topo da tela de cada produto é fundamental, e na sequência colocar as demais informações, sempre mantendo as informações que são diferenciais do produto em destaque, já que a maioria dos usuários não rolam a tela até seu final.

5. Identidade visual
O website precisa ter uma identidade padrão e coerente com sua logo. Desde textos, destaques, marcações, imagens e detalhes, mas sempre mantendo um bom funcionamento da página.

6. Não abusar de animações e banners
O cliente quer ver e comprar o produto. Banners e animações em excesso atrapalham a usabilidade, criam desvios de atenção na cabeça do usuário e o faz sair da página.  

7. Fotos exemplares
Como o cliente não pegará os produtos em suas mãos, são necessárias diversas fotos do produto, em diversos ângulos, destacando detalhes, texturas e cores.

8. Fácil conclusão da compra
Muitas vezes o cliente quer fazer compra rápida, o website precisa apresentar a opção de finalizar a compra a qualquer momento. Pode ser feito através de um botão que leve o usuário imediatamente ao seu carrinho de compra.

9. Evidenciar o contato
Muitas pessoas sentem segurança em falar com alguém, portanto deixar os contatos bem visíveis é importante.

10 dicas para mudar do impresso para o digital

1. Não odeie a ferramenta
O CSS existe para auxiliar o design a ser repassado para códigos da forma mais fiel possível, embora para alguns detalhes ainda seja limitado. 

2. Padrão pixels
As medidas são diferentes, são mais relativas, adaptáveis e em outras unidades.

3. RGB para hex
É hora de trocar as quatro cores do CMYK. No mundo digital usa-se RGB e/ou hexadecimal.

4. Legibilidade é a prioridade
Deixe os textos fáceis para leitura. Use códigos e fontes compatíveis com monitores e tablets.

5. Comece na posição paisagem
Algumas vezes será necessário fazer o layout de uma página duas vezes: uma para vertical e outra para digital, devido resoluções e formatos de páginas. É mais fácil adaptar o formato horizontal para o vertical.

6. Imagens
Imagens sempre ilustram e dão uma pausa no conteúdo, porém exige atenção para resolução.

7. Tipografia eficiente
O ideal é utilizar fontes padrões para internet, para se adaptar melhor a redimensões de tela.

8. Grids
Pensar e criar considerando grids é fundamental, assim organize suas informações em boxes. Os grids limitam as hierarquias das informações para tablets, que apresentam os conteúdos de forma vertical.

9. Tablet foram feitos para o toque
Evite encher a tela de "clique aqui", pois os usuários tendem a clicar no que acharem que deve ser clicado, isso pode ser definido através de padrões de design e ícones autoexplicativos.

10. Não exagere
Não é só porque o digital permite ações diferentes é que você usá-los. Splashs e banners animados, áudios, filmes, tudo deve ser usado quando houver necessidade e com bom senso. Se tiver dúvida, não use.

Design de newsletter

Use texto sempre que puder
Considerar como o e-mail será visto em primeiro momento (em smartphone, tablet, laptop, etc.) e em que situação (dentro de um trem, na rua, no escritório, etc.), e assim levar em consideração a forma mais complexa e basear-se nela.

Pense na tecnologia
Algumas plataformas não reduzem a escala do tamanho automaticamente, o que significa que 50% da tela não é vista, portanto é importante manter conteúdo sempre à esquerda. 

Use fontes grandes
Os textos devem ser grandes o suficiente para serem clicados com os dedos, e ter um espaço seguro entre eles é importante.

Diferencie botões de ação
As marcas devem ter paleta de cores padrão, mas é interessante reservar uma cor diferente para os botões, tornando-se lógico.

Enfatize as mensagens
Criar uma hierarquia visual bruta através de tamanho e cores para que o olho percorra o design.

Crie um layout com fluxo
Criar divisórias entre os conteúdo, para que o usuário possa acelerar sua busca, pode ser feita por sombras, linhas, cores.

Mantenha o padrão
Faça um bom uso das cores da marca, mesmo onde não tenha a logo, é importante que o usuário saiba onde está.

Crie uma versão apenas em texto
Quanto menos imagens melhor a visualização do conteúdo, já que em muitas situações o e-mail pode ter bloqueio das imagens. Criar padrões para títulos, textos, chamadas, etc. é o ideal.

Que fonte usar no seu site?

Bloqueios criativos

Fala pessoal, passo por aqui para compartilhar um assunto que algumas vezes acontece conosco. Não importa em qual área você atua, mas quem nunca passou por um bloqueio criativo?

Muitos fatores podem influenciar nisso e são claramente agravados mediante à um prazo curto e pressão do cliente.


Motivos que podem gerar os bloqueios criativos:

• stress
• saúde
• preocupações financeiras
• ocupação com assuntos não relacionados ao trabalho
• falta de conhecimento sobre o assunto, ou receio de não saber muito sobre ele
• não saber exatamente o que você quer dizer
• não ter direção
• trabalhos com curtos e mesmos prazos
• desvio de atenção (barulhos, imagens, pessoas, telefones, etc)

Maneiras para quebrar o bloqueio criativo:

• Brainstorming: destacar um assunto e estudá-lo muito, seja em pesquisas em livros, internet e principalmente em conversas com o cliente

• Procure por inspiração: geralmente temos um profissional de referência para consultar seus trabalhos, mas você também pode fazer isso através de leituras, músicas, passeios, filmes, desenhos, cozinhando, etc.

• Leia artigos sobre tópicos específicos: procurar mais informações técnicas sobre o assunto em questão, talvez vendo dados, definições, fluxogramas e infográficos seja possível ter uma percepção  "visual" e diferente sobre o assunto

• Refaça o trabalho de outras pessoas: pegue trabalhos de outros profissionais e os refaça aplicando seu estilo de trabalho, assim talvez possa associar informações e imagens de uma forma que se adapte melhor e mantendo sua linha de design

• Escreva sobre isso: uma outra saída é, após estudar sobre o tema, redigir textos curtos sobre ele, assim você terá uma concisão das características predominantes que mais salientaram aos seus olhos, e nortear o processo criativo

São fatores que podem ajudar ao ponto de vista técnico, quando não se tem muito tempo, vale a pena recorrer à técnica em vez da criatividade pura.

Novo site DUMONQUERO

Fala pessoal, meu novo portfólio online está no ar!

O projeto gráfico atual é simples, com total usabilidade e destaca o conteúdo principal: as peças gráficas.

Outro diferencial é a possibilidade do website ser acessível para a plataforma Apple. É possível acessá-lo em computadores, tablets e smartphones.

Em cada página existe um infográfico com dados exclusivos daquele espaço.

As imagens estão mais visíveis e as atualizações mais contantes.

Para quem quiser dar uma olhada, é só clicar aqui!

E mantendo uma comunicação integrada ao website, o blog do Du Monquero também está de cara nova.

Valeu!

O Poderoso Chefão completa 40 anos

Neste ano "O Poderoso Chefão" completa 40 anos. A trilogia foi dirigida por Francis Ford Coppola, a obra é de Mario Puzo e é um trabalho considerado o mais emblemático do cinema, um show de drama.

A trilogia contou com um elenco de dar inveja contando com Marlon Brandon, Al Pacino, James Caan, Robert Duvall, Diane Keaton, Andy Garcia, Bidget Fonda, Robert de Niro, entre outros. Don Corleone e sua família-equipe foram indicados e vencedores de muitos prêmios do cinema.

Assistir os três filmes é mais que participar de uma grande aula de cinema, é uma obrigação!

Obrigado Coppola.

Para celebrar esta data, deixo aqui algumas curiosidades a respeito da trilogia:

• Brando colocou pedaços de queijo na boca em seu teste para caracterizar-se como Don Corleone.
  

• A responsável pela edição de todos os testes foi Marcia Lucas, esposa de George na época. 
  
  

• Centenas de milhares de dólares foram gastos em testes para o papel principal de O Poderoso Chefão. Todo esse valor poderia ter sido poupado se os produtores tivessem acatado a sugestão inicial de Coppola, Al Pacino, que acabou ganhando o papel.
  
  

• Francis Ford Coppola carregava por toda a parte, em uma bolsa reforçada, um fichário contendo todas as páginas comentadas por ele do livro de Mario Puzo: Poderia ter feito o filme só com ele, afirma. 
  
  

• Outra das manias de Coppola é utilizar membros de sua família em todos os filmes da saga. O maestro responsável pela regência da trilha sonora inesquecível (criada por Nino Rota) é Carmine Coppola, pai de Francis e de Talia Shire (irmã de Coppola que interpreta Connie Corleone). A mãe do diretor aparece como figurante em diversas cenas, bem como os filhos e primos do cineasta. Um filme sobre famílias deve ser feito por uma, disse o cineasta. 
  
  

• Todas as cenas envolvendo música ao vivo possuem músicos de verdade tocando. Nunca é utilizado playback. Coppola acredita que com isso melhora o ânimo dos atores.
  
  

• A cabeça de cavalo na cena na mansão do produtor de Hollywood é real. Foi conseguida em uma fábrica de rações para animais.
  
  
  
• Os tomates da antológica cena com Marlon Brando tiveram que ser importados - mais um gasto supérfluo de acordo com os produtores.
  
  

• Há milhares de detalhes ínfimos em toda a produção. Podemos encontrar desde os pára-choques dos carros da época (feitos de madeira, não de cromo), os adesivos de cota permitida de combustível no vidro dos automóveis até a cor das embalagens de comida chinesa do período retratadas de maneira muito fiel.
  
  

• A utilização do título O Poderoso Chefão - PARTE II, foi bastante ousada para a época, pois nenhuma continuação recebia um número após o nome, fato tão comum hoje em dia.
  
  

• A segunda parte da saga teve uma pré-estréia desatrosa. Ninguém entendeu o vaivém através do tempo e todos os presentes reclamaram que era muito confuso. Com apenas mais duas semanas até que o filme entrasse em cartaz, Coppola e o editor Walter Murch reduziram o número de cenas entrecortadas de 20 para apenas 12, tornando-o um sucesso imediato.
  
  

• No final do segundo filme há uma cena de flashback, em que toda a família está reunida para celebrar o aniversário de Don Vito. Durante as gravações desta cena, Marlon Brando não apareceu, como era o combinado. A solução foi fazer com que todos estivessem esperando ele chegar em casa numa festa surpresa. A seqüência é impressionante, pois mesmo sem Brando, Coppola consegue transmitir sua presença, apenas com o suspense de sua chegada.
  
  

• É dito que Com Coppola, o roteiro é como um jornal. Todo dia há um novo.
  
  
• Para o papel de Vincent (Andy Garcia), os produtores testaram Silvester Stallone e John Travolta.
  
  

• Por ironia do destino, o mesmo Coppola que ia ser substituído no primeiro filme por um diretor de ação, em Poderoso Chefão III teve que minimizar a violência a pedido dos produtores por causa da censura.
  

Tabela de conversão de fontes (Pts, Px, Em e porcentagem)

Fala pessoal, deixo aqui uma tabela muito útil e que torna o convívio entre designers e desenvolvedores web mais amigável, é a tabela de conversão de fontes em Pts, Px, Em e porcentagens. Bom proveito!

Pts	Px	Em	Porcentaje
6pt	8px	0.5em	50%
7pt	9px	0.55em	55%
7.5pt	10px	0.625em	62.5%
8pt	11px	0.7em	70%
9pt	12px	0.75em	75%
10pt	13px	0.8em	80%
10.5pt	14px	0.875em	87.5%
11pt	15px	0.95em	95%
12pt	16px	1em	100%
13pt	17px	1.05em	105%
13.5pt	18px	1.125em	112.5%
14pt	19px	1.2em	120%
14.5pt	20px	1.25em	125%
15pt	21px	1.3em	130%
16pt	22px	1.4em	140%
17pt	23px	1.45em	145%
18pt	24px	1.5em	150%
20pt	26px	1.6em	160%
22pt	29px	1.8em	180%
24pt	32px	2em	200%
26pt	35px	2.2em	220%
27pt	36px	2.25em	225%
28pt	37px	2.3em	230%
29pt	38px	2.35em	235%
30pt	40px	2.45em	245%
32pt	42px	2.55em	255%
34pt	45px	2.75em	275%
36pt	48px	3em	300%

Criar Grids - 100 Fundamentos de Layout

Olá pessoal compartilho aqui uma dica para os profissionais que trabalham com layouts, é o livro Criar Grids - 100 Fundamentos de Layout, de Beth Tondreau. Leitura obrigatória, principalmente para iniciantes, sim, todos somos iniciantes.

Open publication - Free publishing - More design

Logomarca da Especialli Eventos

Olá pessoal, passo por aqui para mostrar a logomarca (e algumas peças gráficas) desenvolvida para a Especialli Eventos, uma empresa de organização e planejamento de eventos em geral.

Resumo do briefing passado pelo cliente:
"Empresa de eventos em geral, desde eventos sociais, como casamentos, festas de 15 anos, bodas, quanto eventos corporativos, como seminários, congressos, feiras, etc. Nosso público-alvo são adultos, homens e mulheres, idade entre 20 e 60 anos, classe média e alta. A empresa tem perfil jovem, alegre, simpático, antenado e atualizado, sendo uma extensão da família do cliente."

Segue aqui um resumo da defesa que fiz para a logomarca selecionada:
Tipografia: feminina, fina e elegante.

Cores: Lilás representando a casualidade, feminilidade e magia que todo evento deve ter. Vinho em gradiente representando a solidez, seriedade e diferencial da empresa.

Detalhe: Fita de seda resumindo toda a logomarca em requinte, luxo, leveza e movimento da empresa para de forma sutil fazer um grande evento. Esse é o chame e símbolo da logomarca.

A ideia desta logo é, com o tempo, utilizar apenas a letra "E" com a fita, para quem ver já associar à empresa.

Abaixo cartão de visitas, assinatura de e-mail e blog.

Dicas para acertar na interface para iOS

 

Olá pessoal, deixo aqui algumas dicas para acertar na interface para iOS. Como cada caso é um caso, esta plataforma para iPhone e iPad tem suas pecualiaridades e, as dicas podem ser levadas para criações mobile em geral.

1. O usuário está sempre fazendo alguma outra coisa enquanto navega, portanto tudo deve ser claro e óbvio.

2. Pense uma tela por vez e suas respectivas ações do seu aplicativo.

3. Os elementos devem estar fixos nas telas.

4. Ícones que representam bem o aplicativo, em seus diversos tamanhos possíveis.

5. Um dedo é maior e menos preciso que o cursor do mouse,  uma tela touchscreen deve ter uma margem de erros, não deixando assim um botão muito próximo ao outro.

6. Nunca altere a função de um botão padrão.

7. Defina o recurso principal do aplicativo e não desvie deste objetivo.

8. Belas interfaces parecem nativas aos usuários, sentem-se seguros.

9. Começar o design com a estrutura de navegação, traçando um fluxograma das possíveis ações.

10. Buscar referências visuais de acordo com o briefing.

11. As ações que forem possíveis devem ser representadas por imagens, em vez de textos.

12. Utilizar vetores, para evitar distorções de elementos visuais.

13. Comece com as telas maiores (iPad) para depois redefinir as menores (iPhone).

14. Planejar sempre com a visão do usuário.

15. Criar ícones simples e sem textos.

16. Áreas de interação devem ficar na parte inferior da tela.

17. Com moderação as texturas podem dar um requinte.

18. Recursos acessíveis em no máximo três toques.

19. Fazer testes.

20. Ênfase no conteúdo, com design de forma indireta auxiliando e facilitando a navegação.

O minimalismo nos cartazes da Pixar

O designer Wonchan Lee misturou suas duas paixões: minimalismo e Pixar e, assim, desenvolveu versões para os cartazes dos desenhos da produtora.

Nota-se cada vez mais que com muito pouco, é possível manter a identidade dos materiais e comunicar com muita beleza.

Confiram abaixo, valeu povo!