Categoría: Utilidades para diseño

Aplicaciones y recursos para diseñar. Recursos para diseñadores, herramientas gratuitas y consejos para diseñar por móvil y web.

Recursos web para practicar y trabajar con CSS

Publicado el

por Juan Diego Polo

Si estáis aprendiendo diseño web y os gustarí­a practicar hojas de estilo sin necesidad de instalar nada en vuestro ordenador, podéis hacer uso de varias aplicaciones web que ayudan con el tema.

Os dejamos algunos de los enlaces más populares en el mundo de los editores online de CSS, todos ellos semejantes en su funcionamiento, esperando que os sean de utilidad:

cssizer.com

css

Podemos editar el código HTML y el CSS de la sección izquierda de la página y ver el resultado alterado en tiempo real a la derecha del sitio.
Continúa leyendo «Recursos web para practicar y trabajar con CSS»

BLOKK, una tipografí­a para quien realiza prototipos de páginas web

Publicado el

por Juan Diego Polo

Los que trabajan en diseño web están acostumbrados a realizar mockups, prototipos del diseño con textos, generalmente en latí­n, ocupando los espacios que serán rellenados en el futuro con la información del cliente.

Si no os gusta el clásico Lorem Ipsum siempre podéis usar el original quijotipsum (www.quijotipsum.com), con párrafos del Quijote en lugar de textos sin sentido en latí­n, aunque hay otra opción: usar la tipografí­a BLOKK (blokkfont.com).

mockup

Disponible de forma gratuita, permite rellenar espacios con bloques, no con letras, ofreciendo la posibilidad de crear diseños como los mostrados en la imagen inferior en pocos minutos.

blokk

Comentan en TNW otra alternativa: Redacted, una tipografí­a disponible en github que nos permite mostrar contenido en forma de bloques o de letra ininteligible, obteniendo resultados realmente interesantes.

TinyPNG, reduciendo el tamaño de nuestras imágenes en PNG

Publicado el

por Juan Diego Polo

La mayorí­a de los programas que capturan pantallas, principalmente si hablamos de extensiones en los navegadores web, guardan el archivo en formato PNG, un formato que ocupa muy poco espacio si la imagen tiene pocos colores, siendo necesario comprimirla o cambiar a JPG si hablamos de una fotografí­a o captura con varios tonos.

Una imagen que ocupa casi 400 Kb en PNG después de ser capturada en Internet con Shutter (conocido programa de Screenshots para Linux), puede baja a 100 Kb al exportarla en JPG con calidad de 85%, por ejemplo, una reducción que vale la pena tener en cuenta a la hora de ilustrar un artí­culo.

El problema es que muchas veces no tenemos tiempo de abrir archivos PNG para comprimirlos en otros formatos, por lo que se hace necesario un programa de capturas que ya realice ese trabajo (como Winsnap para Windows, por ejemplo) o una aplicación que pueda comprimir los ficheros de forma rápida, como el que os presentamos hoy.

png

Se trata de tinypng.org, una aplicación web que permite subir hasta 20 imágenes de una sola vez, con un lí­mite de 3 megas por archivo, permitiendo reducir el tamaño de cada una al mismo tiempo que mantiene la transparencia (algo que, recordemos, no tiene el formato JPG).

Según comentan en Xyberneticos, genera un archivo 8 bits PNG, en lugar de 24bits, obteniendo un resultado que, en muchas ocasiones, es perfecto.

Herramientas para compartir diseños con los clientes y obtener Feedback

Publicado el

por Juan Diego Polo

Dedicarse al diseño web puede ser una experiencia realmente agradable cuando se tiene un cliente que entiende el tipo de trabajo que se está realizando. Si a esa tarea le añadimos algunas herramientas que ayuden a hacer la comunicación más fluida y, consecuentemente, ser más productivos en el trabajo, seguramente continuaremos haciéndolo durante mucho años.

Uno de los principales problemas a los que se enfrentan los profesionales del webdesign está relacionado con el feedback de los clientes. El «te dije que», «no me dijiste que», «nunca te he dicho eso» y compañí­a son las frases protagonistas en la pesadilla a la que se enfrentan en esta categorí­a, y eso puede solucionarse parcialmente con unas buenas herramientas creadas especificamente para facilitar la comunicación entre empresa y cliente.

A ello se dedican en este hilo de Quora y aquí­ os comentamos algunas de las opciones más interesantes allí­ comentadas.

Invision

invision

Ideal para crear bocetos y compartirlos con los clientes en forma de url única. El cliente podrá interactuar con la imagen enviada y crear comentarios sobre los diferentes componentes, teniendo así­ registradas todas las opiniones realizadas.

Es gratuito y una de las opciones más utilizadas en todo el mundo.

Continúa leyendo «Herramientas para compartir diseños con los clientes y obtener Feedback»

Tendencias en Diseño Web en 2013

Publicado el

por Juan Pablo Sarmiento

Este artí­culo fue publicado originalmente en inglés en bypeople.com usando un sistema de edición colaborativa integrando Github con Wordpress. El Equipo de The Shock family: iconshock, wpthemegenerator y jqueryslidershock, responsables también por bypeople.com, se ha encargado de la creación y traducción al español del mismo, dejándolo aquí­, en WWWhatsnew.com, como una excelente guí­a para profesionales del diseño web.

Espero que os guste:

——

A continuación encontrará una guí­a completa de lo que está marcando tendencia en el ámbito del diseño web. Los campos de acción del diseño y el desarrollo web se están cruzando cada vez con más frecuencia y se ha hace importante cubrir la necesidad de entender los nuevos conceptos que conciernen a estos campos. Esperamos que esta guí­a sea un gran aporte para ayudarle enfocar el camino a seguir en el avance del diseño web.

