Qian Lin Web

4 min de lectura

Imágenes de sitios web: ¿fotografía, ilustración o gráficos de interfaz de usuario?

La fotografía, la ilustración y los gráficos de interfaz responden a diferentes necesidades de contenido. La dirección correcta depende de lo que se debe probar, explicar o imaginar, y de si el equipo puede producir un conjunto consistente a lo largo del tiempo.

Tríptico que compara fotografía, ilustración y gráficos de interfaz en diseños de sitios web.

Utilice la fotografía para la realidad visible.

La fotografía puede mostrar personas, lugares, productos y procesos que realmente existen. Las imágenes originales del lugar de trabajo pueden respaldar una afirmación de servicio mejor que personas genéricas mirando computadoras portátiles.

Escriba una lista de tomas vinculada a mensajes de páginas específicas y confirme los derechos de uso, cultivos y alternativas móviles.

La fotografía es útil cuando las personas, el lugar, el proceso físico o el detalle del producto son importantes para la decisión. Planifique los temas, la iluminación, la orientación y los cultivos necesarios antes de la sesión. Un héroe amplio, la tarjeta cuadrada y la imagen móvil estrecha pueden necesitar diferentes composiciones en lugar de recortar automáticamente el centro. Grabe los permisos y derechos de uso con los archivos para que los editores sepan qué imágenes se pueden publicar y dónde se requieren reemplazos.

Utilice ilustraciones para explicar o crear.

La ilustración funciona cuando el tema es abstracto, no está disponible para fotografiar o necesita un lenguaje visual controlado. Un diagrama de flujo de trabajo puede aclarar un proceso de software sin pretender ser una captura de pantalla real del producto.

Etiquete el material conceptual cuando sea necesario y defina un estilo que pueda producir más de una imagen principal.

La ilustración puede explicar una idea que no se puede fotografiar claramente, como un flujo de trabajo, relación o servicio abstracto. Establecer reglas para el peso de línea, perspectiva, textura y color por lo que las ilustraciones separadas pertenecen a un sistema. Evitar escenas decorativas que implican características o resultados que el servicio no proporciona. Probar el activo junto a la copia real; debe aclarar el tema sin forzar el encabezado para explicar la imagen.

Utilice gráficos de interfaz de usuario para el comportamiento del producto

Los elementos visuales de la interfaz pueden demostrar pasos, estados y arquitectura de la información. Un formulario enfocado o un detalle del panel a menudo explica una característica del software mejor que una captura de pantalla completa e ilegible.

Utilice datos representativos, oculte información privada y mantenga el texto lo suficientemente grande como para comprenderlo en el tamaño mostrado.

Los gráficos de interfaz funcionan bien para el software y el contenido del proceso cuando muestran un estado significativo. Utilice datos representativos y no sensibles y elimine cualquier información del cliente. Enfóquese en la interacción que se está discutiendo en lugar de mostrar un tablero ilegible completo. Un detalle cercano puede explicar un formulario, entrega o compra mejor que una captura de pantalla grande.

Elija una combinación mantenible

Muchos sitios necesitan más de un tipo de imagen, pero cada una debe tener una función documentada. La fotografía para pruebas de empresa, diagramas de procesos y recortes de interfaz de usuario para funciones pueden coexistir cuando se controlan el color y el encuadre.

Comprobaciones prácticas

  • Cree un inventario de imágenes con propósito, fuente, derechos, relación de aspecto y propietario sustituto.

Cree un resumen de imagen para cada plantilla: propósito, fuente, relación de aspecto, comportamiento de recorte, responsabilidad alt-text y prioridad de carga. Compruebe el activo a su tamaño renderizado y en una pantalla estrecha. No cargue el archivo original más grande por defecto. Mantenga los nombres de archivo y la información de propiedad organizados para que los futuros editores puedan reemplazar una imagen sin romper la composición prevista o utilizando un activo fuera de su licencia.

Análisis relacionados

Servicio relacionado

Diseño Gráfico

Ver este servicio