Diseño de escaparate de diseño: nuevas referencias de junio 2020

Nuevamente es el momento para el escaparate mensual, donde echamos un vistazo a diez sitios web increíbles hechos por los miembros de nuestra comunidad. Todos los meses presentamos los mejores sitios web de Divic que han sido enviados por nuestra comunidad y hoy queremos compartir los primeros diez sitios web en junio. 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! Diseño de escaparate Diseño: Nuevas referencias de junio 2020 1. Preston Smiles

Este sitio fue enviado por Christian Mauerer. La sección Hero muestra texto animado con efecto de tipificación utilizando una fuente de fantasía y un CTA en un lado y el tema de la imagen de fondo en el otro. El pergamino revela una diapositiva del logotipo que muestra los materiales en los que se vio la empresa. Un CTA para libros muestra logotipos de tiendas en línea en el medio con flechas que apuntan a los bordes exteriores con fotos de libros. Los libros se mueven al centro mientras se desplazan. Una sección del propietario del sitio muestra una gran foto e información izquierda a la derecha. La foto funciona más rápido mientras se desplaza la página para ver una galería de superposición mutuamente. Más secciones incluyen videos estilizados. Me gusta especialmente la sección de testimonio, que presenta una imagen grande del propietario, testimonios de Facebook y fotos de eventos.
Visite el sitio web 2. WebDevXD

Este sitio fue enviado por Steph desde Web Dev XD.Se muestra un CTA a la izquierda con botones rojos sobre una imagen de fondo de un mapa del mundo y una superposición blanca.Un menú de ancho completo está debajo de esta sección y permanece en la parte superior mientras se ejecuta.La siguiente sección muestra un ejemplo de un trabajo en una pantalla de una computadora en un lado y una descripción en el otro, cada uno con colores rojo y blanco.Los servicios se muestran en borrones con iconos rojos.La sección del proyecto muestra imágenes apiladas.Las imágenes se encogen y las imágenes traseras se mueven de lado.Una sección habitable utiliza un fondo rojo con borrones que muestra texto e iconos blancos.El título se sienta verticalmente a un lado.El sótano muestra una diapositiva de publicación y múltiples widgets en un fondo rojo.
Este sitio fue enviado por LetThicia Diniz. Use colores azules y verdes y estilos de fuentes que se ajusten perfectamente. El encabezado muestra botones apilados para CTA. La sección Hero incluye una imagen de fondo con el sujeto en un lado y grandes puntos de bala en el otro. Los planes se muestran en forma de bloques de texto con fondos de diferentes colores, que se acercan al zoom. Me gusta CTA en una pantalla completa, construida con capas. Muestra una foto en un lado, un título que cubre los dos tercios, una lista de beneficios para el otro lado y una caja grande que se superpone a los otros dos con un fondo azul y modelos CTA en sí. Se muestra una diapositiva de testimonios con un patrón de fondo en el extremo derecho. El sótano muestra dos filas. El primero tiene CTA para leer más colores y tamaños diferentes, información de contacto y luego la fila inferior muestra widgets. Las dos filas se muestran sobre un modelo de fondo de paralaje. Visite el sitio 4. Samcara

Este sitio fue enviado por Xavier Ferre.El menú de navegación aparece verticalmente a la izquierda y permanece en la pantalla mientras se ejecuta.La sección Hero muestra el título del sitio en enormes fuentes seguido de una lista de servicios y un CTA de contacto que se puede hacer clic en un lado y una pequeña imagen en el otro.La información se proporciona en dos libros grandes con colores de fondo y diferentes posiciones de imagen.Ambos se superponen con la siguiente sección que muestra una cancha de baloncesto estilizada más grande, con un diseño similar al de los dos primeros libros.Varios libros siguen esto y se insertan con una gran columna de texto.Esta sección incluye un formulario de contacto y una lista de colaboradores.Las publicaciones de blog se insertan con una flecha estilizada que se acerca mientras se ejecuta.La sección de blog también lidera al lector en el formulario de conexión. Visite el sitio 5. Seguro de tampón
Este sitio fue enviado por Sean Turner.El sitio usa el color y las imágenes excelentes.La sección Hero muestra dos imágenes de fondo.La parte más grande tiene una cubierta azul, y la parte más pequeña tiene una cubierta verde.Se coloca una imagen en primer plano donde los dos se encuentran y se coloca sobre un fondo en forma de escudo.Se coloca un CTA en el otro lado.El primer plan también incluye formas en modelos que aparecen en todo el sitio.La siguiente sección muestra servicios en cajas grandes con los mismos modelos.Las siguientes dos secciones muestran borrachos altos en un lado y una imagen en el otro en un aspecto alternativo sobre una imagen de fondo con superposiciones blancas o azules.Las borrones muestran balas.Las imágenes usan el mismo escudo que la sección de héroes.Una diapositiva de publicación de ancho completo muestra el título y el texto de las últimas publicaciones.También incluye un mega menú con enlaces de texto. Visite el sitio web 6. Curlee

