{"id":6159,"date":"2023-10-17T16:43:35","date_gmt":"2023-10-17T14:43:35","guid":{"rendered":"https:\/\/bluekea.com\/blog\/?p=6159"},"modified":"2023-10-17T16:45:15","modified_gmt":"2023-10-17T14:45:15","slug":"mejora-el-diseno-de-tu-web-de-fotografia-en-6-pasos","status":"publish","type":"post","link":"https:\/\/bluekea.com\/blog\/consejos-para-tu-web\/mejora-el-diseno-de-tu-web-de-fotografia-en-6-pasos","title":{"rendered":"Mejora el dise\u00f1o de tu web de fotograf\u00eda en 6 pasos"},"content":{"rendered":"\n

Vamos a ver algunos aspectos esenciales en el dise\u00f1o web como el color, la tipograf\u00eda, los textos o la disposici\u00f3n de los elementos, que te ayudar\u00e1n a conseguir una presentaci\u00f3n m\u00e1s actual y profesional.<\/p>\n\n\n\n

1. La portada<\/h2>\n\n\n\n

La portada es el escaparate de tu web y con frecuencia determina si un visitante se queda o se va.<\/p>\n\n\n\n

Es importante que se transmita claramente y de un vistazo qu\u00e9 es lo que ofreces<\/strong>. Para ello puedes usar una portada con slogan, o una m\u00e1s simple si tu logo ya contiene esa informaci\u00f3n.<\/p>\n\n\n\n

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

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

Las im\u00e1genes son esenciales<\/strong>; deben ser una muestra de tu mejor trabajo y tener buena calidad y nitidez.<\/p>\n\n\n\n

Si incluyes texto o titulares, comprueba que se ve correctamente en pantallas m\u00f3viles<\/strong>. Es posible que tengas que ajustar la longitud del texto.<\/p>\n\n\n\n

Si usas fotos de fondo, debe haber un contraste adecuado<\/strong> entre el texto y las im\u00e1genes; si tu texto es blanco, las im\u00e1genes no deben ser demasiado claras. Tambi\u00e9n puedes ajustar la opacidad del fondo para mejorar el contraste.<\/p>\n\n\n\n

2. El equilibrio visual<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

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

Debemos evitar en lo posible las p\u00e1ginas con varios elementos en las que quedan filas no completas o espacios vac\u00edos. En las webs de Bluekea<\/a>, tanto los m\u00f3dulos como las galer\u00edas tienen opciones de tama\u00f1o que podemos usar para conseguirlo. Por ejemplo, en una galer\u00eda con 12 fotos escogeremos un tama\u00f1o de miniatura que resulte en 4 filas de 3 fotos, o 3 filas de 4. Cuando el n\u00famero de elementos no permita crear filas completas, intentaremos acercarnos lo m\u00e1s posible.<\/p>\n\n\n\n

En los contenidos de varias columnas que combinan texto e imagen, intentaremos que los textos y t\u00edtulos tengan un tama\u00f1o similar en todos los elementos.<\/p>\n\n\n\n

Por otro lado, es importante evitar textos demasiado peque\u00f1os o demasiado grandes. Para diferenciar los titulares entre s\u00ed y con el texto normal podemos jugar con los espaciados y el formato (negrita). Tienes un ejemplo en este mismo texto que est\u00e1s leyendo.<\/p>\n\n\n\n

3. El color<\/h2>\n\n\n\n

Es importante evitar colores demasiado fuertes o saturados, especialmente en los fondos. Si te gustan los fondos claros, el blanco es un acierto seguro, pero hay otros que funcionan tambi\u00e9n muy bien, como los marr\u00f3n\/beige o los azules, siempre en tonos pastel claros. Tambi\u00e9n puedes usar un gris claro con tono neutro, c\u00e1lido o fr\u00edo.<\/p>\n\n\n\n

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

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

Como fondo oscuro, el negro puro puede ser demasiado fuerte, puedes usar en su lugar un gris muy oscuro o tonos de azul y verde oscuro y poco saturado.<\/p>\n\n\n\n

Recuerda que el texto debe siempre verse bien contra el fondo. Evita textos de colores demasiado sutiles con poco contraste.<\/p>\n\n\n\n

4. La tipograf\u00eda<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

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

La fuente o tipograf\u00eda es uno de los elementos m\u00e1s importantes en el dise\u00f1o de tu web, y al que raramente se le presta la atenci\u00f3n que merece.<\/p>\n\n\n\n

La tipograf\u00eda de los titulares debe ser un reflejo<\/strong> de tu trabajo y de lo que ofreces en la web. Si haces fotograf\u00eda de boda puedes usar una fuente m\u00e1s elegante; si son fotos de ni\u00f1os o familia puede ser m\u00e1s desenfadada.<\/p>\n\n\n\n

En general recomendamos usar dos tipograf\u00edas<\/strong> diferenciadas: una para los titulares y otra para el texto general. Suelen funcionar bien los pares de tipo serif<\/em> (con trazos en los extremos de las letras) y sans-serif<\/em> (sin ellos). Un ejemplo es este art\u00edculo que est\u00e1s leyendo donde el titular es serif y este texto es sans-serif.<\/p>\n\n\n\n

La tipograf\u00eda debe ser consistente<\/strong> en toda la web para facilitar la navegaci\u00f3n.<\/p>\n\n\n\n

5. Los textos: espacio, contraste y tama\u00f1o<\/h2>\n\n\n\n

En este mismo art\u00edculo puedes ver c\u00f3mo se aplican de forma pr\u00e1ctica todos estos consejos: vemos un t\u00edtulo principal seguido de tres secciones con t\u00edtulos destacados. Los t\u00edtulos, p\u00e1rrafos y separaciones organizan visualmente los contenidos y facilitan su lectura.<\/p>\n\n\n\n

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

Nuestros textos deben tener una estructura y una jerarqu\u00eda adecuadas. Debemos evitar grandes bloques de texto uniforme; en general nuestro visitante va a buscar una informaci\u00f3n concreta (un precio, un servicio) y se lo tenemos que poner f\u00e1cil.<\/p>\n\n\n\n

Es aconsejable dividir el contenido en p\u00e1rrafos, y evitar textos redundantes o complicados. El espaciado debe ser coherente con la jerarqu\u00eda del contenido; por ejemplo, el espacio entre un bloque y su t\u00edtulo debe ser algo menor que el de un bloque con el t\u00edtulo del siguiente.<\/p>\n\n\n\n

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

Es importante que tus textos se lean sin esfuerzo, y para ello es necesario que el color del texto y el color de fondo est\u00e9n bien diferenciados. Hay que evitar colores demasiado sutiles.Adem\u00e1s de facilitar la lectura del contenido y mejorar la experiencia del visitante, tambi\u00e9n evitaremos penalizaciones en los resultados de buscadores, que tienen tambi\u00e9n en cuenta el contraste del texto con el fondo.<\/p>\n\n\n\n

Tama\u00f1o<\/h3>\n\n\n\n

Si bien evitaremos grandes cambios de tama\u00f1o dentro del texto, es recomendable que el tama\u00f1o de los titulares respecto al texto sea acorde a la importancia del t\u00edtulo. Es decir, el t\u00edtulo de una p\u00e1gina debe ser mayor que el de una secci\u00f3n dentro de esa p\u00e1gina.<\/p>\n\n\n\n

6. El logo<\/h2>\n\n\n\n

Si subes tu propia imagen de logo a la web, es importante que no tenga espacio vac\u00edo alrededor; el borde de la imagen no debe ir m\u00e1s all\u00e1 del borde del trazo del logo. Esto permite aprovechar al m\u00e1ximo el espacio en la web, ya que los m\u00e1rgenes ocupan espacio reduciendo el tama\u00f1o efectivo del logotipo.<\/p>\n\n\n\n

Si puedes escoger entre varios formatos de logo o puedes crear uno para la web, ten en cuenta:<\/p>\n\n\n\n