- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Copyright © Jorge Cobos. Todos los derechos reservados. No se permite la reproducción total o parcial de este libro, ni su incorporación a un sistema informático, ni su transmisión en cualquier forma o por cualquier medio, sea éste electrónico, mecánico, por fotocopia, por grabación u otros métodos, sin el permiso previo y por escrito del autor. Todas las marcas y marcas registradas que aparecen en este documento son propiedad de sus respectivos dueños.
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Tabla de Contenidos 1. Identidad Visual 2. Estructura y composición 3. Tipografías 4. Colores 5. Fotos
“Aprenderás a diseñar una web deslumbrante que te ayude a captar y retener clientes en tu web”
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
1. Identidad Visual
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Identidad Visual ¿Qué es la Identidad Visual? La identidad visual de marca es el conjunto de elementos gráficos que ponen cara a tu negocio y te representan frente en el mercado. Una Identidad Visual de Marca estará compuesta por: tu logotipo, tus colores y tipografías, tus texturas y fondos, tus iconos…y el resto de elementos visuales que mostrarás en tu web y fuera de ella. Coherencia Visual: Es un punto fundamental a tener en cuenta en el diseño de una identidad corporativa puesto que aunque el cliente valorará la empresa en función de sus servicios o productos, la imagen que reciba de ella será fundamental en la experiencia que tenga. El estilo: Debe estar presente en todas las representaciones de la marca; En la forma en que se exprese, como hable, como se anuncie... El estilo no es sólo imagen, es todo lo que la rodea. La elección de determinados tipos de letras o colores marcará un antes y un después en la percepción que tenga la audiencia de tu negocio. Reuniendo los elementos gráficos adecuados impulsarás el crecimiento de tu empresa. Evita seguir modas o diseñar como lo está haciendo en este momento la mayoría. No se trata de eso, se trata de diseñar una imagen que encaje plenamente con tu proyecto o empresa para que sea fuerte y única.
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
“Una buena identidad visual puede marcar la diferencia entre tu marca y la competencia”
Identidad Visual Logotipo: El logo de una marca es el primer punto de contacto del público con el producto o servicio que se pretende vender. Por lo que el logotipo debe identificar rápidamente al servicio, producto o empresa. Puedes poner el nombre de tu dominio en el logotipo o las iniciales e incluso le puedes añadir algún iconotipo. Hay una serie de claves o secretos que has de tener en cuenta si quieres lograr que tu logotipo haga crecer a tu empresa: - Debe ser distintivo y reconocible entre la competencia. - Debe identificar rápidamente la personalidad de tu negocio. - Debe tener un aspecto profesional del que sientas orgullo. - Debe ser duradero en el tiempo para que sea fácil de recordar. - Debe ser claro al presentarse en cualquier soporte. - Debe poder aplicarse sobre todos los formatos y adaptarse a todos los tamaños. Te recomiendo diseñarlo primero en blanco y negro y después insertar los colores corporativos.
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Identidad Visual Coherencia en todos los elementos de la Identidad Visual: de nada te servirá tener un logotipo deslumbrante si no guardas coherencia en todos los elementos que componen tu marca como son: web, newsletter, banners, anuncios en prensa o medios digitales, portadas y publicaciones en redes sociales, ebooks de descarga, tarjetas de visita, contratos, dossieres…. Si prestas atención a la coherencia en todos los elementos, tu marca será vista como profesional e identificada y recordada por encima de otras que haya en el mercado.
Moodboard: te recomiendo que crees tu propio tablero de inspiración. Crear un moodboard transformará tus pensamientos o sentimientos en lo que te gustaría que lo demás viesen o sintiesen sobre tu proyecto. Tómate tiempo para ir recopilando imágenes, recortes de revistas, colores, tipografías, e incluso otros logotipos que llamen tu atención… componentes que sean tangibles o intangibles que identifiques con lo que quieres que represente tu marca. Este moodboard te será muy útil a ti o a tu diseñador para darle forma a tu marca.
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Identidad Visual Checklist de Elementos Visuales Indispensables para tu Marca: podrás verificar en qué nivel está tu marca y qué te falta implementar. Cuantos más elementos tengas, más coherente y fuerte será la imagen visual de tu marca. Descárgalo aquí
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
2. Estructura y composiciรณn
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Estructura y composición Mockup de tu Web: Diseñar es crear un balance entre la estética y la funcionalidad. Debes hacer un esquema sencillo o mockup de cómo irán distribuidos todos los elementos de cada página.
Storytelling visual: los textos se preparan antes del diseño. El diseño se utiliza para mejorar la apariencia de los textos, no al contrario. Reparte con inteligencia los CTA o llamadas a la acción a través de botones destacados.
Una buena estructura web sería: Logotipo a la izquierda o centrado, el menú principal centrado o a la derecha. Debajo una imagen impactante que ocupe todo el ancho de la página y que tenga una llamada a la acción. Debajo tus servicios y algunos testimonios de clientes contentos, después la sección de sobre mí, debajo los post más relevantes y finalmente otra llamada a la acción antes del footer.
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Estructura y composición Consistencia: Probablemente el más importante de los aspectos del diseño de páginas web. La consistencia se refiere a que todas las páginas tengan una estructura general común. Y esto afecta, tanto a la facilidad de la navegación, como a los colores, fuentes, estilos y registros. Dice mucho de la imagen de una compañía.
Facilidad de navegación: la navegación y la experiencia de usuario son claves. La estructura de los menús y la categorización del contenido deben garantizar que los pasos hacia la conversión sean pocos y sencillos. Idealmente, este proceso nunca debe ser superior a tres pasos. Y cuanto más claro sea, mejor.
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Estructura y composición Usabilidad: menos es más. En diseño web, es importantísimo que el usuario encuentre rápido y fácil lo que están buscando en el menor número de pasos posible. Te recomiendo que una vez hayas acabado el diseño, le digas a varios de tus conocidos que naveguen por la web y te vayan comentando sus pensamientos. Así podrás detectar fallos en el diseño y cosas que dabas por hecho y que han pasado desapercibidas.
Diseño responsive: tu web debe adaptarse a todos los dispositivos y navegadores. Por 2 motivos, primero porque Google penaliza a las web que no están adaptadas y segundo porque estarías dificultando la navegación a más del 50% de las visitas que van a llegar a tu web. La navegación debe ser intuitiva con titulares y llamadas a la acción (CTA) atractivas y reconocibles, que el visitante sepa en todo momento dónde tiene que ir.
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Estructura y composición La importancia de diseñar bien la home: el diseño de la página de inicio es fundamental porque determinará el estilo visual del resto de páginas que componen tu sitio web. Además, seguramente será la primera página que verán tus visitantes por lo que tienes que llamar su atención con un diseño de interfaz deslumbrante para que decidan quedarse. Que sea atractiva pero también limpia y ordenada.
Jerarquía visual: Cuando un usuario aterriza en un sitio web lo hace buscando algo concreto y que lo encuentre dependerá de la presentación visual de la página. Es recomendable que no haya demasiado texto, el tiempo es algo valioso. La información llega de forma mucho más clara cuando es concisa, está bien organizada y tiene apoyo visual. La adaptación a los patrones culturales de lectura (en nuestro contexto, de izquierda a derecha y de arriba a abajo) además facilitará que llegue de forma directa. La estructura de texto en F o en Z son, en este sentido, las que mejor funcionan. Alternativamente, la parrilla permite una organización sencilla del contenido para que el desplazamiento sea únicamente vertical.
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Estructura y composición Espacios en blanco: Una web con amplitud, que respira y cuyos elementos no están apelotonados da una mejor impresión. Por lo tanto, no tengas miedo a los espacios en blanco y no trates de rellenar de contenido hasta la última esquina de tu web, ya que de lo contrario el resultado será caótico y agobiará a tus visitantes.
No recargar con demasiados elementos: Hace algún tiempo vi un capítulo de los Simpsons donde Homer creaba su propia página web. La hizo a su estilo con todo tipo de elementos y animaciones pero nadie visitaba su web. Lisa le explicó que necesitaba un motivo para que la gente visitara su página, fue así como Homer decide contar chismes de la ciudad y aunque al final tiene que terminar con todo nos da una luz de cómo no debe ser un diseño web. El diseño de un sitio debe cumplir con ciertos requisitos visuales y ciertas normas para facilitar su impacto y comprensión.
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Estructura y composición Menú principal: sencillo, con pocos elementos, ubicado siempre en la cabecera, reconocible y legible, sin muchos subapartados, con tipografías limpias, pueden ser en mayúsculas.
Diseño y maquetación acorde a las tendencias actuales: pero sin pisarte los pies para que no tengas que cambiar el diseño web cada año. Trabaja tu footer: No olvides que ell pié de página se ha convertido en un menú más, con enlaces a las principales secciones. Es un lugar ideal para colocar los enlaces de aviso legal y política de privacidad así como los diferentes iconos a tus redes sociales. Titulares llamativos: los titulares de tu web deben destacar frente al resto de texto. Para ello se utilizan los iconos, la tipografía, el tamaño, el color y su ubicación.
Animaciones: es cierto que las animaciones de elementos como fotos o textos son llamativas y le dan movimiento y fluidez a la web. Pero no abuses de ellas y utilízalas sólo si es necesario. Y por supuesto, jamás utilices gifs animados porque es de época prehistórica. Analiza la estructura y la maquetación de otras páginas web: en diseño web no hay nada preestablecido por lo que no existe una web perfecta que lo tenga todo bien diseñado. Pero sí que puedes ayudarte de otras webs para inspirarte y usar lo que te interese.
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Estructura y composición La plantilla: Es cierto que existen cientos de plantillas de pago con un diseño funcional y de aspecto profesional y que si tienes ligeros conocimientos de código html podrás modificar tú mismo pero seguirá siendo igual al resto de emprendedores que hayan comprado la misma plantilla. Por eso te recomiendo que hagas tu diseño desde cero. Para ello yo utilizo la plantilla premium GeneratePress porque es una plantilla versátil, carga rápido y sobre todo partes de un diseño limpio y en blanco que te permitirá ir maquetando el diseño.
Diseño y maquetación acorde a las tendencias actuales: pero sin pisarte los pies para que no tengas que cambiar el diseño web cada año. Trabaja tu footer: No olvides que el pié de página se ha convertido en un menú más, con enlaces a las principales secciones. Es un lugar ideal para colocar los enlaces de aviso legal y política de privacidad así como los diferentes iconos a tus redes sociales. Titulares llamativos: los titulares de tu web deben destacar frente al resto de texto. Para ello se utilizan los iconos, la tipografía, el tamaño, el color y su ubicación.
Después, utilizo el maquetador visual Thrive Architect para ayudarme a diseñar con rapidez, simplemente arrastrando y soltando elementos.
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
3. TipografĂas
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Tipografías La correcta elección de las tipografías es vital en una web. No es lo mismo una tipografía escogida para ser leída en papel que para ser vista en una web. Algunos aspectos que debes tener en cuenta son:
No más de 3 tipografías: trata de no utilizar más de 2 o 3 tipografías diferentes en tu web. Generalmente se utilizan las tipografías que has utilizado en el logotipo y en tu marca. Pero no es obligatorio.
Legibilidad: Las tipografías son un elemento que obviamente influye en la estética de tu página web y según el tamaño y forma de la tipografía se pueden hacer excelentes composiciones visuales.
Tamaños: trata de seguir siempre una jerarquía en los tamaños. El H1 o titular debe ir en grande, los H2 más pequeños y los H3 más pequeños aún.
Pero no debes olvidar que su labor principal no es decorar sino que está ahí para ser leidos y compendidos con facilidad. Por eso debes escoger una tipografía clara, limpia y que se lea bien en diferentes tamaños y sobre diferentes fondos. Premia siempre la legibilidad antes que la estética de la tipografía.
Para que te hagas una idea, en las páginas web que diseño para mis clientes suelo utilizar estos tamaños: - Título H1: 36px - Subtítulo H2: 30px - Subtítulo H3: 24px - Subtítulo H4: 18px - Párrafos: 16px - Anchura de las líneas máximo: 800px - Espaciados entre secciones de: 90px Pero dependiendo de la tipografía que utilices, no tendrá el mismo tamaño aunque tengan el mismo número de pixeles. Y acuérdate también de revisar los tamaños de letra de tu web en la versión móvil.
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Tipografías Interlineado o alto de línea: muchas veces se pasa por alto pero es vital para facilitar la correcta lectura de los textos. Por norma general una separación adecuada suele ser la resultante de multiplicar el tamaño de tu tipografía por 1,5. Es decir, si estás utilizando la tipografía a 16px una buena separación de líneas estaría en torno a los 24px (16px x 1,5). Justificación de textos: te recomiendo que utilices párrafos cortos y que por lo general no lo justifiques porque podrían generarse espacios grandes antiestéticos.
Cuidado con los plugins: ten cuidado porque algunos plugins pueden mostrar sus propias tipografías sin hacer caso a tus tipografías corporativas de la web. Debes cambiarlas si el plugin te lo permite y así conseguirás que tu web tenga como mucho 2 ó 3 tipografías distintas. Algunos plugin que suelen mostrar sus propias tipografías son: formularios de contacto y suscripción, shortcodes de botones, pop-ups, barras de cookies, etc. Texto sobre imágenes: mucho cuidado a la hora de aplicar un texto sobre una imagen porque según como lo hagas el texto no se leerá correctamente. Un truco es utilizar recuadros con transparencia o aplicar una transparencia o degradado a la propia foto.
Pero en ocasiones podría ser necesario justificar bloques de texto para que tengan una apariencia de bloque y quede bien simétrico. Anchura de las líneas: no puedes tener líneas de texto interminables porque cansan la vista y el cuello de tu lector. Debes dar saltos de línea o insertar columnas con bloques de texto dentro. Tus líneas de texto no debería superar los 800px de ancho.
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Tipografías Fondos: evita poner texto blanco sobre fondo negro porque es una tortura para los ojos. Por surte es una moda que pasó hace tiempo. Contraste: evita el uso de párrafos extensos que aburran y cansen al lector. Para evitarlo debes poner negritas, cursivas, encabezados de mayor tamaño, listas enumeradas, saltos de línea, utilizando dos tipografías distinta, etc. Piensa que el lector escanea los textos y debes facilitarle la labor.
Frases destacadas: te recomiendo el uso de frases destacadas de vez en cuando. Estas frases pueden ir en un tamaño mayor y con un color o imagen de fondo e ir a todo ancho de pantalla. No utilices mayúsculas: porque significa que estás gritando. Yo suelo utilizarlas en ocasiones para resaltar los botones, las llamadas a la acción y en algunos títulos. Pero asegúrate de que sean lo suficientemente legibles. Dónde encontrar tipografías: Aunque en Internet hay muchísimos sitios dónde descargar o comprar fuentes mi consejo es que escojas tipografías de Google Fonts porque son gratuitas, tienes más de 700 distintas, se cargan en todos los navegadores y están bien ordenadas por tipo para poder seleccionarlas. - Dafont - The Hungry jpg - Font Bundles - Myfonts - Font Squirrel - Font Space Y si ves alguna tipografía que te guste y quieres saber cuál es, te recomiendo que te instales la extensión de Google Chrome: What font
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Tipografías Cómo combinar tipografías: en este apartado es dónde se nota quién tiene gusto y quién no. Por lo general, te recomiendo que evites el uso de tipografías tipo display y las tipo handwriting (que son las tipografías hechas a mano) porque no funcionan bien en web. Estos serían mis 6 mejores consejos o trucos a la hora de combinar tipografías:
2. No debes combinar dos fuentes muy similares. Te voy a poner un simil con el color ¿verdad que no vamos a combinar dos colores oscuros muy similares? Para eso, nos quedamos con uno solo que hace la misma función. Pues con las fuentes ocurre lo mismo.
1. Combinar una fuente serif con una fuente sin serif y viceversa. Este puede ser el caso cuando encuentras una fuente perfecta y llega el momento en que debes combinarla con otras fuentes y no sabes cómo. Un muy buen recurso es combinar una fuente sin serif con una fuente con serif y viceversa.
3. Utilizar dos fuentes totalmente distintas. Otra opción muy valida es el contraste. Los polos opuestos se atraen, y en este caso, las fuentes también. Utilizar dos fuentes totalmente distintas aportará fuerza y valor a ambas y al contenido.
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Tipografías 4. Utilizar fuentes grandes. Y algo similar sucede con los grosores. Si te has fijado, las fuentes tienen más de un grosor. Normalmente está el regular y el bold. Pero las más elaboradas pueden tener muchos más. Es por eso que, a veces, es mejor escoger una fuente con una familia muy grande, ya que dispondremos de un abanico más amplio de posibilidades.
6. Escoger fuentes neutras y huir de la extravagancia. Hay miles de fuentes, unas mejores y otras peores, unas de grandes tipógrafos y otras más humildes pero bien hechas. Pero también hay otras que no hay por donde cogerlas. Si te parecen divertidas o que aportan otro toque a tu imagen, intenta buscar una fuente más neutra y a darle color o ponerla en otro contexto. El resultado le dará mil vueltas.
5. Utilizar únicamente dos fuentes. Otro requisito es usar solamente dos fuentes. Crearás una unión y un conjunto mucho más grande. Pero si es estrictamente necesario puedes utilizar una tercera. Eso sí, recuerda los puntos anteriores para ello.
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Tipografías Ejemplos de buenas de tipografías para web: Voy a recomendarte tipografías para determinadas partes de tu web, con ellas podrás escoger la tipografía adecuada. Tipografía para títulos, enlaces o párrafos cortos: Vollkorn Lustria Merriweather Libre Baskerville EB Garamond Sans Serif (Sin serifa).
Tendencias de las tipografías en el diseño web actual: Gigantismo: La época de las tipografías de 12 puntos y textos imposibles de leer salvo que estuvieses operado de la vista han acabado. Titulares gigantes encima de las fotos, siendo los auténticos protagonistas. Animaciones: hay que llamar la atención de los usuarios y para ello se pueden animar fondos, formas, imágenes y cómo no…las tipografías. Es casi un must si quieres estar a la altura de las expectativas. Ejemplo 1 / Ejemplo 2
Para la navegación y el cuerpo gracias a su legibilidad Open Sans PT Sans Roboto Ubuntu Lato Arimo
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
4. Colores
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Colores La psicología del color: Cada color provoca en las personas unas sensaciones y sentimientos determinados y está asociado a distintas emociones, por lo que éste influye de manera determinante en cómo se sienten y comportan los usuarios en tu web.
Color predominante: generalmente funciona muy bien que utilices los colores que has utilizado en tu logotipo y suelen ser 1 ó 2 colores como máximo. Pero también puedes utilizar otros colores siempre y cuando combinen correctamente. Estos colores se utilizan en titulares, textos en párrafos, enlaces visitados, etc
No vale con elegir tu color favorito, básate en lo que transmite cada uno de ellos porque todos evocan cosas muy diferentes y puede que tu color favorito no encaje con la identidad de tu marca.
Color para las llamadas a la acción: se trata de un color llamativo que solamente utilizarás en los botones, llamadas a la acción, banners, categorías destacadas, formularios de contacto, tablas de precios, etc.
¡Porque atención! Si ya tienes un logotipo corporativo deberías ceñirte a sus colores para mantener la identidad visual de tu marca.
Si llenas todo de colorines el usuario no sabrá en que fijarse. Si solo utilizas un color que resalte del resto su vista se irá ahí irremediablemente como puedes ver en el ejemplo de la escala de precios ¿A dónde se te va el ojo?
Y si por lo que fuera, tu logotipo no transmitiera tus valores o los de tu empresa, habría que rediseñarlo y adaptarlo. Estudia un poco la psicología del color y elige el tuyo. Dentro de cada gama hay miles de tonalidades, puedes elegir 2 o 3 colores de una gama, o colores complementarios.
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Colores Color del fondo: suelen ser colores muy claros o blanco. No utilices fondos oscuros y negros. Te recomendaría que no lo hicieses nunca pero puede darse el caso de que sea necesario. Atrás quedaron los tiempos en los que las web tenían fondo negro y los textos en blanco.
Cómo combinar correctamente los colores: - Cuanto más brillantes sean los colores más llamativos serán, pero más cansarán la vista del usuario y más trabajo le costará mantener la atención. Una buena opción es utilizar una misma gama cromática con distintos niveles de saturación y luminosidad.
Y cuando digo negro, también me refiero a colores fosforitos que dañan la retina humana y sea necesario el uso de gafas de sol para no quedarte ciego. Por lo general la gente prefiere fondos muy claros casi blancos. Lo mejor sería un fondo blanco porque no hace daño al ojo y te permite resaltar mejor tus textos con el color predominante y botones con el color para las llamadas a la acción.
- Los colores web no se van a ver igual en todos los monitores porque cada uno lo tendrá calibrado de diferente forma. - Utiliza un color predominante para usar en una proporción de un 60%. Lo podrías utilizar en cabecera, fondo de secciones, las landing pages, etc. Otro secundario para usar un 30% más o menos (fondos de formularios, cajas de llamada a la acción, enlaces, etc.). Y un color llamativo potente, para el 10% restante que generalmente utilizarás para botones o elementos de alto valor estratégico. La razón para utilizar el color más llamativo en una proporción tan baja es para que este no pierda efectividad. - No experimentes con los colores y cíñete a los colores que haya hecho algún diseñador que tenga conocimientos. O también puedes ayudarte de herramientas gratuitas que hagan el trabajo por ti como son Adobe Color CC y Colour hunter.
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Colores Texturas: te aconsejo que utilices diferentes texturas o patrones para decorar el fondo de alguna sección. Es bastante habitual encontrarnos con fondos en diagonal que dejan entrever una imagen de fondo que hace scrolldown.
Ejemplos de colores que combinan bien y su asociación o significado: • Rojo: Para el color rojo va muy bien los tonos blancos, grises, azules, crema y negros. Un color complicado y peligroso de usar, ya que puede transmitir connotaciones negativas asociadas a peligro, provocando emociones fuertes. También se asocia con la pasión, la intensidad y el amor. • Amarillo: Para el amarillo es una buena elección optar por tonos rojo, verde o azul. Transmite positivismo, optimismo, alegría, inteligencia y sabiduría. Ideal para llamar la atención de los usuarios. Pero hay que tener cuidado de no usarlo en exceso ya que puede provocar cansancio a la vista. • Verde: arena, marrones y su propia tonalidad. Transmite tranquilidad, abundancia, calma, bienestar, salud, felicidad, vitalidad y progreso. Muy usado en llamadas a la acción. Ideal para negocio de finanzas, salud, bienestar y naturaleza. • Azul: grises, rojizos y gama de cremas. Transmite confianza, calma, seguridad y la serenidad. Ideal para temas de negocios.
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Colores • Rosa: azul marino, negro, blanco y el gris. Transmite diversión, emoción, energía, tranquilidad y amor. Es un color muy femenino. Ideal para productos o servicios para mujeres y jóvenes.
• Negro: El color universal, combina bien con casi todos los colores, menos con los oscuros. Transmite poder, lujo, sofisticación y glamour.
• Violeta: blanco, rosa, beige y negro. Transmite lealtad, bienestar, éxito, sabiduría, paz y calma. Ideal para productos y servicios de belleza. • Marrón: beige, canela, granate, arena. Transmite antipatía, pereza, necedad, común y lo anticuado. Aunque también es muy orgánico y natural. • Gris: negro, blanco, rojo, rosa, amarillo y azul oscuro Algunos lo relacionan con la indeterminación y otros con la paz, la tenacidad y la tranquilidad. • Blanco: El color blanco combina bien con casi todos los colores. No lo mezcles con tonalidades claras. Representa lo puro e inocente, así como la limpieza, la paz y la virtud. En culturas orientales y africanas es el color de la muerte, el alma pura que se va.
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Colores Tendencias del color en el diseño web actual: Colores planos y tonos suaves: Se busca que el visitante se sienta agusto y cómodo en nuestra web y se quiera quedar y quiera volver. Estos tonos transmiten tranquilidad y calma. Y además dan un aspecto muy profesional y elegante a las páginas web. Degradados suaves: Se utilizan degradados de 2 colores e incluso de 3 colores. Son degradados muy suaves e incluso muchos de ellos tienen imagen de fondo. Son detalles que dan profundidad a tu web y mucha personalidad.
Minimalismo: es una tendencia que nunca pasa de moda. No hace falta explicarla demasiado. Se trata de hacer uso de la máxima de que menos es más. Diseños muy blancos, limpios y elegantes que siempre funcionan. Alto contraste: se trata de utilizar apenas un par de colores en toda la web. Un color base que generalmente será neutro (negro, gris, beige) y otro color muy llamativo para destacar únicamente las llamadas a la acción. Una misma gama cromática: con distintos grados de saturación y luminosidad. Pero hay que saber hacerlo bien para que no quede amateur.
Imágenes a toda pantalla: está de moda que las web tengan fotos inmensas, que ocupan todo el ancho de la pantalla. Generalmente muy usado por los fotógrafos.
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
5. Fotos
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Fotos Seguro que alguna vez te ha pasado que compras una plantilla preciosa y después de insertar tus propias fotos, el resultado es una web fea.
Para optimizar el peso de tus fotografías puedes utilizar un programa de edición de imágenes como Photoshop o automatizar la tarea con un plugin como smush.it.
La frase “Una imagen vale más que mil palabras” cobra aún más importancia en diseño web.
Otro truco es probar a guardar la foto en diferentes formatos jpg, png o gif y quedarte con la que menos pese y mejor se vea. Generalmente suelen verse bien y pesar menos los jpg. Los gif los utilizo para imágenes recortadas o silueteadas y con fondos transparentes.
Me atrevería a decir que la correcta elección de las fotos es el aspecto más importante en diseño web. Unas buenas fotos atraen, seducen, invitan a seguir en la web y te da sensación de calidad y profesionalismo. Imágenes grandes pero poco pesadas: no cometas el error de poner fotos pequeñas o fotos estiradas y pixeladas o con marca de agua. Pero tampoco demasiado grandes porque pesarán mucho y también es fundamental para que la web cargue rápido y porque le gusta a Google (él es el jefe) Además, no ocuparás espacio innecesario en tu hosting.
Más fotografía y menos texto: Utiliza más fotografía y menos texto, nadie quiere quedarse una hora leyendo textos en una web, por muy interesantes que sean. Imágenes originales y de aspecto profesional: es fundamental que tus fotos tengan apariencia profesional y que sean acorde a tu marca y sector. Para ello puedes hacer las fotos por tu cuenta o mejor aún, contratar a un fotógrafo profesional. Y sólo como último recurso, podrías descargarlas de bancos de imágenes gratuitos o comprarlas en un banco de imágenes de pago. ¿Qué plato te resulta más apetitoso?
Por norma general, recomiendo que todas las fotos no tengan más de 800px de anchura y que no pesen más de 100Kb. A excepción de las fotos que irán insertadas en el fondo de las secciones o como cabecera a todo ancho de página que podrán ser más anchas. Pero aún así, toda foto que supere los 1200px de ancho será complicado conseguir que pese poco.
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Fotos Mejor fotos propias que de bancos de imágenes: Es mil veces mejor que utilices fotos propias y reales de tu oficina o almacenes que poner fotos de bancos de imágenes. Y es fundamental que hagas fotos de ti mismo o de tu equipo que poner fotos de stock para el apartado “sobre mi o sobre nosotros” ¡Esas fotos se huele a la legua que son falsas!
Una buena cabecera: por norma general suele quedar muy bien una imagen de cabecera que ocupe todo el ancho de la pantalla. Cada vez más, se está eliminando el uso de sliders en las cabeceras porque ralentizar la web y la hacen más pesada.
Estilo de las fotos: te recomiendo que utilices fotos limpias y sobrias que ayuden a centrar la atención del ojo en un solo punto. Trata de no utilizar fotos con muchos elementos porque agobian y distraen al ojo. Usabilidad con ayuda de las fotos: puedes ayudarte de las fotos para guiar el ojo de tu usuario. Puedes utilizar una foto con un dedo apuntando, o una mirada o un camino…
Uso de Videos: también puedes insertar videos en tu diseño porque aumentan el tiempo de permanencia en tu página y eso favorece a tu posicionamiento. Pero que sean de gran calidad y que aporten.
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
Servicio que puede ayudarte Todo lo que hemos visto puede resultarte en principio muy complicado de llevar a cabo por tu propia cuenta. No te voy a engañar, es un trabajo que requiere de mucho cuidado y tiempo. Pero no hace falta que lo hagas todo en un día, es mejor ir poco a poco y seguro que lo conseguirás. No obstante, si te bloqueas y necesitas la ayuda de un profesional, puedo ayudarte con mi servicio de Diseño de Página Web atractiva. Es un servicio de Diseño de Páginas Web atractivas, 100% autoadministrables y optimizadas para vender y posicionar arriba en Google. ¡Supera a tu competencia con una Web deslumbrante! Toda la info detallada la tienes aquí. Puedes escribirme a info@jorgecobos.com Muchas gracias. Un abrazo, Jorge Cobos
- Las 5 claves para crear una Web atractiva www.jorgecobos.com
- Las 5 claves para crear una Web atractiva www.jorgecobos.com