Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
UI Designers
facebook.com/uilab.school
uilab.com.br
Recurso
Contents
Cores 6
Tipografia
23
cones
31
Inspirao
39
Ferramentas 52
Banco de imagens e vdeos
80
Recursos
90
Checklists
96
Blogs 100
Cores
facebook.com/uilab.school
Recurso
CORES
Adobe Color CC
No Adobe Color CC voc encontra vrias paletas de cores e conta com as
possibilidades de edio e criao de novas paletas. Voc pode utilizar
vrios sistemas de cores, como tridico, complementar e anlago
para compor seus prprios temas.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso 01
CORES
Colour Lovers
O Colour Lovers agrega cores, paletas e patterns com filtros de
popularidade. Desta forma voc pode saber quais cores ou paletas so
as mais utilizadas pelos usurios. possvel submeter suas prprias
cores e paletas tambm.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso 02
CORES
Coolors
O Coolors tem uma proposta parecida com o Adobe Color CC.
Nele possvel montar paletas ou exportar em diversos formatos
as que j esto no site.
Plataforma: Web
Verso: 2.2.1
FREE
facebook.com/uilab.school
Recurso 03
CORES
Material Palette
Escolha duas cores do Material Design da Google e veja como elas se
comportam juntas em um componente. O site tambm fornece toda
a paleta de cores final da composio.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso04
CORES
Material UI Colors
Material UI Colors um site que agrega as cores do Material Design da
Google. Basta um clique em cima da cor e ela j copiada. Clicando em
More possvel ver a variao com a adio de branco ou de preto.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso05
CORES
Colinkeany
Esse site permite que voc misture duas cores dentre diversos tipos
de paletas para formar gradientes incrveis.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso 06
CORES
Color Hunt
O Color Hunt um site que rene vrias paletas de cores fantsticas e com
atualizaes dirias. Voc ainda capaz de sugerir paletas de cores
para serem includas no site.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso07
CORES
Colour Code
O Colour Code mostra as cores de acordo com a posio do mouse na
tela. Quanto mais prximo do topo, mais escuras so as cores e quanto
mais afestado, mais clara elas ficam. Movendo o mouse horizontalmente
voc consegue escolher as diferentes matizes.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso08
CORES
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso 09
CORES
Poke Palettes
f de Pokmon? Esse site rene diversos Pokmons e suas respectivas
cores. Voc pode digitar o nome deles ou dar refresh na pgina para ver
outros personagens.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso 10
CORES
Brand Colors
Brand Colors rene a paleta de cores de grandes marcas mundiais.
possvel baixar todas as cores em diversos formatos diferentes.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso11
CORES
UI Gradients
Diversos gradients belssimos para utilizar nos seus projetos.
Utilize as setas do teclado para navegar ou exiba todos os gradients
clicando na opo no canto inferior esquerdo.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso12
CORES
Flat UI Colors
O site Flat UI Colors agrupa diversas cores flat de diferentes tonalidades
para serem utilizadas nos seus projetos.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso 13
CORES
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso14
CORES
0to255
0to255 uma ferramenta que possibilita ver a variao de uma cor
do branco ao preto.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso15
CORES
Contrast Ratio
Constrat Ratio demonstra o quo legvel est a combinao de cores entre
fundo e o texto. Ele testa em vrios tamanhos e pesos de font.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso16
Tipografia
facebook.com/uilab.school
Recurso
TIPOGRAFIA
Type Genius
O Type Genius sugere combinaes de fontes a partir da sua fonte
principal. Ele tambm mostra ela aplicada em um exemplo pra voc
ter noo do resultado final.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso17
TIPOGRAFIA
Google Fonts
Se voc tem dvida de que fonte utilizar nos seus sites, opte por uma
Google Web Font. No tem erro! O Google tem uma biblioteca enorme
de fontes preparadas para projetos web.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso18
TIPOGRAFIA
Prototypo
Gosta de personalizar fontes? Ento experimente o Prototypo. Ele permite
editar vrias caractersticas das fontes at ela ficar do jeito que voc quer.
Plataforma: Web
facebook.com/uilab.school
Recurso 19
TIPOGRAFIA
Transfonter
O Transfonter permite gerar arquivos @font-face de qualquer fonte .TTF
ou. OTF para a utilizao em sites.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso20
TIPOGRAFIA
Fontastic
O Fontastic uma ferramenta capaz de criar sua prpria fonte de cones.
Basta selecionar dentre os mais de 9.000 cones do site e gerar sua fonte.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso21
TIPOGRAFIA
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso22
TIPOGRAFIA
Typescale
Veja com o Typescale como sua fonte ficaria em diversos tamanhos
e combinaes de estilo.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso 23
cones
facebook.com/uilab.school
Recurso
CONES
facebook.com/uilab.school
Recurso24
CONES
SVG Porn
Um site que rene diversos logotipos e smbolos de marcas famosas.
Todos eles esto em .SVG, permitindo o uso em diferentes tamanhos
sem a perda de qualidade.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso25
CONES
Icomoon App
O Icomoon um site que possibilita a criao de fontes de cones.
extremamente til para quem deseja padronizar a iconografia
de algum projeto.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso26
CONES
Font Awesome
O Font Awesome uma grande biblioteca de cones agrupados em uma
fonte que pode ser utilizado em projetos digitais para padronizar
a iconografia. um dos mais utilizados atualmente.
Verso: 4.4.0
FREE
facebook.com/uilab.school
Recurso27
CONES
Iconjar
Iconjar um app que permite a organizao, a busca e o uso
de seus cones.
Plataforma: Mac
FREE
facebook.com/uilab.school
Recurso28
CONES
Simples Icon
O site Simple Icons rene inmeros cones de marcas e servios famosos.
Ele tambm fornece a cor principal e seu hexadecimal.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso 29
CONES
Icons8
O site Icons8 oferece uma variedade enorme de pictogramas que podem
ter suas cores e estilos editados.
facebook.com/uilab.school
Recurso 30
Inspirao
facebook.com/uilab.school
Recurso
INSPIRAO
Dribbble
O Dribbble rene trabalhos de grandes profissionais de diversas reas.
necessrio receber um convite para contribuir com as inspiraes,
portanto, o nvel de trabalhos altssimo.
facebook.com/uilab.school
Recurso 31
INSPIRAO
Behance
O Behance um servio que permite a criao do seu prprio portfolio.
tambm uma rica fonte de inspirao para diversos ramos do design,
arte e arquitetura.
FREE
facebook.com/uilab.school
Recurso 32
INSPIRAO
Awwwards
O site Awwwards uma curadoria que premia os melhores projetos digitais
do mundo. L voc encontra muitos projetos que foram feitos
pensando fora da caixa.
FREE
facebook.com/uilab.school
Recurso 33
INSPIRAO
FREE
facebook.com/uilab.school
Recurso 34
INSPIRAO
Css Awards
CSS Awards entra tambm na categoria de curadorias de melhores sites
da web. tima referncia para efeitos e estilos de CSS.
FREE
facebook.com/uilab.school
Recurso 35
INSPIRAO
FREE
facebook.com/uilab.school
Recurso 36
INSPIRAO
Call to Idea
Call to Idea rene diversas inspiraes separadas por categoria.
til para agilizar uma busca de inspirao.
FREE
facebook.com/uilab.school
Recurso 37
INSPIRAO
FREE
facebook.com/uilab.school
Recurso 38
INSPIRAO
100 Days UI
O nome j diz tudo! 100 dias, 100 elementos de UI para inspirar voc.
FREE
facebook.com/uilab.school
Recurso 39
INSPIRAO
Pttrns
Pttrns um timo lugar para voc estudar padres de UI Design utilizados
em vrios projetos de grandes servios e empresas.
FREE
facebook.com/uilab.school
Recurso40
INSPIRAO
Pattern Tap
O Pattern Tap um timo site para descobrir padres de UI Design
para seus projetos.
FREE
facebook.com/uilab.school
Recurso41
INSPIRAO
Site Inspire
O Site Inspire rene vrios bons exemplos de projetos de UI Design para
inspirao.
FREE
facebook.com/uilab.school
Recurso42
Ferramentas
facebook.com/uilab.school
Recurso
FERRAMENTAS - DESIGN
Pixel Map
Pixel Map uma ferramenta que possibilita a criao de mapas
personalizadas para inserir em seus projetos. Voc pode editar as cores,
formatos e inserir elementos.
Verso: beta
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso 43
FERRAMENTAS - DESIGN
Mapbox
Mapbox um servio que disponibiliza vrias opes para voc trabalhar
com mapas.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso44
FERRAMENTAS - DESIGN
Device Metrics
Essa pgina do Google Design compila diversos devices e seus tamanhos,
dimenses e densidades. Se estiver com dvidas sobre quais tamanhos
projetar seus designs, esse o site ideal.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso45
FERRAMENTAS - DESIGN
Sketch App
O Sketch App uma das melhores ferramentas para quem trabalha com
UI Design. Ele simples, tem timos recursos e vrios plugins para
otimizar seu trabalho.
Plataforma: Mac
facebook.com/uilab.school
Recurso46
FERRAMENTAS - DESIGN
UI Tiles
Sistema para a construo rpida de fluxogramas visuais e mapas
de site para projetos web.
FREE
facebook.com/uilab.school
Recurso47
FERRAMENTAS - DESIGN
Photoshop CC
O bom e velho Photoshop muito til para tratar fotos ou criar algumas
coisas para suas interfaces. Muitas pessoas utilizam para projetar UI,
mas ele acaba gerando arquivos finais enormes e pesados.
facebook.com/uilab.school
Recurso48
FERRAMENTAS - PROTOTIPAO
Invision App
O Invision App um dos melhores servios de prototipao. Ele permite
prototipar nos formatos Desktop, Tablet e Smartphone. Alm disso, possui
um recurso chamado Boards que muito til para montar style guides.
Plataforma: Web
facebook.com/uilab.school
Recurso 49
FERRAMENTAS - PROTOTIPAO
Marvel App
O Marvel App um bom servio de prototipao tambm. Conta com
recursos semelhantes ao Invision e tem integrao com o Sketch.
facebook.com/uilab.school
Recurso50
FERRAMENTAS - PROTOTIPAO
Pixate
Pixate um servio comprado pela Google recentemente.
bom para prototipar e criar interaes para seus projetos.
Plataforma: Desktop
FREE
facebook.com/uilab.school
Recurso51
FERRAMENTAS - PROTOTIPAO
Principle
Principle uma ferramenta exclusiva para a plataforma Mac que permite
a criao de interaes em seus designs. simples de utilizar
e h a possibilidade de exportar para .GIF.
Plataforma: Mac
facebook.com/uilab.school
Recurso52
Trello
O Trello um servio de gerenciamento de projetos simples e eficiente.
Utilizamos ele no UI Lab para todo tipo de planejamento e funciona muito
bem para equipes.
Plataforma: Web
facebook.com/uilab.school
Recurso 53
Asana
Asana tambm um gerenciador de tarefas que ajuda na organizao
dos projetos. Teve seu design refeito recentemente e sua experincia
foi totalmente otimizada.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso54
Basecamp
O Basecamp um dos gerenciadores de tarefas mais utilizados.
Conta com diversos recursos interessantes e pode ajudar no controle
dos seus projetos com grandes times.
Plataforma: Web
facebook.com/uilab.school
Recurso55
Podio
O Podio outro gerenciador de tarefas simples mais que traz recursos
interessantes para o controle dos seus projetos.
Plataforma: Web
VERSO PAGA
facebook.com/uilab.school
Recurso56
FERRAMENTAS - FINANCEIRO
Organizze
O Organizze um excelente gerenciador financeiro. Conta com recurso
de metas e diversos tipos de relatrios. simples de utilizar
e tem uma verso free que supre suas necessidades.
facebook.com/uilab.school
Recurso57
FERRAMENTAS - FINANCEIRO
Guia Bolso
O Guia Bolso um gerenciador financeiro interessante. Tem recursos de
metas, categorizao automtica e integrao com os bancos.
Mas seu design no to atraente.
FREE
facebook.com/uilab.school
Recurso58
Frontify
O Frontify perfeito para montar o guia de estilo dos seus projetos.
Ele tambm permite criar e compartilhar prottipos.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso 59
Slack
O Slack um excelente recurso para tornar a comunicao com seu time
mais fcil. Possui integraes com dezenas de outros apps para deixar
tudo num s lugar.
facebook.com/uilab.school
Recurso60
Evernote
O Evernote a melhor aplicao para tomar notas. Voc pode salvar fotos
e anexar outros tipos de arquivos, separando por cadernos.
facebook.com/uilab.school
Recurso61
Feedly
O Feedly um agregador de notcias muito eficiente. Com ele voc pode
receber todas as atualizaes dos sites que voc costuma acompanhar,
em um nico lugar.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso62
Pocket
Com o Pocket voc pode salvar os melhores artigos e clssifica-los com
tags para ler depois.
FREE
facebook.com/uilab.school
Recurso 63
Todoist
Todoist um app para gerenciar tarefas simples e prtico. Possui verses
para desktop, mobile e web. A verso paga conta com vrios
recursos interessantes.
facebook.com/uilab.school
Recurso64
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso65
Plataforma: Web
VERSO PAGA
facebook.com/uilab.school
Recurso66
FERRAMENTAS - COMPARTILHAMENTO
Avocode
Avocode um app que facilita a entrega dos seus projetos em Photoshop
ou Sketch para o desenvolvedor que no possui essas ferramentas.
Plataforma: Mac
VERSO PAGA
facebook.com/uilab.school
Recurso67
FERRAMENTAS - COMPARTILHAMENTO
Zeplin
O Zeplin til na hora de compartilhar seus projetos em Sketch com o
desenvolvedor. O app l seu arquivo e fornece todos os assets, dimenses,
cores e tipografias.
Plataforma: Mac
facebook.com/uilab.school
Recurso68
FERRAMENTAS - COMPARTILHAMENTO
Dropbox
O Dropbox excelente para manter seus arquivos na nuvem e nunca mais
perd-los. Voc tambm pode compartilhar suas pastas com parceiros
de projeto ou seus amigos.
facebook.com/uilab.school
Recurso 69
Banco de imagens
e vdeos
facebook.com/uilab.school
Recurso
Coverr
Belssimos vdeos para voc utilizar no background dos seus projetos.
Todos eles so frees.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso70
Unsplash
Um dos sites mais populares para encontrar belssimas imagens.
Todas elas em alta definio e livres para utilizar.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso71
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso72
MMT
MMT outro site que rene diversas imagens interessantes com atribuio
comercial livre para uso.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso 73
Little Visuals
Concentra vrias imagens em alta qualidade de paisagens
e outros tipos de cenrios.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso74
Boss Fight
Muitas imagens fantsticas e de alta qualidade separadas em categorias
para serem utilizadas livremente nos seus projetos.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso75
FancyCrave
O site FancyCrave tambm rene vrias imagens muito belas e livres
para uso. atualizado diariamente.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso76
Tookapic
Milhares de imagens para utilizar em seus projetos. Algumas imagens so
free e outras premium.
Plataforma: Web
facebook.com/uilab.school
Recurso77
Foodies Feed
Um banco de imagens com foco em fotos de alimentos e diversos
tipos de comidas.
Plataforma: Web
facebook.com/uilab.school
Recurso78
Recursos
facebook.com/uilab.school
Recurso
RECURSOS
Pixeden
O Pixeden um site que rene centenas de recursos para UI Designers,
como mockups, cones e vetores.
Plataforma: Web
facebook.com/uilab.school
Recurso 79
RECURSOS
Sketch Repo
Esse um site para encontrar mockups, kits e diversos
recursos para quem trabalha com o Sketch.
Plataforma: Web
facebook.com/uilab.school
Recurso80
RECURSOS
Graphic Burguer
O Graphic Burger agrega vrios kits de UI, mockups, fontes
e outros recursos para otimizar o trabalho.
Plataforma: Web
facebook.com/uilab.school
Recurso81
RECURSOS
Plataforma: Web
facebook.com/uilab.school
Recurso82
RECURSOS
UISpace
Um site que contm vrios kits, cones, flowcharts e outros recursos
para quem trabalha com UI Design.
Plataforma: Web
facebook.com/uilab.school
Recurso 83
Checklists
facebook.com/uilab.school
Recurso
CHECKLISTS
Designers Checklist
Vrios Checklists para designers se guiarem em um comeo de projeto,
enquanto projetam e tambm na hora de revis-lo.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso84
CHECKLISTS
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso85
CHECKLISTS
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso86
Blogs
facebook.com/uilab.school
Recurso
BLOGS
Invision Blog
O blog do Invision recheado de contedos interessantes para quem
trabalha com design digital. Os posts so feitos por pessoas convidadas e
pela equipe.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso87
BLOGS
Uideo
Um compilado de 309 talks para designers de 47 conferncias sobre UI/UX
ao redor do mundo. Muito contedo relevante para voc absorver.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso88
BLOGS
Good UI
O Good UI rene centenas de dicas valiosas sobre User Interface.
So dicas rpidas e certeiras. Tambm conta com uma newsletter
para acompanhar tudo em primeira mo.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso 89
BLOGS
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso 90
BLOGS
Arquitetura da Informao
O blog Arquitetura de Informao um dos melhores canais
de contedo focados em UX, UI e AI no Brasil.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso 91
BLOGS
1910
1910 um estdio de design digital que produz alguns contedos
bem interessantes com foco em alinhamentos, tipografia e grids.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso 92
BLOGS
Designmodo
O Designmodo produz contedos interessantssimos e valiosos sobre
diversos aspectos voltados para o design digital. Alm disso,
tem um marketplace de kits e outros recursos.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso 93
BLOGS
Signal vs Noise
Signal v. Noise uma publicao do Basecamp com foco em vrios
assuntos voltados para a web. Muito interessante e enriquecedor.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso 94
BLOGS
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso 95
BLOGS
UI Lab School
A publicao do UI Lab no Medium no poderia ficar de fora!
Estamos desenvolvendo vrios artigos interessantes sobre UI Design
e assuntos relacionados.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso 96
BLOGS
UXPin
O Blog do UX Pin sempre tem vrios artigos interessantes sobre UI e UX
que geralmente trazem tpicos dos timos e-books que eles produzem.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso 97
BLOGS
Smashing Magazine
O blog Smashing Magazine um dos melhores portais para aprender
sobre UI, UX e Front-End. Contedos densos mas recheados
de informaes.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso 98
BLOGS
Google Design
O Google tambm possui sua publicao no Medium e l voc encontra
vrios artigos escritos pelos funcionrios da gigante.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso 99
BLOGS
HeyDesigner
Hey Designer uma curadoria de artigos sobre UI, UX, prototipao
e outras reas do Design Digital.
Plataforma: Web
FREE
facebook.com/uilab.school
Recurso100
2016
facebook.com/uilab.school
uilab.com.br