O “ilustrador dentro de mim” é um pouco confuso. Eu consegui “me dividir” em duas versões e há uma batalha constante entre esses dois personagens que dura anos. Como um jovem ilustrador trabalhando em um estúdio de Design Digital, tive também a minha quota de armadilhas embaraçosas, bem como grandes experiências quando se trata de ilustrar para clientes. Abaixo, tentei reunir alguns conselhos realmente importantes que me ensinaram a evoluir gradativamente.

Projetar para o usuário

A primeira regra básica mas não escrita no meu guia é projetar primeiramente para o usuário, mas geralmente isso demora um pouco para entrar em cena. Como ilustradores, tendemos a nos perder tanto tentando criar visuais impressionantes que acabam sendo muito pouco confiáveis ​​para o usuário final. É preciso ter autocontrole e disciplina para entender entre projetar para o usuário e projetar para você mesmo. Uma boa prática aqui é começar a ilustrar um esboço básico e ajustá-lo para adicionar detalhes visuais interessantes ​​que satisfaçam a sua alma artística e que ao mesmo tempo atinjam também o usuário.

Evite simbolos complicados e complexos em ilustrações

Embora ilustre para uma grande audiência demográfica, é importante lembrar que você evite de usar qualquer tipo de simbolismo que pertença a outra cultura ou idioma. Evite também cores que eventualmente possam ser ofensivas no país ou região onde será publicada sua ilustração. O truque é fazer um suficiente ‘Background Research’ no público do país para quem você está ilustrando para obter algumas informações. Não só evitará algumas conotações negativas, mas também ajudará a idealizar seus esboços em respeito à perspectiva do usuário.

Evite exagerar nas cores - siga a hierarquia

O melhor truque possível é utilizar uma paleta de cores mínima, com duas ou máximo três cores. Isso geralmente garante que o foco da ilustração não seja perdido. Uma paleta de cores minimalista ajuda o usuário a entender a hierarquia em uma ilustração sem ser exposto a várias cores de uma só vez. Certifique-se de que sua ilustração tenha bastante espaço para respirar e o mínimo de elementos possível. Se parecer muito vazio, você pode ajudar a adicionar detalhes de estilo, provando elementos de primeiro plano ou plano de fundo. Mas lembre-se: menos é sempre mais. Nunca pode dar errado com essa regra de ouro!

Usando um Grid enquanto compõe a ilustração

O Grid é uma regra boa o suficiente para se seguir em todos os tipos de campos artísticos, da ilustração à fotografia. É um meio de controle e ajuda a restringir ou estender seu trabalho artístico em todas as direções. Torna-se um símbolo impecável de controle e garante uma sensação de modernidade em suas ilustrações. É um sistema de apoio que ajuda a evitar a eventual imprecisão, se houver. Então, quando você ilustra, siga o Grid e o adore.

Mantenha o projeto contextual ao público alvo

Quando eu era um iniciante em ilustração, eu estava ansioso para experimentar novos estilos e tendências na ilustração. Isso se tornou um problema quando eu fiz imagens que seriam bonitas e modernas, mas com uma perda total quando o usuário tentasse se conectar. Somente quando a frustração chegou ao auge, percebi que estava fazendo a coisa errada. Eu aprendi que a cada momento você precisa começar do zero; e uma vez que você começa a se restringir para se adequar ao público-alvo, uma reação oposta acontece. Novas idéias aparecem e ajudam a quebrar o padrão.

Não tenha medo de experimentar

Fique longe das tendências e tente nutrir o estilo inato de ilustração que você tem! Conhecer todas as regras e quebrá-las depois de dominá-las é um tipo especial de prazer. Não seja muito duro consigo mesmo e aproveite a sensação de gratificação nessa brilhante profissão.

6 super dicas para excelentes ilustrações was originally published in UX Motion Design on Medium, where people are continuing the conversation by highlighting and responding to this story.

A teoria das cores é um conceito importantíssimo. É ele que estuda a influência de cada cor no comportamento do usuário por meio das sensações que desperta.

Conhecer esses significados é essencial para nós, designers.

Ao criar uma interface, é preciso estudar a paleta de cores com cuidado. Afinal, essas escolhas influenciarão diretamente no sucesso do projeto.

Por isso, preparamos este post com dicas e inspirações para que você entenda melhor como aplicar a teoria das cores. Vamos conferir?

O circulo cromático

O Círculo Cromático é uma representação das 12 cores que o nosso olho pode perceber e reconhecer. Ele é representado, na forma de um círculo, com as cores distribuídas perfeitamente de tal maneira que geram diversas combinações, sejam ligando cores de lados opostos, cores lado a lado, etc.

Entenda a combinação das cores

O primeiro passo é entender que as combinações de cores não são meras coincidências. Outro ponto importante é o estudo dessas combinações entre cada matiz (cor), já que, em conjunto, elas podem trazer sensações diferentes.

Matiz é a característica que diferencia as cores, como vermelho, verde, amarelo…

A teoria das cores explica como é possível combinar matizes gerando contraste, similaridade e harmonia, analisando o círculo cromático. Para compreender melhor essas possibilidades, é preciso ter em mente alguns conceitos:

Cores Complementares

As cores complementares são aquelas que se encontram em lados opostos do círculo cromático. Sendo assim, alaranjado e azul são cores opostas, consequentemente são cores complementares. Assim como amarelo e roxo, verde e vermelho etc…

Interessante é escolher uma das cores como dominante, e a outra somente utilizada para alguns toques mais sutis, mas que se destacam também.

Cores complementares são indicadas para criar a sensação de força e equilíbrio, pois geram contraste.

Cores Análogas

São cores que se encontram lado a lado no círculo cromático. No caso abaixo, amarelo, alaranjado e alaranjado escuro são um exemplo de cores análogas. Um aspecto desta combinação é que as matizes são variações de uma cor básica em comum.

Essa combinação é usada para trazer a sensação de uniformidade, calma, tranquilidade e harmonia.

Cores Complementares Divididas

A combinação de cor complementar dividida é um pouco menos vibrante e “viva” que a combinação de cor análoga, ou complementar visto anteriormente. Ao invés de se escolher a cor complementar direta, escolhe-se as duas cores adjacentes. Ou seja, se escolhermos o alaranjado, as duas outras cores serão o azul claro à esquerda e o azul mais escuro à direita.

Quadrado Harmônico

A combinação de cor baseada no quadrado harmônico utiliza quatro cores que formam um quadrado dentro do círculo cromático. Trabalhar com 4 cores é um desafio, mas o resultado pode ser fenomenal!

É uma combinação de cor vibrante, pois se utiliza a união de dois pares de cores complementares.

Cores em Base ao Retângulo

A combinação de cor em base ao retângulo utiliza quatro cores, semelhante à descrita acima (Quadrado harmônico) . Porém forma-se um retângulo ao interno do círculo cromático.

Esta também é uma combinação de cor vibrante.

Tríade

Para um resultado mais arrojado, podemos utilizar a combinação de cores triádicas. Essa é formada por 3 cores equidistantes no círculo cromático formando um triângulo. No nosso exemplo verde, roxo e alaranjado.

Para definir o tipo de combinação que seu projeto receberá, é importante analisar as características da empresa, do mercado de atuação, e dos seus clientes.

Monocromática

Uma cor e seus diferentes tons, ou seja, uma cor com mais luminosidade ou mais “escurinha” (tom sobre tom). Não traz muito contraste, mas fica simples e elegante.

Inspire-se em apps conhecidos.

As cores influenciam diretamente a identidade do projeto, da marca e da interface. Ao analisá-los, é possível identificar o padrão cromático, utilizado durante a criação.

Abaixo segue alguns links de referências úteis no momento da escolha das cores:

• Adobe Color CC
• Lista de cores - Wikipédia, a enciclopédia livre
• Color Trends + Palettes :: COLOURlovers
• Color Hex Color Codes

Faça parte do nosso Grupo do Facebook sobre UX Motion Design: https://www.facebook.com/groups/uxmotiondesign/

Teoria das cores no Design was originally published in UX Motion Design on Medium, where people are continuing the conversation by highlighting and responding to this story.

Este artigo é uma tradução oficial autorizada pelo Autor. Artigo original: https://uxplanet.org/motion-in-ux-design-90f6da5c32fe

O Design Baseado em Movimento (Motion-based Design) no mundo do design é usado para descrever relações espaciais, funcionalidade e intenção, com beleza e fluidez. O Motion pode soar como um grande conceito, mas quando usado de forma eficaz, é sutil e natural. O movimento pensado para o design pode melhorar a experiência do usuário através dos elementos tradicionais do design.

Então, vamos falar sobre os fundamentos do Motion Design, entender o porque e quando usá-los na sua UI, e como isso pode te ajudar a melhorar a experiência com o usuário.

