Diseño

Herramienta gratis para crear mockups para promocionar apps y sitios web

por

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

por

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

por

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

por

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

por

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.

 

2 herramientas gratis para encontrar las mejores combinaciones de fuentes

por

Una de las tareas más complicadas de todo diseñador es encontrar combinaciones de fuentes. Esta combinación tiene que ser agradable a la vista, pero puede que elijamos fuentes totalmente distintas o similares. Eso va en el gusto de cada uno. Por eso, hoy les quiero recomendar dos herramientas gratuitas para encontrar combinaciones de fuentes perfectas.

Estas webs nos permiten encontrar combinaciones de manera visual. Esto es mucho más sencillo que tener que hacerlo «manualmente». Nos ahorra mucho tiempo y convierte la tarea en algo divertido.

Mixfont

Por un lado tenemos Mixfont, que puede usarse de dos maneras:

  • Usar el generador de combinaciones: dándole al botón «generate», nos mostrará, de manera aleatoria, las distintas combinaciones de fuentes posibles.
  • Ver las combinaciones más populares: esto nos ahorra más tiempo aún. Nos mostrará las combinaciones más votadas por las demás personas.

Mixfont

Dentro de las opciones que tenemos, se puede invertir la combinación; también tenemos un botón para cargar otra combinación; y hasta nos dan el código para embeber la fuente.

Si hacemos un poco de scroll, llegaremos a la sección donde tenemos vista previa de la fuente utilizada en distintos diseños. Realmente excelente.

Fontjoy

La segunda opción es Fontjoy, una herramienta similar, pero con algunas características que la diferencian de Mixfont.

En principio, nos permite hacer combinaciones de hasta 3 fuentes. Esto está bueno porque podemos, por ejemplo, elegir fuentes para título, subtítulo, y contenido del párrafo.

Fontjoy

Una de las características interesantes de Fontjoy, es que podemos definir el nivel de similitud de las fuentes. Si queremos que sean parecidas o que contrasten.

Otras cosas a resaltar es que podemos ver una lista de recomendaciones para las fuentes. También podemos bloquear alguna de las fuentes por si no queremos que se cambie al generar otra combinación.

Iconos web font de las distros de Linux más populares

por

Siguiendo con los posts de recursos de diseño, hoy les quiero dejar un set de iconos web font de las distros de Linux más populares. Estos íconos están buenos por si estamos armando algún sitio web en que tratamos temas sobre Linux; para desarrollo de aplicaciones o interfaces web.

Linux Font

Font Linux es completamente gratuito, y ahí mismo les explican su uso. Algunos de los iconos que tiene el pack son: Ubuntu, CentOS, Gentoo, Mandriva, Slackware, Fedora, Linux Mint, Manjaro, RedHat, Debian, OpenSUSE, y varios más.

También les puede interesar:

Pack de 900 increíbles iconos Material Design para descargar

por

Según Google, Material Design es lo que se viene. Por lo tanto, hay que estar preparados para comenzar a hacer diseños acorde a este estilo. Por esta razón, hoy les quiero dejar este increíble pack de iconos Material Design gratis y open source para que usen en el desarrollo de sus diseños web o apps.

Pack de íconos Material Design

Es un pack de más de 900 iconos, con lo cual van a encontrar para todo tipo de acciones y usos. Se pueden usar en diseño de interfaces web o para el desarrollo de aplicaciones.

Para más datos, son el pack de iconos que ofrece Google de manera gratuita para que los desarrolladores y diseñadores puedan hacer sus diseños Material.

Lo bueno es que podemos descargar todo el pack en un zip, o bien bajar solo los que nos interesen.
Para ubicar los iconos podemos usar el buscador para ingresar una palabra clave.

Cuando hagan click en alguno de los iconos, verán que abajo se despliega una barra de herramientas desde donde pueden elegir los dpi del ícono, el color, y hasta podemos descargarlo en SVG o PNG.

Lo mejor de todo, podemos usar los iconos como web fonts. Y ellos mismos nos dan el código para hacerlo.

 

El Museo del Diseño Web te muestra cómo eran los sitios más conocidos hace unos años

por

El diseño web ha ido mutando con el paso de los años. Lo que hoy parece última moda y tendencia, en unos años será obsoleto. ¿Se acuerdan de la web 2.0? Ese es un claro ejemplo.
Estaría buenísimo que haya un lugar donde recopilen los cambios de estas webs, y de eso se trata lo que les quiero contar hoy.

El Museo del Diseño Web

Si bien ya existe archive.org, también está El Museo del Diseño Web, un sitio donde podemos ver los diseños de las webs más conocidas de internet, hace unos años atrás.

Este museo recopila los diseños de más de 800 webs desde el año 1996 hasta el 2005.

Navegar por los diseños es simple gracias a las opciones que tienen: podemos buscar por año, por categoría de la web, o por estilo del diseño.

Es increíble ver cómo han ido evolucionando los diseños de los sitios que usamos todos los días. Por ejemplo, Google y Facebook; su diseño era muy pobre, pero para ésa época alcanzaba.

Hoy en día se requieren otro tipo de diseños ya que la gente consume otro tipo de contenidos, tenemos dispositivos que soportan mejores lenguajes de programación, etc.

Como yapa, les recomiendo que visiten la sección Timeline, donde podrán ver una línea de tiempo de cada sitio web con du diseño.

Excelente set de íconos open source para diseño web o aplicaciones

por

Cuando uno está diseñando la interfaz de un sitio web o aplicación, siempre tiene que contar con buenos íconos, y si son open source mejor. Por eso quiero recomendarles un set que encontré y estoy seguro que les va a ser de mucha utilidad.

Set de íconos gratis

Se trata de un set de íconos simples y livianos que podemos usar en cualquier diseño. La colección es bastante completa, hay para todo tipo de usos, entre los cuales encontramos:

Íconos de…

  • Flechas.
  • Comunicaciones.
  • Controles multimedia.
  • Foto y video.
  • Localización.
  • Clima.
  • Logos de servicios.
  • Y el «core» que tiene de todo para armar nuestra interfaz.

Podemos descargar todo el set completo en un archivo zip, o bien descargar uno por uno, solo los que nos interesen. Todos los íconos están en formato SVG, con lo cual pueden editarlos a gusto de forma muy rápida y sencilla.

Lo mejor de todo es que son open source, así que pueden usarlos como se les antoje, modificarlos a gusto y usarlos para proyectos comerciales sin problemas.

Pueden descargar los Feather Icons desde ese link.