Pattern Library, recopilación de patrones gratuitos para diseñadores

Pattern LibraryPattern Library es un proyecto que expone patrones para diseños web gracias a la colaboración de diseñadores de diferentes parte del mundo.

Cada uno de los patrones que se han subido a la biblioteca puede utilizarse de forma gratuita en cualquier trabajo o proyecto que estemos trabajando. Solo tenemos que escoger el diseño que nos agrada y dar enter en “Download now”.

Por el momento, cuenta con unos 50 patrones con unos diseños muy interesantes, combinando diferentes estilos, texturas y motivos…muchos colores, figuras geométricas, caricaturas, entre otros.

Para navegar por todos los patrones disponibles solo tenemos que desplazarnos por la página o utilizar las opciones que se presentan en el lateral derecho. Si nos interesa el estilo que presenta algún diseñador y deseamos conocer más de su trabajo, veremos que se integran algunas opciones de contacto, como su página web o su perfil en Twitter.

Y como es un proyecto colaborativo, si nos interesa también podemos participar con nuestro diseño. Tal como se indica en la página de presentación solo tenemos que enviar la información que se solicita para formar parte de la colección que se muestra en Pattern Library.

Una propuesta interesante que podemos tener en cuenta junto a nuestro kit de recursos para proyectos de diseño.

Canva presenta filtros para los fotografí­as de nuestros diseños

No es la primera vez que hablamos de canva.com, una excelente solución para crear banners y diseños de todo tipo en pocos minutos, y no será la última. Lo hacemos ahora para presentar su última novedad: filtros para las fotos.

canva

Los presentan en su blog como una solución para que podamos aplicar filtros «a lo instagram» en las fotos que vayamos a incluir dentro de nuestros trabajos, 10 filtros predefinidos que incluyen desde los clásicos en blanco y negro hasta otros más sofisticados para añadir drama a los colores de nuestras capturas.

Lo original del proyecto es que incluyen controles para aumentar brillo, contraste, saturación y otras variables que permiten crear hasta 6.660.360.220.721.301 posibilidades diferentes, por lo que se transforma en una excelente herramienta para crear filtros personalizados, guardarlos y aplicarlos posteriormente.

Podéis aprender a usar estos controles en este artí­culo o conocer los filtros predefinidos aquí­; lo único que tenemos que hacer es subir la imagen que deseamos procesar y pulsar en el nuevo botón Filter, seleccionando uno de los filtros existentes o jugando con las variables de la opción avanzada.

Por supuesto, las imágenes subidas podrán integrarse con las plantillas de Canva, creando así­ trabajos ideales para divulgar en artí­culos, redes sociales, campañas de marketing, trabajos escolares o cualquier otro lugar donde la imagen sea la protagonista.

Tres herramientas que ayudan a crear banners atractivos

Dicen que una imagen vale más que mil palabras, aunque siempre acaba dependiendo de la imagen y de las palabras… lo que puede ofrecernos la tecnologí­a son herramientas que ayuden a crear imágenes de forma sencilla, pero el talento que se debe tener para hacer algo atractivo no es algo que se aprenda en dos dí­as.

Lo que os voy a indicar aquí­ son tres recursos que pueden ayudar a facilitar la creación de banners, algo fundamental para enviar un mensaje en las redes sociales, ilustrar un artí­culo o diseñar una campaña publicitaria.

La primera de ellas es clippingmagic, una aplicación web que ayuda a eliminar el fondo de cualquier imagen para quedarnos únicamente con el objeto que nos interesa, elementos que podemos usar después para que forma parte de nuestro banner final. Clippingmagic no hace nada que no tenga un buen editor como Gimp o Photoshop, pero es web, no necesita instalación ni registro y obtiene resultados excelentes en poco tiempo.

La segunda opción es usar picmonkey, aplicación web que tampoco necesita registro, que incluye efectos, texturas, pegatinas, decenas de tipografí­as, marcos, fondos y varios elementos más que permiten construir un banner en pocos minutos.

Y la tercera es una opción que se está haciendo cada vez más popular: canva, aplicación extremadamente completa que ayuda a incluir cientos de diseños e imágenes de forma sencilla, aunque en este caso sí­ es necesario el registro. Podemos hacer trabajos realmente espectaculares, accediendo a recursos diseñados por profesionales de varias partes del mundo.

canva

Nada sustituye el arte de un profesional del diseño gráfico, pero si no tenemos ninguno a mano, estas herramientas siempre pueden ayudar.

AirWalk Design, el Pinterest para diseñadores, lanza su versión final

airwalk

Os hablamos de AirWalk Design como un nuevo proyecto especialmente creado para aquellos diseñadores que buscasen un lugar para encontrar la inspiración. En él podí­amos acceder a un tablero casi infinito de distintas ilustraciones y diseños especialmente filtrados por especialistas encargados de hacer que en AirWalk sólo encontremos contenido de calidad, dividido en diferentes categorí­as.

La plataforma crece con una actitud abierta a cualquiera que quiera compartir su trabajo en ella, siempre que sea de calidad, y ya entonces nos permití­a enviar los trabajos ví­a Dropbox.

Ahora AirWalk Design lanza una versión definitiva con un nuevo diseño que ofrecernos, compatibilidad con móviles y tabletas, nuevas imágenes añadidas a la galerí­a, imágenes favoritas y populares en la comunidad, un feed de inspiración de los que contactos a los que seguimos y búsqueda por colores y palabras clave (si queremos buscar superhéroes accederemos a un feed sólo de superhéroes, y si queremos buscar diseños en color verde se nos presentará un feed de imágenes en tonos verdosos).

Si queremos investigar un poco sobre el mundo del diseño y mejorar nuestra experiencia presente, también podremos leer sobre diseñadores, acceder a concursos de diseño, leer tutoriales de Photoshop y mucho más.

La información compartida en AirWalk se actualiza cada dí­a, de forma que siempre podamos encontrar alguna pieza nueva que nos inspire.

Triangly, crea un portafolio con tu trabajo arrastrando imágenes a tu Dropbox

Hay varias plantillas, aplicaciones y plataformas de diversos tipos que ayudan a crear un portafolio con nuestros diseños, pero pocas tan prácticas como Triangly (triangly.com).

Se trata de una solución que ha empezado a repartir las invitaciones a los que las solicitan en su página principal. Una aplicación que solicita acceso a un directorio de Dropbox para obtener de allí­ las imágenes que publicará posteriormente en su cuenta.

El proceso es muy sencillo: creamos la cuenta, establecemos un subdominio en triangly.com y arrastramos las fotos, diseños o cualquier otro archivo gráfico en el directorio correspondiente de Dropbox. Automáticamente veremos como nuestro subdominio en triangly comienza a tomar forma, agrupando las imágenes de forma elegante.

Podemos personalizar algunos aspectos estéticos de nuestro portafolio, definir nuestros perfiles en las redes sociales para divulgarlos en la página e incluir el código de google analytics para ayudar a analizar las visitas (modulo que aún no está disponible).

triangly.com

Ya que la fuente del material es Dropbox, podemos compartir el directorio con otras personas y, de esta forma, construir un portafolio de imágenes colaborativo, algo que puede ayudar en el trabajo en equipo.

Como comentado anteriormente, la aplicación aún está cerrada para el público en general, por lo que se hace necesario solicitar invitación en triangly.com.

Comunidad de 50K diseñadores está cambiando la industria del diseño web

webydo

Webydo (webydo.com) proyecto que cuenta ya con 50.000 diseñadores en su plataforma, es un tipo de software orientado al diseño web en la nube, un sistema que está cambiando la manera en la que los diseñadores profesionales crean sitios web para sus clientes en varias partes del mundo.

Uno de los objetivos es reducir el tiempo perdido en la codificación manual repetitiva, evitando infinitos ajustes hechos a mano para adaptar el sitio web a las diferentes plataformas y dispositivos. Las únicas alternativas que ofrecí­a el mercado eran simples: creadores de sitios web para principiantes que no necesitasen de código.