Design Baseado em Movimento (Motion-based Design)

Porque o Motion é importante?

Quando os usuários interagem com seu produto, eles podem fazer as seguintes perguntas:

• “O que é mais importante aqui?”
• “Como eu sei o que devo fazer a seguir?”
• “Como sei que completei minha tarefa?”

Perguntas como essas podem revelar oportunidades de usar o Motion para aprimorar a experiência. O Motion otimiza a percepção da experiência do usuário e responde às perguntas:

• Ele chama a atenção do usuário e sugere o que acontecerá se um usuário concluir um clique / gesto.
• Ele ajuda você a orientar os usuários na interface e fornece um foco guiado entre as visualizações.
• Ele fornece um feedback visual.

Além disso, o design baseado em movimento traz outra coisa importante para a experiência do usuário: prazer - todos nós apreciamos o valor de produtos humanos, prazeroso, no lugar dos frios e racionais. Por isso os designers devem experimentar e encontrar soluções que pareçam mais naturais e evoquem uma conexão emocional.

Linguagem do Motion

O Motion nos está permitindo comunicar melhor a interação e facilitando o entendimento do usuário. Elementos de design baseados em Motion podem ser vistos em uma variedade de formas, incluindo transições, animações e até mesmo em texturas para imitar a profundidade 3D. A seguir, os lugares sugeridos para integrar o design de movimento no fluxo de trabalho do UX são:

Conduzindo a atenção dos usuários

Animações podem chamar a atenção do usuário para uma área específica ou ajudar a desviar a atenção dele - é tudo sobre como controlar as transições da hierarquia a cada momento no tempo. O bom design das animações torna a interface do usuário mais previsível e fácil de navegar - ela enfatiza os elementos certos, dependendo de qual é o objetivo e ajuda os olhos a verem de onde um novo objeto vem ou para onde um objeto oculto vai.

O Motion também fornece ao espectador uma “pista” sobre o que está prestes a acontecer - pode haver várias camadas de elementos trabalhando juntas para suportar essa ação.

Torne a UI espacialmente lógica

Mudanças de estado na interface do usuário geralmente envolvem cortes duros por padrão, o que pode dificultar sua execução. Na ciência cognitiva, isso é chamado de cegueira de mudança - quando uma mudança repentina no estímulo visual é introduzida e o usuário não percebe isso. Isso geralmente acontece quando uma página é recarregada, quando piscamos, quando nossos olhos saltam rapidamente de um ponto fixo para outro. Os usuários precisam entender de onde as coisas vêm e onde podem encontrá-las novamente, para que não pareçam difíceis - simplesmente porque as mudanças difíceis (ou repentinas) não existem no mundo real!

O design de movimento preenche a lacuna de compreensão definindo as relações espaciais entre as telas e os elementos. Ajuda as pessoas a se orientarem dentro da interface e a estabelecer relações visuais. No exemplo abaixo, durante a transição, o usuário é guiado para a próxima visualização e a superfície se transforma para se comunicar hierarquicamente:

Confirmando Ações

O movimento reforça as ações que um usuário está realizando. Para cada botão clicado e transição de tela, há uma oportunidade de usar um Motion Design. A resposta visual pode aumentar o envolvimento e encantar o usuário. Por exemplo, vamos ver como a animação pode ajudar ao digitar uma senha errada no iOS:

À primeira vista, tremer a animação na entrada de senha incorreta parece levar mais tempo do que exibir instantaneamente um pequeno emblema de erro. No entanto, na realidade, um usuário pode gastar alguns segundos tentando localizar a mensagem de erro para descobrir o que deu errado, em vez de perceber a animação e entender o problema instantaneamente. Essa animação é tão reconhecível que se tornou o principal feedback para confirmar a ação.

É prazeroso

O Motion pode tornar a experiência do usuário verdadeiramente prazerosa e memorável. Como designer, você deve trazer um pouco de si mesmo para o design e encantar seu Motion-Based Design com um apelo único que as pessoas vão adorar e lembrar. Ao injetar movimentos sutis no design, você pode fazer com que os usuários sintam que estão interagindo com algo que tem personalidade. Uma simples atenção aos detalhes geralmente é o que sinaliza às pessoas que estamos pensando sobre elas.

