Elementos visuales clave

Lesson 39/90 | Tiempo de estudio: 15 Min


Elementos visuales clave para tu página "Sobre Mí"




Los elementos visuales tienen un gran impacto en cómo los visitantes perciben tu página "Sobre Mí". No se trata solo de verse bien, sino de comunicar confianza, profesionalismo y personalidad.




A continuación, exploramos los elementos visuales esenciales que deberías incluir en tu biografía digital y cómo integrarlos en WordPress.






Imagen de perfil o avatar




Una foto tuya ayuda a humanizar tu marca personal o profesional. Los usuarios confían más en una persona cuando pueden ver su rostro.



Recomendaciones:




  • Usa una imagen clara y actual.


  • Sonríe o elige una expresión que refleje tu estilo.


  • Asegúrate de tener buen encuadre y fondo limpio.



Dónde ubicarla:

Al inicio de la página o al lado del texto de presentación. Puedes usar un bloque de imagen + columna.





💡 Alternativa creativa: Si prefieres no mostrar tu rostro, puedes usar un avatar ilustrado o una imagen que represente tu identidad visual (por ejemplo, tu logo o un ícono personalizado).







Listas de habilidades (con barras, íconos o columnas)




Mostrar tus habilidades de forma visual es mucho más atractivo que un párrafo largo. Puedes usar:





  • Barras de progreso (porcentaje de dominio)


  • Listas con íconos (herramientas o tecnologías que usas)


  • Diseños en columnas (ordenados y fáciles de leer)





















Diseño Gráfico  90%
Photoshop  85%
Canva  95%



Bloques recomendados:




  • Lista


  • Columnas




Tip: No exageres los porcentajes. Sé realista y enfócate en lo que realmente dominas.







Testimonios o colaboraciones




Si ya has trabajado con personas, marcas o proyectos, aprovecha para mostrar lo que dicen de ti. Los testimonios generan confianza y refuerzan tu credibilidad.




¿Qué incluir?




  • Nombre de la persona (opcionalmente su cargo o empresa)


  • Foto o logo (si tienes permiso)


  • Breve comentario sobre cómo fue trabajar contigo



Ejemplo:





"Trabajar con Javier fue una experiencia excelente. Su creatividad y compromiso superaron nuestras expectativas."

— Claudia Gutiérrez, Directora de Marca en Creativa360




Bloques sugeridos:




  • Testimonio


  • Carrusel (para varios testimonios)


  • Cita o bloque de texto destacado




Extra: Si aún no tienes testimonios, puedes añadir un bloque tipo "Proyectos en curso" o "Lo que estoy construyendo ahora" con logos o nombres de colaboradores.







Otros elementos visuales útiles




Además de los básicos, puedes enriquecer tu página con:



Línea de tiempo (Timeline)



Muestra tu trayectoria o evolución profesional con una secuencia visual clara. Ideal para sitios personales o CVs.


Bloques recomendados:






  • Listas con fechas



Galería de imágenes



Si tu trabajo es visual (fotografía, diseño, moda, arte), incluye una pequeña galería que represente tu estilo.


Bloques recomendados:




  • Galería


  • Carrusel de imágenes



Video de presentación



Un breve video (30-90 segundos) puede marcar la diferencia. Habla directamente a tu audiencia, muestra tu espacio o comparte tu historia.


Sube el video o incrústalo desde YouTube o Vimeo.






¿Qué deben lograr tus elementos visuales?




Todos los elementos visuales deben ayudarte a responder estas preguntas del visitante:





  • ¿Quién eres?


  • ¿Qué haces?


  • ¿Puedo confiar en ti?


  • ¿Quiero seguirte o contactarte?




Si tu diseño visual responde a esas preguntas de forma clara y auténtica, vas por buen camino.







Consejo final:

No sobrecargues la página. Usa los elementos visuales con intención y deja espacio en blanco para que todo respire.



Carlos Lombert

Carlos Lombert

Diseñador de productos
4.50
Perfil

Sesiones del Curso

