Etiqueta: diseño

Form, para crear prototipos de apps, es adquirida por Google y pasa de costar US$ 80 a ser gratuita

Publicado el

por Juan David Quiñónez

form crear prototipos

El equipo de ResponsiveWave, la compañí­a tras Form, una elegante herramienta para Mac OS X con la que es posible trabajar en el diseño y creación de prototipos de aplicaciones móviles para iOS sin programar toda una app sino simplemente arrastrando elementos y modificando diferentes parámetros generales, ha unido fuerzas con Google para continuar el desarrollo de su producto.

Form es un editor visual de gran utilidad para diseñadores y programadores por la cantidad de herramientas de que dispone para la generación de prototipos. La idea de su funcionamiento es instalar la app en OS X a través de la Mac App Store y valerse de un visor en tiempo real que se puede instalar en cualquier dispositivo, iPad y iPhone con iOS 7 o superior, también de forma oficial desde la App Store. Y eso es todo, las adiciones y modificaciones ejecutadas dentro del software de escritorio se verán reflejadas instantáneamente en la pantalla del equipo móvil.

Prototivos nativos con acceso a diferentes sensores del dispositivo (incluyendo la cámara), pruebas simultáneas en múltiples dispositivos, animaciones ilimitadas dentro de las vistas, acciones de organización rápida y un completo espacio de aprendizaje en su sitio web hacen parte de sus más llamativas caracterí­sticas y que, para algunos, podrí­an hacerle lucir diferente a opciones como Proto.io -y ahora que es gratis, quizá tampoco sea tan descabellado darle un vistazo-.

No se aclara si ha sido una venta o algún asocio relacionado con inversiones, de ser el primer caso no sorprenderí­a verla integrada en las herramientas para desarrolladores de Android, pero lo cierto y llamativo es que, costando Form 80 dólares y en un momento hasta 150 dólares, pasa de la noche a la mañana a ser gratis para todo el mundo. Por cierto, quienes ya compraron la aplicación y quieren un reembolso, comenta la gente de RelativeWave que basta con enviar a support@relativewave.com para que sea realizada la respectiva devolución.

Más información: Sitio web de Form

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.