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


O que é UI Design?


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.



Fonte: https://dribbble.com/davestinnette


Fonte: https://dribbble.com/andrewcullen


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


WireframeO que é?


É 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.


Fonte: https://dribbble.com/kerem


Fonte: https://dribbble.com/cuberto


Fonte: https://dribbble.com/Deiv

GridsO que é?


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

GridsBootstrap


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


Fonte: https://dribbble.com/kerem

Grid bootstrap

Iniciando#partiu criar os arquivos


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


Fonte: https://marvelapp.com/styleguide


Fonte: https://dribbble.com/focuslab


Fonte: https://dribbble.com/AlexDeruette


Fonte: https://frontify.com

IniciandoDefinindo cores


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

IniciandoUm pouco sobre cores


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.


Fonte: https://dribbble.com/mailru


Fonte: https://dribbble.com/rafaeltorales


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

IniciandoContraste


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)


Fonte: https://www.netflix.com


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


Fonte: http://colorsafe.co

IniciandoAcessibilidade


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)


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


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

Normal

Protanopia

Deuteranopia

Tritanopia


Fonte: https://dribbble.com/kylemeyer

IniciandoComo projetar para daltônicos


• 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


• Pesos• Tamanhos• Alinhamento• Hierarquia

IniciandoPesos


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

Font: Source Sans Pro

IniciandoTamanhos


h1. Bootstrap headingh2. Bootstrap heading

h3. Bootstrap heading




Tamanhos padrões para o bootstrap

363024

18

14

12

IniciandoAlinhamento


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


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


Sim, precisamos deixar organizado!

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

Organização


Símbolos e Smart objects

Organização


Fechando o arquivo para enviar para o DEV

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


Fonte: https://zeplin.io


Fonte: https://avocode.com

[email protected]

Outras formas de contato:


! fb.com/wellitonmatiola

" twitter.com/ewllitonmatiola

# br.linkedin.com/in/wellitonmatiola

$ www.uilab.com.br

01 200816

www.uilab.com.brfb.com/uilabschool