sketch visual engineering

Sketch, 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.

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.

sketch software diseño napptilus

El próximo día os contaremos cómo funciona Zeplin.


make it work - designers vs developers visual engin

TEAMLEARNING CINEMA - MAKE IT WORK: DESIGNERS & DEVELOPERS

Hoy hemos tenido una sesión diferente en nuestra formación interna, diseñadores y developers se han reunido para ver "Make It Work: Designers & Developers" de Kristin Marsciano y Brandy Porter, de la consultora tecnológica Big Nerd Ranch (Atlanta).

El objetivo de esta sesión ha sido plantear una situación común en las empresas del sector y buscar nuevas herramientas y metodologías de trabajo para mejorar la comunicación entre designers y developers. Eso se debe a que se ha observado que los diseñadores y developers no hablan en el mismo idioma y eso puede acabar afectando al producto final.

Las protagonistas del vídeo no solo plantean problemáticas sino que nos proponen SOLUCIONES muy interesantes.

Os recomendamos ver esta presentación y que también participéis  contándonos que situaciones os habéis encontrado vosotros.


make it work - designers vs developers visual engin

TEAMLEARNING CINEMA - Make it work: designers & developers

Hoy hemos tenido una sesión diferente en nuestra formación interna, diseñadores y developers se han reunido para ver “Make It Work: Designers & Developers” de Kristin Marsciano y Brandy Porter, de la consultora tecnológica Big Nerd Ranch (Atlanta).

El objetivo de esta sesión ha sido plantear una situación común en las empresas del sector y buscar nuevas herramientas y metodologías de trabajo para mejorar la comunicación entre designers y developers. Eso se debe a que se ha observado que los diseñadores y developers no hablan en el mismo idioma y eso puede acabar afectando al producto final.

Las protagonistas del vídeo no solo plantean problemáticas sino que nos proponen SOLUCIONES muy interesantes.

Os recomendamos ver esta presentación y que también participéis  contándonos que situaciones os habéis encontrado vosotros.


diseñar efectos parallax otros blog visual engineering

WORKSHOP: DISEÑAR EFECTOS "COOL" (PARALLAX Y OTROS)

El efecto Parallax es la nueva tendencia entre los diseñadores web, una tendencia cada vez más extendida en el mundo del diseño. Aunque su nombre parezca complejo, su concepto es sencillo. Básicamente, la imagen o la textura que se encuentra como fondo de pantalla se desplaza más lento que el resto del sitio web.

Aunque podamos creer que no, lo hemos visto mil veces: entras en una web, haces scroll y de repente el fondo parece moverse a una velocidad distinta que el contenido, creando un ligero efecto de profundidad y dejando ver partes que antes no veías.

El efecto Parallax empezó a ser muy útil ante la caída en desuso de Flash y el auge del diseño plano, en el que permitía dotar a las web de cierto dinamismo y contrarrestar la planitud. Además, los dispositivos móviles fomentan la verticalidad del diseño web por lo que el efecto de Parallax es más que interesante para aportar valor al tedioso scroll y sorprender al usuario con algo que no se espera. Y encima aumenta la usabilidad.

Aunque este efecto parece que es muy novedoso, el Parallax es en realidad un truco con mucha historia, inventado por Disney para dotar a sus películas de dibujos animados de una ligera sensación de tridimensionalidad, intentando lograr con ello un mayor realismo.

Por otro lado, las animaciones CSS3 permiten darle movimiento a cualquier elemento en pantalla, permitiéndote crear loops o efectos de transición que hacen que la web se vea bastante elegante.

Tan importante es el diseño y la usabilidad que queríamos estar al día de las nuevas tendencias y novedades y por eso quisimos hacer el workshop de "Diseñar efectos cool (parallax y otros)" que nuestros diseñadores Toni Camí y Jorge López nos enseñaron.

Presentación para descargar: DISEÑAR EFECTOS COOL PARALLAX Y OTROS

Con HTML5 de CSS3 es suficiente para crear la ilusión de profundidad que proporciona un Parallax. Si te gusta ese código existen tutoriales online como el de Pixel Acres o el de Tuts+.


diseñar efectos parallax otros blog visual engineering

WORKSHOP: Diseñar efectos "cool" (Parallax y otros)

El efecto Parallax es la nueva tendencia entre los diseñadores web, una tendencia cada vez más extendida en el mundo del diseño. Aunque su nombre parezca complejo, su concepto es sencillo. Básicamente, la imagen o la textura que se encuentra como fondo de pantalla se desplaza más lento que el resto del sitio web.

Aunque podamos creer que no, lo hemos visto mil veces: entras en una web, haces scroll y de repente el fondo parece moverse a una velocidad distinta que el contenido, creando un ligero efecto de profundidad y dejando ver partes que antes no veías.

El efecto Parallax empezó a ser muy útil ante la caída en desuso de Flash y el auge del diseño plano, en el que permitía dotar a las web de cierto dinamismo y contrarrestar la planitud. Además, los dispositivos móviles fomentan la verticalidad del diseño web por lo que el efecto de Parallax es más que interesante para aportar valor al tedioso scroll y sorprender al usuario con algo que no se espera. Y encima aumenta la usabilidad.

Aunque este efecto parece que es muy novedoso, el Parallax es en realidad un truco con mucha historia, inventado por Disney para dotar a sus películas de dibujos animados de una ligera sensación de tridimensionalidad, intentando lograr con ello un mayor realismo.

