Skip to content

Instantly share code, notes, and snippets.

@emiliojva

emiliojva/UI Design Avançado.md

Created April 1, 2021 20:59
Show Gist options
  • Save emiliojva/533522b9ca36d635777a0f688890c450 to your computer and use it in GitHub Desktop.
Save emiliojva/533522b9ca36d635777a0f688890c450 to your computer and use it in GitHub Desktop.
Download ZIP
UI Design Avançado
Raw
UI Design Avançado.md

UI Design

Técnica de Aprendizado

  • Estudo (1x)
  • Referência (2x)
  • Prática 3x

Estudo

  • Fundamentos
  • Argumentar as decisões
  • Diversas fontes
  • Pesquisa / testes

Referência

  • Entender o que é bom
  • Aumentar o seu repertório
  • Inspiração / roubar ideias
    • Portais de idéias
      • dribbble
      • typewolf
      • awwwards
      • behance
      • css design awards
      • empresas bilionarias (amazon, google e etc)
  • Perceber padrões / boas práticas
    • Reriar sites existentes
    • Expandir uma funcionalidade para um site conhecido
    • Definir pouca coisa para copiar.
    • Dividir por mais dias as tarefas
    • Praticar focodo em um objetivo/fundamento (cores, desenho)
    • Primero base de estudo teórico, depois referências e no fim praticar.
    • Talento é mito! rsrs, praticar é seria um talento.

Ferramentas

É fundamental para nossas ferramentas ter as capacidades abaixo:

  • Vertor

    • Retangulo, círculo
    • Pen Tool

  • Tipografia

    • Saber o básico de tamanho, alinhamento

  • Imagens

    • Cortar(crop), blend mode e ajuste de cor

  • Estilos

    • background, border, shadow, Gradient

  • Geral

    • Mask ou máscara
    • Layers ou Camadas
    • Guides ou Guias reguas
    • Web export , exportar pra formatos web

  • Tools

    • Figma(web)
    • adobe xd
    • sketch
    • designer.io
    • affinity
    • photoshop

  • Figma

    • Cria praticamente toda base da interface e até mesmo exporta os assets com css e imagens

Elementos e Fundamentos

  • Espaço
  • Tipografia
    • Tamanho das fontes e tipos para agregarem objetivo de manter simetria
  • Formas
    • Retangulo
  • Imagens
    • Passar mensagem
  • Cores
    • Quebra, Diversidade e constrate.
  • Ícones
    • Guia ou acessibilidade

Objetivos

- Propósito
  - 
- Consistencia
  - Manter lógica de cores para cada objetivo de comunicação com UX
- Necessários
  - Controle de tv com muitos botões X controle smart tv android tv
  - Ter o que é necessário para 90% dos objetivos dos usuários.
  - Evitar muitas funcionalidades ao preço de focar nas funcionalidader mais usadas

Componentes juntos

- Cores (diversificar)
- Formas (icones pra informar)
- Espaço e imagens

Espaço

  • Componentes são agrupados por espaço
  • Separar componentes
  • Enfase da hieraquia (ex: titulo é mais separado do conteúdo)
  • Um grade destaque geralmente é feito com grande espaço (logomarca e conteudo)
  • Espaços largos separam
  • Espaços curtos conectam
  • Micro espaço x Macro espaço

Sistema

- Linear = 2,4,6,8 ...
- Geométrica = 2, 4, 8, 16 
- O sistema geométrico cria uma comuniação mais efetiva em grandes quantidades
- Espaço x Meio

O que NÃO se deve fazer

- Não ter um sistema
- Aproximar itens não relacionados
- Não colocar espaço entre conteúdo e caixa(buttons, divs)
- ignorar no meio / contexto

Grid

  • Definição de Grid

    • Definir Container
      • Tamanho
        • Tanto em porcentagem ou valores fixos
        • Exemplo 1200px
      • Definir o total de colunas
        • Padrões de corte mais utilizados são 12 e 16 colunas
        • Calculo 12 / 4 = 3 colunas
        • Calculo 16 / 4 = 4 colunas
    • Definir o gutter
      • Distância de espaçamento entre colunas
      • 20px , 32px ...
    • Definir Breakpoints
      • Momentos do site que precisaremos quebrar o grid ou diminui-lo pra caber em diversas resoluções
      • Diminuir o tamanho do container e colunas
      • Diminuir o conteúdo e manter o gutter em relação tamanhos de tela 1200, 1080, 800 e etc.
    • Calulo da Grid fixa
      • (Container / Total colunas * Numero de colunas) - Gutter.
      • Ex1 :
      • Container = 1200
      • Total de Linhas = 12
      • Numero de Colunas = 1
      • Gutter = 20px
      • (1200px / 12 * 1) - 20px = 80px
      • (780px / 12 * 1) - 30px = 230px
    • Calulo da Grid com porcentagem
      • (100% / Total colunas * Numero de colunas).
      • ex
        • 100% / 12 x 7

  • Ferramentas

    • Desing Grid Overlay (via browser)

Formas

Objetivos

  • Consistência
  • Contraste
  • Comunicação

Tipos

  • Orgânicas

    • Serifadas, intimista, entrega mais emocional.
    • http://www.sarahsampsel.com/
      • Objetivo: Uma pessoa que trabalha sozinha, com pegada intimista, usando poucas formas geométricas. Emocional com organico

  • Geométricas

    • Elementos com Simetria, futurista.
    • https://curology.com/
      • Objetivos: Comunica precisão e ambiente Futurista com geometria, com algumas formas geométricas para passar tranquilidade e não medo.

  • Híbridos

    • https://dumdum.studio/
      • Objetivos: Trabalho artitisco de pessoas trabalhando. Fontes geométricas e logo orgânico)