1- ¿Qué es la web y cómo funcionan los sitios web? 2- ¿Qué es WordPress y por qué es tan popular? 3- WordPress.com vs WordPress.org 4- Actividad de Investigación: Sitios web populares hechos con WordPress 5- Actividad especial – Personaliza la entrada de bienvenida 6- Entradas vs Páginas en WordPress 7- Actividad de investigación y desarrollo: Planifica tu sitio web 8- ¿Qué es un blog y cómo se organiza el contenido? 9- Categorías y Etiquetas en WordPress 10- Actividad Especial: Crear un mini-blog temático 11- Información Adicional 12- Actividad de investigación y/o desarrollo: Explora 3 blogs reales y analiza su uso de categorías y etiquetas 13- Estructura de páginas tradicionales de un sitio web 14- Jerarquía de páginas en WordPress 15- Actividad especial: Crea una estructura de páginas con jerarquía 16- Información adicional 17- Actividad de investigación y/o desarrollo: Diferencia entre página estática y entrada en WordPress 18- ¿Qué es el Editor de Bloques? 19- Tipos de Bloques en Gutenberg 20- Actividad Especial: Estructuración Visual con el Editor de Bloques 21- Información adicional 22- Actividad de Investigación: Explorando Bloques Avanzados de Gutenberg 23- Principios básicos de diseño web 24- Estructura básica de una página de inicio efectiva 25- Cómo estructurar una biografía efectiva 26- Elementos visuales clave 27- *[video] Actividad: Crear un borrador de la página “Sobre mí” 28- Actividad de Investigación y Desarrollo: Analiza 3 páginas "Sobre Mí" reales 29- Actividad Especial: Personaliza tu página “Sobre Mí” 30- Información Adicional 31- Componentes esenciales de una página de contacto 32- Buenas prácticas de usabilidad 33- *[video] Actividad: Insertar un formulario con WPForms 34- Actividad de investigación y/o desarrollo 35- Actividad especial: Crear tu página de contacto 36- Información Adicional 37- * Video intro 38- Actividad especial: Personaliza una página 39- * Video intro 40- Cómo presentar servicios de forma clara y atractiva 41- Estructura tradicional de página de servicios 42- *[video] Actividad: Monta tu página de Servicios 43- Actividad de Investigación y Desarrollo 44- Actividad Especial: Crea una página de “Servicios” usando tu análisis 45- *[video] Introducción 46- ¿Qué es un portafolio o página de proyectos? 47- *[video] Actividad: Cómo mostrar proyectos en WordPress (opciones simples y avanzadas) 48- Actividad de Investigación y/o Desarrollo 49- Actividad Especial: Personaliza tu página “Portafolio” o “Proyectos” usando tu análisis 50- *video intro 51- Información adicional 52- ¿Qué se puede hacer con plugins en WordPress? 53- Información adicional 54- Buenas prácticas al elegir plugins 55- *[video] Introducción 56- *[video] Actividad: Instalar plugin para carrusel de imágenes 57- *[video] Introducción a la lección 58- *video intro 59- *[video] Actividad: Instalar y usar plugin de bloques avanzados 60- ¿Qué son los Patrones de Páginas? 61- Rol de la página de inicio en un sitio web 62- Actividad especial: Usa plugins en algunas de tus páginas 63- *[video] Actividad: Insertar un Patrón en una Página 64- Recomendaciones de diseño: escaneabilidad, llamados a la acción, navegación clara 65- Actividad de Investigación y/o Desarrollo 66- Explorando la Biblioteca de Patrones 67- *[video] Actividad: Estructura típica de una página de inicio 68- Información adicional 69- Actividad Especial: Crear una Página Completa con Patrones 70- Actividad de Investigación y Desarrollo 71- *video intro 72- Información adicional 73- Actividad Especial: Crea una página de inicio completa 74- ¿Qué es un tema en WordPress? 75- Actividad de Investigación: Explorando el Directorio de Patrones 76- Información adicional 77- *[video] Actividad: Exploración e Instalación de tema Astra 78- Replicar un sitio web desde cero 79- *Actividad especial: Modifica libremente el Starter Template elegido 80- Actividad de investigación y/o desarrollo: Actualiza tu planificación de sitio web 81- * video intro 82- Actividad de Investigación y Desarrollo: Explora un Starter Template de Astra 83- Actividad Especial: Comienza a construir tu sitio web personal 84- Personaliza tu resultado 85- Información adicional 86- Actividad especial: Completa tu página web 87- *video intro 88- Actividad de Investigación y/o Desarrollo: Redacta tu Informe del Proyecto 89- Introducción a la lección 90- ¿Qué hacer en este proyecto?