ui lab experience - como começar um projeto de ui design

Como começar um projeto de UI Design

Welliton Matiola

UI 01 20

0816

Sobre mim• Formado em design (SATC)

• Trabalho com UI há 2.5 anos

• Co-fundador do UI Lab

• Product Designer na homeyou

• Tenho 22 anos

Como começar um projeto de UI DesignUI

Introdução ao WorkshopO que é UI Design?

Wireframe

Grids

Iniciando a interface

Finalizando arquivo para enviar ao DEV

Como começar um projeto de UI DesignUI

O que é UI Design?

Como começar um projeto de UI DesignUI

O que é UI Design?Definição simples

UI Design é o meio pela qual uma pessoa interage e controla um dispositivo, so!ware ou aplicativo. Esse controle pode ser feito por meio de botões, menus e qualquer elemento que forneça uma interação entre o dispositivo e o usuário.

Como começar um projeto de UI DesignUI

Como começar um projeto de UI DesignUI

Fonte: https://dribbble.com/davestinnette

Como começar um projeto de UI DesignUI

Fonte: https://dribbble.com/andrewcullen

Como começar um projeto de UI DesignUI

Fonte: https://dribbble.com/dhl & https://dribbble.com/instagram

O que é UI Design?Responsabilidades de um UI Designer

• Concepção das telas que o usuário interage;• Garantir uma linguagem visual consistente;• Prototipação da UI;• Implementação da interface em conjunto com o DEV;• Documentação e styleguide

Como começar um projeto de UI DesignUI

WireframeO que é?

Como começar um projeto de UI DesignUI

É uma ferramenta para definir a hierarquia de informações da sua interface, facilitando o planejamento e garantindo que o usuário processe as informações de acordo com o que você planejou.

Como começar um projeto de UI DesignUI

Fonte: https://dribbble.com/kerem

Como começar um projeto de UI DesignUI

Fonte: https://dribbble.com/cuberto

Como começar um projeto de UI DesignUI

Fonte: https://dribbble.com/Deiv

GridsO que é?

Como começar um projeto de UI DesignUI

A grid é uma estrutura usada para alinhar espaços negativos, garantindo que o conteúdo fique organizado e flua naturalmente.

GridsBootstrap

Como começar um projeto de UI DesignUI

É um framework front-end com um grid system responsivo e fluido de 12 colunas, atendendo as necessidades de diferentes dispositivos e viewports.

Como começar um projeto de UI DesignUI

Fonte: https://dribbble.com/kerem

Grid bootstrap

Iniciando#partiu criar os arquivos

Como começar um projeto de UI DesignUI

• Arquivo 1440px ou 1920px• Arquivo para style guide

Como começar um projeto de UI DesignUI

Fonte: https://marvelapp.com/styleguide

Como começar um projeto de UI DesignUI

Fonte: https://dribbble.com/focuslab

Como começar um projeto de UI DesignUI

Fonte: https://dribbble.com/AlexDeruette

Como começar um projeto de UI DesignUI

Fonte: https://frontify.com

IniciandoDefinindo cores

Como começar um projeto de UI DesignUI

• Um pouco sobre cores• Contraste• Acessibilidade (daltonismo)• Ferramentas para criação de paleta de cores

IniciandoUm pouco sobre cores

Como começar um projeto de UI DesignUI

Cor é uma força poderosa nas mãos de um designer. Chama a atenção dos olhos, evoca emoções e comunica significados. (Jonathan Z. White)

Um estudo chamado The Impact of Color on Marketing descobriu que 90% das decisões rápidas são feiras baseadas nas cores.

Combinar cores é difícil.

Como começar um projeto de UI DesignUI

Fonte: https://dribbble.com/mailru

Como começar um projeto de UI DesignUI

Fonte: https://dribbble.com/rafaeltorales

Como começar um projeto de UI DesignUI

Fonte: https://dribbble.com/erickmazer & https://dribbble.com/gneumann

IniciandoContraste

Como começar um projeto de UI DesignUI

O estado de ser muito diferente de qualquer outra coisa (Oxford Dictionaries)

Tudo se resume a instintos humanos primitivos: estamos programados para notar a diferença porque elas nos ajudou a sobreviver. (Web UI Design for the Human Eye)

Quanto mais contraste, mais dinstinguivel você torna o objeto em relação aos elementos ao redor dele. (Good UI)

Como começar um projeto de UI DesignUI

Fonte: https://www.netflix.com

Como começar um projeto de UI DesignUI

Fonte: http://jxnblk.com/colorable/demos/text/

Como começar um projeto de UI DesignUI

Fonte: http://colorsafe.co

IniciandoAcessibilidade

Como começar um projeto de UI DesignUI

Cerca de 8-10% de homens e 0.5% de mulheres tem alguma forma de daltonismo.

Daltonismo é a inabilidade de distinguir certos tons no espectro de cores e é resultado de uma mutação no cromossomo X.

Existem 3 tipos de daltonismo dicromatico: protanopia (vermelho), deuteranopia (verde) e tritanopia (azul)

Como começar um projeto de UI DesignUI

Fonte: http://bit.ly/2bp4St7

Como começar um projeto de UI DesignUI

Fonte: http://bit.ly/2bp4St7

Normal

Protanopia

Deuteranopia

Tritanopia

Como começar um projeto de UI DesignUI

Fonte: https://dribbble.com/kylemeyer

IniciandoComo projetar para daltônicos

Como começar um projeto de UI DesignUI

• Usar cores e símbolos • Usar minimalismo• Usar padrões e texturas• Usar cores contrastantes• Evitar combos como: vermelho e verde, verde e marrom, verde e azul, verde

claro e amarelo, azul e cinza, verde e cinza e verde e preto.

IniciandoDefinindo o tamanho dos títulos e parágrafos

Como começar um projeto de UI DesignUI

• Pesos• Tamanhos• Alinhamento• Hierarquia

IniciandoPesos

Como começar um projeto de UI DesignUI

200 – Extra Light300 – Light400 – Regular600 – Semi Bold (Demi Bold)700 – Bold900 – Black (Heavy)

Font: Source Sans Pro

IniciandoTamanhos

Como começar um projeto de UI DesignUI

h1. Bootstrap headingh2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

Tamanhos padrões para o bootstrap

363024

18

14

12

IniciandoAlinhamento

Como começar um projeto de UI DesignUI

A esquerda A direita

Justificado Centralizado

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinci aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh

euismod tinci aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinci aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh

euismod tinci aliquam erat volutpat.

IniciandoHierarquia

Como começar um projeto de UI DesignUI

Lorem ipsum dolorLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinci aliquam erat volutpat.

Publicado por Welliton Matiola em UI Lab

48px

30px

22px

Organização

Como começar um projeto de UI DesignUI

Sim, precisamos deixar organizado!

• Artboards• Grupos• Layers• Símbolos / Smart objects

Organização

Como começar um projeto de UI DesignUI

Símbolos e Smart objects

Organização

Como começar um projeto de UI DesignUI

Fechando o arquivo para enviar para o DEV

• Assets (cores, fonts, imagens, logo)• Ferramentas que podem auxiliar

Como começar um projeto de UI DesignUI

Fonte: https://zeplin.io

Como começar um projeto de UI DesignUI

Fonte: https://avocode.com

Obrigado!welliton.matiola@gmail.com

Outras formas de contato:

Como começar um projeto de UI DesignUI

! fb.com/wellitonmatiola

" twitter.com/ewllitonmatiola

# br.linkedin.com/in/wellitonmatiola

$ www.uilab.com.br

01 200816

www.uilab.com.brfb.com/uilabschool