Las formas de registro vienen en diferentes formas y tamaños. Algunos son un solo campo, otros son un proceso de varios pasos que se extiende sobre varias pantallas.
Hoy analizaremos 20 formas atractivas y funcionales para ver si podemos encontrar ideas útiles que pueda aplicar la próxima vez que cree un formulario de registro.
300 píxeles
Varios de los ejemplos que veremos hoy provienen de formularios de registro beta como este. Por lo general, estas páginas solo proporcionan un gráfico teaser y poca o ninguna información sobre lo que realmente será el sitio.
Me gusta mucho el gráfico del botón 3D y cómo se anima cuando haces clic en él. Este se hace con imágenes y Javascript, pero el estilo me recuerda a BonBon Buttons, un experimento CSS3 que se puede descargar gratis.
Otra cosa interesante de esta página es que hace un gran uso de los sprites de imagen. Echa un vistazo a la fuente para ver la imagen original.
Vuelo de prueba
El estilo suave y simple en este es simplemente hermoso. Me gusta el relleno adicional en cada fila y cuánto destaca el campo de formulario seleccionado de los demás.
Este es en realidad un aspecto importante de usabilidad. Las formas pueden ser una molestia para los usuarios y agregar pequeños toques, como un punto destacado en el campo actual, realmente puede ayudar a guiarlos a través del proceso.
Loable
Me encanta la forma en que este tipo de simplemente flota en el océano. También hay un montón de estilo muy bonito y sutil aquí. Echa un vistazo a la sombra interior en los campos y cómo los bordes del campo son más oscuros en la parte superior izquierda que en la parte inferior derecha. También hay algunas funciones de comentarios realmente excelentes integradas en este formulario, cuya importancia analizaremos en un ejemplo posterior.
CertTime
Las ventanas modales son siempre frescas. Superponen el contenido actual en lugar de llevarte a una página diferente. De alguna manera, eso es menos inquietante que ser llevado a un lugar nuevo, lo que parece una interrupción.
Al atenuar los gráficos de la página de inicio y abrir un formulario de registro de registro modal, tendrá la sensación de que el proceso será rápido y sin complicaciones y que volverá a navegar en un instante.
Las listas de ideas
Este es mucho más largo que los formularios anteriores y tiene varios campos para completar. Sin embargo, el contenido se divide en tres partes manejables, lo que ayuda a que no se sienta como una gran forma.
Además, me gusta mucho cómo el diseño parece sentirse como un formulario impreso, ¡puedes verte escribir las respuestas fácilmente!
Polea
No tengo mucho que decir sobre esta otra cosa que no me gusta la apariencia de la página. El pequeño recuadro en la dirección archivada es un buen toque. Ese campo también verifica automáticamente su elección de nombre de usuario para ver si ya está tomada.
ACosmin.com
El uso del patrón y la textura en este sitio es fantástico. Contar los rectángulos en el formulario de correo electrónico es divertido, está el campo en sí y un borde en el campo, que está rodeado por un patrón de puntos, que está rodeado por un relleno blanco, luego hay otro borde gris más oscuro en eso y finalmente una caja grande para sostenerlo todo.
Al describirlo, uno pensaría que el resultado sería ocupado y feo, pero llegó nuestro magnífico.
Salud de la floración
Aquí me gustó el mensaje amistoso en el texto del formulario: "Mantengámonos en contacto". Con demasiada frecuencia, nos dirigimos directamente a algo sencillo y aburrido cuando unos pocos minutos de consideración pueden llevarnos a una alternativa mucho más interesante.
Avanti
La forma Avanti tiene que ver con ese gran botón. El tamaño ampliado y la opción de colores llamativos atraen su atención directamente a ella, donde se ve una declaración simple y agradable que no es una llamada a la acción, sino que establece lo que hará el botón desde la perspectiva del usuario: "Inscríbase". Esto no deja ninguna duda sobre lo que sucede cuando se presiona el botón.
Lógica de audio
Audio Logic eligió tener un personaje ilustrado tonto que sostenga su formulario de registro. Aporta mucho carácter a la página y te hace sonreír cuando la ves; Una técnica que vale la pena explorar con tus propias ilustraciones de personajes.
Cultura culinaria
Me encanta el refuerzo visual que este sitio usó para los campos de formulario. Este tipo de íconos simples se puede encontrar en cualquiera de los cientos de juegos de íconos gratuitos en línea y realmente agrega mucho al formulario, ¡casi podría completarlo sin siquiera leer el texto!
Vemos este tipo de ícono con bastante frecuencia en la navegación y es bastante refrescante ver a alguien acercarlo a un formulario.
Gowalla
La forma de Gowalla tiene un mensaje interesante para enseñar: simple es bueno. Aquí hay un sitio con un diseño fantástico, listo para usar, que anuncia una aplicación que es de la misma manera, pero no eligieron hacer nada sofisticado o confuso en su formulario de registro.
En su lugar, es solo una simple caja blanca con grandes y bonitos campos. Observe cómo pegaron los primeros dos campos en la misma línea, pero mantuvieron la alineación justificada apretada. Esta es una buena técnica para ahorrar espacio que no rompe su diseño.
Búfalo
A veces, una forma enorme puede ser increíblemente desalentadora. Usted ve todos esos campos para rellenar y su primer instinto es simplemente cerrar la ventana del navegador y hacer que desaparezcan.
Como se muestra en el siguiente sitio, a veces puede ayudar dividir estos campos en varios pasos. Ves solo una pequeña porción a la vez para que no te desanimes y puedas controlar tu progreso a través de las rutas de navegación en la parte superior.
Kontain
Esto es lo que odio: completar veinte formularios y hacer clic en Enviar solo para encontrar que cometí un error en alguna parte. Luego tengo que buscar en la página los pequeños asteriscos que indican dónde me equivoqué. ¡No soy solo yo tampoco, todos en el mundo odian esto! Ya sea que tenga tres o cincuenta campos, hará que la experiencia del usuario sea infinitamente mejor al proporcionar comentarios en vivo e inteligentes por campo.
Vemos esto en acción en el formulario de Kontain a continuación.Ingresé una contraseña que solo tenía tres letras y apareció un enorme cartel que me decía que había hecho algo incorrecto, lo mismo sucede si ingresa un correo electrónico no válido. La clave aquí no es simplemente proporcionar comentarios, sino comentarios claramente visibles y fácilmente comprensibles que el usuario puede corregir antes de presionar el botón de envío.
Zzz
Gowalla tiene un sitio divertido y un formulario de registro aburrido, que tiene sus méritos. Sin embargo, no hay una regla inquebrantable de que no pueda divertirse un poco con sus formularios también.
Revise el formulario a continuación, no solo los gráficos están locos, sino que los campos de los formularios se giran ligeramente para aumentar el aspecto descentrado. Definitivamente, esto no sería apropiado en muchas situaciones profesionales, pero en un sitio lleno de ovejas voladoras que anuncian una bebida que lo adormece, funciona perfectamente.
Vimeo
La gente de Vimeo decidió dedicar una gran página a una pequeña forma. Lo pegaron en la parte superior derecha y llenaron el resto de la página con una isla ilustrada y algunas nubes flotantes animadas.
Como en el ejemplo anterior, esto definitivamente no es apropiado para todas las situaciones, pero funciona bien aquí y es una implementación bastante divertida de una forma aburrida.
Té redondo
Este representa un poco interesante de pensar fuera de la caja. ¿Me inscribes? El botón de la derecha se ha estirado verticalmente para que coincida con la altura de los dos campos.
No estamos acostumbrados a presionar botones cuadrados en la web, así que debes tener cuidado al implementar algo como esto, pero me gusta lo que han hecho aquí.
13 Creativo
Cuando tienes un sitio con mucho estilo que sigue un tema visual claro, lanzar un formulario con un estilo predeterminado puede arruinar la integridad de todo tu tema.
En su lugar, debe encontrar un equilibrio entre hacer que su área de formulario se destaque y hacerla coincidir con el tema general del sitio. Creo que las 13 formas creativas a continuación son un ejemplo perfecto de esta técnica en acción.
Obama
La forma de Obama usa la misma técnica que el ejemplo anterior de Avanti. Observe cuánto destaca ese botón rojo en la página de otro modo muy azul. Esta vez, el texto del botón es un claro llamado a la acción, "Más información". Si ama u odia su política, definitivamente es el caso de que Obama ha tenido la mejor marca visual de todos los presidentes estadounidenses hasta el momento, una tendencia que sospecho que ha establecido un estándar que continuará para los futuros titulares de la posición.
Obtener Brewin '
Este último ejemplo tiene tanto ventajas como desventajas. En general, la página es super atractiva. Sin embargo, se siente como mucho contenido para una alineación central, que es bastante débil para algo más que unas pocas líneas.
La lección aquí es que a veces los proyectos más simples son los más difíciles de diseñar. Cuando hay un montón de contenido, tienes mucho con qué trabajar y puedes construir alineaciones fuertes y claras. Sin embargo, con un poco de contenido que no se acerca a llenar la página, a menudo tienes que luchar por un tiempo antes de encontrar la solución ideal.
¡Muéstrenos el tuyo!
Cada uno de los veinte ejemplos de formularios de registro anteriores puede enseñarte algo sobre cómo construir de manera efectiva los propios. Deje un comentario a continuación con un enlace a algunos formularios que ha creado. ¿Qué técnicas utilizaste para fortalecer la forma tanto visual como funcionalmente?