productos digitales trabajo práctico 3 diseñando · 2021. 6. 8. · apps es un programa que se...
TRANSCRIPT
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