Diseñandoproductos digitales

Trabajo Práctico 3

¿Qué es unproducto digital?Es software que permite proveer un producto o servicio a las personas. Estos productos conectan con el usuario a través de una interfaz.

¿Con qué interfaces nos relacionamos día a día?

¿Con qué interfaces nos relacionamos día a día?

¿Cómo se llega a construir un producto digital?

Research y benchmarking

Arquitectura de la información

Construcción de Wireframes

Diseño y prototipado

Testeo con usuarios

Desarrollo e implementación

Testingy QA

Este proceso no es lineal, va iterando y volviendo pasos atrás si es necesario

Investigar el problema a resolver, hablar con los usuarios involucrados, realizar encuestas y trabajo de campo ¿Qué necesitan? ¿Qué inconvenientes encuentran? ¿Cómo puede ayudar mi producto?

Benchmarking es explorar soluciones análogas y explorar referencias para tener en cuenta a la hora de idear.

Llegar a una solución.

Research y benchmarking

Arquitectura de la información

Construcción de Wireframes Diseño y prototipado Testeo con usuarios

Research ybenchmark

Arquitectura¿Cómo va a estar estructurada mi solución? ¿Qué camino va a seguir el usuario?¿Con qué información se va a topar en cada estadío

Research y benchmarking

Arquitectura de la información

Construcción de Wireframes Diseño y prototipado Testeo con usuarios

WireframesPrimer visualización de mi solución.Se bocetan pantallas rápidamente para empezar a organizar los flujos, definir el contenido y la posición de los diversos bloques en las pantallas. Esto incluye menús de navegación, Además, permite ver cómo van a interactuar los elementos entre sí.

Research y benchmarking Diseño y prototipado Testeo con usuariosConstrucción de

WireframesArquitectura de la

información

Diseñoy prototipadoA partir de los wireframes se diseñan las pantallas en función de aquello que se quiere comunicar, teniendo en cuenta tamaños, jerarquías, orden de lectura para facilitar el uso.

Además es útil crear un prototipo funcional para su posterior testeo. Un prototipo no es el producto final, sino una maqueta que requiere mucho menos tiempo de realización.

Research y benchmarking Testeo con usuariosArquitectura de la

información Diseño y prototipadoConstrucción de Wireframes

Diseñoy prototipadoA partir de los wireframes se diseñan las pantallas en función de aquello que se quiere comunicar, teniendo en cuenta tamaños, jerarquías, orden de lectura para facilitar el uso.

Además es útil crear un prototipo funcional para su posterior testeo. Un prototipo no es el producto final, sino una maqueta que requiere mucho menos tiempo de realización.

Research y benchmarking Testeo con usuariosArquitectura de la

información Diseño y prototipadoConstrucción de Wireframes

Diseñoy prototipadoA partir de los wireframes se diseñan las pantallas en función de aquello que se quiere comunicar, teniendo en cuenta tamaños, jerarquías, orden de lectura para facilitar el uso.

Además es útil crear un prototipo funcional para su posterior testeo. Un prototipo no es el producto final, sino una maqueta que requiere mucho menos tiempo de realización.

Research y benchmarking Testeo con usuariosArquitectura de la

información Diseño y prototipadoConstrucción de Wireframes

Diseñoy prototipadoA partir de los wireframes se diseñan las pantallas en función de aquello que se quiere comunicar, teniendo en cuenta tamaños, jerarquías, orden de lectura para facilitar el uso.

Además es útil crear un prototipo funcional para su posterior testeo. Un prototipo no es el producto final, sino una maqueta que requiere mucho menos tiempo de realización.

Research y benchmarking Testeo con usuariosArquitectura de la

información Diseño y prototipadoConstrucción de Wireframes

Testeo conusuariosSe testea el prototipo con usuarios reales y se observa si estos pueden lograr cumplir con las tareas asignadas.Mientras más veces se testee a lo largo del proceso, menos margen de error se tendrá y tendremos como resultado un mejor producto.

Research y benchmarking

Arquitectura de la información

Construcción de Wireframes Testeo con usuariosDiseño y prototipado

¿Qué pasa luego del proceso de diseño?Todo lo que vemos en pantalla es código, interpretado ya sea por un navegador web o por el mismo dispositivo.

Lo que diseñamos tiene que ser traducido a código, y para cada necesidad hay un lenguaje específico.

De esta tarea se puede encargar la misma persona o un gran equipo, dependiendo de los conocimientos y la complejidad del proyecto

<style>.button { border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer;}

.button1 { background-color: white; color: black; border: 2px solid #FFFFFF;

}

Soy un botón

Experimentemos¿Qué pasa si entras a cualquier web y apretás la tecla F12?

¿Probamos?

Tecnologías

Sistemas Operativos (Apps)

Los roles en el proceso de diseño y desarrollo

Roles

Diseñador (UX/UI)

Trabaja sobre el aspecto visual del sitio web o app, pero desprovisto de funcionalidad. Se encarga de armar un original digital, en Photoshop/Illustrator o utilizando herramientas de prototipado como Figma, XD o Sketch.

Maquetador

Traduce el original digital a lenguaje (HTML) y hojas de estilos (CSS) para que pueda ser interpretado por un navegador volviéndolo interactivo. Este rol en muchos casos puede ser reemplazado por un maquetador visual (incorporado en una plataforma)

Desarrollador

Implementa funcionalidad mediante lenguajes de programación (React, PHP, ASP u otros). El sitio web o app puede mutar de estático a dinámico, y puede permitir realizar consultas a bases de datos o contactarse con los administradores a través manejadores de contenido (CMS)

Front-end

Es la parte de una web que conecta e interactúa con los usuarios que la visitan. Es la parte visible, la que muestra el diseño, los contenidos y la que permite a los visitantes navegar por las diferentes páginas mientras lo deseen.

¿Quienes están involucrados?

● Diseñador● Maquetador● Diseñador Web● Front Developer

Front y Back

Back-end

Se encarga de todos los procesos necesarios para que la web funcione de forma correcta. Estos procesos o funciones no son visibles. Algunas de estas acciones controladas por el backend son la conexión con la base de datos o la comunicación con el servidor de hosting.

¿Quienes están involucrados?

● Desarrollador● Analista de Bases de Datos

Front y Back

Tipos de websy de apps

Sitios Web

● De forma muy básica, un sitio web es un conjunto de archivos alojados en un servidor a los que se accede mediante una url (dominio o IP) a través de un navegador.

● Se requiere una conexión a Internet para poder visualizarlo.

● La actualización de un sitio web se lleva a cabo sin que el usuario se dé cuenta y es más económica.

● Posee acceso limitado al Hardware del dispositivo.

● Limitado por la velocidad de carga/descarga de la red del usuario.

por Objetivo de servicio

● Corporativos / Institucionales

● Portales

● E-commerce

● E-learning

● Wikis

● Micrositios

● Blog

● Personales/Portfolio

● Redes Sociales

Tipos de Sitios Web

por forma de navegación

● OnePage

● Landing Page

● Scrolleables horizontal

● Scrolleables vertical

● Estructura con varios niveles

● Lúdicos

● Inmersivos (360 / Mundos 3D)

Tipos de Sitios Web

Estáticos

Se crean con el lenguaje HTML y el

contenido del mismo no puede

autoadministrarse, solo el creador del

sitio puede hacerlo modificando el

código. Son fáciles de desarrollar y

aplican para proyectos que no necesiten

actualizar constantemente la

información.

Dinámicos

Son aquellos creados mediante una

plataforma CMS o con lenguajes de

programación especiales que permiten a

los administradores del sitio, a través de un

backoffice tener control de los contenidos,

ya sea para modificar textos, menues de

navegación, imágenes o incluso generar

nuevas secciones y páginas.

Tipos de Sitios Web

Apps

● Es un programa que se descarga e instala en el dispositivo móvil de un usuario.

● Las apps Necesitan de un canal de distribución (Play Store, Apple Store,etc).

● Consumen espacio de almacenamiento del dispositivo, algunas no requieren internet una vez descargadas.

● Permite interactuar con sensores de movimiento, cámara, micrófono, GPS, etc

● Son en general más costosas y su mantenimiento también lo es.

Tipos de app

Nativas

una app específica para cada sistema

operativo (Android, iOs, etc) Son

aquellas que han sido desarrolladas con

el software que ofrece cada sistema

operativo. De esta forma, iOS, Android y

Windows Phone tienen software (SDK)

distintos. La principal ventaja, es la

posibilidad de acceder a todas las

características del hardware del móvil.

Híbridas

Construidas en torno a un Framework,

con lenguajes web (HTML, JS, etc) o

programadas con lenguajes especiales

donde parte del código se reutiliza para

todos los sistemas operativos.

Según su función

● Mensajería instantánea

● Entretenimiento

● Estilo de Vida

● Sociales

● Financieras

● Video Juegos

● Utilidades

● Transporte

● Comerciales

Tipos de app

¿Qué aspectos técnicos debemos tener en cuenta para diseñar una interface?

Un sistema de diseño es un conjunto de elementos, consistentes, jerarquizados y centralizados que serán reutilizados, colores, tipos de letra, botones y todo aquellos componentes que se utilizan para construir la interfaz del producto, el sitio web o la aplicación.

Un sistema de diseño es más que una guía de estilos, una biblioteca de componentes o un grupo de pautas de código.

Sistemas de diseño

Sistemas de diseño Material

Sistemas de diseño Human

Sistemas de diseño Fluent

Patrones de diseño

Los patrones de diseño son soluciones para problemas típicos y recurrentes que nos podemos encontrar a la hora de desarrollar una interfaz digital.

Aunque nuestro producto digital sea único, tendrá partes comunes con otras aplicaciones: acceso a datos, creación de objetos, operaciones entre sistemas etc. En lugar de reinventar la rueda, podemos solucionar problemas utilizando algún patrón, ya que son soluciones probadas y documentadas por multitud de diseñadores y programadores.

Por ejemplo, un buscador siempre va a estar identificado con una lupa.

Patrones de Interacción

Comunicación fluida entre una aplicación y el usuario.

Patronesde Usabilidad

Mejores soluciones para los problemas de uso entre el usuario y una aplicación.

Patrones de diseño

PatronesArquitectónicos

Interacción de elementos entre niveles de Arquitectura de Información.

Entrenemosel ojo de diseñadorEnumeren 6 patrones de diseño que puedan reutilizar.

Web responsiveUn sitio web responsivo es aquel que se adapta a los formatos de pantalla de los diferentes dispositivos (desktop, tablet, mobile).

Supone un sitio web “distinto” desde lo estructural, según sea la pantalla en la que se esté visualizando nuestro sitio.

Las Media Queries son puntos de quiebre que se colocan en las hojas de estilo CSS para indicarle al navegador cómo se debe comportar la estructura visual del proyecto al alcanzar determinadas resoluciones de pantalla. Son necesarios para el desarrollo responsivo y es útil considerarlos desde el inicio de la etapa de diseño.

Existen frameworks como Bootstrap o Foundation que proveen a los diseñadores una grilla (.psd / .ai) con el comportamiento de sus media queries basados en 5 breakpoints. De esta forma, los diseñadores pueden realizar sus diseños basados en resoluciones estandarizadas que luego se verán reflejadas en el proceso de maquetado.

Resoluciones y Media Queries

Resoluciones y Media Queries

Una grilla es una cuadrícula para maquetar el contenido de tu producto digital bajo unas guías básicas. Éstas darán estabilidad al diseño, alineación y homogeneidad.

Cada grid vertical se compone de dos cosas: columnas (cols) y calles (gutters).

Las columnas son las divisiones más amplias, mientras que las calles se definen como los espacios de igualdad entre las columnas. Incluso cuando una cuadrícula contiene columnas de diferentes anchos de las anchuras de las calles suelen ser estáticas.

Grillas

Grillas

Grillas

Grillas

Modelo de cajasTal como vimos en el experimento, en el desarrollo web el modelo de caja CSS se refiere a cómo se modelan los elementos HTML en los motores de los navegadores y cómo las dimensiones de esos elementos HTML se derivan de las propiedades CSS.

Es un concepto fundamental para la composición de páginas web HTML.

AccesibilidadLa accesibilidad aborda las experiencias de usuarios equivalente para las personas con discapacidad, condiciones relacionadas con la edad y también usuarios inexpertos, con conexiones lentas y con dificultades con el idioma. Las cuales deben de percibir, comprender, navegar e interactuar con sitios web y otros productos digitales sin barreras.

Prestar atención a que los colores y tamaños tipográficos sean aptos para todos es tan importante como los textos alternativos.

Entrenemosel ojo de diseñador

Ejemplo 1

Ejemplo 2

Ejemplo 3

Ejemplo 4

Unidades de medidaLas unidades de medida que se deben emplear para diseñar son los pixels.

Los software de edición vectorial permiten emplear los puntos (pt) para los textos, pero serán traducidos como pixels (px) al momento de realizar la maqueta o prototipo.

La unidad mínima es 1 pixel, con lo cual todos los elementos tienen que tener definidas sus medidas de forma precisa en números redondos, sin utilizar decimales.

ImágenesEn la etapa de diseño, se pueden emplear tanto imágenes vectoriales como bitmap. Las imágenes deben estar a tamaño final (escala 1:1), en pixeles con la medida exacta para cada media query.

Sin embargo, junto con los bocetos, al momento de entregarle los archivos al maquetador, se deberán proporcionar las imágenes originales empleadas sinmodificación de resolución y tamaño. Esto se debe a que en proyectos responsivos, las imágenes se comportan de modos diferente y contar con las originales resulta de mayor utilidad.

Las imágenes deben estar en espacio RGB y a 72 PPI

.gifSe lo utiliza para generar imágenes bitmap animadas, con resultados de baja calidad. Al igual que el png, también soporta canal alpha, aunque por lo general se genera un “halo” de píxeles blancos.

Formatos de imagen bitmap

.jpg/.jpegSe emplea mayormente para imágenes de tono contínuo o medios tonos con fotografías.Permite diferentes compresiones con pérdida de calidad y no soporta canal alpha (transparencias)

.pngAl igual que el .jpg se emplea para imágenes fotografícas, pero con laventaja que soportatransparencias.También se lo puede emplear para imágenes de colores plenos, como logos o gráficos.

.webpFormato de Google que ofrece compresión con pérdida de información como JPG, transparencia(como PNG y movimiento como GIF, pero con mejor compresión (¡hasta un 90%!)

Formatos de imagen vectorial

.svgDel inglés, scalable vector graphics. Se lo emplea para generar imágenes vectoriales como logos, iconos y objetos mayormente planosplenos. Soporta modificaciones a través de CSS y excelentevisualización y tiempo de carga en todos los dispositivos.

Modos de colorLos colores empleadores para el diseño deben tener valores RGB o HEXADECIMAL.

No obstante, un mismo color puede llegar a visualizar de forma desigual en diferentes dispositivos. Esto puede deberse a diferencias en los perfiles de color, caraterísticas de las pantallas, etc.

Esquemas de colorEs un conjunto predefinido de colores armonizados que puede aplicar a texto y objetos.

Web FontsEl uso de web fonts se generalizó a raíz de Google Fonts, catálogo de fuentes web libres de derechos (gratuitas).

Existen también otros catálogos gratuitos (dafont.com) y otros comerciales (MyFonts.com o AdobeFonts)

Existen cuatro tipos de webfont (TTF, WOFF, WOFF2, EOT) y es recomendable linkearlos todos para asegurar que en todos los navegadores se visualizan correctamente.

Para los maquetadores, Google Fonts incluso genera la línea de código necesaria para linkear de manera remota las tipografías en el proyecto.

¡Ahora te toca a vos!Descargá el set de wireframes y comenzá a diseñar tu producto digital.

TP3.zip