Proyecto Zen Garden

Título	Propuesta para Zen Garden
Tipo de Proyecto	Proyecto de Curso
Palabras Clave	proyecto 1
Período	2017-2017
Asignatura	Construcción de Diseño Gráfico 4,
Del Curso	Construcción 4º DG 2017,
Carreras	Diseño, Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property., Interacción y Servicios"Interacción y Servicios" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)	Catalina Pérez
Profesor	Herbert Spencer
URL	https://catalinamar.github.io/Encargo-3/

Introducción

En modo de enfrentarse directamente con lo que es la construcción de una página, es necesario enfrentarse a la relación que se dispone entre lo que es la estructura (presentado en los códigos HTML) y la interacción y estilos que disponen entre ellos (Presentados en el CSS) y cómo dentro de una lógica bajo lo que es el diseño web, se dispone una legibilidad y un orden comprensible para navegar en los niveles que se presentan entre los elementos que interactúan dentro del sitio. Para ello, se utilizará como material en contenido la estructura de html del Zen garden, donde tras ejercicios previos de reconocimiento de la materia, se propondrá un nuevo modo de leer el contenido bajo las posibilidades y expectativas en el diseño de un sitio web.

Acercamiento a la materia

Ante de determinar un diseño como propuesta del zen garden, sitio web que tiene como objetivo demostrar las posibilidades de la cascada de estilo en pos de entregar una identidad al contenido en distintos estilos según autor del diseño, es necesario, tantear el terreno de la materia tras primeros ejercicios, que nos permitan reconocer parte de lo que constituye una estructura (reconocimiento del lenguaje HTML) y las posibilidades que da dicho lenguaje para poder visualizar distintas propiedades del diseño Web.

Primera propuesta con HTML

Se dispone el ejercicio de realizar una propuesta en html, con contenido original, en modo de enfrentarse plenamente a la familiarización del lenguaje y sus posibilidades. Para realizar, se estudió en primer plano la estructura y cascada de estilos que permitan un diseño lo suficientemente decente como para demostrar alguna exploración con la nueva materia. Bajo este ejercicio se dispuso metas como la presentación de elementos de estructura de contenida como títulos, párrafos, listas (ordenadas y no ordenadas) y fotos. Tras disponer dentro del contenido estos tipos de elementos, se prioriza la construcción de párrafos e imágenes dispuestos y justificados de distintos modos, y sobretodo la construcción de columnas que disponga la información de un modo más jerárquico y con distintos niveles de profundidad en el orden que se propone leer el contenido. Tras el ejercicio se pudo comprender propiedades mismas de las imágenes y los párrafos, y la interacción que se puede realizar entre ellos a través de los márgenes y el padding que contiene cada elemento, además de la importancia en el orden y categorización de la estructura del html pasada a CSS y cómo vincularlos, además de conocer como publicar los trabajos que se vayan a realizar. https://github.com/CatalinaMar/Encargo1

Enfrentarse a Zen Garden

El siguiente ejercicio se dispuso en la exploración directa de una de las propuestas ofrecidas en el el sitio web Zen garden, donde tras explorar la cascada de estilo de distintas propuesta con una misma estructura (el html con sus propiedades intactos), se decidió en un y se exploró la cascada de estilo de esta bajo sus características singulares y sus propiedades. La propuesta explorada fue http://www.csszengarden.com/218/, nombrada Apothecary de Trent Walton, donde se pudo observar la particularidad en la construcción de figuras sin imagenes (a traves de css) y la cualidad responsive, donde la cascada de estilo (siendo extensa) se va dividiendo y cambiando según el porte de la pantalla al cual se va adoptando cada elemento dentro del sitio. Si bien, los cambios que se realizaron no fueron radicales (más que nada cambió en las imágenes, el color del background y los textos y la tipografía), se pudieron abstraer distintas conclusiones en relación a la exploración de esta:

• Imágenes ubicadas dentro de la cascada de estilo: a favor de la poca intervención a la estructura del html, se ubican las imágenes dentro de la identificación de un div “vacío”, para así ubicarlo como relleno la imagen que se pretende poner. En este caso, las imágenes estaban ubicadas en una carpeta del repositorio original, por lo cual se buscó de nuevo las imágenes y se vinculan en modo de links y adaptados de la misma manera.
• Reiteración de estilos según el tamaño dispuesto del responsive: Era importante en esta propuesta el reiterar elementos dispuestos en el estilo del código, ya que al omitir alguno de ello antes dispuesto, algunos de ellos desaparecen al intervenir en el responsive de la página. Si bien esta pagina aparentemente parece exigir poco en trono a su exploración aparte de sus gran contraste de jerarquías en torno a los párrafos y los títulos, la complejidad de este se disponía en reparar y adaptar cada elemento para cada tamaño.
• Superposición y transparencia de imágenes: en el aspecto ilustrativo, se presenta dos tipos de imágenes; una geométricas (triángulos) construidos por códigos css y otros directamente vinculados del repositorio original. Entre ellos se presentaba una relación dentro de la superposición de los elementos ilustrativos frente a los geométricos, creyendo aparentemente que son un elemento. Aca se presentaba principalmente la propiedad de transparencia de los elementos enfrentados en relación a los geométricos y un contraste de texturas que disponía otra imagen superpuesta entre los dos.

https://github.com/CatalinaMar/Encargo2

Propuesta para Zen Garden

Tras los dos ejercicios en torno a la exploración de la materia y el contenido a intervenir, se dispuso el realizar una propuesta del Zen Garden en torno a la actualización de los estilos y diseños en relación a los propuestos en el sitio. Para ello primero se propondrá un prospecto de diseño, que será la expectativa y el objetivo a construir a través de códigos, sin alterar el html del original.

Primer acercamiento

Tras la búsqueda de realizar una nueva propuesta de zen garden, se busco el priorizar el valor tipográfico en la jerarquía de tamaños de los títulos y párrafos, además de construir un intento de diseño asimétrico, inspirado y abstraído de La escuela Tipográfica internacional (Escuela Suiza), donde los tamaños y la asimetría de sus elementos , ubican el foco de atención de el lienzo desde multiperspectiva dentro de los tamaños y grandes contrastes que realzan el valor de la unidades tipográficas por si mismas y por como están presentadas, que por su contenido en sí (concepto clave en un ejercicio donde el contenido es inalterable y universal para todos los proyectos). Para ello, se realizó el foco de atención desde la izquierda de la plantilla en modo de comprender ese punto de fuga (dispuesta por la separación entre dos columnas que se expanden verticalmente en la pantalla) desfasada del centro original de esta. Las imágenes trabajan como peso que equivale un poco el blanco que se revela en la verticalidad del contenido, sin embargo existe una problemática de lectura en relación a la justificación del texto principal, que en vez de presentarse cómodamente a la izquierda, está prioriza ese punto de fuga vertical y lo delinea a través de un justificado a la derecha, siendo complicado en la elegibilidad y jerarquía.

Wireframe

Tras la corrección de el primer acercamiento a la propuesta, se formalizó y se sistematizó los elemento trabajados anteriormente, bajo los principales conceptos tomados tras decidir su diseño, pero más enfocado a su legibilidad y orden. Para ello, se tomo el sistema de grillas (http://gridpak.com/) , donde se dispuso un numero de 7 columnas (numero impar para el desfase de los elementos) con un padding de 1,5 px y un margen de 2px. Con ellas se realizó una relación de dos columnas, una como índice de otros contenidos expuesto en la página, y la otra con la información principal del contenido, donde existe una relación de 1:3, en la posibilidad de la sistematización si es que se realizaría una versión responsive del diseño. Con ello, se formalizó, y limpio de gran manera el orden de los elementos equilibrando un poco más los tamaños y la ubicación de las imágenes dispuestas en la propuesta.

Expectativa de la propuesta

Tras disponer de un orden más sistematizado, la visualización de los elementos se presentaron más armónicos dentro del espacio, y con una mayor posibilidad en la construcción de este a través de html, acercándose más a la expectativa demostrada a continuación. Sin embargo, se mantuvo los valores topográficos y la estética en los coler utilizados bajo al elección de ilustraciones. Donde se tomo como decision tipográfica la Sabon Ltd y la Roboto.

Mapa de div

Antes de aplicar directamente al código, es necesario concientizar la existencia en la identificación de los div que interactúan visiblemente en la página y cómo estas están contenidas dentro de otras que van siento base de estas, construyendo niveles de profundidad dentro de la página, entendiendo más en lo que respecta l estructura y el orden dentro de la realización de div en el HTML.

[[1]]

Resultado

Para poder llegar a las espectativas del diseño propuesto, se trabajo rpincipalmente con la propiedad Flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/;) en dodne al realizar el mapa de div, se dispuso esas contenciones y el caracter que deven tener cada contenido dentro de la pantalla (row o colum). Dentro del aspecto tipográfico, se cambió la tipografía sabon por la baskerville, que era más accesible por ser una google font, por lo cual los tamaños fueron alterados en relación al original.