O conjunto de ferramentas do designer: fluxos de trabalho, software e sites

Publicados: 2020-12-17

Assim como os desenvolvedores de software, escritores de conteúdo, pessoal de marketing e assim por diante, os designers precisam ter um bom conjunto de ferramentas para ajudá-los a lidar com o trabalho diário. O que tentamos fazer aqui é delinear essas ferramentas, fluxos de trabalho e a maneira como você pode combiná-los para acelerar seu trabalho e reduzir a chance de erros e erros.

Juntar informação

Quando um novo projeto chega, as primeiras horas são principalmente para coletar informações sobre ele - quais problemas o cliente enfrenta, quais são seus objetivos, do que eles gostam e assim por diante. Durante esta etapa crucial, o designer deve tentar obter tantos dados úteis quanto possível, que serão usados ​​posteriormente para tomar decisões informadas.

Evernote

O Evernote é um software incrível - não é apenas um aplicativo para fazer anotações. Ele pode armazenar arquivos, combiná-los em coleções, tags, grupos, etc. Por meio de sua pesquisa poderosa, você pode consultar projetos anteriores e assim por diante. Claro, o lado mais poderoso disso é como você o usa. Eles têm uma orientação aproximada para algumas abordagens organizacionais.

Captura de tela da página inicial do Evernote

Email, Slack, Zoom ...

O próximo é outro óbvio, mas há um motivo pelo qual o adicionamos - adiar uma chamada, uma mensagem ou uma videochamada pode ser um grande atraso para um projeto. Freqüentemente, a capacidade de compartilhar uma tela e examinar maquetes, wireframes, conceitos e designs salva vidas. Nunca esqueça isso

Encontre inspiração

Quando houver informações suficientes, a próxima etapa é reunir inspiração - como deve ser a aparência de um aplicativo / site, qual é o estilo, qual é o objetivo, etc. Existem ideias interessantes para uma nova tecnologia a ser usada ou diferentes tipos de mídia ? Todos os designers procuram inspiração a torto e a direito - sites, livros, revistas, qualquer coisa.

Dribbble, Behance e sites semelhantes

Por isso mesmo (e para os designers se gabarem) existem sites como o Dribbble. Lá, nós, designers, podemos procurar ideias e abordagens que resolvam os problemas que enfrentamos atualmente. Às vezes, o objetivo é construir “uma página de vendas genérica para o serviço A”. Essa página de vendas teria literalmente alguns parágrafos com uma foto de estoque. Totalmente um objetivo nada inspirador, mas é realista. Bem, a combinação de cores, tipografia, espaçamentos, etc. pode ser um pouco mais original. Talvez experimente layouts diferentes também! E a ideia para isso pode vir de uma página de destino aleatória postada há 3-4 anos. A página Discovery do 99Design também é um bom lugar para procurar!

Captura de tela de exemplo do Dribbble

Awwwards

Colocamos sites como o Awwwards em uma categoria separada, pois eles realmente mostram algo que foi construído e pode ser visto em funcionamento. E mais, centra-se mais na forma artística, não tanto em “qualquer trabalho de design”. Na maioria das vezes, os sites são tão pesados ​​que só podem ser usados ​​em máquinas de última geração, mas você ainda pode se inspirar neles.

Paleta de cores / marca

Para uma construção totalmente nova, onde não há cores predefinidas, uma das etapas para começar a trabalhar seria escolher algo que se encaixasse no novo local. Existem duas maneiras de abordá-lo - escolher um esquema de cores existente ou definir cores primárias / secundárias e contornar todo o esquema com base nelas.

ColorHunt

Sites como o Color Hunt fornecem uma coleção de paletas de cores criadas pela comunidade. Você pode escolher e usar diretamente ou escolher as cores principais para começar. Não tão bonito, mas também semelhante, é Color Lovers.

Captura de tela de exemplo de caça a cores

BrandColors

BrandColors tem um objetivo ligeiramente diferente - fornece uma lista das principais marcas e seus esquemas de cores. Você pode encontrar alguns tons e combinações excelentes que podem inspirar sua construção. As cores não estão protegidas por direitos autorais, mas nosso conselho é brincar um pouco com elas, em vez de copiar e colar todas as cores de lugares como a Amazon, por exemplo.

Ativos premium e gratuitos

Nem sempre há tempo suficiente para trabalhar em cada componente do site. Às vezes, é melhor pegar um pacote de ícones, uma ilustração ou uma foto feita por outro designer / fotógrafo e usar diretamente.

  • Font-Awesome - Uma enorme coleção de ícones nas formas de glifos de fonte
  • Envato Elements - Grande seleção de ativos de qualidade premium a um bom preço.
  • Unsplash - coleção enorme de fotos de alta qualidade gratuitas
  • Geradores SVG como squircley, getwaves, blobmaker
  • Adobe Fonts (pago) e Google Fonts (gratuito)

A melhor dica aqui é encontrar alguns sites como esses acima e tê-los por perto, para que você reduza ao máximo o tempo e o esforço que precisa fazer para pesquisar e encontrar os melhores gráficos para o trabalho.

As principais ferramentas de design

Com o trabalho inicial resolvido, chega-se a realmente construir o design. Uma vez que todos os softwares progressivos para designers têm todas as ferramentas necessárias para construir designs de web / aplicativos, vamos pular as ferramentas de wireframing.

Figma

Nossa escolha principal para o trabalho de design na DevriX é a Figma. Ele oferece excelentes recursos de colaboração, bem como aplicativos baseados em navegador que podem ser acessados ​​por qualquer pessoa da equipe, seja Linux, Mac ou Windows. Anteriormente, usávamos Adobe XD, mas os membros baseados em Linux não podiam utilizá-lo e o Sketch está bloqueado apenas para Mac.

Imagem da página inicial da Figma

Illustrator / Affinity Designer

Para um trabalho mais personalizado, Illustrator ou Affinity Designer são definitivamente algumas das melhores escolhas. Nos últimos dois anos, as ilustrações personalizadas são uma das partes mais populares dos sites. Gráficos grandes e coloridos dominam a dobra e mais experiência nas ferramentas certas é definitivamente uma boa coisa a fazer. Neste local, também podemos adicionar softwares 3D como o Blender para a renderização de modelos 3D, que podem ser usados ​​como ativos nas páginas da web.

Photoshop / Affinity Photo

Photoshop foi o software líder para web design. Isso pode parecer estranho hoje, especialmente porque temos todas essas ótimas ferramentas voltadas principalmente para a web. Mas o Photoshop ainda é uma ótima ferramenta e costumamos usá-lo quando há fotos que precisam de alguma edição ou recorte de formas / formulários.

Apresentação

Mas não é apenas o trabalho de design - um PNG estático. Alguns designers se concentram um pouco mais em gráficos animados e interações. Uma boa demonstração de como os elementos devem se comportar ao passar o mouse, passar o dedo ou clicar ajudaria muito no trabalho dos desenvolvedores front-end. Tanto o Figma quanto o Adobe XD podem ajudar nisso, mas ambos são limitados.

Adobe After Effects

Os efeitos posteriores são considerados uma das primeiras opções para gráficos em movimento. Ele fornece todas as ferramentas necessárias para representar todas as ações e animações. Uma boa coisa para lembrar os designers aqui é que as animações devem seguir as limitações da web. Adicionar desfoque de movimento não é algo que você pode fazer. Então, quando você entrar em animações mais avançadas, definitivamente discuta isso com sua equipe de desenvolvimento front-end ou leia mais sobre animações na web e o que é possível. O mesmo vale para UX e A11y.

Armazenamento

Figma e Adobe XD são basicamente focados na nuvem, então você não deve se preocupar em perder trabalho, mas nem tudo é assim - arquivos do Photoshop, Illustrator, fontes que você baixou, fotos, etc., todos residem em sua máquina.

É melhor fazer backup deles e mantê-los acessíveis o tempo todo, especialmente se você trabalhar em mais de uma máquina. E quando se trata de compartilhá-los, é muito fácil.

Dropbox

A melhor escolha para isso seria Dropbox. Com seu aplicativo de desktop fácil de usar, ele vigiará seus arquivos e os sincronizará com a nuvem assim que você fizer qualquer alteração. A partir daí, compartilhá-los com o cliente ou sua equipe está a um único clique de distância.