El principio fundamental que vamos a usar en el desarrollo del diseño es el de diseñar de los patrones al detalle. Ir de lo general a lo particular permite tener una visión general desde el principio sin que los detalles interfieran en esa visión. Cuanto más clara es esa visión general mejor se pueden definir los detalles. De este modo iremos difiniendo el diseño desde las zonas, pasando por las funciones y por último los elementos.
Definiendo Zonas
En Permacultura, las zonas se definen en función de la frecuencia de uso de los elementos que se ubicarán en cada una. Así, la zona 0 es el centro de actividades, la zona I es de uso intensivo y a medida que nos acercamos a la zona V, la frecuencia de uso es cada vez menor. En garnense plantean las zonas en el diseño web de manera muy clara y de sentido común, y hemos aplicado ese enfoque para este portafolio.
La zona 0 es la zona central de la pantalla y es donde colocamos nuestro contenido.
La zona I es para el header con el menú principal y la dejaremos fija en ese lugar para facilitar la navegación pero también para mantener presente los elementos de branding, tales como logo y/o slogan.
La zona II es el sidebar a la derecha de la pantalla, y es donde colocaremos elementos call to action. Elegimos el lado derecho por ser el area de atención fuerte en el diagrama de Gutenberg. Aquí también pondremos un buscador interno para facilitar la navegación.
La zona III está en la parte inferior, a continuación de nuestro contenido principal. Allí pondremos un formulario para recibir feedback e indicar otros contenidos relacionados al de la página actual.
La zona IV será el footer, la parte inferior de la pagina. A esta zona de la web el usuario no debería llegar nunca a menos que esté perdido o no entienda donde está, así que en este sector pondremos enlaces a distintas páginas que respondan posibles preguntas tales como ¿qué es Permacultura? o ¿qué es un portafolio para diploma en Permacultura?
En nuestro diseño web la zona V es el fondo de la pantalla a los lados de nuestra pagina y cumple en este caso una función simplemente estética.
Funciones
Al tratarse de un portafolio de diploma, las funciones fundamentales a establecer primero son las de gestión de contenido: registrar el proceso, poder hacer seguimiento y revisión de ese registro, organizar el contenido y volver a él con facilidad, y presentar el contenido a los visitantes de una manera entendible.
La interacción es importante para recibir el feedback de otros miembros de la Academia de Permacultura y de otros permacultores, así que en cada post y pagina del sitio web facilitaremos los comentarios del blog. Esto además ayudará en la difusión de la Permacultura, lo cual es un criterio complementario para el diploma.
Una vez definidas las funciones que queremos implementar, nos aseguraremos de que cada función importante está soportada por más de un elemento. De esta forma añadimos resiliencia al sistema.
Elementos
Para definir los elementos que vamos a incluir en el diseño, tendremos en cuenta las funciones que cada elemento desempeña, de modo que cada elemento pueda cumplir por lo menos dos funciones. Esto también aporta resiliencia.
Estructura y navegabilidad
Los elementos que componen la estructura son los típicos que podemos encontrar en cualquier web: menús, paginas, post, widgets. A estos elementos les queremos agregar otros que permitan una navegabilidad entendible para el visitante y encontrar rápidamente lo que estén buscando. Para ello agregaremos un elemento que nos ayude en esto:related post (artículos relacionados) es un elemento que permite al usuario conocer a qué otros contenidos relacionados al que acaba de leer puede acceder. Lo colocaremos debajo del contenido principal, en nuestra zona III.
En el mapa mental de organización de contenido
Otros elementos que ayudarán a estructurar el contenido de esos post y paginas son las categorias y etiquetas. Consideramos muy importante, sobre todo para una pagina web con mucho contenido, crear una buena estructura de categorias y etiquetas. Buscamos con ello organizar de forma eficiente nuestro contenido, saber de ante mano dónde va, y al mismo tiempo mejorar la usabilidad.
Contenido y Estrategia de contenido
El contenido que gestionaremos en esta pagina web son los que indica el manual de diploma para el portafolio: Borrador del proceso, Trabajo de curso, Anexos, Resumen de actividades. También gestionaremos el diario de actividades y las presentaciones finales, que aunque no deben ir obligatoriamente en el portafolio según el manual de la academia, consideramos que podemos aprovechar la plataforma para agregarlos.
Parte de este contenido lo crearemos de modo que pueda ser re-utilizado para otro proyecto personal: Ser mas Resiliente, esto es parte de la visión que hemos definido al inicio de este proyecto. El propósito es que, una vez presentado el portafolio en el acto de acreditación, este proyecto web siga creciendo. Con una sección de blog, que tendrá parte de los contenidos desarrollados para el portafolio y nuevos post relacionados con Permacultura, sostenibilidad y estilo de vida. La web también nos servirá de plataforma para difundir todo tipo de actividades relacionadas, cursos presenciales y digitales y un sin fin de posibilidades, el límite es la imaginación!