• Live Server
  • Live Sass Compiler
  • Prettier
  • Auto-Close Tag
  • ESLint
  • Code Spell Checker
  • Material Icon Theme
  • Path Intellisense
  • Debugger for Chrome
  • Javascript code snippets
  • quooka.js
  • npm
  • Beautify
  • Mithril Emmet (https://docs.emmet.io/cheat-sheet/)
  • vscode-icons
  • Font Awesome Auto-complete & Preview
  • bracket colorizer
  • indent rainbow
  • Quokka.js
  • Indented Block Highlighting

Design

  • Pack Adobe
  • Affinity
  • Sketch
  • Figma
  • Framer
  • Zeplin
  • Principle

Code

  • Visual Studio Code
  • Dash + Alfred 4
  • Android Studio
  • XCode

General

  • Sensei
  • Bear
  • Notion
  • Magnet
  • Slack
  • Popcorn Time

E-mail design: curated collection of over 4000 e-mails, showing both, design and code.

LS Graphics: Free Mockups and Design Tools

Artboard studio: Perfect for mock ups and for present your web/mobile designs. No downloads needed, no installations required.

Top 21 Free Usability Testing Tools for APP and Website Testing

Awesome Design Tools: The best design tools for everything — from wireframing and prototyping to animation, accessibility, AR, design systems…

Online Photo Editor: Fotor is a free online picture editor and graphic designer, allowing you to use online photo editing tools.

Illustration Gallery: Each week, discover royalty-free illustrations to power up…


Zeplin: Handoff designs and styleguides with accurate specs, assets, code snippets — automatically.

Abstract: One place tool to version, manage, and collaborate on your Sketch files. Works like GitHub.

Lingoapp: A design system manager for Sketch.

Stark: The plugin to help you design and build products that are accessible, ethical, and inclusive.

Icon Drop: A Sketch Plugin & Adobe CC Extension (Photoshop & Illustrator) to Enhance your designs with high-quality icons from Iconscout.

AEUX: is a set of panels for After Effects and Sketch 52+ (and soon Figma) to transfer layers into After Effects with the least amount of friction…


El módulo 2 de IronHack empieza duro: tenemos que escoger un tema para el proyecto que nos acompañará los próximos 6 meses. El tema tiene que estar relacionado con wellness:

The mission of the National Wellness Institute is to enrich professionals’ lives and careers with competencies and connections to promote inclusive, whole-person wellness.

Después de unos días pensando el tema y de mucho brainstorming he escogido un tema que nos involucra a todos y que, desafortunadamente, mucha gente sufre, la violencia de género. Lo primero que debíamos hacer era encontrar un problema, y yo ya lo tengo. …


La creación de taxonomías debería ser uno de los elementos que los UX Designers deberíamos tener en cuenta a la hora de empezar a diseñar. La buena organización de la web es fundamental para las búsquedas de los usuarios. Pero, qué es una taxonomía?

Una taxonomía es la ciencia de la clasificación que pretende comprender un conjunto de conceptos específicos de la materia y crear un vocabulario para esos conceptos con la finalidad de organizar y hacer más fácil su búsqueda. Las taxonomías son usadas de manera común en todo nuestro entorno para organizar aquellas familias de información amplias y…


Llegados a este punto nos toca empezar las interacciones. Para ello, se nos propone la herramienta InVision. Como con Sketch, InVision es una herramienta que ya he utilizado anteriormente junto con Marvel, una herramienta muy similar, y me conozco muchos de sus trucos. Uno de ellos, y el cual seguro que muchos ya conocéis, es el plugin Craft. Gracias a este plugin puedes subir los wireframes directamente desde Sketch sin tener que exportarlos y, además, puedes realizar las interacciones también en Sketch a través del shortcut “C”.

En esta tarea se nos propone darle vida al proyecto, así pues, con…


En el cuarto ejercicio del prework se nos propone pasar a wireframes las principales pantallas de la aplicación EMOV. Un wireframe, en un entorno web, es un esquema de la página, una guía visual que representa el esqueleto y estructura visual de un sitio web o una app. Este es el paso previo al diseño, que nos sirve para testear si nuestra planeación tiene sentido antes de empezar a diseñar.

Nunca había hecho wireframes a través de Sketch, siempre había utilizado Balsamiq o Axure, pero gracias a la biblioteca que nos han facilitado ha sido mucho más rápido de lo…


Sketch, nos vemos por la mañana y ahora —también — por la noche.

Después de mucha teoría llega el momento de ponerse manos a la obra con la práctica. El siguiente ejercicio consiste en replicar con la mayor exactitud posible las siguientes dos pantallas a través de Sketch:

El proceso ha estado fácil ya que utilizo Sketch diariamente en el trabajo. El mayor trabajo ha estado encontrar las imágenes de fondo que mejor pudiesen encajar. He aquí el resultado:

Dani Fernández

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store