Herramientas alternativas de diseño web open source



Hay muchas herramientas de creación de prototipos, de diseño de interfaz de usuario o aplicaciones de gráficos vectoriales. Pero la mayoría son de pago o de código cerrado. Así que por aquí os enseñaré varias opciones open source para que probéis y podáis utilizar la que más os guste.

Penpot

  Penpot  

Penpot es la primera plataforma de diseño y creación de prototipos de código abierto destinada a equipos de dominios cruzados. Independientemente de los sistemas operativos, Penpot está basado en la web y funciona con estándares web abiertos (SVG).

Tiene características y capacidades destinadas a los diferentes roles que hay en un equipo.

Los archivos Penpot son compatibles con la mayoría de las herramientas vectoriales, son amigables con la tecnología y extremadamente fáciles de usar en la web.

Al estar basado en la web, Penpot no depende de sistemas operativos o instalaciones, solo necesitará ejecutar un navegador moderno.

Construir para la comunidad. Adaptabilidad extrema: las contribuciones pueden variar desde add-ons y plugins hasta la funcionalidad core.

Se pueden hacer interacciones para imitar el resultado final y se pueden presentar propuestas de diseño interactivas.

Todos los miembros del equipo trabajan simultáneamente, se puede modificar el diseño en tiempo real y hacer comentarios o ideas y comentarlos directamente sobre los diseños.

Se pueden compartir librerías y plantillas de tus diseños y descargar las de otros usuarios.

También te permite ver el código de lo que estás diseñando, descargarte un icono del diseño o ver las propiedades de un componente.

 

Akira

 Akira  

Akira solo funciona en linux y nace como alternativa moderna para usar en linux.

Akira es una aplicación de diseño nativa de Linux construida en Vala y GTK. Akira se centra en ofrecer un enfoque moderno y rápido para el Diseño UI y UX, dirigido principalmente a diseñadores web y diseñadores gráficos. El objetivo principal es ofrecer una solución válida y profesional para los diseñadores que quieren utilizar Linux como su sistema operativo principal.

Akira está en una fase temprana de desarrollo, no es recomendable utilizarla en un proyecto importante, pero si para descargarla y probarla.

Por ahora incluye:

  • Ofrece un lienzo totalmente vectorial para cambiar el tamaño infinitamente sin perder calidad.

  • Incluye un panel de opciones inteligente que muestra las características editables de un elemento seleccionado.

  • Incluye un panel de capas con la posibilidad de arrastrar y soltar y ordenarlas de forma inteligente.

  • Permite crear mesas de trabajo para organizar mejor las iteraciones y vistas de diseño.

  • Ofrece control sobre el tamaño y la calidad de las imágenes exportadas

  • Incluye un conjunto de iconos personalizables.

  • Incluye la reconstrucción completa de la arquitectura de la biblioteca Canvas.

  • Dispone de una implementación de la cuadrícula de píxeles.

  • Ofrece la personalización del color de la cuadrícula de píxeles.

  • Ofrece la implementación de guías de ajuste inteligentes.

 

Alva

 Alva  

Alva le permite diseñar productos interactivos basados en los mismos componentes que utilizan los programadores para los sitios web.

Diseño y programación, unidos.

Como diseñador, empieza con un conjunto mínimo de componentes web que se mejoran al importar nuevos componentes como imágenes de marcador de posición. En base a eso, un programador puede comenzar a escribir el componente como código real e ir reemplazando todos los componentes.

Se pueden crear librerías de componentes para que los programadores puedan usarlas cuando las necesiten.

Llevar la tecnología web al diseño web.

Un sitio web es más que un simple lienzo de dibujo de tamaño fijo, donde puedes colocar rectángulos, círculos y texto donde quieras. Alva te ofrece la oportunidad de hacer diseños interactivos.

 

Dotgrid

 Dotgrid  

Dotgrid es un software de dibujo vectorial basado en cuadrículas diseñado para crear logotipos, iconos y tipos. Admite capas, las especificaciones completas de SVG y efectos adicionales como reflejo y dibujo radial. Dotgrid exporta a archivos PNG y SVG.

Es mucho más simple que los anteriores, pero es perfecto para hacer logos e iconos simples de manera muy fácil.

