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

Hoy en día es muy fácil crear una página web, y más fácil que se va poniendo cada día, pero algo que no es tan fácil es ¿cómo diseñar esa página?

Crearla es fácil pero dar con el diseño adecuado para lo que queremos conseguir no lo es tanto.

No obstante, hay algunos trucos que nos ayudan a escoger el mejor diseño para nuestra página.

En esta entrada te voy a hablar de ellos y de todo lo relacionado con cómo diseñar una página web.

Ya te adelanto que tendrás que elegir entre una web bonita o una web con una gran usabilidad. Normalmente, cuanto más estética y funcionalidades ponemos más dificultades ponemos para la UX (usabilidad) de los visitantes.

Lo ideal es buscar un punto intermedio, aunque depende del sector.

El diseño dependerá de para qué quieres la página web

Antes de diseñar una página web tenemos que tener claro qué es lo que queremos hacer con ella.

¿Quieres crear una tienda e-commerce?

¿Pretendes crear una web que a la vez sea una aplicación para juegos o realizar tareas?

¿Tu intención es la de dar la mejor información sobre una temática?

¿Quieres crear una web de membresía para vender tus servicios de mentoría?

¿Se trata de un simple blog?

Cada una de estas especialidades tiene unos diseños que más adecuados que otros.

Un blog, por ejemplo, puede ser la web más sencilla del mundo, y no tiene ni por qué ser bonita, y aún así funcionar de maravilla.

Sin embargo, si nuestra web es un juego interactivo entonces tendremos que preocuparnos mucho por preparar la misma para que el usuario tenga la mejor experiencia de juego.

Entonces ¿cuál es el mejor consejo para diseñar una página web?

Busca inspiración.

Mirar lo que hacen los que ya tienen éxito siempre ha sido una de las mejores maneras de meterse de lleno en un negocio. No se trata de copiar burdamente, pero sí de sacar la idea que nos va a guiar en nuestro proyecto, el cual, además, debería tener un toque personal y, por qué no, quizá innovador en algún aspecto. Sin embargo, lo de buscar inspiración es muy importante porque en el 99% de los casos nos va a ir mejor así que no intentando hacer algo que nadie hace y ver cómo nos estrellamos contra la pared digital de internet.

Veamos algunos ejemplos.

Diseño de una web de e-commerce

Digamos que quieres vender artículos de superhéroes (un ejemplo tonto pero ejemplo al fin y al cabo).

Antes de empezar seguro que te vas a informar de qué opciones tienes para hacer una página de e-commerce.

Es casi seguro que termines leyendo mucho sobre Shopify o Woocommerce.

También es posible que cuentes con un presupuesto muy grande y puedas pensar en contratar desarrolladores para hacerlos.

En todos esos casos es aconsejable que mires lo que están haciendo otras webs de ese tipo.

Si quieres hacer una web con Shopify busca páginas que usen ese CMS.

Lo mismo para las que usa la solución de WordPress.

Y así con cualquier otro sistema.

Empero, si te das cuenta, todas estas webs de comercio online tienen muchas similitudes, lo que nos dice que los diseñadores web de las mismas siguen unos criterios marcados por la industria que las hacen ´más eficientes.

De esta manera no tiene sentido que diseñes una página de este tipo con un WordPress y un tema corriente, porque te darás cuenta que no te funciona.

Lo mejor en este caso siempre es mirar a las páginas líderes en el mundo. ¿Y quién es la página líder en este sector? Amazon.

Como ya sabrás, Amazon tiene un diseño particular que parece bastante sencillo pero que por alguna razón lo mantienen, y es que esa es la clave para que les vaya bien y pueda generar cientos de miles de millones de dólares en ventas.

¿Para qué complicarte la vida?

En este caso es fácil porque has de seguir lo que hace el líder global y por tanto tu diseño ha de centrarse en crear una web con una estética y usabilidades similares o si puede ser, mejores.

¿Cómo diseñar un blog?

El caso de un blog, o una web que va publicando de manera habitual.

Este ha sido un modelo de bastante éxito desde hace muchos años en muchos nichos de mercado de la web.

El diseño, al igual que en el caso de las e-commerce, presenta una serie de características en común, y es que un blog simplemente ha de tener una funcionalidad de crear contenido nuevo y que sea accesible para los usuarios, ya sea por móvil o pantalla grande.

