Metodologías para ser feliz

Manos de equipo en el barro

Hoy de nuevo tuve otra gran charla con Luis Rull. Mutuamente aprendemos (problablemente yo más que él) sobre los problemas y soluciones en las metodologías de creación de productos digitales. Y cómo hay una base común a cualquier tipo de organización (grande o pequeña). La solución siempre pasa por lo mismo, hablemos de un freelance o una empresa de decenas de profesionales. Sin palabrería ni humo:

1) Reconocer el problema, identificarlo. ¿Es un problema de comunicación? ¿De conocimientos / competencias? ¿De compromiso? Todo estos aspectos tienen solución y herramientas para ello (apps, formación, estructura de roles) PERO sin identificar previamente no hacemos nada.

2) Tomar una decisión de solución y aplicarla. A fuego. Aquí suele fallar desde el freelance a la gran empresa. Es el “dejar de ir al gym porque tengo lío”, el “abandono la dieta por un disgusto”. Un clásico si se es humano. Si nos desviamos: reconocerlo y recuperar pronto.

3) Ser honestos y responder a la pregunta “¿Qué necesito para ser feliz en este proyecto (empresa)?” Esta para mí es la mejor enseñanza aportada por . Sobre todo para aquellos que somos de vieja escuela. Del “p’alante sí o sí“. Tenemos que aprender a levantar la mano.

Sin atacar y resolver esos puntos (no solo una vez, también de manera iterativa) cualquier equipo está condenado a la frustración. Eso es la antesala del fracaso. De ahí la importancia de estos puntos. Incluso si son valoraciones crudas. Con educación todo cabe en la mesa.

En resumen, las metodologías relacionadas con la creación de productos digitales están íntimamente relacionadas con los factores humanos dentro de un equipo de trabajo. Las soluciones no sólo pasan por la elección de herramientas y la gestión de competencias, también pasan por el equilibrio y el valor humano del equipo.

Espero Luis Rull no te moleste que haya compartido este pequeño fragmento de una conservación enriquecedora. Es curioso cómo se revela que parte más importante de una buena metodología de creación de productos digitales recae al final no en la herramienta sino en lo “humano”.

Y el que sea perfecto, que lance la primera pied… el primer smartphone.

Una visión crítica de los frameworks CSS

Código HTML Bootstrap
Este texto pertenece a una colección de publicaciones que he programado bajo el marco de una Guía crítica de Componentes de la Interfaz de Usuario. Está dirigido principalmente a los alumnos del Máster de Diseño Web y Creatividad de la Escuela de Negocios de la Cámara de Comercio de Sevilla, pero también puede servir de ayuda a todo el que se inicia en el Diseño de Experiencia de Usuario y en el Diseño de Interfaz de Usuario. Los profesionales con más experiencia que se acerquen a este texto quizás no encuentren nada nuevo. No obstante espero que, en su caso, sirva como excusa para abrir debate sobre la cuestión.

Los llamados frameworks HTML, frameworks CSS o frameworks Responsive de código abierto proponen soluciones —discutibles, como ahora veremos— a aspectos de composición o diseño. Algunos frameworks de esta tipología destacados son Foundation, Bootstrap, Semantic UI, UiKit o Skeleton, por ejemplo.

El primer premio a la ausencia de diseño se lo llevaría, sin duda alguna, Material Design Lite. Se trata de una un framework CSS que emula la estética de las Android User Interface Guidelines con el objetivo de vencer la fricción del producto digital respecto al sistema operativo del dispositivo a toda costa, incluso sacrificando el diseño (personalizado). El producto se mimetizará con la apariencia del sistema operativo del dispositivo.

Tres puntos a favor de los frameworks CSS de código abierto.

Seré honesto: yo utilizo frameworks CSS. No en todo los proyectos, pero los aplico. Y no todo es malo en ellos siempre y cuando los recursos se gestionen adecuadamente. Desde los objetivos que perseguimos en esta colección de artículos —gestionar y diseñar mejor los componentes de la interfaz de usuario—, podemos destacar las siguientes ventajas de los frameworks CSS:

1. Los frameworks resultan altamente eficientes porque proponen una respuesta multicontexto (responsive) cuyo mantenimiento es mínimo. Los frameworks también responden a la filosofía DRY en el momento en que incluyen un catálogo de componentes predefinidos —predefinidos a todos los niveles: visual e interacción— que hacen posible encapsular los objetos.

2. El grid o rejilla es el recurso maestro, el cual sirve como hilo conductor para trasladar un visual estático hacia una maquetación responsive. Incluso el software para el diseño de experiencia de usuario tiene en cuenta este recurso, como hace por ejemplo Axure. El grid es un recurso visual que se hace tangible a través de hojas de estilo CSS. El grid propone una suerte de esperanto entre el diseñador (de experiencia y de interfaz) y el desarrollador, entre lo estático y lo líquido. El requisito básico de todo framework CSS es que su núcleo consista en una solución de desarrollo para el grid.

Ejemplo de grid
Ejemplo de grid creado con Gridulator

