Close

diciembre 4, 2018

Crea mejores páginas con estos 7 tips simples de diseño

¿Alguna vez has pensado que las páginas que haces les falta algo? Si tus habilidades con el diseño o experiencia de usuario no son muy buenas, no te preocupes. Hoy tenemos para ti 7 tips simples de diseño y de experiencia de usuario que aseguramos que mejorarán tus páginas web!

Es cierto que es difícil conocer conceptos avanzados del diseño, pero esto no quiere decir que podamos aplicar los conceptos básicos para así crear páginas web que sean más atractivas, y de eso exactamente es de lo que hablaremos hoy!

 

7- Mantén espacio entre elementos (White space)

White space o espacio en blanco

White space o espacio en blanco Créditos

Esto es algo que suele pasarse por alto en la creación de páginas web. Y es que el espacio en blanco es bastante importante a la hora de crear una página. Y es bastante sencillo. Se trata de dejar espacios vacíos y dejar que toda nuestra página web ‘Respire‘, busca separar los elementos entre si y que cada uno tenga su espacio.

Tener bastante texto sin que haya espacio entre él puede confundir a los usuarios, y también puede hacer que las personas se sientan muy abrumadas por tanto contenido cerca y abandonen tu página web.

Así que un poco de padding aquí y allá nunca vendrá mal en tu página!

 

6- Contraste

Mal contraste vs buen contraste

Mal contraste vs buen contraste

A la hora de crear páginas web, el contraste es uno de los elementos más importantes, dado que este te ayudará a que las personas puedan leer el contenido con facilidad. El contraste es utilizar de manera correcta el color de elementos en el fondo y frente para que se pueda apreciar correctamente.

Imagina entrar en una página web donde el color de fondo sea blanco y el texto en frente sea un gris claro, no sería muy bueno, ¿Verdad? Lo mismo sucede con el contraste en nuestras páginas web, y es bastante fácil de comprobar.

Existe un truco de Naughty Dog (Creadores de Crash Bandicoot, Uncharted y más). Se trata de entre cerrar los ojos y ver si puedes todavía leer el texto. Alejáte un poco de la pantalla y verifica si realmente puedes reconocer los diferentes elementos. ¿Puedes? Si no, es probable que tengas que chequear un poco el contraste.

Artículo relacionado:  6 sitios de inspiración para tu página

 

5- Usa iconos (sabiamente)

Uso de Iconos

Uso de Iconos

Utilizar iconos es una de las mejores cosas que puedes hacer, si lo haces sabiamente. Para los usuarios, es más fácil y sencillo entender los iconos que leer más texto. También debes tener cuidado con esto, porque no es bueno que estés colocando iconos por todos lados, dado que esto se vuelve muy cansado.

Además de esto, los iconos pueden ayudarte a proveer ayuda visual y atraer la vista del usuario. Esto es bastante bueno porque respalda lo que quieres decir y representar, y de esta forma agregas vida a tu página web.

Elementos como los servicios que ofreces, las cosas que realizas, e incluso la sección de contacto deberían tener iconos que agreguen información visual para que el usuario se sienta más cómodo.

 

4- Fuentes

Como usar las fuentes

Como usar las fuentes

Las fuentes o tipografías, son elementos ayudan bastante a la hora de  apoyar un tema de la página. Por ejemplo, supongamos que estás haciendo una página web para productos artesanales o juguetes para niños. Lo último que debes hacer en este caso es usar fuentes fuertes, bold o serif porque esto puede causar confusión entre el tema de la página, y el estilo.

Es muy importante que a la hora de escoger fuentes, escojas dos, una para los títulos, y otra para textos. De esta forma, como los títulos tienen normalmente un tamaño mayor, puedes ponerte creativo con qué fuentes escoger, mientras que para los textos, puedes usar una fuente sans-serif que sea fácil de leer.

