/treinamento-visao

Treinamento ministrado sobre prototipagem para os Trainees da Visão Tecnologia e Sistemas

Treinamento de prototipagem

Passos até a criação 🎨

  1. Um briefing com o cliente. E saber exatamente qual é a principal ação daquele projeto.
  2. De acordo com o briefing serão montados wireframes.
  3. As telas de wireframes são passadas para algum software, eu particularmente utilizo o Whimsical. Ele produz frames de baixa fidelidade.
  4. Tudo certo... é hora de produzir um documento de orçamento. E caso a negociação finalize, serão feitos os próximos passos.
  5. É a hora de partir para o design. Nessa etapa serão desenhadas as telas de alta fidelidade do software. Aqui o cliente já deve ter em mãos a identidade visual do software em questão. E para o desenvolvimento dessas tela, eu utilizo o Figma, mas também recomendo o Adobe XD, ambos são gratuitos.
  6. É hora de codar! 😝

Passos da criação 🧙🏾‍♀️

  1. Definir uma paleta de cores.
  2. Definir a tipografia. Geralmente são pegas referencias de mais usadas em desenvolvimento de UI.

GRID e regras de espaçamento

  1. Disposição dos elementos

Instalação Figma

Sites de suporte

Figma: the collaborative interface design tool.

Dribbble - Discover the World's Top Designers & Creative Professionals

Pinterest

Best of Behance

Flaticon, the largest database of free vector icons

Beautiful Free Images & Pictures | Unsplash

Você sabe usar tipografia em UI Design?

Material Design