El problema es que esas soluciones no son las que un diseñador profesional necesita. Sitios que permiten hacer diseños sin saber programar son prácticos, pero extremadamente limitados, casi siempre basados en un conjunto básico de plantillas prediseñadas.

Lo que el mercado necesitaba es una herramienta que ofrezca la posibilidad de crear diseños web avanzados y personalizados al milí­metro. Es ese el motivo por el que los clientes contratan diseñadores y por el que los diseños de este tipo dominan la web (los diseños de principiantes utilizando herramientas como las mencionadas anteriormente suman únicamente un 3% de los sitios web del mundo).

Así­ nació Webydo, herramienta que nos permite crear sitios web profesionales sin necesidad de escribir código, pero presentada como una solución B2B para creativos profesionales, un sistema que ya ha sido definido por varios medios como una de las tendencias en diseño web de 2014.

Solución profesional

Continúa leyendo «Comunidad de 50K diseñadores está cambiando la industria del diseño web»

trackduck, una buena herramienta para diseñadores y programadores web

trackduck

Cuando realizamos una aplicación web o un nuevo sitio para un cliente solemos utilizar sistemas de gestión de proyectos que ayuden a tener las tareas siempre visibles, actualizando su estado y guardando los comentarios en todo momento (personalmente utilizo mantis). El problema es que la mayorí­a de ellos no están basados en un entorno visual muy intuitivo para el cliente, por lo que acaba siendo utilizado únicamente como herramienta interna, siendo el email el principal medio de comunicación entre contratada y contratante.

La idea de trackduck (trackduck.com) es ofrecer una herramienta que permita a los clientes definir tareas «pintando» encima del sitio web que se está construyendo. Solo tiene que marcar la zona que quiere comentar (un error o un cambio en la estructura de la información, por ejemplo) y comentar encima del diseño, permitiendo de esa forma que las tareas pendientes estén «geográficamente localizadas» dentro de cada página presentada.

En su web muestran algunas animaciones con ejemplos de uso, destacando que apuestan por un sistema de comunicación en tiempo real que permita expresar la opinión de los clientes y a los programadores recibir el feedback y el estado de cada tarea abierta. Cada vez que hay una alteración en uno de los estados, tanto clientes como desarrolladores pueden recibir un email, aunque la idea es que deje de usarse el correo electrónico para gestionar este tipo de proyectos.

El precio depende del número de sitios y páginas registrados, teniendo versiones que parten de 9 dólares al mes.

Recursos de todo tipo para dar nueva vida a tus creaciones

Combination UI

Continuando con nuestra selección habitual de recursos mensuales, en esta ocasión te traemos recursos gráficos para Web e impresión, interfaces gráficas de usuario, iconos, plantillas y temas para WordPress en PSD y HTML, listas para implementar en tu sitio Web, y también experimentos de código.

Recursos gráficos para todo tipo de proyectos, Web e impresos

Esta sección esta compuesta de recursos gráficos, útiles tanto para impresión como para Web. Entre ellos se cuentan patrones, botones sociales, mockups de dispositivos para mostrar tus creaciones, vectores, fondos de pantalla y más.

Fondo de pantalla iOS 7: fondo en alta resolución con efecto de gradiente

Fondo de pantalla iOS7

Mockups iPad: un set de iPads en estilo plano para presentar tus proyectos

mockups iPad

Botones de Facebook: útil set de botones con docenas de distintos estilos

botones de facebook

Patrones claros: patrones para fondos de pantalla en tonalidades claras

patrones claros

Etiquetas retro: 48 etiquetas retro para toda clase de proyectos

Etiquetas retro

Elementos para infografias: un paquete de elementos en PSD para infografí­as

Elementos para infografias

Plantilla de volante: plantilla en un estilo limpio y claro

plantilla de volante

Logo templates: un set de 9 plantillas de logos corporativos

Logo templates

Explosion in Space: un fondo de pantalla abstracto en alta resolución

Explosion in space

Vectores de paí­ses: útil set de vectores de casi todos los paises del mundo

Vectores de paises

 

Interfaces gráficas con todo tipo de efectos para renovar la apariencia de tus proyectos

En esta sección encontrarás, interfaces gráficas, en algunos casos con transparencias interesantes, fondos brillantes, texturas en 3D, interfaces sociales, interfaces de dispositivos móviles, y otras.

Interfaz transparente: moderna interfaz en tonos oscuros

Interfaz transparente

Combination UI: avanzada interfaz con un enorme lote de elementos

Combination UI

Lucid UI kit: interfaz con texturas 3D y brillos suaves

Lucid UI kit

UI set: interfaz para aplicaciones sociales para móviles

UI set

White Stripes: interfaz hecha de widgets lineales

White stripes UI

Real estate Booking UI: intefaz minimalista para uso personal y comercial

Real estate booking UI

Interfaz iOS 7: moderna interfaz para aplicaciones sociales.

interfaz iOS7

UI kit: interfaz para la web con estilo semi-plano

UI kit

Botones 3D: set de botones multimedia con textura plástica

Botones 3D

Flatty: completo set de elementos web con mas de 30 tipologí­as

Flatty UI

 

Los mejores iconos de todo tipo para mejorar la apariencia de tu sitio

Esta parte del post está compuesta de increí­bles iconos distribuidos en sets completos. Entre ellos podrás encontrar iconos planos en su mayorí­a, minimalistas, sociales, simbólicos y modernos.

Iconos iOS7: más de 100 iconos con el colorido estilo iOS 7

iconos iOS7

Set de iconos minimalistas para toda clase de proyectos

Iconos minimalistas

40 iconos sociales para WordPress

Iconos sociales para WordPress

Iconos lineares: un set simple de mas de 100 iconos

Simple line icons

Iconos planos PSD: un set de coloridos iconos en 2 estilos

Iconos planos PSD

Sí­mbolos de monedas: un set minimalista con iconos de monedas de distintos paises

iconos de monedas

Paquete de iconos gestuales: 12 iconos para explicar lo que una aplicación táctil puede hacer

Iconos gestuales

Iconos sociales neonizados: iconos lineares con un efecto de color neonizado

Iconos Sociales neonizados

CouCou icons: un set de 64 divertidos iconos con un estilo moderno

CouCou icons

Icon set: 144 iconos en vector para interfaces

Icon set

 

Temas y plantillas en HTML y PSD que dan vida a tus creaciones digitales

Aquí­ verás un montón de temas y plantillas para blogs con el fin de decorar tu sitio Web. Desde plantillas para revistas online, hasta elegantes y profesionales diseños para sitios Web de todas las disciplinas. Son en su mayorí­a responsivas.

Maeja: un tema de WordPress para magazines

Maeja WordPress theme

Tblog: tema minimalista de WordPress para bloggers

Tblog tema de WordPress

Wijayakusuma: una plantilla en HTML con un reloj de cuenta regresiva

Wijayakusuma: plantilla html

Avante: tema de WordPress con un diseño limpio y fantásticos efectos de imagen

Avante tema de WordPress

Paramedic: elegante tema diseñado para blogs de medicina

Paramedic: tema de WordPress

Bloom: plantilla en PSD para sitios de comercio electrónico

Bloom: Plantilla de ecommerce PSD

Supernova: un tema con muchas opciones para blogs

Supernova tema de Wordpress

Flatty: tema para páginas de aterrizaje con un moderno diseño

Flatty plantilla en HTML

Fullby: sencillo tema de WordPress con diseño en grilla para magazines

Fullby tema WordPress

Lycanthropy: tema en estilo plano para magazines

Lycanthropy tema WordPress

 

Experimentos de código para mejorar el rendimiento de tu web

Los siguientes recursos son interesantes experimentos de código en JavaScript, HTML y jQuery. Son diversos plugins que puedes integrar en tu sitio web para incrementar la funcionalidad, agregar nuevas caracterí­sticas y mejorar el rendimiento de tu web.

Batman.JS: un framework para realizar aplicaciones en coffeescript

Batman.JS

Texto en imanes: un divertido experimento de código con efecto de imán para refrigerador

efecto de texto en imanes

Ventana de tour guiado: un experimento de código para tours con transiciones simples

ventana de tour guiado

Fondos de pantalla adaptables: un plugin de jQuery que adapta el color de fondo de acuerdo a la imagen

Fondos de pantalla adaptables

Type rendering mix: una herramienta para aplicar CSS basado en el navegador que se use

Type rendering mix

Icono de menú: un icono de menú que se convierte en el menú

Icono de menu

Selector de imágenes con efecto de rebote

Selecto de imagenes con efecto de rebote

Metro UI animations: set de í­conos animados al estilo de Windows 8

Animaciones interfaz metro

Animaciones de carga: set de modernas animaciones de carga en CSS

Animaciones de carga

Screenfull.js : plugin de jQuery para visualizar elementos en pantalla completa

Screenfull.JS

duologue, para comparar diseños en borrador con capturas de pantallas

Si trabajáis en diseño y programación de aplicaciones sabréis que ni siempre lo que se hace en Photoshop corresponde con el resultado final. Una cosa es diseñar «a mano o a máquina» y otra es adaptar el diseño a la web o a los teléfonos móviles, por lo que el flujo de mensajes entre clientes y creadores es habitual una vez entregado el trabajo: «El logo no se ve igual que en el diseño original», «los botones están muy pequeños», «el campo de búsqueda tiene que estar más abajo»…

Una herramienta como Duologue (duologue.co) puede ayudar reducir ese desgaste entre diseñadores y clientes, ya que permite comparar diseños originales con capturas de pantalla y crear listas de tareas que pueden solucionarse internamente antes de mostrarlo al cliente final.

duologue

En el ejemplo que veis en la imagen tenemos el diseño original y lo entregado por el equipo de programadores/diseñadores. El jefe del proyecto tendrí­a que indicar en la lista central todos los problemas detectados, siendo posible superponer las dos imágenes para ayudar a detectar posibles diferencias importantes.

La aplicación no es gratuita (tiene un coste de casi 50 dólares al mes), aunque, tal y como comentan en TC, es un precio que se paga muy a gusto si con él se aumenta la calidad del servicio presentado.

En el ví­deo inferior muestran una demostración del proceso:

Visual.ly recibe 8,1 millones de dólares en financiación para ampliar su galerí­a de infografí­as

visual-ly

Tendemos a ver y crear infografí­as sobre todos los temas que se nos puedan pasar por la cabeza: desde datos estadí­sticos que nos puedan ser relevantes para entender el mundo hasta infografí­as que nos enseñan cómo ser feliz. Y la plataforma de infografí­as Visual.ly es una de los responsables de esto, plataforma que sigue haciendo crecer su mercado de visualizaciones de datos y que hoy nos anuncia que ha alcanzado 8,1 millones de dólares en financiación.

Visua.ly, que se dedica esencialmente a conectar organizaciones para que éstas puedan convertir sus datos en contenido visual gracias a la colaboración de jefes de proyecto, marcas y empresas con diseñadores, sigue contando con la ventaja de ofrecer rápidos resultados y a bajo precio.

Leemos en VB unas palabras del CEO de Visual.ly, Langille:

Estamos desmontando el modelo de agencia tradicional para crear contenido visual. Hemos implementado un proceso que resulta en una combinación de contenido de alta calidad, rapidez al completar el proyecto y una mejor experiencia de usuario tanto para el creativo como para la marca, todo a un precio muy bajo.

Visual.ly comenta que ha crecido 10 veces más desde el año pasado, y que su presupuesto se ha centrado en pagar a su red de diseñadores. Con esto confirman que la nueva ronda de financiación, realizada por Crosslink Ventures, Correlation Ventures, SoftTechVC y 500 Startups entre otros, se centrará en añadir nuevo talento creativo y nuevos clientes a su red de proyectos.