Elementos de la interfaz de usuario. Usar la biblioteca de elementos de la interfaz de usuario

Básicamente, para los profesionales, no hay nada más fácil que esbozar un diseño esquemático de un sitio web a mano. El proceso se vuelve un poco más complicado cuando se trata del diseño de los elementos de la interfaz de usuario (y sus detalles). Aquí no puede prescindir de la imaginación, la experiencia y la inspiración.

Si no sabe por dónde empezar (o ya tiene una idea, pero quiere ahorrar tiempo usando plantillas), servicios como UI Patterns con opciones para implementaciones clásicas o kits especiales listos para descargar pueden llegar a su rescate. Estos últimos se entregan, por regla general, en formato PSD, por lo que no será difícil para quien sepa trabajar en Photoshop rehacerlos a su manera.

Kit de interfaz de usuario web verde

Kit de interfaz Green WebUI Kit: incluye casi todos los elementos que pueda necesitar: menú de navegación superior, botones (Aceptar, Cancelar, Comprar ahora, Descargar ahora), etiqueta de venta, formulario de inicio de sesión, control deslizante en blanco y elementos de suscripción: RSS, correo electrónico y más.

Todos los elementos están hechos con alta calidad, el diseño es moderno. Cada elemento tiene su propia capa (archivo PSD), por lo que es muy conveniente trabajar con ellos. En principio, a partir de esto, puede esbozar rápidamente el diseño de dicho blog: un control deslizante, ya hay suscripciones. Si tuviera que comparar, este sería más adecuado para los chinos.

Elementos de la interfaz de usuario amarillo

Elementos amarillos de la interfaz de usuario: el conjunto contiene 11 elementos amarillos de la interfaz, incluidos botones (Descargar, Enviar, Comprar ahora, buscar), secciones (Destacados y fecha), barras de desplazamiento y barras de progreso. Todas las capas del archivo PSD están convenientemente agrupadas, por lo que puede realizar ajustes fácilmente en este o aquel elemento de la interfaz de usuario. El color se puede cambiar fácilmente a lo que necesite (en el conjunto Green WebUI, por supuesto, también).

Desafortunadamente, Yellow UI Elements incluye menos elementos que el Green WebUI Kit, por lo que no excluyo que tendrá que tomar prestados algunos de los elementos de otros conjuntos o dibujar por su cuenta.

Kit de interfaz de usuario suave

Bonito conjunto ligero de elementos de interfaz para su desarrollo web. Se puede utilizar tanto al crear un sitio como para una aplicación web. Entre todas las fuentes PSD, existen los elementos más comunes para la web: + búsqueda, lista desplegable, casillas de verificación y casillas de radio, mensajes de texto, etc., incluso hay estrellas para votar. Para alguien que sepa trabajar en Photoshop, no será nada difícil corregir este PSD para adaptarlo a sus necesidades. En general, el conjunto es muy bueno en cuanto a cantidad y calidad.

Interfaz de usuario de vidrio transparente

Como puede ver en el nombre del conjunto (UI de vidrio transparente) y la vista previa, su característica distintiva es la transparencia de los elementos. Esto, en primer lugar, se ve bastante impresionante y encajará bien en el diseño moderno, y en segundo lugar, se adaptará a casi cualquier color de fondo. El conjunto PSD contiene todos los elementos típicos de una interfaz web: listas desplegables, botones de opción, botones, formularios, controles deslizantes y campos de entrada.

Creo que encontrará algo para usted en los conjuntos presentados de elementos de interfaz de usuario para Photoshop. Los primeros y últimos kits son especialmente buenos. ¡Te deseo experimentos exitosos y una hermosa interfaz!

PD Si necesita encontrar un sistema flexible para una tienda en línea, magento commerce puede sorprenderlo gratamente en términos de las posibilidades, funcionalidad y extensibilidad del proyecto.