Uno de los blogs más exitosos y antiguos del mundo es el de Seth Godin. Con el mismo podemos ver que no hace falta un gran refinamiento en el diseño, y que más bien lo que tenemos que hacer es concentrarnos en el contenido, o sea en la creación de posts interesantes. El resto vendrá rodado.

La plataforma para diseño de páginas webs adecuadas para blogs más eficaz y popular es, sin duda, WordPress.

Mucha de la gente que crea un blog acaba por convertir su web en algo más grande, pero dejando esta funcionalidad en la misma, ya que para muchos sitios es el mayor atractivo de la web. Mucha gente visita determinadas webs solo por la calidad del contenido, y si es novedoso, mejor que mejor.

Aquí el diseño premia el pragmatismo.

De lo único que tienes que cuidarte es de no llenar la web de demasiada basura y de cosas que empeoren la UX. Mucha gente se empeña en embellecer la página pero termina causando grandes problemas en la UX. Recuerda que lo más importante es el usuario, y a este no le gusta que le pongan cosas raras que dificulten su navegación. Un ejemplo de esto pueden ser los pop ups que cubren botones importantes de la web.

¿Cómo diseñar una web corporativa?

Las empresas que venden servicios o productos harían bien en mirar lo que hacen los líderes mundiales.

¿Para qué complicarse?

Apliquemos lo que hacen los productos que más venden en el mundo.

En este caso un buen ejemplo es Apple, empresa con un producto principal, el iPhone.

En este caso vemos que Apple se centra en ofrecer una homepage con un «Call to action» único (obviando el menú, claro): «ver regalos».

Pero no es solo el tema del botón «llamada de atención», sino que vemos que es una homepage bastante limpia que busca que el cliente simplemente haga click ahí o en el menú si quiere navegar a algunas de las páginas importantes de la web.

Este modelo es el que usan la gran mayoría de empresas que venden productos o servicios – o al menos deberían – ya sea un bufete de abogados, un dentista, Apple o Tesla Motors.

Para ello puedes crear una web a medida, como hacen muchos de los gigantes empresariales o usar CMSs como WordPress, Wix o Squarespace.

Te puede interesar > Páginas para crear un blog

Siguiente paso en el diseño de una página web: elegir el sistema adecuado

Como nombré en el apartado anterior, para realizar webs podemos echar mano de soluciones totalmente personalizadas o podemos usar los famosos CMS.

El primer caso está más recomendado para grandes empresas que pueden tener equipos enteros de diseñadores que se ocupen de mantener la web a la perfección, o en su defecto, subcontratar este servicio a una empresa de diseño externa.

No es una opción que recomiende a la gente que tiene pocos recursos porque si bien es cierto que es relativamente fácil crear una web, lo complicado será el ir añadiendo diferentes funcionalidades con el tiempo, para lo cual siempre se tendrá que contratar desarrolladores particulares que no solo van a cobrar una gran cantidad de dinero sino que en muchos casos no van a poder aplicar una solución ideal, y en otros casos incluso se pueden encontrar con incompatibilidades entre las diferentes aplicaciones que se van añadiendo, por nombrar solo alguno de los problemas.

El segundo caso es el más recomendado para la gran mayoría de los que quieren meterse a diseñar páginas web hoy en día. Incluso muchos de los más fanáticos defensores del html tuvieron que bajarse del carro y subirse a los CMS.

A pesar de lo que parezca, los CMS no son para nada simples, y permiten crear webs de lo más complejas, de tal modo que incluso muchas empresas grandes los usan para la gestión de sus webs.

Así que si quieres crear una web y hacerle un buen diseño sin demasiados dolores de cabeza, es mejor que vayas por esta opción.

Los principales CMS para el diseño web son:

1. WordPress: el mejor y más conocido del mundo, sobre todo en el mercado de los autónomos y pequeños empresarios de internet. Perfecta para casi todas las soluciones
2. Shopify: es la alternativa más potente para crear una e-commerce para la gente “pequeña”. Al estar especializada en este campo es una solución perfecta para la mayoría de esas tiendas online pequeñas.
3. Wix: competidor que preocupa bastante a WordPress ya que ha estado comiendo mercado en los últimos años, y presenta un producto bastante bueno. Al contrario que el famoso WP, es un sistema centralizado que provee hosting lo que hace más fácil empezar de manera rápida. Por el contrario tiene más limitaciones que esta otra si queremos avanzar a un proyecto, digamos, muy grande, aunque poco a poco van saliendo soluciones particulares en este caso. Más info en la reseña de Wix.
4. Squarespace: otro competidor muy duro que ha salido en los últimos años y que es parecido a Wix. ¿Cuál es mejor? Difícil decirlo porque ambos tienen características muy buenas, y dependerá de tus necesidades del momento.
5. Otros CMS importantes: Joomla, Drupal o Magento

Elementos necesarios para el diseño de una página web

Bien, una vez tienes tu proyecto y sabes qué tipo de web tienes que crear, y qué sistema vas a usar para crearla, lo siguiente es ponerse manos a la obra con el proceso de diseño.

Esto incluye tareas muy importantes como:

1. Escoger la tipografía y colores que vas a usar
2. Escoger la tipografía
3. Estructurar la información de manera adecuada
4. Escoger el tema o apariencia que vas a usar
5. Elegir los términos adecuados en nuestra estrategia de publicación (si es que la tenemos)
6. Optimizar el contenido con el posicionamiento en la página

1 Escoger el color para el sitio web

Este punto puede parecer una tontería. Sin embargo, tiene su importancia para un futuro desarrollo adecuado de un proyecto online.

El diseño web puede estar especialmente afectado por una mala elección del color o las combinaciones de ellos.

Hay gente que esto no tiene importancia, sobre todo al principio, y que lo que debemos hacer es enfocarnos en nuestro producto. Cierto, pero tampoco es algo que nos debería llevar demasiado tiempo. Simplemente se trata de usar unos colores que sean compatibles y básicos.

Por ejemplo, un fondo blanco suele ser mejor visto que un fondo negro a la hora de leer, y si lo hace la mayoría de la gente es por algo. También hay colores que destacan más a la hora de usar los links, sobre todo dependiendo de los colores de fondo y contrastes. Todo un mundo lleno de datos interesantes sin duda. Si quieres más información lee el siguiente artículo (tradúcelo que está en inglés): https://www.nngroup.com/articles/color-enhance-design/

2 Escoger la tipografía

La tipografía es otra de esas cosas a las que apenas se le da importancia pero que también tienen su ciencia. De hecho, en una de las páginas más seguidas en el mundo del diseño web, ia.net, escribieron un artículo en el que decían que la tipografía era el 95% del diseño web.

Lo cierto es que esa última afirmación tiene algo de verdad porque en la mayor parte de las webs, el contenido principal, al menos cuando estamos en páginas de información, es texto.

Por ello, elegir una buena tipografía es un dato importante.

No se trata solo de elegir una letra bonita, sino también un tamaño adecuado para los usuarios de los diferentes aparatos, y ahí es donde entra también el concepto de adaptación a los diferentes tamaños de pantalla, algo que en los últimos años ha adquirido mucha importancia.

3 Estructurar la información de manera adecuada

Es importante que tengamos una buena estructura en la web.

Tanto si vas a crear una web de información o una enfocada a vender productos online, vas a tener que estructurar bien los contenidos para aprovechar al máximo el comportamiento del consumidor por internet.

Hay muchos estudios al respecto. Una web interesante sobre este campo es la que mencioné en el enlace de antes, el grupo Nielsen, donde se especializan en el comportamiento del usuario en las páginas web.

En este campo hay un punto muy importante: el hacer un link interno adecuado.

Este último punto no es dominado por mucha gente y por ello te encuentras con webs que tienen una arquitectura de enlaces internos que son un desastre.

Escoger un buen diseño de enlaces internos es crucial para que tu web no solo sea perfectamente navegable para tus usuarios sino para que los buscadores puedan «valorarla» mejor.

4 Escoger el tema que vas a usar, si usas CMS

Si estás usando WordPress, por ejemplo, vas a tener que escoger un tema para poder plasmar el contenido. Un tema es como el marco donde vas a cuadrar tus palabras, imágenes, vídeos, botones, formularios, etc, de manera que tenga un aspecto profesional.

