Categoría: Utilidades para diseño

Aplicaciones y recursos para diseñar. Recursos para diseñadores, herramientas gratuitas y consejos para diseñar por móvil y web.

giphy presenta un sencillo creador de animaciones

Publicado el

por Juan Diego Polo

captura-111

En enero vimos como el gigante imgur lanzó una herramienta diseñada para pasar de ví­deos de youtube a gif de forma sencilla, herramienta que os comentamos en este artí­culo, ahora es giphy quien quiere competir en esta categorí­a, y lo hace con giphy.com/create/gifmaker.

Se trata de una aplicación web en la que solamente tenemos que indicar la url del ví­deo del cual queremos obtener la animación y las variables relacionadas con la duración de la animación resultante, siendo posible subirlo a su plataforma para obtener el código necesario para incrustarlo en cualquier página web. Podemos también incluir un texto en el gif final, obteniendo un resultado semejante al que veis aquí­:
Continúa leyendo «giphy presenta un sencillo creador de animaciones»

Blend, la forma más sencilla de hacer degradados CSS

Publicado el

por Juan Diego Polo

Es cierto que los degradados hace algunos años que dejaron de estar de moda. Los diseños actualmente son más planos, más ligeros y minimalistas, pero eso no significa que muchos de nuestros clientes no quieran saber de modas y prefieran apostar por los clásicos cambios sutiles de color en los fondos y componentes de sus sitios web.

Existen muchas aplicaciones que ayudan a diseñar degradados en CSS, pero la que os presentamos hoy es seguramente la más sencilla e intuitiva de todas: Blend.

Solo tenemos que elegir el color inicial y el final y pulsar en el botón central. Una vez mostrado el degradado, moveremos el eje hacia un lado u otro para aumentar la cantidad de uno u otro color, siendo posible en todo momento obtener el código CSS desde la misma pantalla.

captura-20

Creado por el diseñador Colin Keany, de DigitalOcean, no requiere registro ni identificación de ningún tipo. Tampoco tiene publicidad ni enlaces hacia otras páginas, aunque sí­ pueden encontrarse los clásicos botones para compartir el proyecto en las redes sociales.

Pablo 2.0, nueva versión de la herramienta de creación de banners de buffer

Publicado el

por Alex Galera

Mucho más sencilla que canva.com, pero también más sencilla de usa, y mucho más intuitiva, Pablo se presentó hace algunos meses como una buena forma de crear un banner en pocos minutos.

La herramienta, creada por Buffer.com, sufre ahora una excelente actualización que permite definir los tamaños adecuados para cada tipo de red social, por lo que tenemos al alcance de un click la posibilidad de personalizar el resultado para no preocuparnos con el ancho y largo de cada trabajo.

Disponible en buffer.com/pablo, podemos añadir un texto principal, un texto secundario y un logo, así­ como una imagen que sirva como fondo del banner. En el menú lateral es posible definir los tamaños, y dentro del mismo banner editaremos los textos.

captura-73

En la parte superior tenemos tres opciones para añadir efectos al fondo: dejarlo con más contraste, difuminarlo o ponerlo en blanco y negro, decisiones que se tomarán dependiendo del tono de la imagen y del color del texto que hay por encima de ella.

Anque ya hay algunas fotografí­as que podemos usar como fondos, es posible subir la nuestra, por lo que la personalización puede ser bastante flexible.

Lo dicho, no es canva.com, pero para un banner rápido, es perfecto.

Facebook presenta una web dedicada al diseño

Publicado el

por Juan Diego Polo

captura-79

Si os gusta el diseño que Facebook usa en sus aplicaciones y os gustarí­a obtener recursos en ese sentido, echad un vistazo en facebook.github.io/design.

Se trata de una nueva página que Facebook ha creado para compartir material de diseño gráfico, desde artí­culos con las mejores prácticas hasta archivos que podemos usar para crear nuestros propios trabajos.

Es posible encontrar, por ejemplo, archivos de photoshop con manos que sujetan un móvil en blanco, ideal para rellenarlo con nuestro diseño antes de presentarlo al mundo, así­ como enlaces a la página de Facebook en Medium, donde tienen artí­culos útiles para profesionales de este área.

Aunque no es una colección muy amplia, es un primer movimiento que vale la pena seguir de cerca. El diseño de Facebook puede gustar más o menos, pero algo es indiscutible: atrae a miles de millones de personas cada dí­a, por lo que «algo» tendrá. Aún así­, los recursos ya publicados no solamente hacen referencia a las guí­as de estilo del propio Facebook, también ayudan a encontrar material para aplicaciones móviles en general, por lo que paree que la variedad será una buena protagonista de esta nueva sección.

Canva, la herramienta para hacer banners, recibe 15 millones de dólares de inversión

Publicado el

por Juan Diego Polo

captura-200

Seguramente muchos de vosotros usáis canva.com para crear banners de todo tipo, desde mensajes para las redes sociales a obras de arte para poner en los perfiles. Lo que es posible que no sepáis es que la empresa ya está valorada en 165 millones de dólares, un número ampliado hoy después de los 15 millones que han recibido de inversión.

El modelo de negocio se basa tanto en el lanzamiento de la versión «para el trabajo» de Canva, que permite la colaboración de varias personas en los mismos banners, como en la adquisición de licencias de imágenes de su banco particular a un dólar la unidad.
Continúa leyendo «Canva, la herramienta para hacer banners, recibe 15 millones de dólares de inversión»

Stylizer, para crear CSS de forma mucho más intuitiva

Publicado el

por Juan Diego Polo

Las hojas de estilo en una web son las responsables por todo su diseño: los colores, los espacios, el tipo de letra, la estructura… a menudo solo tenemos que cambiar de CSS para tener una web completamente renovada, aunque es necesario tener bastantes conocimientos para poder realizar los cambios deseados en poco tiempo.

Lo que ofrece Stylizer es una herramienta que ayuda a realizar cambios en el archivo CSS de forma visual, con un editor que puede abrir cualquier web local para realizar el trabajo.

captura-100

La aplicación permite que se vean los cambios de forma inmediata a medida que realizamos alteraciones en el diseño, evitando el F5; ofrece recursos para hacer de forma automática tareas repetitivas; permite el cambio de navegador de Internet para verificar que todos son capaces de mostrar el resultado que estamos deseando; ofrece barras de desplazamiento para cambiar el valor de las variables, evitando así­ la introducción manual de números en caso de que no lo queramos; tiene una herramienta para incluir los colores en una paleta con un simple click; dispone de sistema de detección de errores en la sintaxis…

Aunque es posible bajar una demostración, y ver un ví­deo con un ejemplo de uso, la aplicación, disponible para Windows y Mac, no es gratuita. La licencia cuesta 79 dólares para la versión 6, que fue lanzada recientemente.

medialoot – miles de fuentes, iconos, gráficos, plantillas, interfaces y más

Publicado el

por Juan Diego Polo

captura-37

Si estáis buscando recursos que ayuden a ampliar la variedad de vuestros trabajos en diseño, echad un vistazo en medialoot.com.

Se trata de una colección de componentes de todo tipo con el diseño como protagonista, fuentes, iconos, gráficos, plantillas, interfaces y otros elementos que podemos incluir en nuestras aplicaciones, temas y demás trabajos para darle un estilo más profesional en menos tiempo.

El proyecto fue creado por Mason Hipp y Jon Phillips, diseñadores que decidieron comenzar a realizar la recopilación de contenido para evitar siempre el mismo tipo de iconos y botones que se suelen comprar en las tiendas de este tipo. Lo que hacen es ofrecer «cajas» enteras de componentes, con recursos que combinan entre ellos para ayudar a tomar la decisión final.
Continúa leyendo «medialoot – miles de fuentes, iconos, gráficos, plantillas, interfaces y más»

Dos prácticas formas de encontrar la tipografí­a adecuada

Publicado el

por Juan Diego Polo

Encontrar el tipo de letra para nuestro próximo proyecto es una de las tareas más complejas. Son muchas las opciones y muy variados los efectos que produce una tipografí­a u otra, motivo por el cual es importante tener presentes algunas herramientas que ayuden a ver el resultado con varias alternativas de forma rápida y efectiva.

Os dejamos aquí­ dos aplicaciones con ese objetivo, herramientas en las que es muy sencillo cambiar de tipografí­a para ver el efecto que tiene en la web.

wordmark.it

captura-7

Solo teneos que indicar la palabra que queremos ver de ejemplo y pulsar el botón, con algunas opciones en el menú superior que ayudan a cambiar el tamaño, el fondo y poco más.

Son decenas de fuentes que pueden ampliarse siempre en la parte inferior, con una opción de registro para que sea posible guardar las selecciones que realicemos.

fontfling.com

captura-8

No se ven todas las opciones de una sola vez, como en el caso anterior, pero con el menú lateral es posible personalizar el aspecto para cada una de las muchas opciones existentes. Cuentan con cientos de tipos de letra obtenidos de FontSquirrel, y en caso de gustarnos alguna de ellas, podemos bajarla desde el mismo portal.

Como veis, cada vez es más sencillo tomar este tipo de decisiones.

Curso online gratuito de Google sobre Material Design

Publicado el

por Juan Diego Polo

captura-13

Son muchos los cursos que empiezan este mes, lista que actualizamos siempre en www.sinoloveo.com, y la ampliamos ahora con un curso que puede hacerse en udacity: Android Design for Developers.

El objetivo es ayudar a los programadores android a adaptar sus aplicaciones para Material Design, siguiendo así­ las normas que cada vez más apps están adoptando.

El curso es gratuito, puede hacerse por Internet, pero está en inglés. Lo imparte el propio Google, y lo divide en cinco lecciones:

– Lección 1: Android Fundamentos del diseño: Para conocer y aplicar los fundamentos del diseño de Android en las aplicaciones, tratando desde patrones de navegación común a temas que pueden aplicarse.

– Lección 2: Las superficies: Para entender cómo programar la interacción de los elementos en una aplicación.

– Lección 3: Diseño Gráfico: Para saber cómo incluir lí­neas clave, indicadores, fuentes, escala tipográfica, paleta de colores y temas / estilos.

– Lección 4: Movimiento: Para comprender el uso de movimiento en aplicaciones y cómo utilizar las transiciones al cambiar los estados.

– Lección 5: Diseño Adaptable: Para programar teniendo en cuenta que el resultado será ejecutado en diferentes tamaños de pantalla.

El curso tiene una duración de 4 semanas (tiene en cuenta una media de 6 horas por semana), pero puede comenzarse en cualquier momento.

Gravit, una plataforma de diseño en la web, con funciones para trabajo en equipo

Publicado el

por Juan Diego Polo

captura-11

Gravit, herramienta que en 2014 os comentamos por tener un «photoshop online» alojado, con código disponible en github, se ha transformado en algo bastante más sofisticado.

Han aprovechado su experiencia en el mundo de los editores de imágenes online (recordad la lista de los muchos photoshops online que pueden encontrarse en Internet) y se han concentrado en crear una plataforma que permita el trabajo en grupo a los profesionales que trabajan con diseño.

Desde Gravit quieren crear una aplicación web que permita el diseño con la exactitud y precisión que un profesional de esta categorí­a necesita, ofreciendo herramientas para crear y alterar formas de todo tipo, incluir tipografí­a a partir de Google fonts, permitir colaborar con otras personas al mismo tiempo y, en un futuro próximo, transformar los diseños en prototipos (pretenden incluir funciones para que haya links en los diferentes componentes diseñados).

Continúa leyendo «Gravit, una plataforma de diseño en la web, con funciones para trabajo en equipo»