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

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

por Juan Pablo Sarmiento

Iconos Google material color

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

por Fco. José Hidalgo

Home Design 3D

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

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.

Palettab

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

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

typegenius
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

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

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

Fontface Ninja
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

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

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

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

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

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.