40 sites que todo ux/ui designer deveria conhecer

Marketing

14 de jan. de 2021

40 sites que todo ux/ui designer deveria conhecer

Todo designer tem um ritual de início de projeto. As referências são uma etapa crucial na vida do ux/ui. Com a ideia já em mente, desenvolver um layout que seja bonito e que apresente boa performance é um desafio.

Sabendo que nem sempre encontramos boas referências, por isso, separamos 40 sites que vão te ajudar, tanto na busca de inspirações quanto na hora de executar seu trabalho.

Separamos eles em 4 categorias para facilitar, já aproveita e favorita essa aba para consultar sempre que precisar.

Inspirações Visuais

1. Behance

Talvez essa seja a dica mais óbvia de toda a lista. O Behance é a rede social dos designers e ponto. Lá, grande parte da classe publica seu portfólio.

A plataforma oferece muito mais do que a publicação e visualização dos trabalhos. É possível curtir e interagir com os usuários e empresas que se cadastraram, além de possuir a ferramenta de salvar os projetos. Dessa forma, você pode consultar sempre que quiser ideias que te interessam.

2. Dribbble

Também muito popular entre os designers, o Dribbble já possui maior foco na parte visual.

Enquanto o Behance permite projetos de fotografia, arquitetura e até gráficos, o Dribbble tem foco em Branding, aplicativos, design de produtos e outras variáveis.

O site é todo em inglês, mas é bem intuitivo e pode ajudar na hora que dá aquela travada no desenvolvimento de um projeto.

3. Designspiration

Um site de busca de imagens e cores para criar mood boards, encontrar arte, design, logotipos, fotografia, inspiração para apps e UI

Lá, você pode ver trabalhos incríveis com diversas indentidades visuais

Quem trabalha com branding pode salvar esse aqui tranquilamente.

4. Awwwards

O Awwwards é o paraíso para quem trabalha com Web design. O site premia os melhores layouts, usabilidade, criatividade, conteúdo entre vários outros detalhes.

Lá é o ponto de encontro para quem deseja aprender ainda mais com seu trabalho.

5. Site Inspire

Mais um portal voltado para Web designers. O Site Inspire mostra as melhores ideias de sites. Você pode procurar por estilos, plataformas e assunto.

É ideal para busca de ideias específicas e áreas similares na qual você está trabalhando.

6. Land-Book

Ainda pensando em Web design, o Land-book é voltado para layout de Landing Pages (como o próprio nome já diz).

Esse é mais um site para busca de ideias, visto que empresas e pessoas únicas publicam lá seus trabalhos.

7. Ecomm.design

O Ecomm.design é outro site de referências para quem trabalha com Web design. Com filtros bastantes simples e diretos, o Ecomm pode ser uma ótima pedida para buscas específicas.

8. Mobbin

Se vimos que existem várias plataformas de busca de inspirações de sites, os aplicativos não ficam pra trás.

O Mobbin é isso, um compilado de apps para iOS. Se o seu projeto é voltado para esse sistema, já sabe onde buscar ajuda.

9. Lapa Ninja

Com quase 4 mil referências de landing pages, o Lapa também oferece conteúdo gratuito em Design além de kits de layouts prontos para plataformas como Figma, Sketch e Adobe Xd.

10. Sitesee

Um resumo simples: o Sitesee nada mais é que uma grande galeria de sites que são referências por aí.

11. Pttrns

Uma gigantesca biblioteca de padrões de design e tudo que há de novo. O Pttrns permite busca por popularidade, ano de lançamento e até tags super específicas (como "alien" e "minimal").

Ele também permite busca de elementos específicos. Se busca somente por sidebars, lá está. Deseja ver telas de loading? Sim, você pode.

12. One Page Love

Templates prontos para uso, pagos e gratuitos, além de uma aba de conteúdos de design, Ebook e a Home composta por inspirações em Landing Pages. Esse é o One Page Love.

13. Collect Ui

Como o próprio nome já diz, o Collect Ui é um site de inspirações para quem trabalha com ux/ui design. Ele reúne vários trabalhos (o segredinho é que são layouts pegos do Dribbble). O que muda é basicamente a visualização e os filtros de busca, que podem facilitar muito sua vida.

14. Figma Crush

Os amantes do Figma podem se animar. O Figma Crush reúne kits, templates, wireframes e até ícones gratuitos e pagos, todos voltados justamente para esse software.

O mais legal é que, quem abastece esse site é a própria comunidade do Figma.

15. Pinterest (sim, ele mesmo)

O Pinterest é aquele velho clichê de que a solução muitas vezes está bem mais fácil do que pensamos. Sim, sabemos que tem absolutamente de tudo lá, mas, para um bom pesquisador, isso não é problema.

Não precisamos nem fazer muito para provar o que estamos falando, basta pesquisar “mobile app” e você verá centenas de inspirações. Use a criatividade e aproveite.

Paleta de Cores

16. Coolors

Essa parte pode parecer bem boba para aqueles mais experientes, mas também é uma mão na roda para quem tem dificuldade com as cores.

O Coolors é uma ferramenta de paleta de cores fantástica. Além de gerá-las automaticamente, também possui várias formas de montagem (até mesmo uma que você faz upload de uma foto e tira de lá os tons).

Além disso, a usabilidade do site é incrível. O layout simples e moderno torna o trabalho ainda mais prazeroso.

17. Palettable

Pode ser muito difícil que um site de paleta de cores seja diferente dos demais. O Palettable conseguiu. Ele é basicamente um “tinder das cores”.

Ele vai te mostrando os modelos e você dá Like ou Dislike nelas, até montar sua paleta.

18. Adobe Color

Queridinho de muitos designers, o Adobe Color também é um site completo (além de ter ligação direta com a biblioteca Adobe).

São várias opções de paletas, do monocromatismo até as sombras.

19. Colour Code

Assim como falamos no item 17, um site de paleta de cores precisa se reinventar para ser atrativo. O modo “Free Build” que é justamente a home do site já é uma novidade. Cada cantinho da tela é uma cor que preenche todo o site.

Diferente de vários outros, o Colour Code permite que você monte uma paleta com muito mais de 5 cores.

20. Shutterstock Colors

Você sabia que o Shutterstock tem uma aba no site totalmente voltada para paleta de cores?

Se você já trabalha com esse banco de imagens, boas notícias. A plataforma permite que você trabalhe uma paleta de cores já pronta e o próprio site já lhe fornece imagens correlatas.

21. Color Hunt

Mais um site de paletas de cores, dessa vez, mais simples. O Color Hunt filtra paletas novas, populares e também permite a busca por cor específica.

22. Flat Ui Colors

Logo na primeira página do site, o título chama atenção: “280 cores escolhidas a dedo”.

São paletas simples mas bastante funcionais. Eles já trazem várias combinações possíveis ao clicar sobre um modelo.

O site tem colaboração de 13 designers espalhados pelo mundo e cumpre muito bem seu objetivo.

23. Material Ui Colors

Todo o site do Material Ui é interessante, e a aba de cores também não fica pra trás. Talvez essa seja a ferramenta de cores mais simples que apresentamos aqui. Ela funciona basicamente como uma grande tabela, onde você copia o código da cor só de clicar.

A plataforma também oferece funcionalidades interessantes, como a paleta de cor de vários sites conhecidos.

Ferramentas

24. Invision App

Perfeito para quem precisa criar um quadro de inspirações ou até mesmo uma apresentação de um app, o Invision permite que isso aconteça de forma muito simples, mas poderosa.

Você pode compartilhar o link com o seu cliente para que ele veja o moodboard ou apresentação, faça comentários sobre toda a composição da imagem, desde cores (que são geradas separadamente e automaticamente pelo invision) até o layout.

25. Pik Best

Se você precisa de alguma inspiração e quer um template pro seu app para ter por onde começar, você provavelmente vai procurar nesse lugar.

Pik Best fornece vários layouts prontos para apps, apresentações e diversas outras composições de design. É uma ferramenta bem completa.

26. Up Labs

Não só para o projeto atual, mas pra ter um banco pessoal e te ajudar a ganhar tempo na montagem de telas mais padrões, o Up Labs traz isso e muito mais.

