Sí, leíste bien el título. Solo los novatos diseñan sitios web bonitos (los verdaderos profesionales crean sitios web utilizables) . Con bonito me refiero a los diseños extravagantes que ves en Instagram, Dribbble, Behance y Pinterest.
Permíteme aclarar algo importante.
El Diseño No es Arte: Es Solución de Problemas
El diseño resuelve un problema. Sirve a un propósito. Es objetivo. Por lo tanto, no se supone que deba verse bonito. Simplemente tiene que funcionar.
Si estás construyendo un sitio web para impresionar a tu profesor de arte o ganar un premio de diseño, entonces adelante. Diseña el sitio web más bonito que puedas.
Pero si quieres crear un sitio web que genere tráfico, ventas o suscripciones, necesitas un sitio web funcional que sirva a ese propósito específico.
¿Por Qué los Sitios Más Exitosos del Mundo Parecen "Aburridos"?
Piensa en los mejores sitios web del mundo. Sirven a un propósito.
Un sitio web de cursos necesita vender cursos.
Un sitio web de blog requiere muchos lectores y luego mantenerlos leyendo durante un largo período de tiempo.
Un sitio de comercio electrónico vende muchos productos, y un sitio de redes sociales quiere que te quedes allí todo el día.
¿Te parecen bonitos sitios como Google, Facebook, YouTube y Amazon?
Echa un vistazo a algunos de los mejores sitios web en diferentes industrias que obtienen números elevados de visitas día tras día.
Aquí está booking.com. Que recibe 513 millones de visitas al mes,
cutt.ly 72 millones de visitas al mes,
Fragrantica un sitio web de belleza y cosmética que recibe 40 millones de visitas al mes.
Te parecen lo más hermoso estos sitios web. Podría seguir. Simplemente ve a Semrush en la sección de Top Websites y revisa los sitios web más importantes en cualquier categoría.
No encontrarás ni uno solo que priorice la belleza sobre la función.
Debes pensar, estas grandes empresas pueden contratar a los mejores diseñadores y desarrolladores. Entonces, ¿por qué su diseño es tan simple y a veces aburrido? La respuesta está en la pregunta misma.
Sí contratan a los mejores diseñadores y desarrolladores, y cuestan mucho dinero. Así que, naturalmente, la prioridad es construir un sitio web rentable, y no un sitio web bonito.
A los diseñadores no les preocupa crear sitios web bonitos, porque su trabajo, sus ascensos y su carrera giran en torno a métricas, y no en cómo se ve el sitio.
Muchas veces, los diseños que ves en plataformas como Dribbble fueron hechos en Figma o Canva como proyectos de arte digital, no como prototipos de sitios web reales y funcionales.
Ahora déjame explicar por qué en teoría un sitio web «bonito» no es rentable. Digo, eso sería lo ideal.
La Trampa de lo "Bonito": Por Qué Falla en el Mundo Real
En realidad, ya sabes la respuesta. Simplemente no te das cuenta cuando eres tú quien está construyendo el sitio web.
Como usuario, ¿por qué visitas un sitio web? Para aprender algo, pedir un producto, ver videos o navegar por las redes sociales. Siempre hay un propósito.
Cuando visitas YouTube, quieres ver recomendaciones de videos que se adapten a tu estilo. Luego quieres un acceso fácil a todos los botones y opciones.
Solo quieres que las cosas sean simples, directas y fáciles de usar. Quieres hacer lo tuyo y salir.
Después de todo, tienes muchas cosas que hacer, y lo último que quieres es un sitio web que sea complicado y te haga perder el tiempo.
Cuando buscas algo, quieres resultados rápidamente y frente a ti en un diseño simple. La mayoría de las veces ni siquiera miras la pantalla. Simplemente le preguntas a Google y te da la respuesta.
Ya existen productos de IA en los que le dices a la IA que pida algo o reserve una mesa para ti. Ni siquiera tienes que mirar tu pantalla.
¿Ves ya un patrón? La gente quiere las cosas simples y fáciles de usar.
Las empresas lo saben porque hacen su investigación. Por eso quieren mantener las cosas muy simples y amigables para el usuario.
«En la economía de la atención, el usuario es el rey». Eso significa que los sitios web que brindan la mejor experiencia de usuario ganan usuarios y dinero.
No te importa lo bonito que se vea Amazon. Solo quieres ir allí, encontrar lo que buscas, leer reseñas, ver imágenes del producto y luego hacer el pedido. Quieres pasar el menor tiempo posible.
Simple o bonito. Cada sitio web que ves está construido con HTML, CSS y JavaScript. Ahora, este código se ejecuta en tu navegador.
Los buenos diseñadores diseñan sitios web teniendo esto en cuenta. Conocen las limitaciones de los navegadores.
Los sitios web bonitos tardan más en cargar debido a todas las imágenes, videos y adornos que tienen. Luego no funcionan en pantallas pequeñas por cómo están posicionadas las cosas.
Puede volverse un caos para el navegador y para los usuarios.
Además, son un poco más difíciles de programar. Eso no es un gran problema. Pero no hay ningún beneficio en escribir mucho CSS si los navegadores y los usuarios no están contentos.
En resumen, los sitios web bonitos tardan más en cargar y no responden a los tamaños de pantalla. Eso es una mala experiencia de usuario, y es lo último que quieres.
Entonces, la pregunta es, ¿qué deberías hacer? Construir un sitio web fácil de usar.
Cómo Construir un Sitio Web Que Realmente Funciona: Los 5 Pilares
Voy a darte algunos consejos muy prácticos que puedes usar para construir un sitio web fácil de usar.
Un sitio web se apoya en estos cinco pilares: maquetación, tipografía, colores, imágenes y contenido. Si aciertas en estas cinco cosas, estás listo para el éxito.
Así que vamos a repasarlas una por una.
Pilar 1. Maquetación
La maquetación de un sitio web es lo primero que ve el usuario. Maquetación significa la estructura general del sitio web. En segundos, un usuario puede sentir si una maquetación es buena o mala.
Recuerda, bueno no significa bonito. Significa fácil de usar.
La maquetación es lo primero en lo que debes pensar al construir un sitio web, porque en este punto pensarás cómo se adaptará este sitio web a diferentes tamaños de pantalla.
Layout (Filas y Columnas)
Para hacer eso, divide tu contenido en filas y columnas, y luego organízalas en la pantalla.
Si trabajas con herramientas como WordPress o Elementor Pro, estos principios de columnas y filas son la base de cómo funcionan sus constructores visuales, asegurando que tu diseño sea funcional antes de ser ‘bonito’. Aquí hay un ejemplo.
Tenemos estas seis tarjetas en este sitio web, pero puedes ver que también tenemos tres encabezados, y cada encabezado está conectado a dos tarjetas.
Ahora, ¿cómo podemos organizarlas para que respondan a diferentes tamaños de pantalla?
Es decir, queremos que estas tarjetas correspondan a su encabezado, pero necesitamos ajustar su posición en una tableta y luego también en un smartphone.
La solución fácil es mover la última columna a la siguiente fila en las tabletas, y luego mover la segunda columna a la siguiente fila en los smartphones.
Así, en la laptop, tenemos una fila y tres columnas, pero en el smartphone, tenemos tres filas y una columna.
Tenemos una propiedad de CSS llamada Flexbox que se encargará de estas cosas por ti, solo necesitas empezar a pensar en términos de filas y columnas.
Déjame mostrarte un ejemplo más.
Aquí tenemos dos columnas. La columna uno tiene un encabezado y algo de información, y la columna dos tiene una imagen. Esta es una maquetación bastante común y exitosa.
En una pantalla más grande, podemos encajar ambas columnas en una sola fila, pero en los smartphones tiene sentido mover una de las columnas a la siguiente fila.
Tamaño y espaciado (La Regla del Ocho)
Una parte muy importante de la maquetación es el tamaño y el espaciado. Los diseñadores y desarrolladores novatos luchan mucho con eso. Permíteme presentarte el número ocho.
Este es el número que te ayudará en todos tus problemas de tamaño y espaciado.
Así es como funciona. Cualquier tamaño o espacio que uses en tu sitio web debe ser divisible por ocho. Así que números como 8, 16, 64, 120 etc. son tus aliados.
¿Necesitas un ancho para un botón? Prueba con 16 píxeles. ¿No se ve bien? Prueba con 24. Prueba con 32. Prueba un número que sea divisible por ocho.
¿Cuánto relleno (padding) para una sección? Prueba con 40 píxeles. ¿No se ve bien? Prueba con 64. Prueba con 80.
¿Cuánto espaciado entre dos columnas? Prueba con 16 píxeles. Prueba con 40. Prueba con 64. Pero no pruebes con 30, ya que no es divisible por ocho.
Consistencia (La Repetición como Recurso)
Esto me lleva a la consistencia. Tu maquetación tiene que ser consistente. Si diste 32 píxeles de espacio entre dos columnas, mantén el mismo espacio en todo tu sitio web. No pongas 24 o 40 píxeles en otras columnas.
Un buen diseño se repite a sí mismo.
Encontrarás estos principios básicos de diseño en todos los sitios web. Aquí está una simple búsqueda en Google.
Presta atención a cómo el diseño se repite. ¿Notaste el mismo espaciado en el diseño? Lo mismo con cada resultado. Ícono, título y URL. Luego un enlace clickeable como encabezado, y luego un pequeño párrafo.
La belleza reside en hacer las cosas simples y fáciles de usar. Los usuarios pueden hojear rápidamente muchos enlaces y decidir en cuál hacer clic.
Mientras construyes la maquetación de un sitio web, piensa en cómo navegarán tus usuarios a través de él.
Los humanos somos máquinas de reconocimiento de patrones. Esperamos que las cosas se repitan. Así como repetimos la maquetación, también repetimos las mismas fuentes, colores y ambiente general.
La consistencia es la clave aquí.
Haz esto por ti mismo y tomate tu tiempo, visita la página principal de Apple.
A Apple le importa mucho el buen diseño. Nota cómo solo usan tres colores en todo el sitio web. Negro, blanco y azul. Y ese es un ejemplo real de que menos es más. Fondo blanco, texto negro y botones azules.
Podrían haber añadido rojo, naranja y todo tipo de colores, pero no lo hicieron. Se trata de repetir los mismos colores una y otra vez.
Déjame mostrarte otro patrón de diseño. Mira esta sección de la misma web de Apple.
Tenemos dos columnas. Cada columna posee un título, un subtítulo, dos botones y una imagen.
Imagina que construyes este sitio web desde cero.
Construyes la sección uno y luego simplemente la copias y pegas. Luego solo tienes que reemplazar el contenido de adentro. Esto se llama diseño basado en componentes y es bastante común en la industria.
Trabaja de manera más inteligente, no más dura.
Dicho esto, pasemos al pilar número dos para construir un sitio web fácil de usar. Tipografía. Es una forma elegante de decir fuentes.
Pilar 2. Tipografía
Quedémonos en Apple por ahora.
Mira cómo tiene diferentes tamaños de fuente.
Ahora, ¿cómo sabrás qué tamaño usar y dónde?
Esto se llama escala tipográfica y tenemos muchos sitios web muy útiles que te ayudarán a generar escalas tipográficas.
Simplemente ingresas la fuente del cuerpo del texto. Es el tamaño de fuente predeterminado para tus párrafos y luego te dará todos los demás tamaños según tu necesidad, yo uso escalafont.com y typescale.com
Una vez que tengas los tamaños de tus encabezados y párrafos, haz que todas las fuentes tengan el mismo tamaño que la fuente del cuerpo.
Luego pregúntate cuál es la parte más importante del sitio web. Supongo que los encabezados. Así que dale a los encabezados su tamaño y luego pasa a las siguientes cosas importantes.
Mantén muchas cosas con el tamaño de la fuente del cuerpo y haz las partes menos relevantes más pequeñas y las partes más importantes más grandes. Es así de simple. Eso dará jerarquía visual.
Intenta usar una fuente limpia y fácil de leer. Si es posible, usa solo una fuente en todo el sitio web. Cuantas más fuentes uses, más posibilidades de estropearlo.
Aquí están mis cinco fuentes preferidas para sitios web, pero siéntete libre de experimentar y eso también es cierto para nuestro próximo pilar.
Inter – Roboto – Open Sans – Lato – Playfair Display (para títulos).
Pilar 3. Colores
Al igual que con las fuentes, cuantos menos colores uses, mejor. Apégate al blanco y negro para la mayoría de las cosas y añade un color de acento para darle algo de personalidad.
Si tienes imágenes en el sitio web, esas imágenes agregarán algo de carácter de todos modos.
Así es como puedes crear una paleta de colores para tu sitio web. Visita este sitio web coolors.co y elige una paleta que te guste.
Ahora decide cuál será el color primario. Tu primario es tu color predeterminado. La mayor parte del sitio web tendrá ese color.
Luego elige tu color secundario o de fondo. Si elegiste un color oscuro como el negro como tu color primario, elige un color claro como el blanco como tu color secundario.
Luego selecciona un color como tu color de acento. Usarás ese color el cinco o diez por ciento del tiempo. El color de acento se usará para estilizar tus botones, íconos y otros gráficos en el sitio web.
Ten otro tono de ese color de acento para usar en el estado «hover» (al pasar el cursor).
Por ejemplo, si elegiste el naranja como tu color de acento, usa un naranja oscuro como tu acento dos. Así, si el usuario pasa el cursor sobre el botón, debería cambiar de color.
Esto hace que el sitio web sea más vivo y fácil de usar.
Pilar 4. Imágenes
Nada hace que un sitio web sea más vivo que los íconos, imágenes e ilustraciones. Es el cuarto pilar en la construcción de un sitio web fácil de usar. Los íconos pueden hacer las cosas más fáciles de entender.
Usa estos sitios web para obtener íconos e imágenes libres de derechos de autor.
Existen muchos otros, solo busca en Google.
Usa imágenes nítidas y limpias, pero debes optimizarlas antes de ponerlas en tu sitio web. Este sitio web te ayudará con eso tinypng.com.
Cada imagen en tu página ralentizará tu sitio web, pero la gente prefiere simplemente hojear la página mirando las imágenes y los encabezados. Así que mantén algunas imágenes potentes que complementen tu contenido.
No te limites a descargar y subir imágenes al azar para rellenar espacio. No puedes ser perezoso aquí. Usa imágenes que le hablen al usuario.
Pilar 5. Contenido. El pilar mas importante
Y eso me lleva al pilar final y más importante del sitio web. El contenido. El contenido lo es todo. La gente visitará y se quedará en tu sitio, incluso si ignoras todos los principios de diseño. Solo mira Craigslist.
Es lento y feo, pero recibe alrededor de 10 millones de visitas cada día. Sí, 10 millones en un solo día. ¿Por qué? Porque la gente está allí por un propósito, y los anuncios cumplen ese propósito.
Así que si estás construyendo un sitio web de cursos, ten el mejor curso del mercado.
Si estás construyendo un blog, escribe buenos artículos.
Si estás construyendo un sitio de comercio electrónico, sé transparente. Muestra a los usuarios las imágenes, las reseñas y toda la información que necesitan para realizar una compra informada.
En general, si estás construyendo un sitio web, primero pregúntate, ¿por qué necesitas un sitio web? Pregúntale a tus usuarios si les gusta un sitio web. Pregúntales qué quieren ver allí, y luego simplemente entrégaselo.
Por supuesto, intenta hacer un sitio web que se vea bien también, pero tu contenido impulsará el tráfico, las ventas y cualquier cosa que puedas desear de un sitio web.
Conclusión
Un último consejo. Construir un sitio web es un proceso de prueba y error. Tu sitio web evolucionará con el tiempo. Sigue recopilando comentarios de los usuarios y otros datos importantes, y haz cambios en tu sitio web.
Así que si estás construyendo un sitio web completamente nuevo, simplemente hazlo lo suficientemente bueno y publícalo.
Tu versión 1 nunca será perfecta, y tampoco lo será la versión 10, pero será mejor que lo que tenías antes.
Estas cosas pueden sonarte obvias, pero generalmente los primerizos intentan construir un sitio web bonito.
Caen en la trampa de Dribbble e Instagram y pierden el enfoque. Piensan que construir es como crear algún tipo de arte. No lo es en absoluto.
Tal vez si eres un artista, puedes construir algo extraordinario, pero para los negocios normales simplemente no funciona.
Así que aquí está la conclusión clave. Solo los novatos construyen sitios web bonitos. Los profesionales construyen sitios web fáciles de usar con un enfoque principal en el contenido y los usuarios.
¿Quieres un sitio que impresione a tus colegas o un sitio que te haga ganar dinero? Esa es la verdadera decisión. Empieza a construir para tus usuarios, no para tu feed de Instagram.»
Un comentario
Hola me parece interesante pero no me lo trago del todo