Krypton Solid

Inicios de sesión, menús, conmutadores y otros módulos de lujo – Revista Smashing

Inicios de sesión, menús, conmutadores y otros módulos de lujo – Revista Smashing

CodePen se ha convertido en el campo de juego de los desarrolladores. La caja de arena donde puedes construir cualquier cosa que te apetezca. Cosas prácticas, conceptos experimentales: es un cofre del tesoro, destinado a alimentar sus ideas. Para este consejo rápido, hemos investigado un poco y hemos encontrado algunos Demostraciones y conceptos de IU para que disfrutes y desarrolles: ventanas de diálogo y modales, pantallas de registro e inicio de sesión, navegación y menús, controles deslizantes y conmutadores. Pequeños placeres que hacen más placentera la interacción del usuario con un sitio web o una aplicación. ¡Disfrutar!

CodePen se ha convertido en el campo de juego de los desarrolladores. La caja de arena donde puedes construir cualquier cosa que te apetezca. Cosas prácticas, conceptos experimentales: es un cofre del tesoro, destinado a alimentar sus ideas. Hemos investigado un poco y hemos encontrado algunos interesantes Demostraciones y conceptos de IU para que disfrutes y desarrolles: ventanas de diálogo y modales, pantallas de registro e inicio de sesión, navegación y menús, controles deslizantes y conmutadores. Pequeños placeres que hacen más placentera la interacción del usuario con un sitio web o una aplicación. ¡Disfrutar!

Otras lecturas en SmashingMag:

Diálogo y ventanas modales

Diálogo Flappy

De Alex Wright Diálogo Flappy se basa en un Concepto de dribbble por Peter Main. La ventana de diálogo presenta dos solapas. Una vez que un usuario pasa el mouse sobre uno de ellos, comienza a moverse, y tan pronto como hace clic, toda la ventana se voltea hacia el frente y desaparece. Una forma interesante y divertida de destacar una ventana y su contenido, especialmente para interacciones rutinarias como «Sí» y «No» a las que los usuarios no suelen prestar mucha atención.

Diálogo Flappy
Diálogo Flappy‘codificado por Alex Wright. Concepto: Peter Main.

La pregunta de si esto es algo que podría querer usar en un proyecto real o no podría dar lugar a muchas discusiones, pero la idea es simplemente impresionante: LegoMushroom’s Concepto de destrucción de ventana modal. Una vez que un usuario cierra la ventana modal, estalla en pedazos. Un efecto sorprendente.

La ventana modal se rompe en partes tan pronto como un usuario cierra la ventana.
Concepto de destrucción de ventana modal‘por LegoMushroom.

Diseño de materiales Modal

La parte clave de Ettrics ‘ Diseño de materiales Modal es la animación que ocurre cuando haces clic en el botón que hace que el modal se expanda. Parece que el botón en sí se está expandiendo, pero en realidad es un agregado dinámico <div> que se agrega al botón y se expande al tamaño del modal. Tan pronto como el modal se vuelve visible, el <div> Está oculto. Inteligente.

Diseño modal receptivo
Diseño de materiales Modal‘por Ettrics.

Registrate e inicia secion

Formulario de registro interactivo

La versión de Riccardo Pasianotto del formulario de registro es innovador y todo menos aburrido o tedioso para el usuario. No los confronta con la forma completa desde el principio, sino que les pide la información necesaria en trozos pequeños y digeribles. Básicamente, el formulario consta de tres cartas que se apilan una encima de otra. Tan pronto como empiece a escribir, el pequeño icono junto al campo del formulario se convierte en un botón con una flecha que apunta hacia arriba. Una vez que se hace clic, el campo del formulario se voltea y presenta el siguiente campo. Una interacción hermosa y emocionante.

Formulario de registro interactivo
Formulario de registro interactivo‘de Riccardo Pasianotto. Concepto: Denis Abdullin.

Formulario interactivo solo CSS

Emmanuel Pilande’s demostración de formulario interactivo es muy elegante, no solo visualmente sino también en lo que respecta al código: fue construido completamente con CSS. Cada campo de formulario se presenta individualmente, como una línea roja larga acompañada de una etiqueta de campo y un texto de marcador de posición. Pulsando el Pestaña La tecla conduce al siguiente campo. Elegante.

Forma interactiva
Forma interactiva‘de Emmanuel Pilande.

Interacción de registro de material

Srikant Shetty’s interacción de registro material consta de tres estados, todos ellos diseñados en torno al botón «Registrarse», que se mezclan armoniosamente entre sí. El botón de registro en la pantalla de registro se expande al formulario de registro; Una vez que se completa el formulario y se hace clic en el botón «Listo», el botón se transforma en un círculo y flota en la esquina inferior derecha de la pantalla de perfil, donde se le asigna un nuevo rol. Una interacción perfecta, codificada por Kyle Lavery.

Interacción de registro de material
Interacción de registro de material design‘codificado por Kyle Lavery. Concepto: Srikant Shetty. (Vía MaterialUp)

Inicio de sesión compacto

La Inicio de sesión compacto por Boris Borisov une el inicio de sesión y el registro. Un círculo rojo «+» en la pantalla de inicio de sesión oculta el formulario de registro que, cuando se hace clic, se expande para cubrir la pantalla de inicio de sesión. Otro efecto agradable: el aspecto del botón «Ir» cambia de un texto gris claro muy sutil sobre fondo blanco a rojo negrita dependiendo del progreso que el usuario haya realizado al completar el formulario. Andy Tran y Yusuf Bakir variaciones codificadas del concepto.

Inicio de sesión compacto
Inicio de sesión compacto. Concepto: Boris Borisov. (Vía MaterialUp)

Entrada de texto de material design

Muy entrada de texto ligero la demo proviene de Ben Mildren. Las etiquetas de marcador de posición en sus campos de formulario se mueven hacia arriba y cambian de color en input:focus. Tan pronto como un usuario comienza a escribir, desaparecen por completo. Limpio y sencillo.

Texto de entrada de material design
Texto de entrada de material design‘de Ben Mildren.

El menú de filtro oculta sus opciones de filtro detrás del botón de menú, pero no como cabría esperar. Una vez que se hace clic, el botón de menú se transforma en un botón de cierre, que se expande desde el centro del círculo para crear un círculo exterior en el que se organizan las opciones de filtro. Elegante y hermoso.

Menú de filtro
Menú de filtro‘codificado por Arjun Amgain. Concepto: Anton Aheichanka. (Vía MaterialUp)

Jamie Coulter Menú desplegable Swanky Pure CSS es una buena adición a cualquier interfaz que no sea JavaScript. Utiliza las etiquetas del menú para alternar una animación que revela el submenú. Hecho con CSS puro.

Menú desplegable de CSS puro
Menú desplegable Swanky Pure CSS‘de Jamie Coulter.

La Menú pegajoso de CSS de Lucas Bebber utiliza filtros CSS y SVG para lograr su efecto, no JavaScript. El menú está oculto detrás de un círculo con un icono de hamburguesa. Una vez que hace clic en él, el círculo escupe una mancha que se disuelve y forma cuatro íconos de menú redondos, ordenados uno al lado del otro. El icono de hamburguesa en sí mismo se convierte en un icono de «cerrar». Un efecto lúdico.

Menú pegajoso de CSS
Menú pegajoso de CSS‘de Lucas Bebber.

Interfaz de usuario de la bandeja de entrada CSS

Otro ejemplo de la bondad pura de CSS es el de Jamie Coulter. Interfaz de usuario de la bandeja de entrada CSS. Una vez que un usuario hace clic en un mensaje, se abre hacia la derecha para mostrar el correo electrónico completo; la vista previa en la pantalla original se reemplaza por una nota de «Leyendo ahora». Un bonito efecto que podría adaptarse a otros propósitos de navegación, por ejemplo, una navegación de ancho completo.

Campo de usuario de la bandeja de entrada de CSS
Interfaz de usuario de la bandeja de entrada CSS‘de Jamie Coulter.

La Aplicación de menú receptivo fue diseñado como un menú real para pedir bebidas en un bar, pero también proporciona algunas ideas interesantes que podrían transferirse al menú de una aplicación o al comercio electrónico. En su estado predeterminado, todas las opciones del menú ocupan el mismo espacio. Al pasar el cursor sobre un elemento, el elemento se expande y revela más información sobre él. Tan pronto como se hace clic en él, se expande aún más para llenar toda la pantalla, luego se desliza un pie de página desde la parte inferior con la opción de comprar el producto.

Aplicación de menú receptivo
Aplicación de menú receptivo‘codificado por Woodrow Barlow. Concepto: Gal Shir.

Deslizadores y conmutadores

Control deslizante de presupuesto

El jQuery Control deslizante de presupuesto es una alternativa bienvenida a la tendencia del diseño plano. A medida que arrastra el control deslizante, una barra tridimensional se llena de color.

Control deslizante de presupuesto
budgetSlider‘codificado por Hornebom. Concepto: Erik Deiner.

Deslizadores planos de CSS puro

De Ana Tudor deslizadores planos están hechos completamente de CSS y recuerdan un poco a un termómetro analógico. Sencillo pero elegante. Inspirados en su demo también están los de Simon Goellner. controles deslizantes sensibles. Vienen con un efecto de crecimiento sutil en la marca activa y muestran el valor numérico en la aguja.

Deslizadores planos de CSS puro
Deslizadores planos de CSS puro‘de Ana Tudor.

Alternativas de CSS puro

Rafael González’s Alternativas de CSS puro son diferentes a los que estamos acostumbrados. Sus conmutadores constan de dos cuadrados y, en lugar de la conocida animación de «conmutadores» que se desliza de un lado a otro, sus conmutadores cambian de estado al voltearse como la página de un libro, hacer giros de 180 grados o deslizarse de un lado a otro como una oruga. También es notable cómo Rafael usó el color para respaldar las animaciones: una configuración es azul, la otra roja, y cuando se cambia de una a otra, el color cambia gradualmente de azul a rojo y de rojo a azul, respectivamente.

Alternativas de CSS puro
Alternativas de CSS puro‘de Rafael González.

Interruptor de fluido

El concepto de Leonardo Zakour del Interruptor de fluido utiliza una animación de gota para pasar de un estado de alternancia al otro. Codearmada le dio vida con su Botón de radio de material manifestación.

Interruptor de fluido
Botón de radio de material‘codificado por Codearmada. Concepto: Leonardo Zakour. (Vía MaterialUp)

Alternar día y noche con CSS puro

La Alternar día y noche de CSS es una versión alegre de la visualización de la hora AM y PM. Cuando se establece en AM, el interruptor de palanca y su fondo muestran un sol con un cielo azul, cuando se cambia a PM se transforma en una luna con un cielo estrellado.

Alternar día y noche con CSS puro
Alternar día y noche con CSS puro‘codificado por Benjamin Réthoré. Concepto: Rappora.

¿Te has topado con una demostración de interfaz de usuario inspiradora, innovadora o deliciosa últimamente? ¡Háganos saber en los comentarios a continuación!

Deja un comentario