En este tercer bloque lo que vamos a hacer es aprender a definir la estructura de la web, la organización de los contenidos y cómo acertar con el diseño aunque no tengas ni idea de diseño gráfico.

Estructura general de tu web

La estructura de tu web sería como el esqueleto de la misma. Es decir, cómo están organizados todos tus contenidos y cómo se navega a través de ellos.

Es muy importante que la estructura sea limpia y clara y que sea muy fácil acceder a las distintas secciones de tu sitio web. Para ello te recomiendo que te ayudes de un mapa web. Dibújalo en un papel.

Además, ten en cuenta que los menús no deberían tener más de 3 niveles de profundidad. Es decir, no más de 3 sub-apartados. De esta forma el usuario no se va a perder por tu web. Cuanto más sencilla sea tu web, mucho mejor.

Los contenidos van antes que el diseño

El contenido es el rey, métete eso en la cabeza.

Si quieres posicionar bien en Google y atraer clientes, tienes que dar prioridad a tus textos. Esto quiere decir que primero tienes que preparar tus textos, tienes que saber qué mensaje quieres transmitir y luego estructurar cada página de la web en torno a ellos. No al contrario.

La maquetación y el diseño que utilices tienen que servir para que los textos se muestren de la forma más atractiva posible. No puedes condicionar tus contenidos para que encajen en el diseño que tú quieres.

Así que ya sabes, primero prepara el contenido y luego preocúpate por darle un diseño atractivo.

Estructura de cada página, aboceta todas las que puedas

Consiste en estructurar todos los elementos dentro de cada una de las páginas. Mi consejo es que hagas un boceto de cada una de las páginas que vayas a maquetar. No hace falta que hagas genialidades. Utiliza un papel y lápiz. Que sea algo rápido y sencillo.

Indica dónde va a ir ubicado el logotipo, el eslogan, el menú, tu botón de llamada a la acción, la barra de búsqueda, los iconos a redes sociales, etc

Si quieres herramientas más avanzadas para hacer bocetos digitales, tienes por ejemplo mybalsamiq.

El objetivo es que tengas una idea previamente definida de cómo vas a organizar los elementos y contenidos dentro de cada una de las páginas de tu web.

Luego cuando pases al momento de maquetar, seguramente va a haber cambios pero por lo menos así vas a tener las ideas mucho más claras y ahorrarás tiempo.

Las páginas interiores son tan importantes como la home

Todos queremos tener una web espectacular y profesional. Pero no sólo debemos centrarnos en maquetar la home o página de inicio de nuestra web sino también el resto de páginas importantes como son: servicios, contacto, acerca de, etc.

No puedes tener una home muy bonita y que luego en las páginas interiores sea todo feo. Eso da desconfianza. Así que ayúdate de un maquetador como Thive Content Builder o Visual Composer.

Cómo lograr una apariencia profesional sin tener ni idea de diseño

Entramos en la fase de diseño. Sin duda si no sabes nada de diseño web, lo mejor es que puedas ayudarte de algún maquetador de WordPress. Pero por usar un maquetador no significa que ya puedas diseñar páginas perfectas, eso no te convierte en diseñador web.

Por eso es importante que no trates de inventar la rueda. No busques hacer algo radicalmente diferente, utiliza fórmulas que ya funcionan porque han sido testeadas y comprobadas por diseñadores profesionales.

El logotipo

La importancia del branding personal

Tanto si eres una empresa como un emprendedor, es vital que cuides al detalle la creación de tu marca personal. El logotipo es la representación visual por excelencia de tu branding personal.

Elige cuidadosamente el texto que vas a incluir en tu logotipo, el eslogan si deseas ponerlo.

Escoge a conciencia la tipografía y los colores que mejor te definan (nunca más de 2 ó 3 colores distintos) Elígelos a conciencia porque esos colores seguramente van a ir aplicados en el futuro en tu web, cartelería, papelería, etc…

Este tema daría para estar hablando un día entero pero en este mini curso no puedo extenderme mucho más.

Cómo elegir los colores

Psicología del color

Cada color despierta en las personas unas sensaciones determinadas. Y cada color está asociado a distintas emociones. Así que lógicamente el color influye directamente a cómo se sienten y cómo se comportan los usuarios dentro de tu web.

Los colores deben ayudar a reflejar o transmitir perfectamente quién eres, cómo eres y cómo es la filosofía de tu negocio.

Puedes ayudarte de los colores corporativos que tienes en tu logotipo. Por eso es muy importante haber hecho previamente un buen diseño de logotipo. De esta forma toda tu identidad visual va a ir en la misma línea.

Lo que no puede ser es que tengas las paredes de tu oficina en azul, el logotipo en verde, el coche de empresa en rojo y tu web en morado. Olvídate de tus colores favoritos y piensa en qué quieres transmitir.

No más de dos o tres colores

Si pueden ser 2 colores, mucho mejor que poner 3. Después puedes utilizar estos colores dentro de tu web.

Un consejo es que evites los párrafos de textos largos que sean blancos sobre fondos oscuros. Cuesta mucho leerlos y cansa la vista.

Es mejor un fondo blanco o claro con unas letras negras y oscuras. Fíjate en este post que estas leyendo (fondo blanco, letras oscuras)

Los colores los puedes utilizar en elementos secundarios como líneas de separación de secciones, fondos, botones, iconos, etc…

Si quieres que todo llame la atención, al final nada lo hará

Deberías definir un único elemento de tu página (por ejemplo un botón) que quieras resaltar y utilizar el color para ese elemento. Porque si pretendes resaltar muchas cosas a la vez, al final el ojo humano no se centra en ninguna en concreto.

Piensa también que no utilices colores demasiado llamativos o brillantes porque llaman mucho la atención pero también cansan mucho la vista del usuario y puede acabar saliendo de tu web.

Ayúdate del trabajo de otros

Utiliza herramientas gratuitas para elegir paletas y combinaciones de colores. Estas herramientas te ofrecen diferentes combinaciones de colores preciosas y bien equilibradas y listas para utilizar que han hecho otras personas.

Algunas herramientas son Adobe Color CC y Pictaculous.

Cómo elegir las tipografías de tu web

No ignores la importancia de las tipografías en el diseño web. Al igual que los colores, las tipografías que utilices son uno de los elementos fundamentales que le van a dar la personalidad a tu web.

Por eso es importante que elijas bien las tipografías de tu web para que transmitan lo que tú quieres pero siempre teniendo en cuenta:

La legibilidad es lo más importante

Tienes que tener en cuenta que la función principal de las tipografías no es decorar. Los textos de tu web están ahí para que sean leídos y comprendidos. Y tu objetivo en todo momento tiene que ser facilitar la lectura a tu visitante.

Así que mi consejo es que elijas una tipografía que sea clara, limpia, que destaque del fondo y que se vea bien en diferentes tamaños.

En ningún momento deberías anteponer la estética a la usabilidad.

Tamaño de los textos

En cuanto a los tamaños de las tipografías que deberías utilizar en tu web. Un estándar bastante aceptado hoy en día por todos los diseñadores web serían H1 a 36px. H2 a 30px. H3 a 24px. H4 a 18px. P (párrafos de texto) a 16px.

No obstante, tienes que saber que cada tipografía puede variar de tamaño. Puede que no se vea del mismo tamaño una tipografía que otra aunque tengan el mismo número de píxeles.

Por lo tanto, tendrás que variar un poco estos tamaños estándar. Pero para empezar, son un buen punto de partida.

Presta atención también al interlineado (el espacio que hay entre línea y línea de texto) Abre el espacio entre líneas si tienes esa posibilidad. ¡Verás cómo, de repente, respira!

También debes comprobar cómo se ven esos textos en los dispositivos móviles.

Añade contraste con diferentes tipos de fuente o por tamaño

Es la diferenciación entre las distintas tipografías que tienes en tu web. Hay dos formas de crear ese contraste entre tipografías. Uno sería cambiando los tipos de fuente o por tamaño.

Pero es importante que se distingan bien los encabezados de lo que es el texto corrido de tus párrafos para que el usuario pueda escanear fácilmente los contenidos de tus publicaciones.

No hay nada peor que un “tocho” de texto interminable donde no haya negritas, cursivas, ni encabezados, ni listas enumeradas, etc. Al usuario le va a dar mucha pereza y se va a ir en la tercera línea.

Crea párrafos, deja espacio ente ellos. Son auténticos bloques visuales que ayudan a leer y a evitar ese efecto confuso. Ordenan el espacio y leemos más a gusto.

Lo olvidamos, pero en un post es perfectamente posible organizar los contenidos como pequeños capítulos. Utiliza subtítulos. Si son en negrita, mejor. Y no olvides usar listas y subrayados, todo ayuda.

En cuanto a la alineación, aunque reconozco que el justificado a ambos lados queda muy bonito y ordenado, puede dar problemas y encontrarnos con líneas de tres palabras y con las letras muy separadas entre ellas. Así que el texto alineado a la izquierda es la elección segura.

En mi blog tengo varias entradas sobre tipografías donde podrás escoger y descargar la que más te guste.

Te recomiendo, como no puede ser de otra forma, que eches un vistazo a mi Guía “Diseña con Letras Bonitas” donde podrás aprender a diseñar lo que quieras con las tipografías más bonitas que jamás hayas visto.

DESCARGA LAS PRIMERAS PÁGINAS DE LA GUÍA

La importancia de las imágenes

Las imágenes que vayas a utilizar en tu página web van a marcar la diferencia entre tener una web espectacular o una birria de página.

Te recomiendo que emplees tiempo en buscar buenas imágenes para tu web. Existen cientos de páginas con fotos alucinantes y gratis:

Pexels
Gratisography
New Old Stock
Kamboopics
Startup Stock Photos
Picjumbo 
Stock Snap
Pixabay
Skuawk

Aunque si quieres y puedes permitírtelo, puedes comprar imágenes profesionales de buena calidad en bancos de imágenes o incluso contrates a un profesional que haga las fotos.

Para mostrarte un ejemplo de la importancia de las imágenes, te voy a poner un par de fotos de platos de comida para que me digas cuál te parece más apetecible. ¿Cuál te comerías?

Pues imagínate que esta foto fea la pones en la web de un restaurante. No hace falta que te diga que va a espantar a los posibles clientes del restaurante.

Ten mucho cuidado con las fotos que pones en tu web para que causen un efecto espectacular e inviten a quedarse y a probar tus productos.

Consideraciones sobre las imágenes

Que tengan una buena resolución

Si las imágenes son demasiado pequeñas o están demasiado comprimidas, al final se van a pixelar o van a perder nitidez y la foto va a quedar fea.

Asegúrate de que la resolución de tus fotos sea lo suficientemente elevada.

Optimiza tamaño y peso

No puedes subir las fotos recién sacadas de una Cámara Réflex porque pesan muchísimo.

Tienes que optimizar su tamaño y peso en programas como Photoshop o similares. O utilizar algún plugin que las comprima para que la página no vaya lenta.

Deberías ajustar el tamaño de tus imágenes a lo que realmente necesitas en tu web. De nada te sirve subir fotos de grandes tamaños si la estructura de tu blog solo puede mostrar como máximo otros tamaños inferiores. En cuanto a la resolución de tus fotos ten en cuenta que tu web podrá mostrar como máximo fotos de hasta 72 ppp (píxeles por pulgada)

El rendimiento y la usabilidad son más importantes que la creatividad

Estos dos conceptos tienen que ir siempre por delante de la creatividad. Una web muy bonita pero lenta, no sirve para nada

Una web puede ser muy bonita y tener mil animaciones, efectos, sliders…pero si todos esos efectos van a ocasionar que tu web vaya más lenta, no te van a servir para nada. Lo que están consiguiendo es que muchos usuarios no lleguen a ver cargar tu web. Si tu web tarda más de 2 segundos en cargar, ya estás perdiendo usuarios. Los sliders es una de las cosas que más repercuten sobre los tiempos de carga.

¿Para qué te sirven esas herramientas? Lo que realmente tienes que transmitir con tu página web es profesionalidad, conseguir que tus usuarios se sientan cómodos en ella y que pasen cuanto más tiempo mejor para que se conviertan en tus clientes, en tus suscriptores o para que te compren un producto.

Una web sorprendente pero imposible de navegar, será un fracaso

Tu objetivo principal no es únicamente dejarles con la boca abierta de lo bonita que es tu web sino que sea una web navegable, fácil de utilizar y que cumpla con el propósito con el que se creó.

Cíñete a lo que ya está comprobado que funciona porque las personas estamos acostumbradas a navegar por la web de una determinada manera. Que cada cosa esté en su sitio, no hagas pensar demasiado a tu usuario.

Ejercicios a realizar:

1. Estructura tu web: coge un papel y un lápiz y dibuja de forma sencilla las ubicaciones de los diferentes elementos dentro de tu web o blog.
2. Haz un boceto de tu logotipo: piensa bien el texto, el eslogan (si va a llegar eslogan) y los colores.
3. Piensa en los colores de tu web: recuerda que cuantos menos colores mejor. Piensa en 2 ó 3 como máximo.
4. Selecciona unas cuantas imágenes bonitas para tu blog: también puedes optimizar las fotos que has hecho con tu cámara.

¿Y ahora qué?

Ahora me gustaría pedirte un par de favores:

• Comparte este post con tus amigos y conocidos para todo el mundo pueda aprender y me ayudes a conseguir visibilidad.
• Escribe un comentario en la parte inferior de este post contándome qué te ha parecido este mini curso y qué punto te resulta más complicado de llevar a cabo.

Mil gracias ¡Un fuerte abrazo!