En esta lección, le diremos y le mostraremos claramente cómo puede usar los elementos de la interfaz de usuario de la biblioteca incluida en la entrega de la solución, así como también cómo usar las opciones de diseño, insertar iconos, botones y elementos de diseño en el sitio.

¡Atención! Para trabajar con éxito con código html, necesita al menos un conocimiento mínimo de etiquetas y principios de grabación. Si tiene alguna duda o necesita practicar, no dude en experimentar con el diseño de la página de prueba. Cambiar el código html puede arruinar el diseño de una página individual, pero no romperá todo el sitio.

Los elementos de la interfaz de usuario presentados en el sitio de demostración son código html que puede copiar y pegar donde quiera en la página del sitio. Como ejemplo, agreguemos el elemento "Gears" y encabezados de diferentes tamaños al sitio.

Vaya a la página deseada del sitio donde desea colocar los elementos, active el modo de edición y abra la página para editar. Cambie a la visualización en paralelo para que pueda ver el código html y la apariencia del contenido al mismo tiempo.

Abra la sección con la biblioteca de elementos de la interfaz de usuario en su sitio, vaya a la página con el contenido deseado, ingrese al modo de edición y también cambie al modo de visualización combinada en él.

Copia el código de los elementos que te interesan y pégalo en la página de tu sitio.

En nuestro ejemplo, copiamos el código del encabezado y el código del elemento Gears. Puede realizar cambios en el código, por ejemplo, eliminar el texto de prueba debajo del encabezado o cambiar la firma debajo de los engranajes.

Después de guardar los cambios, los elementos requeridos se muestran en la página:

Los tiempos en los que diseñadores de todo tipo se mostraban uno frente al otro, pegadizos, diría yo, proyectos de diseño demasiado fantasiosos, que usaban todo tipo de campanas y silbidos gráficos, se han ido para siempre, ha llegado el momento de nuevas soluciones de diseño que permitan a los usuarios para centrarse en los componentes más importantes de un proyecto web en lugar de su envoltorio colorido.

El uso de elementos de interfaz planos, de manera imperceptible pero segura, se extendió con el lanzamiento de Windows 8 y su estilo Metro bastante minimalista. El diseño plano, con su enfoque minimalista, se centra principalmente en la usabilidad en varios tipos de dispositivos de usuario, tanto PC de escritorio como teléfonos inteligentes con controles táctiles. Las características distintivas de los diseños planos son las líneas nítidas, los objetos bidimensionales, los colores vibrantes, los enlaces bien definidos y el tipo de letra sans-serif. Para no distraer la atención de los usuarios de elementos importantes, todo el oropel decorativo está completamente ausente.

Si está siguiendo nuevas tendencias en diseño web y ya se ha convertido en un partidario de las soluciones de diseño en estilo plano, aquí hay 10 kits absolutamente gratuitos de elementos de interfaz de usuario con diseño plano para sus nuevos proyectos. Todos los kits contienen una amplia variedad de componentes que son ideales para cualquier diseñador web: botones, elementos de entrada, menús, casillas de verificación y botones de radio, etiquetas, menús, barras de progreso y controles deslizantes, así como elementos de navegación y mucho más.

Mejora tu diseño con un estilo nuevo y llamativo con estos increíbles kits de interfaz de usuario.

1. IU de peso pluma

Un atractivo conjunto de elementos de interfaz gratuitos de Sarah Hunt, diseñado cualitativamente sobre la base de un vector y dividido en capas, empaquetado cuidadosamente en un archivo, todas las capas están etiquetadas con nombres intuitivos. El texto y los colores son fáciles de editar. El diseño utilizó una fuente que puedes usar de forma gratuita.

Con este conjunto de elementos de la interfaz de usuario, puede dedicar mucho menos tiempo a su trabajo y concentrarse en la creatividad. El kit es completamente gratuito para su uso en proyectos personales o comerciales. Puede descargar el kit y comenzar de inmediato.

2. Kit de interfaz de usuario táctil moderno

La versión básica gratuita de un gran conjunto de elementos de IU en formato PSD, con el que podrás crear un sitio web funcional con un diseño impecable. Equilibrio de tipografía, peso general y posicionamiento de elementos, acolchado ajustado, márgenes y paleta de colores. Estilo general con un énfasis distintivo en el contenido. La versión HTML completa de este gran kit está disponible para usuarios registrados con una suscripción a PixelKit.

3. Infinito vertical

4. UI cuadrada gratis

Otro gran conjunto empaquetado de Designmodo, presentado en el dominio público, a excepción de una suscripción formal a noticias para recibir un enlace de descarga. Estoy seguro de que este pequeño obstáculo no detendrá a nadie si necesita un producto de calidad. Y el kit es de muy alta calidad y contiene una variedad de componentes web bien dibujados para el diseño de sitios web. Después de descargar la versión gratuita y si le gusta el conjunto, puede comprar la versión premium extendida del conjunto si lo desea. Aunque la versión gratuita tiene suficientes bollos de diseño más útiles para crear un sitio web completo.

5. Componentes de la interfaz de usuario de diseño plano

Conjunto ligero (407 Kb) de componentes de interfaz de usuario realizados en un estilo plano con predominio de tonos azulados en la paleta de colores general. Todos los elementos de este conjunto están disponibles en un archivo PSD bien organizado y se pueden editar fácilmente. Como ves, no hay un derroche de colores, todo es estricto y apunta únicamente a la facilidad de percepción del contenido.

6. Kit de interfaz de usuario de Metro Tiles

Un conjunto de componentes de interfaz de usuario gratuito, bastante rico y bellamente renderizado de PixelKit. El kit incluye muchos elementos de interfaz de usuario, en capas y combinados en un archivo PSD, su diseño es ideal para desarrollar proyectos web y aplicaciones móviles. A primera vista, se adivina el diseño de los componentes, el estilo de la interfaz gráfica de Wihdows 8, los bordes dibujados con precisión de los elementos, los suaves tonos azul-azul y una fuente de excelente lectura.

7. Kit de interfaz de usuario cuadrado redondeado plano

Un paquete impresionante de elementos de la interfaz web, presentado de forma gratuita por los artesanos de, sin duda merece su atención. Los autores, en su trabajo, se desviaron un poco de la línea del diseño cien por ciento plano, agregando un poco de volumen a los componentes individuales, utilizando esquinas ligeramente redondeadas y una ligera sombra en los bordes inferiores de los elementos. Esta decisión de diseño se justifica en el período de transición de prioridades cambiantes en el diseño web. Todos los elementos necesarios para el trabajo productivo de los constructores de obra, en un conjunto completo. Queda por descargar, descomprimir el archivo y comenzar a crear, si no eterno, pero al menos hermoso y amable)))

8. Paquete de interfaz de usuario de diseño plano

El verdadero peso pesado (¡125 MB!) Entre los kits de interfaz de usuario PSD similares. El diseño plano de los componentes del conjunto se trabaja en detalle hasta el más mínimo detalle, impresiona y se prepara para el trabajo creativo. Este kit de interfaz de usuario se puede utilizar de forma gratuita tanto en proyectos privados como comerciales, aunque solo sea por placer y en beneficio de la empresa.

10. Bootflat 1.0.1

Al final de la revisión, ofrezco para su consideración una especie de colección de HTML, CSS, JS y componentes para el desarrollo rápido de interfaces de sitios web: "Bootflat", construido sobre la conocida plataforma Twitter Bootstrap 3. Una herramienta intuitiva que incluye complementos y componentes ligeros, pero con funciones avanzadas de Bootstrap. Soporte para HTML5 y CSS3, excelente combinación de colores y estilo basado en el estilo mejorado Bootstrap 3. Bootflat es totalmente receptivo, lo que significa que no habrá problemas para mostrar elementos en las pantallas de todo tipo de dispositivos de usuario. Todos los componentes de la plataforma son fáciles de expandir y editar. Bootflat es un proyecto de código abierto, así que siéntete libre de usar todas sus funciones sin restricciones y crea tu propio estilo.

