Cómo diseñar una página web que enamore

Una vez vistos estos ejemplos tan inspiradores vamos a enumerar algunos de los factores a tener en cuenta a la hora de realizar un proyecto web y cómo estos determinan la armonía final del site.

Si después de leer el artículo tienes alguna aportación que se nos ha pasado por alto, no lo dudes y déjanos tu comentario.

1. Materia prima

El material textual y gráfico (y/o audiovisual) con el que contamos es el punto de partida de un proyecto web. A más calidad del material gráfico y textual que proporciona el cliente, más sencilla resulta la tarea de estructurar y programar una web con armonía y estilo.

Obviamente, no es lo mismo diseñar una web para un fotógrafo de moda que para un vendedor de neumáticos. Mientras que el primero nos va a entregar un enorme portafolio con material gráfico de gran calidad entre el que podremos elegir, el segundo probablemente apenas cuente con un par de dossiers de sus proveedores. Por tanto, el primer trabajo a realizar por el diseñador web es analizar la materia prima con la que se cuenta y darle un feedback al cliente con las siguientes cuestiones:

– ¿Tenemos suficiente información textual para cubrir las áreas básicas de la web (Información para las páginas: Portada- La empresa- Productos/Servicios- Noticias- Contacto)?

– ¿Tenemos suficiente material gráfico para cubrir las áreas básicas de la web (Slider, destacados de portada, páginas, blog)?

Si la respuesta para ambas preguntas es sí, no va a haber ningún problema y podremos saltar directamente al punto 2. Pero si el material que nos ha proporcionado el cliente resulta escaso o de baja calidad debemos reportar esta incidencia y proponerle al cliente alguna o varias de las siguientes soluciones:

a) Contratar un servicio de fotografía o ilustración profesional para proporcionarle materia prima de calidad que represente su empresa y sus productos

b) Comprar fotografías y/o gráficos de stock en algún banco de imágenes. Informarle del coste que tiene este servicio o, en su defecto, decirle que él mismo puede realizar esta acción.

c) Ilustrar su web con fotografías y vectores gratuitos (Freepick, Pixabay..) (Sólo recomendable para empresas basadas en servicios que se puedan conceptualizar,  por ejemplo: asesorías, consultorías, gabinetes jurídicos…) e informar al cliente del coste adicional que va a tener el servicio de búsqueda de imágenes y/o vectores.

d) Solicitarle al cliente un esfuerzo extra para conseguir de sus proveedores más material gráfico y textual para cubrir las áreas pobres de la web y ofrecerle el servicio de redacción web y de rediseño (si nos aportan el dossier de un proveedor o un enlace a otra web vamos a tener que extraer las fotografías, catalogarlas y estructurar toda esa maraña de información)

e) Solicitarle al cliente que realice él mismo el trabajo de fotografiar y/o redactar para cubrir las áreas pobres de la web.

O, en caso de que el cliente no esté dispuesto a realizar este esfuerzo extra o no quiera pagar más, informarle de que el resultado final de su web no va a cumplir con las expectativas del diseñador/programador web y que, una vez finalizado el trabajo, las mejoras web se cobrarán aparte.

Esta es una parte importante que muchas veces los diseñadores web olvidamos: educar al cliente para que no se convierta en un cliente tóxico: un cliente que marea y cambia de opinión cada día, un cliente que exige irracionalmente o un cliente «pasota» que no aporta el material  y nos retiene con una web durante meses.

Las páginas web no se hacen por inspiración divina del diseñador/programador web. Se necesita información estructurada, se necesita material gráfico de buena calidad y se necesita la colaboración e implicación del cliente.

2. Estructura y contenidos

«Menos es más» es un lema que debería llevar por bandera cualquier diseñador que se precie. Abarrotar la web con información gráfica y/o textual y llenarla de elementos y colores variopintos por doquier no es sinónimo de web completa… es, más bien, sinónimo de barullo y caos.

Cuando un internauta busca «algo», espera encontrarse con una información directa, clara y concisa, lo que en lenguaje web significa: estructura lógica, información bien definida y, en términos generales, web armoniosa y clara (sin estridencias, con coherencia, sin tipografías extrañas, sin aglutinamiento de la información…).

Por tanto, repasa el contenido de la web y elimina las imágenes y textos que resulten repetitivos. Quédate con lo esencial y enfatiza en párrafos H1. H2, lo fundamental. Recuerda que para una perfecta armonía la parte gráfica frente a la textual deberá estar en un porcentaje de 50%-50%.

3. Innovación y originalidad

Una vez pensada la estructura básica llegará la mejor parte: dotar de innovación y originalidad a nuestra web.

Lograr el efecto sorpresa en un entorno con millones de competidores no es una tarea sencilla y dependerá de la creatividad, habilidad y experiencia del desarrollador web.

Tanto si trabajamos el entorno web desde cero como si utilizamos plantillas debemos adecuar la web al cliente, buscando una buena combinación de colores  dentro de la gama de  corporativos y trabajando ad hoc el CSS de la web.

Recordemos que los pequeños detalles de estilo marcan la diferencia y que una buena idea es mejor que cien ideas mediocres:

• Creemos una página de inicio atractiva y con un toque innovador:

En función de la materia prima con la que partamos podemos optar por adornar nuestra web con un bonito slider que muestre una selección de las mejores fotografías y lemas y dotarlo de transiciones con distintos movimientos, o un sencillo parallax efectista con una imagen atractiva y representativa, o un vídeo en portada o una galería de destacados con un efecto mouse-over sorprendente… ¡Todo vale, pero no mezclemos todo!… Intentemos definir qué nos puede representar mejor, qué puede resultar más armonioso e integrarlo sin que esto represente un tiempo de carga excesivo para nuestra página de inicio.

• Busquemos la tipografía más idónea, la combinación de colores más adecuada (sin abusar: mejor emplear dos o tres colores para definir el estilo de la web, no más) y los efectos más resultones para el mouse-over de nuestros enlaces e imágenes (siempre tenemos que indicar al internauta dónde se encuentra un enlace… y qué mejor que un efecto mouse-over!)

• Iconos gráficos, elementos embebidos (videos, mapas…), shortcodes de plantilla y plugins.

Si sabemos jugar bien con estos cuatro elementos podemos hacer cosas realmente bonitas sin complicarnos demasiado la existencia.

Estudia bien los shortcodes del template y si ninguno cumple la función requerida prueba a buscar un plugin (gratuito de repositorio WordPress o de pago como los de Codecanyon) que realice la función. Si bien es cierto que, en algunas ocasiones,  encontrar un buen plugin puede resultar una auténtica locura, una vez lo encontremos será  nuestro mejor aliado. Cuando ya lo tengas, cúrratelo un poquito y modifica su CSS para que sea coherente con el de la web.

Integra de forma lógica y armoniosa elementos gráficos (iconos, dibujitos, gráficas, etc) que proporcionen información intuitiva. Siempre quedan elegantes y dan un toque especial a la web.

Juega con los títulos (H1, H2, H3) y con los separadores (líneas, áreas de diferente color) de forma coherente, sin abusar y aplicando el mismo criterio en todas las páginas.

Embebe elementos siempre que resulten necesarios, no pesan mucho, son interactivos y suelen gustar al internauta.

4. Investigación y reciclaje

El  hecho de haber llegado hasta aquí es prueba irrefutable de tu capacidad de investigación y reciclaje. Tan sólo es un consejo que siempre debemos tener presente: renovarse es la única forma de aprendizaje constante, si dejas de investigar dejarás de innovar y no podrás hacer nada nuevo. Cada vez que acabes un proyecto web asegúrate de que en el proceso has innovado y aprendido… Tu siguiente proyecto será mejor y así sucesivamente…

Dicho esto, gracias por llegar hasta aquí.

Si te ha gustado coméntanos, comparte y echa un vistazo a nuestra sección de diseño web!! 😉

Lo que añadiríamos hoy a estas reglas

Las cuatro ideas originales siguen siendo una base estupenda. A ellas añadimos varios criterios que en 2026 ya no pueden tratarse como detalles finales: la experiencia móvil, el rendimiento, la accesibilidad, el contenido y el SEO deben formar parte del diseño desde el principio.

5. Diseñar para pantallas reales

Una composición puede ser impecable en el monitor donde se diseñó y romperse en un portátil, una tableta o un móvil. El diseño adaptable no consiste en encoger la versión de escritorio: implica decidir cómo cambia la jerarquía, qué elementos se reorganizan y qué animaciones se simplifican.

6. Movimiento con propósito

Una transición sutil puede unir secciones; un personaje animado puede hacer memorable una portada; una respuesta al pasar el cursor confirma que algo es interactivo. El problema aparece cuando todo entra, gira, rebota y parpadea a la vez. El movimiento necesita pausas y debe respetar la preferencia de movimiento reducido del usuario.

7. Velocidad: la parte bonita que no se ve

Fotografías gigantes, vídeos sin optimizar, fuentes innecesarias y complementos que cargan recursos en todas las páginas pueden arruinar una buena dirección de arte. Formatos adecuados, dimensiones reales, carga diferida y una buena caché permiten conservar el impacto sin hacer esperar.

8. Accesibilidad y legibilidad

Contraste suficiente, textos cómodos, navegación mediante teclado, alternativas para las imágenes y controles reconocibles amplían la cantidad de personas que pueden disfrutar de la web. Una experiencia inclusiva no limita la creatividad: obliga a diseñar mejor.

9. SEO y diseño deben hablarse

El posicionamiento no consiste en repetir una palabra clave hasta que el texto pierda el pulso. Una arquitectura comprensible, títulos descriptivos, contenido útil, enlaces internos, imágenes optimizadas y una base técnica sólida ayudan tanto a los buscadores como a las personas.

Diseño y SEO se llevan bien cuando empiezan juntos. Si el contenido llega al final, acaba encajado con calzador. Si la estrategia solo piensa en robots, la página se vuelve pesada y artificial. El punto bueno está en construir una experiencia clara que responda de verdad a lo que alguien vino a buscar.

Checklist: una web bonita que también funciona

• ¿Se entiende qué haces durante los primeros segundos?
• ¿La identidad visual parece realmente tuya?
• ¿Los títulos permiten recorrer la página sin leerla entera?
• ¿El texto tiene un tamaño cómodo y suficiente contraste?
• ¿Las imágenes aportan información o emoción?
• ¿La versión móvil mantiene la jerarquía y el carácter?
• ¿Las animaciones tienen un propósito y dejan respirar?
• ¿La página carga con agilidad?
• ¿Existe un siguiente paso claro: descubrir, comprar, reservar o contactar?