En este pequeño artículo voy a hablar un poco sobre la estética y el diseño, aplicado a las páginas web. Ha mas de uno le saldrá una sonrisa al leer ciertas partes de este artículo, por que verán algunos de los consejos que me han dado y he recibido a lo largo de los últimos años.
¿Donde y porque contratar a un diseñador?
Este artículo en si, esta orientado a webmasters que se están iniciando en el mundo del diseño web y quieran tener una cierta noción a la hora de comenzar un diseño.
Pero tal vez no estés interesado en aprender a diseñar, si no en tener alguna referencia para poder contratar a un diseñador que haga tu página web, así que es muy posible que a lo largo de todo este artículo, encuentres muchas referencias a tener en cuenta para saber si el diseñador que vas a contratar de verdad sabe lo que se hace, o no!
Si entras en su web, ves sus trabajos y lo que ves te gusta, pues ya es cuestión de hablar con ellos y llegar a un acuerdo. Recuerda que a la hora de que una web sea reálmente buena, no solo hay que tener en cuenta la estética, fíjate bien si sus webs son de diseño responsive, y si están bien optimizadas cara al SEO etc. etc. (mas abajo pongo enlaces a articulos relacionado para que sepas todas estas cosas)
Cuanto mas sepas de diseño y de SEO mejor! Así que también te propongo que leas este artículo interesante relacionado con el tema del cual hablo aquí.
Si no sabes lo que es el SEO o el diseño responsive te aconsejo que antes de contratar a nadie, te informes de lo que son, para luego hacer un especie de test a la empresa que pretendes contratar.
Busca diseñador en tu ciudad
Prácticamente en todas las ciudades hay buenas empresas de diseños web, pero antes de contratar nada, nunca esta demás entrar en sus páginas oficiales e investigar un poco para saber cuantos trabajos han realizado y de que clase de trabajos se tratan, si son bonitas, si cargan rápido, si están seo optimizadas etc.
Buscar en internet buenas empresas que se dediquen a crear paginas web es fácil, pero mi consejo es que siempre vallas a contratar a alguien, procures que sea de tu misma ciudad. Por ejemplo, si eres de Barcelona lo mejor seria que pusieras en el buscador de Google Diseño web en Barcelona y asi encontrar empresas especializadas como esta que os proponemos.
Esto mismo es aplicable a cualquier otra ciudad como Madrid, Valencia, etc. etc. etc.
¿Por que es importante un diseño atractivo o personal?
Esta claro que la imagen lo es todo (o casi todo) así que, si tenemos una web súper bien optimizada pero estéticamente tira para atrás, los visitantes de nuestras páginas, se marcharán!
Por lo tanto, el diseño de la página web es el encargado de hacer, que el visitante se sienta cómodo y decida seguir navegando e investigando dentro de nuestra página.
Claro esta que para los gustos esán los colores, y todos los diseños del mundo son criticables (sobre todo los mios) pero en este artículo, pondré un par de enlaces a ciertas webs para criticar o explicar mis argumentos. (mi intención quede clara no es criticar el trabajo de nadie, si no argumentar las palabras que digo) Así pues también pondré las url alabando el diseño de algún diseñador web que conozco.
¿Cuales son las cualidades de diseño a tener en cuenta?
Ha partir de aquí ya no hablamos de SEO ni de optimizaciones, si no simplemente de Diseño estético.
Ha la hora de diseñar y maquetar una página web, hay algunos factores que antes de ni siquiera empezar a maquetar, hay que tener en cuenta, por ejemplo:
- El esquema de colores que va a tener la web y sus combinaciones.
- Los diferentes tipos de fuentes que se van a usar, en textos, títulos, referencias etc.
- La legibilidad de los textos y sus contrastes.
- Las proporciones de absolutamente todo, imágenes, logos, tamaños de los textos, separaciones entre secciones etc.
- La estructura de la web, a nivel menús de navegación y enlaces internos.
- Seleccionar imágenes bonitas y preparar su situación y optimización de carga.
Los colores y sus conbinaciones
En general hay que huir de los colores chillones o agresivos y también de conbinaciones de colores que no pegan entre ellos. Cuando estas creando una web y la combinación de colores, letras, fuentes y etc. Si hay algo que te dice que NO, que no encaja, no me gusta! o tienes la sensación de que algo (y no sabes el que) no encaja, entonces tienes que parar, hasta que lo modifiques y acabes teniendo la sensación de «Ahora si esta bien». ( huir de los colores chillones no hay que hacerlo siempre, porque por ejemplo si tenemos una web para vender motos de motrocross, tal vez nos interese usar colores agresivos y chillones, ok? esto es solo un ejemplo)
Hacer una web con demasiados colores da la sensanción de sobrecargado y al ser tantos colores diferentes, luego dudamos mucho de si meter un color aquí o halla. Antes de empezar un proyecto, suele ser bueno tener en mente cuales son los colores adecuados para dicho proyecto, y seleccionar previamente una gama de 2 o 3 colores. Con esto te ahorraras muchos dolores de cabeza.
Las proporciones de los elementos
Ésta es una parte bastante difícil de definir en cada página interna de las web. Si quieres que tu web sea estéticamente bonita, cada imagen, cada texto, cada título, cada elemento de dicha página, tienen que tener unos margenes (Margins y paddings) adecuados.
La mayoría de nosotros, pecamos de no hacer el esfuerzo suficiente en este sentido y esto es precisamente una de las cosas que hace que una web, parezca mucho mas profesional. Cuidar mucho los margins y paddings de cada elemento que hay en cada página.
El tipo de fuente
El uso de muchos tipos de fuente en una sola pagina, es un error. Es mejor usar una sola fuente que sea fea, que no usar 7 tipos de fuentes diferentes (por muy bonitas que sean). Usar muchas fuentes diferentes en una web, hace que ésta parezca rara o desorganizada.
Se pueden usar varias, pero aconsejo simplificar. Por ejemplo usar 1 tipo para los textos normales, otro tipo para los títulos H1, H2, etc. y tal vez un tercer tipo de fuente para otros detalles como comentarios etc.
La legibilidad de los textos y sus contrastes
Asegurate de que todos los textos que vas a poner en tu web sean de fácil lectura, y que se vean corréctamente.
Si tenemos un texto de color negro, asegurate de que su fondo sea blanco para que el contraste sea el correcto y nos permita leerlo. y que el tamaño sea un tamaño mínimo adecuado para que no tengamos que ponernos las gafas a la hora de leerlo.
La estructura de los menus, botones, enlaces, etc.
Los menús de navegación dentro de una web, son súper importantes, tanto a nivel estético, a nivel SEO, y por supuesto a nivel de darle facilidades al visitantante a la hora de navegar por nuestras páginas.
Por lo tanto vamos a intentar hacer menús relativamente pequeños, que sea súper intuitivos, y que no sean excesivamente largos.
Haciendo y poniendo menús fáciles de entender, ayudas al usuario a navegar con fluidez por tu página, y hace que la experiencia sea mucho mas agradable.
Aprender mirando a los demas
Durante mucho años he diseñado mis páginas a mi bola, haciendo lo primero que se me pasaba por la cabeza y consiguiendo muchas veces resultados sorprendentes, pero siempre haciendo páginas muy personales. En el momento en el que empiezas a hacer páginas para empresas con imágenes corporativas, ahí ya hay que afinar mas, y aconsejo siempre mirar las páginas de las competencias, para coger las mejores ideas y aplicarlas a tus diseños. (O no aplicarlas si ves que no son adecuadas)
Youtube se ha convertido en un lugar donde muy buenos diseñadores web presentan sus trabajos y servícios, y es muy bueno seguir a dichos diseñadores para ver sus trabajos e ideas. Llevo años siguiendo a varios diseñadores web y viendoles trabajar para aprender a mejorar los detalles de mis diseños.
Podría poner muchas páginas web como ejemplo de lo que seria mejor o peor, pero para no extender el artículo sin necesidad, solamente os pondré 2 ejemplos.
Un muy buen ejemplo de diseño web
Francisco AMK para mi gusto, es uno de los mejores diseñadores que conozco y sigo por Youtube, tiene un canal en el cual da cursos de WordPress, presenta artículos, da consejos etc. etc.
La verdad es que se ve fácilmente que lleva muchos años en el mundo del diseño, que es un profesional y tiene una seguridad aplastante.
Solo hay que ver su web para tener claro el buen gusto que tiene a la hora de diseñar páginas. En cuanto a SEO nunca se pronuncia y es verdad que he visto (a mi juicio personal) algunas carencias, pero como diseñador es un 10 y solo me salen palabras buenas hacia el.
Solo tenéis que entrar en su página web y ver la cantidad de detalles que tiene, la limpieza, la facilidad de navegación, y el buen gusto a la hora de hacerlo todo. Es tan limpia que la web parece vacía, pero todo lo contrario, tiene muchísimo contenido, y muy bueno además. Clic en el siguiente enlace:
Un mal ejemplo de diseño web
hay miles de millones de paginas, y os aseguro que muchas de ellas horrorosas, pero hoy no os voy el clásico ejemplo de web horrorosa. Mas bien voy a tirar a una web de una empresa que en teoría tiene recursos para poder tener algo mas profesional, en cambio cuando entras a su web (a mi por lo menos) me da la sensación de tristeza. Se trata de la web oficial de Caprabo, una empresa estable y solvente que podría fácilmente tener una web en condiciones.
Enlace a su web: Caprabo
Cuando entras a su web, se ve rápidamente que no tiene muy buen gusto , en cuanto a diseño, es extremadamente simple y si os fijáis, en la pagina principal tiene hasta un error, y es que los primeros post o noticias, se comen parte del logo o header.
Fijaros bien en el detalle de las fuentes (o tipos de letra) solo en la página principal, no tienen uniformidad, hay un monton de tipos de letra que en conjunto, queda feísimo.
- Empieza con unas letras en el menú principal de tamaño estándar.
- Luego unas letras enormes en el logo (sin demasiado gusto estético)
- Luego tres bloques (que insisto en que se comen parte del logo superior) que cada uno de ellos tienen = diferentes fuentes, diferentes tamaños y diferentes colores (todo un caos)
- Luego pasamos una sección llena de bloques de noticias, que son relativamente bonitas, pero cometen errores gravísimos a mi entender en cuanto a diseño. Las separaciones o margenes y paddings de los textos, con respecto a ellos mismos son inexistentes. Un ojo inexperto apenas se daría cuenta pero para que lo entendáis, os pongo como es en realidad y como se podría mejorar simplemente aplicando un margen entre textos. con un detallito el diseño mejora. Y este cambio se nota aplicandolo solo en uno de los bloques, pero si lo aplicaramos a todos, ya esta! estéticamente ganaría un huevo! ahora mirar la sutil diferencia.
Bloque original
Con un poco de gusto
En definitiva, el diseño son los detalles
No se si con este mini ejemplo me hago entender, pero muchas veces la diferencia entre un bonito diseño y un feísimo diseño están en los pequeños detalles, que la mayoría de las veces dan mucho trabajo, pero aplicandolas se consiguen resultados mucho mas profesionales.
Por supuesto estos pequeños detalles hay que aplicarlos a cada elemento de la web y ser muy perfeccionista para llegar a tener un diseño súper ligero y agradable de ver.
También tener en cuenta que estos márgenes se alteran igualmente en los diseños responsive, esto signifíca que lo que queda perfecto a pantalla grande, tal vez quede feísimo al hacerlo responsive, así que también hay que tener en cuenta estos detalles en los diseños para pantallas pequeñas.
Despedida 🙂
Ahora mismo no se me ocurre que mas agregar a este artículo, pero si tienes alguna duda o sugerencia, podrás comentarlo aquí abajo, y estaré encantando de agregar mas información o corregir si fuera el caso.
Recuerda que appbera tiene un estupendo canal de youtube en el cual, en el futuro se liberara un curso gratuito de Wortdpress y diseño, asi que te propongo que te subscribas y nos des cuantos likes puedas. Ojala este artículo te sirva un poco como guía para empezar a tener una mente de diseñador, que os aseguro que no es nada fácil.
Un abrazo para todos, hasta la próxima.