Este sitio fue enviado por Anthea A. Ancalade. La sección Hero muestra una imagen de fondo de pantalla completa con un cuadro de búsqueda central que le permite seleccionar una ubicación o usar su ubicación actual. Los servicios se muestran con imágenes que incluyen títulos y superposiciones cerca de un CTA. Los estilos presentados se muestran en una diapositiva con 6 columnas e incluyen una imagen, un título, una estrella y una ubicación. El control deslizante incluye la navegación de flecha y puntos. Si hace clic en uno de los estilos, llegará a la página de su producto. Los nuevos estilos se muestran en 6 columnas, pero sin una diapositiva. La sección de blog muestra las últimas dos publicaciones y coloca una línea en publicaciones con un enlace para ver más debajo de la línea. Los tutoriales en el blog se colocan en tres columnas y siguen el mismo diseño. También incluye un flujo de Instagram con 6 columnas y 2 filas y un sótano con un correo electrónico.
Este sitio fue enviado por Eugenia Janakow. Use mucho amarillo audaz en los gráficos. Los títulos se crean como si se hicieran con un fabricante de etiquetas, haciendo los fondos negros y el texto blanco con un aspecto 3D. Se coloca un CTA en el medio del menú. La sección Hero muestra una pantalla dividida por un CTA izquierdo y una imagen a la derecha. Un CTA utiliza un gráfico dibujado manualmente, que está animado en el camino y los viajes. La información sobre el propietario del sitio muestra una imagen rodeada con un CTA para leer más. Me gusta especialmente la sección de testimonio. Muestra las revisiones de Google completadas con evaluaciones STAR y un gráfico que puede hacer clic en usted, lo que lo lleva a la página. Los servicios se presentan en borrones e incluyen un gran gráfico dibujado manualmente. El blog usa el amarillo marcado para meta, y el formulario de contacto lo usa para el fondo de toda la sección.

Este sitio fue enviado por Simone Talamo.La sección Hero muestra una imagen de pantalla completa con el sujeto en el centro.El primer plan muestra un eslogan con un CTA y botones sociales.Varias secciones con ancho completo siguen un diseño similar.Cada sección tiene un separador idiota que funciona perfectamente para el género.La siguiente sección muestra imágenes grandes para obtener información con texto e iconos superpuestos.La mayoría tiene un fondo oscuro o se mezcla en fondos oscuros.Uno para un manual muestra la portada del libro con el texto.Las últimas publicaciones de blog muestran publicaciones en forma de sombras de caja.El sótano muestra los productos con los nombres, imágenes, evaluaciones de estrellas y precios.Las páginas del curso siguen el mismo diseño y agregan un cronómetro con recuento inverso y interruptores de estilo.
Este sitio fue enviado por Nicolas Peigner.Tiene muchas animaciones interesantes, texto estilizado, gráficos y flechas en todo el sitio.El amarillo se usa como color de marca y se usa de manera creativa.La sección Hero muestra texto en un lado con efecto de escritura.Un bar está debajo y enumera los servicios.En el lado derecho hay algunos elementos gráficos independientes que flotan y responden al cursor.La siguiente sección muestra un título con gráficos animados en un lado y CTA simples en el otro.El último trabajo sigue esto y presenta capturas de pantalla de obras en fondos de diferentes colores y patrones.Una sección que explica las ventajas coloca borrones en un lado con iconos de dos colores.Una imagen se encuentra en el otro lado y lleva al lector a borrones.Se coloca una simple diapositiva de testimonio sobre un fondo gris oscuro para destacar.


Este sitio fue enviado por Ava Charpentier. Use muchos tonos de bronce para colores de marca. La barra superior desaparece en progreso, el logotipo se superpone con el encabezado y la sección del héroe, y el encabezado incluye animaciones en la carrera. La imagen principal muestra el título, la descripción y el botón para realizar un pedido. Otra imagen se coloca como una ventana en la imagen del héroe en el verdadero paralaje. La información se muestra con borrones con gráficos personalizados. Los productos se muestran con un color de fondo detrás de la imagen del producto. Se utiliza un diseño de fondo similar para la sección de blogs. Un CTA para leer sobre la compañía muestra texto en un lado e imagen en el otro. Los testimonios se presentan en forma de libros con la cita en la parte superior, con un fondo blanco y el nombre en la parte inferior, con un fondo bronceado. El sitio también incluye un flujo de Instagram y un sótano personalizado, con una animación con Hover. Visite el sitio en la conclusión son las 10 mejores referencias en el sitio web de nuestra comunidad para junio. ¡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 al editor a Nathan sobre los elegantes temas de Temas Com. Asegúrese de hacer el tema del correo electrónico “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 presentada por Domonku / Shutterstock.com