Detalhes agradáveis ajudam a adicionar um elemento tátil às interações porque fazem com que os usuários se esqueçam de que estão tocando apenas um pedaço de vidro e, ao invés disso, sentem que estão interagindo com elementos reais na tela. É sempre bom sentir que as coisas estão reagindo ao que você está fazendo.

Mas não se esqueça de que o principal desafio do movimento é fazer algo que não distraia os usuários do que eles estão tentando fazer.

Conclusão

O Motion é o próximo nível de tecnologia. É uma maneira natural de interagir com as coisas e é absolutamente essencial para o design do futuro. Precisamos nos despedir de UI estáticas e criar interfaces muito mais humanas e vivas. Criar uma linguagem de movimento para seu aplicativo reforçará sua marca e complementará seu design.

Faça parte do nosso Grupo do Facebook sobre UX Motion Design:https://www.facebook.com/groups/uxmotiondesign/

Motion em UX Design was originally published in UX Motion Design on Medium, where people are continuing the conversation by highlighting and responding to this story.

Este artigo é uma tradução oficial autorizada pelo Autor. Artigo original: http://paulvanoijen.com/writing/motion.html

O Motion é um meio de contarmos histórias. Ele constrói uma narrativa que providencia contexto ao usuário. Ao conectarmos visualmente telas e elementos, fornecemos um guia estruturado. Ao estabelecermos uma relação espacial entre elementos, isto nos ajuda a entender a organização de um aplicativo.

Através do uso fluido, dinâmico e proposital, o Motion pode melhorar a experiência do usuário de várias maneiras diferentes: pode ser usado para transmitir mudanças de status, guiar o usuário para onde queremos e precisamos que ele vá, influenciar o comportamento e distraí-lo enquanto algo acontece em background. O Motion reduz a espera de um loading, por exemplo, tornando as relações espaciais entre os elementos mais claras e facilitando a compreensão de como os elementos estão interligados.

Uma aplicação significativa e bem pensada de uma animação pode transformar uma interface e proporcionar uma experiência melhor e amigável. Ao entender e alavancar os pontos fortes do Motion, essa experiência pode ser drasticamente aprimorada e prazerosa.

Motion é transformativo

A imagem acima pode transmitir uma mensagem de “Motion is love” (Motion é amor), lembrando as populares camisetas “I ❤️ New York”. Talvez seja uma expressão do meu amor pelo motion design — que, dado o meu entusiasmo pelo tema, poderia muito bem ser.

Mas o que acontece quando animamos o emoji?

Ao animar o emoji de coração na imagem, ele é transformado. Em termos técnicos, tudo o que aconteceu é que o ícone é escalonado para cima e para baixo em intervalos definidos. Mas a animação resultante atribui um significado diferente à imagem. Instantaneamente, a idéia de um coração pulsante vêm à nossa mente. Uma imagem de um coração batendo, uma imagem da vida e movimento. Isto descreve uma das maneiras mais poderosas pelas quais o movimento melhora a experiência do usuário:

Motion traz vida ao ambiente digital

Assim como a cinematografia dá vida às imagens fixas, a força central do Motion é a maneira pela qual ele transforma os produtos digitais. Ele dá vida ao que é de outra forma, um ambiente estático e sem vida. Produtos digitais como smartphones e laptops são “mídias frias”. Eles não possuem inerentemente qualquer forma de vida. Através do Motion, podemos transformar esse “meio frio” tirando-o desse estado sem vida.

Um exemplo disso é a animação do Assistente Google. Enquanto aguardam informações, os icônicos quatro pontos coloridos — uma indicação de como as cores da marca do Google são bem estabelecidas — flutuam suavemente para cima e para baixo em um padrão ondulado.

Embora o Google pudesse exibir apenas um ícone de microfone e uma sequência de texto instruindo você a falar, eles optaram por essa animação sutil. A animação é o que traz o assistente para a vida. Está calmamente, mas ativamente esperando pelo seu comando. Não há pressa aqui, conforme indicado pelo padrão suave do movimento.

Motion é informativo

Os produtos digitais costumam ser coisas complexas e complicadas. A qualquer momento, pode haver uma dúzia de coisas acontecendo em background, fora da vista do usuário. Embora possamos tentar o máximo para executar processos em segundo plano o mais rápido possível, haverá momentos em que o usuário terá que aguardar uma resposta.

