Diseño de Adobe Portfolio

En noviembre de 2015 hice una pequeña charla en el Escuela de Artes Visuales (SVA) en la ciudad de Nueva York sobre el diseño de Adobe Portfolio y el diseño de productos. Usted puede mira la charla aquí . Originalmente escribí este artículo en preparación para la charla, pero desde entonces me he expandido para publicar aquí. Su objetivo es presentar el producto, compartir información sobre el proceso de diseño, escaneos de mi cuaderno de bocetos y algunas especificaciones / diseños de detrás de escena. Espero lo encuentres interesante.

Una pequeña introducción.

Hola soy Andrés . Soy el diseñador principal de productos y el director creativo de Portafolio de Adobe . Voy a compartir con ustedes lo que yo mismo y un gran equipo de desarrolladores en Behance (Adobe) hemos estado trabajando el año pasado.

El sitio de marketing de Adobe Portfolio

¿Qué es Adobe Portfolio?

Básicamente es un producto que le permite crear de manera rápida y sencilla un sitio web para exhibir su trabajo, y personalizarlo para adaptarlo a su estilo y necesidades. No es un concepto nuevo, hay docenas de productos que hacen precisamente eso. Pero Portfolio tiene algunas diferencias clave:

• Está diseñado específicamente para que las creatividades muestren su cartera. Lo que significa que hace lo que necesita hacer, simple y rápidamente.
• Es GRATIS con todos los planes de Adobe Creative Cloud.
• Puede acceder a toda la biblioteca de fuentes de Typekit para usar en su sitio web.

La cartera se sincroniza con Behance.

Lo que hace que Portfolio sea más exclusivo es que se sincroniza con Behance. La idea es crear un hermoso sitio web personalizado con Portfolio y sincronizar sus proyectos con su perfil de Behance. Allí puede obtener una exposición invaluable para su trabajo en una plataforma creativa utilizada por millones de creativos y personas que reclutan creativos. Pero no tiene que usar Behance si no lo desea: puede usar Portfolio por sí mismo y optar por no sincronizarse con Behance. La decisión es tuya.

La fotografía de Matthias Heiderich - como se ve en portafolio y Behance

Diseños receptivos.

Al igual que cualquier desarrollador de sitios web, necesita un punto de partida. Entonces, una de las muchas cosas que necesitábamos para diseñar eran diseños diseñados específicamente para exhibir el trabajo creativo, para actuar como una base que usted puede personalizar fácilmente y poblar con proyectos.

Los diseños pretenden cubrir una variedad de estilos para adaptarse a diferentes campos creativos. Se pueden usar como una solución comercial para poblar rápidamente sus proyectos y publicar un sitio web (en minutos), o usar las funciones del editor para cambiar la estructura y el aspecto para adaptarlo a su estilo.

Personalice fácilmente el mismo diseño para que se vea muy diferente. Con fotografía por Bryce Johnson

A continuación se muestran los diseños con los que estamos lanzando. Los diseños iniciales (para la versión beta pública y el lanzamiento del producto) son muy simples, centrándose en las coberturas de proyectos, galerías y proyectos. El producto, por supuesto, crecerá para ofrecer más funciones, como imágenes de portadas a pantalla completa, edición de HTML y CSS, integración de blogs, etc ... a tiempo. Y a medida que las funciones se amplían, también lo hará la variedad y el número de diseños para elegir como punto de partida.

Diseños y las creatividades que llevan el nombre: Lina , Serrín , Matthias , Juco , Mercedes y Thomas

Elegimos nombrar los diseños después de las creatividades en Behance . Seleccionamos a creativos cuyo trabajo se prestó bien a un diseño particular y, por supuesto, también fue visualmente impactante.

Debo decir que estos diseños fueron una de las últimas cosas que se diseñaron (pre-beta), pero los estoy guiando por el bien de este artículo, para presentarles lo que hace el producto, o al menos, su diseño. 'Producto final'.

El editor.

El producto (en sí) debe permitir al usuario editar su sitio web de manera rápida y sencilla, utilizando uno de los diseños anteriores como punto de partida. La IU es muy mínima: se quita del camino y le permite enfocarse en el diseño de su sitio web. Todos los cambios que hagas suceden en vivo en el editor.

Suena un poco cursi, pero tenía tres cosas en mente al diseñar todo, desde la marca, el sitio de marketing y especialmente el editor:

Debe facultar al usuario para:

• Edita fácilmente todo lo que puedan ver.
• Administrar y agregar contenido.
• Vista anticipada de su sitio web.
• Publicar y actualizar un sitio web en vivo.

A continuación se muestra una gama de escenarios de edición del producto (editor):

Varias pantallas del editor. Con fotografía por Chris Burkard y diseño por Andrew Couldwell

El papel de un diseñador de producto.

Mi propio rol como diseñador en Portfolio cambió bastante dramáticamente a lo largo del año, desde el concepto hasta el lanzamiento. A medida que progresa un producto digital, también lo hace su papel como diseñador de producto. Para volver al comienzo:

ProSite.

La cartera es en realidad la evolución de un producto existente de Behance (que está retirado) denominado ProSite. Son 5 años, así que había mucho que aprender de ese producto: ¿Qué funcionó bien? ¿Qué no?

Behance Network.

Además, lo que hemos aprendido sobre la comunidad creativa y el trabajo de exhibición, a través del diseño, la conservación (¡y el uso!) De Behance Network es inestimable para comprender cómo crear un producto como Portfolio.

Así que pasé una gran cantidad de tiempo absorbiendo todo este conocimiento que Behance había adquirido a lo largo de los años, y también estudiando sus diseños iniciales para la evolución de ProSite. Haciendo preguntas. Tomando notas. Dibujando ideas.

La red Behance y ProSite

Siempre comienzo con un lápiz y un cuaderno de bocetos.

Escribir y dibujar realmente me ayuda a enfocarme, y las ideas fluyen desde allí. Algunas veces simplemente escribo palabras que asocio con el producto, o lista lo que tiene que hacer, solo para sacarlo de mi cabeza. Ayuda a despejar la mente y enfocarse en lo que es importante.

Este trabajo de cuaderno de bocetos evoluciona naturalmente en bocetos de interfaz de usuario. A veces voy a esbozar una característica, o un pequeño detalle UI, o un nuevo enfoque a la interfaz de usuario por completo. Es una manera rápida de simplemente diseñar y explorar ideas. Quizás lo más importante es que no te distraigas con la perfección de píxeles, las fuentes, el color, las cuadrículas, las guías, etc., como haces cuando usas un programa de computadora.

Siempre hay un punto en el que sabes que tienes suficiente para dar un paso más y comenzar a dar cuerpo a estas ideas. En el pasado, he usado Adobe Illustrator u Omnigraffle para esto, para wireframe. Pero el tiempo era limitado en este proyecto, así que fui directamente al Photoshop.

A continuación hay algunos escaneos de mi cuaderno de bocetos. Algunos se relacionan con el producto (editor), otros con el sitio de marketing y la marca:

Algunos escaneos de mi cuaderno de bocetos

Una imagen interesante para señalar arriba es la última (abajo a la derecha). Puedes ver que mi boceto está cerca de lo que finalmente diseñé.

Conceptos y creación de prototipos.

Todas estas ideas y diseños son informados y evolucionados al concebir, crear prototipos y debatir con el equipo. Es bueno conversar con otros diseñadores y desarrolladores, e incluso con el público objetivo cuando sea posible. Por ejemplo: una idea particular surgió de mí discutiendo un diseño temprano (producto) con un estudiante de ilustración MFA en SVA . Una nueva perspectiva siempre ayuda, especialmente para un producto de esta complejidad.

Estábamos trabajando con marcos de tiempo bastante intensos en este proyecto. Simplemente no había tiempo para construir prototipos complejos. Pero lo que sí hice fue crear una serie de recorridos en PDF usando Layer Comps en Photoshop, mostrando el cursor del mouse moverse por la pantalla, demostrando cada interacción, característica y flujo de usuario dentro del producto. Esto permitió a los desarrolladores (y otras partes interesadas) criticar y / o comprender toda la funcionalidad y el flujo de usuarios, para que supieran qué se iba a construir y también identificaran posibles fallas en la UI / UX, antes de la compilación y las pruebas.

A continuación se muestra (un video de) un ejemplo de estos recorridos en PDF:

Prototipo / tutorial que muestra la personalización global en el editor de proyectos

Detalle en diseño.

En pocas palabras: elimine las conjeturas de los desarrolladores. Su equipo necesita comprender qué se debe construir. No es su trabajo completar los espacios en blanco, hacerlo receptivo, o adivinar lo que sucede en cualquier escenario dado. No puedo exagerar lo suficiente, he experimentado tantos diseñadores diseñando y considerando el 20% de un producto, y sin pensarlo dos veces.

Además de los recorridos, flujos de usuarios y prototipos de los que hablé anteriormente, también me gusta crear especificaciones detalladas para todos los componentes, características y marca de la interfaz de usuario. Siento que estos son importantes cuando tienes un equipo grande, por lo que todos están en la misma página, con uno o más puntos centrales de referencia. Las especificaciones pretenden cubrir todos los escenarios, desde estados de rollover, hasta errores, estados activos / inactivos, etc., y también cubren valores y dimensiones de px (incluso llego hasta incluir CSS básico).

Cuantos más detalles incluya en sus diseños, menos preguntas tendrán los desarrolladores, y menos tiempo dedicará a administrar la construcción. Entonces puede enfocarse en diseñar, probar y mejorar el producto.

Además, lo bueno de tomarse el tiempo para crear estos 'kits de interfaz de usuario' es que es más fácil actualizar el producto (diseño) en el futuro. No es necesario actualizar cientos de maquetas, solo actualiza las especificaciones.

A continuación se muestran algunos ejemplos de estas guías de estilo y especificaciones:

Marketing y marca.

Meses después, con el producto (editor) diseñado y en construcción, volví a centrar mi atención en el marketing, la incorporación y la marca. ¿Qué es este producto? ¿Cómo empiezas a usarlo? Necesitaba una voz. Una identidad.

El nombre.

Cuando me uní a Behance por primera vez, este proyecto se llamaba, en broma, "Prosite 2.0" internamente. El producto ProSite cumplió su tiempo, pero su sucesor se había convertido en una bestia diferente. Además de su conexión con Behance, eran productos muy diferentes y no tenían correlación 1: 1. Esto no fue un rediseño / lanzamiento. Estábamos construyendo un nuevo producto emocionante desde cero y retiramos ProSite. Eso fue importante de transmitir, y eso comienza con el nombre.

Volví a mi cuaderno de bocetos y realicé un ejercicio de asociación de palabras para anotar todo lo que hacía este producto y también el idioma que utilizaban todos los productos similares en el mercado. La progresión natural de todo esto siguió volviendo a "Portafolio". Entonces, después de pensarlo un poco, concluí: '¿Por qué no?' - Hace exactamente lo que dice en la lata. Es un creador / editor de sitios web diseñado específicamente para crear una cartera. La simplicidad y la audacia del nombre se combinaron bien con el diseño y los valores del producto. Y así lo llamamos 'Portfolio', que pronto se convirtió en 'Adobe Portfolio' para adaptarse al conjunto de productos de Adobe.

La página de inicio del sitio de marketing con una foto de Tanya Timal

La marca.

La cartera tiene su propia identidad y personalidad. La cartera no es un producto corporativo (por así decirlo). Es una etiqueta blanca. Es tuyo, para hacer el tuyo. Es amigable, simple y accesible. La marca, el sitio de marketing, la incorporación, la redacción y los mensajes a lo largo de la experiencia de usuario (producto) intentan transmitir esto a través del lenguaje utilizado, la tipografía, la cuadrícula, las imágenes y los colores.

Otros escenarios incluyen mensajes divertidos e imágenes humorísticas. Foto del proyecto por dua - Alexander Esslinger

Diseño de respuesta.

Volviendo a mi punto anterior sobre el detalle en el diseño: el diseño web, al igual que el diseño del producto, debe tener la misma atención al detalle. En este caso, es importante que el sitio de marketing responda, pero no es tarea de los desarrolladores averiguar cómo responde un sitio web en diferentes tamaños de pantalla.

A continuación se muestran algunos ejemplos de los diseños receptivos, entregados a los desarrolladores para construir myportfolio.com :

Diseños receptivos para el sitio de marketing, que muestran una versión temprana de la identidad de la marca

Ver un estudio de caso completo del sitio de marketing aquí

Diseños receptivos para un par de diseños, que cubren diferentes escenarios

Ver un estudio de caso completo de los diseños aquí

Prueba de usuario

Un producto digital debería evolucionar para adaptarse a las personas que lo usan, teniendo en cuenta el comportamiento del usuario, para ofrecer la mejor experiencia de usuario. Idealmente, los productos pasarán por una fase alfa / beta (versiones limitadas) antes de que se lancen a todos. Hicimos esto con Portafolio. Esto nos ayudó a eliminar los problemas, a saber si la UI / UX 'funcionó' y a obtener comentarios reales de los usuarios con la intención de mejorar el producto. Lo mejor es probar, aprender y perfeccionar con un grupo de usuarios limitado, que lanzarlo a miles / millones de personas y descubrir problemas cuando ya es demasiado tarde.

Prueba. Aprender. Revisar. Repetir.

Esto es importante en el diseño del producto. Aprendes mucho de las personas que usan el producto.

Te sorprenderá lo que descubres:

... ¡Las personas no siempre usan un producto como anticiparon que lo harían!

• Usted aprende,
• Mejoras,
• Usted itera en el producto,
• Sigues probando,
• Y repite este proceso.

Y, sinceramente, a veces se siente un poco así:

... Pero el producto será mejor para eso.

En conclusión.

Si tuviera que quitar algo de esto, sería:

Ve más despacio.

Inspírate. Comprenda a su audiencia Hacer anotaciones. Bosquejar ideas.

Concepto.

Trabaja con tu equipo Explore ideas Piénsalo.

Detalle en diseño.

Alguien (más) necesita construir lo que diseñas.

Prueba y mejora

¿Funciona? ¿Cómo puede ser mejorado? Siempre se puede mejorar.

Aprender.

Siempre. Cada experiencia en diseño es una buena experiencia de aprendizaje.

[- Este artículo fue publicado originalmente en Medium.com , republicado con el permiso del autor -]

• ← Uber relanza con una nueva identidad de marca
• Diseñando las vacaciones →