En los últimos meses se han llevado a cabo grandes novedades de actualizaciones y herramientas para diseñadores de todos los niveles de habilidad y conocimiento.
Las herramientas para el diseño de sitios web es uno de ellos. Algunas herramientas que veremos se tratan de crear especies de flujo de trabajo visual/Código, mientras que otras herramientas ocultan el código por completo para los principiantes.

También les comparto prototipos y herramientas, tanto para aplicaciones e sitios web,  Y además un par de aplicaciones online de pruebas para tu web. Algunos son nuevos. Otros han estado un buen tiempo, pero recientemente se han actualizado con nuevas cosas impresionantes.

1. Google PageSpeed

herramienta rendimiento velocidad google page speed

Google PageSpeed analiza tu sitio web y le da una calificación de 100 por ciento de acuerdo su evaluación de rendimiento, tanto para móviles y escritorio. Donde detectará las áreas de tu sitio web que manifiestan bajos rendimientos o sobrecarga que se subóptima, lo que la aplicación te proporcionará sugerencias sobre cómo puedes mejorar esos tipos de rendimientos.

También hay una herramienta disponible que te permite probar PageSpeed durante la construcción, y un proyecto de ejemplo que muestra como probar en Gulp.

Herramientas de Diseño Web

Macaw Scarlet

herramienta macaw scarlet
Primero en la lista es Macaw Scarlet, una herramienta tan buena que desbloquea las otras dimensiones de una web, donde permite trabajar con el espacio 3D. Pero bueno,  esto nos hace saber que el Macaw es una herramienta original, que mucha gente está emocionada de todos modos.
Así mismo como un “entorno de diseño en vivo”, Macaw Scarlet se orientará hacia la fabricación de diseños web responsive mucho más fácil.

Wagtail

wagtail herramienta web cms

Wagtail no es una herramienta de diseño, es un CMS. Y, sin embargo, fácilmente podría ser incluido en el diseño para el flujo de trabajos, sobre todo cuando se trata de diseño de contenidos.

Como lo vez, tiene una característica fantástica llamada Streamfield, que trabaja mucho como editor de entradas del medio. La diferencia es que es personalizable, y por lo tanto más potente. Esto hace que sea mucho más fácil para el usuario donde pueda diseñar el contenido de cada página.

Magic Mirror for Sketch 3

magic mirror herramienta web maquetacion

Aquí está uno para los usuarios que realizan bocetos. Básicamente, se hace una especie de objeto inteligente diseñado para ayudar a poner maquetas en fotos de archivo.

HERRAMIENTAS PARA HACER WIREFRAMES

Wire Flow

Wireflow | Herramientas Wireframes

Éste tiene mi sello personal de aprobación. Corre rápido en mi tablet normalmente, lo cual viene con casi todo lo que puede desear diseñando aplicaciones sin saber dibujar, es una de las mejores aplicaciones de Wireframe.
También está diseñado para trabajar con dispositivos de tamaño de un móvil, lo que podría ser una gran manera de visualizar correctamente una interfaz de aplicación móvil.

PowerMockup

Power Mockup | Herramientas Wireframes

Hemos estado viendo más de un conjunto de herramientas de wireframes para el software Keynote de Apple. Era sólo cuestión de tiempo antes de que alguien lo hizo posible para Powerpoint. Y ahora lo tienen. Aquí está.

HERRAMIENTAS PARA LA CREACIÓN DE PROTOTIPOS

Origami

Origami | Herramientas de Prototipos

Recorriendo todo el camino desde el mismo Facebook:Origami es una herramienta gratuita para el diseño de interfaces de usuarios modernos. Rápidamente armas un prototipo, ejecutando en tu iPhone o iPad, interceptando en ella, en donde puedes exportar fragmentos de códigos (Snippets) en  ingenierías que puedes usar. ”

Marvel

Marvel | Herramientas de prototipos

Con herramientas simples, y un plan libre sólido, Marvel hace una gran aplicación de prototipos. Donde se integra con Dropbox y Google Drive, la importación de cualquier imagen que se especifique, y lo que le permite enlazar juntos a rápida maqueta de una aplicación.

 

Protosketch

Protosketch | Herramientas de prototipos

Protosketch es una aplicación de creación de prototipos (clase) diseñado para iPads. Viene con un kit de interfaz de usuario (incluyendo toneladas de componentes), herramientas de vectores básicos, herramientas de alineación, y mucho más.
Se encuentra actualmente en versión beta, y es sólo para iPads, pero si eso es su plataforma, esto podría ser perfecto para usted. Se lleva bien con otras aplicaciones, también: se puede exportar sus archivos en formatos Raster, SVG y PDF.

 

