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.

Nueva versión de Justinmind, para hacer prototipos de aplicaciones web y móviles

Publicado el 6 diciembre, 2014

por Juan Diego Polo

Desde que os hablamos de Justinmind en 2011, ha llovido mucho dentro de esta plataforma que ayuda a profesionales de diseño a crear prototipos para sus clientes.

Disponible para windows y mac, con versión gratuita y versión pro bajo suscripción, Justinmind permite crear bocetos de aplicaciones simulando acciones (desde botones a formularios), con una gran cantidad de elementos que podemos arrastrar y soltar para crear un resultado lo más parecido al producto final posible.

En las últimas semanas han actualizado su versión ofreciendo una librería para los que necesiten crear proyectos usando el nuevo diseño de Google, disponible en la sección de gestión de widgets que se renovó en el lanzamiento de la versión 6.0 en el mes de julio.

En la nueva versión, lanzada hace solo unos días, han mejorado también la sección de widgets para android, así como corregidos algunos problemas en la exportación HTML.

Podéis instalar Justinmind (justinmind.com) de forma gratuita y disfrutar de la versión pro durante 30 días sin pagar nada. Si acabado el periodo no queréis seguir con dicha versión, aún podréis seguir trabajando de forma permanente con la gratis, pensada para proyectos pequeños, freelancers y pequeñas startups.

1500 iconos en color al estilo Google Material

Publicado el 5 diciembre, 2014

por Juan Pablo Sarmiento

Aquí tenéis hoy 1500 iconos llenos de color y estilizados de acuerdo al ya famoso (aunque aún muy reciente) diseño ‘Material’ impuesto por Google. Este concepto se caracteriza por tener marcadas similitudes al estilo ‘flat’, al menos a simple vista, pero viéndolo mas a detalle veremos ciertas especificaciones que le dan a esta iniciativa una identidad propia, lo cual se hará más evidente una vez analices los iconos.

Se encuentran disponibles en tres formatos diferentes (SVG, AI y PNG, siempre en forma vectorial para los dos primeros) y pueden ser utilizados para una gran variedad de proyectos, gracias a la inmensa cantidad de elementos, 1500, lo cual le otorga a esta colección una versatilidad envidiable.

He aquí algunas características de esta compilación:

– Estilo ‘Material’ de Google.
– Disponibles en tres formatos para diferentes usos en proyectos (SVG, AI y PNG).
– Llenos de color y vida, utilizando la paleta de colores estipulada por Google.
– 1500 elementos disponibles.
– Acorde a todas las especificaciones técnicas dadas por la compañía del buscador.
– Perfecto para acostumbrarse a esta nueva idea en diseño, las capas en los archivos de Illustrator pueden ser de gran ayuda.

Aquí tenéis algunas capturas de la colección: Continúa leyendo «1500 iconos en color al estilo Google Material»

Home Design 3D, para crear espacios interiores en 3D, llega a Android

Publicado el 23 noviembre, 2014

por Fco. José Hidalgo

Home Design 3D, aplicación móvil orientada al desarrollo de proyectos de planos de espacios interiores en 3D, llega a la plataforma Android, lo que permitirá a los usuarios de dispositivos Android, tanto de teléfonos como de tabletas que estén bajo la versión 4.0 en adelante, la creación de sus propios proyectos de planos de planta de espacios interiores.

Para ello, los usuarios comenzarán por la creación en 2D de estos espacios sobre cualquier tamaño que desean para después añadir paredes, puertas, cerramientos de madera y otros elementos, y posteriormente podrán arrastrar y soltar algunos de los más de 800 elementos de los que disponen para situarlos en aquellos lugares que deseen dentro de dichos espacios. Finalmente, una vez tengan los planos 2D elaborados, podrán pasar al modo 3D, donde podrán seguir haciendo más modificaciones como añadir, editar o mover objetos 3D, paredes, estancias, etc, o bien obtener finalmente una representación 3D, pudiendo mostrar como quedarían en varios momentos del día.

Hay que señalar que existe una versión gratuita disponible en Google Play, completamente funcional, salvo el hecho de que los usuarios no podrán guardar sus proyectos al ser una versión de pruebas, teniendo para ello que pasar a la versión completa desde la misma aplicación, lo que abre también otras posibilidades de uso de la misma.

Palettab, para descubrir paletas de colores y fuentes para nuestros proyectos

Publicado el 21 noviembre, 2014

por Miriam Schuager

Palettab es una extensión para Chrome que nos sugiere una serie de paletas de colores y fuentes en la nueva pestaña del navegador.

Podemos tomar nota de la paleta entera o considerar los colores que mejor se ajustan a nuestro proyecto.

En cada tarjeta de color tendremos el valor del color que podemos copiar automáticamente al posicionar el mouse, además de dirigimos a Google Fonts para visualizar la fuente sugerida.

Si deseamos tener más detalle de la paleta nos dirigirá a la comunidad de COLOURlovers, donde podremos ver los comentarios de la comunidad, así como su popularidad entre los miembros. Además nos permitirá crear un patrón basándonos en los colores de la paleta.

Es una extensión simple que puede servir como fuente de inspiración al trabajar en proyectos creativos, además de mostrarnos las interesantes características de COLOURlovers.

Otras herramientas gratuitas que pueden tener en cuenta aquellos que trabajen en diseño web son las que compartimos en el artículo Extensiones Chrome para diseñadores web.

¿Qué tipografías elijo para mi próximo proyecto web? 5 herramientas de recomendaciones para ayudarte con ello

Publicado el 18 noviembre, 2014

por Juan David Quiñónez

Echamos hoy un vistazo a brillantes opciones online que seguramente servirán a muchos en la búsqueda de la respuesta a una de las más difíciles decisiones a la hora de trabajar en el diseño de un nuevo proyecto web: Sus tipografías, el combo de fuentes que le harán relucir. Pues bien, para la tarea repasamos las recomendaciones de un hilo en Reddit y algunas que ya habíamos tenido oportunidad de reseñar, en todo caso, espacios perfectos tanto para quienes tienen una idea inicial como para quienes no saben por dónde empezar. Un detalle extra: Si deseas ayuda con el texto de relleno en tus pruebas, no olvides estas alternativas al Lorem ipsum.

Type Genius

Selecciona una de las elegantes fuentes dentro del menú principal de Type Genius, pulsa en View Matches y enseguida tendrás varias recomendaciones de tipografías que irían bien con ella, además, como muestra, algunos ejemplos de texto de relleno -similar al Lorem Ipsum- y sitios web que ya ocupan dichas combinaciones. Ojo a la parte inferior de Type Genius pues, aunque casi imperceptibles, están los botones para cambiar entre las webs de ejemplo a modo de presentación.

Fonts in use

En Fonts in use pueden encontrarse cientos de ejemplos de combinaciones presentes tanto en sitios web como en publicaciones físicas, en particular, libros, revistas, películas y anuncios publicitarios. Aunque las vistas previas recogen detalles rápidos de las fuentes consignadas en cada ejemplo, lo más recomendado, además del buscador, es valerse de los tres filtros que le componen para iniciar las consultas: Industries (negocios, arte, noticias, música, deportes, etc.), Formats (publicidad, infografías, revistas, diarios, software, móviles, etc.) y Typefaces.

Typewolf

Otro escaparate de sitios web que logran destacar por sus muy bien escogidas combinaciones de tipografías, eso sí, Typewolf es mucho más personal que las anteriores opciones así que además de las selecciones generales podremos encontrar artículos especializados, rankings y recomendaciones subjetivas, muy valiosas valga decir, que su respectivo autor comparte frecuentemente.

Fontface Ninja y WhatFont

Y finalmente un par de herramientas con las que podremos conocer rápidamente qué tipografías utiliza determinado sitio web que nos haya llamado la atención. Nombre, Font family, Font Size, Line Height y Line Spacing, y en ocasiones hasta el lugar donde pueden conseguirse, se incluyen en los detalles presentados.

Vale destacar que Fontface Ninja además de como bookmarklet está disponible en forma de extensión para Google Chrome y Safari, y WhatFont solo funciona en Chrome. Por cierto, para identificar fuentes de texto en publicaciones físicas no sobra recomendar al siempre útil WhatTheFont!, un servicio online que se encargará de la detección con apenas cargar una imagen y/o captura de pantalla.

CSS Dig, una extensión chrome para analizar hojas de estilo

Publicado el 16 noviembre, 2014

por Juan Diego Polo

Si trabajáis diseñando o dando manutención en páginas web seguramente os pasáis mucho tiempo analizando y alterando hojas de estilo (archivos .css). Hoy os presentamos una extensión que puede ayudar a realizar el trabajo de forma mucho más sencillo: cssdig.com.

Disponible solo para Chrome, agrupa todos los archivos css a los que hace referencia una página específica, mostrando detalles de la información en un único panel, con tres posibles visualizaciones:

Resumen

Para conocer las páginas CSS a las que se hace referencia. En caso de no poder obtenerse el contenido de alguno de ellos, se indicará en esta página, donde también es posible seleccionar o eliminar hojas específicas.

Propiedades

Para ver las características agrupadas de todos los archivos CSS indicados antes. En dos columnas es posible analizar rápidamente las propiedades y los valores asociados.

Detalles

Para ver el origen de una propiedad específica. Solo tenemos que indicar lo que estamos buscando para obtener los lugares a los que se hace referencia en los archivos css (en la imagen podéis ver un ejemplo con colores: indicamos el color azul y vemos los lugares a los que se hace referencia al dicho color dentro de los archivos CSS).

Como veis, es mucho más fácil de analizar una hoja de estilo usando CSS Dig que las herramientas ya existentes en el propio Chrome.

Precursor, para trabajar en el mismo borrador de diseño desde lugares distintos

Publicado el 15 noviembre, 2014

por Juan Diego Polo

Si tenéis que definir las especificaciones de un diseño y necesitáis realizar el borrador junto a otro profesional que se encuentra en otro lugar, Precursor es una herramienta que os puede ayudar.

Se trata de una aplicación web en la que podemos diseñar elementos dentro de un panel bajo una url única. Cuando compartimos dicha url, otra persona podrá colaborar con nosotros, participando de las ideas, incluyendo diseño y textos, participando de un chat… todo sin necesidad de registro y con un menú lateral que permite ver cuántas personas están en este momento diseñando con nosotros.

El boceto creado puede ser el de una aplicación móvil, una web, un documento… solo tenemos que pulsar con el botón derecho del ratón para abrir el menú de opciones: líneas, círculos, cuadros, textos y demás herramientas que ayudarán a crear el borrador deseado.

Una vez finalizado, podemos capturar la pantalla para recordar lo que hemos hecho, aunque existe la opción de registrarse para poder tener el trabajo bajo nuestra cuenta.

Comentan que es un proyecto aún en desarrollo, por lo que es posible que encontremos muchas novedades en los próximos meses.

originalmockups, plantillas photoshop para el diseño de productos

Publicado el 5 noviembre, 2014

por Juan Diego Polo

Cuando un cliente pide un logo, una tarjeta de visita o cualquier otro trabajo de diseño, muchas veces quiere ver algo más que un archivo jpg, quieren ver una «maqueta» con cómo quedaría ese diseño encima de la mesa, o en una web, o en una taza… en situaciones reales, y es ahí donde originalmockups.com puede ayudar.

Se trata de una web que ofrece de forma gratuita varias plantillas en Photoshop para que sea posible incluir nuestros diseños en las maquetas ya acabadas, permitiendo que en pocos minutos pasemos de un logo a una taza, a un móvil, a una botella, a una tarjeta de visita, a una revista…

originalmockups ofrece de forma gratuita algunos de los trabajos (es necesario indicar el email para recibir el enlace con el contenido), y vende otros también disponibles en su sitio. La licencia permite tanto el uso profesional como el personal, y en su blog suelen dar consejos sobre cómo usar los archivos para obtener mejores resultados.

Una idea interesante que ya hemos visto en otras ocasiones, aunque en este caso es una compañía la única responsable por subir, ofrecer y vender el contenido que allí vemos.

Ya disponible la nueva guía de diseño para Android

Publicado el 28 octubre, 2014

por Juan Diego Polo

En el blog de Android para desarrolladores publican hoy una guía que ayuda a definir las bases antes de comenzar a diseñar nuestra nueva aplicación.

Pensando siempre en el nuevo Android 5.0, nacerá una nueva generación de aplicaciones (semejantes al nuevo Inbox o al nuevo Tumblr) que aprovecharán las características y la potencia de este nuevo S.O. y para ello ya se han divulgado plantillas de Photoshop, Illustrator y Sketch, aunque el material de hoy va más allá, centrándose en recomendaciones para el diseño de componentes.

Podemos una sección en la que habla de capas (cómo deben diseñarse y utilizarse aprovechando las sombras y los niveles de prioridad en la visualización), otra con los colores, iconos, espacios y tipografía como protagonistas, otra con la importancia de los movimientos dentro de las aplicaciones y otra en la que habla sobre técnicas para que los diseños se adapten a las diferentes pantallas de cada cliente.

En la guía hay enlaces a decenas de recursos que ayudarán tanto a programadores como a diseñadores a aprovechar las nuevas características, permitiendo que la nueva versión de sus apps sea moderna, intuitiva y práctica para sus usuarios.

Enlace: Guía de diseño para nuevas apps android

Algunas aplicaciones para crear fondos y texturas

Publicado el 26 octubre, 2014

por Juan Diego Polo

Si estáis buscando un fondo para vuestro nuevo proyecto web, un diseño que ayude a darle color y forma a un nuevo trabajo, echad un vistazo en estas aplicaciones que pueden ayudar a crear texturas, fondos o patrones que puedan repetirse de forma ilimitada.

patternizer.com

Existe un menú lateral donde podemos especificar las variables de nuestro patrón (color, inclinación, espacios, transparencia, grosor…). El resultado aparece en el panel derecho, que se actualizará en tiempo real respondiendo a las variables indicadas a la inzquierda.

Las configuraciones pueden salvarse en cualquier momento, y la imagen guardarse con el botón derecho del ratón, lista para formar parte de un elegante fondo.

thepatternlibrary.com

Patrones para diseños web creados por diseñadores de diferentes parte del planeta. Su licencia nos permite usarlos de forma gratuita en cualquier trabajo o proyecto.

stripegenerator.com

Una sencilla aplicación que ya comentamos en 2007 (sí, hace 8 años), ideal para los amantes de las rayas.

patterncooler.com

Miles de opciones que podemos usar para crear nuestro patrón, aunque no es posible configurar variables para personalizarlos, solo podemos cambiar colores y texturas de cada diseño.

stripemania.com

También para amantes de las rayas, más sofisticado y moderno que la opción anterior.

stripedbgs.com

Ideal para los que necesiten rayas verticales. Solo tenemos que elegir los colores (o usar una opción aleatoria) y decidir la resolución del archivo final.

pixelknete.de

Una opción para hacer fondos a base de puntos (no de rayas). Elegimos colores y resolución, y vemos el resultado, sin opción de alterar el tamaño de cada círculo generado.

bgmaker

Para los que tienen más paciencia: es necesario pintar cada componente del mosaico del fondo a mano, píxel a píxel, viendo en tiempo real el resultado. El tamaño del componente puede alterarse, por lo que es posible hacer prácticamente cualquier fondo con un poco de buen gusto y tiempo disponible.