Ícones, UI Kits, temas para sites, ilustrações, mockups e fontes. Ufa, pouca coisa né!? É possível ainda filtrar por ferramenta. Se você usa somente o Figma e precisa de um arquivo no formato desse app, basta filtrar por ele e tudo o que você achar pode ser aberto no programa que você utiliza.

27. Mockplus

Essa ferramenta é uma all-in-one da prototipação. É simples mas robusta, permitindo edição colaborativa entre POs, designers e quem mais estiver envolvido no projeto.

Nele, você encontra várias formas de prototipação e escolhe a que melhor se adequa à sua situação. Por exemplo, se você for um desenvolvedor front-end também, você pode visualizar o código CSS do projeto, que é gerado automaticamente.

28. Remove BG

“Ah, mas eu não sei recortar cabelo, como que eu vou fazer isso que eu tô pensando?”. Já ouviu falar na palavra do Remove BG? Ao longo dos anos, várias ferramentas tentaram fazer um recorte automático e falharam, mas o remove.bg veio pra mudar isso.

Suas imagens ficam incrivelmente bem recortadas, mas é uma ferramenta paga. No modo gratuito, suas fotos podem ser baixadas apenas em resolução mais baixa. De toda forma, é um baita de um software.

29. Contrast Checker

Além de utilizar alguma ferramenta que indicamos para escolher as cores do seu projeto e montar uma paleta consistente, você pode ainda checar se o contraste entre as cores está legal ou não.

No Contrast Checker você consegue verificar a legibilidade e alguns outros indicadores que o software oferece. É simples, rápido e eficiente.

30. Lucid Chart

Criar fluxogramas, mapas mentais e até wireframes nunca foi tão fácil. Aqui, é possível fazer tudo isso de forma colaborativa, agregando muito a um projeto que necessite de todos esses processos. E convenhamos, a maioria dos projetos de UX e/ou UI precisam.

Lucid Chart é extremamente fácil e interativo de utilizar.

31. Balsamiq

Pronto para criar wireframes de um jeito super divertido e colaborativo? O Balsamiq é essa ferramenta!

Ele traz características de interfaces dos anos 90/2000 para os wireframes, e torna tudo bastante engraçado, mas ao mesmo tempo extremamente funcional. Eles possuem ampla experiência de mercado e estão constantemente aprimorando a ferramenta. Vale a pena dar uma olhada.

32. MockFlow

Mais uma ferramenta de prototipação, que na verdade não é apenas mais uma. Assim como cada uma tem seu ponto forte, o MockFlow também tem o seu.

O software é bem leve e gera interfaces a partir dos wireframes montados automaticamente. E não para por aí, ainda é possível montar fluxogramas, sketchs, style guides e muito mais. Completo, bonito e integrado.

33. Screenlane

Com o Screelane, você consegue destrinchar sites, apps, softwares dos mais variados e visualizar tela por tela para ter como referência visual para o seu projeto.

Bem poderoso! É um banco de referências enorme e constantemente atualizado.Ah, detalhe, os projetos são reais. Podemos encontrar, por exemplo, ToDoist, Zara e Medium.

34. Freepik

Não importa qual área do design você se encontre, em algum momento você já ouviu ou vai ouvir falar do Freepik. Trata-se do maior banco de vetores gratuitos do mundo.

Ele ajuda não só com referências, mas com arquivos vetoriais incríveis totalmente customizáveis. Ah, agora eles contam também com um banco de ilustrações e fotografias de altíssima qualidade.

35. Flaticon

O Flaticon também faz parte da Freepik Company e é o maior banco de ícones customizáveis do mundo.

Nós utilizamos bastante iconização em nossos projetos de UI e UX, né? Aqui podemos encontrar estilos variados e ter o ícone certo para o nosso projeto. É uma ferramenta poderosa para quem precisa de mais agilidade na hora de montar um projeto, ou mesmo quem não tem familiaridade com desenho de ícones.

36. UnDraw

Um dos sites mais completos de ilustrações totalmente gratuitas e customizáveis. Você pode escolher a cor principal dos personagens e ambientes direto pelo site e exportar em svg (arquivo vetorial para web, totalmente editável) ou png.

Perfeito!