21 Herramientas de Diseño y Desarrollo Web que ahorran tiempo

Aquí tienes 21 Herramientas de Diseño y Desarrollo Web que ahorran tiempo para las diferentes etapas del trabajo diario
herramientas de diseño

21 Herramientas de Diseño y Desarrollo Web

En el campo del diseño Web, es importante saber cómo realizar tareas específicas y ser creativo a la hora de cumplir los objetivos. Sin embargo, es necesario contar con herramientas adecuadas para trabajar de manera eficiente. Aquí tienes 21 Herramientas de Diseño y Desarrollo Web  para las diferentes etapas del trabajo diario, desde el comienzo de una Web hasta el final de la producción:    

Herramientas Mock Up

   

MockFlow

Desarrollo Web MockFlow es una aplicación basada en Flash que permite crear una estructura con elementos simples para desarrollar un prototipo y así poder mostrar tus conceptos a colegas y clientes. Los puntos a favor de este servicio son una herramienta que permite hacer borradores de páginas rápidos y con propósitos de colaboración.  

FrameBox

Desarrollo Web1 FrameBox es una aplicación de arrastrar y soltar para hacer borradores de Webs  rápidamente utilizando elementos de la interfaz del usuario. Permite cambiar su tamaño y configurar el ancho del diseño para realizar prototipos de baja calidad para el diseño web. Los diseños pueden compartirse con los medios sociales o por email. Simple y eficaz.    

Iconos

 

Archigraphs

Desarrollo Web2 Un lugar genial para encontrar iconos muy buenos y de gran aspecto. Desde películas a animales, aparatos electrónicos clásicos y modernos, es muy conveniente probarlo.  

Iconizer

Desarrollo Web3 Este sitio tiene una colección de iconos.  Se escribe la búsqueda en la barra de y se obtiene el resultado. Hay muchas cosas allí, pero hay algo más: después de elegir el icono que uno desee, es posible personalizarlo. Se puede cambiar el fondo, el ángulo de la imagen, el color de primer plano, etc.  

Iconmonstr

Desarrollo Web4 Este es el lugar adecuado para alguien que está buscando iconos minimalistas. Las formas pueden descargarse en png o en formato SVG.

   

One Div

Desarrollo Web5 Todos los iconos que aparecen en este sitio web se publican en puro css con sólo un div html. Pretende mostrar el potencial de CSS3 para crear objetos visuales y una alternativa a SVG para el diseño web de respuesta.    

We Love Icon Fonts

Desarrollo Web6 Este sitio ofrece Fuentes que son iconos. Pueden utilizarse como iconos simples. Uno debe agregar la fuente que le gusta a su colección, @importarlo a su css con la url, asociar una clase al mismo y luego aplicarlo donde sea conveniente. Aquí tienes un ejemplo.      

Texturas

 

Texture King

Desarrollo Web Texture King muestra las diferentes categorías relacionadas con las texturas y dentro de ellas hay muchas opciones para descargar.    

Lost and Taken

Desarrollo Web Otra gran colección de texturas. Su característica más notable son sus grandes categorías, que abarcan muchos tipos de texturas (como luces u hojas de plantas) y que no pueden hallarse en ningún otro lugar.    

10 Ravens

Desarrollo Web9 10 Ravens tiene texturas gratis, stock de imágenes y modelos 3D. Muy buenos recursos para gente exigente.      

Stock de Imágenes

   

Official PSD’s

Desarrollo Web10 Official PSDS es una web excelente para buscar recursos PSD. Su colección es realmente enorme y ofrece de tutoriales muy buenos y una comunidad donde se puede interactuar con otros usuarios de Photoshop.  

SXC

Desarrollo Web11 Simple pero lleno de opciones. SXC es el lugar correcto donde buscar una imagen en particular.  

Freepik

  [caption id="" align="alignnone" width="500"] Desarrollo Web12[/caption] Freepik es un recurso maravilloso. Hay vectores, fotos y PSD. Muy simple y extremadamente útil.  

Fuentes

 

Dafont

[caption id="" align="alignnone" width="500"] Desarrollo Web13[/caption] Dafont ofrece una cantidad muy grande de tipos de letra. La mayoría son gratuitos para objetivos comerciales y personales. Es una herramienta muy útil para obtener una vista previa del texto y saber cómo se verá. Hay muchas categorías para buscar y vale la pena mirarlas: quizá halles algo de inspiración para tu próximo proyecto.  

FontSquirrel 

[caption id="" align="alignnone" width="500"] Desarrollo Web14[/caption] FontSquirrel dispone de galerías de fuentes gratis para uso comercial, además de un generador @font-face en el que pueden configurarse muchos tipos de letras en diferentes formatos para garantizar una experiencia de calidad. Por favor, ver este  tutorial de Paul Irish donde él explica cómo hacerlo. Hay que destacar que las fuentes que se pueden convertir deberían ser legalmente elegibles para su inserción en una web. ¿Eres un poco perezoso como para utilizar el generador font-face? No te preocupes, hay un montón de kits ya listos para usar en @font-face kits.  

Identifont

[caption id="" align="alignnone" width="500"] Desarrollo Web15[/caption] Identifont tiene tipos de letras gratis y una sección llamada fontset donde puedes marcar tus favoritas, pero la característica más notable es la relacionada con identificar las fuentes. Muchas veces uno se sorprende por un tipo de letra en una web y no tiene manera de rastrearla. Ahora eso es posible con Identifont.    

What Font is

[caption id="" align="alignnone" width="500"] Desarrollo Web16[/caption] What Font is permite identificar un tipo de letra específico mediante una foto de ella. Además tiene un montón de tipos de letras para descargar gratis.  

Google Fonts

  Desarrollo Web18   Google fonts es un servicio que permite elegir distintos tipos de letras, descargarlos o incrustarlos en un sitio css, @import o por medio de Javascript.    

Herramientas de detección de tipos de letras

   

Modernizr

[caption id="" align="alignnone" width="500"] Desarrollo Web19[/caption] Modernizr es una biblioteca Javascript que puede detectar si un navegador soporta html5 y css3. Si estas características no fueran compatibles con el navegador, se aplican ciertas clases a la etiqueta html. Para más información sobre el uso de esta herramienta increíble, por favor leer este artículo.    

RingMark

[caption id="" align="alignnone" width="500"] Desarrollo Web21[/caption]   Ringmark es una prueba basada en la web para saber si el navegador de un móvil es compatible con ciertas nuevas características.

 

Polyfills – Modernizr´s recomendado

Desarrollo Web22 Polyfills son scripts que simulan el comportamiento de un API nativo en navegadores viejos. Estos son recomendados por la biblioteca, más de 40 scripts.     Original de Ezequiel Lavaca ( www.canvasestudio.com.ar) “50 Time-Saving Web Design – Developer". Foto cortesía de aaron_eos.