YdeUP
El Origen
Algo más que un portafolio
Un espacio de prueba, una especie de laboratorio, donde UX y estrategia de contenido expresan una identidad. Abierto a sumar un blog sobre Google Ads y estrategias de marketing y diseño.
YdeUp.com - Portfolio
Nombre
ETIMOLOGIA
- Y proviene de Yrma, escrita con “y griega” por un error de tipeo en mi partida de nacimiento.
- “de” conecta fonéticamente con idée, idea en francés.
- “up” suma el impulso, las ganas de llevar esas ideas hacia arriba.
Y + idée + up
YdeUP : Y de mi identidad y mi presencia habitando cada idea para impulsarla al siguiente nivel.
Isotipo
creacion
PRIMEROS TRAZOS
prueba y error hasta encontrar una silueta que se sintiera propia.
DE PAPEL A TABLET
Buscar fundir mi inicial un lápiz o un crayón, algo humano.
VECTORIZACIÓN Y NEÓN
Inkscape para pulir con vectores en paleta neón, resultado no deseado.
SIMETRÍA Y COLOR
proporciones geométricas y contrastes cromáticos.
ISOLOGO FINAL
La síntesis definitiva entre trazo humano y precisión digital.
Paleta
elección
Color con intención: cómo definí la paleta de YdeUP.
Pasé por lilas, fucsias y turquesas hasta darme cuenta de que el resultado parecía genérico. Rediseñé la paleta con índigo, terracota, oliva y manteca, priorizando la accesibilidad WCAG y una identidad editorial propia.
Por qué la paleta de color también es una decisión de conversión.
Accesibilidad WCAG: contraste, legibilidad y confianza en la web.
Diseño y copy que se leen hasta el final.
PROCESO WEB
Desarrollo web
WordPress + Elementor, componentes reutilizables
Levanté el sitio en WordPress utilizando Elementor como motor de maquetación, evitando plantillas prediseñadas para plasmar con total fidelidad los diseños concretos que tenía en mente. Además, diseñé componentes reutilizables para optimizar el flujo y mantener la coherencia sin reinventar cada bloque desde cero.
CSS a medida para microinteracciones
Trabajé con la versión gratuita de WordPress, lo que limitaba el uso de varios widgets nativos; para superar esta restricción y llevar la interfaz exactamente a donde quería, decidí agregar funciones con código. Así, donde el editor visual no llegaba, sumé CSS personalizado para lograr microinteracciones y transiciones fluidas.
Layout responsive en variación de tipografía
Diseñé un layout adaptable basado en contenedores flexibles y puntos de quiebre personalizados para asegurar una navegación fluida en cualquier pantalla, priorizando una experiencia óptima aunque el proyecto fue originalmente concebido para desktop.
DISEÑO DE INTERFACE
Paleta de tarjeta UX/UI
Diseñé la estructura visual interactiva utilizando la paleta de colores de la marca (terracota, índigo y oliva sobre fondo manteca) para guiar la atención del usuario de forma intuitiva, asegurando una jerarquía clara, contraste óptimo y una experiencia de navegación fluida y coherente en todo el sistema.
Kits de componentes
Diseñé botones y enlaces estratégicos con una jerarquía visual destacada (apoyándome en la paleta de colores de la marca para asegurar un contraste óptimo), ubicándolos en los puntos donde el flujo de lectura e interés del usuario alcanza su pico máximo para maximizar la interacción.
Jerarquia Semantica
Organicé los textos de la web asignando rigurosamente cada nivel de encabezado (<h1>, <h2>, <h3>) y etiquetas HTML. Esto asegura que la estructura visual y el código vayan de la mano, permitiendo que tanto los visitantes como los motores de búsqueda entiendan al instante qué información es la protagonista en cada sección y cómo se relacionan los contenidos.
IMAGEN DE MARCA
Tipografías y estilos
Integré la identidad visual de la marca utilizando la tipografía Fraunces o Works Sans para los titulares combinada con Work Sans en los cuerpos de texto. Todo ello se aplicó bajo una paleta de colores propia para mantener una coherencia visual sólida en cada bloque de la web.
Logo y sistema visual
Diseñé y optimicé el logotipo de la marca en formato vectorial, asegurando líneas limpias, un peso visual equilibrado y una perfecta adaptabilidad tanto para formatos digitales (web y favicon) como para aplicaciones físicas o de alta densidad de píxeles, manteniendo intacta la esencia del proyecto.
Prototipado temprano
Utilicé LocalWP para levantar el entorno de desarrollo y realizar todas las pruebas de maquetación y estructura de forma ágil en mi equipo. Esto me permitió trabajar con total libertad, solucionar errores de configuración y asegurar que el sitio funcionara de manera fluida y sin interrupciones antes de su despliegue final.