En los otros CMS también puedes escoger diferentes temas y maneras de cambiar el aspecto de la web.

Cuanto más profesional sea tu proyecto más dinero podrás gastarte en temas y aplicaciones caras para hacer que el mismo sea más diferente.

5 Elegir los términos adecuados en la estrategia de publicación

Esto es algo que solo parece preocupar a los que se denominan SEOs, pero nada más lejos de la realidad porque cada vez son más las compañías que contrata equipos profesionales de SEO para crear una estrategia de contenidos adecuada.

No vale escribir artículos por escribir o meter cantidad sin ningún sentido.

No.

Hace falta escribir con criterio para poder obtener los mejores resultados de cara a Google.

Y es que esto es así porque a fin de cuentas, si tu contenido le gusta a Google es porque es probable que sea el mejor o al menos esté entre lo mejor de esa categoría, y por tanto le guste al usuario, que al final es lo que cuenta (no siempre se cumple esto, pero sí lo suficiente como para tenerlo en cuenta).

6 Optimizar el contenido con el posicionamiento en la página

Además de crear el contenido, elegir los colores y el tipo de letra, o elementos como imágenes o vídeos, también tenemos que tener en cuenta que hay toda una ciencia en base al posicionamiento del contenido en la web.

De nuevo, esto es algo que se suele dejar para los puristas, pero con el paso del tiempo, y si tu web crece lo suficiente es posible que te acabes por preocupar porque el posicionamiento de tu contenido sea adecuado, intentando buscar los sitios donde la gente:

• Haga más clicks en el botón de compra
• Pase más tiempo leyendo
• Sea más probable que haga click en los anuncios
• Sea más probable que continue leyendo otros artículos de tu web
• Y muchas cosas más

Cambios en estas materias pueden hacer que una web pase de convertir 50 a 100 en cuestión de días.

No es para tomarlo a broma.

Al principio, cuando empezamos y no hacemos dinero parece una tontería, incluso cuando hacemos poco dinero lo parece, pero cuando se hacen millones la cosa cambia.

Cómo diseñar una página web gratis

Este apartado tenía que incluirlo porque es mucha la gente que va buscando hacer cosas gratis.

Es normal.

Todos lo hacemos, yo también.

Diseñar una web gratis es posible.

Ello se puede hacer con los conocidos como website builders, algunos de los cuales comentamos antes, como Wix o WordPress, pero también GoDaddy o Weebly.

¿Qué ocurre con estos diseños webs gratis?

Que no van a tener la misma calidad que los de pago.

Obvio ¿No?

Otro punto importante es que la mayoría incluyen anuncios que ponen los mismos builders para compensar que estés usando su tecnología de manera gratuita.

Si lo que quieres es diseñar una web en la que no te importa no ganar dinero y lo haces por hobby, por ejemplo un blog informativo, pues estas soluciones te pueden valer.

Sin embargo, si tienes un proyecto mínimamente serio deberías gastar algo de dinero en un diseño medianamente profesional.

Después de todo tampoco cuesta tanto diseñar una web con un programa de pago de un builder. En muchos casos con poco más de 100 € o $ al año es suficiente. Como vemos es posible crear páginas web baratas y profesionales.

Conclusión

Bueno, espero que con este artículo se te hayan despejado algunas dudas de cual es la mejor manera para diseñar tu proyecto web.

Lo más probable es que tu caso se trate de una web o proyecto pequeño por lo que lo mejor en esos casos es o suele ser, ir por la ruta de los CMS.

Una vez hayas elegido uno es importante que te pongas manos a la obra y crees la web y el contenido lo antes posible, y sobre todo que no dejes de crear y hacer subir el proyecto.

Al principio, a no ser que seas un e-commerce o empresa con las ideas muy claras, lo importante es lanzarse para adelante y no perder demasiado tiempo en cosas muy técnicas.

Ya llegará el momento – ojalá – de perder más tiempo en los detalles que pueden hacer que nuestra web aumente las conversiones un 50 o 100%. Imagínate que estás ingresando 5.000 € o $ al mes. En ese caso una mejora sustancial de la web y la UX puede hacer que nuestro ingreso pueda subir fácilmente a 7.000.

En el mundo online hay casos mucho más exagerados.

Suerte con tu diseño web y adelante, no pierdas el tiempo.