Frontify

Frontify | Herramienta de Prototipos
Al igual que muchas otras herramientas en esta lista. Frontify hace Prototipos de trabajos. Te ofrece herramientas para facilitar el trabajo en la marca y el estilo de guías como un grupo muy fácil de usar. Crear tus paleta de colores, definir tu estilo, y crear una biblioteca de elementos de interfaz de usuario, y compartirlo con el resto de tu equipo.

 

Atomic

Atomic | Herramienta de Prototipo
Utiliza Atomic para jalar los archivos de Photoshop o Sketch y hacer prototipos de ellos. El control de versiones, funciones de colaboración, y mucho más hacen de esta una excelente herramienta para el diseño elegante, rápido e interactivo.

Form

Form | Herramienta de prototipos
Form es un creador de prototipos avanzado que trabaja en conjunto con el iPhone. Crea el prototipo en tu ordenador o portátil, y visualiza los resultados inmediatamente en tu dispositivo móvil. Además, utiliza los principios de diseño de materiales de Google para que tus prototipos se vean muy bien.

 

Pixate

Pixate | Herramienta de Prototipos
Pixate se especializa en la alta fidelidad de prototipos “nativos” que se muestran en tus dispositivos móviles y trabajan mucho como si fuera una cosa real.

WEB BUILDERS

Sandvox

sandvox herramienta diseno web mac

Sandvox es una aplicación de Mac para los no programadores (entre nosotros). La gran parte esta basada en plantillas (como parte cada vez mayor porción de Internet), pero hace que provisiones para los usuarios más avanzados que añaden cosas en forma manual.
Se dobla como una especie de CMS para algunos tipos de sitios web, como los blogs, y aunque el software no es “nuevo”, las versiones recientes han introducido Sandvox Hosting. La manecilla de codificadores entre nosotros podrían retroceden ante la idea, pero para los novatos, el paquete es realmente muy grande.

No funciona con cualquier hosting, aunque, si lo quieres manejar a tu manera, puedes hacerlo.

 

WORDPRESS BUILDERS

Page Builder

Page Builder | Herramientas para WordPress

Page Builder by SiteOrigin is the most popular page creation plugin for WordPress. It makes it easy to create responsive column based content, using the widgets you know and love. Your content will accurately adapt to all mobile devices, ensuring your site is mobile-ready. Read more on SiteOrigin.

PageBuilder por SiteOrigin es el plugin de creación de páginas más populares para WordPress. Esto hace que sea fácil de crear contenido columna basada sensible, utilizando los Widgets que conocemos y amamos. Tus contenidos se adaptarán con precisión a todos los dispositivos móviles, garantizando que su sitio web este listo en móviles. Leer más en SiteOrigin.

 

Themify Flow

WordPress puede tener sus detractores, pero otros están tomando nuevas direcciones sorprendentes. Los chicos de Themify, por ejemplo, decidieron que era el momento de crear una herramienta de diseño en la parte superior de la plataforma de publicación.
El resultado es: “Themify Flow que permite crear las costumbres, Los temas Responsive de WordPress son sensibles desde una interfaz de arrastrar y soltar. Lo mejor de todo es gratuito y de código abierto.

 

Cornerstone

Cornerstone es un tipo de competencia con Flow Themify, ya que ofrece una forma visual para crear temas de WordPress, justo encima de WordPress mismo.
Funciona de manera diferente, sin embargo. Por ejemplo, cuenta con un editor de código en vivo, y el diseño de otras características para dar acceso a nivel de desarrollador para el diseño de aplicaciones. Además, no es gratis, a menos que usted compre el X Theme.

 

Qards

Qards |Herramientas de WordPress
Quards es otro plugin constructor de páginas para WordPress. La mayor parte del trabajo de diseño esta hecho para uno, pero en lugar de elegir una sola plantilla, se construyen cada página con “Cards“.
Estas Cards básicamente son pre-hechas, con secciones de diseño que se pueden mezclar y combinar para construir una página web completa. Es buena para los Landing Pages, y para la organización individual de los artículos de manera nueva y original, sitios de promoción, y esos tipos de cosas.

HERRAMIENTAS RENOVADAS

Seríamos negligentes si no llamamos la atención sobre el gran trabajo que se ha realizado en las aplicaciones ya conocidas. Estees uno que ha tenido un cambio y una actualización recientemente:

InVision

Invision | Herramientas Renovadas
InVision ha sido la introducción de nuevas funciones de manera constante, entre ellos, la prueba gratuita ilimitada móvil del usuario, un administrador de flujo de trabajo, la integración Dribbble y emoji. Sí, emoji.