• 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…


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…


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…


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…


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…


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. …


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