Cómo entender la resolución e imágenes en el diseño de interfaz de usuario

1. Introducción: Hola. Soy Christine, diseñadora de UX UI Y hoy, vamos a echar un vistazo a cómo funcionan las imágenes en el diseño de UI. Para obtener realmente los mejores resultados en línea es crucial entender primero la resolución de la pantalla. Por lo que esta clase se configura en dos partes. Primero, desmitificaremos la resolución de la pantalla, entenderemos realmente lo que significa, por qué usamos puntos y no píxeles, y en qué tamaños de pantalla usamos realmente para basar nuestro diseño Comprender las resoluciones de pantalla será una gran ventaja para todos los aspectos del diseño de su ojo, especialmente cuando se trata de entregar su diseño al desarrollo Una vez que hayamos bajado lo básico, entonces veremos las imágenes, qué tipo de imágenes hay, dónde encontrarlas y cómo manejarlas para que tu diseño brille. Este es un curso por aprendizaje. 2. Resolución de punto, Pixel y pantalla: Hablemos sobre los puntos de píxel y la resolución de la pantalla para entender qué tamaño necesitan configurar tus diseños. Primero entendamos qué son los píxeles. Bueno, los píxeles son básicamente los puntitos de los que está hecha una imagen. Son el elemento más pequeño de una imagen. Tenga en cuenta que solo las imágenes de los signos de píxeles. La tipografía y los fondos o botones son vectores. Eso significa que están hechos de ecuaciones matemáticas. Es por eso que pueden escalar hacia arriba y hacia abajo a cualquier tamaño, y la resolución de la pantalla realmente no les molesta en absoluto. Sin embargo, los píxeles no son realmente una medida confiable porque dependen de la resolución de la pantalla, el llamado DPI o también conocido como PPI, píxeles por pulgada. Esto mide cuántos píxeles hay en 1”. Cuanto más alto es un DPI de pantalla, más píxeles se abarrotan dentro de esa pulgada, y así más nítida es la Entonces, como puedes ver, una medición, por ejemplo, o cuatro píxeles serían muy diferentes en tamaño físico en diferentes resoluciones de pantalla. El DPI está determinado por el dispositivo de un usuario, lo que no lo sabrás de antemano y tampoco puedes influir en él. Entonces lo que necesitamos es algún tipo de medición del espacio independientemente de la resolución de la pantalla, pero aún en relación con los píxeles, y aquí es donde entran los puntos. Pero comencemos por el mismo principio. 3. Resolución: por qué diseñamos a 1x: En los viejos tiempos un punto igual bm pixel y la vida era bastante simple. En muchas pantallas, en realidad este sigue siendo el caso hoy en día. Sin embargo, la resolución de la pantalla fue mejorada primero por Apple con la pantalla retina. De pronto, dentro del mismo espacio físico, cabría cuatro píxeles en lugar de uno. Duplicé el DPI manteniendo el mismo tamaño de pantalla física. Esto fue aún más lejos con pantallas como la súper retina en el iPhone 11 Pro, por ejemplo, que triplicó el DPI Esto significa que el píxel ya no era una forma confiable de medición, ya que significaría cosas muy diferentes en diferentes pantallas. Esta es la razón por la que se nos presenta el punto para tener una medida como tamaño físico de su diseño independientemente de la resolución de la pantalla. Por cierto, solo estoy usando iPhones aquí como ejemplo, pero esto sería exactamente lo mismo para el diseño de escritorio Ahora bien, la pregunta más común y probablemente esté en tu mente también es, entonces cuál es el tamaño que sí uso para configurar mi diseño. El más grande posible? No. Nosotros siempre y no puedo enfatizar esto lo suficiente, siempre diseñamos siempre en el llamado one x Esto puede sonar un poco confuso, pero te voy a mostrar por qué hacemos eso. Entonces tomemos como ejemplo la retina del iPhone cuatro. Entonces para este grano, al igual que para cualquier otro, podemos obtener las mediciones de píxeles, y podemos obtener las mediciones de punto. Recuerda que a dos x, un punto se verá así en píxeles. Entonces, para configurar nuestros diseños, siempre usamos las medidas de punto y no las medidas de píxeles. De esta manera, configuramos nuestro diseño automáticamente en un punto igual a un píxel, y estamos diseñando en la llamada X. En todos los programas de interfaz de usuario como Figma o Sketch, tienes mesas de trabajo preestablecidas que puedes usar, y notarás que todas están configuradas a una X listas para que 4. Resolución : obtener los mejores resultados en todas las resoluciones: Entonces, ¿cómo diseñar a una X aún garantiza una buena calidad en todas las resoluciones de pantalla Entonces este es nuestro diseño configurado en una X donde un punto equivale a un píxel. Así que elementos como los botones tipográficos, los iconos basados en vectores y ilustración se adaptarán Son los llamados elementos vectoriales, y eso significa que están hechos de ecuaciones matemáticas. Entonces en el fondo, simplemente escalan hasta cualquier tamaño necesario. La pantalla básicamente duplica el píxel por sí mismo detrás de escena, ¿ y no necesitas hacer nada? Eso es lo mismo para el espaciado, por cierto. Entonces, digamos que tienes un espaciado de 40 píxeles en tu one x, que automáticamente escalará hasta el mismo tamaño físico en tu pantalla retina. Así que absolutamente nada de qué preocuparse. Probablemente escucharás a mucha gente hablando de espaciado de 40 píxeles o fuente de 16 píxeles como acabo de hacer. En realidad significan puntos porque a una X, es lo mismo. Así que no te confundas con esto. No obstante, recuerda que las imágenes están hechas puramente de píxeles, por lo que no escalan automáticamente. La mayoría de las veces, se almacenan en un archivo en el servidor y luego literalmente son el servidor y luego literalmente arrastrados por el código cuando lo necesitamos. Por lo que el código sólo puede tirar de lo que usted proporciona. Entonces, si solo proporciona una imagen de una x para una resolución de dos x, se verá muy borrosa en una pantalla retina Entonces, lo que haces es que proporciones esas imágenes en una resolución de uno, dos x y tres x. El código se configura de tal manera que puede captar la resolución de la pantalla y luego simplemente tirar de la imagen correcta. Esta es también la razón por la que tienes este pequeño sufijo de dos x y así sucesivamente en el nombre de tu imagen para identificar el tamaño correcto para la resolución de pantalla correcta Por eso también es tan importante usar un software de interfaz de usuario adecuado como Figma o sketch que te permita hacer eso y no algo como photoshop No me malinterpretes. Me gusta mucho el photoshop, pero está hecho para edición de fotos y no para configurar diseño porque no podrás exportar tus imágenes a un tamaño mayor después. Entonces, con el software de diseño adecuado, esto es súper fácil. Aquí, estoy en Figma, todo lo que hago es escoger mi imagen, y luego en el lado derecho aquí, agrego puerto Y verás que comenzará en una x. Voy a elegir un JPEG ya que esto no tiene transparencia, así que JPC va a estar bien Y luego a medida que añades plus, puedes agregar más exportaciones. Todo lo que hago, voy a cambiarlos a KPC también, y se puede ver que automáticamente agregó un a dos x para los dos tiempos para la resolución de retina, y tres x cuatro e incluso mayor resolución El X no suele tener ningún sufijo, así que puedes dejarlo así Entonces puedes simplemente dar clic aquí en Exportar y exportaría esas imágenes en el archivo que elijas. Lo mejor en Figma es que ni siquiera necesitas exportarlos todos tú mismo porque si das acceso a tu equipo de desarrollo en Figma, entonces ellos solo pueden escoger esas imágenes y pueden exportarlas en cualquier tamaño que deseen 5. Resumen de resolución: Vamos a resumir. Utilizamos el punto. El punto es una medida del espacio independientemente de la resolución de la pantalla. Y siempre diseñamos a una x. Aquí es donde un punto equivale a un píxel. espaciado tipográfico y todos los elementos basados en vectores se adaptan a una mayor densidad de píxeles por defecto, lo que no necesita preocuparse por Las imágenes deben exportarse o ponerse a disposición para su exportación para mayores resoluciones a su equipo de desarrollo. 6. Imágenes en línea: SVG JPG y PNG Cuando y por qué: En este video, vamos a hablar sobre las imágenes en diseño de la interfaz de usuario y cómo colocarlas y manejarlas. Cuando se trata de imágenes en línea, le pueden dar tres formatos de archivo diferentes. El primer formato sería SVG. SVG son para archivos vectoriales, por lo que sería algo así como logotipos o iconos Las imágenes no se pueden almacenar como SVG ya que no están basadas en vectores, sino basadas en píxeles Para las imágenes, la primera opción siempre sería un JPEG. A menos que tu imagen tenga transparencia, entonces la guardarías como PNG. También usarías un PNG si quieres guardar algo así como un círculo o algo que básicamente no sea una imagen rectangular porque entonces el fondo tendría que ser transparente. En cuanto al tamaño del archivo, también funcionaría en el orden aquí presentado. SVG es siempre el más pequeño. Si puedes guardar tus imágenes como SVG, pero eso solo funciona si el vector se basa, como por ejemplo, iconos. A veces se ve un SVG y la misma imagen que un PNG. Esto se debe a que el PNG por el presente será una imagen alternativa. Si estás tratando con imágenes y fotografías estándar, entonces JPG será tu primera opción. Esto siempre será más pequeño que un PNG. Por lo tanto, solo eliges un PNG si necesitas la transparencia. 7. Imágenes en línea: dónde encontrar imágenes: Déjame mostrarte algunos lugares donde puedes encontrar imágenes que puedes usar en tu diseño de interfaz de usuario. Es importante saber que necesitas poseer los derechos de cualquier imagen que estés usando en tu diseño, o necesitas encontrar las llamadas imágenes libres de derechos. No puedes simplemente elegir cualquier imagen en Internet y simplemente ponerla en tu sitio. Es muy importante que respete esto porque podría haber consecuencias legales. Mi página absolutamente favorita para las imágenes es Splash. Splash no sólo tiene una gran selección de fotografía, sino que también es libre de derechos. Eso significa que puedes usar todas esas imágenes de forma gratuita. En splash, puedes simplemente buscar una imagen exacta que estás buscando, o tienes estas bonitas categorías aquí arriba. Entonces, por ejemplo, vamos a saltar a la salud y el bienestar, y luego encontrarás cosas realmente, realmente geniales. Además, si buscas imágenes de fondo grandes, esto es genial si vas a su sección de naturaleza, por ejemplo, puedes ver que estás teniendo fotos realmente, realmente geniales para elegir. Unsplash también proporciona enchufe para boceto y para Figma. Así que es realmente genial trabajar en esto, entonces puedes simplemente buscar en toda la base de datos unsplash directamente y poner las imágenes allí De lo contrario, simplemente haga clic en aquí, descargue su imagen, y luego simplemente podrá insertarla en su diseño. Pixabay y píxeles son dos páginas más que funcionan igual que Unsplash A pesar de que están libres de derechos, todavía hay algunas reglas, siempre asegúrate de verificar la licencia que te dirá exactamente lo que está permitido y algunas cosas que debes considerar si quieres usar esas imágenes. A veces podrías estar buscando algo un poco más específico o más exclusivo. Entonces te recomiendo echar un vistazo a Shutterstock o a la foto de iStock Tienen una selección realmente genial por un precio realmente justo. Por cierto, la mayoría de esas páginas que acabo de mostrarte también tienen archivos de ilustración y video. Si tienes un buscando ilustración en particular, entonces quiero recomendarte una página llamada Blush que me encanta absolutamente Esto es de Pablo Stanley y es absolutamente increíble. Viene con un conector Figma y un boceto, por lo que puedes usarlo muy fácilmente directamente en tus archivos de diseño Y lo que hace Blush, es que tiene una selección de diferentes ilustradores, y luego puedes mezclar y combinar Eso es por ejemplo, salta aquí. Entonces puedes ver que hay diferentes elementos, y luego en tu archivo de diseño, puedes simplemente juntarlos, puedes cambiar los colores, y puedes hacer ilustraciones realmente, realmente geniales. 8. Imágenes en línea: colocar las imágenes y la proporción de Aspecto: Echemos un vistazo a cómo se deben colocar las imágenes en tu diseño. Puedes colocar tus imágenes dentro la arena o como una imagen de ancho completo fuera de la cuadrícula Puedes unir tantas filas de la cuadrícula como desees. Entonces aquí, por ejemplo, me uno a dos, pero luego asegúrate de que no lo coloques en la cuneta si estás colocando la siguiente imagen o algún texto o cualquier otro elemento Siempre que tenga sentido, recomiendo usar una relación de aspecto para tus imágenes. relación de aspecto es la relación entre el ancho y el alto de la imagen. No es necesario, pero me gusta bastante usar una relación de aspecto de 16 a nueve. Y esto es bastante común. Por ejemplo, esta diapositiva de presentación es de 16 a nueve. También puede usar otras relaciones de aspecto como uno a uno cuatro cuadrados o cinco a cuatro o cuatro o cuatro a tres son bastante comunes. Las relaciones de aspecto son muy útiles porque de esta manera, sabes que todas tus imágenes siempre funcionarán bien juntas. Por ejemplo, es posible que hayas empezado a colocar tu imagen en una cuadrícula de dos, y luego quieres enargerla en una cuadrícula de cuatro con algunas otras Eso no es problema con una relación de aspecto porque todas las imágenes siempre tendrán proporcionalmente la misma altura cuando las cambies de tamaño Como de costumbre, recuerda, esto es algo que debería ayudarte. Entonces, a veces una relación de aspecto puede no ser la elección correcta. Por ejemplo, aquí en el lado derecho , mi imagen de fondo. Si yo haría eso del 16 al nueve, lo más probable es que llene toda la pantalla, y no quiero eso. Así que solo hago esos un poco más pequeños. Puede simplemente calcular la relación de aspecto usted mismo o puede usar una calculadora de relación de aspecto. Entonces aquí, por ejemplo, si cambiara éste a mil 500, automáticamente calcularía la altura para mí. Puedo, por supuesto, luego redondear hasta píxeles completos. Entonces también puedes elegir aquí entre diferentes relaciones de aspecto y llegar directamente al nuevo tamaño de píxel. 9. Imágenes en línea: texto en el fondo: Ahora hablemos un poco combinar imágenes de fondo con texto. Esto es algo de uso frecuente en el llamado héroe o escenario, que es la primera gran cosa que ves al abrir una página. Entonces estás configurando esto en tu diseño, y se ve perfecto. Encuentras este bonito lugar gratuito para que tu texto sea colocado y a tu cliente le encanta, y luego la vida real se establece. El diseño de la interfaz de usuario no es estático. Vive en el navegador. Entonces en este tamaño, incluso podrías salirte con la tuya, pero puedes ver que cuanto más pequeña se vuelva la imagen, más desaparecerá el botón en el naranja. Y si cambiaras esto por una imagen más ocupada, entonces solo puedes imaginar que no va a funcionar en todos los dispositivos Entonces, ¿qué podemos hacer? Una solución sería si estás teniendo una imagen relativamente vacía, así como esta, para fijar tu imagen a un lado. Aquí, por ejemplo, lo arreglo a la izquierda. Entonces mi copia se queda donde la pongo, pero mi silla se corta un poco, lo cual está bien en este caso. Para el diseño móvil, solo proporcionarías una imagen completamente separada por completo. En mi caso, solo corté la silla y la uso así, pero también puedes usar una imagen completamente diferente para el fondo. Ahora, también podrías tener el caso de que tienes imágenes muy ocupadas y aún quieres usarlas, como en este caso. Lo que puedes hacer en este lugar es agregar una superposición, y puedes jugar con la transparencia aquí. Como puedes ver, la superposición no solo hace que el texto sea más legible, sino que además agrega más color de tu marca al diseño. Y simplemente le da este aspecto mucho más sofisticado. Por cierto, también puedes agregar esta superposición sobre toda la imagen y simplemente bajar un poco con la opacidad Eso también da un resultado realmente agradable. 10. Imágenes en línea: gestionar con imágenes pequeñas: A veces es posible que te den imágenes que quieras usar como imagen de héroe en tu página, pero simplemente no son lo suficientemente grandes y se verían pixeladas Puede verificar el tamaño simplemente dejando caer esa imagen en su software de diseño de interfaz y luego le mostrará las dimensiones en píxeles. O puedes escribir colecta en cualquier imagen de tu computadora, y ésta te dará la información. Aquí, por ejemplo, sé que estoy teniendo un JPEG. Ese es el tamaño de la imagen, y estas son las dimensiones en píxeles que estoy buscando. Entonces mi imagen aquí tiene 1,200 pixeles de ancho. Eso significa que en mi lienzo ya que estoy diseñando en una x, voy a usarlo alrededor de 600 píxeles de ancho. Esto me garantiza que más adelante puedo exportarlo al doble tamaño de 1,200 para retina y aún así tener buenos resultados. Esto, sin embargo, definitivamente no es lo suficientemente grande para una imagen de fondo. Entonces veamos qué podemos hacer para jugar con él si todavía queremos usarlo en nuestro héroe. Las imágenes no siempre necesitan ser tamaño completo para brillar en una sección de héroes. Como pueden ver aquí, simplemente agregué algo de color para darle un poco de sabor. Notarás que si juegas con él, aún puedes obtener resultados muy buenos. Además, si bien la mayor parte de tu contenido realmente debería sentarse y comportarse con la grilla, con una imagen de héroe , puedes hacer una excepción , así podrías, por ejemplo, sacarlo de la grilla o darle alguna animación realmente agradable. Lo mejor de trabajar con imágenes más pequeñas en la sección de héroes es también que se escalan muy bien en dispositivos móviles. 11. Resumen de imágenes: Resumimos lo que hemos aprendido sobre las imágenes. Utilice JPEG para imágenes siempre que sea posible en línea. Para transparencia, por ejemplo, un fondo transparente, guarda las imágenes como P y G. Intenta guardar tus imágenes con una relación de aspecto siempre que sea posible. Considera el tamaño y el comportamiento de redimensionamiento al elegir imágenes de fondo grandes. Usa una superposición en imágenes ocupadas. También se debe proporcionar siempre un texto completo para las imágenes. Esto es realmente importante para la accesibilidad. 12. Gracias: Bien hecho por terminar este curso. Siéntete libre de llegar a nosotros en moon learning dot io, siempre estamos interesados en escuchar tus comentarios. También harías como un gran favor si tan solo pudieras tomarte un minuto y dejar una reseña aquí mismo. Si disfrutaste de este curso y además asegúrate de echar un vistazo a nuestros cursos adicionales. En Moody Learning dot. Cubrimos todos los temas desde los fundamentos mismos del diseño UX UI hasta Figma e incluso algunos conceptos básicos de código. Asegúrate de visitar nuestro sitio web en Moody Learning dot IO, donde también puedes suscribirte a nuestro boletín de noticias.