Lineamientos y tips para Ilustraciones en BackGrounds:
Verificar que la ilustración concuerde de alguna manera con todas las pantallas en la que se podrá usar y sus elementos.
Dibujar el margen y en el callToAction.
No de poner un #000 con opacity 0.2 porque opacará nuestra ilustración.
Marcar bien los margenes y dividirlos en jerarquías para seccionar la atención y mantener el bonito background que nos dieron.
Contrastar BG con oscuros con CTA a colores vivos, y al revés para poder dirigir la atención.
Cuando la ilustración no abarca todo el BG usar el mismo color de fondo para que tenga una sensación mas natural.
PD: usar ilustraciones abiertas para la app que los elementos convivan con ella sin que la pisen
Gracias!
Siempre tener buenas prácticas para evitar trabajar doble
No entendí mucho este tema de las imágenes de fondo, pero tendré que investigar mas sobre estos temas.
En el caso de utilizar fotografías en lugar de ilustraciones. Alguna recomendación para los tamaños?
Que mantenga su tamaño original si es para Desktop y en mobile escala lo que sea necesario para evitar que se pixele :D
para que no se pixele*
En resumen es que las ilustraciones e imágenes que creas deben tener lo que se conoce en Diseño Visual como "aire" para poder utilizarlo a la hora de colocar otros elementos.
A partir de aquí no entiendo lo que esta haciendo Rulótico, esos tercios que hace con el cuadro ¿Qué elementos serian en el desarrollo?
Por lo que entiendo, divide las pantallas en tercios para tener una referencia visual de dónde sería el centro
Gracias por responder @josecueram, mmmm si ese fuera el caso, lo vería innecesario 🤔 ya que Adobe XD te da las guía para poder centrar los elementos incluso con los atajos shift + m y shift + c (en windows) centras con respecto a otro.
Visualizar como cambia el diseño según el tipo de pantalla:
Discord es un ejemplo perfecto para entender mejor la clase.
Reglas para acomodar nuestros elementos de diseño, por ejemplo los tamaños no funcionan para todas las pantallas. La misma ilustración de fondo.
Actualizar probando en diferentes pantallas, los call to action son posicionados acorde a este espacio, la ilustración debe ser muy bien pensada para que sea versátil y que colabore en toda pantalla. Ilustraciones sobre negro son del gusto del profe.
¿A qué se refiere con márgen para las imágenes de fondo? a las imágenes de fondo no se les pone margen, no entiendo.
Que es útil valerse de ilustraciones con colores plasta de fondo, para que así, si al redimensionar tu ilustración de acuerdo a cada tamaño de pantalla, si falta margen, puedas simular por medio de copiar ese mismo color de fondo para toda tu pantalla, y así, dar la ilusión de que la ilustración tiene continuidad y no que está cortada.
y diseñar para una pagina web
Que buena calse
Diseña para dispositivos con restricciones en pantalla, esto te ayudará a entender mejor las limitaciones de cada dispositivo y ofrecer una mejor experiencia para todos los usuarios.