Aqui teneis un video corto de como funciona:

 
by Nadal Vicens Date: 03-06-2022 diseño vectorial diseño web open source software interfaz herramientas visitas : 261  
 
Nadal Vicens

Nadal Vicens

Desde niño apasionado de los videojuegos, gracias a ello me ha interesado la tecnología, y he acabado dentro del mundo de la programación, donde puedo estar horas sin que me de cuenta. Interesado en aprender tanto de la parte de tecnología como de diseño. No podría vivir sin videojuegos, café y pizza.

 
 
 

Artículos relacionados

Como hacer tu propio cursor personalizado para tu web

Cuando empecé a ojear webs distintas y originales para aprender de ellas, de las primeras cosas que me llamaron la atención fue que algunas de ellas tenían sus propios cursores,…

Safari corre el riesgo de convertirse en el nuevo Internet Explorer

El legado de Internet Explorer 6 sigue siendo una pesadilla para los desarrolladores web. El navegador de Microsoft de antaño les hizo la vida imposible y sólo es ligeramente hiperbólico…

El diseño gráfico y su impacto en el desarrollo web

En el artículo de hoy explicaremos el concepto de diseño gráfico, sus fundamentos y lo que aporta al desarrollo web. El diseño gráfico se aplica a todo lo visual, lo…

Las vulnerabilidades del software - una guía para novatos

¿Qué son las vulnerabilidades del software? El número de dispositivos conectados a Internet crece cada día. Y entre esos dispositivos no sólo encontramos ordenadores y móviles inteligentes, sino también un número…

El concepto de Modelo-Vista-Controlador (MVC) explicado

En la ingeniería de software, usamos patrones de diseño como soluciones reutilizables para un problema común, un patrón es como una plantilla de cómo resolver un problema. El Modelo-Vista-Controlador (MVC) es…

Cómo superponer múltiples imágenes usando CSS?

CSS significa Hoja de Estilo en Cascada. Es un lenguaje de hojas de estilo que define la presentación del documento en un lenguaje de marcado como HTML. La hoja de estilo…

Cómo usar el Masking en CSS

Cuando recortas un elemento usando la propiedad de clip-path, el área recortada se vuelve invisible. Si en cambio quieres hacer opaca una parte de la imagen o aplicarle algún otro…

Cómo escribir nuestra propia Política de Privacidad

En este artículo hablaremos de las declaraciones de la Política de Privacidad, de cómo puedes escribir una y ponerla en práctica en tu página. ¿Por qué apareció? Hoy en día, cuando navegamos…

Protocolo para reuniones: códigos de conducta para celebrar reuniones exitosas

No hay nada peor que trabajar mucho en una presentación para exponerla ante un grupo de asistentes distraídos y desinteresados. Conocer el protocolo adecuado para las reuniones te ayudará a que…

Uso de plantillas en la gestión de proyectos

Cada proyecto es diferente, pero muchos siguen los mismos pasos básicos. En lugar de perder tiempo recreando proyectos similares desde cero, los equipos de alto rendimiento ahorran tiempo utilizando plantillas. ¿Preparado para…

Seis tendencias que definirán el trabajo en el futuro

Hace 10 años, el correo electrónico y la mensajería instantánea estaban empezando a superar a las llamadas telefónicas a las reuniones como la principal forma de comunicación empresarial. Han cambiado muchas…

4 cosas que no sabías sobre Grid CSS

Durante mucho tiempo, el CSS no contenía un gran número de sorpresas. Desarrollándose a un ritmo tranquilo, el lenguaje se conformaba con estilizar sus fuentes y hacer flotar sus divs,…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar tus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarte publicidad relacionada con tus preferencias. Clicando en ‘Acepta todas’ aceptas el almacenamiento de cookies en tu dispositivo para mejorar la navegación en el sitio web, analizar el tráfico y ayudar en nuestras actividades de marketing. También puedes seleccionar ‘Sólo cookies de sistema’ para aceptar sólo las cookies necesarias para que la web funcione, o puedes seleccionar las cookies que quieres activar clicando en ‘Configuración’

Acepta todas Sólo cookies de sistema Configuración