3. Gracias al listado de componentes, el lenguaje y la experiencia de usuario se ha normalizado. Todos los frameworks CSS contienen prácticamente los mismos componentes. Nombran a cada componente de manera similar. Casi todos los componentes se comportan de manera similar —por ejemplo, la forma en la que mostramos una ventana modal al usuario suele ser similar. He elaborado esta tabla comparativa de los componentes más significativos. Observad que en algunos casos siendo el mismo componente se nombran diferentes o tienen variantes:

Componente Foundation Bootstrap SemanticUI UIKit Skeleton
Button (Botón) (#) (#) (#) (#) (#)
Table (Tablas) (#) (#) (#) (#) (#)
Form (Formularios) (#) (#) (#) (#) (#)
Label / Badges (Etiquetas) (#) badge
(#) label
(#) badge
(#) label
(#) (#) badge
(#) label
Alerts (Mensajes contextuales) (#) Callout (#) Alerts
(#) Alerts JS
(#) Message (#) Alert
Breadcrumbs (Migas de pan) (#) (#) (#) (#)
Pagination (Paginación) (#) (#) (#)
Navigation bar (Menús de navegación) (#) Top bar (#) Navbar (#) Menu (#) Navbar
Dropdown (Selector de opciones desplegables) (#) (#) (#) (#)
Tooltip (Descripciones emergentes) (#) Tooltip (#) Tooltip

(#) Popovers

(#) Popup (#) Tooltip
Accordion (Acordeón) (#) Accordion Menú
(#) Accordion
(#) Accordion (#) Accordion (#) Accordion
Tabs & Pills (Navegación por pestañas) (#) Tabs (#) Nav (#) Tab (#) Tab
Slider (Deslizador de contenido) (#) (#) (#)
Modal (#) Reveal (#) Modal (#) Modal (#) Modal

En contra de los frameworks.

Tres puntos en contra de un framework CSS open source:

1. El abuso de frameworks empobrece visualmente los productos digitales. Hace ya varios años que gran parte de la comunidad de diseño viene advirtiendo el problema que supone que todos los productos parezcan lo mismo —en este enlace se refieren a sitios web, pero es aplicable a cualquier otro producto en cuya base se aplique un framework CSS. Este problema se atribuía originalmente a un abuso de tendencias de diseño. Transcurrido el tiempo necesario, queda claro que es un problema de fondo del modelo de producción actual como venimos comentando artículos atrás.

2. Adormece el potencial profesional y la calidad del producto. Está bien tener herramientas que nos permitan agilizar el arranque de productos. Está bien tener procesos predefinidos para no tener que perder tiempo en tareas repetitivas. El problema es que se trata el proceso completo de creación de un producto como una tarea repetitiva en sí misma. Especialmente cuando das servicios en lugar de trabajar en tu propio producto. Y eso, adormece a la bestia. El profesional se vuelve vago en una dinámica machacona —porque somos humanos ¿a quién no le pasaría?—. Eso hace que nos alejemos en el diseño de la diferenciación, la calidad y la excelencia en la creación de productos digitales.

3. Abre una brecha entre los diferentes perfiles. El mal hábito del template y el theme predefinido apartan al diseñador del proceso. Sea por ahorro en costes o el motivo random en lenguaje entrepreneur que prefieran, se crea una brecha que aleja al diseñador del código, algo totalmente pernicioso para el producto digital. La existencia de esta brecha es tan real que a día hoy la responsabilidad en la creación de una Guía de Estilos de Producto Digital recae sobre los desarrolladores antes que sobre los diseñadores, siendo estos últimos los verdaderos responsables de ese material.

Debo añadir en este punto que no todos los desarrolladores se sienten cómodos trabajando con estos frameworks. Desarrolladores como Belén Albeza (@ladybenko) defienden sólidos argumentos en contra. Esto ocurre también en un momento en que ciertos módulos de CSS muy esperados, como CSS Grid Layout, hacen su aparición en escena.

En la siguiente entrega vamos a ver todo lo relacionado con las Guías de estilo.

La década startup y las metodologías de diseño de interfaz

desarrollador trabajando en startup
Este texto pertenece a una colección de publicaciones que he programado bajo el marco de una Guía crítica de Componentes de la Interfaz de Usuario. Está dirigido principalmente a los alumnos del Máster de Diseño Web y Creatividad de la Escuela de Negocios de la Cámara de Comercio de Sevilla, pero también puede servir de ayuda a todo el que se inicia en el Diseño de Experiencia de Usuario y en el Diseño de Interfaz de Usuario. Los profesionales con más experiencia que se acerquen a este texto quizás no encuentren nada nuevo. No obstante espero que, en su caso, sirva como excusa para abrir debate sobre la cuestión.

Los desarrolladores front-end se han convertido en una figura clave a lo largo de la última década. Probablemente de los perfiles más solicitados y valorados. Una década que, no podemos olvidar, ha estado presidida por el modelo de startup [3]. Esto ha condicionando las tendencias de los modelos de producción.

El modelo de creación de productos digitales ha priorizado las demandas de los desarrolladores porque coincidía con la el modelo de startup:

  • Metodologías de trabajo que persiguen la eficiencia y resultados cortoplacistas.
  • Filosofía DRY (Don’t Repeat Yourself), que coincide con un modelo de mínima inversión.
  • Una orientación progresiva hacia la movilidad (productos digitales que se consumen en contexto mobile).

Priorizando estas ideas y otras similares orientadas al eficientismoojo, he consultado el término— los desarrolladores front-end y las tendencias tecnológicas han condicionado las metodologías de diseño. No sabemos si de manera consciente, pero es un hecho como ahora comprobaremos.

[3] Hace unas semanas Javier Cañada publicó “15 consejos para emprendedores que lidian con diseño y UX“. En el transfondo de este texto se adivinan los problemas hasta ahora señalados: una industria basada en el modelo startup que satisface las necesidades de los desarrolladores, orientando el modelo productivo exclusivamente a la creación de MPVs que levanten la inversión deseada. Lectura obligatoria.

Otro hecho a tener en cuenta que ha modificado y condicionado la metodología de diseño en la última década está íntimamente relacionado con el tercer punto sobre la movilidad:

1. El aumento de usuarios que demandan productos digitales en contextos móviles (tablets y smarphones) ha hecho que los diseñadores tengan muy presente los patrones de diseño de interfaz de los sistemas operativos de los propios dispositivos (iOS Human Interfaces Guidelines, Android User Interface Guidelines).

2. Plantear al usuario flujos de interacción o un diseño visual similar a lo que puede encontrar en su dispositivo, ha normalizado el lenguaje y la estética respecto a ciertos componentes (accordion, badge, breadcrumb, dropdown, form, list, modal, pagination, etc).

3. Utilizar la familiaridad de los componentes del sistema operativo es un viejo recurso del sector. Ayuda a vencer la fricción y estandariza las soluciones —lo cual, según cómo se enfoque puede ser mejor o peor para el resultado final.

Mobile gestures app prototype
iOS – New Gestures by Javi Pérez

 

Todas estas demandas, preocupaciones y tendencias sirvieron en su momento (2011) como caldo de cultivo perfecto para los frameworks CSS de código abierto a los cuales vamos a dedicarle el siguiente capítulo. Creedme, se lo merecen (para bien y para mal 🙂 )

Retrospectiva sobre la segmentación de perfiles en el diseño de interfaz

Atomic design
Este texto pertenece a una colección de publicaciones que he programado bajo el marco de una Guía crítica de Componentes de la Interfaz de Usuario. Está dirigido principalmente a los alumnos del Máster de Diseño Web y Creatividad de la Escuela de Negocios de la Cámara de Comercio de Sevilla, pero también puede servir de ayuda a todo el que se inicia en el Diseño de Experiencia de Usuario y en el Diseño de Interfaz de Usuario. Los profesionales con más experiencia que se acerquen a este texto quizás no encuentren nada nuevo. No obstante espero que, en su caso, sirva como excusa para abrir debate sobre la cuestión.

Con tantos grandes profesionales contribuyendo a la historia del diseño de producto digital a nivel mundial es complicado elaborar una cronología. Aunque, si tuviera que elegir, para mi el caso más evidente es la metodología Atomic Design (2013) de Brad Frost. Esta metodología está muy relacionada con el asunto que nos trae aquí, una mejor gestión y diseño de los componentes de la interfaz deusuario. La propuesta del Atomic Design es diseñar desde los componentes como piezas identificadas y extrapolables que dan paso a sistemas más complejos, escalables, mantenibles, multicontexto.

Me parece importante destacar que esta metodología fue inspirada a Brad Frost por Stephen Hay y su “We’re not designing pages, we’re designing systems of components“. Si seguimos hacia atrás, Stephen Hay argumentaba eso mismo a raiz de su propuesta “Responsive Design Workflow” (2012), una metodología que, supongo, estaba inspirada en el “Mobile Web Best Practices” (2008) del W3C.

¿Por qué propuso Stephen Hay ese flujo de trabajo? Probablemente porque a raiz del Diseño Web Responsive el trabajo de diseño de interfaz se duplicó y hasta triplicó en la última década. Es el coste de tener en cuenta los contextos básicos (desktop, tablet, mobile).

Un breve inciso. Esto generó un problema a nivel de negocio porque, aunque era evidente que se necesitaban diseñar más pantallas en más contextos, los precios del mercado no podían duplicarse o triplicarse por proyecto de la noche a la mañana. Al menos una pequeña empresa no se podía permitir esto. Por lo tanto, estas metodologías no sólo responden a flujos de trabajo más ordenados, coherentes, extensibles. También responden a esta demanda del mercado que obliga a ecualizar los costes. Continuamos.

A la ingente suma de pantallas a resolver en cada proyecto, debemos añadir que el trabajo de maquetación también se vio afectado. Las hojas de estilos en cascada (CSS) se complicaron. Mucho. En serio, muchísimo. En su extremo, esto se ha traducido en la implantación de los preprocesadores CSS. No por gusto, evidentemente. El objetivo siempre ha sido servir las soluciones a todos los contextos en los que un producto digital puede ser utilizado.

Llegado cierto momento era evidente la dificultad del diseñador para abarcar todo el proceso [1]. Creo que por todo esto —y muchas otras razones que comentaros más adelante— en la última década se ha producido una segmentación de los perfiles dedicados al diseño. Diseñadores UX, diseñadores UI y desarrolladores front-end [2] son algunos de los apellidos de diseñador más comunes en los que han aterrizado aquellos diseñadores-maquetadores primigenios (diserrollador, como dice mi colega Cristian Eslava).

[1] Debemos tener en cuenta que no hace demasiado tiempo el diseñador de interfaz también era “maquetador“. Esto sigue ocurriendo en muchos casos, sobre todo en empresas, equipos y proyectos pequeños, aunque a día de hoy la tendencia sea segmentar perfiles. Esta segmentación tiene su justificación en favor de la especialización, la cual responde a las demandas de tecnologías y mercado. No obstante, recordar que antes el profesional era “el mismo para todo” es algo que debemos tener en cuenta para comprender la evolución de la labor del diseño de interfaz.
[2] Hago referencia a diseñadores que dan un salto más profundo al mundo de desarrollo front-end. Sobra decir que, al margen de esto, ya existían perfiles dedicados exclusivamente al desarrollo front-end. Al igual que ocurre con los perfiles dedicados a la Experiencia de Usuario, en el desarrollo front-end confluyen perfiles de múltiples orígenes, además de los desarrolladores, digamos “de raza”, que siempre han ocupado esa posición.

En este recorrido por la segmentación del perfil, el diseñador se ha ido alejando del código. Es hora de recuperar esos súper poderes que originalmente te pertenecen, aunque quizás no lo sabías. ¿Te interesa? Allá vamos.

Introducción crítica a los Componentes de la Interfaz de Usuario

Diseñando una interfaz móvil
Este texto pertenece a una colección de publicaciones que he programado bajo el marco de una Guía crítica de Componentes de la Interfaz de Usuario. Está dirigido principalmente a los alumnos del Máster de Diseño Web y Creatividad de la Escuela de Negocios de la Cámara de Comercio de Sevilla, pero también puede servir de ayuda a todo el que se inicia en el Diseño de Experiencia de Usuario y en el Diseño de Interfaz de Usuario. Los profesionales con más experiencia que se acerquen a este texto quizás no encuentren nada nuevo. No obstante espero que, en su caso, sirva como excusa para abrir debate sobre la cuestión.

A falta de una definición oficial o mejor, escribía en el artículo anterior que:

Los componentes de la interfaz de usuario son conjuntos de elementos que forman un elemento más complejo, a la vez que único y en ocasiones indivisible, cuya usabilidad suele ser autoexplicativa por la propia composición, estructural y visual del mismo.

Resumiendo de una manera más prosaica, los componentes de la interfaz de usuario son esas piezas identificables —tan identificables que son universalmente reconocibles— que sirven para trasladar a un plano tangible las relaciones entre forma y función en el contexto de una interfaz.

No siempre pero en la mayoría de ocasiones pueden parecer piezas prefabricadas con las que trabajar. Centrándonos en el diseño de productos digitales, hablamos de componentes como el botón, los conjuntos de pestañas, acordeones, migas de pan…. Más adelante el listado completo.

Por tanto, conocer y comprender los componentes con los que podemos trabajar es un requisito obligatorio para resolver de la manera más óptima los problemas de diseño a los que nos enfrentamos en cada proyecto.

Una visión crítica sobre el estado actual del sector.

Primero, contexto.

Este texto está dirigido a aquellos alumnos que se están formando tanto en el Diseño de la Experiencia de Usuario como en el Diseño de Interfaz. Debo puntualizar, antes de que alguien se enfade, que ambos tipos de diseñadores guardan sus diferencias como podéis ver de manera muy resumida en el gráfico siguiente.

Conociendo las diferencias entre UX y UI design
Conociendo las diferencias entre UX y UI design

Artículos que hablan y desarrollan estas diferencias encontraréis muchos. Si no habéis profundizado sobre esto, es el momento —pero, por favor, luego volved a este artículo :).

Obviando las diferencias y poniendo en el centro del escenario el producto digital, encontramos, como decía anteriormente, aquello que es común y transversal a ambos tipos de diseñadores: la interfaz. Y, dentro de la interfaz, los componentes. El UX designer hará tangible esto a través de la conceptualización gráfica de un wireframe. El UI designer aplicará su ejercicio de diseño gráfico sobre los layouts propuestos. El punto de encuentro del diseñador UX y diseñador UI es la gestión que cada uno hace de los componentes. De menos a más: componentes, layouts, interfaz, producto digital. Todo se relaciona entre sí formando un sistema.

Segundo, el estado actual de la cuestión.

La tendencia actual en el diseño de producto digital es el diseño de sistemas. Esto quiere decir que el valor añadido de nuestra labor como diseñadores no es tanto producir muchas pantallas como ofrecer soluciones transversales. Tres puntos claves definen una buena labor de diseño de interfaz cuando se trabajan desde los componentes:

  1. Proponer soluciones sobre cómo los componentes se conjungan entre sí formando las diferentes pantallas.
  2. Resolver cómo estos componentes se adaptan a los contextos en los que un producto digital puede ser utilizado.
  3. Finalmente, prever cómo estos componentes serán sostenidos a lo largo de la vida y/o ciclos del producto.

La consecuencia lógica final de todo esto será la creación de una Guía de estilos del Producto Digital. Llegaremos a este punto en el capítulo correspondiente

En ese sentido, el diseñador de experiencia y el de interfaz hablan este mismo idioma en favor del producto. No ocurre lo mismo con la relación entre los equipos de diseño y desarrollo. Una queja recurrente y un problema lamentablemente común en los equipos es la brecha, cada vez mayor, entre los diseñadores y los desarrolladores. Algunos posibles motivos:

A). Los diseñadores cada vez se alejan más de las cuestiones tecnológicas que afectan a los procesos de desarrollo de productos digitales. ¿Deben los diseñadores saber código? Es una cuestión recurrente y controvertida.

B). Los desarrolladores, específicamente front-end, son castigados por el modelo actual, agresivo en cuanto a tiempos de entrega y volumen de herramientas se refiere de creación de productos digitales. Esto no les deja margen para empatizar con las necesidades del diseñador. Tanto es así que muchos desarrolladores han llegado a creer que se puede diseñar sin necesidad de diseñar —una mala, malísima interpretación de la técnica “Designing in the browser“. No les culpo. Estas son las consecuencias de la “década startup“, como más adelante veremos.

Resumiendo:

  1. El diseñador ha perdido el control y se ha alejado del código necesario para hacer tangible su interfaz y, por tanto, los componentes diseñados.
  2. Por su parte el desarrollador es un perfil muy demandando que, por contra, ejerce su labor bajo una saturación de métodos y herramientas.

Existe una solución a esta problemática. Los diseñadores deben volver a tomar el control en la gestión total de los componentes de la interfaz —con todas las implicaciones que esto supone— y con ello, de paso, liberarán a los compañeros desarrolladores de partes que no le deberían corresponder. Para diseñar mejor, el diseñador debe volver a hacerse con el código, como lo hacían hace años los diseñadores primigenios (esa suerte de diseñador-maquetador-profesional-para-todo). Puede que antes de ponernos manos a la obra tengamos que repasar un poco nuestra historia.

Esa es la propuesta ¿Te interesa? Allá vamos.

Componentes de la Interfaz de Usuario: una Guía crítica

Ejemplo de diseño de componentes de la interfaz de usuario

Imagen: UI Components de un proyecto (Adtriboo, 2014)

Los componentes de la interfaz de usuario son conjuntos de elementos que forman un elemento más complejo, a la vez que único, y en ocasiones indivisible, cuya usabilidad suele ser autoexplicativa por la propia composición, estructural y visual del mismo.

Me gustaría decir que la cita está sacada de la Wikipedia o es de alguna figura mundial del diseño de interfaz. Lamentablemente para los más puristas es una definición que he creado para introducir el tema, intentado buscar las palabras más exactas, con mayor o menor acierto. ¿Por qué lo hago? Porque necesito crear una guía sobre el tema. Una guía que profundice sobre ello y tenga un espíritu crítico.

La necesidad.

En este tiempo como profesor en el Máster de Diseño Web y Creatividad de la Escuela de Negocios de la Cámara de Comercio de Sevilla, he podido aprender mucho sobre las necesidades formativas de todo aquel que, sin una formación previa, quiere adentrarse en el campo del diseño de producto digital. Muchas de las cosas que he aprendido han surgido de anécdotas de clase como la siguiente.

Introducía a los alumnos en el Diseño de la Experiencia de Usuario y les pregunté si sabían decirme qué es un componente acordeón en la interfaz de usuario de un producto digital. No obtuve respuesta. Pregunté inmediatamente lo mismo sobre un componente de pestañas. Sobre un slider. Sobre alguno más. Nada, silencio. A las caras de desconcierto sólo le faltaban un matojo rodante dando tumbos al fondo de la clase.

Las dudas de los alumnos se despejaron al mostrar en el proyector los componentes. Todos reconocieron la mayoría de componentes, pero esto me hizo pensar. A veces estamos tan metidos en nuestra dinámica de trabajo, tan viciados con nuetro lenguaje técnico, que olvidamos que para alguien que se inicia en el Diseño de Interfaz, ciertos términos no dejan de ser marcianos, aunque el aspecto visual les resulte familiar. Esto tiene las implicaciones siguientes:

Para realizar un ejercicio de diseño de interacción o de diseño de interfaz de un producto digital (sitio web corporativo, ecommerce, aplicación web, aplicación móvil, etc) es imprescindible que conozcamos los componentes de una interfaz de usuario de un producto digital. Por lo menos lo más comunes.

El objetivo.

Conocer los componentes más comunes con los que podemos trabajar, llegar a ellos, saber de su existencia es algo relativamente sencillo con ayuda del profesor y/o una simple búsqueda en Google. El punto importante es asumir la función de cada uno de estos componentes, pues de ello dependerá que nuestras decisiones en un ejercicio de diseño de interacción sean más acertadas o no. También es importante comprender que, a día de hoy, existen ciertos consensos visuales respecto a la mayoría de estos componentes. Asumir esto nos convertirá en diseñadores visuales más eficientes y resolutivos.

Qué demonios quiero decir con guía “crítica”.

Llegados a este punto, el problema de formación no se soluciona simplemente con listar los diferentes componentes que una interfaz de usuario de un producto digital puede contener a lo largo de los diferentes flujos y pantallas. Hay que dar un paso más y aportar un listado con anotaciones críticas. Esta anotaciones deben perseguir los siguientes objetivos:

  • Anotaciones objetivas, al margen de tendencias y modas de diseño.
  • Anotaciones honestas, sin que estén condicionadas por mis propias preferencias como diseñador.
  • Anotaciones abiertas, al diálogo y a la revisión por parte de la comunidad de diseño.

Es decir, los alumnos para aprender mejor no necesitan un listado de componentes que pueden usar. Los alumnos necesitan una Guía crítica de Componentes de Interfaz de Usuario.

A quién va dirigida la guía.

Principalmente a mis alumnos, ellos me han motivado a hacer esto y me gustaría ofrecerles este recurso. Por lo tanto, si estás empezando en el diseño de producto digital —lo que tradicionalmente llamábamos diseño web, pero a día de hoy ese término se te quedará corto—, esta guía será ideal para ti. No obstante, si eres un profesional experimentado quizás también te resulte interesante. Sobra decir que los comentarios estarán abiertos para cualquier tipo de valoración que estaré encantado de recibir. Todos somos aprendices en menor o mayor medida.

Capítulos de la guía:

Iré actualizando este artículo para añadir los enlaces a los capítulos conforme los vaya publicando. Estos son los capítulos previstos (a priori) para esta guía:

Entre tanto, los comentarios están abiertos para vuestras opiniones, dudas y sugerencias.

Conferencia: “Los apellidos del diseñador”

Conferencia: Los apellidos del diseñador

El pasado jueves día 13 de octubre fui invitado por el claustro de profesores del Máster Técnico en Diseño Gráfico, Web y Creatividad de la Escuela de Negocios de la Cámara de Comercio de Sevilla para participar en una mesa redonda titulada “Los apellidos del diseñador”.

La idea era muy sencilla. Profesores invitados:

El objetivo era convocar a los alumnos interesados para crear una mesa redonda en la que debatir sobre los “apellidos” del diseñador y sus necesidades formativas.

En primer lugar, Cristian Eslava presentó a todos los docentes participantes e hizo una introducción genérica e histórica de cada uno de los perfiles del diseñador . Posteriormente analizamos, desde una visión global, qué tienen en común y qué tienen de particular cada uno de los perfiles en el mundo del diseño —en cuanto a herramientas y procesos se refiere.

Definimos qué une y separa a un diseñador gráfico frente a un diseñador web. Debatimos por qué existe actualmente una gran segmentación de perfiles en el diseño web (por nombrar algunos: UX, UI, front-end) y cuales son las consecuencias de esto. Nos preguntamos también qué relación tiene un ilustrador con el desarrollador front-end de aplicaciones web, si es que tiene alguna. Y, finalmente, explicamos cómo enfocamos todo esto con coherencia y orden en el Máster que impartimos para que la necesidad formativa esté cubierta y sea profundamente útil en la vida real del diseñador.

Lo cierto es que esperábamos poca asistencia, no mucho más de unas 15 personas. Tanto es así que a priori el concepto era el de mesa redonda. Sin embargo tuvimos mucha suerte porque se presentaron casi 40 personas y el formato se tornó obligatoriamente a algo más parecido a una conferencia.

Como guinda del pastel, los ex alumnos Adrián Guerrero (@adrianguejim) y Julio Margut (@juliomargut), los cuales han cursado con nosotros el primer año del Máster, tomaron la palabra para hablar de su positiva experiencia.

Sin ir más lejos, ellos fueron los encargados de emitir en directo a través de Periscope la conferencia que se pudo seguir a través del hashtag #CámaraConf. Posteriormente Cristian subió el video a Youtube, gracias a lo cual puedo compartir con vosotros los primeros 30 minutos:

Curso de Diseño de Productos Digitales en OpenWebinars

Curso de Diseño de Productos Digitales de OpenWebinars

He colaborado con el equipo de OpenWebinars, una plataforma de formación online que cuenta con el resplado de de Andalucía Open Future, una iniciativa de Telefónica y la Junta de Andalucía, creando el curso de Diseño de Productos Digitales.

Acerca de OpenWebinars

OpenWebinars nace como startup andaluza y se consolida como proyecto empresarial  desde El Cubo, un centro crowdworking situado en las instalaciones de Andalucia Open Future, inicitiva de la Junta de Andalucía y Telefónica.

Su modelo es similar al de una plataforma MOOC —acrónimo en inglés que describe a las plataformas de Massive Online Open Courses—. En OpenWebinars podréis encontrar una lista de, hasta la fecha, unos cuarenta cursos.

La mayoría de los cursos están orientandos a perfiles de diferentes niveles con interés en mejorar sus habilidades en ciertas metodologías y lenguajes de programación. También ofrecen servicios formativos para empresas.

El curso Diseño de Productos Digitales

Enmarcado en un catálogo de Cursos IT, la mayoría sobre lenguajes de programación, me ha tocado hacer la excepción con un curso sobre metodologías de trabajo de diseño.

Grabación del curso de Diseño de Productos Digitales de OpenWebinars
Grabación del curso de Diseño de Productos Digitales de OpenWebinars

El curso que imparto cuenta con un total de cuatro bloques, sin contar la presentación del propio curso, donde tratamos los siguientes puntos:

  • Presentación del curso
  • Introducción al Diseño de Producto Digital
  • Introducción a la Experiencia de Usuario
  • Diseño de la Experiencia de Usuario
  • Introducción al Diseño de Interfaz

Cada bloque está dividido a su vez en apartados con el objetivo de tratar punto por punto cada uno de los campos que debemos tener en cuenta y que afectan a nuestro trabajo como Diseñadores de Producto Digital.

Respecto a los bloques, se plantean dos grandes grupos diferenciados en este curso. En el primer grupo de bloques tratamos los aspectos teóricos de la tarea:

  • Introducción al Diseño de Producto Digital
  • Introducción a la Experiencia de Usuario: Arquitectura de la información, Accesibilidad y Usabilidad.

En el segundo grupo de bloques pasaremos a practicar con el software:

  • Diseño de la Experiencia de Usuario: Axure
  • Introducción al Diseño de Interfaz: Photoshop y Sketch

Este curso está pensado para un perfil principiante. Es un curso ideal para aquellos desarrolladores interesados en profundizar en el flujo de trabajo necesario para poder elaborar sus propios conceptos. Aunque no seas desarrollador, también es un curso perfecto para aquellos que quieren aterrizar sobre el apasionante mundo del Diseño de Productos Digitales.

Adicionalmente os recomiendo los cursos “Desarrollo web front-end profesional” de Sergio Rus y “Curso HTML5, CSS3 y Javascript” de Vicente Herrera, también disponibles en OpenWebinars, los cuales os permitirán tener una global de lo que supone el diseño y desarrollo de productos digitales.

Actualización: Podéis ver aquí el video de la introducción al curso

 

Confirmada mi participación como docente en el Máster Técnico en Diseño Gráfico, Web y Creatividad

Dos diseñadoras creando código web

Créditos de la imagen

Me han confirmado mi participación como docente en el Máster Técnico en Diseño Gráfico, Web y Creatividad de la Escuela de Negocios de la Cámara de Comercio de Sevilla, que se impartirá en EUSA, Centro Adscrito a la Universidad de Sevilla.

La propuesta me llegó hace ya unos meses de la mano del compañero Cristian Eslava, diseñador, blogger y formador. Cristian Eslava será el director de proyecto y profesor de este Máster, en el cual participo como docente en el Módulo de Experto en Diseño Web. Podéis consultar toda la información en la propia página del Máster.

Características más importantes del Máster:

El Máster procurará a los alumnos una visión global del perfil de diseñador digital: desde el diseño gráfico (proyectos para impresión) hasta proyectos estrictamente digitales como el diseño de páginas web.

En lo referente al Módulo de Experto en Diseño Web en el que seré docente,  nos basaremos principalmente en WordPress. El enfoque será práctico pero no dejaremos de lado conceptos más teóricos y algo de Historia que siempre hay que conocer. Aprenderemos a conceptualizar un proyecto, diseñarlo y finalmente desarrollarlo sobre WordPress.

El plantel de profesores principales (Manuel Madrigal, Cristian Eslava, Javier Merchan, Juan Muñoz) se completará con clases magistrales de figuras relevantes del entorno tecnológico como Luis Rull, Rafael Poveda o Fernando Tellado.

El Máster consta de un total de 500 horas lectivas, aunque los alumnos tienen la posibilidad de matricularse en los modulos formativos que deseen (sólo uno o los dos), siendo el primer módulo el de Experto en Diseño Gráfico y Creatividad y el segundo módulo el ya mencionado Experto en Diseño Web.

Otros aspectos a tener en cuenta:

  • Disponibles Becas que cubren desde el 30% al 50% de la cuantía del Máster.
  • A cada alumno se entrega un iPad al iniciar el Máster.
  • 4 meses de prácticas en empresas del sector.
  • El Máster dará comienzo a finales de noviembre ¡aún hay plazas disponibles!
  • Aquí puedes descargar el Programa (provisional y orientativo) completo.

 

 

Consejos para no mantener un blog profesional …y todo lo contrario

Manos sobre MacBook Pro, café y cámara de fotos

Estamos a punto de terminar un año más y, como suele ser costumbre, me repito a mi mismo la promesa de dedicar más tiempo al blog el próximo año.

¿Cuántas veces me habré dicho a mi mismo ésto y no lo he cumplido? Peor aún, lo he dejado por escrito y lo he prometido a aquellos que dedicáis unos minutos de vuestro tiempo pasándoos por aquí y, finalmente, no lo he ofrecido. Eso es lo que llevo peor. Soy Pedro y este es mi lobo.

Argumentos sólidos para no mantener un blog profesional a día de hoy.

Ojo, no quiero que os prestéis a confusión. Corporativamente hablando, un blog es necesario. Si tienes una empresa, es prácticamente una obligación mantener un blog para canalizar tu mensaje, tu identidad, tu actividad, tus productos y noticias. Pero, seamos honestos: cuando uno mismo es una “empresa con patas” el asunto se complica. Es una sencilla cuestión de tiempo y recursos. Y, desde un enfoque estrictamente eficiente, exiten argumentos sólidos a día de hoy para no mantener un blog si eres freelancer:

El infinito bucle de reaprendizaje y reciclado.

Las tecnologías y los métodos de producción digital no paran de evolucionar y esto absorve todo nuestro poco tiempo libre. La vida de freelancer es dura y hay que estar a todas para poder competir en un mercado feroz, para poder ser la alternativa que busca tu cliente. Por lo tanto, hay que medir los esfuerzos: dedicar esa hora libre a estudiar un nuevo framework de desarrollo front-end o escribir un artículo que no tienes muy claro si aportará algo a nadie ¿Qué es más necesario para uno mismo?

Demasiada autocrítica.

Cuando tienes un blog enfocado a tu profesión, la tendencia propia será la autocrítica —a menos que seas un descerebrado o no leas a otros profesionales. Lo normal es que te preguntes ¿para qué escribir algo de lo que ya se ha escrito? Porque, créeme, ya se habrá escrito, con total seguridad. ¿Para qué dedicar horas en redactar algo que con toda seguridad alguien ha explicado antes y con toda probabilidad mucho mejor que yo?

La conversación está en otra parte.

Twitter es una gran herramienta para canalizar la conversación y para compartir ideas y experiencias profesionales. Comienza a ser tendencia los “hilos de Twitter” donde un usuario agrupa un conjunto de ideas en un bloque de tuits. Y, por supuesto, los #hashtag son un gran recurso para llevar lejos el mensaje. También Facebook comienza a ser interesante con los grupos, públicos y privados, donde se reúnen los profesionales para compartir ideas, recursos y consultas técnicas.

SEO.

Existe una tendencia actual que apunta hacia cierto menosprecio sobre la labor de SEO. En mi caso, al provenir de una escuela más antigua, entiendo la propuesta de valor de este ejercicio —reconozco que no es mi especialidad— y sé a ciencia cierta la dificultad que supone. Teniendo en cuenta lo que comentaba en el punto anterior sobre la conversación multicanal ¿realmente merece la pena el esfuerzo si no contamos con el suficiente tiempo para ello?

Excusas geniales para mantener un blog profesional a día de hoy.

No nos engañemos, a pesar de los racionales argumentos que acabo de citar para dejar de mantener un blog profesional cuando eres freelancer, lo cierto es que hay algo en nuestro interior que nos empuja a volver a este lugar.

El infinito bucle de reaprendizaje y reciclado.

Quizás deberíamos mantener un blog (personal y profesional) por el simple hecho de que necesitamos una hoja propia donde ir anotando los descubrimientos que hacemos. Y luego, con el tiempo, releerlas y redescubrirnos. Averiguar en qué hemos acertado y en qué no. Una herramienta para medir si hemos conseguido determinados objetivos o nos hemos desviado demasiado.

Demasiada autocrítica.

Quizás no tenga mucho sentido. Probablemente alguien habrá dicho algo similar y mucho mejor, sin duda. El verdadero ejercicio consiste en hallar qué es lo que hace única nuestra historia, ya sea simplemente la manera de contarla.

La conversación está en otra parte.

Es cierto que la conversación se diluye en los múltiples canales, quizás por eso necesitemos tener un sitio donde montar y recopilar todas las piezas que componen nuestras ideas. Nuevas herramientas como Medium han surgido porque sigue vigente esta necesidad. Por lo tanto, si concedemos a nuestras ideas el valor que se merecen, deberíamos tener un espacio exclusivo y único para ellas.

SEO.

No es algo que nos deba preocupar. Será divertido jugar un poco con las herramientas para mejorar el SEO, sin embargo no debe ser nuestra prioridad si no es nuestro campo y teniendo en cuenta los recursos (tiempo) con los que contamos. Cuando el SEO sea algo vital en nuestro proyecto déjate de rollos y contrata con un auténtico profesional SEO que te ayude.

Concluyendo.

A partir de ahora no pienso amenazar más con la llegada del lobo. No es necesario. Acabo de comprender que el lobo soy yo.

Señor Lobo Pulp Fiction
Señor Lobo