Herramientas y Frameworks interesantes de programación - Parte 4 - Diseño web

En esta cuarta parte hablaré acerca de software para crear tus prototipos o crear páginas web html/css/javascript sin programación del lado del servidor.

Software para diagramas

Si deseas hacer diagramas de tus aplicaciones puedes utilizar alguno de los siguientes:

Draw.io

Draw.io Es una herramienta en línea que te permite crear diferentes tipos de prototipos y diagramas. Se conecta con google drive, one drive, Dropbox para poder compartir tus diagramas.

Es gratuita y cuenta con una gran variedad de diagramas como diagramas de flujo, gráficas, organigramas, etc.

Gliffy

Gliffy Es otra herramienta web que te permite crear y compartir tus diagramas. Empezó como una aplicación gratuita ahora la edición personal cuesta $7.99 dólares al mes. También cuenta con una gran variedad de formas para crear tus diagramas.

Structurizr

Structurizr Es una herramienta que te permite crear los diagramas de como esta diseñada tu aplicación, basada en C4 Model el cual es una forma de hacer diagramas de como esta tu aplicación como si fuera un mapa de google en la vista de un ciudad donde explicas de forma general quien usa el sistema y los otros software con los que interactúa (diagrama de contexto), luego vas haciendo zoom y se va detallando más y ves las colonias (diagrama de contenedor) aquí explicas de forma general como esta compuesto tu sistema, por ejemplo esta compuesto de una app para celulares, una aplicación web y una base de datos, luego le das zoom al mapa y están las cuadras (diagrama de componentes) donde muestras de forma general como esta construido tu aplicación como su nombre lo dice los principales componentes, por ejemplo los controladores principales de tu aplicación y por último la vista de la calle (diagrama de código) el cual puede ser generado por el IDE en el cual estas desarrollando. Es una forma interesante de definir tu aplicación de lo general a lo particular para que sea entendido más fácilmente.

Software para prototipos

Si deseas crear prototipos de tu aplicación para mostrarlo a los usuarios antes de programas estas son algunas opciones:

Sketch2code

Sketch2code Es para prototipos sencillos, puedes subir una imagen con tu prototipo hecho en pluma y papel y te crea el código html necesario para tu prototipo. Solo funciona con prototipos bastante sencillos, mas por algo se empieza.

PowerPoint

Si instalas Visual Studio desde su versión Community en windows y tienes Office instalado se te agrega a Powerpoint una pestaña StoryBoard Shapes donde cuenta con formas para que crees tus prototipos.

Figma

Figma Es una aplicación web que te permite crear tus prototipos con algunas funciones como simular clicks y que te muestre otra pantalla y compartirlos de forma web, tiene una versión gratuita para un equipo de 2 personas y 3 proyectos y la versión de pago que empieza en 12 dólares por usuario.

Adobe XD

Adobe XD Es una aplicación de escritorio creada por Adobe la cual la puedes usar de forma gratuita en Windows/Mac con un espacio máximo de 2 GB. Al igual que figma te permite exportar tus prototipos para que sean más interactivos. Si estas acostumbrado a los productos de Adobe es una buena herramienta ya que cuenta con funciones para crear de forma fácil una galería de imágenes.

Software para crear tus páginas web

Si deseas crear tus páginas web pero no tienes conocimientos de programación y no quieres buscar y descargar plantillas html, puedes utilizar alguno de estos 2 productos:

Mobirise

Mobirise Aplicación disponible para Windows/Mac/Android, aunque me parece que es difícil diseñar en un celular.

Es un programa el cual cuenta con plantillas prediseñadas que son fáciles de configurar por personas mas enfocadas a diseño. La versión gratuita contiene pocas plantillas y componentes. Por lo general tiene un descuento donde te ofrecen mas plantillas y componentes a un precio de $99 dólares por año. Si tu página no es muy grande es una buena opción, una parte interesante es que ofrece plantillas AMP el cual es un proyecto creado por google el cual busca crear páginas muy rápidas que se vean bien en celulares.

Una de sus limitantes es que sí agregas muchas páginas se pone bastante lento y aunque tiene su editor html en la versión de pago, es difícil modificar los componentes preestablecidos con funciones que no han agregado aún. También no te permite organizar tus páginas en carpetas, mas si ya tienes una página más grande igual ya sería mejor utilizar un software mas avanzado.

Bootstrap Studio

Boostrap Studio Cuenta con un demo web para que lo pruebes antes de comprarlo, tiene un costo de única ocasión de $60 dólares, también cuenta con plantillas y algunos componentes como galerías de imágenes ya diseñados que solo es cuestión de configurarlo.

Vi el código generado por los 2 y me parece que esta bastante óptimo por lo mismo que son templates ya establecidos.

Si lo que buscas son sitios de templates, me parece que Creative tim cuenta con una gran variedad de templates html/angular/vue/react algunos gratuitos y otros de paga.

Diseño

Si lo que deseas es modificar imágenes

Pixlr

Editor web gratuito, que te permite agregar efectos o retoques a tus imágenes.

Adobe Photoshop Express

Adobe cuenta con una versión gratuita de su programa estrella como es el photoshop

Gimp

Aplicación de escritorio bastante conocida en Linux para editar tus imágenes es gratuita.

Inkscape

Si eres un usuario mas acostumbrado a Corel, Inkscape puede ser una buena opción gratuita.

Sistemas web

Tadabase

Tadabase Si lo que deseas es crear tus aplicaciones web sin tener tantos conocimientos de programación pero si por ejemplo de excel o programas como access donde con asistentes creas tu sistema tadabase es muy buena opción, empezó con una versión gratuita, mas ya tiene costo el cual empieza en $24 dólares al mes. Cuenta con muchas plantillas web ya creadas que puedes personalizar para por ejemplo tener tu sistema web CRM o de Administración de proyectos, etc.