Designdrop – Sube un diseño, copia la url y mándala al cliente para que haga comentarios

designAquí­ tenemos otra herramienta que los profesionales del diseño pueden utilizar para recibir el sagrado feedback de sus clientes.

Se trata de designdrop.io, una web bastante sencilla, aunque no menos práctica, que permite subir una imagen y obtener una url para comenzar la discusión de sus elementos.

Solo tenemos que subir o arrastrar el archivo sobre el que queremos debatir y, después de un registro que únicamente solicita email y nombre de usuario, copiar la url única en la que se encontrará el material.

Cuando enviemos dicha url a los clientes (podemos invitarles desde allí­ mismo), podrán seleccionar cualquier región de la imagen y realizar comentarios sobre la misma. Cada región seleccionada tendrá un número indicando la colección de comentarios. Nosotros, como creadores del trabajo, podremos responder allí­ mismo, teniendo de esta forma bien organizadas las discusiones relacionadas con cada sección, sin necesidad de capturas, presentaciones e infinidad de emails que van y vienen.

No es la única solución que vemos de este tipo, pero sí­ es una de las más sencillas de utilizar. No permite analizar el histórico ni tener un portafolio organizado de nuestros trabajos, no podemos comparar versiones ni subir más de un archivo por url, pero en muchas ocasiones no es necesario ese tipo de funcionalidades, solamente necesitamos que alguien opine sobre la imagen que estamos enviando.

Podéis ver un ejemplo aquí­: designdrop.io/SF90fRQ3T, donde he comenzado una discusión de una captura de WWWhatsnew.com

Fantásticos elementos de todo tipo para embellecer tu web (I)

En el siguiente listado encontraras una gran colección de diferentes recursos web de todo tipo, recopilados especialmente para proporcionar una ayuda a los diseñadores o desarrolladores dedicados al fantástico mundo del internet.

Creativos elementos gráficos:

Lo que necesitas para tus próximas presentaciones: maquetas, fondos, fuentes y demás.

Maqueta del iPhone 5: bonita maqueta en photoshop para el iPhone 5.

iPhone 5 Mockup PSD

Sombras largas: objeto inteligente de Photoshop para generar sombras largas a diferentes elementos.

Patrones oscuros: pequeña colección de patrones oscuros para tu sitio web.

patrones oscuros

Plantilla para logos: con este elemento de Photoshop podrás personalizar tu logo de una manera sencilla.

logo plantilla

Maqueta del Samsumg Galaxy S4: excelente maqueta en Photoshop del Samsumg Galaxy S4.

Maqueta del Samsumg Galaxy S4

Wanted: bonita fuente de texto al estilo del viejo oeste.

Wanted: fuente de texto

Maqueta de marca o identidad: útil set de elementos gráficos para el diseñador web.

Maqueta de marca o identidad

Formularios de registro: pequeña colección de 7 plantillas en PSD de formularios de registro.

Formularios de registro

Plantillas para el iPad: 3 diferentes maquetas súper útiles del iPad en PSD.

Plantillas para el iPad

Maqueta de marca en PSD: útil colección de elementos para mostrar tus últimos proyectos.

Maqueta de marca en PSD

Modernas GUI para desarrolladores y diseñadores:

Todo tipo de elementos para desarrollar de manera fácil tu próxima aplicación.

Marble GUI: colección de diferentes elementos útiles para tu web.

Marble GUI

Light GUI kit: pequeña y simple colección de elementos de interfaz para tu web.

Light GUI kit

GUI minimalista: excelente concepto de interfaz de usuario minimalista en archivo PSD.

GUI minimalista

99Lime UI: completo set de diferentes elementos minimalistas para la web.

99Lime UI

iPad GUI: kit de diferentes elementos de interfaz del iPad para diseñadores.

iPad GUI

Modern Touch UI: gran colección de elementos de interfaz con un estilo metro (win 8).

Modern Touch UI Kit

Android GUI: completo set de más de 1000 elementos de interfaz totalmente editable.

Android GUI

íconos de gran calidad:

Las siguientes son colecciones de í­conos creados siguiendo las últimas tendencias de la web.

Maki í­conos: completo paquete de 95 í­conos en SVG para utilizarlos en MapBox.

Iconos para mapas

Ultimate Icon: Gran set de í­conos con más de 1000 unidades totalmente gratis.

Ultimate Icon set

íconos de Adobe: pequeño set de 8 diferentes í­conos de adobe en PSD.

Set Iconos de Adobe

íconos Planos: hermoso conjunto de í­conos con un estilo plano en formato PSD.

Set de Iconos Planos

íconos SEO: kit de 12 diferentes í­conos SEO de estilo plano.

12 icons SEO

Kit de í­conos planos: pequeña pero bonita colección de 6 í­conos con un estilo moderno.

Kit de iconos planos

íconos redondos: moderno paquete de í­conos para las diferentes redes sociales.

Iconos redondos

Surfing í­cons: simple y bonita colección de 12 diferentes í­conos en PSD.

Iconos al estilo Surf

íconos de iOS 7: útil colección de 32 í­conos de barra para el iOS 7.

Iconos de iOS 7

íconos sociales: moderno set de í­conos sociales para tu sitio web.

Iconos sociales

íconos en CSS: increí­ble colección de í­conos creados totalmente en CSS.

Iconos en CSS

Plantillas web en variados formatos:

En la siguiente lista se podrá encontrar plantillas en PSD para tu inspiración, así­ mismo encontrarás plantillas en HTML y temas para WordPress.

BlueBox: moderna plantilla para sitio web de estilo plano en PSD.

BlueBox

Coorpin: útil portafolio para WordPress con un estilo minimalista.

portafolio para WordPress

Pronto: tema para WordPress con un diseño en grilla.

diseño en grilla

Celestino: limpio y creativo tema tipo portafolio para WordPress.

portafolio para WordPress

Carbon: plantilla web HTML + CSS adaptable a diferentes dispositivos.

plantilla web HTML + CSS

Pinball: plantilla para blog en PSD con un estilo de grilla y con versión responsiva.

plantilla para blog

Adapt: portafolio para WordPress totalmente responsivo.

portafolio para WordPress

Display: plantilla web en PSD con un estilo limpio y minimalista.

plantilla web en PSD

Impero: tema simple y minimalista para WordPress perfecto para restaurantes.

tema minimalista para WordPress

Pinbin: moderno tema para WordPress al mejor estilo de Pinterest.

moderno tema para WordPress

Skybox: elegante plantilla web multipropósito en archivo PSD.

plantilla web multipropósito

Creativos experimentos o complementos para tu web:

La lista de abajo contiene fragmentos de código y diferentes complementos pensados para embellecer la web.

Mason.js: plugin de jQuery para la creación de grillas perfectas con JavaScript.

plugin de jQuery

UI Transitions: plugin que nos permite crear y eliminar los í­tems de una lista con animación.

listas con animacion

Animaciones CSS3: excelente plugin con una colección de diferentes animaciones en CSS3.

Animaciones CSS

Cubo 3D: galerí­a de imágenes en un cubo 3D construido totalmente en CSS.

Cubo CSS 3D

Ficha de información: 7 bonitos efectos para mostrar información de un elemento.

Ficha de información

Flipswitch: generador online de interruptores con animación en puro CSS3.

Generador online de interruptores CSS3

Libros animados: excelente tutorial para crear la animación de un libro que se despliega al pasar el cursor sobre este.

Libros animados CSS3

Galerí­a de imágenes: útil galerí­a de imágenes construida en jQuery para exhibir tus fotos.

Galerí­a de imágenes

Furatto: moderno framework HTML y CSS perfecto para acelerar el desarrollo de páginas web.

Framework HTML y CSS

Efectos de scroll: útil colección de diferentes efectos de scroll para tu sitio web.

Efectos de scroll

Efectos de transición: asombrosa recopilación de diferentes efectos de animación en CSS + jQuery.

Efectos de transición

Nueva versión de Cl3ver, para mostrar animaciones 3D en páginas web

cl3ver

Os hablamos de cl3ver hace algunos meses como una fantástica solución que permite mostrar animaciones 3D en la web. Es una herramienta que ofrece la posibilidad de importar modelos tridimensionales hechos con otras aplicaciones (3DS Max, Autocad, Sketch Up, Maya, etc.), así­ como ajustar detalles dentro de la propia web para mostrar resultados realistas y útiles para quienes necesiten este tipo de presentaciones en su sitio.

Hoy, después de ser finalista en la primera competición SXSW V2V en Las Vegas en la categorí­a “Innovative World Technologies”, esta startup, graduada de la academia Wayra Barcelona, nos presenta nuevas funcionalidades.

La plataforma, que permite crear rendering 3D en tiempo real y compartirlos en la web sin necesidad de ningún plugin, soportando Web GL, Flash 3D y HTML5, muestra ahora un botón interactivo, tanto en la versión 2D como 3D, para ofrecer información adicional de la escena; añade la posibilidad de incluir objetos 2D dentro de escenas 3D; permite mostrar iframes dentro de escenarios tridimensionales, muy útil para mostrar ví­deos de youtube, por ejemplo, durante un tour virtual; incluye la opción de mostrar efectos, pequeñas animaciones, dentro de nuestro trabajo, incluye más opciones para integrar imágenes jpg, png y gif dentro de los escenarios… funcionalidades que parecen indicar el camino que Cl3ver quiere recorrer durante los próximos meses: el necesario para transformarse en el 3DStudio web, la herramienta que arquitectos, diseñadores industriales y vendedores de automóviles no podrán dejar de usar en sus plataformas web.

Cl3ver tiene algunas demostraciones en su página (cl3ver.com) y ofrece la posibilidad de probar la herramienta con nuestros propios trabajos.

Publicado en

Las mejores webs para analizar colores

De entre todas las herramientas que hemos comentado como Utilidades para diseñadores web, os voy a mostrar una lista de aquéllas que tienen al color como protagonista.

Son aplicaciones muy útiles para extraer colores de una página web o para generar paletas, una pequeña selección que puede ser muy útil durante la etapa de concepción de cualquier nuevo diseño.

Colorotate

colores

Aquí­ tenemos todo un clásico que, con versión web, plugin de Photoshop y iPad, comentamos por primera vez en 2009.

Comentan en su presentación que los métodos tradicionales de elección de colores en las computadoras son siempre bidimensionales, extremadamente limitados, motivo por el cual decidieron crear un sistema que permita trabajar con colores en 3D, algo más intuitivo y práctico.

ColorExplorer

color
Continúa leyendo «Las mejores webs para analizar colores»

Froont – Donde diseñadores crean y comparten sus sitios web adaptables

Froont

La necesidad de crear sitios web con diseños adaptables para cualquier dispositivo se ve también reflejada en Froom, un nuevo servicio que acaba de salir en fase beta pública para facilitar a los diseñadores la creación de diseños y prototipos de sitios web adaptativos con tan sólo arrastrar y soltar diferentes elementos sobre el área de la web, pudiendo modificar las propiedades de los mismos para que se vean adecuadamente en los diferentes tamaños de pantalla.

Se trata de un editor visual de sitios web que pretende eliminar la jerarquí­a de trabajo a la hora de su diseño, eliminando la necesidad de disponer de maquetadores que interpreten los diseños creados en Photoshop para llevarlos al HTML y CSS mediante codificación.

De esta manera, a la hora de trabajar en un proyecto concreto, los diseñadores pueden actuar por su propia cuenta para crear y compartir sus diseños, a través del navegador web, al resto del equipo de trabajo, de clientes, u otras personas, para recabar el feedback necesario.

Sólo hace falta registrarse en el servicio y comenzar un nuevo proyecto, pudiendo comenzar desde una página en blanco o desde una página de pruebas, estando por ahora inactivo la posibilidad de crear proyectos de prototipos interactivos. Dentro del espacio de trabajo, cuenta con unas sencillas herramientas, las cuales son presentadas la primera vez que entren. Además, podrán ver el código que se va generando en el desarrollo de la propia página.

Enlace: Froont | Ví­a: TechCrunch

wireframe.cc, una práctica forma de dibujar bocetos de diseños, páginas web y aplicaciones móviles

Existen muchas herramientas creadas para el diseño de prototipos de aplicaciones, pero pocas tan sencillas y prácticas como wireframe.cc.

Se trata de un nuevo proyecto que nos presentaron hace unas horas, orientado para la comunidad de diseñadores, programadores y jefes de proyecto que desean dejar el lápiz y realizar bocetos más realistas directamente en la web.

