UX, UI, IA, IxD, visual, motion designer esos términos que nadie entiende

Para comunicar necesitamos entendernos. ¿Cómo podemos lograr en hacerlo si ni los profesionales del digital saben definir correctamente lo que es un diseñador? Esa multiplicidad de términos, UX, UI, IA, IxD,… existe con razón, se especializó la disciplina. Mientras tanto pedimos a los diseñadores ser expertos sin darles la oportunidad…

Esos últimos años el webmaster pasó de ser un “simple” diseñador, transfer del diseño gráfico tradicional aplicado a plataformas digitales,  a:
  • diseñador front end, diseñador UI,
  • diseñador UI – UX,
  • ahora el UX se subdivide en IA,
  • el diseñador UI en diseñador IxD,
  • el diseñador gráfico especializado digital se llama diseñador visual concept,
  • el diseñador y programador flash de la epoca se llama ahora motion designer,…
Más va pasando el tiempo, más se desarrolla el mercado digital en hábitos de consumo, más nuestro trabajo será complejo.

La confusión de los términos acabará por matarnos

Si las especializaciones han sido un rompecabeza para nosotros mismos los diseñadores que tienen más de 10 años en el business, lo ha sido porque las empresas que marcan el ritmo de nuestras carreras al definir las ofertas de trabajo, no se acordaron sobre el vocabulario a emplear. Ellas mismas se contradicen o no te dan cuenta de todo el proceso que embarca ocupar un rol específico.
Hace tan solo 3 semanas de eso, estaba en proceso de selección para un puesto de UX designer.

Bueno pues, por la amplitud del proyecto asumí que el presupuesto dedicado a los recursos (humanos y materiales) era concecuente. Por lo tanto, la prisa que tenían al momento de la primera etapa de reclutamiento, y la descripción del puesto del UX designer me comprobaron lo contrario: el UX designer será encargado también del diseño de prototipos interactivos (html, css) entre otras cosas.

UX, UI, IA, IxD, visual, motion, la confusión de los términos

Ok. Yo pienso, si esos mismos grupos todo-poderosos tienen ellos mismos el  complejo de la inversión, a donde vamos…

¿Qué podemos esperar de las empresas con recursos bajos?
¿Cómo nosotros diseñadores podemos planificar nuestra carrera laboral en esa arena movediza? Todos esperan de nosotros que seamos “guru” de nuestro trabajo, que evangelizamos a nuestros compañeros de trabajo.
¿Cómo podemos hacer eso si al contratarnos de “UX arquitect” tenemos que hacer UX design, UI, y management,… ?
Insinua que somos expertos en UX, UI, management,… eso, y por definición, ya no es “especialización”.

Para comunicar necesitamos entendernos.

 Pero el mensaje se pierde desde la descripción del puesto. Desde el presupuesto dedicado al “search”,…
Spread the love

Móbil First con AMP, Accelerated Mobile Pages

Ya llegamos en la era “Mobile First“. Es reconocido, y vale para Latinoamérica, que se consultan más páginas desde el móvil que desde otro aparato.

Diseñadores web, UX, UI, hay que adaptar nuestra manera de trabajar y de pensar, porque las preocupaciones técnicas que fijaban limites a nuestras propuestas ahora son duplicadas por 2 o 3 o 4 al trabajar productos optimizados en prioridad para la tecnología móvil.

desarrollo para móbil first con AMP en jam graphic digital

Y concretamente que hacer?

Básicamente el contenido tiene que cargarse de manera super rápida, aún a la primerísima visita del usuario (el 4G tiene sus limitaciones,…).

Unas reglas que seguramente conoces es dar prioridad a texto y olvidar imágenes pesadas (todo el reto de retina), omitir publicidades o cualquier tipo de popups como una suscripción a newsletter, muy poco javascript, privilegiar herramientas nativas al sistema operativo, formularios pre informados,..

Ok pero eso lo hacía antes, ¿qué puedo hacer yo diseñador digital para aumentar la rapidez de carga de contenido?

Hay te va: a eso sirve el web progresivo AMP — Páginas móvil aceleradas (Progressive Web AMPs Accelerated Mobile Pages)
El concepto de esa metodología se resume en : la carga el DOM de la página antes de cargar su contenido. En práctica, el html detalla precisamente el contenido que va a recibir, lo que permite omitir un montón de cálculos y la carga inútil de javascript o css extra a lo que la página necesita, así cargar el primer fold de la página de manera instantánea.
Google explica su implementación de manera completa en su página amp project, aquí enumeró de manera sucia que nos toca hacer a nosotros diseñadores, integradores:

  • Cargar javascript de manera asincrónica
  • Escribir estilos inline. Los estilos tienen que ser menor a 50 kb.
  • Optimizar las fuentes
  • Minimizar el recálculo de los estilos y del layout al escribir directamente en el html el tamaño de los elementos imágenes, iframes and ads.
  • Avisar cuando ya un iframe dentro del layout con el use de
    async custom-element="amp-iframe"

    ¿Cuando tengo que usar AMP?

Como casi todas las metodologías en tecnología web, no hay reglas definitivas, eso porque cada producto tiene su especificidad.
Entonces la decisión de usar AMP o PWA (Progressive Web Apps), o los dos dependerá del producto y eso se hablará por supuesto con los desarrolladores.

Spread the love

Flex y position absolute compatibles ?

Mi experiencia de cierta incompatibilidad entre flex y la position absolute surgió al querer centrar verticalmente el contenido (título, headline y botón) del primer fold de un website. Les explico como superar esa “incompatibilidad”.

Lo que buscaba hacer es un diseño fluido, que permita guardar el contenido centrado, aún cuando la pantalla está disminuida en su altura.
Mira el ejemplo siguiente para entender mis palabras:

Así el texto sigue visible, en lugar de desaparecer por tener una posición especificada con referencia base aplicada desde el top o bottom del contenedor.

Las primeras líneas de css que escribí se aplicó de manera fantástica en Chrome; en Chrome únicamente. Después de leer unas documentaciones, entendí que efectivamente hay dos cosas que tomar en cuenta:

align-self no se aplica si está combinado con margin : auto

selector {
align-self: center; 
margin: auto;
}

la position absolute y las características flex son compatibles en todo los navegadores únicamente cuando flex y absolute:

  • se aplican a un mismo elemento
  • ese elemento es el contenedor padre directo de los elementos que vamos a alinear.
contenedor-padre-lejano {
 height: 100%;
}
contenedor-padre-directo {
 position: absolute;
 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
 display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ 
 display: -ms-flexbox; /* TWEENER - IE 10 */ 
 display: -ms-flex; /* TWEENER - IE 10 */
 display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ 
 display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+, Chrome, Opera */
 align-items: center;
 height: 100%;
 top: 0;
 flex-direction: column;
}
elemento-a-centrar {
}

Si atribuimos el display flex a un padre lejano, el efecto se aplicará unicamente en Chrome.

En cuanto a la compatibilidad con previas versiones de navegadores:

la compatibilidad de flex con varias versiones de navegadores

 

Spread the love