Idéias de formulários de login / registro e belos exemplos

Por toda a web moderna, estamos vendo uma quantidade crescente de lugares para a entrada do usuário. Estes incluem carrinhos de compras, jogos interativos na web e, certamente, formulários de registro de sites. Parece que os designers não devem apenas se concentrar no design da página, mas a estética da forma também é um papel igualmente importante.

Considere quantos formulários você pode ter preenchido ao longo do histórico da Internet. Existem inúmeros exemplos destes em fóruns, quadros de mensagens, blogs e muito mais. Neste artigo, vamos dar uma olhada em alguns ótimos truques para projetar seus formulários in-page.

É sensato considerar alguns dos itens aqui de uma perspectiva objetiva. Embora muitos formulários de login e registro funcionem bem com um tipo de site, não há uma avaliação final sobre o que é o “melhor” solução. Use sua intuição de design para aplicar fragmentos de formas que você deseja.

Considere várias entradas

Para começar, considere um pequeno formulário de contato da Fundação Six Web Design. Sim, isso não é um formulário de login, por isso pode desviar um pouco do assunto. No entanto, o design de sua página é muito impressionante e mostra o que um pouco de criatividade pode alcançar.

Cada um dos campos de entrada oferece espaço para você digitar informações pessoais de contato - nome, e-mail, etc. Os estilos vão muito além do normal, oferecendo entrada do usuário em um tipo de caligrafia manuscrita. Esse tipo de formatação manterá seus usuários em um estado de maravilha e atingirá uma meta de padrões de design muito mais altos.

Você desejará implementar estilos como esses, semelhantes a todas as suas páginas de login. Eu certamente não recomendaria ficar com o mesmo estilo de texto de entrada e menus de opção / seleção. Ao movimentar o cérebro em busca de criatividade, pense em como cada elemento deve ser colocado: muito espaço entre as camadas, um texto grande e de fácil leitura e até links da barra lateral para a linha direta de e-mail..

caixas de login jQuery

Isso tem sido usado em inúmeros sites no passado e certamente será visto em designs de new age. Longe vão os dias em que as práticas padrão trariam usuários para uma nova página para cada etapa do processo de login. Normalmente, isso significaria uma página para inserir seus dados e também uma nova página para processar as informações de login..

O Pixel2Life oferece uma visão fantástica de um novo campo de entrada de dados. A partir de sua página inicial, você pode clicar no link de login e exibir uma caixa de login dinamizada por jQuery. Este formulário contém uma chamada Ajax para um script PHP externo que verifica as credenciais de suas informações de login e, uma vez processado, concede ou nega acesso.

Indo mais um passo, o astuto pode notar um link de registro diretamente abaixo da caixa de login. Isso oferece uma experiência de usuário muito mais fácil para quem deseja se inscrever no site, mas não consegue localizar o link de registro.

Se um usuário não tem uma conta, mas gostaria de criar uma, isso a coloca na página de registro sem falhas na página de bugs. A caixa de login ainda seria uma opção viável para acessar sua própria conta, no entanto, permitir que a opção dê lugar a retornos maiores e volumes maiores de novos registrantes.

Registos simples de uma página

Outro paradigma de mudança que vemos é a falta de detalhes para novos registros de contas. Isso não é necessariamente uma estatística ruim supondo que os usuários estão ficando impacientes no preenchimento de dados. Os números realmente sugerem sites com páginas de registro mais curtas mais pesado listas de novos usuários em uma base diária.

O Sikbox oferece uma opção leve para os visitantes criarem sua própria caixa de pesquisa para um site. O único requisito é o seu próprio domínio personalizado para fornecer resultados de pesquisa. Os campos de entrada são grandes, o texto é muito simples de ler e existem absolutamente nenhum anúncio para distrair os usuários da tarefa de construir seu formulário de pesquisa!

Agora, essa não é a melhor forma de criar a sua própria página de registro para um fórum ou arquivo de blog. Estes, por definição padrão, exigem pelo menos algum tipo de combinação de endereço de e-mail / nome de usuário juntamente com uma senha. Alguns aplicativos da web da nova geração gerarão senhas dinâmicas para os usuários apenas para tornar o processo de registro mais rápido.

Claro, o trade-off aqui é falta de controle no final do usuário para gerar sua própria senha que muitas pessoas estão acostumadas a.

Construa efeitos chamativos

Uma das maiores experiências de inscrição que eu já tive foi criar minha primeira conta no Tumblr. A página inicial de seu site oferece um formulário de login e inscrição colocado diretamente abaixo do outro com novos efeitos de realce / desvanecimento do CSS3.

Essa abordagem sistemática é semelhante à área de login do jQuery da Pixel2Life. No entanto, a diferença com o Tumblr é que a rede não pode oferecer qualquer conteúdo para aqueles sem um blog (além de navegar em outras contas). O benefício real do tumblr é criar seu próprio blog e seguir outros - assim, seu principal objetivo na primeira página é criar uma conta ou fazer login.

Existem alguns bugs com este sistema. Mais notavelmente dentro do IE6 / IE7 não suportando estas novas propriedades CSS. Também usado na página inicial é um sistema para adicionar elementos de rótulo em valores de entrada de formulário - basicamente anulando o “padrão” caracteres usados para caixas de email / senha.

Esses rótulos desaparecem de foco em navegadores modernos, como o Chrome / Firefox. Mas não tem tanta sorte com os navegadores depreciados que, como você pode imaginar, é muito chato tentar reler sua própria entrada!

20+ Exemplos de Design de Forma Bonita

Abaixo está uma rápida galeria de alguns projetos fantásticos de formulários de login. Estes foram escolhidos em toda a web e incluem várias formas de aplicativos da web. Se você tiver sugestões para outros sites, sinta-se à vontade para compartilhá-los na seção de comentários abaixo!

Snoggle News