Por otro lado, las animaciones CSS3 permiten darle movimiento a cualquier elemento en pantalla, permitiéndote crear loops o efectos de transición que hacen que la web se vea bastante elegante.

Tan importante es el diseño y la usabilidad que queríamos estar al día de las nuevas tendencias y novedades y por eso quisimos hacer el workshop de “Diseñar efectos cool (parallax y otros)” que nuestros diseñadores Toni Camí y Jorge López nos enseñaron.

Presentación para descargar: DISEÑAR EFECTOS COOL PARALLAX Y OTROS

Con HTML5 de CSS3 es suficiente para crear la ilusión de profundidad que proporciona un Parallax. Si te gusta ese código existen tutoriales online como el de Pixel Acres o el de Tuts+.


tendencias diseño web y prototipado blog visual engineering

WORKSHOP: TENDENCIAS EN DISEÑO WEB Y PROTOTIPADO

Para cualquier empresa tecnológica y/o de diseño, es muy importante estar al corriente de las últimas tendencias visuales, tanto en el online como el offline.

En cada proyecto, debemos preocuparnos mucho de la estética y de que no parezca anticuada. Es más, nuestro diseño tendrá mucho peso en la primera impresión que la gente se forme de nosotros.

Por ese motivo, tenemos que encontrar un diseño que destaque de los demás y que impacte positivamente a nuestros usuarios.

Es muy importante estudiar y estar al día en las últimas tendencias en usabilidad, diseño web y de aplicaciones, tipografía, tecnología...

Dada esa gran importancia del diseño web, decidimos realizar un workshop de "Tendencias en diseño web y prototipado" que nuestros diseñadores Laura Martínez, Jorge López y Toni Camí nos impartieron.

Presentación para descargar: Workshop Trendy Web Designs & Prototyping

Y si queréis más información sobre diseño web, nuestros diseñadores también nos hicieron un previo workshop de "Herramientas de Diseño" muy interesante.


tendencias diseño web y prototipado blog visual engineering

WORKSHOP: Tendencias en diseño web y prototipado

Para cualquier empresa tecnológica y/o de diseño, es muy importante estar al corriente de las últimas tendencias visuales, tanto en el online como el offline.

En cada proyecto, debemos preocuparnos mucho de la estética y de que no parezca anticuada. Es más, nuestro diseño tendrá mucho peso en la primera impresión que la gente se forme de nosotros.

Por ese motivo, tenemos que encontrar un diseño que destaque de los demás y que impacte positivamente a nuestros usuarios.

Es muy importante estudiar y estar al día en las últimas tendencias en usabilidad, diseño web y de aplicaciones, tipografía, tecnología

Dada esa gran importancia del diseño web, decidimos realizar un workshop de “Tendencias en diseño web y prototipado” que nuestros diseñadores Laura Martínez, Jorge López y Toni Camí nos impartieron.

Presentación para descargar: Workshop Trendy Web Designs & Prototyping

Y si queréis más información sobre diseño web, nuestros diseñadores también nos hicieron un previo workshop de “Herramientas de Diseño” muy interesante.


herramientas de diseño blog visual engineering

WORKSHOP: HERRAMIENTAS DE DISEÑO

Uno de los aspectos fundamentales al crear una web o una app es el diseño. Sin duda es una de las partes más creativas del proyecto, la parte responsable de crear una web con un aspecto externo atractivo, capaz de suscitar el interés y de llamar la atención del público objetivo.

Además de los anteriores requisitos, la web debe tener en cuenta los gustos, el concepto y preferencias del cliente. Son tan importantes estas condiciones, que nosotros quisimos crear este workshop para refrescar el conocimiento de todas las herramientas de diseño posibles para conseguir, e incluso superar, las expectativas de nuestros clientes.

Por ese motivo, nuestros diseñadores Toni Camí y Jorge López nos hicieron el siguiente workshop de "Herramientas de diseño".



Presentación para descargar: Workshop Designer Tools


WORKSHOP: Herramientas de diseño

Uno de los aspectos fundamentales al crear una web o una app es el diseño. Sin duda es una de las partes más creativas del proyecto, la parte responsable de crear una web con un aspecto externo atractivo, capaz de suscitar el interés y de llamar la atención del público objetivo.

Además de los anteriores requisitos, la web debe tener en cuenta los gustos, el concepto y preferencias del cliente. Son tan importantes estas condiciones, que nosotros quisimos crear este workshop para refrescar el conocimiento de todas las herramientas de diseño posibles para conseguir, e incluso superar, las expectativas de nuestros clientes.

Por ese motivo, nuestros diseñadores Toni Camí y Jorge López nos hicieron el siguiente workshop de “Herramientas de diseño“.



Presentación para descargar: Workshop Designer Tools 


patrones de diseño en javascript blog visual engineering

WORKSHOP: PATRONES DE DISEÑO EN JAVASCRIPT

Javascript cada vez más está tomando más fuerza en el mercado y cada vez más los desarrolladores empiezan a apreciar su importancia y su potencial.

Tanto es la importancia del lenguaje en sí como de los patrones de diseño y por ello, nuestro ing. Marc Torrent nos dedicó un workshop de "Patrones de diseño en JavaScript" para enseñarnos todos los conocimientos aplicables a todos los frameworks modernos de JavaScript.

Presentación disponible para descargar: Workshop Javascript Design Patterns