Qué es Adobe Xd y para qué sirve

Hoy queremos presentaros una de la herramientas que más utilizamos en el departamento de diseño web y también de desarrollo, Adobe Experience Design CC, o más comúnmente llamada Adobe Xd.

Adobe Xd es un herramienta de Adobe para la creación de interfaces. Un programa dedicado íntegramente al diseño y prototipado de aplicaciones web. Recoge todas las herramientas necesarias que usábamos en otros programas de Adobe y lo unifica en esta sencilla pero potente herramienta.

 

Cómo nace Adobe Xd

Allá por octubre de 2015 Adobe anunciaba una nueva herramienta de diseño y prototipado con el nombre de «Project Comet», en una conferencia Adobe MAX. Poco después, en el primer trimestre de 2016 lanzaba una primera versión beta para MacOS llamaba Adobe Experience Design. A finales del mismo año la lanzaban para Windows.  A partir de octubre de 2017 dejó de ser una beta.

Nace para hacer frente a las necesidades de los diseñadore UX/UI para generar bocetos, diseños y prototipos de interfaces, dado el vacío que había dentro de Adobe, sin ningún software específico para generar este tipo de procesos. Antes hubieron otros como Adobe Fireworks (una clásica herramienta absorbida de Macromedia, que desapareció en 2013), y algunos programas se han utilizado para estos fines, sin ser los más apropiados, como Photoshop (programa dedicado al retoque fotográfico) e Illustrator (dedicado al diseño vectorial). Ninguno de ellos es óptimo ni específico para ello. Aunque se les ha intentado agregar herramientas para ello, no eran nada ligeros ni estaban bien optimizadas para ello.

Adiós a Photoshop e Illustrator para diseñar páginas webs o aplicaciones.

También para hacer frente a otros softwares como son Sketch, InVision, o Figma.

Uno de los mejores softwares de diseño de interfaces y prototipado es Sketch, muy conocido dentro del mundo de editores de gráficos y diseño UX UI, que se ha convertido casi en un estándar en el sector. Uno de los factores clave de este software es que solo está disponible para Mac OS.

Adobe tuvo una fuga masiva a este software ya que no cumplía con las necesidades del momento. Ahora (aunque algo tarde) quiere plantarle cara directamente a Sketch, y aunque pensamos que aún le falta bastante recorrido para ello, va por el buen camino.

 

Cómo funciona Adobe Xd

Adobe Experience Design CC – Diseña experiencias, genera prototipos y compártelos.

Tiene una interfaz muy minimalista, sencilla, intuitiva, limpia y clara (blancos y grises claros predominan). Recoge las herramientas necesarias para llevar a cabo los diferentes procesos de trabajo. Desde generar Wireframes y bocetos, con diferentes interacciones y transiciones para poder realizar test de usabilidad, hasta el diseño y prototipado interactivo, y los recursos necesarios para la producción final.

Todo ello mejorando y acelerando los procesos de creación gracias a herramientas muy intuitivas.

En la parte superior encontramos el desplegable del menú único y principal con las diferentes opciones: Nuevo, Abrir, Guardar, Importar, Exportar, etc. Y la barra con los botones para cambiar entre perfil de Diseño y Prototipo, el icono de Vista previa del diseño, y el Botón desplegable de Compartir.

El conjunto de herramientas se sitúa en una barra lateral izquierda:  Seleccionar, Rectángulo, Círculo, Línea, Pluma, Texto, Mesa de trabajo, y Zoom. En la parte inferior está el generador de activos (para crear estilos de colores, texto y símbolos) y el navegador con de capas.

Mientras que las propiedades dinámicas y configuraciones las encontramos en la parte derecha: Alinear, Repetir cuadrícula (grid), Tamaño y posición, Rota y Reflejar, Redimensionado interactivo, Aspecto del elemento.

No importa que software estemos acostumbrados a usar, es muy sencillo acostumbrarse a él.

Podemos diseñar y previsualizar (vista previa) a tiempo real, para comprobar cómo funcionan las interacciones, animaciones y diferentes transiciones, simplemente clicando sobre el icono del “Play” superior derecho.

 

Herramientas de diseño UI

herramientas-diseno-ui

Perfil de Diseño.
Desde aquí podemos generar bocetos y Wireframes para nuestras interfaces, y posteriormente darle diseño y estilo de una forma muy sencilla.

Mesas de trabajo

Permite crear dentro del espacio de trabajo diferentes mesas con tamaños de pantallas ya predefinidas, desde desktop hasta ipad o pantallas de móvil.

Cajas

Formas poligonales vectoriales sobre las que poder enmascarar imágenes. Según cambiemos el tamaño de estas formas la imagen se adaptará de forma automática, al estilo responsive.

Texto

Herramienta muy sencilla pero muy práctica para la inserción del texto en nuestros diseños.
Una funcionalidad que nos encanta es la de poder alternar entre Texto de punto (la caja se adapta al texto) para los títulos, o Área de texto (donde el texto se adapta a la caja) para textos y párrafos.

Grid

Permite la clonación de un bloque de contenido y su posible edición inteligente posterior. Perfecto para generar cuadrículas de elementos.

Panel de Activos (assets): Estilos de colores, carácteres y símbolos

Mediante esta herramienta podemos definir diferentes estilos activos que tenemos en la web, para aplicar a nuestros diseños de forma rápida, y sobre todo el poder editar estos estilos y aplicarlo de forma fácil a todo el proyecto. La creación de símbolos es muy eficaz a la hora de utilizar elementos repetitivos, como por ejemplo, cabeceras y footers, botones, iconos, etc.

Exportar recursos

La herramienta de Exportar (Ctrl + E) nos encanta, ya que exportamos de forma fácil los elementos seleccionados o que queramos, definiendo el tipo de formato, la calidad, etc. Genera automáticamente los recursos necesarios para la fase de producción, incluso en varias resoluciones según lo requiera el proyecto (1x,2x, 3x).
Podemos exportar: imágenes en JPG (elección de calidad), y PNG (imágenes con colores planos). Recursos en SVG (para iconos y logotipos vectoriales), e incluso exportar el diseño en formato PDF.

 

Prototipado interactivo UX

prototipado-interactivo-ux

Pasamos al perfil de Prototipado.
Desde aquí podremos crear las diferentes interacciones entre nuestras mesas de trabajo o pantallas.

Transiciónes y animaciones

Hay 3 tipos: Tocar, Arrastrar o por Voz.

Mediante un sencillo sistema de arrastrar la flechita podemos enlazar las diferentes páginas. Se puede elegir el tipo de transición que queramos desde una transición normal, hasta de autoanimación (para secciones desplegables o carruseles) o superposición (para desplegables,  lightbox o popups por ejemplo).  Aquí tendríamos que profundizar más para ver todas las posibilidades que nos ofrece, ya que son bastante, e interesantes.

Podemos ir viendo desde la Vista previa como van quedando estas interacciones.

 

Compartir tus prototipos y sus especificaciones

compartir-prototipos-especificaciones

Desde aquí podremos compartir nuestros prototipos con los clientes para su feedback y validación, o con otros compañeros. Simplemente con un simple enlace podremos compartir nuestra interfaz con quien queramos.

Desde el botón de Compartir veremos las siguientes opciones.

Compartir archivos

Guarda el documento de Adobe Xd en la nube y podrás acceder a él desde cualquier parte o compartirlo con otras personas para que puedan editarlo.

Compartir para revisión

Desde aquí puedes compartir el prototipo para su revisión. Si quieres conseguir feedback del cliente o de forma interna puedes generar desde aquí un enlace para compartirlo con quien quieras. Tiene algunas opciones de configuración como: Permitir comentarios (muy útil para sugerir cambios), Abrir en pantalla completa, Mostrar sugerencias sobre puntos importantes, o Requerir contraseña.

Para nosotros la parte de compartir para revisión nos es fundamental, y de esta forma nos facilita y acelera el proceso de validación. Además el cliente se hace una idea de cómo quedará el producto final terminado. ¡Se acabó lo de pasar el diseño en JPGs o PDF!

Compartir para desarrollo

Una vez pasado la parte de validación, y tenemos el Ok, pasamos a la parte de desarrollo. Debemos poder saber transmitir toda esta información a los técnicos responsables del desarrollo de la interfaz.
Desde aquí podemos compartir todos los recursos necesarios a nivel estilos (colores, tipografías, tamaños, etc.) para que puedan transformar de forma fiel nuestro prototipo a un producto final definitivo. Generando así un enlace accedemos a todos los recursos necesarios para hacerlo realidad.

Esto junto con la Exportación anterior de los recursos visuales obtenemos un tándem perfecto para los desarrolladores.

 

Integraciones y Kits de recursos para interfaces

recursos-interfaces-adobexd

Adobe pone a nuestra disposición una serie de interacciones y recursos para facilitarnos un poco más el trabajo.

Interacciones

Integración para conectar Xd con tus aplicaciones y servicios favoritos: Microsoft Teams, Jira, Slack, ProtoPie, Avocode, Zeplin, Sympli, Kite App.

Kits de recursos para interfaces

Nos facilitan kits de recursos personalizados para las principales plataformas: Apple Design, Material Design (Google), y Microsoft UWP Design.
A parte de estos hay una especie de kits/plantillas de todo tipo, desde plantillas para diseñar apps de Smartwatch, hasta para Amazon Alexa, pasando por kits ecommerce.

Muy recomendable ver todos los recursos que nos ofrecen.

 

5 Plugins recomendados para Adobe Xd

plugins-adobe-xd

Otro de los fuertes de Adobe Xd es que cuenta con una fuerte comunidad detrás que desarrolla plugins interesanes para implementar en nuestro Adobe Xd, y el propio Adobe Xd nos los facilita desde el propio programa para instalarlos. Te recomendamos para empezar que pruebes los siguientes.

UI Faces

Para generar avatares aleatorios en una interfaz, dentro de cualquier tipo de forma.

Artboard Plus

Ordena automáticamente tus mesas de trabajo. Para los más desorganizados.

