Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Inspiration

Inspiración: Tiendas Online en las Que los Productos Ocupan el Primer Plano Central

by
Read Time:5 minsLanguages:
This post is part of a series called Weeks of Web Design Inspiration.
Creative Examples of Geometric Web Design Styles
SVG Brilliance: 10 Inspiring Examples From Around the Web

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En esta ronda de inspiración he recopilado juntos ejemplos de diseños eCommerce, mostrando como se centran en sus productos para crear mejores experiencias.

Contenido Tentador

Para que cualquiera disfrute el tiempo que pasa en un sitio web, es necesario que el contenido esté adaptado a sus necesidades. Una vez conseguido esto, es el momento de conseguir que el contenido sea seductor. Este ejemplo es la forma es la más simple de mostrar y dar importancia a las imágenes cuándo estamos trabajando con fotos.

Observa el ejemplo de la página de producto de Wonderland’s Store. Conforme te desplazas hacia abajo, las imágenes de sus productos están muy orientadas hacia un objetivo. La imagen de cada estampado, o sudadera, tiene el mismo suave tono gris neutro de fondo. Esto En el caso de Wonderland’s Store se trata de adorables ilustraciones de reconocidos famosos. Los estampados son simpáticos y super coloridos. Ésta es una manera sugerente de exponer el contenido.

httpsthewonderlandstorecomproductshttpsthewonderlandstorecomproductshttpsthewonderlandstorecomproducts
https://thewonderlandstore.com/products

Otra web que tiene excelente contenido es la del artista Janson Ratliff. En su página de inicio, ha organizado sus obras por categoría. Según vas hacia la parte inferior de la página, aparecen nuevos tipos de obras que atraen tu atención. El efecto no sería el mismo si las diferentes colecciones fuesen expuestas de forma intercalada y todas juntas a un mismo tiempo.  Esto es importante porque permite al contenido crear una impresión única en cada momento en el usuario.

httpwwwjason-ratliffcomhellohttpwwwjason-ratliffcomhellohttpwwwjason-ratliffcomhello
http://www.jason-ratliff.com

Ve Directo al Grano

En ocasiones es mejor "no andarse con rodeos" para crear una conexión emocional con el visitante.

Examinemos el diseño de presentación de J. Hanna. Lo que me chifla de la presentación es cómo va directa a lo importante. Dentro de las fotos de las joyas, no hay nada que nos distraiga. No son escenas elaboradas, o modelos posando en cualquier escenario, ni haciendo "nada". Es una sencilla y diáfana muestra de la joya portada por una persona. Los colores están bien compuestos para resaltar los tonos dorados. Puedo ver el producto, y por lo tanto, me puedo imaginar a mi mismo/a llevándolo. No es necesario adornar el contexto en el que se muestra la joya. 

httpwwwjhannahjewelrycomclara-lookbookhttpwwwjhannahjewelrycomclara-lookbookhttpwwwjhannahjewelrycomclara-lookbook
http://www.jhannahjewelry.com/clara-lookbook

Información Útil

Otra cosa que mejora la experiencia es eliminar el trabajo de invitados en la sección de información relacionada, como podría ser el envío gratuito, o las ofertas en curso. Una vez más, no necesitas adornar el contenido para hacerlo efectivo. Haz obvio para tus clientes potenciales que el envío gratuito está disponible y pasa a otra cosa. El envío gratuito debería ser la motivación secundaria (en el mejor de los casos) por la que visitan tu web, principalmente, están deseando comprar algo, y el hecho de saber que el envío es gratuito no debería hacer sombra a su objetivo primordial.

Un buen ejemplo de todo lo que acabamos de afirmar hasta ahora es la página de inicio de Ward Whillas. Lo primero que ves es la foto de una modelo, la fotografía está muy despejada y expone claramente su mensaje. Se trata de una hermosa fotografía que me emociona y despierta mi interés. Por último, colocan una pequeña etiqueta negra en la parte inferior izquierda para informar a sus clientes potenciales que proporcionan envíos gratuitos en US. No es un molesto banner parpadeante, por tanto consiguen que la experiencia en esta página de inicio sea mucho más placentera.

httpwwwwardwhillascomhttpwwwwardwhillascomhttpwwwwardwhillascom
http://www.wardwhillas.com

Me he topado con un tema para WooCommerce que también logra este efecto bastante bien. Como ves en el diseño, hay dos bloques que indican "Envío Gratuito" y "Devoluciones Gratuitas". Son mensajes directos, pero no dejan de encajar con la estética del diseño en su conjunto.

httpsthemeforestnetitemdelphinus-creative-multipurpose-woocommerce-theme16067273s_rank2httpsthemeforestnetitemdelphinus-creative-multipurpose-woocommerce-theme16067273s_rank2httpsthemeforestnetitemdelphinus-creative-multipurpose-woocommerce-theme16067273s_rank2
https://themeforest.net/item/delphinus-creative-multipurpose-woocommerce-theme

Vender Con Fotografías

Es muy difícil vender algo online con visuales pobres o mediocres. Una de las razones por las que las imágenes son cada vez más y más grandes en el diseño web es que los humanos las comprendemos de forma innata; nos podemos identificar con ellas y procesarlas mentalmente a gran velocidad.

Tomemos como ejemplo el portafolio de Isabel Urbina Peña. En su página de inicio, muestra las portadas de libros que ha diseñado. Podría haber tomado la foto del libro sobre un fondo blanco, para aportar claridad, y haberlo llamado una jornada de trabajo. Pero eso no habría sido interesante. Eso es lo habitual. En cambio, Isabel ha diseñado imágenes gigantes para los fondos mostrando aún más su creatividad y acentuando el concepto del diseño del libro. El aspecto gráfico de estas imágenes de fondo es encantador, ayudan a construir una historia a partir del libro, que consigue embaucar al usuario.

httpwwwisabelurbinapenacomhttpwwwisabelurbinapenacomhttpwwwisabelurbinapenacom
http://www.isabelurbinapena.com

El sitio web de Tian emplea un efecto similar. Lo primero que ves cuando aterrizas en la página es una sencilla foto de una modelo jugando con un pañuelo. Las fotos son fantásticas en muchos sentidos. En principio, todo lo que ves es una modelo y su pañuelo, así que es fácil centrase en ella. El pañuelo está flotando y sus vivos colores añaden dinamismo al conjunto Por último, tenemos un sencillo CTA en la esquina superior derecha que indica con claridad en siguiente paso a seguir, pero no nos borra la impresión de la foto.

httpwwwtianstudioscomhttpwwwtianstudioscomhttpwwwtianstudioscom
http://www.tianstudios.com

He encontrado otro tema que expone los productos excelentemente. Se trata de Averly. En la captura de pantalla siguiente podrás observar como las fotos se emplean de dos formas diferentes. La primera enfatiza el producto, como un sombrero o un par de pantalones vaqueros cortos. Después, muestra el producto en un escenario real a través de la foto de una chica vistiéndolos por una calle. Esto crea proximidad con los consumidores. Puedes apreciar con claridad los dos tipos de fotografía, una te permite centrarte en el producto y la otra te permite soñar imaginándote en la vida real con el producto.

httpsthemeforestnetitemaverly-a-hip-creative-multipurpose-theme15888311httpsthemeforestnetitemaverly-a-hip-creative-multipurpose-theme15888311httpsthemeforestnetitemaverly-a-hip-creative-multipurpose-theme15888311
https://themeforest.net/item/averly-a-hip-creative-multipurpose-theme

La Consistencia en el Diseño es Clave

La inconsistencia en el diseño puede obstaculizar la fluidez de la experiencia del usuario. Cuando un usuario percibe inconsistencias, subliminalmente se alza una tarjeta roja, lo dirigen a cadenas de pensamientos poco deseables. Tu persigues que el usuario permanezca centrado en la compra y que no perciba nada como inadecuado. Podría parecer trivial, pero la inconsistencia es muy distractora.

Kant es otro tema con diseño espectacular y consistente. Es audaz de principio a fin, y my placentero a la vista. Fácil de navegar y con un magnífico flujo en la estructuración, gracias a su clara UI (Interfaz de Usuario). Las páginas de producto son, honestamente, muy bonitas. Todo el tema lo es.

httpsthemeforestnetitemkant-a-multipurpose-template-for-startups-and-freelancers16760116httpsthemeforestnetitemkant-a-multipurpose-template-for-startups-and-freelancers16760116httpsthemeforestnetitemkant-a-multipurpose-template-for-startups-and-freelancers16760116
https://themeforest.net/item/kant-a-multipurpose-template-for-startups-and-freelancers/

Resumiendo

Espero que hayas disfrutado con mi recopilación de fantásticos temas para páginas de eCommerce que se centran en destacar los productos. ¡Me encantaría que estos ejemplos te inspirasen a crear tus propios diseños de eCommerce centrados en el producto!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.