Primera impresiĆ³n
Las primeras impresiones son poderosas, especialmente cuando se trata de diseƱo de sitios web. Es esencial considerar este factor antes de hacer cualquier otra cosa.
El aspecto de la pĆ”gina de inicio juzgarĆ” su sitio y el tiempo que tarda en cargarse. DespuĆ©s de cinco segundos, el usuario promedio se aburre si no ve algo que le gusta, por lo que tiene unos segundos para causar una excelente primera impresiĆ³n.
Una buena primera impresiĆ³n mostrarĆ” que su sitio tiene un diseƱo atractivo, una combinaciĆ³n de colores atractiva e informaciĆ³n valiosa presentada en un formato fĆ”cil de leer. Una primera impresiĆ³n incorrecta puede ser tan simple como dificultar que un visitante encuentre su informaciĆ³n de contacto o usar demasiados anuncios llamativos o que distraigan en la barra lateral de las publicaciones de su blog.
Buenos ejemplos incluyen:
Un diseƱo limpio con mucho espacio en blanco alrededor de los bloques de texto;
ImƔgenes despejadas como fotos o logotipos;
Enlaces de navegaciĆ³n sencillos para que los usuarios puedan encontrar informaciĆ³n rĆ”pidamente; y,
Los llamados a la acciĆ³n (CTA) alientan a los visitantes a actuar ahora mismo (por ejemplo, suscribirse a nuestro boletĆn informativo).
Consistencia
Uno de los elementos esenciales a considerar al diseƱar un sitio web es la consistencia. Esto significa asegurarse de que su tipografĆa, disposiciĆ³n, diseƱo y contenido sean consistentes en todo el sitio. Un diseƱo consistente ayuda a los usuarios a comprender cĆ³mo usar el sitio y navegarlo mĆ”s fĆ”cilmente. TambiĆ©n les ayuda a generar confianza en su marca.
Texto Legible
Cuando se trata de texto, preste atenciĆ³n al tamaƱo de fuente, color, tipo y estilo. El espacio entre el texto, los espacios en blanco y la legibilidad general tambiĆ©n son elementos crĆticos en el mundo del diseƱo web. Y finalmente, no te olvides de la estructura del texto y la jerarquĆa visual.
Para empezar, tienes que elegir una jerarquĆa clara de tu contenido: ĀæQuĆ© es lo mĆ”s importante? ĀæQuĆ© es menos importante? Piense en dĆ³nde irĆ” el ojo primero, generalmente en la parte superior central de la pĆ”gina, y trabaje desde allĆ.
Las fuentes que utilice deben ser fĆ”ciles de leer y verse bien en los productos y dispositivos mĆ³viles de Apple. AsegĆŗrese de que su fuente haya sido diseƱada para visualizaciĆ³n en pantalla; Existen versiones Ćŗnicas de fuentes amigables con la pantalla con proporciones ligeramente diferentes a las de sus contrapartes impresas. AdemĆ”s, tenga en cuenta que no todos tendrĆ”n las mismas fuentes instaladas en su computadora o dispositivo mĆ³vil; asegĆŗrese de que si un usuario no tiene instalada su fuente preferida, su navegador la sustituya por una que se parezca a la pĆ”gina y no se vea desviada.
JerarquĆa visual
La jerarquĆa visual se refiere al orden en que los usuarios procesan los elementos que ven en una pĆ”gina. Puede usar diferentes tĆ©cnicas, como el tamaƱo y el peso, para guiarlos a travĆ©s de su sitio y ayudarlos a comprender quĆ© es lo mĆ”s importante. Es por eso que dominar este concepto es crucial para crear una UX convincente.
Este artĆculo explicarĆ” la jerarquĆa visual, por quĆ© es importante para el diseƱo, dĆ³nde debe usarla en su sitio y cĆ³mo puede dominarla usando varias tĆ©cnicas.
ĀæQuĆ© es la jerarquĆa visual?
Comencemos definiendo la jerarquĆa visual: representa la importancia relativa de cada elemento en una pĆ”gina especĆfica en funciĆ³n de su representaciĆ³n visual en comparaciĆ³n con otros factores. La escala grĆ”fica garantiza que los usuarios puedan orientarse sin esfuerzo en una pĆ”gina sin sentirse abrumados o confundidos por demasiada informaciĆ³n.
Espacio en blanco o espacio negativo
El propĆ³sito del espacio en blanco es dar a los usuarios un descanso visual. Esto se puede lograr agregando mĆ”rgenes, relleno y espacio negativo (la distancia entre los elementos) a su diseƱo. Uno de los conceptos errĆ³neos mĆ”s comunes sobre el espacio en blanco es que limita lo que puede colocar en su sitio web; sin embargo, eliminar la necesidad de incluir demasiado en una sola pĆ”gina ayudarĆ” a definir la jerarquĆa y el enfoque de su sitio. Piense hacia dĆ³nde quiere que se dirija la atenciĆ³n de su audiencia y use espacios en blanco para atraerlos.
Los espacios en blanco tambiĆ©n tienen un efecto psicolĆ³gico en la percepciĆ³n de los usuarios sobre la calidad del contenido. La investigaciĆ³n ha demostrado que "las personas perciben que los sitios web con espacios en blanco tienen contenido relevante que aquellos con menos espacios en blanco alrededor del texto y las imĆ”genes".
Al diseƱar una pƔgina web, es fundamental equilibrar el contenido y los espacios en blanco para que cada elemento coincida adecuadamente con su entorno. Una buena regla general es: mƔs espacios en blanco equivalen a mƔs elegancia, independientemente del tamaƱo o la cantidad de otras cosas en la pƔgina.
ImƔgenes y grƔficos apropiados
Las imĆ”genes y grĆ”ficos en su sitio web deben estar directamente relacionados con el tema en cuestiĆ³n. Por ejemplo, si tiene un sitio web sobre cocina, tiene sentido tener imĆ”genes de alimentos. Si ejecuta un sitio web que habla sobre paracaidismo, algunas fotos geniales de personas saltando de aviones le darĆ”n mĆ”s credibilidad a su sitio.
La calidad del contenido tambiĆ©n importa. Es fundamental que la imagen o el grĆ”fico que elija sea de alta resoluciĆ³n y no estĆ© granulado o borroso. Esto le da mĆ”s profundidad a su contenido y aumenta la satisfacciĆ³n del espectador.
Su selecciĆ³n de imĆ”genes tampoco debe limitarse a fotos; Las infografĆas son una excelente manera de transmitir informaciĆ³n de forma visual y atractiva.
Un mapa del sitio, o al menos una navegaciĆ³n sencilla
La navegaciĆ³n es un sistema de orientaciĆ³n. Ayuda a las personas a entender dĆ³nde estĆ”n y cĆ³mo llegaron allĆ. Les permite moverse por su sitio web y les ayuda a encontrar la informaciĆ³n que necesitan para tomar medidas. Cada pĆ”gina de su sitio web debe tener estos elementos:
Un mapa del sitio, o al menos una navegaciĆ³n sencilla
Una funciĆ³n de bĆŗsqueda para los que saben lo que buscan
Llamadas a la acciĆ³n claras.
InformaciĆ³n sobre nosotros
La secciĆ³n Acerca de nosotros es un excelente lugar para compartir su historia y decirles a los clientes quiĆ©n es usted. Esta es tu oportunidad de darles un mejor sentido de ti mismo y de lo que haces.
Agregar una foto puede ayudar a darle vida a la secciĆ³n Acerca de nosotros. Considere incluir una de usted o la ubicaciĆ³n de su empresa en esta pĆ”gina.
AdemĆ”s de contarles a los clientes sobre usted, considere vincular sus pĆ”ginas de redes sociales desde aquĆ para que puedan conectarse con su empresa de otras maneras.
InformaciĆ³n de contacto y enlaces de redes sociales
La informaciĆ³n de contacto debe ser de fĆ”cil acceso e incluir enlaces a sus perfiles de redes sociales. Recuerde, las personas quieren saber que pueden ponerse en contacto con usted y que usted es un negocio legĆtimo. AdemĆ”s, considere tener una direcciĆ³n de correo electrĆ³nico para el sitio web que reenvĆa a su direcciĆ³n de correo electrĆ³nico, para que no tenga que dar su direcciĆ³n de correo electrĆ³nico; esto tambiĆ©n se ve mĆ”s profesional. TambiĆ©n puede tener un formulario de contacto donde las personas pueden completar la informaciĆ³n sobre su consulta y se envĆa directamente a su direcciĆ³n de correo electrĆ³nico.
Al diseƱar una pƔgina web, es fundamental equilibrar el contenido y los espacios en blanco para que cada elemento coincida adecuadamente con su entorno. Una buena regla general es: mƔs espacios en blainco equivalen a mƔs elegancia, independientemente del tamaƱo o la cantidad de otras cosas en la pƔgina.
DespuĆ©s de todo, el trabajo del webmaster es hacer que el sitio sea atractivo, utilizable e informativo para los visitantes. Si bien no hay escasez de cosas que se pueden hacer para lograr este objetivo, la discusiĆ³n de esos temas estĆ” mĆ”s allĆ” del alcance de este artĆculo. Algunos ejemplos de otros elementos de diseƱo incluyen el tamaƱo del texto del cuerpo, las selecciones de fuente/estilos/colores utilizados para los encabezados y el texto del cuerpo, y el mĆ©todo elegido por el autor para implementarlos a travĆ©s de clases Ćŗnicas o estilos en lĆnea.
.png)