duologue, para comparar diseños en borrador con capturas de pantallas

Si trabajáis en diseño y programación de aplicaciones sabréis que ni siempre lo que se hace en Photoshop corresponde con el resultado final. Una cosa es diseñar «a mano o a máquina» y otra es adaptar el diseño a la web o a los teléfonos móviles, por lo que el flujo de mensajes entre clientes y creadores es habitual una vez entregado el trabajo: «El logo no se ve igual que en el diseño original», «los botones están muy pequeños», «el campo de búsqueda tiene que estar más abajo»…

Una herramienta como Duologue (duologue.co) puede ayudar reducir ese desgaste entre diseñadores y clientes, ya que permite comparar diseños originales con capturas de pantalla y crear listas de tareas que pueden solucionarse internamente antes de mostrarlo al cliente final.

duologue

En el ejemplo que veis en la imagen tenemos el diseño original y lo entregado por el equipo de programadores/diseñadores. El jefe del proyecto tendrí­a que indicar en la lista central todos los problemas detectados, siendo posible superponer las dos imágenes para ayudar a detectar posibles diferencias importantes.

La aplicación no es gratuita (tiene un coste de casi 50 dólares al mes), aunque, tal y como comentan en TC, es un precio que se paga muy a gusto si con él se aumenta la calidad del servicio presentado.

En el ví­deo inferior muestran una demostración del proceso:

Exactli, plataforma de colaboración para diseñadores

Hay diferentes plataformas que permiten trabajar de forma colaborativa en las diferentes etapas del trabajo de un diseñador. Exactli es una de ellas, que se presenta como una opción simple y práctica a tener en cuenta.

Con una interfaz minimalista, Exactli nos permite acceder a un espacio de trabajo donde podemos subir nuestros proyectos de diseños, para su revisión de manera colaborativa. Ya sea que deseemos tener la opinión de nuestros pares o estemos trabajando con un equipo a distancia, encontraremos que esta plataforma ofrece una manera muy simple de comunicarnos, sin demasiadas opciones que puedan distraernos.

Para utilizar este servicio, solo tenemos que crearnos una cuenta. La dinámica es muy simple, subimos nuestro diseño desde nuestro equipo, le damos un tí­tulo y creamos un link para compartir. Las personas que reciban este enlace, podrán ver nuestro diseño y dejar su apreciación sobre el proyecto. Un detalle interesante es que pueden posicionarse sobre la parte del diseño que deseen dejar una observación, para que la nota quede registrada  en el punto que hacemos referencia. Podemos repetir el proceso de revisión tantas veces como creamos necesarios.

Si lo que necesitamos es tener la opinión de un cliente, también podemos utilizar Exactli para este propósito. No necesita crearse una cuenta para visualizar el proyecto, ni para dejar sus comentarios, simplemente disponer del enlace correspondiente.

Completa interfaz de Bootstrap 3 en PSD con licencia de uso comercial

Desde DesignShock se han tomado el trabajo de crear un excelente recurso para entusiastas de la web, un set completo en formato PSD (Photoshop) que contiene todos los elementos presentes en la interfaz gráfica renovada de Bootstrap 3. La nueva versión de Bootstrap ha causado sensación y no son pocos los sitios que ya están empezando a aprovechar sus ventajas.

El archivo emula el estilo de Bootstrap y contiene todos los elementos incluidos en la última version del popular framework, un set como éste es perfecto para crear fácilmente maquetas de temas, aplicaciones web y móbiles de manera extremadamente fácil, olví­date del código y empieza a arrastrar los elementos a tu gusto, si quieres pasar la idea de una página, tema o aplicación a un desarrollador y quieres asegurarte de que la idea está clara, esta interfaz puede serte de gran ayuda.

Describimos a continuación las caracterí­sticas de este set:

– El archivo esta organizado cuidadosamente en capas y agrupado para que sea fácil encontrar y usar todos los elementos que se necesiten.

– Los elementos del archivo fueron creados usando diseño pixel perfect, con lo cual las lineas están ajustadas al pixel, dotando de nitidez y definición cada uno de los diseños incluidos.

– El archivo cuenta con la misma licencia de uso de Bootstrap: Apache 2.0, con lo cual puede ser usado para cualquier proyecto incluso con fines comerciales.

Un recurso para descargar lo antes posible y aprovechar al máximo, espero lo disfruten. Descárgalo aquí­.

bootstrap1

bootstrap2

bootstrap3

bootstrap4

Concept Inbox – Para aprobar nuestros diseños junto con nuestros clientes

conceptinbox

Seguimos concentrados en utilidades para los webdesigners y profesionales del diseño en general para hablar de conceptinbox.com.

Se trata de una aplicación web, disponible en español e inglés, que ayuda a agilizar el proceso de aprobación de los diseños por parte de los clientes. Podemos subir nuestros diseños y gestionarlos en la web, permitiendo compartirlos con los clientes y compañeros de forma sencilla para obtener el siempre necesario feedback. Para crear la cuenta no es necesario rellenar complejos formularios, simplemente tenemos que enviar nuestros primeros diseños por email a in@conceptinbox.com y ver cómo nuestro primer espacio ya es creado de forma automática.

Nuestro espacio de trabajo, el lugar en el que podemos guardar nuestros diseños, puede ser personalizado y protegido con contraseña. Es posible también alterar el orden de las imágenes con solo arrastrar el contenido, así­ como activar o desactivar los comentarios que los usuarios realicen sobre nuestros trabajos.

De momento existen dos opciones: la gratuita, con un lí­mite de 50 megas por cuenta, y la premium, con cuentas desde 1 Giga y un coste de 9 dólares mensuales, aunque puede probarse durante 14 dí­as sin compromiso. Esta segunda opción permite también almacenar proyectos, no solo imágenes, así­ como incluir fondos personalizados y proteger los proyectos con contraseña.

Florencia Espinasse, una de sus responsables, nos comenta que ya están trabajando en una nueva versión que verá la luz dentro de pocas semanas. Estaremos atentos y os informaremos sobre las novedades.

Marqueed, la solución web perfecta para discutir diseños entre varias personas

marqueed

Mucho ha llovido desde que os presentamos Marqueed (marqueed.com) hace ya más de un año. Por entonces era una herramienta bastante sencilla que permití­a subir una imagen a la web y crear un chat en algunos de sus puntos para que varias personas puedan discutir posibles cambios. Hoy, con la misma filosofí­a en mente, puede presentarse como una plataforma de colaboración bastante completa en este sentido.

El funcionamiento es sencillo, solo tenemos que seleccionar las imágenes que queremos discutir con colaboradores o clientes e invitar al grupo de trabajo. Cada uno podrá escribir y dibujar sobre el material, manteniendo siempre un registro de todas las alteraciones.

Además de permitir subir un grupo de imágenes, diseños, capturas o fotografí­as y añadir colaboradores, que serán invitados ví­a email, es posible capturar páginas web indicando sus urls, discutir capturas de pantalla, seleccionar páginas con su bookmarklet, ver el histórico de los comentarios realizados en cada región de cada imagen por cada miembro del equipo, recibir alertas cada vez que alguien realice alguna observación en nuestro material, integrar la aplicación con Google Drive (ya están trabajando con Dropbox), usar etiquetas para clasificar y marcar el contenido, dar invitaciones para que algunas personas solo tengan acceso de visualización (sin permitir comentar ni editar) y personalizar nuestra marca en la página de trabajo.

La solución es gratuita para quien use hasta 2 colecciones privadas, siendo ilimitado el número de colecciones públicas que pueden crearse. Podéis encontrar los precios y condiciones en www.marqueed.com/pricing.

flatsies – Para compartir diseños con nuestros clientes

flatsi

No es la primera ni será la última herramienta que comentamos con el mismo objetivo: compartir los trabajos realizados con nuestros clientes para evitar adjuntos en emails dispersos.

En el caso de flatsi.es tenemos una aplicación, disponible por invitación, que permite divulgar en una única url todas las capturas con los diseños que hemos realizado (sea un logotipo, páginas web, panfletos, etc.). El cliente recibirá la url y podrá navegar por las imágenes enviadas dentro de un sitio preparado para cualquier tipo de dispositivo (móvil, web o tablet).

Aunque no parece extremadamente original, sí­ lo es la función que incluye de «creación automática de fondos«. Si la imagen que compartimos, nuestro diseño, es azul en sus lí­mites, por poner un ejemplo, Flatsies será capaz de detectarlo y mostrar, en caso de que lo consideremos interesante, todo el fondo integrado con nuestro diseño.

En el ví­deo inferior podéis ver una demostración de lo que flatsies puede hacer por nosotros. En su página principal podemos solicitar la invitación y ver cómo existen opciones Premium que, por 4 dólares al mes, permiten poner contraseña en nuestras urls, personalizar el logo o eliminar el lí­mite de 4 proyectos que tienen las cuentas gratuitas.

Responsive Inspector, comprueba la adaptabilidad de cualquier web a cualquier resolución de pantalla

Responsive Inspector

Ya sabemos que uno de los aspectos fundamentales a tener en cuenta por cualquier web actual es que pueda adaptar su diseño a cualquier tipo de pantalla donde se pueda visualizar, sobre todo con el uso cada vez mayor de tablets y smartphones con acceso a Internet. De entre las extensiones existentes en Chrome Web Store enfocadas a los diseños web adaptativos, se encuentra Responsive Inspector, cuya misión es mostrar el nivel de adaptabilidad de cualquier web.

Basta con que nos instalemos dicha extensión, la cual nos incluirá un nuevo botón junto a la barra de direcciones. Ya tan sólo tenemos que irnos a cualquier web y presionar el botón antes mencionado, el cual nos sacará una ventana emergente, mostrándonos los distintos tamaños de pantalla soportados a través de diferentes barras, ajustada a la escala de resoluciones. Sobre cada barra, si nos situamos encima de cada una de ellas, nos mostrará un botón que, al presionar, nos ofrecerá el código de la hoja de estilos CSS que hace que el diseño se ajuste a ese tamaño de pantalla.

Responsive Inspector tiene además una herramienta interesante, y la tenemos en su escala, sobre la cual podemos movernos a través del ratón. Esta herramienta nos permite escalar nuestro navegador a la resolución indicada en la posición que tengamos fijada, lo que nos permite ver la reacción de la adaptabilidad del diseño de la web, y además, contamos con una cámara, la cual nos permite realizar capturas, las cuales podemos guardar en local o subir a través de Behance.

De este modo, a pesar de las escasas opciones para diseñadores y desarrolladores web que dispone Chrome de serie, disponemos de una serie de extensiones que nos ayudará a mejorar los aspectos de los sitios web que podamos trabajar, o incluso tener como referencia.

Enlace: Responsive Inspector en Chrome web Store | Ví­a: AddictiveTips

4 excelentes recursos para descargar archivos PSD gratis

Cuando necesitamos archivos PSD para nuestros diseños o como fuente de inspiración, contamos con cientos de servicios y sitios web destacados como Dribbble o DeviantArt, que agendamos en nuestro kit de recursos. Al cual podemos integrar las sugerencias que te compartimos hoy.

Por ejemplo, encontramos Designmoo, una comunidad que comparte diferentes recursos de diseños, entre ellos PSD gratuitos, teniendo una gran colección para elegir. Podemos registrarnos para ser parte de la comunidad, aunque permite la descarga sin ningún tipo de registro.

Brusheezy también es una gran comunidad con una impresionante colección de recursos compartidos por artistas de todo el mundo. Para encontrar todas las opciones de PSD disponibles solo tenemos que utilizar el buscador y seleccionarnos en mejores calificados, más populares, nuevos, etc.

PSD
365psd sigue una dinámica similar, con el bonus de enviarnos un PSD gratis cada dí­a a nuestro correo, aunque podemos recorrer el sitio para ver las opciones disponibles y descargar las que sean de nuestro interés. Por otro lado, Free Photoshop Download recopila de la web diferentes recursos para Photoshop como pinceles, plantillas, iconos, entre otros. Cada uno de los recursos que presenta contienen el link de descarga y el enlace del sitio web original.
Cuatro recursos interesantes a tener en cuenta cuando necesitemos inspiración o ayuda extra para nuestros trabajos de diseño.

Colrd, un excelente recurso para descubrir y crear paletas de colores

colrd

Ya sea que estemos buscando inspiración para nuestros diseños o estamos pensando en alguna combinación de colores para la decoración de nuestro hogar, Colrd es un interesante recurso a tener en cuenta.

En Colrd podemos buscar bajo diferentes criterios: colores individuales, paletas de colores, gradientes, patrones o si preferimos tener una visión completa de cómo se combinan los colores, podemos inspirarnos en las imágenes compartidas.

Cada una de las sugerencias que nos presenta vendrá con los códigos correspondientes, los utilizados en los fondos con degradados en CSS3, además de RGB y HSL. Y en algunas opciones nos permiten la descarga en diferentes formatos para editarlos en nuestros programas.

Si deseamos, también podemos participar creando nuestros propios diseños de una manera muy simple a través del editor de Colrd. Solo tenemos que escoger que tipo de aporte deseamos realizar (paleta de colores, imágenes, etc) y automáticamente se abrirá el editor con las herramientas necesarias.

Por ejemplo, si nos decidimos por una imagen podemos subirla desde nuestro equipo o escoger alguna de las sugeridas en la galerí­a de Colrd. El editor registrara cada uno de los colores de la imagen y podremos desplazarnos con el cursor para notar las diferentes tonalidades. Luego solo nos resta seguir los pasos para publicarlas.

Sin dudas, Colrd es un excelente recurso que podemos agendar para futuras consultas.

GoVisually, herramienta colaborativa para grupos de creadores gráficos

GoVisually

Si nuestra profesión está relacionada con el mundo del diseño y de la creación gráfica, GoVisually es el espacio colaborativo en Internet que podemos necesitar a la hora de colaborar con otras personas dentro de un mismo proyecto creativo.

Su funcionamiento es muy sencillo, ya que una vez estemos registrados e identificados, podemos crear nuestros propios proyectos, teniendo en cuenta que la versión gratuita nos permite disponer sólamente de un sólo proyecto. Cuando estemos dentro de cualquier proyecto, podemos subir imágenes y revisiones de las mismas, contando en nuestro espacio de trabajo con las herramientas necesarias para realizar las anotaciones y comentarios pertinentes dentro las propias imágenes.

Y como es una herramienta colaborativa, podemos contar con las aportaciones de aquellas personas a las que hayamos invitado a través del correo electrónico, para que una vez registradas, puedan aportar sus granitos de arena dentro del proyecto. No existe lí­mite en cuanto al número de colaboradores con los que podemos contar.

Si queremos trabajar tranquilamente, GoVisually nos permite trabajar a pantalla completa, de manera que se elimina la interfaz del navegador y obtenemos más espacio en pantalla para trabajar sobre las propias imágenes. Gracias a ello, podemos comparar múltiples revisiones de un mismo diseño, de los muchos que podemos subir, de forma más clara.

La herramienta no ofrece ningún tipo de complicación en su uso, ya que es fácil e intuitiva. Si por algún casual,no nos convence esta herramienta, en esta lista tenemos otras opciones.

Enlace: GoVisually | Ví­a: Hongkiat