¿Cómo presentas el diseño web interactivo?

Esto realmente depende de su flujo de trabajo. Tenga en cuenta que muchos diseñadores web en estos días renuncian al uso de cualquier software gráfico y diseñan directamente en su navegador. De esa forma, presentas tus diseños en un navegador, donde terminarán. Claro y conciso.

Si usa maquetas estáticas en cualquier parte de su flujo de trabajo, siempre puede crear una pequeña maqueta dinámica en un navegador solo para mostrar las partes interactivas que está planeando.

La opción que suelo tomar es presentar elementos interactivos en mi diseño web en una etapa posterior al diseño visual estático. Una vez que se acuerda el diseño estático, empiezo a codificar y uso un sitio de vista previa para presentar las partes interactivas del diseño. Con la entrada del cliente, ese sitio de vista previa se convierte rápidamente en el producto real.

Su pregunta es por qué sugiero codificar en el navegador (referencia: ¿Cuáles son los pasos para diseñar un sitio web? ). La mejor manera de mostrar la interactividad en un sitio, una aplicación o cualquier cosa es el medio en el que se utilizará. No estoy diciendo que desarrolle completamente el sitio y lo entregue. Lo que digo es que puede entregar etapas en el proceso de diseño/desarrollo:

• Un boceto simple (dibujado a mano) en papel o en formato PDF generalmente se conoce como lluvia de ideas. Algunas empresas e individuos serios tendrán una pizarra de borrado en seco de 4' x 8' cubierta con bocetos sobre cómo se mostrará una aplicación.

• maqueta codificada en blanco y negro del sitio para la prueba del dispositivo y una demostración para el cliente si está en la oferta. Usualmente uso Bacon Ipsum (no me gusta la referencia de tocino " Alternativa a Lorem Ipsum (texto ficticio) para sitios web ") como mi contenido ficticio y si se va a necesitar una imagen, colocaré una imagen de maqueta que diga imagen.
• Si la prueba del dispositivo está completa, pasaría a las interacciones y efectos si se solicitan específicamente en el proyecto.
• Agregue el color, los degradados y la profundidad para el sitio.

Sugeriré que en el diseño interactivo no cometas el error que encuentras en muchos "temas" donde todo está animado. Para mí, eso se vuelve vulgar y se aleja del significado del sitio y su contenido. Sugeriría usar animaciones en áreas clave que necesitan destacarse o necesitan mostrar más de un contenido entregable.

Si tiene curiosidad acerca de cómo alojar esto, espero que si está haciendo diseño web, tenga su propio sitio y yo haría un subdominio con un no seguimiento aplicado.

Si su presentación es un material impreso, personalmente dibujo un wireframe o la propuesta de diseño final y la anoto con comentarios y explicaciones. y presento todas las interacciones posibles así, por ejemplo.

• si tiene un menú desplegable o un mega menú en la barra de navegación superior, por ejemplo, represento un archivo que tiene la barra de navegación con un elemento de menú abierto.
• si hay un escenario que abre un panel, solo renderizo todos los pasos si es necesario.
• en algún momento anoto mi diseño/estructura alámbrica con una referencia de URL de muestra en línea.
• cualquier elemento de la página web aparece para el usuario como una hoja, lo renderizo en mis diseños.

pero si tu presentación es una presentación visual, hago lo que me gusta usando animación, transiciones, sonidos, video...etc. para mostrar el concepto utilizando uno de los software de presentaciones. y este método vale la pena hacerlo. ya que le muestra al cliente todas las interacciones posibles de una manera atractiva y no se preocupe por tener una copia de su diseño en sus manos, si sabe a lo que me refiero;)

Parece haber una tendencia reciente hacia la creación de GIF animados de interacciones de la interfaz de usuario ( una búsqueda rápida en Dribbble revelará más). Me imagino que muchos de ellos se arman usando After Effects. InVision publicó recientemente un artículo que describe cómo hacen esto internamente.

Si bien puedo entender el atractivo de este tipo de entregables (están en boga, se ven muy impresionantes y son fáciles de transportar), me parecen inherentemente problemáticos en varios frentes:

1. Establecen expectativas imprecisas desde la perspectiva del cliente: AE le permite agregar todo tipo de efectos visuales que en realidad podrían no ser factibles cuando se traducen a CSS
2. No responden, tanto en el sentido de consulta de medios como en el hecho de que el usuario no interactúa con ellos. El cliente en realidad no puede probar las acciones de desplazamiento, simplemente las observa pasivamente.
3. Requieren más trabajo: en algún momento del proyecto, estas animaciones e interacciones deben traducirse a CSS. ¿Por qué invertir mucho tiempo animando estos elementos en un medio cuando simplemente vas a dejarlo todo a un lado y hacerlo en CSS?

Recomendaría, y usaría, dos enfoques diferentes:

En primer lugar, utilice prototipos en papel para las interacciones de alto nivel y las relaciones de contenido. Esto le permite al cliente formar un modelo mental bastante temprano en el proyecto. Prefiero los prototipos en papel sobre cualquier marco o kit de creación de prototipos preexistente (al estilo Bootstrap). Aunque se supone que estos son mínimos, encuentro que todavía tienen demasiado impacto visual y pueden distraer al cliente haciéndole pensar que así es como se verá realmente el producto final . Esto es menos probable cuando se utilizan bocetos con lápiz y papel.

Para las interacciones más detalladas (que suena como lo que le interesa), usamos mosaicos de estilo , una página única simplificada que tiene un montón de componentes diferentes. Lo bueno de estos es que:

1. El cliente los ve en el navegador, por lo que puede probar la interacción, ver si responde
2. Luego se usa el mismo CSS en el producto/sitio final
3. El CSS se puede documentar a fondo a lo largo de la compilación, lo que puede servir para desarrollar una guía de estilo.

Funciona bien para nosotros, podemos iterar bastante rápido. Por supuesto, esto depende de tener un flujo de trabajo bastante sólido, que llevamos bastante tiempo desarrollando, pero lo vemos como una inversión continua, ya que cada proyecto subsiguiente se vuelve cada vez más rápido.

Existen diferentes aplicaciones para hacer precisamente esto. Hay algunos buenos que son gratuitos, pero en algunos casos se limitan a la funcionalidad que puede demostrar a su cliente. Invision es increíble y gratuito, pero tiene más funciones para dispositivos móviles que para dispositivos de escritorio. Le permite enviar un enlace al cliente y le permite hacer comentarios y enviar de vuelta. Una palabra de advertencia con estos chicos. Asegúrese de que la aplicación haga todo lo que necesita antes de sumergirse.

Existen otras aplicaciones que permiten la funcionalidad completa, pero hay que pagar por ellas. En mi opinión, vale la pena el dinero porque puede resolver la funcionalidad antes de comenzar a codificar.

Usamos Axure en el trabajo antes de comenzar cualquier diseño o código. Esta aplicación es una increíble herramienta de estructura de alambre interactiva. Puede crear una aplicación completa con lógica incluida. Le permite crear la aplicación/sitio web completo antes de diseñar o codificar. También tenía un botón que se iniciará en un modo de demostración donde puede presentar su diseño. Esta aplicación es una de las favoritas entre los diseñadores de UX.

Y mi recomendación final es Indesign. Indesign le permitirá crear una demostración de sitio web en pleno funcionamiento con sus archivos de diseño. Puede hacer una demostración de los estados de rollover y hacer clic en otras páginas de su documento.

Espero que esto ayude. Usamos todos estos métodos en el trabajo dependiendo de cuánto tiempo y presupuesto tenemos para el proyecto en el que estamos trabajando.

Prefiero construir las interacciones y presentarlas en el navegador. Antes de poder mostrarles eso, normalmente anotamos las interacciones pero no intentamos replicarlas fuera del código web. Cuando intenta replicar interacciones fuera del código web (After Effects, Animated GIF, Axure, etc.), corre el riesgo de diseñar en torno a esa pieza de software en particular en lugar del código real que se usará en el producto real.

A menudo uso html/css y javascript para mostrar interacciones complejas, pero si el cambio es simple, muestro los diferentes estados en las composiciones de capas (y uso un ícono de cursor de gran tamaño) para mostrar los diferentes estados.

1. Estado original
2. Muestre el ícono del mouse y una anotación si es necesario
3. Mostrar cambio de estado...

Eso depende de lo que estés presentando.

Si está presentando la animación y la experiencia de bajo nivel, entonces debe hacerlo en el medio del producto final. Cualquier otra cosa es una mala aproximación o no se puede implementar. Nunca presentaría cómo se doblará un papel o cómo se siente su textura en la mano o su sutil aroma en una pantalla, ¿por qué trataría de presentar cómo un botón tiene efectos de desplazamiento sobre el papel?

Si está presentando la interacción de alto nivel entre los usuarios y los componentes, no puede construirlos de manera factible sin haber invertido una gran cantidad de tiempo en construirlos, por lo que necesita un sustituto. Además, la presentación de alto nivel realizada en el medio real podría dé la falsa impresión de que casi ha terminado o de que ya tiene detalles de bajo nivel que en realidad no son el tema principal de la presentación actual , que es la interacción de alto nivel. Una presentación esquemática comunicaría una visión general de alto nivel sin abrumar al cliente con los detalles.

También es importante que cuando presente detalles de animación de bajo nivel, debe ponerlos en el contexto en el que se usan. Por lo tanto, si presenta una barra de menú, enmárquelos con el resto de las páginas cuando presente un efecto de desplazamiento, preséntelos tal como se utilizarán en un formulario. Tenga cuidado de restar énfasis a esos elementos contextuales para que las personas puedan enfocarse en el punto actual (por ejemplo, silenciar sus colores, usar imágenes genéricas y neutrales, usar textos de lorem ipsum, etc.).

Presentar estas animaciones en el medio final también le permitirá realizar un estudio de factibilidad al mismo tiempo. No hay nada peor que prometer un diseño increíble a tu cliente simplemente AMOR en After Effects, solo para terminar sin poder entregarlos porque simplemente no son posibles en el medio.