La Nevera Vacía - eCommerce & Marketing Consulting
herramientas para diseñadores

Herramientas para diseñadores web imprescindibles

En LNV sabemos perfectamente que la tarea de diseñar no es precisamente “sencilla” y sobre todo cuando diseñas para crear una web.

En este post, vamos a mencionar algunas herramientas para diseñadores que os pueden hacer la vida más fácil.

Aun si trabajas con CMS tipoWordPress, Prestashop, Joomla etc. Estas herramientas te ayudarán a terminar con éxito cualquier proyecto.

 

PENPOT

Penpot es la primera plataforma de diseño y creación de prototipos de código abierto destinada a equipos multi-dominio. No depende de los sistemas operativos, Penpot se basa en la web y funciona con estándares web abiertos (SVG).

Podemos compararlo con FIGMA, pero Penpot acaba de tener una acogida por toda la comunidad mundial muy grande y tiene un equipo de desarrollo Español

Podrás crear increíbles interfaces de usuario en colaboración con todos los miembros del equipo. Puedes mantener coherencia a escala con componentes, bibliotecas y sistemas de diseño.

Una herramienta recomendable 100%

 

Vue.js

Framework progresivo de código abierto orientado a la interface de desarrollos de usuario con un enfoque reactivo y además progresivo. Para poder hacer uso de esta herramienta es recomendable que tengas un buen uso y manejo de JavaScript.

Esta herramienta fue desarrollada por Evan You, antiguo trabajador de Google.

La característica principal en la que opera Vue.js son los componentes. Estos componentes encapsulan un código que puede ser reutilizable en formatos HTML.

Además:

  • Puedes utilizarla empezando con un proyecto pequeño que puede ir creciendo.
  • Permite con herramientas internas de ayuda, que consigas que sepas en todo momento qué estás haciendo y cómo lo estás haciendo.
  • Comunidad muy activa, por lo que cualquier problema que te surja, lo podrás resolver por ti mismo en la comunidad.

 

ATOM

ATOM es un editor de código fuente de código abierto para macOS, Linux, y Windows​ con soporte para múltiples plug-ins escritos en Node.js y control de versiones Git integrado, desarrollado por GitHub.

La variedad de los sistemas operativos con los que trabaja Atom, hace de esta, una de las herramientas para diseñadores web que no debes “no tener”.

  • Permite el auto-completado inteligente, que te ayuda con la creación de tu código de manera eficaz.
  • Podrás “buscar” y “reemplazar” cualquier texto de manera rápida y sencilla.
  • Dispone de “añadidos” que se pueden instalar y desintalar rápidamente.
  • Es compatible con lenguajes: Javascript, HTLM, CSS, YAML, entre otros.

Gracias a que es de código abierto, la mayoría de las licencias de software son libres o han sido creadas por la misma comunidad.

 

Kroma

Herramienta indispensable para los diseñadores que tienen problemas para hacer una paleta de colores perfecta.

Algunas de sus características son:

  • Segmentación o filtro: Te permite hacer una búsqueda por tintes, valor, color entre otros.
  • Algoritmo personalizado: al escoger al menos 3 colores esta te llevará a combinaciones de imágenes que puedes utilizar.
  • Ayuda a crear la estrategia de branding: Kroma tiene en su repertorio una infinidad de paletas que se adaptan a la tipografía de la web.
  • Guarda automáticamente combinaciones creadas por ti que no funcionaron en ese momento.

 

CodeKit

Codekit es otra aplicación bastante similar a Hammer. Además de Sass compila Less, cosa que Hammer no hace, pero solamente está disponible para Mac Os.

  • Preview: Permite cargar el proyecto con una URL que le permite al diseñador observar el avance y las mejoras que debe realizar. También puede acceder a cualquier dispositivo que se encuentre conectado a la misma red.
  • Lenguaje codekit e importes: Se pueden emplear distintas variables dentro del mismo archivo HTML.

 

Lambda Test

El Responsive, una ardua tarea a la hora de diseñar una web, pero con Lambda Test, eso ya no es tan complejo, ya que una de las principales funciones es ayudarte con eso.

La herramienta se encarga de que puedas probar la funcionalidad de tu diseño web en más de 2000 mil navegadores usuales, los cuales tienen distintos sistemas operativos.

Puedes hacerla de manera programada, manual o automáticamente. Una vez finalizado, te muestra el informe con las puntuaciones finales.

Lambda Test también funciona como una extensión de Google Chrome así que puedes realizar pruebas mientras navegas por sitios determinados. Esta herramienta es de pago, aunque dispones de una prueba gratuita de 60 días para que puedas verificar la veracidad de su servicio, una vez pasada la prueba, el coste será de $10 al mes.

 

Tinypng

Ya sabes que una de las características que hace que el diseño web no sea tan rápido y eficaz como esperas, es el peso de las imágenes que se crean.

Tinypng te permite comprimir al máximo el peso de las imágenes que anexes a tu blog sin reducir la calidad. Aunque su nombre parece indicar que solamente puedes trabajar con archivos PNG, en el 2014 se le agregó la opción de que las imágenes JPG también formaran parte del comprimido.

Tienes dos modalidades de descarga: Directamente, hacia tu ordenador o descargarlas en tu nube Dropbox.

 

Google Fonts

La estrategia de branding se asocia directamente con la temática del diseño web. Cualquier profesional debe adaptarse a todos los requerimientos del cliente y si todavía no tiene desarrollada una estrategia de branding lo lógico es que le guíes para escoger un color fuerte y dos complementarios.

Teniendo esto en consideración, de ahí se toma en cuenta la tipografía. Google Fonts posee en su repertorio, un sinfín de tipografías que puedes usar para tu diseño web.

Gracias a su fácil adaptación a dispositivos móviles y ordenadores Google Fonts es una de las herramientas escogidas por diseñadores webs. Tampoco necesitas pagar una licencia de permiso por lo que puedes descargar las tipografías que consideres necesarias para adaptarlas a tu diseño web.

Por si todavía no te convence con Google Fonts logras:

  • Obtener un diseño web rápido e intuitivo.
  • Con tan solo “copiar” y “pegar” lo agregas al HTML.