Apuntes interfaces
Diseño UX/UI:
¿Qué es UI?
Las siglas corresponden a User Interface o interfaz de usuario. La Interfaz de Usuario se
refiere a la forma en que un producto se presenta visualmente a sus usuarios. Se trata de los
elementos gráficos y de la navegación que los usuarios interactúan en una aplicación o sitio
web, como botones, textos, imágenes, etc. El objetivo de la UI es hacer que el producto sea
atractivo y fácil de usar. Centrado en el dispositivo, ocurre en la pantalla.
¿Qué es UX?
Las siglas corresponden a User Experience o experiencia de usuario. La Experiencia de
Usuario se refiere a la forma en que un usuario percibe e interactúa con un producto. Se trata
de la percepción subjetiva de un usuario con respecto a la utilidad, facilidad de uso y
satisfacción que obtiene al utilizar un producto. El objetivo del UX es mejorar la satisfacción y
la lealtad del usuario al asegurarse de que el producto sea intuitivo, eficiente y satisfactorio.
Centrado en el usuario, ocurre delante de la pantalla.
Resumen de las dos:
En resumen, la UI es el aspecto visual y la UX es la forma en que se siente al usar el producto.
Ambas son importantes para crear un producto de calidad y deben trabajar juntas para lograr
una experiencia de usuario satisfactoria.
Origen UX:
Aunque el término UX es relativamente moderno (1995), se dice que sus orígenes podríamos
encontrarlos en la filosofía milenaria china Feng Shui (4000 AC). La práctica del feng shui
introduce al mundo el análisis de la arquitectura en términos metafóricos de “fuerzas
invisibles” que unen el universo, la tierra y la humanidad, lo que se conoce como qi. Habla de
“armonizar a todos con el entorno”, lo que suena muy similar a la experiencia del usuario.
Investigación UX:
La investigación UX (Experiencia de Usuario) es un proceso integral que se enfoca en
comprender las necesidades, motivaciones y comportamientos de los usuarios para mejorar
la experiencia que tienen al interactuar con un producto o servicio. La investigación UX se
utiliza para validar o refutar hipótesis y mejorar la calidad del producto antes de su
lanzamiento al mercado. Se debe realizar una segmentación correcta de su clientela
potencial: grupo de edad, los gustos personales, intereses, objetivos, motivaciones, etc.
Métodos más usados:
1. Entrevistas de usuarios (Consisten en conversaciones directas con los usuarios para
comprender sus necesidades, motivaciones y comportamientos)
2. Observación de usuarios (Se trata de ver a los usuarios interactuar con el producto en un
entorno natural para comprender su experiencia)
3. Encuestas y cuestionarios (Se pueden utilizar para recopilar datos de una gran cantidad
de usuarios de manera rápida y económica.)
4. Pruebas de usuario Métodos comúnmente utilizados (Se pide a los usuarios que realicen
tareas específicas en el producto y se observa su experiencia para identificar problemas
y oportunidades de mejora.)
5. Análisis de datos (Se utiliza para analizar grandes cantidades de datos de usuarios para
comprender tendencias y patrones.)
Definición del problema:
Definir un problema UX es un proceso crítico en el diseño de experiencias de usuario
satisfactorias. Aquí hay algunos pasos que se pueden seguir para definir un problema UX:
1. Identificación de la fuente: Esto puede ser a través de comentarios de los usuarios, datos
de registros de uso, resultados de pruebas de usuario, entre otros.
2. Análisis de la fuente: Una vez identificada la fuente, se deben analizar los datos y los
comentarios para entender el problema en detalle.
3. Formulación de la pregunta clave: Se formulan preguntas específicas para ayudar a
definir el problema. Por ejemplo, "¿Por qué los usuarios están abandonando el proceso
de compra en el paso 3?"
4. Creación de hipótesis: Se crean hipótesis basadas en los datos y los comentarios de los
usuarios para explicar el problema.
5. Validación de hipótesis: Se valida la hipótesis formulada a través de pruebas con
usuarios reales o simuladas.
6. Definición del problema: Una vez validadas las hipótesis, se puede definir el problema
con precisión. Por ejemplo, "Los usuarios están abandonando el proceso de compra en el
paso 3 debido a la falta de claridad en las opciones de envío disponibles".
7. Priorización del problema: Se prioriza el problema en función de su impacto en la
experiencia del usuario y la importancia para el negocio.
Persona UX:
¿Qué es?
Una Persona UX un arquetipo ficticio que representa a un grupo específico de usuarios de un
producto o servicio. Se crea a partir de la investigación de los usuarios y se utiliza para
personificar las necesidades, motivaciones y comportamientos de los usuarios durante el
diseño de un producto.
¿Cuál es el objetivo de crear Personas UX?
El objetivo de crear una persona UX es ayudar a los diseñadores y desarrolladores a tomar
decisiones informadas sobre cómo el producto debería funcionar y ser utilizado. Al tener una
comprensión clara de las necesidades y deseos de la persona UX, se pueden priorizar las
funciones y características del producto para satisfacer las necesidades de los usuarios
reales.
¿Qué deben incluir?
La información incluida en una persona UX puede incluir datos demográficos, motivaciones,
objetivos, desafíos y preferencias de los usuarios. También puede incluir detalles sobre cómo
los usuarios interactúan con productos similares y cómo les gustaría interactuar con el
producto en cuestión.
Utilizando las encuestas y nuestra investigación como base podemos proceder a definir
Personas. No deben definirse demasiadas, ya que esto no ayudará a acotar nuestro objetivo.
Lo ideal sería definir menos de 5.
Historia de las interfaces:
¿Qué es una interfaz?
Las Interfaces de Usuario (UI) son los puntos de interacción entre los usuarios y los sistemas
informáticos o software. Su función es permitir una comunicación efectiva, facilitando la
entrada de comandos y la presentación de información de manera comprensible y accesible.
Origen. De CLI a GUI:
CLI: Las interfaces de línea de comandos (CLI) fueron una de las primeras formas de
interactuar con las computadoras. A través de comandos de texto, los usuarios podían
controlar sistemas y aplicaciones.
GUI: Las Interfaces Gráficas de Usuario (GUI) introdujeron elementos visuales como ventanas,
botones y menús, transformando la forma en que interactuamos con las computadoras.
NLS oN-Line System: Desarrollado por Douglas Engelbart y su equipo en la década de 1960,
fue uno de los primeros sistemas interactivos que presentó la idea de ventanas, hipertexto,
videoconferencia y un ratón
Ordenadores (orden cronológico):
Blanco y negro:
1. Xerox Alto
2. Xerox 8010 Star (1981)
3. Apple Lisa Office System 1 (1983)
4. Apple MacIntosh
Color:
1. Amiga Workbench 1.0
2. Windows 1.0x (1985)
3. NexTSTEP/OPENSTEP 1.0 (1989)
4. Windows 95 (1995)
Sistemas operativos:
1. Windows 95 (1995) => Primer sistema operativo de Microsoft con una interfaz gráfica de
usuario nativa.
2. Mac Os System 8 (1997) => 256 colores e iconos isométricos (pseudo-3D)
3. KDE y GNOME => Estos son dos de los entornos de escritorio de código abierto más
populares para sistemas Linux, que proporcionaron interfaces gráficas más amigables y
atractivas a partir de la década de 1990.
4. Mac OS X (2001) => Presentado por Apple en 2001, Mac OS X estableció una interfaz
gráfica basada en Unix que influyó significativamente en el diseño de interfaces
modernas.
5. Windows XP (2001) => Windows XP fue una versión muy influyente que estableció
muchos elementos de diseño que persisten hasta el día de hoy.
Interfaces táctiles:
Revolución móvil: Con la proliferación de dispositivos móviles como teléfonos inteligentes y
tabletas, las interfaces de usuario se adaptaron a pantallas más pequeñas y táctiles. Esta
revolución móvil cambió la forma en que interactuamos con la tecnología en nuestra vida
cotidiana.
Las interfaces táctiles y gestuales permitieron a los usuarios interactuar de manera intuitiva
con sus dispositivos al tocar y realizar gestos. Estas interfaces revolucionaron la forma en que
interactuamos con la tecnología móvil.
Diseño de interfaces de usuario:
Diseñar una interfaz:
Una interfaz efectiva y bien diseñada no solo facilita la interacción, sino que también
enriquece la experiencia del usuario, maximizando la usabilidad y la accesibilidad. Al diseñar
una interfaz debemos tener en cuenta ciertas características que permitan crear una
experiencia óptima para el usuario. Además, hay algunas normativas clave, que abarcan
aspectos estadísticos, sociales, culturales, geográficos y académicos, que guían el desarrollo
de interfaces para garantizar su adaptabilidad y utilidad en diversos contextos.
Características principales:
1. Usabilidad: La interfaz debe ser fácil de usar y comprender para el usuario, permitiendo
una interacción eficiente y efectiva con el sistema. Esto implica una disposición lógica de
elementos, etiquetas claras, y un flujo intuitivo de acciones.
2. Accesibilidad: Debe ser accesible para todos los usuarios, incluyendo aquellos con
discapacidades. Esto implica considerar la compatibilidad con tecnologías de asistencia,
proporcionar descripciones alternativas para contenido multimedia y asegurar que sea
operable con diferentes dispositivos y navegadores.
3. Atractivo visual: La interfaz debe tener un diseño atractivo y estéticamente agradable.
Los elementos gráficos, colores, tipografía y disposición deben combinarse de manera
armoniosa para atraer la atención del usuario y generar una experiencia agradable.
4. Coherencia: Los elementos de la interfaz deben seguir patrones y reglas coherentes en
todo el sistema. Los colores, iconos, etiquetas y comportamientos deben mantenerse
uniformes para evitar confusiones y facilitar la navegación.
5. Retroalimentación: La interfaz debe proporcionar información oportuna y relevante al
usuario sobre las acciones realizadas. Esto puede incluir mensajes de confirmación,
errores o indicadores de progreso para mantener al usuario informado sobre lo que está
sucediendo.
6. Eficiencia: La interfaz debe permitir a los usuarios realizar sus tareas de forma eficiente y
rápida. Esto implica minimizar la cantidad de pasos necesarios para lograr un objetivo y
proporcionar atajos o métodos abreviados de teclado si es posible.
7. Intuitividad: La interfaz debe ser fácil de entender y utilizar sin la necesidad de
instrucciones detalladas o un aprendizaje extenso. Los elementos y acciones deben ser
intuitivos para el usuario promedio.
8. Navegabilidad: La interfaz debe estar diseñada de manera que permita una navegación
fluida y lógica a través de las diferentes secciones y funcionalidades del sistema. Debe
haber una estructura clara y organizada que guíe al usuario.
Prototipado UX:
Mapeo:
¿Qué es?
El mapeo UX es una técnica utilizada en el proceso de diseño de experiencia de usuario (UX)
que permite visualizar y comprender cómo los usuarios interactúan con un producto o
servicio en particular. Este proceso implica la creación de un mapa o diagrama que muestra
los diferentes puntos de contacto entre un usuario y un producto, incluyendo tanto los
momentos positivos como los negativos.
Tipos de mapeo:
1. Mapeo de experiencia: Este tipo de mapeo se enfoca en la experiencia total del usuario
con un producto o servicio, desde la primera vez que se enteran de su existencia hasta
después de haberlo utilizado.
2. Mapeo de flujo: Este tipo de mapeo se enfoca en los pasos que un usuario debe seguir
para completar una tarea específica en un producto o servicio.
3. Mapeo de emociones: Este tipo de mapeo se enfoca en las emociones y sentimientos que
experimenta un usuario en diferentes momentos de su experiencia con un producto o
servicio.
Objetivo:
El objetivo principal del mapeo UX es entender cómo los usuarios interactúan con un
producto o servicio, identificar áreas de mejora y desarrollar soluciones que mejoren la
experiencia de usuario. Este proceso es esencial para garantizar que un producto o servicio
cumpla con las necesidades y expectativas de los usuarios, y para asegurarse de que sea
intuitivo, fácil de usar y eficiente.
Ejemplo de mapeo de experiencia:
Proceso de compra en una tienda en línea
1. Selección de producto: El usuario selecciona el producto que desea y lo agrega a su
carrito de compras.
2. Revisión de carrito: El usuario revisa su carrito de compras y puede agregar o quitar
productos, así como seleccionar una dirección de envío.
3. Selección de método de pago: El usuario selecciona su método de pago preferido e
ingresa sus detalles.
4. Confirmación de compra: El usuario confirma su compra y recibe una confirmación por
correo electrónico.
5. Seguimiento de envío: El usuario puede seguir el estado de su envío y recibir
notificaciones sobre su entrega.
Importante: Diagramas de flujo. Apps para la creación de diagramas: Miro, Mural, Lucidchart
y Figjam.
Otro tipo de mapeos: Mapeo de empatía.
Wireframe: Es una representación visual básica y esquemática de un diseño de interfaz de
usuario (UI) que muestra los elementos estructurales de la interfaz sin detalles gráficos o
estilísticos.
El objetivo del wireframe es definir la estructura, organización y jerarquía de los elementos
de la interfaz de usuario, incluyendo los elementos de navegación, los campos de entrada de
texto, los botones y otros componentes interactivos. También puede mostrar cómo los
usuarios interactuarán con la interfaz, como a través de enlaces o botones de navegación.
Un sistema de diseño es una guía de estilo y diseño que incluye principios, pautas y
componentes para crear una experiencia de usuario coherente y consistente en una variedad
de plataformas y dispositivos. Los sistemas de diseño generalmente incluyen una biblioteca
de componentes de diseño modulares, estilos de texto y color, y una guía de estilo para el
diseño de interacciones, animaciones y microinteracciones.
Prototipado:
¿En qué consiste?
El prototipado UX es una técnica utilizada en el desarrollo de productos digitales para crear
una representación funcional de la experiencia de usuario. Es una forma de probar y validar
las ideas y soluciones antes de invertir tiempo y recursos en su desarrollo completo.
¿Para qué sirve?
Permite a los diseñadores validar sus soluciones con los usuarios antes de su lanzamiento al
mercado. También puede ayudar a identificar problemas y desafíos que no se hayan
considerado previamente, lo que permite a los diseñadores tomar medidas para resolverlos
antes de que sea demasiado tarde.
¿Cómo se hace?
El prototipado UX se puede realizar de diferentes maneras, desde bocetos en papel hasta
prototipos interactivos en alta fidelidad que pueden ser probados por los usuarios. Al crear
un prototipo, los diseñadores pueden experimentar con diferentes soluciones y evaluar su
impacto en la experiencia de usuario.
Mirar plataforma: Mobbin
La imagen digital:
¿Qué es una infografía 2D?
La palabra infografía viene del inglés “information” + “graphics”, por lo que se puede deducir
muy fácilmente que se trata de representaciones gráficas que pretenden explicar
información combinando imágenes y gráficos con descripciones, interpretaciones y datos. Su
objetivo es hacer que con un vistazo podamos captar el mensaje que se quiere comunicar,
permitiendo simplificar ideas complejas para que sean fáciles de entender, asimilar y
recordar.
Tipos de gráficos digitales:
Gráficos vectoriales: La imagen vectorial se basa en fórmulas matemáticas, y no se
dividen en unidades mínimas de información como los píxeles, sino en manchas de color
y líneas. Se construyen a partir de vectores, que son objetos definidos por una serie de
puntos o nodos que pueden modificarse para dar una u otra forma a la imagen final.
Programas de gráficos vectoriales: Adobe Illustrator, Affinity Designer, Corel Draw,
Linearity Curve, Autocad, Adobe Animate, Inkscape...
Gráficos de mapa de bits: Se trata de aquellas imágenes que se forman a partir de
puntos, llamados píxeles dispuestos en un rectángulo o tabla, que se denominada raster,
por eso también se habla de imágenes rasterizadas para hablar de imágenes de mapa de
bits. Cada píxel contiene la información del color, la cual puede o no contener
transparencia, y ésta se consigue combinando el rojo, el verde y el azul.
Una imagen digital está formada por una matriz de píxeles ( a x b x c), donde a y b
representan la anchura y altura y c es la profundidad de color o profundidad de bit,
podríamos decir que es la tercera dimensión de la matriz, la que permite que cada píxel
pueda tener un número determinado de colores distintos.
La mínima información que maneja un ordenador es el bit, un valor binario (0 o 1) y a 8 de
estos valores (bits) se les llama byte (por ejemplo: 00101011). Mediante estos valores se
especifica el tono de cada píxel. Así pues, dependiendo de la cantidad de bits de información
que contenga cada píxel, tendremos más o menos profundidad de color y, por tanto, una
paleta más amplia y mayor semejanza de éste con la realidad.
Programas de gráficos de mapa de bits: Adobe Photoshop, Affinity Photo, Gimp, Krita, Clip
Studio Paint, Procreate...
Vectores Mapa de bits
Resolución infinita. Al estar basados Calidad fija. Si se amplían o reducen se
en fórmulas matemáticas pueden produce una pérdida de calidad
ampliarse o reducirse sin que afecte a porque los píxeles que la componen se
la calidad. ven obligados a multiplicarse o
Consiguen almacenar información dividirse.
compleja ocupando poco espacio. Consiguen representar fielmente la
Grandes limitaciones para crear realidad.
imágenes realistas. Son la mejor opción para fotografías
debido al alto nivel de detalle que
pueden tener.
Formatos de archivo:
1. Adobe Illustrator => .ai: Formato nativo de Adobe Illustrator basado en el lenguaje
PostScript.
2. PostScript encapsulado => .eps: Formato estándar de Adobe para gráficos vectoriales
PostScript.
3. Scalable vector graphics => .svg: Formato de gráficos vectoriales bidimensionales, tanto
estáticos como animados.
4. Graphic Interchange Format => .gif: Mapa de bits con paleta de color indexado pensado
para la web.
5. Joint Photographic Experts Group => .jpeg/.jpg: Formato estándar de mapa de bits RGB
con nivel de compresión/calidad controlables.
6. Portable Network Graphics => .png: Soporta transparencias y soporta colores de 8-bits, y
también de 24-bits, como JPG.
7. Portable Document Format (Formato Portátil de Documento) => pdf: Usado para
mostrar documentos en la forma electrónica independiente del software, hardware o
sistema operativo donde se visualiza.
Modos de color:
Escala de grises: Es capaz de representar el negro, el blanco y una completa escala de
grises. Es el formato adecuado para trabajar con imágenes en blanco y negro, y para
trabajos en escalas de grises.
RGB: Colores luz - Sistema aditivo Contiene 24 bits por píxel distribuidos en 3 valores de
8 bits para cada uno de los colores luz primarios:
1. R (Red/Rojo)
2. G (Green/Verde)
3. B (Blue/Azul)
La suma de todos los colores luz da lugar al blanco y la ausencia de todos los colores al
negro (la oscuridad). Es el sistema de color que utilizan las pantallas (un monitor de
ordenador, un televisor, un proyector de vídeo, un móvil).
CMYK: Colores pigmento - Sistema sustractivo Al preparar imágenes para impresión es
necesario traducir los 3 valores RGB a las cuatro tintas que se usan en cuatricromía:
1. Cyan/Cian
2. Magenta
3. Yellow/Amarillo
4. Black/Negro
Este método se basa en la mezcla de pigmentos para conseguir colores. Aunque
teóricamente la mezcla de los 3 primarios sumaría negro, la realidad es que es un color gris
pardusco. Por eso se añade negro. La impresión de esta manera se llama cuatricomía.
Resolución: La resolución de la imagen es el número de píxeles mostrados en la imagen por la
unidad de longitud. Se mide en pixels por pulgada (ppp).
Baja resolución (para monitores) =72 ppp.
Alta resolución (para impresión)=300 ppp.
Entonces:
En una imagen de 1 pulgada a alta resolución tenemos 300*300=90000 pixels.
En una imagen de 1 pulgada a baja resolución tenemos 72*72=5.184 píxeles. Por lo tanto a
mayor resolución —más píxeles—más definición– mayor tamaño de archivo.
Importante: Mirar presentación de “Pictogramas” y “Orden en Figma”.
Orden en Figma:
Nombres de archivos:
Podemos elegir el orden en el que se muestran los archivos en Figma. Teniendo esto en
cuenta, una estrategia puede ser empezar todos los archivos escribiendo la fecha de creación
y después un nombre descriptivo: 2023/12/15 Catálogo
Portadas:
La mejor manera de localizar rápidamente los archivos de Figma crear siempre una portada
para cada uno de nuestros archivos en lugar de dejar que se cree una portada por defecto
Colores según estado:
Una estrategia de orden es utilizar colores distintos en las portadas según su estado del
proyecto. Para facilitar esta tarea existen plugins como Cover Status, aunque hay otros
Optimización de imágenes:
¿Por qué optimizar imágenes?
Es común cometer el error de incluir en el sitio web fotografías enormes, muy pesadas y que
no tienen el formato de imagen correcto. Esto hace que la web tarde mucho en cargar y
además, que el servidor se llene muy rápido, teniendo que contratar constantemente más
espacio. Con los prototipos y cualquier trabajo pensado para la web pasa lo mismo
Tamaño:
Imágenes de ancho completo, que abarcan toda la pantalla: Ancho de 2560px.
Imágenes que ocupan la mitad de la pantalla: Ancho de 1280px.
Imágenes más pequeñas destinadas a visualizarse en tamaños reducidos en la web: Ancho de
600px
En sitios web con contenedores más estrechos, como aquellos con un ancho de 1600px, las
imágenes no requieren dimensiones tan amplias. En este escenario, el ancho máximo
recomendado para las imágenes sería de 1600px, y para aquellas que ocupan la mitad del
contenedor, un ancho ideal sería de 800px.
Formato:
Imágenes vectoriales Imágenes de mapa de bits
Escalables Pueden mostrar una amplia gama de
colores, detalles y texturas.
Tamaño de archivo más pequeño Ideales para fotografías y otras imágenes
que requieren alta fidelidad visual.
Ideales para logotipos, gráficos y otros No escalables
elementos de diseño que deben ser
precisos y nítidos en cualquier tamaño
No son ideales para fotografías o imágenes Tamaño de archivo más grande
que requieren una alta fidelidad visual, ya
que no pueden representar detalles finos o
degradados de color.
No pueden mostrar texturas, sombras o No son ideales para gráficos y otros
degradados de color complejos. elementos de diseño que requieren una
alta precisión visual y nitidez en cualquier
tamaño.
Mapa de bits:
Gif
Los archivos GIF son ideales para imágenes animadas simples, como memes y avatares.
Pueden mostrar hasta 256 colores y admiten transparencia en partes de la imagen. Sin
embargo, debido a su limitada gama de colores, no son adecuados para imágenes complejas o
fotografías. También pueden tener un tamaño de archivo más pequeño que otros formatos, lo
que los hace útiles para páginas web con tiempos de carga rápidos
PNG
Los archivos PNG son excelentes para imágenes con áreas transparentes o fondos complejos.
Pueden mostrar millones de colores y admiten transparencia en partes de la imagen, lo que
los hace ideales para gráficos de alta calidad, como logotipos y gráficos de diseño. Sin
embargo, los archivos PNG suelen ser más grandes que los archivos JPEG, lo que puede
afectar el tiempo de carga de una página web.
JPEG
Los archivos JPEG son excelentes para fotografías y otras imágenes complejas. Pueden
mostrar millones de colores y tienen una calidad de imagen superior a la de los archivos GIF y
PNG. Los archivos JPEG son relativamente pequeños y son ideales para su uso en páginas
web, pero a veces pueden comprometer la calidad de la imagen debido a la compresión.
Tampoco admiten transparencia, lo que puede ser un problema si se necesitan partes de la
imagen para ser transparentes.
WebP
Este es un formato de archivo de imagen desarrollado por Google que utiliza una compresión
más avanzada para reducir el tamaño del archivo sin comprometer la calidad de la imagen.
Los archivos WebP se utilizan principalmente para imágenes en línea y son compatibles con
la mayoría de los navegadores web modernos. El formato admite imágenes con transparencia
y ofrece una mejor calidad de imagen con un tamaño de archivo más pequeño en
comparación con otros formatos populares como JPEG y PNG.
Vectoriales:
Este formato de archivo se utiliza principalmente para gráficos vectoriales escalables que se
pueden ampliar sin perder calidad. Los archivos SVG son ideales para iconos, logotipos y
otros elementos de diseño. También son compatibles con la mayoría de los navegadores web
modernos.
Resolución:
Para las imágenes que se utilizan en una web bastará con una resolución de 72ppp
Acciones de Photoshop:
1. Hacemos clic en el icono “Crear acción nueva” del panel “Acciones” (Ventana>Acciones).
2. A continuación se abre la ventana Acción nueva. Aquí ponemos el nombre de la acción, la
colocamos en un grupo.
3. Es el momento de dar al botón Grabar. Todo lo que hagamos a partir de ahora quedará
grabado, así que es importante tener cuidado de no hacer nada indebido o equivocado.
4. Cuando terminemos damos al icono Detener grabación.
TinyJPG:
Hay varias herramientas online que permiten optimizar imágenes. “TinyJPG reduce el tamaño
de archivo de tus imágenes JPEG. Cada imagen cargada se analiza para aplicar la codificación
JPEG óptima posible. Según el contenido de tu imagen, se elige una estrategia óptima. El
resultado es una imagen de calidad sin desperdiciar almacenamiento ni ancho de banda.
TinyPNG:
De igual manera que TinyJPG, TinyPNG reduce los tamaños de archivo hasta en un 80% de
archivos PNG sin sacrificar calidad, lo que resulta en cargas de página más rápidas.
SVGOMG:
SVGOMG ofrece varias opciones para limpiar y comprimir archivos SVG. Además, permite
limpia, eliminar, fusionar y minimizar archivos.
Kit UI:
Tipografía:
Tamaño:
El tamaño del texto de un párrafo suele moverse entre 16 y 20 pt. Se recomienda que el alto
de línea (line height) o interlineado, sea entre 1,3 y 1,6 veces el tamaño escogido.
Ejemplo: Cuerpo de texto 19 pt Alto de línea 25 pt (19 x 1,3 = 24,7)
Ancho de párrafo:
Se recomienda que el ancho de párrafo esté entre los 45 y los 75 caracteres, aunque es
recomendable definirlo en ancho de píxeles (400, por ejemplo) para que sea más fácil a la
hora de programar.
Escala tipográfica:
Es necesario definir una escala tipográfica. Hay varios ratios habituales (ver enlace del título).
Cuanto más grande es el número, mayor es la diferencia entre los tamaños. Para titulares muy
grandes y contrastados, puedes usar Perfect Fourth o Augmented Forth. Para algo menos
contrastado, puedes usar Major Third, por ejemplo
Color:
El color tiene significados simbólicos distintos en cada cultura, sin embargo hay algunas
respuestas que son casi universales.
“Jay Neitz, experto en visión del color, explica que, mucho antes de que los seres vivos pudieran
distinguir los colores del arcoíris, los primeros organismos desarrollaron receptores para distinguir el
tono amarillento o azulado de la luz. Estos colores tienen una longitud de onda diferente. Los seres
humanos todavía poseemos receptores (un fotopigmento llamado melanopsina) que nos ayudan a
distinguir los momentos del día. Poder distinguir la noche del día es una facultad esencial para
innumerables seres vivos.”
“El diseño como storytelling”, Ellen Lupton
En CSS los colores pueden representarse utilizando ciertas palabras clave en inglés, como
red, orange, black, blue, etc.
Colores hexadecimales:
Los colores hexadecimales son una forma de representar colores mediante códigos con
combinaciones de números y letras. Se usa ampliamente en códigos HTML, CSS y otros
entornos digitales. En el sistema hexadecimal, los colores se representan mediante seis
dígitos alfanuméricos, que van desde 0 a 9 y de A a F. Cada par de dígitos representa un
componente de color específico: los primeros dos dígitos indican la intensidad de el
componente roja, los siguientes dos la verde, y los últimos dos la azul. Este es conocido como
el modelo RGB (Rojo, Verde, Azul). Por ejemplo, el código hexadecimal "#FF0000" representa
el color rojo puro, ya que el componente rojo está configurado al máximo (FF en
hexadecimal), mientras que los componentes verde y azul están en su mínimo (00 en
hexadecimal).
Se escriben precedidos de #. Podemos utilizarlos en cualquier programa de diseño y también
en CSS
RGB (red, green, blue) En CSS también podemos declarar los colores en RGB entre paréntesis
de 0 a 255 para cada valor de rojo, verde y azul. Ejemplo: RGB (255, 255, 255)
RGBA (red, green, blue, alpha) Esto es particularmente útil cuando queremos añadir
transparencia. Ejemplo: RGBA (255, 99, 71, 0.5)
Colores HSL:
También podemos utilizar HSL. Las siglas son parámetros: H de hue (tono), S de saturation
(saturación) y L de lightness (luminosidad) hsl(120,100%,50%)
Retículas:
Pueden cambiar dependiendo de las características del proyecto, pero los estándares suelen
ser estos: Escritorio: 12-16 columnas Tablets: 8 columnas Móviles: 4 columnas
Exportar para diferentes factores de escala
Un punto (pt) es una medida de espacio abstracta, que depende de la resolución de la
pantalla. La explicación más simple es que en una resolución de 1px (@1x), 1pt = 1px. Con el
primer iPhone la equivalencia era sencilla. Con el tiempo mejoró la tecnología y las pantallas
de los dispositivos Apple pasaron a ser de Retina (@2x) o Super Retina (@3x). En la práctica
esto significa que hay más píxeles por pulgada (pixeles per inch, ppi) y por lo tanto mejor
resolución. Por ejemplo, cuando diseñas para el iPhone X (@3x), el diseño tendrá tres veces
más píxeles.
Retícula de 8pt:
Utilizar un número par de forma consistente en tu sistema te hará mantener con mayor
facilidad la coherencia y equivalencia entre los diferentes tamaños. El 8 parece ser la medida
justa para obtener variedad de espaciados (8, 16, 24, 31, 40…) sin producir decimales.
Además, Apple y Android recomiendan utilizarla en toda su documentación. También hay
autores que recomiendan la retícula de 4 pt para definir el sistema tipográfico. Al ser la mitad
de 8 puede combinarse perfectamente con la de 8 pt.
Diseño adaptativo:
El diseño adaptativo o responsivo es una técnica de diseño web que busca proporcionar una
experiencia de usuario óptima en una amplia gama de dispositivos y tamaños de pantalla. El
diseño responsivo utiliza un único conjunto de código y se adapta dinámicamente según las
características del dispositivo en el que se visualiza.
Importancia del diseño adaptativo:
1. Experiencia de usuario coherente: El diseño responsivo asegura que los usuarios tengan
una experiencia coherente, independientemente del dispositivo que utilicen. Esto
contribuye a la fidelidad del usuario y a una percepción positiva de la marca.
2. Optimización para motores de búsqueda (SEO): Los motores de búsqueda valoran sitios
web que ofrecen una experiencia de usuario consistente. Un diseño responsivo puede
mejorar el rendimiento en los resultados de búsqueda y la visibilidad en los motores de
búsqueda.
3. Ahorro de tiempo y recursos de desarrollo: Al desarrollar un solo conjunto de código que
se adapta a diferentes dispositivos, se ahorran tiempo y recursos en comparación con la
creación de múltiples versiones específicas para cada dispositivo.
4. Adaptabilidad a nuevos dispositivos: A medida que surgen nuevos dispositivos con
diferentes tamaños de pantalla, un diseño responsivo facilita la adaptación sin necesidad
de rediseñar por completo el sitio.
Breakpoints:
Los puntos de ruptura son valores específicos de ancho de pantalla en los cuales el diseño de
una interfaz web cambia para optimizarse a un dispositivo particular. Estos puntos de ruptura
actúan como umbrales donde se aplican reglas de estilo diferentes para garantizar una
experiencia de usuario óptima en pantallas de distintos tamaños
Los breakpoints estándar son:
Móviles: entre 320 y 480 píxeles.
Tablets: entre 768 y 1024 píxeles.
Pantallas grandes: más de 1200 píxeles.
Media queries:
Los puntos de ruptura se implementan comúnmente mediante el uso de media queries en
CSS. Estas consultas permiten aplicar estilos específicos según las características del
dispositivo, como ancho de pantalla, altura, resolución, etc. En Figma no tenemos Media
Queries, pero podemos utilizar algunas herramientas y trucos que veremos más adelante
para poder prototipar de forma adaptativa.
Textos:
Unidades relativas
Se utilizan unidades relativas como porcentajes y EMs para establecer tamaños y márgenes,
permitiendo que los elementos se escalen proporcionalmente en diferentes tamaños de
pantalla. Como en Figma no tenemos esto existe un Plugin llamado Text Resizer
Puedes utilizar la opción Fill para que los textos no se desborden al adaptar el Auto-Layout
Máscaras y componentes:
Aparte del uso del auto-layout, emplea máscaras y recortes para definir áreas específicas de
las imágenes que deben mostrarse en diferentes tamaños de pantalla. Esto es especialmente
útil para imágenes de fondo.
Componentes y variantes:
Puedes convertir los diseños en componentes y crear variantes para diferentes tamaños de
pantalla. Así, podrás cambiar fácilmente entre las variantes según las necesidades de diseño.
Importante:
La actualización de Figma de 2023 incluye min/max width y auto-layout wrap, mejorando la
creación de diseños responsivos para alinearse mejor con las expectativas de los
desarrolladores.
Pasos:
Crear el Frame de Auto-Layout (Seleccionar elementos y presionar Shift + A) Especificar
anchura máxima y mínima (Min-width y Max-Width) Seleccionar la opción Wrap
Una vez configurado el Auto-Layout de cada componente y de todos los componentes
juntos, selecciona todos los elementos dentro del Auto-Layout y elige la opción Fill
Container
Recuerda que para que los textos no se desborden al adaptar el Auto-Layout elige la
opción Fill
