Diseño

Launchaco, para crear landing pages rápidamente sin saber de diseño y gratis

Launchaco

Las landing pages o páginas de aterrizaje son diseños web optimizados para captar a los clientes y ofrecerles cualquier tipo de producto o servicio que queramos. Lo que tienen estas páginas es que funcionan muchísimo mejor que cualquier otro tipo de página, lo cual aumenta increíblemente las conversiones.

Launchaco es una herramienta que nos permite diseñar landing pages fácilmente y sin saber nada de diseño.

Con esta herramienta podemos crear una página de aterrizaje en minutos sin el menor esfuerzo con solo agregar un par de textos y eligiendo los colores que más nos gusten.

El proceso de creación de la página es muy simple, solo tienen que elegir qué tipo de página van a crear, por ejemplo una landing page para promocionar una app, una webapp, una extensión de Chrome, etc.

Una vez que hayan elegido el tipo de diseño tienen que ir agredando la información personalizada como título, textos, paleta de colores, imagen de fondo, enlaces, etc.

Opción gratuita:

  • Landing pages ilimitadas.
  • Alojamiento de tu página en un subdominio.
  • Integración con Analytics.
  • HTTPS automático y gratis (gracias a Let’s Encrypt).
  • Branding de Launchaco en nuestra página.

Opción de pago:

  • Landing pages ilimitadas.
  • Alojamiento de tus páginas en dominios propios (o en subdominios).
  • Integración con Analytics.
  • HTTPS automático y gratis (gracias a Let’s Encrypt).
  • Eliminación del branding de Launchaco.
  • Páginas descargables.

Grandients Party, degradados en CSS listos para usar

Gradients_Party
Los degradados son un recurso muy interesante en el diseño, ya que gracias a ellos podemos dar estilos muy sofisticados y agradables a la vista. Obviamente son mucho más atractivos que los colores planos y aburridos.

En Gradients Party pueden encontrar una gran cantidad de modelos de degradados en CSS listos para usar en cualquier diseño. Solo tienen que hacer click en alguno que les guste y se copiará automáticamente el CSS al portapapeles.

Si estos degradados no les alcanzan porque son insaciables del diseño, acá también tienen otro post donde pueden encontrar 60 modelos más.

Geniales ilustraciones en SVG para descargar y usar en tus proyectos

Hoy encontré estas geniales ilustraciones en SVG y quería compartirlas para que as guarden en marcadores para futuras ocasiones. Son ilustraciones de muy alta calidad y de distintas temáticas que seguramente les serán de mucha utilidad en sus proyectos.

Las que ven abajo son una muestra del tipo de contenido que van a encontrar, hay por ejemplo de casas en venta, información, calendario, buscadores de internet, servidores, y un largo etcétera.

Algo que está buenísimo es que podemos cambiar la paleta de colores de la ilustración antes de bajarla. Esto es muy útil para que combine con el diseño de nuestro sitio web.

ilustraciones svg gratis

Tenemos dos formas de bajar las ilustraciones, una es en formato SVG y la otra en PNG para usarla como una imagen.

No son mucha cantidad, al momento de escribir este post son 50, pero supongo que con el tiempo irán agregando más modelos para descargar.

Estas ilustraciones están disponibles en el sitio unDraw.co y pueden descargarlas gratis para usarlas como quieran.

Herramienta para extraer la paleta de colores de una imagen con un click

A veces tenemos la necesidad de extraer la paleta de colores de una imagen, y si no disponemos de una herramienta específica, puede que la tarea se vuelva un poco complicada.

Por eso hoy les quiero recomendar una herramienta online que nos permite extraer la paleta de colores de una foto con un click y sin instalar nada.

La herramienta se llama HD Rainbow y pueden acceder desde aquí. Allí solo tienen que arrastrar la imagen a la ventana del navegador y automáticamente nos mostrará la paleta de colores debajo.

HD_Rainbow

Lo bueno es que la imagen no se sube al servidor, se procesa directamente en el navegador y nos da los resultados. Esto es importante para nuestra privacidad, vaya a saber uno qué tipo de fotos sube ahí (?).

Abajo de la imagen podremos ver la paleta de colores y tenemos la opción de elegir si verla en HEX, RGB o HSL, dependiendo de nuestras necesidades.

Además, si lo deseamos, también podemos descargar la paleta en formato PNG para tenerla como referencia.

170+ íconos planos en PNG o SVG para descargar gratis

iconbros

Siempre que encuentro algún recurso de este tipo me gusta compartirlo con todos ustedes y más si son íconos gratis. No hay nadie que se resista a descargar un buen pack de íconos para tenerlos en la caja de recursos por si algún día hace falta.

En este caso les voy dejar un sitio llamado Iconbros, donde podemos encontrar más de 170 íconos planos en formato SVG o PNG.

Estos íconos son muy simples y minimalistas, pero pueden abrirlos y editarlos para colorearlos o modificarlos a gusto.

Lo bueno es que todos los días van subiendo nuevos íconos. Hasta hace unos días eran apenas más de 100, así que si entran a diario verán como la colección sube y sube.

Si desean usar estos íconos como fuentes web, también pueden hacerlo entrando aquí y bajando el set de fuentes.

Herramienta gratis para crear mockups para promocionar apps y sitios web

mockup

Cuando uno está por lanzar o ha lanzado una app o nuevo proyecto web necesita promocionarlo, y para ello la forma más atractiva es a través de mockups. Para los que no saben bien de qué se trata, los mockups son una especie de fotomontajes donde mostramos capturas de pantalla o diseños para ver “cómo quedarían” o “cómo es” una app.

Si sabemos un poco de diseño gráfico podemos crear los mockups nosotros mismos, pero si somos medio vagos (me inluyo) para qué vamos a hacer tanto problema si podemos usar herramientas web que nos faciliten la tarea a un par de clicks.

Mockup Generator es una herramienta web que nos permite crear mockups online de manera simple y gratis, sin saber de diseño gráfico.

Crear mockups online para mi app

El procedimiento es muy simple, lo primero es ingresar a la web e iniciar sesión.

Luego tenemos que elegir el modelo del mockup dependiendo de nuestras necesidades, ya sea Macbook, PC, Smartwatch, iPhone, iPad, Android, etc.

mockup generator

Una vez elegido el diseño pueden personalizarlo a gusto con distintas configuraciones de dispositivos, ubicaciones, fondos, y obviamente su propia captura de pantalla de la app o sitio web.

Pueden acceder a esta web desde aquí y comenzar a crear sus propios mockups.

60 modelos de degradados en CSS para usar gratis en tus diseños

Los degradados son uno de los recursos de diseño más estéticos, pueden usarse en botones, en fondos, o para usar como fondos en imágenes. Le dan a nuestros diseños un toque muy elegante y sofisticado. Por eso, hoy quiero compartir con ustedes una colección de degradados en CSS muy buena.

Degradados CSS

En total son 60 modelos de degradados, de todos los colores y para todos los gustos. Tienen la opción de descargarlos en formato de imagen, o bien descargar el código CSS para usar directamente en sus diseños.

Hacer un degradado, claro está, no es algo muy difícil. El secreto está en tener buen gusto para combinar los colores.

Pueden acceder a esta colección de degradados en CSS desde aquí.

Loaders y spinners en CSS gratuitos y listos para usar

No hay sitio web en internet que no use alguna forma de mostrar el progreso de una tarea. Pueden ser barras de progreso, spinners o loaders. Y de estos ultimos me quiero ocupar hoy, por eso quiero dejarles un par de recursos para descargar unos modelos geniales de loaders y spinners en CSS.

CSS Spinners y Loaders

CSSPIN

Aquí podemos encontrar 12 modelos de diversa índole, para todos los gustos. Lo bueno es que son modulares y completamente personalizables. En esa página tienen los ejemplos, y desde allí acceden a los códigos en Github.

Loaders and Spinners en CodePen

En CodePen hay una genial colección, algunos recursos son de pago, pero la mayoría son gratuitos. Hay diseños más avanzados que en el primer sitio que les recomendé.

Single Element CSS Spinners

Aquí pueden encontrar 8 modelos bastante simples, especial para aquellos a los que les gusta lo minimalista. Si hay alguno que les gusta, desde allí mismo pueden obtener el código.

SpinKit

Y en este último link van a encontrar 11 modelos, también bastante básicos pero muy interesantes. Si hay alguno que les gusta, arriba tienen el link que dice “source”, para descargar el código.

Topol.io, plantillas de email HTML gratis con editor incorporado

Si tienen algún proyecto en el que tienen que hacer email marketing y enviarle newsletters a sus suscriptores, esta herramienta les será de muchísima utilidad. Se trata de Topol.io, un servicio gratuito que nos permite crear plantillas HTML para nuestros emails de manera completamente gratuita y sin saber de diseño.

Topol.io

Topol.io es, como ya les comenté arriba, un servicio gratuito que nos permite crear nuestras plantillas HTML de manera muy simple, sin que sepamos de diseño. Todo se hace gracias a un genial editor incorporado que nos permite ir modificando las distintas partes de la plantilla con apenas unos clicks.

Lo único que hay que hacer es elegir alguna de las plantillas que están disponibles y comenzar la edición. Actualmente hay 7 modelos; son pocos, pero seguramente con el tiempo van a ir agregando más.

Topol.io

Una vez que seleccionamos el modelo deseado y pasamos el captcha, se cargará el editor. Desde allí se puede modificar todo lo referente al diseño y contenido de la plantilla de manera muy sencilla, como si se tratara de un editor visual.

Una vez que se termina la edición, solo nos queda guardar y descargar la plantilla para usar libremente en nuestros emails.

Es un recurso que todos tendríamos que tener guardado en marcadores por las dudas.

Sombras para texto en CSS: 41 modelos gratis y listos para usar

Hoy en día, gracias a CSS, se puede hacer cualquier cosa. Y en este caso les quiero dejar una colección de efectos de sombras en CSS para que puedan aplicarle a sus textos y darles mejor estilo.

Sombras CSS para texto

Este tipo de recursos me encantan, por eso nunca dudo en compartirlo con todos ustedes; sobre todo con los diseñadores que nos leen.

Sombras en CSS gratis

Lo bueno de estas sombras es que son completamente gratuitas y libres para usar en nuestros diseños.
En total son 41 diseños distintos, listos para ser descargados y usados en segundos.

En cada diseño podemos ver el nombre de la fuente usada, la paleta de colores y, obviamente, el código CSS para usarlo en nuestros diseños.

Al tener los códigos, luego podremos modificarlos a gusto. No es lo mismo empezar de cero, que ya tener una base a editar. Podemos cambiar los colores, el tamaño de la sombra, etc.