Top Inspirações de Design para Página de Login e Cadastro
Tags: design, authorization, login
Published: 2020-08-03 19:27:37

---
title: Top Inspirações de Design para Página de Login e Cadastro
published: true
date: 2020-08-02 02:37:11 UTC
tags: Design,authorization,login
canonical_url: https://marquesfernandes.com/top-inspiracoes-de-design-para-pagina-de-login-e-cadastro/
---

Encontrar inspiração pra design, especialmente para pessoas sem muito bom gosto como eu, pode ser um desafio. Uma página de login bonita se torna convidativa para o seu usuário se registrar, e é o primeiro contato com qualquer plataforma que ele terá. Como diria o velho ditado “a primeira impressão é a que fica”, então colocar uma atenção especial nessa página é muito importante. Separei algumas inspirações que encontrei pela internet e que me ajudam quando preciso começar algum projeto, sou chato com layout e ao mesmo tempo ruim, então sem ajuda de um designer, ~~copiar~~ inspirar é o que resta!

## Design Simples e Eficiente

Páginas de login não precisam ser extremamente elaboradas para serem bonitas e eficientes. Confira alguns exemplos simples e minimalista:

### Medium

[![medium.com](https://marquesfernandes.com/wp-content/uploads/2020/08/image-1024x487.jpg)](https://medium.com/)<figcaption><a href="https://medium.com/" target="_blank" aria-label="undefined (opens in a new tab)" rel="noreferrer noopener">Medium</a></figcaption>

Medium é uma plataforma de publicação de textos e artigos mundial, reconhecida por ter um design extremamente otimizado para leitura, possui uma tela de login no formato de um popup clean.

### Dev.to

[![DEV Community](https://marquesfernandes.com/wp-content/uploads/2020/08/screenshot-dev.to-2020.08.01-23_08_02-1024x487.png)](http://dev.to/)<figcaption><a href="http://dev.to/" target="_blank" aria-label="undefined (opens in a new tab)" rel="noreferrer noopener">Dev.to</a></figcaption>

DEV Community é uma plataforma de publicação de artigos voltada para o mundo de tecnologia, eles trabalham seu design e comunicação sempre com bastante informalidade e bom humor. Sua tela de login e cadastro é bem simples mais convidativa.

### Nubank

[![Nubank](https://marquesfernandes.com/wp-content/uploads/2020/08/download-2-1024x487.png)](https://app.nubank.com.br/#/login)<figcaption><a href="https://app.nubank.com.br/#/login" target="_blank" aria-label="undefined (opens in a new tab)" rel="noreferrer noopener">Nubank</a></figcaption>

Nubank se tornou a conta queridinha do brasilero, conhecida por sempre ter um belo trabalho de design e usabilidade, foca desde sua tela de login a marca forte de sua identidade visual, o roxo.

## Designs com Movimento

Entreter e encantar os seus usuários na página de login e cadastro, com certeza vai deixar uma boa primeira impressão, aplicando designs mais elaboradas e com bastante movimento, trazem modernidade ao layout.

### Login Page Illustration Exploration by Aliffajar

[![Login Page Illustration Exploration by Aliffajar](https://marquesfernandes.com/wp-content/uploads/2020/08/ezgif-7-756edc50b5a1.gif)](https://dribbble.com/shots/5401591-Login-Page-Illustration-Exploration-for-Movie-Website)<figcaption><a aria-label="undefined (opens in a new tab)" href="https://dribbble.com/shots/5401591-Login-Page-Illustration-Exploration-for-Movie-Website" target="_blank" rel="noreferrer noopener">Login Page Illustration Exploration by Aliffajar</a></figcaption>

Um design feito por Aliffajar, desenvolvido para uma plataforma de cinema/vídeo, possui muito apelo gráfico, com muitas ilustrações e movimentos de transição.

### Dipnet login page by Roman Bystrytskyi

[![Dipnet login page by Roman Bystrytskyi](https://marquesfernandes.com/wp-content/uploads/2020/08/ezgif-7-4be6dc24def6.gif)](https://dribbble.com/shots/3829284-Dipnet-login-page)<figcaption><a href="https://dribbble.com/shots/3829284-Dipnet-login-page" target="_blank" aria-label="undefined (opens in a new tab)" rel="noreferrer noopener">Dipnet login page by Roman Bystrytskyi</a> </figcaption>

Otimizar todas as telas do seu aplicativo pode ser uma boa alternativa, utilizar a tela de login para informar ou treinar seus usuários se torna um bom uso do espaço. Podemos ver como esse design feito pelo Roman Bystrytski usa a lateral da parte de login para exibir informações úteis para o usuário.

## Designs com Ilustrações

O uso de ilustrações é muito comum ao desenhar uma página de login ou cadastro, podem trazer um ar de modernidade ou até mesmo mais formal.

### Dribbble

[![dribbble.com](https://marquesfernandes.com/wp-content/uploads/2020/08/image-1-1024x487.jpg)](https://dribbble.com/session/new)<figcaption><a href="https://dribbble.com/session/new" target="_blank" aria-label="undefined (opens in a new tab)" rel="noreferrer noopener">Dribbble</a></figcaption>

Dribbble é uma comunidade para compartilhamento de conteúdo artístico, muito utilizada por designers, fotógrafos e ilustradores. Por trabalhar com um público extremamente artístico e crítico, seu design precisa ser impecável, por isso traz uma página de login simples mas muito bonita, onde a imagem na lateral esquerda é alternada conforme o carregamento da página.

### Headspace

[![Headspace](https://marquesfernandes.com/wp-content/uploads/2020/08/image-1-1024x487.png)](https://www.headspace.com/pt/login)<figcaption><a href="https://www.headspace.com/pt/login" target="_blank" aria-label="undefined (opens in a new tab)" rel="noreferrer noopener">Headspace</a></figcaption>

Headspace é um aplicativo para meditação guiada, toda a sua identidade visual é focada em trazer calma e harmonia, assim como o serviço prestado. Com um tom alegre e informal, utilizando cores pastéis, traz uma página de login e cadastro simples, com uma ilustração que transmite calma, exatamente o que o aplicativo propõe.

### Multiple Login Form by Mahisa Dyan Diptya

[![Multiple Login Form by Mahisa Dyan Diptya](https://marquesfernandes.com/wp-content/uploads/2020/08/multiple_login_.jpg)](https://dribbble.com/shots/3330825-Multiple-Login-Form)<figcaption><a aria-label="undefined (opens in a new tab)" href="https://dribbble.com/shots/3330825-Multiple-Login-Form" target="_blank" rel="noreferrer noopener">Multiple Login Form by Mahisa Dyan Diptya</a></figcaption>

Quando se tem uma plataforma que atende diferentes tipos de usuários, a página de login acaba precisando atender a muitos públicos. Nesse design feito por Mahisa, vemos uma pela opção para trabalhar com acesso de diferentes usuários da plataforma pelo mesmo formulário de acesso.

## Login UI by DStudio ![™](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2122.png)

[![Login UI by DStudio™](https://marquesfernandes.com/wp-content/uploads/2020/08/0e8c29afe8286855941a2f3d6e3452e1-1024x768.jpg)](https://dribbble.com/shots/11015400-Login-UI/attachments/2609325?mode=media)<figcaption><a aria-label="undefined (opens in a new tab)" href="https://dribbble.com/shots/11015400-Login-UI/attachments/2609325?mode=media" target="_blank" rel="noreferrer noopener">Login UI</a><a href="https://dribbble.com/shots/11015400-Login-UI/attachments/2609325?mode=media" target="_blank" aria-label="undefined (opens in a new tab)" rel="noreferrer noopener"> </a><a aria-label="undefined (opens in a new tab)" href="https://dribbble.com/shots/11015400-Login-UI/attachments/2609325?mode=media" target="_blank" rel="noreferrer noopener">by DStudio<img src="https://s.w.org/images/core/emoji/12.0.0-1/72x72/2122.png" alt="™" style="height: 1em; max-height: 1em;"></a></figcaption>

O post [Top Inspirações de Design para Página de Login e Cadastro](https://marquesfernandes.com/top-inspiracoes-de-design-para-pagina-de-login-e-cadastro/) apareceu primeiro em [Henrique Marques Fernandes](https://marquesfernandes.com).