Etiqueta: diseño

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.

Adobe lanza nueva versión de Brackets, editor de texto de código libre, y extensión para generar CSS a partir de PSD

Publicado el

por Juan Diego Polo

Un editor de texto que entiende de diseño web.

Así­ presentan desde Adobe a la nueva versión de su proyecto brackets.io, un editor de texto, con código libre, que ve hoy su versión 1.0, construido para los diseñadores web y desarrolladores de aplicaciones que trabajan con HTML, CSS y JavaScript.

El editor incluye varias herramientas de ayuda integradas para facilitar la construcción y depuración del código, permitiendo ver siempre el resultado de lo que programamos en tiempo real.

Esta versión también incluye una vista previa de una extensión extremadamente útil, un nuevo servicio de Creative Cloud que permite ver y obtener la información de archivos PSD desde el editor de texto y generar un CSS con información de colores, fuentes, medición, gradientes, etc. Se trata de la extensión Extract, aún en modo de pruebas, por lo que los resultados no son muy exactos, siendo incluso posible ver errores durante la lectura.

Es posible bajarse el editor con la extensión incorporada o instalar únicamente Brackets, de forma gratuita en brackets.io.

Nuevo diseño, navegación simplificada y arranque más rápido, novedades de Pinterest para iPhone

Publicado el

por Fco. José Hidalgo

iPhone

Pinterest ha comenzado una nueva ronda de cambios y mejoras en sus aplicaciones web y móviles empezando por su aplicación móvil para la plataforma iOS, la cual cuenta desde esta nueva versión con un nuevo diseño, mucho más claro, elegante y ordenado, dando más importancia en pantalla a los propios Pins. Además, dentro de esas mejoras también se encuentra la propia navegación, que ha sido simplificada, y los botones para guardar y subir Pins ahora han sido situadas en la parte superior del perfil de los propios usuarios.

Un aspecto que también ha sido mejorado y que también podrán notar los usuarios que se actualicen a esta nueva versión es en el arranque de esta aplicación, la cual ahora es más rápida, por lo que los usuarios podrán añadir y descubrir nuevos Pines más rápido que nunca.

Pinterest indica que los usuarios comenzarán a ver cambios similares en su aplicación para iPad, Android y la web en las próximas semanas y meses, sin especificar una hoja de ruta concreta, instando a estar pendientes de los nuevos cambios que lleven a cabo en los señalados periodos.

La versión 4.0 de Pinterest para iPhone se encuentra ya disponible de manera gratuita en la App Store de Apple para dispositivos iOS desde la versión 7.0 en adelante, siendo además compatible con los dos últimos terminales de la compañí­a de la manzana mordida, el iPhone 6 y el iPhone 6 Plus.

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.

targeted.io, para probar si nuestro email podrá ser leí­do en cualquier plataforma

Publicado el

por Juan Diego Polo

Si hemos estado diseñando un email para divulgar un producto o servicio, o para comunicarnos con nuestros clientes, y estamos a punto de lanzarlo en nuestra plataforma de email marketing, es mejor asegurarse que el contenido puede ser leí­do sin problemas desde cualquier dispsitivo.

Eso es lo que hacen en targeted.io, pruebas para demostrar que el diseño es compatible con más de 30 clientes de email, mostrando capturas de pantalla para dejar tranquilo al cliente antes de apretar el sagrado «Enviar».

targeted.io, que ofrece una prueba gratuita con una sola captura de pantalla, muestra en su panel de control los clientes que han sido testeados, informando sobre el éxito o fracaso de cada uno, tal y como se ve en la captura inferior:

Para probarlo solo tenemos que poner el HTML de nuestro diseño en la caja de código que aparece en su sitio web e informar nuestra cuenta de email para que llegue el test, así­ de sencillo. Las opciones más baratas están limitadas en número de clientes disponibles, y no es posible seleccionarlos, por lo que hay que optar por la 99 dólares al mes para que sea realmente útil.

Por desgracia esta tabla de precios es algo desequilibrada, ya que no hay ninguna opción del tipo: un solo test de un correo al mes con 30 clientes de email probados, si se quieren 30 pruebas con un email, hay que optar por un plan que ofrece 100 tests de mails diferentes al mes (3 cada dí­a), algo realmente poco necesario para la mayorí­a de empresas de email marketing.

Una idea buena, con un modelo de negocio que, seguramente, tendrá que alterarse en un futuro próximo.

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

Publicado el

por Juan Diego Polo

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.

Google ofrece más de 700 iconos «opensource» para desarrolladores y diseñadores

Publicado el

por Juan Diego Polo

Desde el blog de Google siguen con novedades. Hoy hemos visto la presentación de este nuevo sistema de seguridad de la compañí­a, y ahora ofrecen nuevo material ideal para su uso para aplicaciones móviles y herramientas interactivas.

Se trata de una nueva colección de iconos y material gráfico que sigue la linea de su nueva estética android, con licencia CC-BY-SA, diseñada para que se sigan las directrices preentadas en julio, con plantillas de croquis, iconos y pantallas, archivos que incluyen:

– Archivos en PSD, AI y formatos Sketch
– Paquete completo de iconos
– Nuevas orientaciones par auso del color

Allí­ pueden encontrarse varios elementos que componen los diseños, desde sí­mbolos de la barra de estado a menús desplegables, campos de búsqueda, separadores, etc. siempre con texto explicativo de los elementos.

Prometen que seguirán actualizando el material, actualizaciones que veremos en su página de google Plus. Estaremos atentos.