Comenzando a diseñar

¿Qué tal, qué tal?

Esta es mi primera entrada en el blog, y como quiero adentrarte en el mundo de los que diseñan para web y móvil, hoy comenzaremos con la forma en que se realiza todo el proceso de diseño, para más adelante ir ahondando en cada uno de sus aspectos técnicos.

Entonces, ¿qué hace falta para diseñar con calidad? Lo primero es pensar en las tres reglas generales de experiencia de usuario: conocer al público al que va dirigida la aplicación, simplificar la funcionalidad y hacerla lo más amigable posible.

Teniendo esto en mente podrás darle forma a tu idea y comenzar el proceso, cuyos pasos te ilustraré ahora utilizando como ejemplo el diseño de la app para RSS de CubaCode (actualmente en desarrollo):

1. Wireframing

Los wireframes, o bosquejos, son planos de baja fidelidad para ir organizando el contenido y el funcionamiento general, algo así como el esqueleto de la aplicación. Su objetivo es ayudar determinar dónde va cada elemento y qué función cumplirá, para lo cual se consulta con los programadores a fin de evitar futuros problemas de implementación:

wireframe_example

A grandes rasgos un buen bosquejo debe explicar cómo estará agrupado el contenido, cómo estará estructurada la información y cuáles serán los materiales visuales básicos relacionados con la interacción, ya que su propósito es mapear la aplicación antes de pasar al editor de gráficos.

wireframe_example2

2. Maquetado

Aquí ya pasamos a trabajar en Illustrator, Photoshop o el editor que prefieras, pues llega la hora de convertir en píxeles lo que hicimos con el bosquejo. Es el momento que todo diseñador disfruta al máximo, pues aquí se establece la estética general de la interfaz de usuario a partir del uso de colores, tamaños, tipografías, etc.

mockup_example

Además, es en este paso donde se toman las decisiones más importantes en cuanto a jerarquía visual, navegación, flexibilidad, animaciones, etc. para conformar una visión precisa del contenido y mostrar con la mayor fidelidad posible cómo debe verse y funcionar la aplicación.

Y una aclaración en este punto: cada efecto, animación y detalle debe aclararse en la maqueta para que el programador y el cliente comprendan cómo deben funcionar:

hover_example

3. Recursos para el desarrollo

Una vez completada y aprobada la maqueta, es el momento de entregarle todos los recursos al programador (íconos, tipografías, paleta de colores, etc.), así como la información referida a dimensiones, espacio y demás para que éste tenga en su poder todo lo que pueda necesitar.

icons_example

De manera general los recursos básicos son:

  • Toda la tipografía que utilizaste, en formato TTF u OTF.
  • Todas las imágenes individuales que hayas utilizado en su máxima resolución y formato adecuado.
  • Todos los iconos (y sus versiones hover) en PNG.
  • Los elementos de carga y notificación.
  • Diagrama con las dimensiones de todos los elementos y su posición en la pantalla, así como la indicación de cómo ir de un lugar a otro en la aplicación.
  • Ejemplos y muestras que expliquen cómo deberían funcionar las animaciones.
  • Lista exhaustiva de los colores utilizados con su código RGB o RGBa.

Una vez concluido este paso ya todo estará listo para pasar a la implementación, pero aun así no olvides sentarte con el programador a revisar los detalles a medida que vaya avanzando el proceso de desarrollo, pues en el mundo del diseño el recurso más importante eres tú mismo/a.

Y hasta aquí la entrada de hoy, si te ha interesado el tema haznos saber sobre qué deseas aprender más, que acá te estaremos esperando. Espero tus comentarios, ¡hasta la próxima!

Share

3 thoughts on “Comenzando a diseñar

  1. muy bien! me encanta el disenno y aca existen pocas paginas donde aprender sobre eso, y me gustaria saber sobre disenno responsive, espesificamente sobre como organizarlo todo y cosas asi… buenisimo el articulo, felicidades a la autora y que siga escribiendo

  2. Me pareció excelente el artículo, sobre todo muy fresco y bien explicado, además quisiera saber si es posible algún artículo sobre iconografía. Saludos y felicidades por el blog.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *