Penalizaciones de Google y buenas prácticas
Las penalizaciones de Google son la peor pesadilla de todo webmaster. Un día puedes estar arriba, disfrutando de una posición ultra-competitiva, y al día siguiente has desaparecido completamente de los resultados de búsqueda.
¿Te ha penalizado Google?
Cuando alguien se encuentra con una pérdida repentina del tráfico en su web, lo primero que se nos ocurre pensar es que nos han penalizado. ¡Pero no siempre es así! Puede ser debido a: fluctuaciones en los resultados del buscador, las tendencias de búsqueda cambian, tus competidores te ganan, o por un problema con el archivo robots.txt.
Primero debes descartar cualquiera de estas posibilidades y si es así, entonces sí te debes plantearte una penalización.
¿Cómo sabes si has caído en una de las penalizaciones de Google?
Éstos son los síntomas comunes de las penalizaciones de Google:
- El tráfico orgánico procedente de Google se reduce
- El sitio pierde visibilidad para algunas o todas las palabras clave
- Ciertas páginas desaparecen de los resultados de búsqueda
- El dominio deja de aparecer al buscarlo por su nombre
- El dominio se desindexa del buscador
Estos síntomas no aparecen por casualidad. Generalmente, Google impone sanciones por:
- Crear enlaces artificiales para potenciar los rankings
- Recargar las páginas de palabras clave para aumentar la relevancia
- Copiar contenidos de otras páginas
- Llenar el pie de página de enlaces sin relación
- Hacer intercambios excesivos de enlaces
- Comprar o vender enlaces
- Emplear textos ocultos
- Mostrar un contenido al buscador y otro diferente al usuario
Tipos de penalizaciones de Google
Penalizaciones de Google manuales
Se inician por dos razones:
- Tu sitio ha disparado una señal de alarma
- Alguien ha enviado un informe de spam.
Tras esto un miembro del buscador revisa tu sitio y, si es pertinente, aplica una acción manual. Posteriormente recibes una notificación a través de Search Console.
Es el caso más grave y costoso de recuperar.
Penalizaciones de Google algorítmicas
Un algoritmo detecta que tu sitio incumple las directrices del buscador en cierto grado y automáticamente te aplica una sanción (ej: -20 posiciones en el ranking). Constantemente se revisa el algoritmo, así que hay que ser flexibles a los cambios.
Existen 4 cambios en el algoritmo importantes:
- PANDA: Se centra en la calidad del contenido. Su aparición proviene principalmente de la proliferación de webs con poco contenido, contenido duplicado, malware,.. Fue lanzado por primera vez el 23 de febrero del 2011.
- PENGUIN: Se centra en la calidad de los enlaces. Google Penguin está destinado a filtrar de la SERP aquellas webs cuyo portfolio de links recibidos de otras webs no es natural. Fue lanzado por primera vez el 24 de Abril del 2012.
- COLIBRÍ: Colibrí NO es realmente un algoritmo que PENALIZA como Panda y Penguin, sino que tiene el objetivo de humanizar más el navegador que ya de por sí lo es. Es decir, trata de comprender y facilitar la búsqueda del usuario. Fue lanzado el 20 de Agosto del 2013.
- PIGEON: Se especializa en ofrecer una mejor experiencia en los resultados de las búsquedas locales. Busca priorizar los resultados de los sitios Web locales y los negocios más cercanos a la ubicación del usuario. Fue lanzado el 24 de Julio de 2014.
Aquí no recibes ningún tipo de notificación, pero es más fácil de solucionar.
Es importante que sepas cuál es tu caso ya que el procedimiento para recuperarse varía. Si Google te ha mandado un mensaje a través de Search Console no hay duda de que te ha penalizado manualmente.
Buenas prácticas para evitar las penalizaciones de Google
Existen buenas prácticas para developers a la hora de desarrollar webs para evitar que su página quede penalizada por Google.
- Web adaptative (PIGEON)
- No crear una web spam o con el mismo contenido que otra web (PENALIZACIÓN MANUAL o PANDA)
- Si es un negocio local, registrarte en Google My Business y en algunos directorios de localización tipo Yelp (PIGEON)
- Indicar en el “Meta-Title” tu localización (PIGEON)
- No crear texto oculto y/o spam de palabra claves (PENALIZACIÓN MANUAL)
- Evitar el keyword stuffing: abuso excesivo de palabras clave (PANDA)
- No crear enlaces no naturales de tu sitio Web a otro (PENALIZACIÓN MANUAL)
- No crear enlaces recíprocos ni de mala calidad (PENGUIN)
- Crear una página de “Preguntas frecuentes” (COLIBRÍ)
Fuente: Laura Ares, Responsable de Marketing de Visual Engineering.
Análisis del menú hamburguesa en diseño de interfaz
El menú hamburguesa es un botón que normalmente se sitúa en una esquina de la parte superior de la interfaz gráfica, y que se usa como menú donde guardar enlaces o categorías para facilitar la navegación. La forma consiste en tres líneas horizontales paralelas, que sugieren una lista. Se llama hamburguesa por su similitud con las capas de una hamburguesa.
Ha sido muy usado durante los últimos años en el mundo web y móvil, y se ha vuelto un icono del diseño de interfaces. Pero últimamente se está cuestionando su utilidad, e incluso las últimas tendencias en diseño sugieren que éste desaparecerá en un futuro no muy lejano. Eso es debido a que no es muy útil a nivel de usabilidad ya que esconde acciones que podrían ser principales en un menú y obliga al usuario a tener que hacer varios clics para acceder a cualquier opción, retardando el tiempo de llegada a la acción.
PROS
- Es reconocido por los usuarios como un menú, ya que se ha usado mucho últimamente.
- Ocupa poco espacio en la pantalla, y eso puede ser útil en interfaces pequeñas.
- Es minimalista estéticamente y hace que el diseño sea más limpio.
CONTRAS
- Como está escondido, obliga al usuario a hacer un clic más para acceder a él.
- Suelen ser como un cajón donde poner categorías, y la mayoría de veces se extiende demasiado, dificultando la acción o la búsqueda de cosas.
- Es poco usable, y a veces las interfaces que usan este menú buscan más la estética que la usabilidad.
- Esconde contenido y acciones, haciendo que no sea visible, y eso hace que el usuario pueda perderse.
MENÚ HAMBURGUESA EN EL MÓVIL
Si nos fijamos en el móvil, como las pantallas son de tamaño más reducido, el objetivo principal del menú hamburguesa es conseguir que la navegación sea lo más fluida posible ocupando el mínimo espacio posible de la pantalla. Es por eso que durante los últimos años se ha estado usando, ya que se escondía la navegación y dejaba libre la pantalla. Pero de esta forma también se escondían acciones principales que el usuario usaba a menudo.
Por este motivo, últimamente se están usando como alternativa tabs para las acciones principales, visibles en la pantalla para que el usuario pueda acceder a ellas en cualquier momento. Y si hay acciones secundarias, pensar en alternativas, como sí que podría
ser el menú hamburguesa en este caso, o las acciones de la barra de navegación, o las acciones flotantes en el caso de Android.
Pensando también en la ergonomía del móvil, la parte inferior de la pantalla es donde es más fácil acceder con el dedo. Es por eso que se sugiere poner las acciones principales en la parte inferior, como podrían ser los tabs, y las acciones secundarias en la parte superior, donde el usuario tiene que acceder un menor número de veces.
MENÚ HAMBURGUESA EN LA WEB
En la web cambia un poco ya que normalmente los tamaños de la pantallas son más grandes y hay más espacio. Es por eso que
raramente se necesita un menú hamburguesa, ya que las acciones principales se pueden poner directamente a la vista sin necesidad de esconderlas, facilitando así el clic del usuario.
Se sugiere como buena práctica reducir el número de categorías, intentando llegar a un máximo de seis categorías principales. Estas categorías podrían ocupar la parte superior de una web, sin causar problemas de espacio al usuario.
En los pocos casos en que tendría sentido usar un menú hamburguesa en web sería cuando el contenido de la web es excesivo. En este caso sí sería necesario esconder los demás links en un menú secundario, que podría ser el menú hamburguesa. Aún así, dificulta la navegación del usuario, que si no están bien categorizadas las opciones dentro del menú de navegación.
Actualmente, los usuarios están bastante familiarizados en hacer scroll, y esto podría ser una alternativa. Simplemente poner el contenido a continuación, y usar un menú visible para facilitar el acceso a las distintas secciones específicas. Estas páginas son las nombradas landing pages, donde todo el contenido está en un scroll, sin necesidad de clics. Son útiles para webs de presentación con poco contenido y podrían ser una gran alternativa al menú hamburguesa.
Análisis del menú hamburguesa en diseño de interfaz
El menú hamburguesa es un botón que normalmente se sitúa en una esquina de la parte superior de la interfaz gráfica, y que se usa como menú donde guardar enlaces o categorías para facilitar la navegación. La forma consiste en tres líneas horizontales paralelas, que sugieren una lista. Se llama hamburguesa por su similitud con las capas de una hamburguesa.
Ha sido muy usado durante los últimos años en el mundo web y móvil, y se ha vuelto un icono del diseño de interfaces. Pero últimamente se está cuestionando su utilidad, e incluso las últimas tendencias en diseño sugieren que éste desaparecerá en un futuro no muy lejano. Eso es debido a que no es muy útil a nivel de usabilidad ya que esconde acciones que podrían ser principales en un menú y obliga al usuario a tener que hacer varios clics para acceder a cualquier opción, retardando el tiempo de llegada a la acción.
PROS
- Es reconocido por los usuarios como un menú, ya que se ha usado mucho últimamente.
- Ocupa poco espacio en la pantalla, y eso puede ser útil en interfaces pequeñas.
- Es minimalista estéticamente y hace que el diseño sea más limpio.
CONTRAS
- Como está escondido, obliga al usuario a hacer un clic más para acceder a él.
- Suelen ser como un cajón donde poner categorías, y la mayoría de veces se extiende demasiado, dificultando la acción o la búsqueda de cosas.
- Es poco usable, y a veces las interfaces que usan este menú buscan más la estética que la usabilidad.
- Esconde contenido y acciones, haciendo que no sea visible, y eso hace que el usuario pueda perderse.
Menú hamburguesa en el móvil
Si nos fijamos en el móvil, como las pantallas son de tamaño más reducido, el objetivo principal del menú hamburguesa es conseguir que la navegación sea lo más fluida posible ocupando el mínimo espacio posible de la pantalla. Es por eso que durante los últimos años se ha estado usando, ya que se escondía la navegación y dejaba libre la pantalla. Pero de esta forma también se escondían acciones principales que el usuario usaba a menudo.
Por este motivo, últimamente se están usando como alternativa tabs para las acciones principales, visibles en la pantalla para que el usuario pueda acceder a ellas en cualquier momento. Y si hay acciones secundarias, pensar en alternativas, como sí que podría
ser el menú hamburguesa en este caso, o las acciones de la barra de navegación, o las acciones flotantes en el caso de Android.
Pensando también en la ergonomía del móvil, la parte inferior de la pantalla es donde es más fácil acceder con el dedo. Es por eso que se sugiere poner las acciones principales en la parte inferior, como podrían ser los tabs, y las acciones secundarias en la parte superior, donde el usuario tiene que acceder un menor número de veces.
Menú hamburguesa en la web
En la web cambia un poco ya que normalmente los tamaños de la pantallas son más grandes y hay más espacio. Es por eso que
raramente se necesita un menú hamburguesa, ya que las acciones principales se pueden poner directamente a la vista sin necesidad de esconderlas, facilitando así el clic del usuario.
Se sugiere como buena práctica reducir el número de categorías, intentando llegar a un máximo de seis categorías principales. Estas categorías podrían ocupar la parte superior de una web, sin causar problemas de espacio al usuario.
En los pocos casos en que tendría sentido usar un menú hamburguesa en web sería cuando el contenido de la web es excesivo. En este caso sí sería necesario esconder los demás links en un menú secundario, que podría ser el menú hamburguesa. Aún así, dificulta la navegación del usuario, que si no están bien categorizadas las opciones dentro del menú de navegación.
Actualmente, los usuarios están bastante familiarizados en hacer scroll, y esto podría ser una alternativa. Simplemente poner el contenido a continuación, y usar un menú visible para facilitar el acceso a las distintas secciones específicas. Estas páginas son las nombradas landing pages, donde todo el contenido está en un scroll, sin necesidad de clics. Son útiles para webs de presentación con poco contenido y podrían ser una gran alternativa al menú hamburguesa.
Evento "SKETCH APP PARA JEDIS"
Hace unos días nuestros diseñadores fueron al evento de "Sketch app para Jedis" presentado por Carlos Alberto Rodriguez Behning en Transformabcn.
Como bien conocen nuestros diseñadores, Sketch App permite crear diseños, para móvil y web, con una agilidad y flexibilidad que muchas otras apps no habían ofrecido hasta el momento, y por eso se ha convertido en una herramienta indispensable en nuestra empresa.
Nuestros diseñadores trabajan día a día con este software, por eso es importante que conozcan todas las novedades y técnicas que puede ofrecer. Así, fueron a ese evento y allí aprendieron nuevos consejos más avanzados de Sketch y cómo diseñar colaborativamente con Dropbox y por qué es bueno hacerlo.
Algunos de los consejos que aprendieron fueron:
- Limitar un símbolo. Son los Artboards de los símbolos que definirán sus límites, aún cuando las formas que estén dentro los superen. Pero puedes hacer que un Artboard tenga el mismo tamaño de su contenido seleccionándolo y eligiendo la opción “Resize to fit” en el Inspector
- Redimensionar con la herramienta "scale" para que el objeto no pierda su forma original ni quede desproporcionado.
- Combinar en un solo símbolo todos los estados de una barra de navegación. El truco, para ocultar capas de texto, es usar un [espacio] como el valor en el overrides de la capa a ocultar.
- Utilizar un icono u otro elemento que actúe como un “placeholder” debajo de la imagen que será visible sólo en los casos en los que se mantenga la imagen original transparente. De ese modo servirá para simular que se está cargando la imagen real en vez de mostrarse como un elemento vacío.
En cuanto a trabajar conjuntamente Sketch y Dropbox, las claras ventajas que tiene es que permite a los diseñadores trabajar a la vez en el mismo proyecto sin afectar al otro y que todos los cambios se van sincronizando al momento de forma que todos pueden ver a tiempo real los cambios que se van aplicando en el diseño.
Finalmente, hicieron un ejemplo práctico para poder comprobar esas ventajas y aprender a trabajar con estas dos herramientas. Y además, uno de nuestros diseñadores ganó una licencia de Sketch para un año. ¡Felicidades!
Evento "Sketch app para Jedis"
Hace unos días nuestros diseñadores fueron al evento de “Sketch app para Jedis” presentado por Carlos Alberto Rodriguez Behning en Transformabcn.
Como bien conocen nuestros diseñadores, Sketch App permite crear diseños, para móvil y web, con una agilidad y flexibilidad que muchas otras apps no habían ofrecido hasta el momento, y por eso se ha convertido en una herramienta indispensable en nuestra empresa.
Nuestros diseñadores trabajan día a día con este software, por eso es importante que conozcan todas las novedades y técnicas que puede ofrecer. Así, fueron a ese evento y allí aprendieron nuevos consejos más avanzados de Sketch y cómo diseñar colaborativamente con Dropbox y por qué es bueno hacerlo.
Algunos de los consejos que aprendieron fueron:
- Limitar un símbolo. Son los Artboards de los símbolos que definirán sus límites, aún cuando las formas que estén dentro los superen. Pero puedes hacer que un Artboard tenga el mismo tamaño de su contenido seleccionándolo y eligiendo la opción “Resize to fit” en el Inspector
- Redimensionar con la herramienta “scale” para que el objeto no pierda su forma original ni quede desproporcionado.
- Combinar en un solo símbolo todos los estados de una barra de navegación. El truco, para ocultar capas de texto, es usar un [espacio] como el valor en el overrides de la capa a ocultar.
- Utilizar un icono u otro elemento que actúe como un “placeholder” debajo de la imagen que será visible sólo en los casos en los que se mantenga la imagen original transparente. De ese modo servirá para simular que se está cargando la imagen real en vez de mostrarse como un elemento vacío.
En cuanto a trabajar conjuntamente Sketch y Dropbox, las claras ventajas que tiene es que permite a los diseñadores trabajar a la vez en el mismo proyecto sin afectar al otro y que todos los cambios se van sincronizando al momento de forma que todos pueden ver a tiempo real los cambios que se van aplicando en el diseño.
Finalmente, hicieron un ejemplo práctico para poder comprobar esas ventajas y aprender a trabajar con estas dos herramientas. Y además, uno de nuestros diseñadores ganó una licencia de Sketch para un año. ¡Felicidades!
Evento #UXRETAIL organizado por UX Academy
Ayer, nuestros diseñadores tuvieron la oportunidad de asistir al evento #UXRETAIL, organizado por UX Academy, en el Mobile World Center.
En el evento #UXRETAIL hubieron dos grandes ponentes: Laia Grassi y Adrià Montiel, ambos especializados en la experiencia de usuario en el mundo del retail.
#UXRETAIL: Laia Grassi
Laia Grassi empezó contando todas las novedades que había en el mercado. Entre estas comentó como Alexa de Amazon estaba empezando a estar presente en el sector del automóvil o como Facebook empezó a introducir el retail en su plataforma, así como también habló de Magic Leap y del Prime Air de Amazon.
Una vez comentadas las novedades, se centró en el tema de la experiencia del usuario en la que dio bastante énfasis que la experiencia tiene que ser omnicanal.
¿Qué significa esto?
El usuario tiene que tener siempre la misma experiencia, independientemente del dispositivo en el que navegue o incluso de si la experiencia es online u offline, ya que los usuarios pasan de un canal a otro continuamente.
Un dato curioso es que el 82% de clientes usan la app cuando están en la tienda: miran los objetos online y los comparan con la offline. Nos mostró el caso de Ikea, empresa para la cual trabaja y diseña la aplicación móvil. Cuando la diseñaron, pensaron en el potencial que tenía el hecho de que los usuarios llevaran la app cuando estaban dentro del establecimiento, y incluyeron distintas funcionalidades, como usar el escáner de productos a través de la cámara del móvil, lanzar ofertas específicas o mostrar el mapa de la tienda.
Destacó la importancia de no caer en errores típicos cuando se diseña para plataformas digitales. Es muy importante para el usuario, que la experiencia sea lo más fácil y óptima posible y que no resulte molesta. Por eso hay muchos pequeños detalles que los diseñadores deben considerar como por ejemplo si realmente se necesita un formulario de registro obligatorio, o si introducir un pop-up que pueda ser intrusivo. Si se tienen en cuenta todos estos detalles se puede conseguir que no sólo sea una experiencia amena sino que incluso resulte agradable y sorprendente.
#UXRETAIL: Adrià Montiel
“La venta no termina cuando el cliente paga, sino cuando vuelve”
Adrià Montiel es el Product Owner de Mango, por eso con su gran experiencia se centró en contar de primera mano cómo se debería diseñar una app para el sector del retail.
Entre muchos datos, nuestros diseñadores destacaron algunas de ellas de las que hablaremos a continuación.
Destacó que no es lo mismo la moda que la ropa básica. Según él, la moda es diferenciación y por ello las apps deben ser bonitas y que aporten valor a la moda y a la marca.
Aun así, se debe considerar también su conversión. Ya puede ser una app que tenga un gran diseño que si no aporta conversión, no es óptima. Se debe buscar un equilibrio entre ambos aspectos. En un market place, las reviews ayudan, pero para un retail de moda puede perder el sentido.
El producto debe ser aspiracional, por eso hay que considerar las fotos grandes, que sean visibles y atractivas.
Otro aspecto muy importante en el retail que quizás algunos no lo consideran significante es el "buscador". Es realmente imprescindible y puede afectar mucho a la conversión si el usuario tiene dificultades para localizarlo.
Además, nos contó algunas novedades, como el Echo Look y el On Demanding Apparel de Amazon:
-
Echo Look es un gadget con micrófono y altavoz que usa el asistente virtual Alexa. Tiene una cámara capaz de hacer fotos y vídeos que usa inteligencia artificial. Su objetivo es decirte si la ropa que llevas conjunta y si vas a la moda. Realiza un lookbook de tu ropa que sirve para sugerirte futuras compras en función de tu estilo.
-
On Demanding Apparel es un software que hace que una vez la gente ha comprado un elemento, automatice la producción de éste consiguiendo que sea lo más eficiente posible.
Por último, insistió en que no se debe olvidar las tiendas físicas y se tiene que buscar experiencias para que la gente no deje de ir.
Evento #UXRETAIL organizado por UX Academy
Ayer, nuestros diseñadores tuvieron la oportunidad de asistir al evento #UXRETAIL, organizado por UX Academy, en el Mobile World Center.
En el evento #UXRETAIL hubieron dos grandes ponentes: Laia Grassi y Adrià Montiel, ambos especializados en la experiencia de usuario en el mundo del retail.
#UXRETAIL: Laia Grassi
Laia Grassi empezó contando todas las novedades que había en el mercado. Entre estas comentó como Alexa de Amazon estaba empezando a estar presente en el sector del automóvil o como Facebook empezó a introducir el retail en su plataforma, así como también habló de Magic Leap y del Prime Air de Amazon.
Una vez comentadas las novedades, se centró en el tema de la experiencia del usuario en la que dio bastante énfasis que la experiencia tiene que ser omnicanal.
¿Qué significa esto?
El usuario tiene que tener siempre la misma experiencia, independientemente del dispositivo en el que navegue o incluso de si la experiencia es online u offline, ya que los usuarios pasan de un canal a otro continuamente.
Un dato curioso es que el 82% de clientes usan la app cuando están en la tienda: miran los objetos online y los comparan con la offline. Nos mostró el caso de Ikea, empresa para la cual trabaja y diseña la aplicación móvil. Cuando la diseñaron, pensaron en el potencial que tenía el hecho de que los usuarios llevaran la app cuando estaban dentro del establecimiento, y incluyeron distintas funcionalidades, como usar el escáner de productos a través de la cámara del móvil, lanzar ofertas específicas o mostrar el mapa de la tienda.
Destacó la importancia de no caer en errores típicos cuando se diseña para plataformas digitales. Es muy importante para el usuario, que la experiencia sea lo más fácil y óptima posible y que no resulte molesta. Por eso hay muchos pequeños detalles que los diseñadores deben considerar como por ejemplo si realmente se necesita un formulario de registro obligatorio, o si introducir un pop-up que pueda ser intrusivo. Si se tienen en cuenta todos estos detalles se puede conseguir que no sólo sea una experiencia amena sino que incluso resulte agradable y sorprendente.
#UXRETAIL: Adrià Montiel
La venta no termina cuando el cliente paga, sino cuando vuelve
Adrià Montiel es el Product Owner de Mango, por eso con su gran experiencia se centró en contar de primera mano cómo se debería diseñar una app para el sector del retail.
Entre muchos datos, nuestros diseñadores destacaron algunas de ellas de las que hablaremos a continuación.
Destacó que no es lo mismo la moda que la ropa básica. Según él, la moda es diferenciación y por ello las apps deben ser bonitas y que aporten valor a la moda y a la marca.
Aun así, se debe considerar también su conversión. Ya puede ser una app que tenga un gran diseño que si no aporta conversión, no es óptima. Se debe buscar un equilibrio entre ambos aspectos. En un market place, las reviews ayudan, pero para un retail de moda puede perder el sentido.
El producto debe ser aspiracional, por eso hay que considerar las fotos grandes, que sean visibles y atractivas.
Otro aspecto muy importante en el retail que quizás algunos no lo consideran significante es el “buscador”. Es realmente imprescindible y puede afectar mucho a la conversión si el usuario tiene dificultades para localizarlo.
Además, nos contó algunas novedades, como el Echo Look y el On Demanding Apparel de Amazon:
-
Echo Look es un gadget con micrófono y altavoz que usa el asistente virtual Alexa. Tiene una cámara capaz de hacer fotos y vídeos que usa inteligencia artificial. Su objetivo es decirte si la ropa que llevas conjunta y si vas a la moda. Realiza un lookbook de tu ropa que sirve para sugerirte futuras compras en función de tu estilo.
-
On Demanding Apparel es un software que hace que una vez la gente ha comprado un elemento, automatice la producción de éste consiguiendo que sea lo más eficiente posible.
Por último, insistió en que no se debe olvidar las tiendas físicas y se tiene que buscar experiencias para que la gente no deje de ir.
ZEPLIN, UN SOFTWARE INDISPENSABLE EN NAPPTILUS
En nuestra empresa los diseñadores trabajan día a día con los developers. Para poder desempeñar bien el desarrollo de un proyecto es muy importante que tengan una comunicación muy activa. Existen dos software de diseño que facilitan este diálogo: Sketch y Zeplin.
Estas dos software de diseño indispensables en Napptilus permiten que los diseñadores y developers puedan estar al día de todos los cambios que se van desarrollando a lo largo del proyecto.
A continuación vamos a detallar la funcionalidad de Zeplin.
ZEPLIN
Zeplin es un software que permite incorporar los diseños hechos con Sketch cogiendo la guía de estilo, y que permite exportar los iconos de forma automatizada. En resumen, es el intermediario de nuestros diseñadores y developers.
Para nuestros diseñadores, ha sido top ya que les ha ahorrado muchas horas en la implementación de los diseños. A continuación vamos a contar cómo lo hacían anteriormente para justificar la gran solución que ha supuesto la aparición de esta herramienta:
Uno de los puntos a destacar es el intercambio de recursos, es decir, cómo informar a los developers de la tipografia que has utilizado y cómo son los iconos que has enviado. Se trata de problemas diarios en los que puedes dedicar muchas horas. Antes de Zeplin, una vez diseñada una plantilla se exportaba en formato PNG y se pasaba al desarrollador. Además, se adjuntaba una hoja de estilo donde explicaba la tipografía de cada uno de los elementos y los colores, entre otras especificaciones. Finalmente, se tenía que exportar manualmente cada uno de los iconos, con formato @1x, @2x y @3x para iOS, y en hdpi, mdpi, xhdpi, xxhdpi i xxxhdpi para Android.
Ahora, con la aparición de Zeplin, eso ha quedado totalmente obsoleto. Ahora todo es tan fácil como diseñar en Sketch, marcar para qué plataforma estás diseñando (Android, iOS o web), señalar los iconos y subirlo a Zeplin. Una vez allí, el developer podrá ver la tipografía, los colores, descargarse automáticamente todas las medidas y la posibilidad de mostrar la navegación de las pantallas. Además, en las últimas actualizaciones también han incorporado la funcionalidad de control de versiones.
Y por último, permite hacer comentarios en cada pantalla de manera que si el developer tiene alguna duda o el diseñador quiere comentarle alguna cosa a él, pueden escribirlo directamente y mantener una comunicación activa.
Conoce la herramienta de Sketch en el siguiente enlace.
Zeplin, un software indispensable en Napptilus
En nuestra empresa los diseñadores trabajan día a día con los developers. Para poder desempeñar bien el desarrollo de un proyecto es muy importante que tengan una comunicación muy activa. Existen dos software de diseño que facilitan este diálogo: Sketch y Zeplin.
Estas dos software de diseño indispensables en Napptilus permiten que los diseñadores y developers puedan estar al día de todos los cambios que se van desarrollando a lo largo del proyecto.
A continuación vamos a detallar la funcionalidad de Zeplin.
ZEPLIN
Zeplin es un software que permite incorporar los diseños hechos con Sketch cogiendo la guía de estilo, y que permite exportar los iconos de forma automatizada. En resumen, es el intermediario de nuestros diseñadores y developers.
Para nuestros diseñadores, ha sido top ya que les ha ahorrado muchas horas en la implementación de los diseños. A continuación vamos a contar cómo lo hacían anteriormente para justificar la gran solución que ha supuesto la aparición de esta herramienta:
Uno de los puntos a destacar es el intercambio de recursos, es decir, cómo informar a los developers de la tipografia que has utilizado y cómo son los iconos que has enviado. Se trata de problemas diarios en los que puedes dedicar muchas horas. Antes de Zeplin, una vez diseñada una plantilla se exportaba en formato PNG y se pasaba al desarrollador. Además, se adjuntaba una hoja de estilo donde explicaba la tipografía de cada uno de los elementos y los colores, entre otras especificaciones. Finalmente, se tenía que exportar manualmente cada uno de los iconos, con formato @1x, @2x y @3x para iOS, y en hdpi, mdpi, xhdpi, xxhdpi i xxxhdpi para Android.
Ahora, con la aparición de Zeplin, eso ha quedado totalmente obsoleto. Ahora todo es tan fácil como diseñar en Sketch, marcar para qué plataforma estás diseñando (Android, iOS o web), señalar los iconos y subirlo a Zeplin. Una vez allí, el developer podrá ver la tipografía, los colores, descargarse automáticamente todas las medidas y la posibilidad de mostrar la navegación de las pantallas. Además, en las últimas actualizaciones también han incorporado la funcionalidad de control de versiones.
Y por último, permite hacer comentarios en cada pantalla de manera que si el developer tiene alguna duda o el diseñador quiere comentarle alguna cosa a él, pueden escribirlo directamente y mantener una comunicación activa.
Conoce la herramienta de Sketch en el siguiente enlace.
SKETCH, UN SOFTWARE DE DISEÑO INDISPENSABLE EN NAPPTILUS
En nuestra empresa los diseñadores trabajan día a día con los developers. Para poder desempeñar bien el desarrollo de un proyecto es muy importante que tengan una comunicación muy activa. Existen dos software de diseño que facilitan este diálogo: Sketch y Zeplin.
Estos dos software de diseño indispensables en Napptilus permiten que los diseñadores y developers puedan estar al día de todos los cambios que se van desarrollando a lo largo del proyecto.
Hoy vamos a detallar la funcionalidad de Sketch.
SKETCH
Sketch es un software de diseño específico para diseño vectorial y se utiliza principalmente para diseñar tanto interfaces gráficas y móviles, como también logotipos e iconos.
Se trata de un software de pago y para utilizarlo es necesario comprar licencias a un precio de unos 100€ que tienen una duración de un año.
Nuestros diseñadores primero utilizaban el software de Adobe Photoshop, también de pago, pero con la aparición del Sketch concluyeron que éste era mucho más concreto y más eficaz cuando se trata de interfaces móviles y web. Como ya hemos comentado antes, éste último es un software para realizar diseño vectorial mientras que Photoshop no, y es ahí donde notaron la diferencia al momento de enviar recursos gráficos a los developers ya que Sketch, al ser vectorial, permite ajustar el tamaño sin afectar a la calidad.
Ofrece una interfaz más limpia, de fácil exportación y tiene más herramientas para conseguir al detalle todos los diseños planteados. También ofrece plantillas básicas de Android y iOS basadas en guías de estilo de ambas plataformas.
Por último tiene la opción de instalar muchos plugins que permiten desde generar contenido y imágenes de forma automática hasta exportar diseños a plataformas como Zeplin.
Además, Sketch es el software de moda en cuanto al diseño de interfaces y ha ganado muchos usuarios a lo largo del último año.
El próximo día os contaremos cómo funciona Zeplin.