En cuánto a como escoger correctamente las fuentes, es relativamente sencillo. Debes tener en cuenta el tema de la página, y utilizar páginas como Google Fonts para buscar las fuentes, piensa en cuál es la fuente que puedes relacionar más fácilmente con el tema del que va la página.

Artículo relacionado:  5 ideas para botones

Es una página para una marca exclusiva? Puedes utilizar una tipografía gruesa que ayude a realzar este aspecto.

3- Animaciones

animate css

animate css

Las animaciones son bastante geniales, pero vienen con un costo. Si las utilizas incorrectamente, harás que tu página web parezca una presentación de PowerPoint mal hecha. Si utilizarás animaciones, evita que sean muy exageradas, y ten como máximo 4 tipos de animaciones en tu página. El evitar que sean exageradas, ayudará a que los usuarios no se confundan con qué está pasando en la página.

Tener animaciones que reaccionan con el scroll del usuario también son buenas, pero mover muchos elementos también puede hacer que los usuarios se confundan.

Así que siempre busca usar animaciones sencillas como transiciones de opacidad, e incluso transiciones de opacidad con movimiento, se verán bien y no confundirán al usuario a la hora de verlas.

 

2- Colores

Malos colores vs buenos colores

Malos colores vs buenos colores

A pesar de que ya mencionamos el contraste, la selección de colores también es muy importante, dado que el ojo se puede cansar con colores muy llamativos y fuertes. Siempre intenta utilizar colores que se vean más naturales e intenta no utilizar colores que estén muy saturados, menos si es para elementos que ocupan gran parte de la pantalla.

Muchos usuarios pueden sentir fátiga en la vista y abandonar la página web por los colores que estés usando.

Si estás inseguro sobre dónde conseguir colores para tu página web, te recomiendo Coolors.co , en ésta página, podrás crear paletas de 5 colores con solo presionar un botón. Si no te convence, puedes generar otra paleta de colores y utilizarla sin problema alguno.

1- Tema

material design tema

material design tema

El tema es, por mucho, lo más importante que debes tener en cuenta a la hora de crear una página web. Un tema es la unión de diferentes componentes, como botones, titulos, colores, tipos de iconos y demás. Tener un tema ayudará a que tus usuarios reconozcan el estilo de tu página web y siempre debe ser consistente para que los usuarios nunca crean que han abandonado tu página.

Artículo relacionado:  6 sitios de inspiración para tu página

Al menos que sean páginas distintas o URLs, es muy importante que todos los elementos del tema sean consistentes y se vean similares dentro de la misma página, así los usuarios reconocerán tus colores, tipo de botones y todos los elementos que tengas la próxima vez que entren, por ejemplo, ¿Sabrías reconocer los colores y tipos de páginas de Facebook? ¡Claro! Porque sus colores y estilos los puedes ver a través de todas sus páginas. Y por esto este es el más importante.

Debes generar un tema que sea consistente con la tématica de la página y consigo mismo, ¿A qué me refieron con “Consigo mismo”? de que puedes hacer una combinación de estilos, pero debes tener en cuenta que deberían siempre estar relacionados. Porque si tienes una fuente que es muy gruesa y unos iconos muy delgados, los iconos perderán protagonismo y perderás bastante con un tema que parezca varias cosas pegadas entre si.

Mi recomendación, es que investigues otras páginas y veas que elementos funcionan bien entre sí, y los vayas uniendo hasta tener una idea clara de cómo se verán los elementos de tu página web.

 

Conclusión

Si no conocemos mucho sobre diseño, siempre es importante mantener alguna de las buenas prácticas que podamos ver para hacer nuestras páginas web lo más atractivas posibles utilizando las bases del diseño. Tener estos tips en cuenta te ayudarán a crear páginas web con una idea más clara de qué hacer y qué no, mejorando enormemente el producto final.

Te gustó este artículo? No tengas problema en comentar dudas, opiniones o que otra cosa podría tenerse en cuenta a la hora de crear una página web y su diseño, saludos y que tu código siga haciendo cosas geniales!

Deja un comentario

A %d blogueros les gusta esto: