Moodboard: O que é e como criar um painel para UI Design
Essencial para o trabalho de qualquer profissional criativo, o moodboarding permite que UX e UI designers teçam uma visão criativa sobre seus projetos de design, além de fornecer referências que orientam a aparência de um produto.
Publicado em 7 de novembro de 2022
Essencial para o trabalho de qualquer profissional criativo, o moodboarding permite que UX e UI designers teçam uma visão criativa sobre seus projetos de design, além de fornecer referências que orientam a aparência de um produto.
Essa técnica percorreu um longo caminho desde a época de anexar impressões a quadros físicos até as colagens digitais feitas nos dias de hoje. Neste artigo, vamos explicar o que é Modboard, quais são suas características e benefícios, como criar esse tipo de painel para o UI Design, além de reunir exemplos que poderão servir de inspiração.
Glossário
O que é um Moodboard?
Um Moodboard (ou painel semântico) consiste em colagens físicas ou digitais que organizam imagens, fontes, cores, entre outros elementos de design, em um formato que representa um estilo final. Essa coleção de materiais visuais evoca um determinado estilo ou conceito, sendo considerado um poderoso ponto de partida em um projeto criativo
Designers, ilustradores, fotógrafos, e todos os tipos de profissionais criativo, criam moodboards para comunicar a “sensação” de uma ideia. Trata-se também de uma ferramenta muito empregada por UI designers no design de User Interfaces (UI) para comunicar conceitos e ideias visuais.
Moodboards podem ser tanto digitais quanto físicos. No primeiro caso, você pode criar uma colagem de materiais selecionados usando um software específico.
Já em relação aos moodboards físicos, é usada placa “analógica” (papel, placa de cortiça ou até mesmo uma parede) onde seja possível colar, por exemplo, recortes de revistas, materiais, fotos, etc.
O que você deve utilizar para criar um moodboard?
De maneira geral, qualquer coisa pode ser usada para sugerir os atributos de design visual do seu produto.
Mais especificamente, isso pode significar a inclusão de quantos elementos forem necessários para transmitir a aparência do design que está sendo criado. Aqui estão alguns que você pode considerar ao criar o seu:
- Imagens: inclui desde fotos, figuras, desenhos, imagens de produtos, ilustrações e até logotipos.
- Cores: incorporar uma paleta de cores do design é parte importante da maioria dos moodboards e pode ser incluída como amostras ou incorporada a imagens e outros elementos de design. Existem várias ferramentas amplamente aceitas para ajudar com isso, como o Pantone Matching System.
- Metáforas Visuais: essas metáforas são representações de valores e culturas pertinentes ao universo do usuário. Você pode usá-las para criar familiaridade e compreensão sobre uma interface.
- Palavras: termos ligados à ideia central do projeto ou à mensagem que deve ser transmitida.
- Fontes: é interessante incluir fontes específicas (ou pelo menos estilos de fonte gerais) para qualquer design em que o texto seja proeminente.
- Texturas: quaisquer texturas ou padrões que um design irá incorporar devem ser incluídos no moodboard.
- Explicações: conforme necessário, as explicações para os elementos incluídos no painel podem adicionar contexto e facilitar a visualização de como todas as diferentes partes funcionarão juntas no design final.
Algumas ferramentas úteis
São diversas as opções de ferramentas que você pode utilizar para criar moodboards. Desde softwares básicos de design como Canva até programas populares como o Photoshop. Outras opções incluem:
- Pinterest: essa rede social é um ótimo lugar para buscar referências visuais e organizar as ideias encontradas online. Nela, é possível criar quadros públicos ou privados (compartilhados com indivíduos específicos).
- Moodboard: plataforma que permite criar mood boards gratuitos sem necessidade de conta. Ela conta com modelos prontos para ajudar a começar ou criar um a partir de um design em branco.
- Adobe Express: serve para facilitar a criação de mood boards em formatos que funcionam bem com outros produtos da Adobe. Ele oferece muita flexibilidade para criar painéis em várias formas e tamanhos, com uma biblioteca de fotos, fontes e elementos de design.
Benefícios de utilizar moodboards
Os Moodboards podem servir a muitos propósitos, começando com a organização da inspiração em torno de um projeto de design. Eles são um recurso valioso que ajuda a manter o estilo e a estética consistentes e alinhados com os objetivos e expectativas do cliente.
Alguns dos principais benefícios do uso de moodboards no processo de design incluem:
Maior eficácia ao apresentar ideias de design
Como designer, você pode ter uma visão clara do produto em mente, mas uma coisa é pensar e dizer “minimalista” ou “elegante”, e outra é mostrá-lo.
Em casos assim, uma descrição verbal dificilmente irá transmitir uma ideia visual de forma eficiente. Isso porque, a pessoa que a ouve impõe suas próprias definições (o que é “minimalista” para ela pode não ser o que você está pensando).
Nesse sentido, o moodboard é uma maneira eficaz de apresentar ideias de design, especialmente para as partes interessadas.
Menos alterações de design no final do projeto
Os moodboards também podem ser usados para obter adesão antecipada aos principais elementos de design visual de Product Owners e clientes, resultando em menos revisões ou mudanças de direção posteriormente.
Esses painéis semânticos também são uma excelente maneira de refinar o estilo de um projeto antes de mergulhar no processo real de design.
Mais coerência e consistência
Você pode incorporar todos os seus elementos visuais em um só lugar com um moodboard. A partir disso, é possível avaliar se o nível de consistência que procura (ou inconsistência, se esse for o objetivo), está de acordo com o esperado, e ter mais certeza se tudo realmente se encaixa.
Investimento de baixo custo
Comparado com a produção de um protótipo ou mockup de um produto, um moodboard é uma opção de baixo custo que transmite de forma parecida o pensamento de design, podendo transmitir muito sobre sua aparência final.
Moodboards no desenvolvimento de produtos digitais
Como parte de sua abordagem de design, os moodboards são bastante empregados por equipes de desenvolvimento na criação de produtos digitais. Seu papel nesse processo pode incluir, por exemplo:
- Ideação: na fase de ideação do design e desenvolvimento de um produto digital, os moodboards provocam e nutrem a criatividade, incentivando a construção de ideias, uma em cima da outra.
- Teste com usuários: ao buscar feedback antecipado sobre um produto, o apelo visual pode ser testado usando um moodboard com usuários do público-alvo; imagens e cores tendem a produzir respostas emocionais, que podem ser um feedback valioso.
- Economize tempo: moodboarding é relativamente rápido de fazer (algumas horas no máximo) e estabelece uma base visual para um protótipo ou outra iteração inicial do produto.
- Flexibilidade: se as circunstâncias mudarem e o projeto precisar girar, geralmente é fácil retornar ao moodboard e editá-lo de acordo com o feedback recente ou uma nova direção.
- Melhor desempenho em UX/UI: Ao se concentrar nos elementos visuais do design, os moodboards concentram-se nos principais elementos da User Experience (UX) e da User Interface (UI) de uma maneira que consiga falar diretamente aos seus desejos e necessidades.
Exemplos do uso de moodboards para produtos
A seguir, você confere alguns exemplos de moodboards para inspirar seu próximo projeto de design:
Moodboard digital para website
Este é um exemplo de moodboard de site que deve transmitir a paleta de cores, fonte, espaçamento e imagens para o site de uma loja de alimentos orgânicos.
O painel transmite a ideia de uma interface limpa com o uso de amplo espaço em branco entre os elementos, que também cria uma aparência limpa, como se refletisse uma vida limpa.
Isso demonstra que os moodboards não precisam ser apenas uma colagem de elementos e imagens: você também pode usar o design de espaço em branco como um desses elementos visuais.
Moodboard físico para website
O exemplo abaixo pode ser a cartilha perfeita para o design de um site. Com este painel, o designer aqui reuniu fotos e recortes de revistas, sobrepondo diferentes letras e números de forma aleatória para mostrar a ideia da fonte.
Padrões puros e um esquema de cores claro reinam por toda parte. O tópico do site, juntamente com a interface do usuário, pode ser inspirado pela limpeza, adicionando o toque rústico da natureza. A partir dessas ideias, é possível evocar um site de decoração ou um e-commerce.
Moodboard da Interface do Usuário (UI)
Em moodboards como o da imagem acima, a reunião de referências de interfaces de diferentes cores e elementos funciona como o primeiro passo do brainstorming de UI.
É possível avaliar, por exemplo, quais cores chamam a atenção, qual tipografia funciona melhor para a página inicial, onde o logotipo deve ficar, entre outros aspectos do design.
Moodboard de aplicativo móvel
Projetar um aplicativo móvel tem muitas etapas complexas, o que pode ser facilitado com uso de um moodboard.
No exemplo acima, uma UI designer reuniu inspirações de aplicativos, desde o layout até o estilo de ilustração e a paleta de cores. Colocar todas essas opções em um só lugar ajudará a mostrar claramente em que direção você deseja partir.
Quer ingressar na área de Design? Conheça a Awari!
A Awari é uma plataforma de ensino completa que conta com mentorias individuais, cursos com aulas ao vivo e suporte de carreira para você dar seu próximo passo profissional.
Conheça nossa trilha de Design e confira os nossos cursos de UX/UI com jornada personalizada e materiais complementares desenvolvidos por especialistas no mercado.
Aprenda uma nova língua na maior escola de idioma do mundo!
Conquiste a fluência no idioma que sempre sonhou com uma solução de ensino completa.
+ 400 mil alunos
Método validado
Aulas
Ao vivo e gravadas
+ 1000 horas
Duração dos cursos
Certificados
Reconhecido pelo mercado
Artigos Relacionados
Confira abaixo mais conteúdos sobre o tema
Requisitos do sistema para design 3D
Os requisitos do sistema para design 3D são as...
Design de UX: Como ele pode te ajudar a conquistar o sucesso
O Design de UX desempenha um papel fundamental no...
Tagline de Design de Experiência do Usuário: Como criar uma frase impactante para o seu projeto de UX
A tagline de design de experiência do usuário é...