Antes que o Motion se tornasse uma parte mais integral do ambiente digital, os usuários simplesmente olhavam para a tela, esperando por algo, qualquer coisa que acontecesse. “Meu “Eu” mais jovem, estaria olhando para os LEDs piscando no gabinete do meu computador, assumindo que enquanto ele estivesse piscando, ele ainda estaria processando e eu deveria apenas esperar pacientemente que as informações fossem carregadas.

Com a animação, no entanto, podemos informar o usuário sobre esses processos. Até agora, a maioria de nós estamos familiarizados com animações de carregamento (loading). Eles estão enraizados em nossas mentes por causa de seu uso abundante em uma grande variedade de websites e aplicativos.

Loaders, sejam eles círculos, cubos ou triângulos e se eles realmente giram em círculos ou não, são todos indicativos do mesmo conceito. Algo está acontecendo, em processamento. Em algum lugar no fundo, os dados estão sendo processados e os resultados estão sendo buscados.

Embora a ideia principal da animação seja indicar que algo está acontecendo em segundo plano, ela também tem um efeito secundário. Por associação, o usuário agora sabe que quando essa animação terminar, as coisas terão mudado. Dessa forma, o usuário fica ciente de uma alteração iminente e está preparado para esse evento. Eles sabem estar à procura de novas informações.

Neste exemplo, os quatro pontos do assistente Google mudam de forma para indicar uma alteração de estado. Essa mudança na forma informa ao usuário que o assistente não está apenas ouvindo um comando, mas agora está ouvindo sua voz ativamente e interpretando o que você está dizendo.

“O Motion deve, acima de tudo, ajudar a orientar os usuários, fornecendo-lhes as informações certas no momento certo.”

- Google

Tanto os loaders quanto as alterações de formas do assistente fornecem ao usuário as informações certas, na quantidade certa e no momento certo. Não há sobrecarga cognitiva nem dissonância. O usuário é informado sobre alterações e processos que estão em andamento, sem entrar em detalhes.

Motion fornece orientação ao usuário

Aplicações consistem regularmente em camadas sobre camadas de informação que são de alguma forma conectadas umas às outras. Crescemos acostumados com movimentos e cortes duros quando navegamos em websites, que piscam em branco ao passar de uma página para outra por exemplo. Nos smartphones, esse breve período em que não há nada na tela desapareceu, em vez disso, passamos instantaneamente de uma seção para outra.

O problema em ambos os casos é que é difícil discernir qualquer relação tangível entre as diferentes partes do site ou as diferentes telas do aplicativo. Claro, sabemos principalmente como chegamos de um lugar para outro porque somos os únicos que clicaram ou tocaram em nosso caminho até lá.

Mas como essas telas estão conectadas? Qual é a relação espacial entre os dois?

Ao animar a transição entre diferentes elementos, podemos fornecer clareza. Torna-se mais claro como seções diferentes são relacionadas umas com as outras e isso nos permite entender a estrutura e a hierarquia da aplicação utilizada.

No exemplo acima, dois elementos separados são conectados através do uso de animação. O botão de reprodução (play) simples e o painel de controle mais complexo compartilham a mesma funcionalidade: eles controlam e influenciam a reprodução de vídeo ou áudio.

A animação reforça este link e constrói unindo-os visualmente. Ao mostrar como o botão de play cresce no painel de controle ao ser clicado pelo usuário, fica ainda mais claro que os dois estão interconectados.

Essa inter-relação é ainda mais aparente na animação do ícone do menu — ou menu de hambúrguer — e na seta para trás. Ao transformar a seta para trás no ícone do menu, isso significa que os dois elementos são mutuamente exclusivos - eles não podem existir ao mesmo tempo. Para navegar de volta para o painel anterior, a seta para trás deve ser pressionada.

A transformação de um ícone para outro em um curto espaço de tempo, faz com que se torne mais tangível a relação espacial entre os dois elementos. Torna-se mais fácil entender a conexão entre os elementos e, por sua vez, o lugar deles na estrutura da aplicação.

Animação com um propósito

Acima de tudo, a animação deve ser significativa e proposital. Nós não devemos animar pelo simples fato de animar. O movimento deve fornecer orientação tornando a experiência mais confiável, consistente e compreensível. Deve ser aplicado deliberadamente e com cuidado. Obter esses detalhes corretamente melhorará em muito a experiência do usuário.

“Os detalhes não são os detalhes; eles fazem o produto ”.

- Charles Eames

O Poder Transformativo do Motion was originally published in UX Motion Design on Medium, where people are continuing the conversation by highlighting and responding to this story.