Darío Tapia: Rediseño CSS Zengarden

De Casiopea


TítuloRediseño de CSS Zengarden
Tipo de ProyectoProyecto de Taller
Palabras Claveproyecto 1
Período2017-2017
AsignaturaConstrucción de Diseño Gráfico 4
Del CursoConstrucción 4º DG 2017
CarrerasDiseño Gráfico
Alumno(s)Darío Tapia
ProfesorHerbert Spencer
URLhttps://dtapiasaavedra.github.io/zen/

Observación

Árbol de Divs de Zen Garden

Thumb


Se hace el ejercicio de leer el archivo html y determinar las jerarquías de contenidos en un documento aparte para entender la lógica de los elementos que agrupan, las divisiones y la estructura en general de cómo está organizado el archivo. De esta forma, es más fácil visualizar las secciones principales que contienen a su vez los elementos más pequeños; y entender que estas secciones tiene una denominación relacionada con el orden que debiesen tomar en el sitio; por ejemplo: header; footer, main, side-bar; son todas secciones establecidas y reconocidas como elementos comunes que construyen los sitios web.

Primera Versión

Pensamiento de Diseño

Luego de observar la estructura de contenidos y jerarquía del sitio; se tiene como primera constatación la relación entre las secciones y su denominación, junto con el orden en el documento. Por ejemplo; el header contiene los elementos que aparecen en la cabeza del sitio,tales como h1, h2 y la baja de título; el footer es el pie de la página. La información principal está contenida en main; y esta información está compuesta de párrafos y súbtitulos; se entiende que este contenido debe componer el cuerpo de la propuesta; por tanto su distribución es consistente en la página desde la diagramación a la composición tipográfica. Los elementos restantes; como el side bar; fueron concebidos como secciones de segunda jerarquía, que acompañan a un elemento principal habitualmente dispuestas a los lados como menú secundarios.

De esta forma, se opta por la información primero como propuesta de diagramación del documento; donde un agrupación de contenido principal en forma de párrafo en el espacio debe tener peso y ser consistente en dentro del mismo. Está compuesto en Roboto, una familia tipografía sin serif con proporción de tipo humanista; se opta por esta fuente debido a su cercanía a la lectura que proporcionan los tipos con serif, pero con un apariencia geométrica y recta que apunta a mostrar un contenido de forma directa y transparente. En otras palabras, se busca un neutro tipográfico en espacios de composición web.

Primeros acercamientos

Propuesta Final 1

Thumb

Segunda Versión

Sitios de Referencia

Google Fonts


Se observa Google Fonts por las decisiones de diseño respecto del contenido con el que tratan, desde la composición tipográfica de los textos, la diagramación de los contenidos es eficiente sin perder aire entre los elementos, y la sensación final es de concisión en tipos de elementos, eficiencia de la grilla, composición razonada de los objetos textuales, y contraste mayor entre fondo y contenido; y contraste leve en contenidos y tipologías.

Mapa de Divs

Thumb

Contenidos Estudiados

Propiedad de Display

Fuente: http://librosweb.es/libro/css_avanzado/capitulo_4/propiedad_display.html  
Fuente: http://www.w3schools.com/cssref/pr_class_display.asp  

La propiedad display es una de las propiedades CSS más infrautilizadas. Aunque todos los diseñadores conocen esta propiedad y utilizan sus valores inline, block y none, las posibilidades de display son mucho más avanzadas.

  1. Elementos de Línea
  2. Elementos de Bloque

Por el contrario, ciertas etiquetas se renderizan en el navegador en líneas independientes, no mezcladas con el resto del texto. Ejemplos de estas etiquetas son los encabezados, las citas en bloque (blockquote), por supuesto los párrafos (p), y quizá la más conocida de todas que es la etiqueta div usada normalmente para envolver a otros elementos. A estos elementos se les denomina elementos de bloque.

InLine Block

Así por ejemplo, aunque tengamos una etiqueta span que se renderiza en línea por defecto, si le aplicamos la propiedad display:block; se renderizará como un bloque, es decir, sería exactamente igual que si hubiésemos puesto un div. El tercer valor de la lista anterior es muy interesante ya que permite obtener un comportamiento intermedio entre los otros dos. Los elementos inline-block fluyen con el texto y demás elementos como si fueran elementos en-línea y además respetan el ancho, el alto y los márgenes verticales. Son lo mejor de los dos mundos.

  • Relación de Elementos:

Block - div: El más común es el p. Otros son: header, footer y section. Inline: Span. Es un elemento dentro de un párrafo. Se usa para Links

Propiedad Flexbox

Para layout en display de distintos tamaños; se declara mediante Display: flexbox. Muchos diseñadores verán que el modelo "caja flexible" es más sencillo de utilizar. Los elementos "hijos" de una "caja flexible" pueden colocarse en cualquier dirección y pueden tener dimensiones flexibles para adapterse al espacio visible. Posicionar los elementos "hijos" es por tanto mucho más sencillo, y los diseños complejos pueden hacerse más fácilmente y con código más limpio, ya que el orden de visualización de los elementos es independiente del orden que estos tengan en el código fuente. Esta independencia afecta intencionadamente únicamente a la representación visual, dejando el orden de locución y navegación a lo que diga el código fuente.

Contenedor flexible (Flex container)

El elemento "padre" que contiene los elementos flexibles. Un contenedor flexible se define usando los valores flex o inline-flex en la propiedad display.

Elemento flexible (Flex item)

Cada hijo de un contenedor flex se convierte en un elemento flexible. Si hay texto directamente incluido en el contenedor flexible, se envuelve automáticamente en un elemento flexible anónimo.

Ejes

Cada diseño de "caja flexible" sigue dos ejes. El eje principal es el eje a lo largo del cual los elementos flexibles se suceden unos a otros. El eje secundario es el eje perpendicular al eje principal.

Versiones

En esta etapa las versiones anteriores a la versión final se realizan con cascadas de estilo sobre el html de Zen Garden.

Propuesta Final 2

Thumb

Tercera Versión

Versión Final

Escritorio

Thumb Thumb Thumb

Responsive

Thumb Thumb