Así que estoy creando un sitio web completamente receptivo, con el objetivo de usar la menor cantidad posible de consultas de medios y números mágicos. Después de varios intentos, descubrí que usar el contenido para crear el diseño es, con mucho, el mejor curso de acción.
Mi cliente solicitó una presentación de diapositivas/carrusel de imágenes para que se viera de manera destacada en la página de inicio y posiblemente en todas las páginas principales. He creado un diseño que funciona y están contentos con él. Puedes verlo aquí .
Ahora tengo un nuevo desafío, ¿cómo creo una presentación de diapositivas llamativa, que responda a su medio y se vea bien? Déjame ampliar..
Tengo pocas limitaciones, lo que es más una carga que un alivio en este caso.
Entonces, lo que estoy pensando e intentando actualmente es:
Utilice una imagen de fondo con un enlace directo al tema y una o dos imágenes de tipo clip-art interesantes y relevantes que puedan flotar dependiendo del tamaño de la pantalla.
Luego permita que el texto se posicione solo, con la ayuda de márgenes/relleno y consultas de medios.
Al momento de esta edición, tomé la opción fácil, segura y aburrida usando fotos amplias y obvias.
Estoy buscando consejos sobre el enfoque a seguir cuando se me encargue la creación de gráficos que respondan al medio en el que se muestran.
Preguntas originales (no tan) relevantes para esto:
¿Sería mejor un color, un degradado simple o un fondo muy suave que un patrón repetitivo o uno con detalles?
¿Cómo puedo crear un patrón repetitivo que funcione y sea relevante para el tema y el diseño?
Si uso una imagen de primer plano flotante, ¿crees que tiene que verse realista, como si no fuera una imagen prediseñada?
Mejores temas de consideración:
Cualquier publicación de blog, artículo o informe relevante a esto es bienvenido y muy apreciado.
Precisamente esta mañana, la revista Smashing publicó un artículo sobre el enfoque en parte de una imagen al escalar para dispositivos móviles: Elegir una solución de imagen receptiva (desplácese hacia abajo hasta la sección "El problema de la dirección de arte"). Con la foto de la carretera en su sitio web, querrá asegurarse de mostrar la carretera, en lugar de los árboles, al reducir la escala porque la carretera refuerza la idea de "Estamos en camino".
¿Sería mejor un color, un degradado simple o un fondo muy suave que un patrón repetitivo o uno con detalles?
Depende de los demás elementos de la página. Si está utilizando imágenes de primer plano, ceñirse a un fondo de un solo color que no compita con las fotos permitirá que el ojo se enfoque naturalmente en las imágenes de primer plano.
¿Cómo puedo crear un patrón repetitivo que funcione y sea relevante para el tema y el diseño?
Un patrón repetitivo de una caja reforzaría el concepto de movimiento y almacenamiento.
Si uso una imagen de primer plano flotante, ¿crees que tiene que verse realista, como si no fuera una imagen prediseñada?
Las imágenes prediseñadas pueden ser complicadas. Hay algunas imágenes vectoriales e ilustraciones rastor bien diseñadas que calificarían como imágenes prediseñadas, pero aún así están hechas con buen gusto. Si usó uno en formato SVG, se escalaría bien en dispositivos de visualización retina. Solo asegúrese de que la imagen que elija sea buena y coherente con el estado de ánimo que está creando. Puedo imaginar un hermoso dibujo de cajas que se vería bien, pero también puedo imaginar imágenes prediseñadas de mala calidad que se verían mal. Si no está seguro, las fotos suelen ser una opción segura.
Desde el punto de vista del diseño (conozco el aspecto técnico), ¿qué condiciones puedo usar para decidir cómo escalar el texto hacia arriba o hacia abajo y aún verse bien? es decir. ¿El texto no debería ser más grande que un cierto tamaño dependiendo del ancho de su contenedor?
Para sus tres bloques horizontales de texto, los dimensionaría y los rellenaría para que tenga 4-5 palabras por línea. Cuando llegas a tamaños móviles o ventanas muy estrechas, cambiaría la visualización a bloque para que cada bloque de texto ocupe su propia fila.
Mira estos artículos:
¿Qué tipo de imágenes son mejores para un fondo con un ancho muy variable? Supongo que son imágenes que tienen un solo punto de anclaje de interés con algún detalle sin importancia en el resto de la imagen.
Estoy de acuerdo. Las fotos con el foco en un área con el resto del fondo menos prominente o borroso (los fotógrafos llaman a ese desenfoque "bokeh") funcionarían bien aquí. Consulte también la foto del árbol en el artículo de la revista Smashing que vinculé arriba.
¿Cuáles son las cosas más importantes a considerar con respecto a la naturaleza no fija/flotante de las imágenes y el texto en primer plano? (espacio en blanco, envoltura y cualquier otra cosa?)
Las imágenes están ahí para reforzar el texto. El texto es el factor más importante, por lo que desea asegurarse de que las imágenes se coloquen en una capacidad de apoyo. El texto debe ser prominente pero no bloquear la parte importante de la imagen.
La proximidad es clave. El texto debe estar cerca de la imagen y más alejado de otras imágenes. Si tiene la imagen 1 con algo de texto debajo, querrá tener menos espacio entre la imagen y el texto de apoyo del que tendría entre ese texto y la siguiente imagen. Por ejemplo, supongamos que tiene la imagen 1 con texto debajo, luego la imagen 2 debajo y más texto debajo de la imagen 2. Querría tener más espacio en blanco entre el título de la imagen uno y la parte superior de la imagen 2 que usted. d tienen entre la imagen 1 y su título.
Un gran libro sobre este tema es The Non-Designer's Design Book.
Consulte también la Guía del desarrollador de Apple sobre principios de interacción: Principios de interfaz humana . Un montón de cosas buenas aquí.
Las opciones parecen sencillas.
background-size:propiedad para alterar dinámicamente cualquier imagen de fondooverflow: hidden;propiedad para simplemente ocultar imágenes más grandes dentro de un div a medida que disminuye el ancho de la página. Esto requeriría que tenga en cuenta lo que ES visible en varios anchos de página.Las preguntas que haces son algo ambiguas... pero....
¿Sería mejor un color, un degradado simple o un fondo muy suave que un patrón repetitivo o uno con detalles?
Altamente dependiente del patrón. Si es un patrón sutil que no compite visualmente con el texto que se encuentra encima, entonces un patrón puede funcionar. Sin embargo, me inclinaría por un color sólido o un degradado sutil. El color simple hará que el texto sea más legible.
¿Cómo puedo crear un patrón repetitivo que funcione y sea relevante para el tema y el diseño?
Esa es tu llamada. ¿Estás pidiendo a otros que diseñen algo para ti?
Si uso una imagen de primer plano flotante, ¿crees que tiene que verse realista, como si no fuera una imagen prediseñada?
Nuevamente, eso es entre usted y el cliente. El "estado de ánimo" o el "mensaje" que transmitirá el sitio web determinará el estilo de las imágenes que se utilizarán.
Desde el punto de vista del diseño (conozco el aspecto técnico), ¿qué condiciones puedo usar para decidir cómo escalar el texto hacia arriba o hacia abajo y aún verse bien? es decir. ¿El texto no debería ser más grande que un cierto tamaño dependiendo del ancho de su contenedor?
La consistencia es lo mejor para el diseño. La consistencia da una impresión de estabilidad. Si el primer bloque de texto es una sola línea de texto, intentaría ceñirme a una sola línea de texto para todos los bloques de texto posteriores. El ancho puede cambiar un poco, pero pasar de una sola línea de texto a varias líneas de texto requerirá elementos móviles. Cuando los elementos se mueven, pierdes la sensación de consistencia.
Usando CSS3 Media Queries podemos hacer que las imágenes sean Responsive.
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
Si desea más explicaciones, consulte este enlace, http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
eric
eric