En los inicios del diseño Web, los esfuerzos se centraban en escoger un buen canvas en Photoshop para que se pudiese luego exportar a HTML y publicarlo.
Desde aquellos días, el mundo de Internet se ha ido volviendo más y más complejo. Han aparecido desde nuevos dispositivos con tamaños de pantalla distintos, a nuevas apps donde aplicar nuestros diseños.
Así mismo, nuestros kits de herramientas han ido evolucionado con la tecnología, y Photoshop ha dejado de ser la herramienta clave para diseñar nuestra UI (User Interface) hoy en día.
Seguidamente os listamos algunas de las herramientas más utilizadas en diseño web que os permeterán alcanzar buenos diseños, teniendo siempre como eje principal ofrecer la mejor UX (User Experience):
1. Adobe Kuler
Adobe Kuber es una herramienta que nos permite crear una paleta de color para nuestros proyectos. Esta nos ayuda a crear, buscar y combinar los colores para crear nuestras paletas únicas.
2. Typecast
Para escoger la mejor tipografía para tu proyecto, utilizamos la aplicación Typecast. Esta aplicación dispone de más de 5000 fuentes distintas que puedes ver fácilmente y escoger para los textos de la página web en un sólo panel de control.
A parte, se puede obtener el código CSS para que puedas cargarlo en tu página Web sabiendo seguro que los usuarios verán lo mismo que nosotros.
3. Mockflow
Permite montar un prototipo en cuestión de minutos, online y para multitud de plataformas diferentes: Android, iPhone, WordPress, Joomla, Drupal, Facebook… Es muy intuitiva ya que es tan fácil como hacer drag and drop con los componentes que te proporciona para construir tu wireframe.
La versión gratuita sólo permite un proyecto con 4 páginas, pero puedes descargarlas en diversos formatos y borrarlas conforme las dejes de necesitar.
4. GuideGuide
Es una extensión de Adobe Photoshop con la que preparar tu documento para comenzar a diseñar tus webs será cuestión de minutos. Un plugin que se ha convertido en un imprescindible dada la importancia de las guías para conseguir diseños web perfectos. Una vez que la instales no vas a querer dejar de usarla.
5. Layervault
Layervault es una aplicación Web pensada para poder gestionar las últimas versiones de tus proyectos, sobretodo cuando se trabaja de forma compartida con varias personas y/o empresas que van a editar el mismo documento.
La herramienta irá actualizando a las personas que trabajan en el proyecto, cada vez que alguno de los ficheros se haya actualizado, de forma que se puede hacer un seguimiento exhaustivo del progreso del proyecto.
6. Invision
Esta revolucionaria herramienta nos permite transformar nuestros diseños rapidamente en prototipos interactivos con transiciones y animaciones Web. De esta forma podemos compartir entre la gente que trabaja en el proyecto e incluso con el cliente los primeros pre-diseños o ideas, antes de empezar el desarrollo de la Web o de la aplicación. De esta forma agilizamos la fase inicial del proyecto antes de su construcción.
7. Codekit
Es una herramienta que te ayuda a construir webs de manera más rápida y más ordenada. Además te permite compilar Sass y Less y optimiza tus archivos.
Con Codekit podrás importar tus frameworks de manera que si haces un include de algún archivo lo buscará primero en el proyecto concreto en el que estés trabajando y, si no lo encuentra, recorrerá tus frameworks para incluirlo.
8. Proto-io
Esta es una de las herramientas más potentes para hacer prototipos de aplicaciones. Con ella podemos crear y presentar el diseño de nuestras aplicaciones en fases previas al desarrollo. Esta aplicación nos ayuda a la hora de diseñar la aplicación tanto en modo vertical, como horizontal, y para añadir los botones, formularios, textos, menus, imagenes, etc.
Comentarios