Lorem Ipsum

Si vas a poner texto de ejemplo este plugin es el más cómodo para generar el famoso Lorem Ipsum.

Icondrop

Para integrar iconos, ilustraciones o fotos de stock directamente en Adobe Xd.

VizzyCharts

Para generar gráficas reales en nuestra interfaz.

 

Precio y disponibilidad

precio-adobe-xd

Es uno de los puntos fuertes de este programa, ya que es GRATIS (para particulares), y está disponible tanto para Mac OS como para Windows. Adobe quiere aprovechar el aumento de público en el campo de UX / UI y equiparar sus tarifas a competidores como Firgma.

Eso sí, a la hora de compartir estaremos limitados, ya que solo nos dejará compartir a la vez un prototipo y uno de especificaciones. Si tenemos cierto volumen de trabajo de interfaces recomendamos ciegamente pagar la versión de pago para equipos de diseño, ya que es bastante rentable.

Podremos acceder a nuestros prototipos desde diferentes dispositivos (según aseguran): Android, iPad, iPhone, etc. Aunque a nosotros personalmente nos da algún problema en Android.

Adobe Xd >>

 

Conclusión

Hace ya bastantes meses que trabajamos con Adobe Xd y ha supuesto uno de los cambios más importantes de los últimos años en el proceso que va desde el diseño hasta el desarrollo de la interfaz a nivel UX/UI. Lo hemos notado a la hora de mejorar los tiempos y los métodos de trabajo en nuestro departamento, y en la calidad del producto final. Nos facilita mucho los procesos, desde el bocetado, wireframes, diseño y prototipado, hasta la parte de desarrollo, con la generación de recursos y assets de una forma muy eficaz y práctica.

Unos de los puntos clave es la de compartir para revisión, y ahora mismo no sabríamos vivir sin esta opción para la validación, nos facilita mucho la vida.

Creemos que aún tiene bastantes limitaciones y faltan algunas herramientas clave para poder generar mejores prototipos, pero aun así desde acceso apostamos por Adobe Xd como herramienta de diseño y prototipado UX/UI. ¿Y tú que herramienta utilizas? ¿Has probado ya Adobe Xd? ¿Quieres que diseñemos tu nueva interfaz?

 

Affinity, la alternativa a Adobe por precio y calidad

Hoy os traemos un artículo imprescindible para creativos, hablamos de Affinity, una alternativa muy interesante a los principales softwares de Adobe (el gran todopoderoso del diseño) tanto por el coste, como por la calidad. En este post te contamos nuestra experiencia y por tanto nuestra opinión sobre Affinity.

Adobe vs Affinity

Adobe siempre ha tenido grandes rivales de peso, muchos de los cuales han sido absorbidos por la empresa estadounidense (PageMaker transformado en InDesign; Macromedia Freehand evolucionado a Illustrator, entre otros), por lo que siempre ha estado en la cima. Uno de sus puntos más críticos es el coste, ya que no siempre los usuarios creativos están dispuestos o tienen la posibilidad de costearlo. ¿Es Affinity un rival digno para Adobe?

La suite de Affinity está desarrollada por Serif, una empresa con más de 20 años desarrollando softwares para Windows. Plantean una nueva gama de software gráfico profesional. Presumen de desarrollar estas aplicaciones desde cero teniendo muy en cuenta el actual flujo de trabajo de los diseñadores y creativos, por lo que crean un código totalmente nuevo para hacer frente a las aplicaciones actuales de mayor calidad de diseño creativo. Entre algunas de sus características presumen de las siguientes:

  • Extremadamente rápida, sacándoles todo el partido a nuestra CPU y GPU.
  • Contemplan las tres disciplinas principales: la edición fotográfica, el dibujo vectorial, y la editorial. Recogen a la perfección las herramientas necesarias para el mundo creativo.
  • Usan el mismo formato de archivo entre las distintas aplicaciones, lo cual vemos de lo más interesante.
  • Creación del concepto ‘persona’ para organizar la interfaz en diferentes perfiles dependiendo del caso, pensamos que el nombre no está bien escogido, más que persona debería ser perfil, por ejemplo.

 

Affinity Photo

Tras 5 años de desarrollo presentan la suite de Affinity

Cuentan actualmente con 3 aplicaciones:

  • Affinity Designer: el equivalente natural a Adobe Illustrator, para creaciones gráficas, una solución de lo más completa. También pensado para diseño Web. Con versión de prueba de 10 días.
  • Affinity Photo: el equivalente a Adobe Photoshop, para revelado y edición fotográfica digital. Con versión de prueba de 10 días.
  • Affinity Publisher (en fase beta): el equivalente a Adobe InDesign, para el diseño y maquetación editorial. Al estar en versión beta actualmente podemos utilizarla de forma gratuita hasta que saquen una primera versión, la cual ya será de pago, creemos en unos meses.

 

Nuestra experiencia con la suite Affinity

Nosotros hemos probado las tres aplicaciones y os podemos decir que desde un primer momento las sensaciones son muy buenas. Os comentamos algunos pros y contras de nuestra experiencia:

Affinity Designer

Pros:

  • La interfaz de las 3 aplicaciones son muy similares a las de adobe, por lo que el salto es realmente sencillo, no necesitas mucho tiempo para hacerte a ellas. Sí que es cierto que al estar adaptado al 100% a las aplicaciones de Adobe, a veces algunas cosas debemos indagar un poco hasta poder resolverlas, pero nada complicado, es muy fácil adaptarse, es cuestión de horas. La buena usabilidad las hace muy intuitivas.
  • La compatibilidad entre las 3 es genial, ya que tratan de igual forma tanto textos, como imágenes y sobretodo, el tema vectorial, algo que nos ha encantado. Destacar que los comandos son iguales en las 3 aplicaciones, nos parece genial unificar estos atajos.
  • El precio, sin duda, es un factor muy importante, y con Affinity nos olvidamos del pago mensual, este coste que a veces las empresas pequeñas, freelance, o usuarios creativos no pueden costearse. Con un pago único, y creemos incluso muy barato, actualmente unos 55€ por aplicación, tenemos licencia para utilizar dicho software, sin ningún tipo de pago extra ni suscripción mensual. También somos realistas y no creemos que el precio lo es todo, pero en este caso la calidad de estas herramientas compensa su coste sin ningún tipo de duda, y lo hace una alternativa interesantísima.
  • La suite de Affinity es compatible tanto con Windows como para macOS, por lo que no tendremos problema para utilizar en cualquiera de los dos sistemas operativos. Eso sí, cada versión es un pago diferente, pero dado el coste no lo vemos como un contra.
  • Aplicación para el Ipad, para poder realizar cualquier edición o creación gráfica estés donde esté. El coste para esta plataforma es de unos 22€.
  • El trato de las mesas de trabajo nos ha gustado mucho, muy intuitivo.
  • La calidad y el resultado es profesional. Desde nuestro punto de vista no echamos en falta ninguna funcionalidad a un nivel medio de trabajo. Al principo tal vez nos cueste un poco, pero enseguida hemos podido coger el ritmo normal en el flujo de trabajo.
  • Trata todos los perfiles y formatos que creemos son necesarios (ej.: a la hora de exportar nos da opciones de PNG, JPG, GIF, PSD, PDF, SVG, WMF, EPS, EXR, HDR), de momento no hemos echado en falta ninguno.
  • La importación y edición de archivos de Adobe es muy buena.
    Aunque hemos tenido que modificar luego alguna cosa, sobretodo en tema de agrupación de textos, y el tratado de los bloques de texto, pero nada importante en principio. Para ser justo debemos decir que ha sido en la versión Beta de Publisher, e importando archivos de Illustrator, por lo que no lo damos como un contra.
  • Tienen versión de prueba de 10 días, para probar la aplicación durante unos días completamente gratis. Affinity Publisher actualmente está en versión beta y podemos utilizarla de forma gratuita hasta que saquen una primera versión.
  • El tratado de la pluma en Designer nos ha encantado, como modificar los vectores y los nodos nos ha enamorado. Creemos mucho más sencilla e intuitiva que en Illustrator, a opinión personal.
  • Al haber creado todo el código del software desde cero, se parte desde una base limpia y adaptada a las necesidades actuales del flujo de trabajo creativo, en contra de lo que pasa en Adobe, que al final son mejoras y actualizaciones que vienen de una base algo más antigua, y que a veces dan ciertos problemas. Creemos que esto hace que Affinity sea más fluido y rápido que Adobe.

 

Contras:

  • Si trabajamos con Affinity Designer y tenemos que enviar el archivo a una tercera persona, que solamente utiliza Illustrator, seguramente habrá que hacer algún ajuste. Esto nos pasará igual con Affinity Publisher con InDesign. Tal vez el que menos problema de sea Affinity Photo con Photoshop, ya que la integración entre ambas es mejor.
  • Hemos probado que algunas ilustraciones vectoriales más complejas de Illustrator al abrirlas en Designer pueden cambiar su apariencia, nada que no se pueda arreglar con ciertas modificaciones, pero hay que tenerlo en cuenta.
  • No hemos profundizados en las herramientas y acciones más complejas, pero creemos que Adobe sigue estando por encima a un nivel más alto de profesionalidad, y nos ofrece más herramientas. Aun así creemos que es cuestión de tiempo, ya que Affinity está constantemente actualizando y mejorando sus softwares, y creemos que pueden estar en muy poco tiempo a un mismo nivel.

 

Affinity Design

Las ’Personas’ en Affinity

Utilizan los diferentes perfiles, llamados ‘persona’ para utilizar diferentes herramientas dependiendo de la necesidad del momento.

Por ejemplo, Affinity Designer tiene tres perfiles diferentes:

  • Dibujo: para tratar elementos vectoriales.
  • Pixel: para tratar elementos principalmente imágenes rasterizadas y operaciones con trazos de pincel.
  • Exportación: enfocado a la exportación de elementos de diseño.

Por su parte Affinity Photo tiene cinco modos de trabajo:

  • Foto: para la edición de imágenes.
  • Licuado: para la distorsión de áreas de las imágenes.
  • Revelado: para el revelado de fotografías RAW.
  • Asignación Tonal: para el mapeo de tonos.
  • Exportación: enfocado a exportación de áreas específicas.

Designer tiene una integración muy buena respecto a herramientas de edición de imágenes, y Photo también puede editar elementos vectoriales, por lo que la integración de ambas es muy buena.

 

Tutoriales de Affinity

El propio Affinity tienen tutoriales muy interesantes para aprender a utilizar sus herramientas, os dejamos enlace a sus respectivas páginas:

Desde aquí podéis obtener más información sobre las aplicaciones, a modo de manual (herramientas, operaciones, espacios de trabajo, métodos abreviados de teclado, etc.): https://affinity.help/

 

Conclusión y opinión

Hace bastante tiempo que oímos hablar de ellos, aunque llevamos apenas unos meses utilizándolas, pero el tiempo que llevamos utilizando esta suite estamos muy satisfechos, la interfaz es muy agradable e intuitiva, las herramientas son muy precisas y útiles, y el resultado es profesional.

Si eres creativo del mundo del diseño o la fotografía te recomendamos encarecidamente que los pruebes, no te defraudarán. Aunque al principio nos sentimos un poco “fuera de casa”, tiene algo que engancha, un aire fresco que nos motiva a seguir utilizándolo. Podemos compararlo como cuando nos cambiamos de casa, que nos tenemos que hacer durante unos días, pero que en nada estaremos de nuevo como en casa, o incluso mejor.

 

¿Cuál creéis que debería ser el siguiente software de Affinity? ¿Affinity Video?

 

¿Cómo diseñar una tienda online?

Hoy nos centramos en el diseño en tiendas online, en los puntos más importantes a tener en cuenta para que nuestra tienda online sea un éxito y consiga ventas, siempre desde el punto de vista del diseño y la usabilidad.

Un estudio de la Universidad Webster de Viena demostró que el diseño de una tienda online puede “influir en gran medida en la satisfacción del cliente a la hora de comprar”.

La primera impresión cuenta mucho, por lo que un diseño adecuado es clave para que el usuario se quede en nuestra tienda online y navegue por ella de forma agradable hasta dar con lo que está buscando, y termine comprando.

Pero hay algunos aspectos a tener en cuenta antes de ponernos a crear el diseño:

¿Hay una empresa o marca ya creada?

Debemos respetar la correcta aplicación de dicha marca, siguiendo las pautas de la identidad corporativa ya establecidos. Colores, adaptación correcta del logotipo, tipografías acorde al diseño de la marca, etc. Esto debemos tenerlo en cuenta durante todo el proceso de diseño.

¿Qué tipo de producto se va a vender?

El diseño se va a ver influenciado dependiendo del producto que se vaya a comercializar, ya que no es lo mismo vender zapatillas deportivas que artículos para bebés, el cliente final es diferente. Desde los colores, la tipografía, imágenes, y en general todos los elementos, se van a ver afectados y deben tener cierta coherencia con el producto que se está vendiendo.

Si vendemos accesorios de montaña debemos crear un ambiente acorde a éste, atractivo, dinámico. Si es de relojes, uno más de lujo o distinción.

¿Cuál es nuestro público objetivo?

Debemos tener presente tipo de cliente potencial y el target al que nos estamos “enfrentando”, ya que debemos pensar como lo haría este usuario potencial, que es al final del cual va a depender que vendamos, y que la tienda sea un éxito o no.

Una vez definidos estos dos puntos pasamos a la parte de diseño.

 

Algunos consejos para el diseño de tiendas online:

  • Hacer un estudio de mercado, ver que está haciendo la competencia, y también otros sectores, ya que siempre nos va a dar más perspectiva general a la hora de diseñar la tienda, y poder coger posibles ideas, e incluso mejorarlas, para destacar frente a ellos.
  • Que sea sencillo, menos es más. Eliminar elementos recargados o que puedan distraer al cliente. Todo lo que no sea necesario es recomendable eliminarlo directamente.
  • No ser extremadamente creativos en cuanto a la funcionalidad, ya que puede generar confusiones con el cliente potencial a la hora de querer comprar el producto si el proceso es muy novedoso. Esto lo dejamos más para webs corporativas y más creativas. Aquí el usuario medio ya está ciertamente acostumbrados a las tiendas online, por lo que la usabilidad es clave, y no debemos inventar nada raro para liar al cliente, que sea todo fácil e intuitivo, y siguiendo un poco las pautas estándar establecidas: área privada, carrito, procesos de pago, etc.
  • Evitar grandes sliders o banners con animaciones, que puedan abrumar o marear un poco al usuario. Está demostrado que poca gente se espera a la segunda imagen del slider o clica sobre estos. Suelen estar colocados en zonas de mucha importancia, por lo que aquí debe ir información realmente relevante e importante para el usuario, banners directamente de las categorías, o directamente productos destacados, por ejemplo. Además suelen pesar bastante y esto es negativo para la carga del sitio, por lo tanto para el posicionamiento en buscadores.
  • El material gráfico debe ser de buena calidad, tanto el de los banners, como el de los productos. Cuanta mayor calidad sea estas fotografías o renders mayor calidad y confianza le transmitiremos al usuario, lo cual es clave para la conversión. Intentar elegir la de mayor calidad o donde mejor se vea el producto como imagen principal destacada. Aquí debemos tirar de fotógrafos especializados, o en su defecto (por falta de presupuesto) de algún tipo de caja de luz donde podamos realizar fotografías con cierta calidad.Os dejamos un enlace a uno de nuestros artículos sobre cajas de luces para fotografías de producto > Cómo elegir y utilizar una caja de luz para fotografía de producto
  • Debemos transmitir seguridad y confianza, por lo que debemos poner bien a la vista la información realmente importante para el cliente, como pueden ser: formas de pago, gastos de envío, tiempo de envío, políticas de datos y devoluciones, atención al cliente postventa, contacto, etc, que es una de las cosas que el cliente más busca a la hora de decantarse por comprar un producto, por lo que debemos facilitárselo de la mejor manera, siendo visible en todas nuestras páginas.
    Es importante si el cliente va a comprar un producto que esté a la vista los gastos de envío, ya que suele ser determinante a la hora de comprar un producto. Si no es fijo colocar un enlace donde se explique el coste mediante tablas o tarifas.
  • Diseño actual y moderno, siguiendo las tendencias del momento, ya que el diseño en las tiendas online es algo efímero, y en cuestión de 2 o 3 años se verá desfasado. Cuanto más al día esté mejor para evitar tener una web aburrida y desfasada.
  • Diseño responsive, siempre bien optimizada para los diferentes dispositivos y resoluciones, en especial para móviles. Revisar tanto el aspecto visual como el aspecto funcional, que todos los procesos funcionen bien, comprobando que el proceso de pago funciona correctamente. Cada vez más se realizan compras desde el móvil, por lo que es importantísimo este aspecto.

 

Interfaz intuitiva / usabilidad

La usabilidad cobra mucha importancia en las tiendas online, el “No me hagas pensar” de Steve Krug resume a la perfección este punto. El usuario no debe pensar para navegar o adquirir un producto, si es así podemos perder la venta fácilmente.

Debemos ponernos siempre en la piel del usuario, desde un perfil poco tecnológico. Hacer pruebas entre varias personas a modo test presencial, nos puede hacer una idea de posibles problemas o errores que tal vez damos por hecho que son correctos, pero una vez testado descubrimos que no lo son tanto, y estar a tiempo de corregirlo y optimizarlo.

Si los usuarios se sienten cómodos y la experiencia de compra es agradable en tu tienda seguramente acaben comprando.

 

Algunos módulos y elementos imprescindibles en una tienda online:

  • Buscador:
    Para poder buscar y filtrar entre los diferentes productos.
  • Filtro:
    Si hay muchísimos producto, filtrar por precio, talla, color, etc. puede ser de gran ayuda dentro de una categoría.
  • Los más vendidos / recomendados / destacados / novedades:
    Para destacar productos en nuestro sitio.
  • Opiniones:
    La opinión de otros clientes puede ser un factor clave para la venta. Un ejemplo claro es el sistema de opiniones de Amazon, donde los clientes valoran e incluso interactúan entre ellos.
  • Comparador:
    Si los productos son técnicos o similares puede ser muy útil.
  • Descuento por suscripción (para suscripción a newsletter):
    Es una manera de conseguir una lista de suscriptores, desde la cual se enviarán ofertas y novedades, que junto con un blog y contenido en redes sociales, completarán un buen plan de marketing.
  • Productos relacionados:
    Podemos mostrarlos en la propia ficha de producto, enfocados a quien ha escogido un producto o está valorando comprarlo, de alguna forma mostrarle otros productos que estén relacionado o sean complementarios.
  • Fidelizar clientes:
    Mediante descuento, cupones y ofertas podemos incentivar a cliente para volver a comprar en nuestra tienda, y así conseguir fidelizar clientes. Algún descuento para próximas compras, o descuentos al llegar a cierto importe global pueden ser de mucha utilidad.
  • Formularios de contacto / chat:
    Es importante facilitar el contacto en todo momento con el cliente, ya sea una duda, consulta o servicio postventa. Para ello es recomendable poner a la vista, tanto un formulario, como un teléfono de contacto, o whatsapp, o incluso, si cabe la posibilidad, un chat en vivo para contestar al momento, siempre y cuando pueda haber una persona encargada de atender este chat.

 

Conclusión

Por todo lo analizado, un diseño profesional es imprescindible para éxito de nuestra tienda online. Para ello, lo mejor es ponernos en manos de profesionales, y desde acceso ofrecemos nuestros conocimientos y servicios para realizar tiendas online a medida. ¿Hablamos?

 

¿Qué es el Diseño Web y por qué es necesario?

El diseño web es mucho más que darle un aspecto bonito a una web. Se encarga de la planificación y la distribución de diferentes elementos, basándose en unos principios básicos, donde el objetivo es conseguir una buena experiencia por parte del usuario, que es el verdadero protagonista, no siéndolo el propietario.

Debemos centrarnos en esto, en darle el total protagonismo a los usuarios, ya que serán los auténticos jueces. Una web sencilla, fácil de usar, intuitiva, atractiva y agradable será clave para el éxito de la misma.

El primer paso en el diseño y desarrollo de una web es tener claro el propósito u objetivo de la misma, debe estar bien definido. Debemos saber y tener claro cuál es el fin de nuestra página web: venta de un producto, dar visibilidad o reforzar a una marca, realizar presupuesto de un servicio, darse de alta en newsletter y conseguir contactos, etc. Tras esto, se debe elaborar la correcta comunicación para conseguir ese objetivo, y ahí es donde entra el diseño web.

Empecemos por el principio.

¿Qué es el diseño web? Principios fundamentales

El diseño web viene estrechamente relacionado y derivado del diseño gráfico. A finales de los 90 habían muchos profesionales del diseño gráfico pero no del diseño web, por lo que es una profesión que se ha ido desarrollando “sobre la marcha” y se ha ido definiendo y puliendo a base de experiencia.

El campo del diseño web se resume en tres áreas: creatividad y gusto estético, conocimientos técnicos, y constante actualización.

El punto clave para que todo esto funcione es entender cómo los usuarios interactúan en los sitios web, conocer los patrones básicos de comportamiento mientras navegan, y sobre esto establecer una reglas básicas de comportamiento y usabilidad. Esto es algo que también está en continuo movimiento, por lo que es importante estar siempre actualizado.

Diferencias entre diseño web y desarrollo web.

Cabe mencionar y saber diferenciar entre la fase de diseño web y la fase de desarrollo web, aunque, bien es cierto, que forman parte del mismo pack, ya que el término Diseño Web abarca diseño y desarrollo.

El diseño web se encarga más de la parte visual, la navegación y demás elementos que hacen que la experiencia de usuario sea agradable, y que cumpla el fin con el que se creó la web.

Por otro lado el desarrollo web se encarga de la parte interna, la que no se ve, la que hace posible que todo funcione. Es el encargado de que las acciones que plantea el diseño web se puedan llevar a cabo técnicamente. Engloba sistema de gestión de contenidos, funciones de registro, ecommerce, y cualquier aplicación de base de datos. Debe tener en cuenta aspecto esenciales y de vital importancia, que son de un carácter algo más técnico, como son los tiempos de carga por ejemplo, ya que suele penalizar la conversión, y por ende, el posicionamiento, ya que los buscadores se ponen en la piel de los usuarios, y si una web tarda mucho en cargar suele ser penalizada.

El perfecto equilibrio entre estos dos subcampos es imprescindible para el éxito del sitio web.

 

Elementos que forman parte del diseño web

elementos-diseno-web

Tipografías

Una tipografía adecuada es fundamental para un correcto diseño web.
Tener en cuenta la jerarquía tipográfica, el tamaño de texto adecuado, no demasiado pequeño, el interlineado y la alineación correcta, elección de una tipografía legible y acorde con el proyecto, y no utilizar demasiadas tipografías en un mismo proyecto, son algunas pinceladas clave para la correcta utilización de la tipografía.

Colores

El color tiene mucho poder, influencia desde sentimientos hasta acciones de los usuarios. Puede ayudar a fortalecer tu marca, conseguir ventas y ser determinante a la hora de tomar decisiones. Según estudios, las personas se deciden por un producto en menos de 90 segundos, y el 90% de esa decisión está basada en el color.

Imágenes

Las imágenes tienen mucho poder de persuasión y seducción, por lo que es una forma muy eficaz de centrar y captar la atención del usuario. El dicho “vale más una imagen que mil palabras” se confirma, ya que el usuario no quiere grandes parrafadas de texto, por lo que debemos aprovechar el potencial informativo de la imágenes. Cabe destacar que el uso y elección de las imágenes adecuadas es importantísimo, no vale todo en este campo.

Os dejamos un artículo sobre Los mejores bancos de imágenes gratuitos y de pago

Formas

Todo lo que nos rodea está realizado con formas, por lo que es un elemento visual imprescindible en el diseño web. Puede servir como método para agregar interés al diseño, con la forma como elemento decorativo, por ejemplo. Desde separar secciones hasta darle cierto atractivo a listados, la formas deben estar presentes como un recurso casi natural.

 

Algunos aspectos a tener en cuenta en el diseño web

 

Tamaños

Jugar con los tamaños de diferentes elementos sirve para centrar la atención hacia donde nosotros queramos. El tamaño es la forma más rápida y efectiva de captar la atención del usuario hacia un determinado elemento o sección de la web. Los elementos más grandes llaman más la atención, mientras los más pequeño suelen ser menos relevantes.

Espacios

Los espacios en blanco son elementos importantes para organizar contenidos y asignarles importancia. Un espacio en blanco no es un espacio vacío. Da sensación de orden y organización, es importante dar esos espacio de respiro, siempre bien realizados. Lo usuarios escanean la página y la dividen el área de contenido en secciones de información más digeribles, por lo que estos espacios son de gran ayuda.

Contrastes

El contraste es otro elemento que sirve para destacar zonas o elementos de nuestra web. Pueden ser contrastes de colores, tamaños, tipográficos, etc. Cuanto más drástico es el contraste más nos llamará la atención.

Interacciones

Se centra en la relación entre el usuario y la web. Lo podríamos definir como la conversación entre la web y el usuario: efectos de transición, transformaciones de botones, respuesta del formulario de contacto, etc. Esos detalles que hagan que una conversación sea fluida e interesante, o costosa e incómoda. Hay que buscar siempre que sea sencilla y clara.

Usabilidad y navegación: Principios básicos UX / UI

 

como-disenar-web-usable

Diseño de Interfaz (UI – User Interface)

Se encarga de la selección y distribución de los diferentes elementos que componen la interfaz (ej. textos y campos de formulario). Es la parte más visual y gráfica del proceso, donde entra directamente el apartado gráfico. Lo que el usuario ve al entrar al sitio web.

Experiencia de Usuario (UX – User Experience)

Se encarga de estudiar y mejorar la experiencia del usuario, por lo que se podría decir que UI es parte del UX, es una de tantos campos que abarca este estudio y desarrollo de experiencias. Otros campos que abarca son: velocidad y tiempos de carga, procesos de compra, programación interna de la web, atención al cliente, etc.

Resumiendo, la relación y la experiencia entre la web y el usuario debe ser buena, por lo que debemos tener claro todos estos puntos.

 

Claves para un buen diseño web y sus beneficios

clave-buen-diseno-web

  • Tener en cuenta la navegación por parte de los usuarios, y trabajar este aspecto para que sea lo más amigable para éstos, utilizando, por ejemplo, mapas de calor.
  • Que los usuarios no tengan que pensar, una página web debe ser obvia y explicarse por sí misma. Reducir la carga cognitiva hace que el diseño de una web sea más eficaz.
  • No hacer esperar a los usuarios. Suelen ser impacientes, por lo que todo debe ser fluido e intuitivo, sin que deban realizar pasos innecesarios, ni esperar tiempos largos de carga para realizar algún paso o proceso. Todo debe estar a mano y funcionar correctamente.
  • Jugar con los diferentes elementos para centrar la atención del usuario en lo que queremos. Estos es fundamental para conseguir los objetivos y propósitos de nuestra web. Una buena conversión será el que nos diga si se ha realizado un buen trabajo de diseño web o no.
  • Disponer los diferentes espacios o secciones de una forma clara, para que el usuario pueda fácilmente reconocer y establecer una estructura general de la web y de la información que hay en ella.
  • Utilizar textos claros, breves y concisos, es clave para transmitir el usuario un mensaje directo. El usuario no quiere ver grande y largos texto muy técnicos, si no textos amigables, breves y objetivos.
  • Apostar por la simplicidad, es algo básico. No hacer webs demasiado recargadas a nivel diseño, ya que el usuario al final quiere obtener información. Es importante conseguir un equilibro entre contenido y diseño.
  • Sin miedo a los espacios en blanco, ya que reduce la carga cognitiva, de forma indirecta. Estructuras limpias y con espacios serán más fáciles de asimilar para el usuarios, por lo que captará mejor la información de la web.

Os dejamos un artículo sobre Tendencias de diseño web para 2018

No podemos olvidar un diseño web amigable y adaptativo: responsive web design

 

Cada vez más tiene más peso el diseño web responsive, el ejemplo es un titular que veíamos hace poco: “si no tienes una web responsive Google te penalizará”.

La tendencia actual nos dice que móviles y tablets se están convirtiendo en el medio preferido por los usuarios para navegar y realizar sus comprar por internet.

Lo que se quiere conseguir con todo esto es mejorar la experiencia del usuario en los nuevos dispositivos.

 

En resumen

Hay que estudiar bien los diferentes aspectos que forman el diseño web. Es un sector relativamente nuevo, pero en pleno auge y sin vistas a que deje de crecer, ya que el diseño aplicado a tecnologías y aplicaciones web solo acaba de empezar.

Apostar por diseño web te asegura un estudio personalizado de tu proyecto, y utilizar las herramientas que más se ajusten a él. Esa personalización conlleva distinguirnos de nuestros competidores, y ajustarnos más a los objetivos y propósitos de nuestra web.

Desde acceseo ponemos a vuestra disposición un equipo especializado para asesorar y estudiar tus proyectos, y conseguir llevarlos a cabo de la forma más adecuada.

 

Tendencias de diseño web para 2018

Vamos a resumir y destacar los puntos más importantes de tendencias web para este año 2018.
¡No te lo pierdas para tener una web a la última!

 

Diseños Personalizados

Cada vez las webs se parecen más, ya que siguen unos patrones y unas tendencias generalmente similares, por lo que la diferenciación y la personalicación es uno de los retos para 2018. Ilustraciones, fotografías propias, y un estudio y desarrollo por parte de un equipo especialista y dedicado a ello es fundamental.

En un mundo plagado de plantillas, donde muchas páginas se parecen entre sí se debe apostar por un diseño personalizado, donde cada elemento esté estudiado exclusivamente para el proyecto en cuestión. Aunque se utilicen elementos comunes, la personalización de éstos es fundamental para darle personalidad propia y carácter a nuestra web, y poder así diferenciarnos de nuestra competencia.

 

Estilo Minimal

Fuente: http://titusklein.com/

Diseño sencillo y limpio, es algo que vemos día a día, cada vez se opta más por este tipo de estilo para el diseño web, en cada vez más campos y sectores. Se prioriza la teoría de menos es más.

Espacios y fondos claros, donde los protagonistas son los propios textos, la tipografía como tal, y algún elemento más como algún icono, fotografía, y botones también de estética minimalista y sencilla.

Este estilo se ve reflejado no solo en el diseño de la web en sí, también en diferentes elementos como logotipos o imagen de marcas que aparecen en estas webs.

Este tipo de diseño poco recargado favorece considerablemente a los tiempos de carga de una web, y a la hora de adaptar las webs a mobile y tablets. Esto repercute positivamente en el posicionamiento en buscadores, algo imprescindible para nuestras webs. ¿Qué más se puede pedir?

 

Diseño Modular, estilo Masonry

Fuente: http://veerle.duoh.com/inspiration

Basado en el estilo de Pinterest, se basa en la disposición de modulos o tarjetas (estilo estructura Masonry). Muy práctica para mostrar información de una forma heterogénea, y muy útil cuando cada módulo tiene un tamaño o está formado por diferentes elementos. Este tipo de disposición o maquetación es muy favorable respecto a la adaptación a diferentes dispositivos.

 

Colores más fuertes y brillantes

Fuente: http://elje-group.com/

Toman fuerza los colores brillantes, fuertes y llamativos. ¡Estamos en el momento de los colores vivos!

Parece que las empresas abandonan su gamas de colores más apagadas y aburridas para dar un salto de color. Optan por por una gama mucho más fuerte y vibrante, y generan así una forma fácil personalidad propia, muy favorable para ser reconocidos a simple vista. ¿Quién no reconoce Instagram solo por su colorida gama?

Un cambio sencillo en el diseño puede suponer un cambio muy grande a nivel visual, y generar una gran repercusión y ser un gran impulso. Este cambio se ve reflejado en las webs sin duda, y en todos los elementos relacionados. Son un recurso muy a tener en cuenta cara este 2018 y ver cómo va evolucionando.

 

Degradados y Duotonos

Fuente: !/

Lo degradados, o gradientes,  parece que vienen con fuerza, tras desaparecer a finales de los 2000, parece que en 2018 vuelven, ya vimos algo el año pasado. Parece que son una evolución natural del FlatDesign, (diseño plano) conocido también como Flat 2.0 o diseño semi-flat.

Su reaparición en iOS y secundado por algunas de las grandes empresas como Instagram han consolidado su popularidad. Dan cierta sensación vibrante y le dan mucha vida a las webs.

Fuente: https://www.internetum.com/en/

Por su lado los duotonos son la reproducción de una imagen donde se destacan los medios tonos y la iluminación haciendo uso de dos colores. Tradicionalmente era un proceso de impresión, donde se utilizaban planchas para la aplicación del color.

Se utilizan para potenciar las imágenes que van de la mano del diseño minimalista, dando cierta originalidad en las imágenes principales de una web, un recurso que los diseñadores van a utilizar este 2018 sin duda. También es una buena solución para maximizar la legibilidad de textos sobre imágenes

 

Hero / Fullscreen, dejando un poco de lado el famoso slider

Fuente: airewestperth.com.au

Esta tendencia viene ya arrastrada del 2017, donde las imágenes fullscreen siguen teniendo gran protagonismo, y parece que reforzando su peso respecto a otros elementos. Son un gran atractivo para la primera impresión de nuestra web, la portada, y esto parece estar dejando de lado los famosos sliders, queridos por mucho y odiados por otros.

Son una herramienta potente, y reduce tiempos de carga respecto al slider, y lo hace más adaptable aun al Responsive.

 

Tipografía Handmade, y mucha negrita

Fuente: https://weareisland.com/

La tipografía estilo Handmade sigue teniendo fuerza en las tendencias web 2018. Confieren personalidad propia y le dan un mucho carácter a las webs. Ese estilo de “hecho a mano” sigue estando de moda. No hay que abusar de ellas, y se recomienda utilizarlas en titulares o partes principales de la web, como la portada.

Fuente: http://www.monsieurcaillou.com/#!/

Para paliar un poco la saturación de contenido vamos a ver mucho el tema de las tipografía negritas. Fuentes grandes y atrevidas para llamar la atención de los visitantes. Se opta por tanto por el texto como elemento protagonista en algunas webs.

 

Responsive vs. Diseño exclusivo para móvil

Fuente: http://www.panicstudio.tv/en/

Adaptarse o morir, esa es la tónica, ya que las visitas a través de dispositivos móviles están creciendo exponencialmente, por lo que nuestra web debe estar 100% adaptada a este tipo de dispositivos.

Pero en 2018 parece que esto va un poco más allá, muchos diseñadores ya plantean no solo la adaptación de la web al móvil, si no un diseño exclusivo para dispositivos, o directamente una Progressive Web App, sobre la que os comentamos a continuación.

 

Carga progresiva / Progressive Web Apps

Esto es una parte más técnica de la web, de la parte más de maquetación y desarrollo, ya que la optimización de las webs es otro de los retos para este 2018, y algo que se va a tener muy en cuenta. El tiempo de carga afecta directamente al abandono por parte del usuario, por lo que el sistema de carga progresiva es un punto muy a tener en cuenta por desarrolladores.

Pero la autentica revolución para este 2018 son las Progressive Web Apps, siendo  el futuro de las web mobile. Una mezcla entre app móvil y app web, caracterizan por permitir almacenamiento local, carga sin conexión a Internet y en un tiempo incluso superior al de una App nativa. También admiten notificaciones push relevantes, es totalmente adaptable con experiencia de pantalla completa, icono de inicio en móvil, y mucho más. ¡Estaremos muy atentos a su evolución!

 

Animaciones, y microinteracciones

Fuente: https://www.apple.com/apple-watch-series-3/

Necesarias para crear un vínculo entre los usuarios y la web, hacerlos formar parte de ella. Dan mucho dinamismo al diseño, y se suelen aplicar a botones, al hacer scroll, y acciones que dependen del usuario.

Si se utilizan de una forma adecuada con muy recomendables, para darle vida a nuestra web, que no sea tan estática. Hay que tener cuidado de no cargar la web demasiado, usarlas de forma adecuada.

Los hovers deben ser tratados también con esta filosofía, ya que debe haber siempre una respuesta visual y comunicativa con el usuario cuando un elemento tenga algún tipo de interacción, ya sea una imagen o un botón, que tenga enlace o algún tipo de funcionamiento. Desde nuestro punto de vista es algo muy importante y que se tiene que tratar con cierto mimo.

 

Botones Ghost

Fuente: https://couple.me/alice

Aunque no son nuevos, se mantienen dentro de las tendencias como un recurso a tener en cuenta. Son botones de estilo minimalista, que se adaptan muy bien con el tema de las imágenes fullscreen (Hero), o a las webs de estilo minimalista donde se usan fondos y espacios claros. Transmiten ligereza y elegancia, y sirven para definir diferentes CTA en la página. Se caracterizan por tener el borde a color, pero sin rellen, de ahí lo de ghost o fantasma, ya que son de naturaleza transparente. Con un simple relleno en hover generamos una interacción atractiva y agradable para el visitante. Debe saber utilizarse, ya que no es recomendable para todos los casos este estilo.

 

SVG al poder

Fuente: https://material.io/icons/

Los JPGs y PNGs se están quedando desfasados, como elementos gráficos, y dan paso a los gráficos vectoriales SVG. Son archivos beneficiosos, ya que su peso es reducido a la hora de ser cargados, y se pueden reescalar sin perder calidad, y en cualquier resolución lo vamos a ver a la perfección, más aun en la era de las resolución 2k, 4k, UHD, etc. Si pueden ser propios siempre le daremos una personalidad y un carácter más propio, pero también hay otros recursos, como Fontawesome, desde donde podemos utilizar iconos para nuestras web, siendo tratados como fuentes.

Son escalables, y personalizables mediantes css, tanto en color como en tamaño, incluso se pueden animar. En resumen, más que una tendencia son casi una obligación para mejorar la optimización de una web. Cabe tener muy en cuenta el SVG para nuestros futuros proyectos, e implementarlos de forma correcta.

 

EXTRA

Color 2018: Pantone Ultra Violet

Fuente: https://www.pantone.com/color-of-the-year-2018

Pantone, la autoridad global indiscutible del color ha elegido el Pantone 18-3838 Ultra Violet como el color del año 2018.

“Un tono violeta dramáticamente provocativo y pensativo, PANTONE 18-3838 Ultra Violet comunica originalidad, ingenio y pensamiento visionario que nos señala hacia el futuro.”
Así lo definen ellos mismos.

Es elegido por los directivos de la misma empresa, junto con otros 40 expertos de todo el mundo, basados en todo tipo de factores, desde económicos hasta sociales, canciones, películas, etc.

Lo remarcamos como color tendencia, no quiere decir que lo tengamos que usar, pero no esta de más conocer las tendencias y colores de moda.

 

Conclusión

Aquí resumimos puntos clave de las tendencias web para este año 2018 que creemos van a ser más relevantes a nivel diseño web. Hay muchos más factores y elementos que no incluimos, ya que podría ser infinito el artículo, pero hemos destacado lo más importantes, desde nuestro punto de vista y experiencia.

Cabe tenerlos en cuenta para futuros proyectos, y en cada uno de ellos aplicar estos recursos de forma siempre debida y adecuada, y dependiendo del proyecto requeriremos de unos u otros, hay que saber bien definir cuándo usar unos elementos o recursos u otros.

Desde acceso ponemos a vuestra disposición un departamento de diseño y asesoramiento para cualquier consulta y propuesta. ¿Hablamos?

Cómo elegir y utilizar una caja de luz para fotografía de producto

El aliado perfecto para la fotografía de producto, softbox o caja de luz para fotografía, es un producto que se ha ido extendiendo cada vez más, gracias a un precio bastante asequible, y con el que se obtienen unos resultados bastante buenos.

Vamos a explicaros paso a paso qué es, cómo funciona, cómo elegir la que mejor se adapte a tus necesidades, y cómo utilizarla para obtener los mejores resultados. Empecemos por el principio.

 

¿Qué es una caja de luz de fotografía o softbox?

 

Softbox o Caja de luz para fotografía es una estructura de tipo caja, similar a un miniescenario, con paredes traslucidas, que se utiliza para iluminar un objeto de forma indirecta, mediante iluminación externa de focos, buscando una iluminación suave y óptima (generando unas sombras suaves), y poder realizar fotografías de productos con gran calidad.

Necesitaremos una iluminación externa para jugar con la luz y poder obtener el resultado que queremos. Con unos sencillos focos de luz blanca podemos conseguir una iluminación óptima para realizar la fotografía.

Muy útil también cuando a un producto queremos quitarle el fondo, ya que generamos fotografías con fondo blanco (o negro, o del color que queramos) y en edición (Photoshop) es más sencillo quitarles el fondo y dejar el producto sin fondo.

Este tipo de fotografía es muy útil para catálogos, bodegones, tiendas online, etc.

Existe la posibilidad de realizar nuestra propia caja de luz mediante reutilización de materiales como: caja de cartón (para la estructura) y papel vegetal/cebolla o tela blanca (para las paredes), una opción interesante para iniciarnos en este mundo a un coste casi nulo. Pero en este caso vamos a analizar las cajas de bajo coste que podemos encontrar en internet, como por ejemplo en Amazon.

 

¿Cómo elegir nuestra caja de luz?

 

Puntos a tener en cuenta:

  • Fácil montaje y desmontaje, y que ocupe poco espacio al guardarla.
  • Relación calidad/precio adecuada para lo que es.
  • Tamaño, dependiendo del tipo de objetos que queramos fotografiar.
  • Tipo de material.
  • Que sea portátil.
  • Que tenga varios fondos, en diferentes colores (mínimo blanco y negro).
  • La iluminación que debe llevar, si va integrada o va a parte.
  • Resultado de la fotografía que sea buena (aunque esto no lo sabremos hasta probarla). Importante ver comentarios y opiniones de otros compradores.

Existen un par de líneas definidas en cuanto a modelos de cajas de luz que podemos encontrar en internet. Descartando una línea más profesional, donde los precios se disparan, y enfocado a un público que se dedica profesionalmente a esto, encontramos una línea más económica, para realizar trabajos más esporádicos, con un precio asequible y un resultado bastante bueno.

Nos encontramos con dos tipos diferenciados de cajas, las de tela, y las de plástico.

 

Caja de luz de tela

Por un lado tenemos las cajas de tela, que son plegables y ocupan muy poco a la hora de guardarlas y transportarlas (estilo tienda de campaña de rápido montaje). Se trata de una estructura de varillas de metal, y cubierta de tela fina y traslucida, la cual deja pasar la luz, y difumina la luz de nuestros focos. Cuentan con varios fondos de tela ‘aterciopelados’, cada uno de un color diferente, por lo que tenemos un amplio abanico de posibilidades a la hora de poner un fondo a nuestro producto. Un consejo, lo mejor es plancharlos (con un trapo entre la plancha y el fondo), ya que vienen plegados y quedan muy arrugados para la fotografía, y una vez hecho esto guardarlo enrollados, no plegados.

A parte de la caja de luz en sí, necesitaríamos una iluminación extra. Existen focos específicos para este tipo de fotografía, pero por abaratar costes podemos comprar focos o flexos económicos de cualquier bazar, junto con unas bombillas de bajo consumo o led, de luz fría y potente. Aconsejaría 2 focos mínimo, uno para cada lado, y si puede ser un tercero que iría arriba, para conseguir una luz cenital. Estos focos debemos colocarlos alejados de la caja (no demasiado) pero para conseguir una iluminación lo más difusa e indirecta posible, para no generar brillos, y obtener unas sombras lo más suave posible.

Es una opción bastante válida para realizar fotografía de producto, además encontramos varios tamaños, hemos visto de hasta 120x120x120cm (para objeto bastante grandes), por lo que se adaptan a nuestras necesidades. Muy recomendable para objetos de cierto tamaño.

Os dejamos link a Amazon del modelo que hemos podido probar en otra ocasión > amazon

 

Caja de luz de plástico

Son la otra línea de cajas de luz, y en nuestro caso vamos a analizar este tipo de cajas, que creemos han tomado el protagonismo ultimamente.
Son de plástico blanco, algo traslucido, pero bastante más opacas que las de tela, por lo que la iluminación externa es algo más compleja, en este caso la iluminación es interior, mediante tiras led que ya van incorporadas. Después analizaremos si esto es positivo o negativo.

Nos decantamos por la caja de Amazon Zecti > amazon

Especificaciones:

  • Tamaño: 30x30x30cm
  • Iluminación: 2 tiras de luces regulables proporcionan una iluminación de hasta 700LM. Se fijan mediante imanes, por lo que son removibles.
  • Precio: 28,99€ (precio que tenía cuando lo compramos)
  • Fondos: 2, blanco y negro, no reflejan.
  • Otros: Domo superior desmontable para fotografías superiores.

Al abrirla nos encontramos con la caja plegada, las tiras led, y los dos fondos (blanco y negro).

Se montan y desmontan de forma fácil la estructura principal, ya que funciona todo mediante imanes, tanto los laterales, como las tiras led, que en nuestro caso probamos a ponerla en los laterales internos de la caja. Éstas se conectan a la luz mediante USB, y cuentan con un interruptor para enchufarlas, y un regulador para subir o bajar la potencia de los led.

Tras esto nos encargamos de colocar el fondo.
Cuenta con dos fondos, uno blanco y uno negro, suficiente para nuestro caso, pero esta vez son de EVA, no de tela, por lo que no vamos a tener problemas con las arrugas. Se enganchan en la parte interior superior de forma sencilla mediante unas pestañas, y queda todo bien encajado. Una solución, en general, que nos ha gustado bastante.

Es bastante intuitivo, por lo que en apenas unos minutos tendremos nuestra caja lista para ser utilizada.

Cuenta con un Domo o cúpula superior desmontable mediante velcros, desde la cual podremos realizar fotografías en ángulo cenital, bastante útil la verdad, para fotografiar el producto desde arriba.

Cabe destacar que el tamaño es bastante contenido, por lo que podremos realizar fotografías a objetos relativamente pequeños: joyería, monedas, relojes, etc. Este tipo de cajas no tiene modelos mucho más grandes (o por lo menos no hemos encontrado), imaginamos que por el tipo de estructura, ya que no sería estable en tamaños superiores, lo máximo que hemos encontrado es de 40x40x40cm (no la elegimos porque solo tenía una tira led). Para objetos más grandes recomendamos nuevamente la de tela.

Tras esto ya podemos pasar al siguiente paso, colocar el objeto a fotografiar, y prepara el equipo fotográfico. Nosotros contamos con el trípode Hama Star 61 y la réflex Canon EOS1200D con disparador remoto por cable. Esto ya depende de cada uno el equipo del que disponga, incluso con un smartphone de última generación podemos conseguir fotografías de gran calidad, debido al gran salto que han dado las cámaras duales.

 

Caja de luz retroiluminada + Plugins Photoshop postproducción
Actualización 2018

Seguimos actualizando el artículo con novedades. Os traemos un producto que nos ha parecido de lo más interesante para este 2018, la caja de luz fotografía retroiluminada Bbox de Bambú light box. Bbox es una caja de luz perfecta para fotografía de producto, ya que gracias a su optimizado proceso de trabajo, podemos llegar a realizar más de 150 fotografía de producto en un solo día.

Además, cuenta con plugins para Photoshop personalizados con los que conseguimos una automatización del proceso de postproducción, por lo que ahorramos tiempo y dinero, y además conseguimos un resultado realmente bueno.

Os dejamos con un par de vídeos de esta interesante caja de luz:

¿Cómo realizar correctamente la fotografía de producto?

 

Os vamos a dar unos consejos para realizar correctamente las fotografías, siempre que usemos una cámara tipo réflex, o evil, donde tenemos opción de disparar las fotografías de forma manual. Todo esto siempre dependerá del objeto a fotografiar, un objeto brillante siempre será algo más complejo de enmascarar que un objeto mate, ya que los brillos y reflejos que genera dificultarán el proceso de iluminación del objeto, y nos dará un poco más de trabajo.
Esto es un tema muy extenso y no vamos a profundizar mucho, solo un pequeño esquema a seguir:

  • Elegir un fondo neutro, negro o blanco.
  • Una buena iluminación es imprescindible, debiendo difuminarla adecuadamente.
  • Utilizar un trípode y un disparador remoto, para evitar vibraciones de la cámara.
  • Disparar siempre en formato RAW, para su posterior revelado digital.
  • Colocar la cámara en modo manual.
  • Realizar un correcto balance de blancos, para que el resultado sea lo más fiel a la realidad.
  • Diafragma (f/): dependiendo de la profundidad de campo que queramos lograr ajustaremos el diafragma. Si queremos el objeto totalmente enfocado optaremos por un diafragma más cerrado (por ejemplo f/22). Si por el contrario queremos crear una sensación de desenfoque optaremos por un diafragma más abierto (por ejemplo f/5,6). Nosotros aconsejamos un término medio, a mitad de lo que nos permita nuestro objetivo (por ejemplo f/8 o f/11), los resultados suelen ser buenos.
  • ISO: siempre recomendado el ISO más bajo posible, generalmente un ISO 100, ya que como va a ser una escena bien iluminada vamos a tirar de trípode y disparador, no necesitamos forzar la ISO ya que pierden calidad, incluso posible aparición de ruido, totalmente evitable en este caso.

Una vez tengamos todo esto listo solo nos queda darle a nuestro disparador remoto, para así no tocar la cámara ni el trípode, para evitar vibraciones indeseadas y asegurar que el disparo es lo más nítido posible.

Aquí entra el punto de prueba y error. Aconsejamos realizar diferentes disparos, con diferentes parámetro, configuración de iluminación, y con diferentes posiciones del objeto, cuanto más material tengamos mejor para luego elegir las que más nos guste. Analizar este material e intentar tener en cuenta estos parámetros para realizar próximas sesiones de fotografías de productos.

Existe la posibilidad de conectar la cámara al PC o portátil y mediante un software poder en la pantalla directamente la imagen antes de disparar, incluso controlar los ajustes de la cámara. Esto ya es estudiar las posibilidades de nuestra cámara.

Tras esto cabe destacar que la edición posterior es casi obligatoria, para conseguir unos resultados mucho más profesionales, aquí es donde entra el formato RAW. Desde definir el nivel de blancos y sombras, hasta el retoque de imperfecciones del propio objeto. Aquí ya entra el nivel de exigencia del proyecto, el nivel de dificultad del producto, los conocimientos que tengamos de software de retoque y edición, etc. Para el revelado digital os aconsejamos el Lightroom (de Adobe), un software profesional, de uso no muy complejo para un usuario normal, y con resultados excelentes. Para un posterior retoque fotográfico o montaje publicitario de dicho producto ya deberíamos entrar en el mundo del todopoderoso Photoshop.

 

Aquí os dejamos una muestra del resultado de algunas fotografías:

 

Conclusión y opinión de la caja de luz Zecti de Amazon

 

El resultado en general es bueno si no somos excesivamente exigentes, ya que dependiendo del producto obtendremos mejor o peor resultado, y os explicamos por qué.

La iluminación de los productos debe ser buena para obtener los mejores resultados, y ésta debe ser lo más difusa posible, y en este caso, al ser iluminación interna, aunque las tiras led llevan unos pequeños difusores, no consiguen del todo su cometido, y obtenemos unos brillos en los objetos que no nos terminan de convencer, creemos que una iluminación externa sería más apropiada, por esto tal vez la opción de una caja de luz de tela y unos focos externos obtendríamos mejor resultados.

Pros:

  • Precio.
  • Portabilidad.
  • Montaje y desmontaje.
  • 2 tiras led incluidas.

Contras:

  • Iluminación insuficiente e interna, genera brillos y luz demasiado directa.
  • Tamaño, para objetos de cierto tamaño se queda corta.

Aun así, creemos que este tipo de cajas cometen perfectamente su cometido.
Son una opción muy recomendable para conseguir fotografías de producto con un cierto nivel. Creemos que es importante obtener buenas fotografías de los productos que nos interesan comercializar, ya que puede ser clave a la hora de la venta final. Por un bajo coste podemos obtener buenos resultados.

Los mejores bancos de imágenes gratuitos y de pago

Hoy en día la elección de las imágenes para nuestros proyectos juegan un papel muy importante. Estamos rodeados de imágenes, ya que son un elemento muy potente visualmente, que captan mucho la atención del usuario, y las vemos por todos los lados: en blogs, redes sociales, sitios webs, carteles, publicidad, productos, editorial, etc.

No siempre se tiene a mano material propio de calidad para nuestros proyectos, además el tiempo muchas veces aprieta, y los recursos no son suficientes, por lo que necesitamos tener a nuestro alcance buenos recursos y herramienta, ya que el resultado del trabajo siempre será mejor. Existe una interesante oferta de bancos de imágenes de muy buena calidad, tanto de pago como gratuitos.

Debemos tener en cuenta que las imágenes que podemos usar en nuestros proyectos, tanto personales como profesionales/comerciales, deben estar libre de derechos, y el autor debe dar permiso por escrito, o bien poseer una Licencia de Creative Commons (CC0). Hay mucho tipos de Licencias Creative Commons, por lo que debemos fijarnos en las que tengan CC0 de dominio público (https://creativecommons.org/publicdomain/zero/1.0/deed.es_ES), sin derechos reservados. Esto quiere decir que puedes:

  • Utilizarla para uso personal o comercial.
  • Puedes copiarla, modificarla o distribuirla.
  • Todo ésto, sin pedir permiso ni dar atribución de ningún tipo.

Por lo que puedes hacer con ella lo que quieras.

De todas formas lo mejor es revisar la licencia de cada imagen o banco de imágenes de donde descarguemos el recurso, para asegurarnos que cumple los requisitos del uso que le vamos a dar. Puede ser que algunas tengan excepciones, y sean solo de uso personal, y no comercial, por ejemplo. Debemos cerciorarnos al 100% antes de utilizarla.

A continuación os dejamos una selección de bancos de imágenes gratuitos y también una selección de bancos de pago, ya que a veces las exigencias son mayores y por un mínimo precio el resultado de nuestro trabajo puede verse muy potenciado.

 

Mejores bancos de imágenes gratuitos

 

Unsplash

Uno de los mejores y más completos bancos de imágenes CC0 que existen. La calidad de sus imágenes es excelente. Fotografías contemporáneas y elegantes, libres de derechos. Además, incluye un buscador y te ofrecen 10 imágenes nuevas cada 10 días si te suscribes a su lista. Cuenta con más de 200,000 fotografías de alta resolución listas para descargar sin ningún tipo de registro.

 

Stokpic

Es un banco de imágenes muy completo, con imágenes de altísima calidad, creativas, y de crecimiento constante. Con licencia Creative Commons tienen solamente una limitación, puedes hacer de todo con ellas excepto redistribuirlas. También permite, mediante suscripción, recibir semanalmente un lote de fotografías libres de derechos.

 

Pexels

Un excelente banco de imágenes gratuito, que suma cada día nuevas fotografías de alta calidad. Cuenta con un extenso repertorio, de más de 30,000 imágenes de muy alta calidad, sumando cada mes al menos 3,000 nuevas.

 

StockSnap

Otro de los mejores bancos de imágenes gratuitas, con fotografías de altísima calidad, donde podrás encontrar miles de fotos de cualquier área, ya sea tecnología, naturaleza, medicina, paisajes, etc., con excelente resolución. Incluye un buen buscador y una licencia Creative Common de dominio público que te permitirá darle uso personal o comercial a las fotos, editarlas, modificarlas o distribuirlas sin permiso o atribución alguna.

 

Pixabay

Una de las más conocidas, y una de las pocas que está en español, aunque suele funcionar mejor el buscador si lo haces en inglés. Cuenta con más de 1 millón de fotografías, vectores e ilustraciones. Además a añadido también vídeos, lo cual lo hace bastante interesante. La calidad de las imágenes es bastante buena, si bien es cierto que a veces se obtienen mejores resultados que otros, pero junto con el resto de recursos lo convierte en uno de los más completos.

 

Picjumbo

Esta es un proyecto del diseñador y fotógrafo Viktor Hanacek, quien cada día sube nuevas fotografías e imágenes de alta calidad, y libres de derecho. Cuenta con millones de descargas, y creemos que cabe mencionarlo en nuestra selección ya que la calidad de éstas es muy alta.

 

Foter

Es un buen banco de imágenes, que ofrece millones de imágenes para descargar, o embeber directamente en nuestra web. El repertorio es muy amplio, cuenta con más de 220 millones de imágenes de gran calidad. Por contra, la resolución creemos que es algo justa, ya que no superan los 800px de anchura, lo cual se queda algo corto para la resoluciones actuales.

 

Magdeleine

Una gran selección de imágenes con el común denominador del ‘menos es más’. Fotografías que juegan con los contrastes. La mayoría de las imágenes son de dominio público (CC0), aunque algunas imágenes sí que tienen otro tipo de licencia, de atribución al autor, pero lo puedes comprobar al entrar dentro de cada imagen, en su margen superior derecho. Son imágenes de altísima calidad y resolución, perfectas para proyectos web, por ejemplo.

 

Gratisography

Aquí nos encontramos con un banco de imágenes diferente, con imágenes creativas, originales, y de excelente calidad. Se dividen en categorías, y son perfectas para proyecto más creativos y originales. Posiblemente uno de los bancos más divertidos.

 

Startupstockphotos

Este banco se centra en las startups, bloggers, editores, sitios web, diseñadores, creadores, desarrolladores y sitios webs relacionados con el mundo tecnológico. Todas ellas con Licencia de Creative Commons (CC0). Echamos en falta un buscador, pero bueno, la calidad y el estilo de las imágenes es bueno, y pueden sernos de gran ayuda en algún proyecto.

 

 

Mejores bancos de imágenes de pago

 

Shutterstock

Digamos que es el banco de imágenes por excelencia (el más conocido), y cumple perfectamente su cometido.
Contiene más de 125 millones de recursos entre imágenes (fotografías, vectores, ilustraciones, iconos), clips de vídeo y pistas musicales.

Tiene diferentes planes a medida, desde planes por demanda, es decir, las imágenes que necesitemos o queramos descargar (mínimo de 5), hasta planes mensuales de descarga y pago mensual. Aquí ya según las necesidades de cada uno. A parte de esto, diferencia entre Licencia Estándar (más limitada a nivel reproducciones) y Licencia Mejorada (con más derechos sobre los recursos).

 

iStockPhoto

Se puede decir que es la competencia directa de Shutterstock, y uno de los más famosos en estos últimos años, otro peso pesado. No cuenta con tanta cantidad de recursos como sus competidores, unos 6 millones (sus competidores triplican estos datos como mínimo), quedándose algo rezagado frente a la competencia, pero tiene un buscador y unos filtros que lo hacen realmente interesante a la hora de encontrar lo que necesitamos. También cuenta con planes de tipo suscripción y de tipo “prepago”, donde pagaremos por lo que queramos descargar, a un precio bastante estándar respecto a sus competidores. Siempre a tener en cuenta en nuestros proyectos.

 

Depositphotos

Con un plan mensual mucho más ajustado de precio que las anteriores, contamos con una de las colecciones de imágenes en formato vector más extensas del momento, más de 2 millones.
Cuenta con una colección total de más de 50 millones de archivos en total. A nivel fotografías, cuenta con un amplio abanico de muy alta calidad y definición. Suele ofrecer descuentos interesantes, que llegan hasta el 20% en imágenes de temporada, que lo hacen muy interesante.

 

Fotolia

De la todopoderosa Adobe (comprada tras un acuerdo millonario), cuenta con uno de los mayores archivos de recursos, 94 millones entre imágenes, vectores y vídeos libres de derechos. La fotografías son de primera calidad, y en su plataforma podemos encontrar alguna libres de derechos completamente gratis, lo cual es una grata sorpresa.

En cuanto a precio, los planes suscripción son similares a las anteriores, pero a nivel compra de créditos para descargas puntuales sale bastante mejor de precio. Digamos que a nivel personal sale mejor de precio, ya que para menor cantidad de imágenes sale mejor, las anteriores son algo más enfocadas a empresas que requieren de más cantidad de recursos semanal o mensualmente.

 

Adobe Stock

Es la nueva tienda de Adobe, más enfocada a sus programas y planes Creative Cloud, por lo que si eres diseñador este es tu banco de imágenes, ya que puedes probarlas (con marca de agua), comprarlas y utilizarlas directamente desde Photoshop o Illustrator como si fuera una Librería. Cuenta con más de 45 millones entre fotos, plantillas, vídeos y gráficos, todas de alta calidad como no puede ser de otra forma tras esta firma. Cuenta con varias opciones de tarifa, pero todas ellas en forma de suscripción.

 

123rf

Uno de nuestros favoritos por su relación calidad/precio. Es un banco espectacular con más de 82 millones de imágenes, vectores, vídeos y audio libres de derechos a precios bastantes asequibles, en comparación con la mayoría del resto de bancos de imágenes. Además cuenta con una sección de recursos gratuitos, aunque no debemos crearnos demasiadas expectativas, ya que no son para tirar cohetes.

Cuenta con 3 tipos de tarifas, uno en modo Paquete de descarga, de 5 o de 25 imágenes; otro en modo Plan suscripción, con pago mensual y con un límite de descargas, aunque un número bastante alto de descargas; y un último tipo que es para comprar mediante créditos, para comprar lo que necesitas, siendo 10 créditos el mínimo (unos 13€). Éste último plan se adapta perfectamente a cualquier bolsillo. Banco recomendado por su calidad y precio.

 

Dreamstime

Incluimos este banco de imágenes ya que es similar al anterior, en términos de relación calidad/precio, ya que por precios bastante asequibles podemos conseguir aquellas imágenes que necesitemos. Cuenta con los dos tipos típicos de tarifas, el de suscripción, y el de créditos, con el que pagamos por las imágenes que necesitamos. Cuenta también con un amplio abanico de recursos: Fotografías, Imágenes enfocadas a editorial, Ilustraciones, Vídeos, Audio, y una sección de imágenes gratuitas, en este caso nos ha gustado más lo que hemos visto que en el caso de 123rf. Un banco de recursos realmente recomendable.

 

Canstockphoto

Cerramos nuestra selección de principales bancos de imágenes de pago con Canstockphoto, un banco que va cogiendo popularidad y va en aumento. Añaden cada día más de 25,000 imágenes de alta calidad, ya que cuentan con más de 65mil colaboradores cualificados. Es una de las páginas que mayores comisiones paga a sus colaboradores, entorno el 50% de los beneficios van para el colaborador, por lo que en este aspecto es bastante interesante.

Aunque lo que nos interesa en este caso es como usuario final de recursos, cuenta con los dos típicos tipo de tarifas, el de suscripción, y el de créditos. Los precios son asequibles, sin ser los más baratos, pero pagas por lo que necesita, a un precio bastante competitivo.

Conclusión:

Existe una gran variedad de bancos de imágenes de gran calidad, aquí solo hemos mostrados una selección de los que creemos que hay que tener en cuenta.

Sobre los gratuitos, si vamos a utilizar imágenes puntuales y es el caso que los recursos monetarios no son demasiado elevados, intentaremos satisfacer las necesidades con este tipo de bancos, ya que indagando en unos y otros podemos encontrar material de cierta calidad, sobretodo muy a tener en cuenta en blogs, redes sociales, incluso webs de cierto tipo.

En el caso de los de pago, si buscamos algo más profesional (lo cual es aconsejable) y los recursos económicos lo permiten, debemos elegir en cada caso el que mejor se adapte a nuestras necesidades, ya que si somos una empresa y necesitamos gran cantidad de recursos de este tipo semanales o mensuales, nos interesará un plan de suscripción en un banco de imágenes con gran cantidad de archivos.

En cambio, si somos freelance o requerimos de una cantidad más puntual de recursos, optaremos por el sistema de créditos, el de pagar por lo que necesitemos, aunque ya decidiremos lo que queremos gastarnos en cada caso o proyecto, y optaremos por un tipo de banco más extenso y de precio más estandarizado, o por uno de precio más asequible, donde la relación calidad/precio sea un requisito básico.

Una vez encontremos el banco que mejor se adapte trabajaremos de una forma bastante cómoda a la hora de encontrar y tramitar los archivos que necesitemos, lo que aumentará nuestra productividad, y los resultados serán satisfactorio. Aunque no debemos estancarnos siempre en uno, y estar en contacto con diferentes alternativas, que siempre nos darán un enfoque diferente.

Si necesitáis cualquier tipo de asesoramiento, no dudéis en contactar con nosotros.

5 extensiones para Chrome imprescindibles para un diseñador

principal_

 

Cada día aparecen nuevas herramientas que nos ayudan a agilizar ciertos procesos de trabajo, muy interesantes para nuestros proyectos. En el diseño estas herramientas son muy útiles, y hoy os traemos una selección de 5 herramientas fundamentales que debes conocer. Son extensiones para Google Chrome, mediante las cuales completaremos de forma más eficiente los procesos de diseño, y mejoraremos la calidad de nuestros trabajos.

 

 

1 – Colorzilla

 

colorzilla-for-firefox

 

Esta herramienta ayuda a diseñadores y desarrolladores web a gestionar el color. Se trata de un conjunto de herramientas relacionadas con el color: un selector de color, un cuentagotas con el que podremos saber el color exacto que se está usando en una web, tanto en formato RGB, Hex, etc., también podemos generar paletas de colores para nuestros proyectos, e incluso generar el css de degradados que creemos.

 

 

2 – Page Ruler

 

 

Esta herramienta nos permite tomar medidas, en tiempo real, de cualquier elemento de una web, obtenemos las medidas de alto por ancho en píxeles. El funcionamiento es muy sencillo y básico, pero muy útil si queremos obtener medidas de algún elemento de forma rápida.

Nota: Somos muy fans de Measurelt, pero no es 100% compatible con Chrome, así que esperemos que solucionen esto, de momento lo usamos solo en Firefox.

 

 

3 – Awesome Screenshot

 

 

Con esta extensión podemos generar capturas de la página web, de su totalidad, de la zona que estamos viendo, o de la zona que elijamos. Da la opción de ‘garabatear’ sobre nuestra captura de pantalla con diferentes elementos, cuadrados, elipses, flechas, líneas, textos o dibujos libres, además de poder recortar la zona que nos interese. Una vez lo tengamos listo en la previsualización lo guardamos y listo.

Nota: Echamos de menos en Chrome la herramienta de Pearl Crescent, pero solo está para Firefox, aún así esta herramienta cumple la misma función. Actualización 2018: Ya está disponible: https://chrome.google.com/webstore/detail/page-saver/kbchedinmkicifjhlmlcnklhephjpngp

 

4 – Responsive Web Design Tester

 

 

Hoy en día es fundamental tener en cuenta el diseño Responsive, por lo que esta herramienta nos ayudará a visualizar una web en diferentes tipos de dispositivos.
Simplemente haciendo click derecho sobre la web, y eligiendo el dispositivo sobre el que queremos visualizar nuestra web, aparecerá una nueva ventana donde podremos ver como queda dicha web en el dispositivo seleccionado. Tenemos una gama limitada de dispositivos, pero suficientes para hacer un test de como se visualiza y se adapta la web elegida.

 

4.1 Herramianta online que también cumple esta función:

resizer_rd

http://design.google.com/resizer/

Ésta herramienta online es oficial de Google, la cual solemos utilizar también para comprobar la adaptabilidad de una web nueva que hemos desarrollado. Cuantas más pruebas realicemos, más nos cercioraremos de que el responsive está bien ejecutado en la más amplia gama de dispositivos.

Simplemente ponemos la URL y nos aparece en los diferentes tipos de dispositivos.

 

 

5 – Font Playground

 

 

Con esta herramienta podemos probar como quedaría una web con otro tipo de tipografía, de una forma sencilla y rápida, a tiempo real. Puede seleccionas entre las mas de 10.000 fuentes de Google Fonts, y ver como quedaría una misma web con el cambio de la tipografía. Es muy importante a nivel visual escoger la tipografía adecuada para nuestro proyecto, y puede darle a la web un aspecto mucho más interesante si elegimos la tipografía más apropiada.

 

 

+ EXTRA

What Font

 

what-font

 

Con esta herramienta podemos saber de una forma rápida la tipografía de una web (siempre que sea texto, claro) simplemente con pasar por encima con el ratón. Además si clicamos sobre el texto que nos interesa nos abre un desplegable donde nos informa del tamaño, el interlineado, y el color. Realmente rápida y útil!

 

 

¿Alguna incidencia?

Cuéntanos qué ocurre
y nos pondremos con ello lo antes posible.

Sucríbete a
nuestra newsletter

para estar al día en el mundo online

¡Cuéntanos tus ideas!
+34 96 653 19 14
+info@acceseo.com
He leído y acepto la política de privacidad