Adaptación al diseño web responsivo

El diseño web responsivo (DWR) se ha convertido en la tendencia y el camino a seguir en el campo. Si aún no está familiarizado con el concepto, puede consultar la reseña de Ethan Marcotte para A List Apart; también recomendamos esta lista de recursos publicada por Brad Frost: Esto es responsivo.

Básicamente, el objetivo del diseño web responsivo es hacer que los sitios y las aplicaciones web se puedan adaptar a cada nuevo dispositivo y su respectiva resolución.

Sin embargo, el diseño web responsivo tiene sus debilidades; aún no es perfecto ya que sacrifica información a favor del diseño y no es lo suficientemente adaptativo. Es por esto que vamos a ver algunas de los desarrollos que están conduciendo a la evolución del diseño web responsivo.

Continúa leyendo «Tendencias en Diseño Web en 2013»

typespiration, combinaciones de tipos de letra para proyectos web

Publicado el

por Juan Diego Polo

tipografí­a

Renacido entre las cenizas, xyberneticos.com vuelve a la carga con sus consejos relacionados con diseño web, mostrando al mundo lo que podemos conseguir en typespiration.com.

Se trata de una web en la que muestran combinaciones de tipografí­a poco habituales, teniendo a la inspiración como jefa del proyecto. Es posible navegar entre páginas de ejemplo con los consejos ofrecidos, existiendo instrucciones detalladas para instalar las fuentes y los códigos CSS en nuestras páginas.

Muchas de las fuentes son de Google Web Fonts, teniendo que incluir la lista de importación del tipo de letra deseado al inicio de la web que se cargará, tal y como vemos en la imagen inferior.

fuente

Usar una tipografí­a especí­fica es sencillo, pero encontrar el equilibrio perfecto entre varias es algo que solo quien tiene el talento en la sangre puede hacer con éxito, motivo por el cual es importante guardar typespiration.com con cariño.

Buscar paletas de colores en Design Seeds

Publicado el

por Miriam Schuager

Ya sea que necesitemos una buena combinación de colores para nuestros trabajos de diseño, o estemos pensando en decorar nuestra casa, siempre es útil contar con recursos online que nos ayuden a escoger una buena paleta de colores.

Tenemos muchas opciones, pero Design Seeds tiene una forma diferente de presentarnos su propuesta. La creadora del sitio nos presenta a través de imágenes diferentes paletas que colores que podremos aplicar a nuestro trabajo. Podemos filtrar los resultados por un color de preferencia o a través de diferentes temas, ideal si estamos buscando por ejemplo colores que evoquen a la naturaleza, o que identifiquen a una estación del año en particular.

Cada una de las entradas nos permite buscar más opciones similares en cada uno de los  colores presentados, además de  ver el código hexadecimal. Podemos descargar la imagen o compartirla a través de las redes sociales. Es una manera diferente y amena de buscar paletas de colores, casi al estilo Pinterest, que podemos tener en cuenta.

IcoMoon, más de 1800 iconos vectoriales gratuitos

Publicado el

por Miriam Schuager

iconos

Contar con un buen pack de iconos vectoriales siempre resulta útil para complementar el diseño de cualquier contenido visual que estemos preparando. IcoMoon (icomoon.io/app) tiene una generosa propuesta para nosotros, que nos permite acceder a más de 1800 iconos para descargar de manera gratuita.

Nos encontraremos con una colección impresionante de opciones, donde podremos descargar aquellos que nos resulten útiles con solo seleccionarlos. La aplicación permite generar Sprites CSS personalizando el tamaño y color y nos brinda la opción de subir nuestros propias imágenes vectoriales para utilizarlos de fuente.

IconMoon cuenta con una extensión para Google Chrome, donde podremos navegar por todos los iconos siguiendo la misma dinámica, pero con la ventaja de poder trabajar sin conexión.

makeappicon, una forma rápida de crear iconos para móviles

Publicado el

por Juan Diego Polo

Uno de los recursos recomendados hoy en webresourcesdepot.com es ideal para los que tieen que generar iconos en diferentes tamaños y quieren hacerlo en pocos segundos.

Se trata de makeappicon.com, una herramienta que permite, sin necesidad de registro, subir nuestro icono y obtener varias versiones del mismo en diversos tamaños, creados especialmente para su uso en dispositivos móviles.

Podemos obtener la colección de iconos para Android o iPhone, siendo posible bajar el resultado en el tamaño deseado y ver un ejemplo generado dinámicamente en una imagen del teléfono seleccionado.

Nada que cualquier editor de imágenes no consiga realizar, aunque lo hace en un tiempo record, siendo compatible con jpg, psd y png.

Evolución del diseño web desde 1990 hasta nuestros dí­as #infografí­a

Publicado el

por Juan Diego Polo

Excelente infografí­a de Clixlogix que comparten hoy en visual.ly, mostrando cómo ha evolucionado el diseño web en los últimos años.

Desde las webs basadas en tablas HTML hasta la fiebre del HTML5 y los dispositivos móviles, hemos visto como el CSS y el Flash se mordí­an entre ellos en busca de establecerse en el mercado, una guerra que tuvo un claro ganador con la revolución de la web móvil.

Lejos quedaron los tiempos en los que se diseñaba una página con el bloc de notas, o usando aquellas primeras versiones de DreamWeaver. Hoy en dí­a hay una infinidad de programas que ayudan a realizar el trabajo de forma efectiva, aunque, por supuesto, ninguna de ellas es capaz de sustituir el talento de un buen diseñador.

Os dejamos con la infografí­a:

Evolución del diseño web