El diseño plano es una tendencia especial, para lo cual está el futuro y es importante no perderse el momento, súbase a un tren a toda velocidad en el tiempo, ya que cada nueva tendencia tiene su propio ciclo de vida y ni siquiera la tendencia de diseño más popular puede estar en la cresta de la ola para siempre. Hoy en día, por muchas razones, vale la pena utilizar este interesante estilo de diseño a la hora de desarrollar nuevos proyectos, no apresurarse a la cima en pos de la moda, sino hacerlo todo con sentimiento, con sentido y disposición. Es seguro decir que los sitios web de tendencias como estos serán intuitivos, fáciles de leer y crearán una impresión positiva y comentarios igualmente positivos de la comunidad de Internet.

Interfaz de usuario (en inglés, interfaz de usuario, UI) en resumen YI es el entorno de interacción entre el usuario y la computadora. Estos son botones, menús, botones de opción, casillas de verificación y mucho más. Ahora que no está claro, explicaré todas las palabras abstrusas a continuación. Si una persona usa un teléfono móvil, la interfaz de usuario es una aplicación o un navegador.

Elementos básicos de la interfaz de usuario

Ahora explicaré las palabras que escribí arriba. Todo debería encajar en su lugar. Me refiero a la interfaz de usuario por una razón. Esta información es necesaria para que no olvide dibujar todos estos elementos en los diseños. Si el diseñador de diseño no encuentra nada de esto en el diseño, lo hará de la forma que le parezca correcta.

Textos (títulos)

Cuando una persona está en la web, lo primero que encuentra es texto y titulares. Por lo tanto, para nosotros, como diseñadores, es importante trabajar todos los encabezados a la vez en un diseño. Los encabezados suelen denominarse H1, H2 ... Hn porque así se denominan en las etiquetas html.
En este caso, el primer encabezado es H1, luego H2, y así sucesivamente. El primero es el título más relevante. En una página de destino, esto puede estar en la primera pantalla, más abajo en la pantalla descendente. En los diseños, debe mostrar todos los encabezados para que el diseñador de diseño sepa dónde colocar qué etiqueta.

Enlaces

Aquí está el texto, el título y el enlace resaltados. Los enlaces tienen 4 estados: normal, al pasar el mouse (puede cambiar de color, subrayado u otra cosa, efecto), hacer clic y estado visitado (hacer clic y luego regresar al sitio desde donde lo dejaron).

Botones

Son similares a los botones físicos, o al menos fueron concebidos como los botones de una grabadora. Por lo tanto, tienen estados: flotando y presionando. Todo esto debe resolverse.

Botón de radio y casillas de verificación

A la izquierda hay un botón de opción (en ruso, un botón de opción, pero lo llamaré botón de opción porque es habitual entre los diseñadores), a la derecha hay una casilla de verificación. En el botón de radio, puede elegir solo 1 opción, tenemos un mapache. En la casilla de verificación hay una posibilidad de opción múltiple, hemos seleccionado una foca y un mapache.

Formularios

Los formularios deben elaborarse de varias formas a la vez. Formulario inactivo (arriba), activo (segundo desde arriba), formulario con un error (tercero desde arriba), formulario completado con éxito (cuarto desde arriba). A veces, en caso de un error en el formulario, es mejor hacer una llamada emergente a la derecha, donde puede indicar claramente el error. Por ejemplo, si un visitante ingresó letras en un formulario para ingresar un número de teléfono, escriba “solo se pueden ingresar números en este campo” en el líder. Esto ayudará enormemente a las personas a completar el formulario y aumentar su conversión.

Surgir

Siempre deben dibujarse ventanas emergentes o ventanas emergentes para la autorización (entrada) al sitio. No en esta imagen, pero en general se acostumbra hacer una cruz a la derecha para salir del formulario.

Paginación

