Gráficos del producto 6 técnicas para hacer imágenes más informativas
Los diseñadores web se han vuelto muy astutos con las técnicas de marketing. Atraer el contenido de la página siempre es bueno, pero cuando se trata de captar la atención de sus visitantes, las imágenes son la forma más popular de medios. No requieren sonido como videos de demostración y pueden transmitir rápidamente información importante en cuestión de segundos. Puede parecer fácil, pero existen algunas técnicas notables para crear imágenes informativas en sitios web.
Estos incluyen etiquetas de características, capturas de pantalla de primeros planos, comparaciones de precios y otros detalles minuciosos. ¡Los diseñadores web pueden usar gráficos de información para modelar nuevas aplicaciones, software, videojuegos o muchos otros productos! Aunque lo más común es que veas estas técnicas utilizadas en diferentes campos de la tecnología..
Echa un vistazo a las ideas a continuación, donde ofrecemos no solo consejos, sino ejemplos de la vida real de hermosos gráficos de productos repletos de excelente información..
1. Amplíe su contenido
Las imágenes informativas no deben utilizarse en lugar de un buen contenido de la página web. En lugar Usa imágenes para expandir tus puntos clave y ilustrarlos claramente para sus visitantes. Una de las mejores maneras de hacer esto es Construyendo una pequeña demostración para resaltar áreas importantes. de un tutorial. Con unos pocos gráficos informativos y capturas de pantalla, es mucho más sencillo mantener el interés de su lector en cada paso..
Cuando intenta mostrar un tutorial de software (como el tutorial de Photoshop) puede ser difícil transmitir el mensaje en texto escrito. Los visitantes aterrizarán en su artículo e inmediatamente comenzarán a juzgar de manera subconsciente el material en una fracción de segundo. Web Designer Wall tiene un fantástico tutorial sobre cómo construir imágenes redondeadas de CSS3 acompañadas de un práctico gráfico. Esto incluye algunas etiquetas y un plano del efecto..
En la página del artículo original, esta imagen agrega una imagen mucho más clara en tu cabeza hacia lo que estarás creando. El autor ha agregado un pequeño enlace de demostración, pero ¿por qué no incluye también algunas imágenes de demostración? Es mucho más probable que llame la atención con una foto de demostración debidamente etiquetada..
Intentar Evita añadir imágenes solo por el contenido multimedia. en tu post Si puede explicar sus métodos o razonamiento sin una imagen, comience aquí primero. Solo después de mirar hacia atrás en su copia web, debería considerar volver a iterar algunos puntos en un gráfico de imagen detallado. Específicamente puedes encontrar un El tutorial requiere más señales visuales a medida que aumenta la complejidad.. Dos ejemplos podrían incluir la creación de una base de datos de sitio web o un conjunto de datos de tabla.
2. Resaltar características notables
Debido a que cada pieza de software / tecnología tendrá tantas características, es casi imposible explicar cada bit. No solo esto, sino que es muy poco probable que sus visitantes estén interesados en leer más de 20 etiquetas en su gráfico de información. Se adhieren a las características más interesantes y Usa etiquetas para explicar un poco más en profundidad..
Al escribir la copia web para el contenido de su etiqueta. evitar el lenguaje aburrido cuando sea posible. Si los visitantes buscan la última versión de su aplicación, es posible que no se preocupen mucho por los cambios en la combinación de colores. ¿Cómo afectará eso a su flujo de trabajo diario? En su lugar tal vez resalta lo que es beneficioso para ellos, Como un nuevo panel de interfaz o conectividad multiusuario. Estos generalmente deben ser rasgos abstractos que no puedes ver solo por “mirando” en el producto.
Tener una etiqueta de este tipo para explicar estas características directamente proporcionará la respuesta más abundante. Los visitantes sentirán que están siendo tratados como compradores inteligentes y maduros capaces de tomar sus propias decisiones. Si realmente les gustan sus funciones, esto le da un mayor impulso a la compra de su software o producto..
A continuación se muestra un ejemplo de la página de actualización de Mozilla Firefox.
Puede ver que los diseñadores han usado líneas curvas punteadas para señalar etiquetas y nuevas características. Estas son imágenes de fondo posicionadas absolutamente dentro de un contenedor. div. Sorprendentemente, todo el texto de la etiqueta también está escrito dentro de las etiquetas HTML (no solo una imagen grande).
Creo que este método no solo es útil para los robots de rastreo de Google, sino también para los usuarios móviles que normalmente no pueden experimentar la página web completa.
Observe también cómo la función Panorama sobre la izquierda ofrece un pequeño “Aprende más” enlazar. ¡Esta es posiblemente la mejor práctica que puede obtener al crear gráficos de información! Si tiene páginas o anclajes alternativos dentro de la misma página, sus visitantes podrían hacer clic en estos enlaces para comprender más sobre las funciones complicadas..
Recuerde que los gráficos informativos se utilizan para mostrar fácilmente los reclamos y las características del producto a sus visitantes. Así que aunque estás limitado en el espacio alrededor del gráfico puedes Siempre ofrezca la oportunidad de aprender más en una página externa..
3. Etiquetas simples y discretas
Etiquetas Son verdaderamente el aspecto más importante en la creación de gráficos informativos de productos. Es probable que los visitantes deban comprender diferentes áreas de su producto, software, sitios web, aplicaciones móviles, etc. Desafortunadamente, el uso de tablas y listas con viñetas solo puede llegar hasta el momento. Cuando realmente necesita explicar las características del producto, es importante elegir Puntos calientes para etiquetar.
Apple Computers es posiblemente el mejor ejemplo de detalles de etiquetas simplistas. Es posible que observe estas técnicas exactas en sus gráficos al mirar sobre tabletas, computadoras portátiles o el infame iPhone. Sus características y especificaciones técnicas son generalmente las mismas que las de otros fabricantes de computadoras de grandes marcas. Sin embargo, sus modelos gráficos son tan prístinos que los productos se venden prácticamente a sí mismos..
¡Tenga en cuenta que cuando rompe el proceso es mucho más simple de lo que piensa! Los gráficos de productos son solo una parte estándar del diseño general del sitio web. Incluso si está vendiendo fertilizante o sábanas o tarjetas de intercambio, es probable que pueda poner en práctica estas técnicas de etiquetado. Y aunque Apple tiene algunos gráficos informativos realmente simplistas, no son la única empresa que lo hace. Tratar Googlear alrededor de las empresas en su nicho para ver si tienen alguna etiqueta de información de lujo o pantallas teaser en su sitio web.
4. Imágenes con contenido dinámico.
Para algunos desarrolladores web puede que no sea suficiente simplemente crear un gráfico etiquetado de su software. Es posible que haya muchas características únicas que quiera revisar, pero que se encuentren dentro de una pequeña parte de su página web. Es posible construir una serie de pasos introductorios llevando a sus visitantes a través de una pequeña demostración de producto.
Newsberry ilustra con elegancia un ejemplo de esto. En su página de inicio notará un área de bloque con una pequeña mini navegación debajo. Incluyen 5 pasos a lo largo del proceso con diferentes capturas de pantalla y algunos textos descriptivos que lo acompañan. Incluso si no tiene idea de para qué se utiliza Newsberry, su El contenido introductorio explica las cosas muy claramente.. Incluso se le ofrecen algunos enlaces de demostración a lo largo de la serie de diapositivas..
A medida que se desplaza por su contenido, debe notar que muchas diapositivas contienen capturas de pantalla dentro de una pequeña ventana del navegador. Este efecto es en realidad muy simple de imitar! Solo necesitas encuentre una imagen para usarla como imagen de fondo y cambie el tamaño de las capturas de pantalla para que quepan dentro. Por supuesto, este efecto no funcionará para todos los productos, pero es una buena forma de enmarcar pantallas desde una aplicación web.
5. Borrar capturas de pantalla y fotos de productos
Es posible incluir todas las mejores etiquetas y características para sus productos, pero sin perder las ventas. los Las capturas de pantalla y las fotos que elija para su gráfico son, en última instancia, tan importantes como todos los detalles más finos.. En Windows y Mac OS X, hay formas de tomar capturas de pantalla de todo tu escritorio con métodos abreviados de teclado. Utilizando este método combinado con algún tiempo en Photoshop, puede acumular demostraciones de características muy interesantes..
Si su producto está muy complicado, debe intentar juntar algunas imágenes diferentes. El ejemplo anterior del sitio web de Tweetbot utiliza círculos azules para indicar una acción de toque en la aplicación. En lugar de una sola captura de pantalla con muchas etiquetas, considere usar una pequeña galería de imágenes jQuery para combinar 3-5 gráficos diferentes. Esto te da más oportunidad de Enfocarse en diferentes perspectivas del producto. Mientras que a los visitantes se les ofrece una experiencia mucho más rica..
Cuando toma una foto desde su PC o teléfono inteligente, la imagen siempre se guarda con un zoom del 100%. Los editores de imágenes como Photoshop tienen la capacidad de cambiar el tamaño de estos, pero a menudo pierden detalles. Entonces, ¿cómo puede encajar ese gráfico en su pequeño sitio web? Una de las mejores técnicas es aumento en el que se reduce la aplicación y se crean secciones ampliadas de las piezas más importantes. Esta técnica se ve más comúnmente en el software que en los productos físicos. A continuación, detallo el proceso de diseño..
6. Construyendo un efecto "Zoom Lens"
Estaré construyendo los pasos para construir un efecto de lupa en Adobe Photoshop. Si está utilizando otro editor de gráficos, lo más probable es que pueda realizar las mismas tareas, pero los menús y los comandos serán diferentes..
Uno de los mejores ejemplos de esta técnica se encuentra en la página de inicio de la aplicación Things for Mac. El gráfico tiene la aplicación reducida para que se ajuste perfectamente a la página, junto con una pequeña sombra. Sin embargo, en algunas de las áreas importantes notará un círculo con el contenido interno mucho más grande. Incluso han agregado un brillo interior blanco para aparecer como luz refractada que brilla a través de una lente!
Bono: "Zoom Lens" Efecto Tutorial de Photoshop
Para comenzar, toma una captura de pantalla que te gustaría usar para tu gráfico. He tomado una pantalla rápida de la página de inicio de Hongkiat. Voy a recortar solo la ventana del navegador y cambiar el tamaño a aproximadamente 700px. Debe cambiar el tamaño del ancho para que se ajuste al área de contenido de su propio sitio web. Ahora haga una nueva capa sobre este fondo y haga una selección circular mientras mantiene presionada la tecla shift para mantenerla proporcional. Rellena con cualquier color que quieras.
Paso 1
Manteniendo el círculo seleccionado, cambie el% de relleno en el panel de capas a 0%. Debajo de la capa FX, agregue un trazo negro de 1px-2px y un brillo interior blanco. Puede reducir la opacidad para una iluminación menos blanca.
Paso 2
Aún manteniendo el círculo seleccionado, mueva a su capa de fondo y presione ctrl (Para el usuario de Mac, es comando o clave cmd.) + c para copiar. Luego haga una nueva capa sobre el fondo pero debajo del círculo de lupa y péguela. Alternativamente, puede simplemente presionar ctrl + j para duplicar una nueva capa con solo la selección intacta.
Pulsa Ctrl + T para abrir la herramienta de transformación. Ahora escala la nueva capa duplicada mientras mantienes cambio para mantener todo proporcional y alt para mantener el centro estacionario.
Paso 3
Presione ctrl y haga clic en el icono de la capa de lupa para hacer su selección nuevamente. Tenga en cuenta que aún debe resaltar la capa de fondo duplicada en el panel de capas (la que está directamente debajo de nuestra lupa), lo que significa que tendrá un fondo azul claro.
Presione Ctrl + Shift + i para invertir la selección actual. Ahora presione eliminar para eliminar la basura adicional de nuestra captura de pantalla escalada. Para un poco de efecto agregado, levante el menú de efectos de capa para agregar una pequeña sombra. También puede dibujar una línea vertical delgada de 1px y usar el filtro de licuar (Filtro> Licuar) crear un pequeño mango!
Conclusión
Para diseñar fantásticos gráficos de productos debes recordar lo básico. ¡Los visitantes simplemente quieren entender lo que estás tratando de venderlos! La forma más fácil de transmitir esta información es a través de una serie de capturas de pantalla o un gráfico de un solo detalle. Las etiquetas son simplemente la segunda pieza de este rompecabezas, donde puede delinear los conjuntos de características más importantes.
Cuando pones todas estas técnicas juntas, es probable que comiences a notar el panorama general. Las descargas y las compras se dispararán, especialmente si coloca sus gráficos en el centro de su página de inicio. Estas técnicas son perfectas para que los diseñadores gráficos y web se inicien en el campo del diseño de productos. Hemos detallado algunas ideas abstractas, pero nos encantaría escuchar sus opiniones en el área de discusión a continuación.!
