Imagina la dificultad de llegar a un destino sin una dirección clara. No es suficiente saber a dónde quieres ir. También debes conocer el proceso que te llevará allí.
Cada proyecto de diseño debe comenzar con un proceso bien planeado. Tener un proceso de diseño implementado antes de comenzar te ayudará a superar cualquier confusión y distracción en el camino. Podrás concentrarte en la tarea que tienes entre manos y ejecutar esa visión con claridad y eficiencia.
Hay muchos procesos de diseño. Pero muy pocos son simples, prácticos y útiles. El proceso de diseño a continuación es uno que reúne todas esas cualidades. No se aumentarán tareas extras, solo lo esencial para diseñar un sitio web sobresaliente.
Contenido
El primer ciclo del proceso de diseño es el contenido. En el corazón de cada sitio web está el contenido. Es por eso que los usuarios visitan tu sitio y hace que regresen. Antes de siquiera pensar en el diseño, debes tener una idea clara de qué tipo de contenido deseas en tu sitio web.
El propósito de iniciar un sitio web en primer lugar es compartir su contenido con otros. Con un sitio web, puedes llegar a una audiencia mundial. Pero para que tu sitio web tenga un impacto en los demás, debes tener contenido que sea interesante, informativo y útil.
También debes decidir a qué grupo de personas deseas dirigirte. Esto mantendrá el tema de tu contenido enfocado. Cuanto más enfocado esté tu contenido, más valor podrás ofrecer a tus usuarios. Al ofrecer contenido enfocado, los usuarios pueden confiar en ti como un recurso valioso para su necesidad.
El contenido consiste en texto, imágenes, videos u otros medios. Es mejor tener al menos un concepto de alto nivel de qué tipo de contenido tendrá su sitio antes de comenzar con la arquitectura de la información. Puedes desarrollar el contenido antes del ciclo de arquitectura de la información si sabes exactamente lo que tendrá tu sitio, o puedes hacerlo después si tu sitio se vuelve más claro trabajando en ese orden.
De cualquier manera, es importante desarrollar todo tu contenido antes de llegar al ciclo de diseño visual. De esa manera, el diseñador puede crear maquetas “pixel perfect” sin esperar el contenido y sin agregar iteraciones de diseño adicionales al proceso. Una vez que sepas qué tipo de contenido tendrá tu sitio, es hora de descubrir cómo organizar tu contenido en cada página.
Arquitectura de la información
Muchos diseñadores se saltan este paso crucial y pasan directamente al diseño visual. O intentan combinar los ciclos de arquitectura de la información y diseño visual para hacerlos simultáneamente. Esto puede tener consecuencias negativas en tu sitio web al final.
Crear contenido de calidad es una cosa, pero hacer que sea fácil de encontrar y consumir es otra. El ciclo de arquitectura de la información implica estructurar y organizar el contenido página por página de manera que los usuarios puedan entenderlo fácilmente. Si los usuarios pueden entender la navegación y diseño, no deberían tener problemas para navegar a través de tu contenido.
Los “wireframes” ayudan a guiar la navegación y la composición. Los wireframes son planos de baja fidelidad que muestran la ubicación y el orden del contenido en cada página web. A menudo se realizan de forma iterativa hasta que todas las partes interesadas llegan a un consenso.
Los diseñadores también pueden realizar pruebas de usuario con “wireframes” para encontrar cualquier problema de arquitectura de la información que se haya pasado por alto antes de pasar al diseño visual. Si un diseño necesita pruebas, depende del nivel de habilidad de los diseñadores en el proyecto, el tamaño del proyecto y la cantidad de tiempo disponible.
Diseño visual
Cuando comienza el ciclo de diseño visual, el diseñador utiliza el contenido y los esquemas para diseñar maquetas “pixel perfect”. Las maquetas de alta fidelidad muestran cómo se verá el producto con el contenido y la arquitectura de información juntos. Se realizan iterativamente hasta que haya un consenso entre las partes interesadas. Las maquetas son una parte importante del proceso porque obligan a nombrar y aclarar todos los factores desconocidos antes de pasar al desarrollo.
La razón por la que deseas que tus maquetas se vean perfectas antes de pasar al desarrollo es porque una vez que están en desarrollo, cualquier cambio realizado en el diseño puede costar mucho tiempo y dinero. Hacer cambios al diseño durante el ciclo AI o DV es menos costoso porque hacerlo es relativamente rápido y fácil. Cada pequeña cosa en el sitio web requiere código. Y programar el código requiere mucho tiempo y esfuerzo. Cambiar el diseño no es tan fácil para un desarrollador como lo es para un diseñador. Es por eso que nunca deberías iterar en el ciclo de desarrollo.
Desarrollo
Una vez que comienza el ciclo de desarrollo, se debe tener las maquetas “pixel perfect”, junto con el texto, las imágenes y los gráficos cortados y listos. Cortar es un paso necesario que le permite al desarrollador programar todo lo que ve en las maquetas en un sitio web que funcione.
A veces, las maquetas no son lo suficientemente claras para que el desarrollador entienda tu diseño. Por ejemplo, si tu diseño tiene una funcionalidad interactiva avanzada, es posible que el desarrollador no lo note a menos que tú lo indiques. Es por eso que si tu diseño tiene una funcionalidad compleja, se necesitan especificaciones de diseño bien escritas para describir cómo funcionará el diseño, Figma es una gran herramienta para maquetación que justamente permite simular el comportamiento del diseño cuando ya se lo pasa a código.
El éxito del ciclo de desarrollo probablemente dependerá de qué tan claras sean las maquetas para el desarrollador. Si se comunican claramente, pero la versión del desarrollador de sus maquetas aún no coincide con el aspecto real de las maquetas, entonces eso probablemente significa que hay un problema con la alineación. Si esto sucede, asegúrate de comunicar el espacio exacto entre píxeles al desarrollador. En última instancia, el producto final del desarrollador debe verse exactamente como las maquetas “pixel perfect”.
El viaje para crear un sitio web sobresaliente requiere tiempo y energía. Trabajar con prueba y error puede llevarte allí eventualmente, pero trabajar inteligentemente te llevará allí antes y con mejores resultados. Al seguir este proceso de diseño web, podrás trabajar de manera más inteligente.