La paginación es una navegación página por página que le permite cambiar rápidamente entre una gran cantidad de productos, hojas o algo. Ahora, una forma de paginación como una fuente de noticias en VK está muy extendida, cuando se desplaza hacia la parte inferior y se cargan más noticias. También puedes hacerlo en la tienda online. En este caso, aún debe proporcionar un botón "mostrar más productos". Si hay muchos de ellos ya cargados y muestran algún tipo de precargador, es decir, un elemento que muestra la carga de la página.

Migas de pan

A menudo puede encontrarlo en una tienda en línea. Por ejemplo, una tienda en línea está escrita a la izquierda, ropa de hombre a la derecha, ropa de abrigo deportiva a la derecha y luego chaquetas. Te permite subir haciendo clic en el nivel deseado. Las migas de pan se llaman de forma diferente.

Precargador

Lo que muestra que algo se está cargando. Ellos son muy diferentes. Puedes buscar en Google "Preloader GIF" y ver la variedad y usar los que más te gusten. Hay un generador de precarga especial donde puede elegir cómo se verá, de qué color, en qué formato guardarlo, etc. Te aconsejo que uses cosas estándar, como círculos y rayas, para proyectos especiales puedes usar algo inusual, o puedes dibujarte en Photoshop y hacer una animación GIF. No exagere, este es ciertamente un elemento importante, pero aún así no vale la pena dedicarle mucho tiempo.

Mesas

A menudo, los diseñadores se olvidan de dibujar una mesa. Por ejemplo, si está haciendo una tienda en línea de equipos de fabricación, las características comparativas, los pesos y algo más aparecen en la descripción y en la ficha del producto. Es conveniente utilizar tablas cuando las líneas alternan en color, esto es muy bien percibido por el espectador. En este caso, se muestra una tabla con casillas de verificación, esto no es necesario. No te olvides de las mesas.

Menú

El menú es la navegación por todo el sitio. En este caso, mostró que hay un menú emergente al pasar el mouse. Esto necesita ser dibujado. Observe cómo mostré orientación e interactividad. Simplemente descargue el cursor png y colóquelo en su lugar. Si tiene un diseño grande, coloque muchos cursores. Por ejemplo, para mostrar cómo funciona el menú, cómo se ven el botón y el enlace al pasar el mouse. En este caso, no te olvides del estado normal. Por lo tanto, en un diseño estático, puede mostrar fácilmente cómo se comportan los elementos de la interfaz de usuario en un estado interactivo.
Recuerda que los cursores son diferentes: para la PC y para la amapola.

El "cursor png" se puede buscar fácilmente en Google. Si está mostrando el sitio en una Mac (usando una maqueta con una MacBook), entonces necesita usar el cursor derecho, si está en una PC (por ejemplo, maqueta con un explorador inernet), entonces el izquierdo .

Aquí están las cosas básicas sobre los elementos de la interfaz de usuario. Esta información es para conocer todos los términos que se utilizan en el diseño de sitios. Y para no olvidar dibujar cosas como menús emergentes, interactividad de botones, etc. Deje que sus sitios después del diseño se vean como los renderizó. Amén 🙂

No se pasa por alto ni un solo sitio moderno. Sin embargo, hay una forma que ayudará a ahorrar mucho tiempo en el diseño y el diseño, incluida la interfaz de usuario del sitio web; estos están listos para usar. Bibliotecas de elementos de la interfaz de usuario... Hoy en día hay tantos de ellos que logramos recopilar solo conjuntos gratuitos en una publicación bastante grande.

¿Cuáles son las ventajas de utilizar elementos de IU predefinidos del sitio en el proyecto?

1. Todo el tedioso trabajo de alinear elementos pequeños ya está hecho.
2. Animación de formas, botones y otros elementos ya han sido implementados y configurados de acuerdo con las tendencias modernas en diseño web.
3. Cada juego Interfaz de usuario HTML componentes, por regla general, no es la primera versión. Todo JS está depurado y funciona de forma estable. Al mismo tiempo, se han identificado experimentalmente las soluciones más utilizables de este o aquel elemento del conjunto.

