{"id":64772,"date":"2019-10-22T13:45:36","date_gmt":"2019-10-22T16:45:36","guid":{"rendered":"https:\/\/www.tusclicks.com\/blog\/?p=64772"},"modified":"2020-01-31T14:26:57","modified_gmt":"2020-01-31T17:26:57","slug":"10-mejores-disenos-de-paginas-web","status":"publish","type":"post","link":"https:\/\/tusclicks.com\/blog\/10-mejores-disenos-de-paginas-web\/","title":{"rendered":"10 mejores dise\u00f1os de p\u00e1ginas web"},"content":{"rendered":"\n

Un mal dise\u00f1o de un sitio web puede significar perder a un potencial cliente y de esta forma ser perjudicial para tu negocio. Todos hemos entrado alguna vez a un sitio gr\u00e1ficamente malo o que est\u00e1 poco alineado a su contenido o marca, posterior a esto seguramente nos retiramos del sitio y buscamos otro acorde a nuestras expectativas como usuarios. Este tipo de experiencias debemos evitarlas.<\/p>\n\n\n\n

El dise\u00f1o de nuestro sitio web es la carta de presentaci\u00f3n de nuestro negocio online para nuestro p\u00fablico objetivo y potenciales clientes. Un buen dise\u00f1o web puede fomentar el aumento de las conversiones, rentabilidad y posicionamiento de nuestro negocio en los mejores resultados de b\u00fasqueda de Google. En este art\u00edculo hablaremos sobre la importancia de los dise\u00f1os web y presentaremos 10 mejores dise\u00f1os de p\u00e1ginas web.<\/p>\n\n\n\n

\u00bfPor qu\u00e9 es importante el dise\u00f1o web?<\/h2>\n\n\n\n

Dicen que no hay segundas oportunidades para una primera impresi\u00f3n y creemos que es una frase muy cierta. \u00bfAlguna vez has vuelto a entrar a un sitio web que tuviera un mal dise\u00f1o? Es dif\u00edcil volver a captar la atenci\u00f3n de los usuarios despu\u00e9s de esto. Por eso es primordial que el dise\u00f1o de nuestro sitio web est\u00e9 bien actualizado en cuanto a su contenido y a la vez bien estructurado en cuanto a su dise\u00f1o. Atr\u00e1s quedaron los sitios web con extensos men\u00fas y exceso de ventanas emergente, los dise\u00f1os minimalistas son los que se est\u00e1n tomando la web.<\/p>\n\n\n\n

Este tipo de dise\u00f1os simples son furor tanto para los creadores de los sitios como para los usuarios, porque nos permiten incluir un storytelling de la marca sin explotar de informaci\u00f3n y as\u00ed captar la atenci\u00f3n del usuario de otro modo. Tenemos que fijarnos en no forzar el contenido (ni ofrecer contenido de poco valor) para que la experiencia de usuarios no se convierta en un desaf\u00edo para el consumidor. En un mundo donde ya estamos acostumbrados a la inmediatez, el acceso a la informaci\u00f3n de manera sencilla se convirti\u00f3 en una pr\u00e1ctica recurrente y esencial de dise\u00f1o web.<\/p>\n\n\n\n

Debemos contemplar que hacer un sitio web \u00f3ptimo para los usuarios puede traernos muchos beneficios. Algunos de ellos se ven reflejados directamente en un mejor posicionamiento SEO, m\u00e1s y mejores conversiones o incluso un aumento de tr\u00e1fico desde y hacia redes sociales si el sitio est\u00e1 bien linkeado. Adem\u00e1s, contar con un dise\u00f1o minimalista ayudan a mejorar el tiempo de carga del sitio, que es fundamental para mantener a los usuarios interesados en permanecer en l\u00ednea. Y por \u00faltimo, ten en cuenta que un dise\u00f1o minimalista es m\u00e1s f\u00e1cil de desarrollar de forma responsiva, es decir, que se adapte a todos los dispositivos y sus tama\u00f1os (tablets, smartphones, computadoras, entre otros).<\/p>\n\n\n\n\n\n\n
Ventajas de contar con un buen sitio web<\/th>\n<\/tr>\n
Ayuda a optimizar las conversiones. Capta la atenci\u00f3n de tus usuarios y potenciales clientes.<\/td>\nAyuda a optimizar las conversiones.<\/td>\nUn buen contenido y estructura mejora el SEO.<\/td>\nPuede llegar a fidelizar a tu cliente solo por su facilidad de uso.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n

Mejores dise\u00f1os web<\/h2>\n\n\n\n

A continuaci\u00f3n analizaremos el \u00e9xito de estos sitios web que han sido galardonados gracias a su creatividad y usabilidad que beneficiaron a los usuarios:<\/p>\n\n\n\n

1. Hero Design<\/a><\/h3>\n\n\n\n

El dise\u00f1o de este sitio web fue premiado gracias a la alineaci\u00f3n que hab\u00eda en su dise\u00f1o, representado por los servicios que ofrecen: ilustraciones, producci\u00f3n audiovisual, dise\u00f1o gr\u00e1fico y modelado 3D, que es el foco de este sitio. Otro punto a destacar son los colores que contrastan a la perfecci\u00f3n en cuanto al fondo con el texto, lo que permite que podamos leer f\u00e1cilmente el titular y encontrar el men\u00fa sin dificultad.<\/p>\n\n\n\n

Algo interesante a destacar que hace a este sitio tan caracter\u00edstico es que usa una sola landing page para mostrarnos toda la informaci\u00f3n necesaria para llegar a contratar sus servicios, como el portafolio de trabajo y los contactos correspondientes. <\/p>\n\n\n\n

\"hero-design\"<\/figure>\n\n\n\n

Este es un buen ejemplo de c\u00f3mo se adapta un sitio y se hace responsive. Si te fijas en la imagen, la experiencia y dise\u00f1o minimalista sigue manteniendo su esencia.<\/p>\n\n\n\n

2. Arche 68<\/a> <\/h2>\n\n\n\n

Esta tienda de ropa y calzado capt\u00f3 la atenci\u00f3n de sus usuarios diferenci\u00e1ndose de sus competidores del rubro. Su dise\u00f1o principal con uso de tipograf\u00edas y fondos 3D, nos muestra todos los \u00edtems con la informaci\u00f3n necesaria para comprar, sin la necesidad de usar im\u00e1genes ni videos,  junto a efectos que har\u00e1n una navegaci\u00f3n m\u00e1s entretenida. Adem\u00e1s cuenta con dos idiomas que podemos escoger para una lectura m\u00e1s personalizada.<\/p>\n\n\n\n

Si bien este dise\u00f1o les puede servir como una peque\u00f1a referencia para sus sitios, no conviene eliminar el uso de im\u00e1genes si no ofrecemos un producto o servicio ya posicionado en el mercado. Entonces si lo que buscas es conversi\u00f3n, quiz\u00e1s no sea la mejor alternativa.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

En su versi\u00f3n responsive, el dise\u00f1o no cambia en nada comparado con el sitio para desktop (pantallas de escritorio), esto lo hace una navegaci\u00f3n conocida y de f\u00e1cil manejo desde todos los dispositivos.<\/p>\n\n\n\n

3. Eat Genesis<\/a><\/h3>\n\n\n\n

Este sitio de comida org\u00e1nica nos ofrece un interesante dise\u00f1o monocrom\u00e1tico con toda la informaci\u00f3n necesaria en una sola landing page, pero no solo los datos para conocer el negocio nos llama la atenci\u00f3n, sino las bellas ilustraciones llenas de detalles de van apareciendo cada vez que hacemos scroll en el sitio.<\/p>\n\n\n\n

La informaci\u00f3n que vamos obteniendo a medida que hacemos scroll se centra en una breve historia del negocio, pasando por los horarios de atenci\u00f3n, el men\u00fa y los contactos correspondientes.

\u00bfQue hace tan interesante su dise\u00f1o? Que es una apuesta que busca representar la esencia de su negocio. En la primera pantalla ya podemos leer los conceptos \u201corg\u00e1nico\u201d y \u201csaludable\u201d, lo que tratan de plasmar a trav\u00e9s de los distintos s\u00edmbolos e ilustraciones.

Ojo, que si bien este sitio es destacable, no es de los m\u00e1s \u00f3ptimos para conversiones. Y recuerda que el dise\u00f1o de tu sitio siempre debe estar pensado para ayudarte a cumplir tus objetivos.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

<\/h3>\n\n\n\n

4. Chef JFB<\/a> <\/h3>\n\n\n\n

Sabemos que definir bien los colores de nuestro negocio es importante a la hora de comunicar, por eso un buen ejemplo de ello es este sitio del Chef Jean-Francois Bury, donde el negro es el principal color sumado a videos de preparaciones culinarias dan una muy buena percepci\u00f3n de elegancia. Con este sitio han dado en el clave de c\u00f3mo resaltar sus productos.

Si entras te fijar\u00e1s que este sitio nos recibe con un video representativo del negocio, mostr\u00e1ndonos la frescura de los productos que muchas veces las fotos no pueden captar. En este caso la calidad de la im\u00e1genes y videos que nos muestran son excelente por lo cual llegan a captar nuestra atenci\u00f3n desde que hacemos clic en el sitio.<\/p>\n\n\n\n

No podemos dejar de mencionar que este sitio tambi\u00e9n ocupa una sola landing page para ofrecernos toda su principal informaci\u00f3n.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

<\/h3>\n\n\n\n

5. Couro Azul<\/a> <\/h3>\n\n\n\n

El cuero es un sin\u00f3nimo de elegancia y este sitio web lo entiende a la perfecci\u00f3n. Este negocio orientado a la customizaci\u00f3n de productos automovil\u00edsticos en cuero es un gran ejemplo de c\u00f3mo alinear los servicios que ofrecen a su dise\u00f1o web. <\/p>\n\n\n\n

Si nos fijamos y entramos al sitio, veremos un men\u00fa correctamente legible y un video que nos muestra los proceso de manufactura con cuero mostrando atractivos detalles de sus trabajos.<\/p>\n\n\n\n

Como los dem\u00e1s, es un sitio de un solo landing y cuando hacemos scroll no solo vamos avanzando hacia el final del sitio, si no que van apareciendo cuadros que aportan al contenido. Su dise\u00f1o responsive no pierde relaci\u00f3n con el sitio web ofreciendo la misma experiencia de usuario.<\/p>\n\n\n\n

\"couro-azul\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

<\/h3>\n\n\n\n

6. Amets Contese<\/a><\/h3>\n\n\n\n

Este sitio web enfocado en el dise\u00f1o gr\u00e1fico, ilustraci\u00f3n y fotograf\u00eda nos llama completamente la atenci\u00f3n gracias a su llamativo dise\u00f1o.<\/p>\n\n\n\n

Su comunicaci\u00f3n basada solo en im\u00e1genes y colores llamativos captan nuestra atenci\u00f3n visualmente y desde ah\u00ed es nuestra responsabilidad mantenerlo (aunque te lo hacen bastante f\u00e1cil). El poco y preciso texto que se utiliza optimiza el tiempo que pasamos buscando alg\u00fan servicio en nuestro sitio. <\/p>\n\n\n\n

\"Amets<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

<\/h3>\n\n\n\n

7. Leandro Pedretti<\/a><\/h3>\n\n\n\n

Cuando queramos saber como es el uso correcto de un video en un sitio, este negocio de dise\u00f1os de casa tanto interior como exterior es un excelente ejemplo. <\/p>\n\n\n\n

El video que nos recibe al entrar al sitio nos muestra unas manos dibujando un plano de una casa, con esto, nos queda claro de entrada que el sitio que visitamos tiene que ver con el mundo del dise\u00f1o y la arquitectura.  Sumarlo a que toda la informaci\u00f3n del sitio lo tenemos de forma breve en un solo landing, convierte a este sitio en uno de los favoritos del rubro.<\/p>\n\n\n\n

Su dise\u00f1o responsive act\u00faa de igual manera que su versi\u00f3n de ordenador, exceptuando el uso de video, ya que esto puede retardar la carga del sitio en el m\u00f3vil. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/h3>\n\n\n\n

8. Shoes-Up<\/a><\/h3>\n\n\n\n

Este sitio web de calzado, supo c\u00f3mo usar un rostro p\u00fablico y su historia junto a un gran dise\u00f1o web que captaron la atenci\u00f3n de miles de personas alrededor del mundo. <\/p>\n\n\n\n

La experiencia que puedes obtener entrando a este sitio es, sin duda, \u00fanica. Los detalles que van apareciendo a medida que avanzas, desde colores y animaciones hasta descripciones del personaje, abundan en este sitio por lo que si tienes tiempo y est\u00e1s interesado, te quedar\u00e1s hasta llegar al final. Sabemos que gran parte del \u00e9xito de este sitio es el uso de un personaje popular p\u00fablico, pero encargarnos de crear un sitio interesante tambi\u00e9n es sumamente importante. Este tipo de sitios requieren una mayor cantidad de inversi\u00f3n de profesionales, pero pueden servir de inspiraci\u00f3n y referencia para nuestros sitios.<\/p>\n\n\n\n

Si entras te dar\u00e1s cuenta que la experiencia dentro de este landing es inigualable.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

<\/h3>\n\n\n\n

9. Frans Hals Museum<\/a><\/h3>\n\n\n\n

Cuando pensamos en museos, pocas veces pensamos en un sitio de ellos. Este sitio de uno ubicado en los Pa\u00edses Bajos, ofrece una experiencia \u00fanica para los usuarios, entregando todo tipo de informaci\u00f3n a pocos clics. Las im\u00e1genes y diferentes efectos se apoderan de la pantalla cuando vamos deslizando hacia el final. Pesta\u00f1as de pr\u00f3ximas exhibiciones y compra de tickets optimizar\u00e1n el tiempo de los usuarios cuando quieran ir a alguna exhibici\u00f3n. <\/p>\n\n\n\n

La paleta de colores de este sitio va variando seg\u00fan el tema que se est\u00e9 exponiendo, dejando de lado el prejuicio serio que nos dan los museos, que se refleja tambi\u00e9n en su dise\u00f1o responsive.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

<\/h3>\n\n\n\n

10. Active Theory<\/a> <\/h3>\n\n\n\n

Y por \u00faltimo, pero no por eso menos importante, tenemos este sitio web de \u00c1msterdam dedicado a las experiencias digitales \u00fanicas.  Si sumamos una buena experiencia de usuario y contenido de profesionales sin duda los potenciales clientes que requieran contratar nuestros servicios o comprar nuestros productos lo har\u00e1n. Este sitio web fue premiado como uno de los mejores sitios web del 2018-2019 gracias a los textos de gran tama\u00f1os, colores el\u00e9ctricos, dise\u00f1os futuristas y efectos considerados satisfactorios gracias al movimiento de la flecha.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Ya analizamos 10 de los mejores dise\u00f1os de sitios web en la actualidad, los cuales te pueden ayudar mucho como referencias para obtener ideas de cada uno y poder aplicarlas. Debemos tener en cuenta que crear y dise\u00f1ar un sitio web \u00f3ptimo no es una tarea f\u00e1cil ni de un bajo costo. As\u00ed que cuando queramos publicar o modificar nuestro sitio debemos tener nuestro objetivos claros antes de tomar decisiones de este tipo.<\/p>\n\n\n\n

Pero sin duda hay muchas caracter\u00edsticas destacadas que nos brindan estos sitios, y las cuales muchos de ellos comparten. <\/p>\n\n\n\n

Caracter\u00edsticas de un buen sitio web<\/h2>\n\n\n\n