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

 

Desarrollo Web12

Freepik es un recurso maravilloso. Hay vectores, fotos y PSD. Muy simple y extremadamente útil.

 

Fuentes

 

Dafont

Desarrollo Web13

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 

Desarrollo Web14

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

Desarrollo Web15

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

Desarrollo Web16

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

Desarrollo Web19

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

Desarrollo Web21

 

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.