¿Dónde se pueden utilizar los conjuntos de elementos de la interfaz de usuario HTML?

En primer lugar, es prototipos, ya que no requiere ninguna singularidad especial en el diseño. Al desarrollar un prototipo, las bibliotecas se utilizan con pocos o ningún cambio cosmético. Lo principal es trabajar y reflejar la esencia del proyecto.

A pesar de que Interfaz de usuario Tiene un diseño pre-pensado, se puede utilizar en casi cualquier proyecto. Todos los elementos se ajustan a las tendencias modernas del diseño web y lo más probable es que al menos un conjunto de esta colección tenga exactamente el mismo estilo que su proyecto.

Entonces. Para tu atención 20 kits de elementos de interfaz de usuario HTML gratuitos para su sitio. No olvides suscribirte a las redes sociales. redes.

Elemento

Bastante agradable Kit de herramientas HTML para el sitio... Contiene casi todos los elementos de la interfaz de usuario, incluidos Cuadros de diálogo, forma, cuadrículas personalizadas para diseño web, notificaciones, menús y más. Todos los elementos y su animación se perciben fácilmente y no sobrecargan la página. Basado en Vue.js 2.0

Bloques de diseño

170+ bloques HTML para crear un prototipo de calidad. Este es un tipo de creador de páginas web a partir del cual puede crear cualquier cosa. El conjunto incluye un conjunto completo de todos los elementos, combinados en un estilo.

Diseño de materiales para Bootstrap

Gratis para el marco css Bootstrap 3 en el diseño Diseño de materiales de Google... Desafortunadamente, no tiene la misma dinámica que el diseño de materiales de Google original en Angular, pero intenta imitarlo.

UI plana

Calidad suficiente Ui en estilo plano que se basa en marco CSS receptivo Bootstrap 3... Una gran ventaja es la disponibilidad de fuentes PSD.

Kit de interfaz de usuario pura

Si necesita cuadrículas, formularios, botones, tablas o menús, este marco de interfaz de usuario puede ser para usted. Es muy liviano. El peso es de solo 3,8 KB.

Interfaz de usuario de diseño plano - HTML5 + CSS3

Conjunto mínimo que no se distingue por una calidad especial Elementos de la interfaz de usuario en HTML5 + CSS3... Además, tiene un diseño original.

Metro UI CSS

Interfaces de metro se han convertido en una cosa del pasado, pero incluso hoy en día este estilo atrae a una gran audiencia. Lo admito, soy uno de ellos. Incluso hoy en día, hay tareas en las que Interfaz de usuario de METRO puede ser necesario. Para su atención, un tamaño bastante grande y de alta calidad. UI Framework en HTML en estilo METRO... Casi todos los elementos con un diseño peculiar están disponibles de forma gratuita: estas son pantallas en mosaico, formularios, casillas de verificación, botones de radio, botones, menús, paginación y una gran cantidad de otras cosas interesantes. En total, el marco contiene más de 70 componentes de interfaz de usuario. También es obra de un desarrollador ucraniano.

Hélice

Gratis Marco CSS de Material Design con Bootstrap... Incluye alrededor de 25 componentes que, curiosamente, tienen bastante similitud con la dinámica original de Material Design en Angular. También hay una versión premium.

Material Design Lite

Uno de los mas desarrollados Interfaz de usuario de diseño de materiales marcos en HTML... En su arsenal hay una gran cantidad de componentes. Esta es una cosechadora completa. Creo que esta es una de las mejores implementaciones HTML de Material Design.

Interfaz de usuario semántica

Agradable, ligero y ordenado marco para la creación de la interfaz de usuario y creación de prototipos. Contiene casi todo lo que necesitas. Por ejemplo, botones, pestañas, tipografía, interruptores, etc. Traducido activamente al ruso. Fue construido desde cero y no tiene nada que ver con Bootstrap, a diferencia de la mayoría de las contrapartes en este artículo.