Referências

https://www.dropbox.com
https://stripe.com/ie
http://dumdum.mx
https://curology.com
http://sarahsampsel.com
http://techfestival.co
https://www.tastecooking.com

Linhas e Ornamentos

  • Separar conteúdos diferentes
  • Não deve entrar em conflito com conteúdo, pouco contraste(opacidade).
  • Usar no máximo 1px / 2px de tamnho.
  • Baixo contraste (cores, intensidades baixas)
  • Quando a forma / espaço não separam

Ornamento e separadores

Referencias Sobre linhas e ornamentos.

http://living-form.com/
https://stripe.com/
https://gosimple.com/
https://tryingtowork.in/
http://blog.annasheffield.com/
http://techfestival.co/
http://hotelharry.com.au/bar/
https://www.wealthfront.com/
https://brandless.com/
https://madebydusk.com/
http://makeitlast.se/
https://www.villagevoice.com/
https://www.flambette.com/en/
https://arbetet.se/

Imagens e Ilustrações

  • Usar imagens de alta resolução
  • Não esmagar imagens destruindo a proporção.
  • Onde conseguir imagens:
    • Stock (pagos)
    • shuttestock.com
    • Free
      • unsplash.com (backgrounds)
    • Contrato
      • Valorizar mão de obra específica de outas espertises como fotografia, ilustração e etc.

Formatos

  • JPG
    • Fotografias / Ilustrações realistas
  • PNG
    • Icone, Marca
  • SVG
    • Icones, Marcas Vetorias. Resolução infinita ou definida por código.
    • Mais leve e manipulado via CSS
  • Exportar em resoluções em @1x, @2x e @3x.

Icones

  • Familia de icones em SVG
    • flaticon.com
    • webalys.com

Cores

Teoria das Cores

Color Guide Example

  • Contraste
  • informação/estado
    • globo.com
  • Esquemas de cores
    • adobe cc color
    • guia emocional marcas
    • orange and blue para capas de fimes
  • Significados
    • Varia de cultura, tempo e nação
    • Verde
      • Natural, descanso, positividade
      • Em Notificações
        • Sucesso, Finalizado, Online, Livre.
    • Vermelho
      • Em Notificações
        • Falha, Erro, Offline, Proibido, Alerta, Cheio/escasso/desativado.
    • Amarelo (laranja ou abóbora)
      • Em Notificações
        • Atenção, Advertência, Ação requerida(formularios), Quase cheio
    • Azul
      • Sabedoria, Lealdadade, inteligência
      • Em Notificações
        • Notificação, Ação, link
    • Cinza ou tons de cinza
      • Em Notificações
        • Desativados, desabilitado ou travado.
    • Roxo
      • Nobreza
    • Rosa
      • Flores, Feminino ou amor.
    • Preto
      • Luxo, secreto, luto.
    • Branco
      • Paz, Pureza, inocência.

Cores em Interfaces

  • Base
    • Cor primaria.
    • Definir estilo de geral do site.
    • Basear cor na filosofia da marca
    • Pesquisar concorrentes para não ter semelhanças gritantes ou ver as tendências.
  • Ênfase
    • Chamar atenção
    • Contratar com a primária (laranja)
    • Pode ser a matiz da primária.
    • Usada em botões, backgrounds e ornamentos de forma sutil em pontos estratégicos.
  • Suporte
    • Tipografia, usa-se cores de suporte nos textos
    • Podem possuir traços da base. Criar um cinza misturado com cor de base(azul por exemplo)

Cores na prática

  • Buscar referência de cor em portais como dribbble.com e dribbble.com/colors
  • Testar mais no color.adobe.com para localizar cores complementares
  • Como alternativa paletton.com tem uma saturação e variação rotacional de cores abrangente.
  • Todos os testes nos portais acima encontram melhor escala/esquema de cores
  • Inspiração de paletas de cores no colorhunt.co podem ser bem acentuadas.
  • desing-seeds.com/blog pega cores de fotografias e elabora esquemas de cores de paletas diversas.

Variação de cores

  • Criar tons mais claros e escuros
  • Luminosidade
    • Hue, Saturation e Brightness(HSB)
    • Diminuir saturação e aumentar brilho ou Vice-versa
    • Matiz mover de acordo com luminosidade
    • Tons diferentes de uma cor base
    • Propósito

Tipografia

  • Publicação "Web Design is 95% Typography" - ia.net
  • Usar analisador de fonts, como:
    • fontFace do Chrome
    • Whatfonts

Negrito, Itálico, Maiúsculas e Versaletes

  • Small Caps

    • Real e Fake. A consistência da linha da fonte precisa seguir, neste padrão, senão é um fake
    • Versaletes
      • Ligaturas
        • Juntar uma letra e outra.
      • Ref: helpx.adobe.com / versalets

  • Contraste cores ao texto

    • Tons de cinza puro, tons de preto azulado, tons de cinza escuro
    • Teste de contraste
      • leaverou.github.io/constrast-ratio
    • Exemplo texto claro com background escuro
      • forwardhq.com
      • bossetools.com
    • Exceção onde quebra regra corpo texto colorido:
      • littlewolf.coffe
      • leedsb
      • goodcompany
      • algrim.co

Classificações Tipográficas

Escolhendo e Combinando Tipografias 1

  • Já existe uma marca ?
    • Utiliza serifa, Display.
  • Qual sua mensagem ?
    • É moderno ?
      • hitec, usa sem serifa.
    • É conservador ?
      • Mixo serifado com sem serifa
    • É fácil ?
      • Pesquisar segmentos atuais e o contexto ja visto
    • O que estão utilizando ?
      • Ver concorrentes e maior segmentos
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment