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

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

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

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

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

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

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

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

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.

coolors, una web que nos ayuda a decidir los colores de nuestro próximo proyecto

Aquí­ tenemos un nuevo proyecto relacionado con el mundo de los colores, para ampliar la lista que hicimos hace pocos meses.

Se trata de coolors.co, aplicación que ayuda a encontrar la paleta de colores ideal para nuestro nuevo proyecto, jugando tanto con las combinaciones aleatorias que genera como con las decisiones que tomemos en todo momento.

Una vez abierto podemos ver diferentes combinaciones de colores, que irán cambiando con la barra espaciadora. Si nos gusta uno o varios colores de dicha paleta, podemos congelarlos para que sigan apareciendo en las siguientes propuestas, que se repetirán hasta que demos con la combinación ideal.

Es posible pulsar en el código de cada color para especificar uno determinado (el de un logo, por ejemplo), y ver como las siguientes propuestas se adaptan a ese cambio en busca, siempre, de un conjunto de colores «que pegue».

Al finalizar podemos copiar la url de la paleta deseada y compartirla con otras personas (con el cliente, por ejemplo), ayudando así­ a agilizar el proceso de decisión de colores de una web, aplicación, diseño, etc.

stylifyme, para obtener los detalles de diseño de cualquier sitio web

Si trabajáis en diseño web seguramente os habréis pasado horas navegando entre el código de decenas de sitios web para encontrar la tipografí­a que usa, los colores, los espacios y demás detalles que, generalmente, se esconden en el archivo CSS.

Lo que hace stylifyme.com es ahorrar trabajo obteniendo toda esa información de forma automática. Solo tenemos que indicar la url que queremos analizar y aguardar a que se realice el trabajo, generando así­ la lista de fuentes usadas, los colores en el fondo y en el texto, los espacios, las dimensiones de las imágenes, un análisis que puede tardar unos segundos, ofrecido en archivo que puede bajarse al ordenador para posterior estudio.

No es la primera aplicación que analiza colores, ya hemos visto muchas de ese tipo, pero sí­ una de las pocas que se concentra en los aspectos más buscados por los webdesigners, aspectos que podrán trabajarse de forma independiente para realizar los cambios solicitados por los clientes.

Podéis obtener detalles técnicos sobre la herramienta en este artí­culo, donde explican cómo lo hacen para encontrar las caracterí­sticas de cada variable de forma automática.

Al ser uno de los proyectos destacados hoy en producthunt, su funcionamiento es bastante intermitente desde hace algunas horas, por lo que es mejor tener paciencia si lo deseáis probar hoy mismo.