Diseño de escaparate de diseño: nuevas referencias de octubre de 2019

¡Es esa vez otra vez! Es el momento de Div Showcase Monthly, donde echamos un vistazo a diez sitios web increíbles hechos por los miembros de nuestra comunidad. Cada mes presentamos los mejores sitios web de Divic que han sido enviados por nuestra comunidad y hoy queremos compartir los primeros diez sitios web para octubre. A lo largo de la publicación, indicaré algunas de mis funciones de diseño favoritas que atraen cada uno de los sitios web. ¡Espero que te guste! Design Design Showcase: Nuevos subs de octubre de 2019 1. Robots vs. cónsul

Este sitio fue enviado por Wade McMaster. El sitio utiliza una paleta de colores oscuro, con texto claro y azul blanco y resaltados en todas partes. El menú es delgado y está separado de la sección Hero con una línea azul. La sección Hero muestra una imagen de fondo con el logotipo del sitio y la descripción en el texto grande. Una sección sobre muestra información en dos columnas. Me gusta la sección del blog, que se muestra en paralelo sobre una imagen de fondo con una superposición elegante. Muestra la última publicación de blog de texto en un lado como CTA para ver el blog y una publicación de blog en la otra en un diseño de tarjeta. Las páginas de las imágenes de fondo y blog muestran publicaciones de blog con encabezado, imagen de fondo y barra lateral. La página de suscripción también es interesante. Muestra el formulario de registro como CTA con balas en un lado para mostrar los beneficios de la suscripción. Las páginas muestran un diseño de menú diferente desde la página de inicio.
Visite el sitio 2. Medios de diseño de coincidencias

Este sitio fue enviado por Sam Nicholson. El sitio muestra un video de fondo de pantalla completa con una superposición de gradiente. El primer plan muestra el logotipo y los dibujos de línea. El logotipo se acerca al desplazamiento y dos de los elementos de línea desaparecen para crear un efecto de desplazamiento interesante. El elemento más interesante es cómo el sitio usa separadores de secciones. Coloque una imagen de fondo detrás del divisor y luego coloque un gradiente sobre ella. Por encima de ellos se colocan contadores de números o medidores de círculo. El sitio utiliza muchos gradientes y texto estilizado para adaptarse. Los botones incluyen los mismos gradientes que los fondos. Los servicios se muestran con una apariencia alternativa e incluyen imágenes inclinadas en la carrera. La sección de carrera y la sección de contacto incluyen el mismo efecto de inclinación. Tiene muchas animaciones pequeñas, como las líneas que se inclinan en el lugar de la carga. El sitio también incluye un botón de regreso a top y una diapositiva de estilo, que me gustaría ver convertirse en una práctica estándar para el diseño web.
Este sitio ha sido enviado por Kalynn Midgy.Muestra un gradiente de fondo de ancho completo con un CTA en un lado e imagen en un dispositivo móvil en el otro.El pergamino revela información por un lado con un CTA e imágenes con propiedades en el otro, con una imagen colocada en el contorno de una computadora portátil.Proyectos similares continúan en todo el sitio.Mi favorito es la sección de la comunidad.Incluye un aspecto de dos columnas, con una imagen de fondo, con una superposición que la superpone, que incluye una imagen, un texto y un botón e información en el otro lado.La página tal como funciona muestra cada paso en la pantalla completa con un color de fondo diferente para cada uno.También me gusta la página del blog, que incluye una sección de héroes, texto para información, un divisor y luego publicaciones de blog.Las publicaciones agregan una sombra de la caja a la imagen presentada.El menú incluye un CTA. Visite el sitio web 4. Patria

Este sitio fue enviado por Jerome Bestel. Incluye muchos elementos gráficos en todo el sitio, comenzando con la sección Hero, que muestra una imagen grande en un lado y un CTA en el otro. El desplazamiento muestra una sección de dos columnas, con un gráfico más pequeño en un lado, con un botón de llamada que se puede hacer clic e información en el otro lado. Este diseño se alterna en la página mientras se ejecuta. Se proporciona otra información en borrones. Un control deslizante le permite mover un cursor y seleccionar un precio. La información del equipo se proporciona con borronías e incluye elementos gráficos para imágenes. El sitio utiliza un diseño mínimo y mucho azul para el texto y los fondos para atraer al público objetivo. Cada una de las páginas tiene un diseño similar, pero aún tiene algo único. El menú incluye un CTA de contacto y un enlace de llamada en el que se puede hacer clic. Me gustan los gráficos altos en las secciones de héroes de cada página.
Este sitio fue enviado por Dickon Kent.Tiene un gradiente de fondo en todo el ancho, con una imagen en un lado detrás de un CTA y un conjunto de imágenes en el otro lado, que muestra la aplicación en teléfonos móviles.Las siguientes secciones muestran texto con un divisor y un título azul a la izquierda y un teléfono inteligente con una imagen y los gráficos circundantes a la derecha.El texto y los gráficos se deslizan en su lugar mientras se desplazan.Un control deslizante muestra logotipos sobre un fondo modelado con un gradiente.Una diapositiva de testimonio de ancho completo incluye la imagen, el testimonio y la navegación de puntos y flechas en el fondo azul que coincide con el sitio.La información se proporciona dentro de los borrones que incluyen íconos en círculos que se adaptan al estilo del sitio.El sitio utiliza excelentes colores y gradientes azules y verdes. Visite el sitio 6. Rebbl

Este sitio fue enviado por Dickon Kent. Este sitio utiliza un mega menú interesante, con un texto más pequeño debajo del texto principal. Pasar con el mouse sobre uno de los enlaces abre el menú para revelar más enlaces e imágenes. La primera sección de la página inicial muestra una imagen de ancho completo, con espacio en un lado para un CTA y los productos en el otro lado. El pergamino revela un CTA de ancho completo que demuestra el producto y ofrece un enlace a la tienda. Una sección de blog presenta las categorías en forma de tarjetas de blog. Haga clic en uno abre la página de archivo de la categoría del blog. Las publicaciones de blog se presentan en libros grandes con la categoría centrada entre la imagen y el extracto. Un formulario de suscripción delgada muestra el texto y el formulario sobre un modelo de fondo. La información y los productos se presenta en una sección con dos columnas con grandes CTA. Me gusta el video CTA que muestra un video de fondo con un título y un botón de superposición. Un control deslizante de Instagram incorporado proporciona información sobre Hover y abre la información en un clic modal.
Este sitio fue enviado por Michal Teska. Es una apariencia de página que muestra una imagen de fondo de pantalla completa en paralelo con una superposición muy opaca. La superposición incluye un eslogan y una imagen. Todas las secciones tienen dos columnas, con un texto en el fondo en paralelo con un gráfico en primer plano y texto en el otro lado. Este diseño se alterna mientras corres. Una de estas secciones tiene interruptores diseñados para que coincidan con el sitio. La información sobre las personas involucradas se crea con borrones que tienen una imagen en miniatura a la izquierda y su nombre y ubicación. Los logotipos de los socios se muestran en tonos grises y cambian de color en el flotador.

Este sitio fue enviado por Christos Papadopoulos. Un fondo animado crea el efecto de una configuración submarina con gráficos de dibujos animados. Un CTA con un eslogan y una imagen animada está en el fondo. Un mega menú revela tres columnas de enlaces e imágenes. La siguiente sección proporciona información e incluye un enlace de llamada que se puede hacer clic y un enlace de consultoría. Los miembros del equipo se muestran con una imagen, un nombre, un título, una descripción y un botón para escuchar un mensaje de audio de esa persona. Los servicios se muestran en borrones que incluyen iconos bajo el texto. La página del proyecto presenta ejemplos de un libro que tiene lugar en Hover. Cada una de las páginas de servicios sigue un diseño similar, que incluye un encabezado con una descripción y un enlace, seguido de información detallada. La página del blog y las publicaciones siguen un diseño de encabezado similar.

Visite el sitio 9. Brands de Angeles

Este sitio fue enviado por Angeles Brands.El encabezado y el sótano permanecen en la pantalla mientras se desplazan.Son transparentes para que se muestre la apariencia.La página inicial muestra un fondo azul y más imágenes de pruebas de trabajo.Al hacer clic en una imagen, se abre la página del proyecto, donde puede ver los detalles sobre el proyecto.Cada uno se muestra como una publicación de blog e incluye una imagen presentada, descripción, imágenes, navegar por las publicaciones anteriores y próximas y un formulario de contacto.El sótano no permanece en la pantalla en las páginas del proyecto.El encabezado y el sótano tienen un diseño simple y limpio.El encabezado incluye enlaces a otros sitios del propietario, que usan colores suaves como este.El sótano incluye enlaces a las redes sociales.Ambos tienen líneas que las separan del cuerpo del sitio. Visite el sitio 10. ATG Europa
Este sitio fue enviado por Camiel Bos. El encabezado de pantalla completa muestra un video de fondo con un título y un eslogan en la esquina inferior izquierda de la pantalla. Tiene un mega menú y muestra enlaces y publicaciones en Hover. En el desplazamiento, verá que el menú se vuelve blanco y tiene un borde curvo y refleja la parte inferior de la sección de video. La información se proporciona en la siguiente sección e incluye una imagen que coincida con el tema del sitio. Las industrias atendidas, las soluciones y los servicios se muestran en imágenes paralelas. Un CTA de contacto muestra el título y el botón sobre una imagen de fondo e incluye secciones curvas para la parte superior e inferior para crear un diseño interesante. El sitio utiliza muchos separadores, modelos de fondo y elementos superpuestos, que se anotan bellamente, mientras mantienen un diseño limpio. El sitio utiliza excelentes imágenes y colores. Visite el sitio de conclusión son las mejores 10 referencias en el sitio web de nuestra comunidad para octubre. ¡Estos sitios se ven increíbles y, como siempre, queremos agradecer a todos por sus referencias! Si desea considerar su propio diseño, no dude en enviarnos un correo electrónico a nuestro editor a Nathan sobre los temas elegantes Dot Com. Asegúrese de hacer el tema del correo electrónico del “sitio”. ¡También nos gustaría averiguarlo en los comentarios! Cuéntanos lo que te gusta de estos sitios web y, si han hecho algo, quieres aprender en el blog. Imagen característica de Prostockstudio / Shutterstock.com