Podemos seleccionar plantillas para diseño web o diseño de aplicaciones móviles, con la opción de incluir diferentes elementos, cambiar de tamaño lo que hemos seleccionado y alterar la estructura de la información para ayudar a entender mejor el resultado de lo que se va a programar.

Podéis ver una demostración en su página web y empezar a dibujar sin necesidad de registro dentro de wireframe.cc

Google Web Fonts integra herramientas de análisis

El equipo de Google ha compartido algunos datos interesantes de Google Web Fonts, que confirman la popularidad del directorio de fuentes a la que recurren desarrolladores y diseñadores web, como introducción del anuncio de  nuevas caracterí­sticas.

Se  han integrado un conjunto de nuevas herramientas que tienen como objetivo mostrar estadí­sticas de cada una de las ellas. Y de esa forma tener un nuevo criterio al momento de elegir una fuente, basado en su popularidad y la tendencia que manifiestan los gráficos de análisis.

Para ello, solo tenemos que escoger la nueva pestaña que se integra “»Analytics».  A partir de allí­, podremos obtener una serie de datos que se expresan en listas, mapas de calor y gráficos.  Nos mostrarán desde las visualizaciones individuales (con la posibilidad de escoger diferentes lapsos de tiempo), la tendencia de la última semana hasta las plataformas que se utilizan (navegadores y sistema operativo).

También podremos ver estadí­sticas de una fuente en particular desde la ventana emergente que se abre cuando la seleccionamos, con solo seleccionar la pestaña “Statistics”. Y si reparamos en la pestaña siguiente “Pairings” nos encontraremos con una herramienta que nos permitirá  realizar comparaciones.

Enlace: Google Web Fonts | Ví­a: Google Web Font Blog

generatepattern – Diseña patrones pintando pí­xel a pí­xel

En generatepattern.com tenemos una aplicación que nos permite diseñar en un cuadro de 50×50 pí­xeles para obtener un fondo que podremos usar en nuestros diseños.

Es posible elegir un color diferente para cada pí­xel, alterando la forma del resultado en tiempo real. La galerí­a de lo más popular nos muestra las posibilidades de la herramienta, permitiendo exportar el resultado en forma de imagen o icono.

Es también posible obtener el código CSS para usar el patrón como findo en nuestra página web, sin necesidad de realizar registro y de forma completamente gratuita.

Una buena herramienta para diseñadores meticulosos.

Neoresellers – Ofrece la posibilidad de crear y administrar un sitio Web a tus clientes

Desde Neositios nos presentan un nuevo modelo de negocio que permite a cualquier empresa o emprendedor comercializar el sistema neositios (creación de sitios web) bajo una marca genérica: Neoresellers.

Emprendedores, diseñadores, empresas de hosting.. varias empresas pueden usar esta aplicación para ofrecer a sus clientes la posibilidad de crear y administrar sitios web sin necesidad de tener grandes conocimientos de programación, existiendo formatos para páginas en web tradicionales y para versiones móviles, estando ya trabajando en páginas de Facebook.

[…] permite comercializar la herramienta Neositios a tus clientes bajo la marca Wikta, una revolucionaria herramienta para crear y administrar sitios Web.
Wikta está orientada a Pequeñas y Medianas Empresas y profesionales de todas las áreas que deseen tener un sitio Web de alta calidad sin la necesidad de recurrir a diseñadores y programadores.

Con Neoresellers tendremos herramientas para administrar los clientes: alta, baja y modificación de usuarios, asignación de planes Premium & trials y dominios.com, estadí­sticas y análisis del negocio, cuenta corriente y estado de fondos.

Existen más de 9000 diseños de diversas categorí­as, con lo que nuestros clientes podrán crear su web pudiendo elegir entre una gran variedad de plantillsa.

Aquí­ podéis encontrar más información sobre su producto.

La tipos de letra preferidos por los diseñadores #Infografí­a

En hongkiat.com han presentado el resultado de una encuesta que realizaron entre varios diseñadores de varios paí­ses para determinar cuáles eran los tipos de letra preferidos por esta comunidad.

En el artí­culo comentan la tipografí­a ganadora del estudio: Myriad Pro, entre las gratuitas, y Helvetica entre las Premium.

Como no podí­a ser de otra forma, muestran los datos en forma de infografí­a, creada en este caso por piktochart.com:

tipografia
Pulsa para ampliar