Conceptos de LayOut

¿Qué es layout?

Cuadrícula imaginaria que divide en espacios o campos la página que se diseña para facilitar la distribución de elementos como textos ó gráficos en la misma. Es una como una estructura beta de la forma de organización de la información

¿Qué elementos se tienen en cuenta al diseñar un layout?

Los elementos que componen una página web son los: textos, imágenes, tablas, gráficos, etc. También son elementos del layout los colores y el tipo de letra.

¿Qué herramientas de la web existen para realizar layout?

Se debe tener en cuenta que el término layout es aplicado en muchos campos como la arquitectura, el desarrollo de páginas web y el desarrollo de proyectos y programas. En lo que páginas web respecta existen muchas herramientas que me permiten esta práctica, una de ellas muy utilizada (no es de la web pero se puede adquirir por medio de esta) es Adobe Illustrator gracias a las herramientas esquemáticas que ofrece. Además, existen sitios web tipo blog que me permiten modificaciones variadas en distintos aspectos estructurales y visuales., por ejemplo: http://www.mywickedspace.com/generators/myspace-layout-generator.php

¿Qué importancia tiene el layout en la arquitectura de información?

Es importante el desarrollo de un layout antes de iniciar a concretar la página web ya que esta me permitirá organizar la información del sitio, es como un boceto de la estructura que manejará según los objetivos que se requieren. A la hora de realizar los diseños hay que tener en cuenta que un layout claro permitirá una navegación mucho más fácil.

Ejemplos gráficos de layout: (esquemáticos)

Existen estructuras de layout de navegación líquida que se adaptan al ancho de la pantalla para rellenarla, no es muy recomendable, por ejemplo:

http://blog.html.it/layoutgala/LayoutGala15.html

También encontramos páginas con un ancho fijo para evitar generar espacios en blanco indeseables, donde si la pantalla es muy ancha los laterales se rellenan con algo pensado preoviamente con el sitio, por ejemplo:

http://blog.html.it/layoutgala/LayoutGala38.html

finalmente se puede mostrar un ejemplo de las variaciones en número de columnas y filas:

http://blog.html.it/layoutgala/LayoutGala40.html

fuentes:

http://blog.html.it/layoutgala/

http://www.logistica.enfasis.com/notas/10034-como-disenar-un-buen-layout

Análisis XBOX

Sistema de Etiquetado:
El sistema con el que cuenta, puede ser planificado o no, dependiendo del punto de vista desde el que se le vea, ya que para alguna persona que tal vez no conozca el mundo de los video juegos, o el mundo Xbox, las diferentes etiquetas no le van a informar mucho sobre su contenido, sin embargo, para personas conocedoras de este campo, las etiquetas son más que claras sobre su contenido.
Las etiquetas se presentan mediante texto, y rodean en su gran mayoría, un contexto virtual mediante el campo de los video juegos.

Enlaces:


Los enlaces son comunes en su campo de navegación, ya que se encuentran frecuentemente en todas sus diferentes ventanas de texto, estos principalmente nos redirigen a sitios propios de la misma página, o en ocasiones sitios de información de Microsoft.

Indexación:


xbox.com, merece ser reconocida por su gran orden en cuanto a al sistema de búsqueda se refiere, cuenta con un orden bastante acertado tanto en el motor, como en su misma diagramación.

Diseño del Sistema de Navegación:


El sistema de navegación prospectiva, nos permite conocer de forma sencilla que se aproxima, a hacia donde nos dirijen ciertos vínculos mostrados como enlaces dentro de textos o icónicos. La página nos permite navegar hacia adelante o hacia atras para devolvernos o adelantarnos a contenidos previamente ya vistos, por lo que se llama HTML. Sin embargo, no muestra enlaces ya visitados mediante algun tipo de demarcación.


Contexto:


El contexto gráfico es 100% notorio, ya que mediante algunos iconos, colores y/o formas muestra la gran marca XBOX, de tal manera que nos basta con entrar al sitio para saber la organización con la que se trata, el nombre de la marca refuerza esta identidad al estar siempre visible y al presentarse siempre como botón de inicio o Home.
Un aspecto en el cual se presenta una falencia, es al no presentar la ruta jerarquica, para que el usuario se entere en que parte del sitio está.

Flexibilidad:


La página al referirse y centrarse en el tema de los video juegos, es decir con un público de diferentes tipos y edades, debe ser y es una página muy amigable, ya que presenta botones principales en todo momento y nos permite ingresar a cualquiera de sus sitios desde el lugar en que nos encontremos.


Tipos de Navegación:


Navegación Global: El sitio cuenta con una nevagación global bastante vistosa y llamativa, la cual siempre está visible y nos permite llegar a los lugares principales de la página con gran facilidad y repidez.

Navegación Local: La navegación local aquí se usa para ingresar a sitios más especificos sobre cada categoría de la navegación global.

Navegación Jerarquica: La navegación jerarquica nos permite saber siempre dentro de que parte del sitio nos encontramos es decir, siempre reconoce cual es su padre y su hija como en el siguiente ejemplo, donde a pesar de estar dentro de un submenu de Xbox 360 + Kinect, nos marca que esa es la padre y que estamos dentro de ella.

Navegación AD-HOC: Este tipo de navegación en este sitio, nos ayuda a introducirnos siempre más sobre cierto tema, de tal manera que lleguemos a nuestro objetivo, o siquiera nos hacerquemos demasiado a él.

 Categorías:


Xbox.com presenta diferentes formas de interacción, ya sea mediante barras de navegación, o menús desplegables.

 Tipo de Búsqueda:


La excelente búsqueda con la que cuenta el sitio, ayuda mucho en su flexibilidad, cuenta con diferentes tipos de organización, ya sea por temática, cronológica o alfabética, podemos organizar nuestra búsqueda de la forma en que la necesitemos. Y nos retorna una retroalimentación muy completa de cada sitio en el que buscó y no encontró información de la que requerimos.

fuente: http://www.xbox.com/

Análisis Casa Oben

SISTEMA DE ETIQUETADO

El sitio de Casa Oben maneja un sistema de etiquetado planificado, utiliza términos de acuerdo a su contexto de mercado.

Usa un tipo de etiquetado textual, y evita los íconos, ya que sus etiquetas son palabras referentes a lo que contiene cada etiqueta

ENLACES
Los enlaces dentro de cada una de las etiquetas en el cuerpo del texto, cuenta con hipertextos para la localizzación en las diferentes ciudades del país.

INDEXACIÓN

El sitio cuenta un sistema de búsqueda eficiente siempre y cuando se conozca el tipo productos que se necesitan (salas, comedores, alcobas y niños). Sin embargo no tiene un motor de búsqueda para las palabras clave. La exposición de los productos a través de fotografías tipo catálogo funciona bien con la diagramación escogida.

DISEÑO DE SISTEMA DE NAVEGACIÓN

La página permite avanzar y retroceder dentro de ella pero sólo a través de las herramientas del navegador.

Cuenta con un sistema de navegación prospectiva (sabemos a dónde nos llevan los links gracias a que las etiquetas textuales lo advierten).

No muestra enlaces ya visitados.

CONTEXTO

- El logo corporativo está siempre visible en la página como botón de inicio.

- La identidad gráfica funciona perfectamente

- La jerarquía no está muy clara ya que todo parece al mismo nivel de relevancia. Pero esto no es un factor negativo ya que los servicios prestados permiten este tipo de jerarquía

FLEXIBILIDAD

Hay problemas de navegación ya que para ir a un tipo de producto diferentes se debe recorrer el sitio desde el principio

TIPOS DE NAVEGACIÓN
La página maneja todos los tipos de navegación: Global, Local y AD-HOC

global

local

AD-HOC



FUENTE: http://www.casaoben.com/

Análisis PUJ

SISTEMA DE ETIQUETADO

Este sitio, cuenta con un sistema de etiquetado planificado, utiliza términos de acuerdo al contexto de la educación.

Maneja un tipo de etiquetado textual, ya que sus diferentes etiquetas son presentadas mediante textos.

ENLACES

Aunque cuenta siempre con un botón que lleva a la página inicial, se debe seguir la jerarquía nuevamente para llegar a cierto lugar deseado.

TIPOS DE NAVEGACIÓN
La página maneja todos los tipos de navegación: Global, Local, Jerárquica e inclusive Ad Hoc.

global

Jerárquico

Local

AD-HOC



CATEGORÍAS
En las categorías encontramos las brras de navegación y los menús desplegables a lo largo de todo el sitio.

MARCOS

No presenta marcos dentro del sitio.

TIPOS DE BÚSQUEDA

La poca posibilidad de búsqueda que se maneja no es nada amigable.

Es clasificada alfabéticamente.

No cuenta con ningún tipo de retroalimentación

SISTEMAS DE BÚSQUEDA

Se centra en un sistema de búsqueda según la temática, ya que muestra su directorio por facultades o departamentos

FLEXIBILIDAD

Los enlaces dentro de cada una de las etiquetas en el cuerpo de texto.

INDEXACIÓN

La página cuenta con un sistema de búsqueda bastante deficiente, ya que no permite buscar a través del sitio, solo buscar en el directorio, sin embargo, tampoco funciona. Además en ocasiones presentan diagramación defectuosa que genera una desorganización.

DISEÑO DE SISTEMA DE NAVEGACIÓN

La página permite avanzar y retroceder dentro de ella.

Cuenta con un sistema de navegación prospectiva (sabemos a dónde nos llevan los links).

No muestra enlaces ya visitados.

CONTEXTO

- El nombre de la universidad esta siempre visible en la página como botón de inicio.

- La identidad gráfica funciona, sin embargo hace falta recurrir más a esta (se podría jugar más con el logo y los colores corporativos).

- La jerarquía no esta muy clara ya que todo parece al mismo nivel de relevancia.

Análisis del sitio web de la Pontificia Universidad Javeriana desarrollado por Juan Sebastián Durán C. y Alejandro González S.

http://www.javerianacali.edu.co/

EXPOSICIÓN CAPITULO 2

Desarrollo de la exposición del Capítulo 2 del Libro guía "Information Architecture on the World Wide Web" Desarrollada por Juan Sebastián Durán C, Nicolás Botero B y Alejandro González S.
http://dl.dropbox.com/u/52349283/expoArquiCap2.pdf

Post Capítulo 1: Libro Guía

Hoy en día todas las estructuras influyen en nosotros, sea cual sea nuestra profesión, ya que cada una de ellas posee un significado y conforman nuestra vida. Como personas, pasamos mucho tiempo de nuestra vida observando y recurriendo a diferentes materiales y tecnologías de acuerdo a nuestro gusto y comodidad. Así mismo trabajan las páginas web, poseen estructuras que nos influyen cuando las vemos, y hay que destacar tres de ellas:

* gracias a la diversidad de necesidades que hay en el mundo por parte de las personas, existe también una amplia gama de arquitecturas. Es imposible deifinir un modelo como único.

* una arquitectura poco funcional es principalmente debida a que los realizadores de dicha arquitectura sólo se preocuparon por el hacer, dejando a un lado el conocer o experimentar su obra. Por ende, los usuarios que sí acceden a ella diariamente la pueden encontrar incómoda.

* Según el texto para hacer una buena página web se requiere ser un consumidor de este mercado con mucha experiencia.

Siguiendo con el objetivo de crear una buena página web, lo primero que se debe hacer es conocer muy bien las necesidades y expectativas de los usuarios. El importante plantear actividades que me permitan saber qué les gusta y qué les disgusta para así establecer una estructura base para especializar.

A continuación se mencionan 5 características que hacen exitosos a los sitios web:

1) Estética: Aunque sea algo superficial, es un factor fundamental para que el usuario decida entrar o no al sitio, debe ser coherente y consistente.

2) Grandes Ideas: Proponer a los usuarios nuevas ideas que cambie su forma de ver las cosas, logrado a través de un buen uso del lenguaje  de expresiones y reforzado por una parte grafica acorde.

3) Utilidad: Significa que el usuario sienta que debe volver porque le fue de utilidad la página.

4) Fácil Localización: de Fácil acceso y bein estructurada para que se encuentre rápidamente lo que se esta buscando.

5) Personalización: Satisfacer la necesidad de los usuarios de obtener información de su interés.

OPINIÓN INFOGRÁFICA

Gibson

Esta infografía maneja una adecuada paleta de colores, tiene unidad gráfica y es estéticamente agradable. Además es perfectamente legible, sin embargo la forma de presentar la información y el uso de los Logotipos esta en calco interactivo, cosa que le quita seriedad y representación de marca.

Piratería

Excelente legibilidad y paleta de colores acorde al tema, aunque falta unidad gráfica en cuanto a las imágenes utilizadas. El título es un poco tímido y fuera de la composición pero el general funciona bien.

Angry Birds

Excelente Diagramación y unidad gráfica, se siente 100% Angry Birds por el buen uso de imágenes y colores. El uso del texto es un poco excesivo pero funciona bien.

Personajes Porcelanicrón

La infografía es poco impactante, hay mucho espacio en blanco que se pudo haber aprovechado mejor. Hay una constante variación en el tamaño de la fuente que incomoda a la vista. Uso de texto excesivo y falta de unidad gráfica. Si embargo la ilustración del dragón es buena.

MTV

Hay mucho espacio mal aprovechado y poca legibilidad. Hay un buen estilo gráfico acorde con el tema. En el título también se presenta espacios en blanco que disminuye la legibilidad e impacto del mismo.

Adventure Time

Excelente representación del tema gracias al uso de imágenes, fuentes tipográficas y colores adecuados. Presenta una buena diagramación que permite el entendimiento de la información. 

Porsche 911

Carece estilo Porsche por uso inadecuado de imágenes, ya que estas son muy planas para la marca. Excelente escogimiento de fuentes tipográficas y recursos infográficos. El uso de colores falla un poco pues son muy planos.

Películas de Terror

El excesivo uso de fuentes tipográficas satura la composición y le quita unidad gráfica. Además el uso de máscara de recorte en letras le quita legibilidad. La diagramación es un poco confusa y las imágenes reales con vectoriales no funcionan.

Café

La paleta de colores utilizada le ayuda a dar ese toque casero que se quiere. El uso de gráficos tridimensionales ayuda para dar un look profesional a la composición que además siempre conserva la unidad gráfica. Falta impacto a nivel de titulación pues se pierde con el texto informativo.

S.O.P.A

La idea es muy creativa y destaca gracias a una excelente diagramación, unidad gráfica y manejo de recursos infográficos. Además tiene buena legibilidad y una paleta de colores que hace más amena la información.

Curiosidades Felinas

Excelente desarrollo a nivel de ilustración, tiene un buen dinamismo para presentar la información y paleta de colores acorde al tema. Hay unos pequeños problemas de legibilidad en el título pero funciona muy bien en cuanto a unidad gráfica.

Cupcakes

A nivel gráfico hay coherencia para presentar la información y dinamismo en cuanto los recursos infográficos. Buen uso de paleta de colores y buena legibilidad.

ZARA

Impecable panejo de marca, excelente manejo de recursos infográficos, paleta de colores y recursos de imágenes. La fuente tipográfica ayuda aún más al estilo de la marca. La legibilidad es buena gracias al tamaño del formato usado.

Phineas & Ferb

Buen manejo de estilo de marca. Excelente manejo de recursos infográficos y a nivel de ilustración. Tiene muy buena unidad gráfica. La diagramación no es muy clara de entrada pero al tener las convenciones presentes se facilita el entendimiento.

Resident Evil

Hay dos elementos que destacan y sacan la cara por la composición, el primero es la línea de tiempo que esta muy bien implementada con el tema trabajado, y el segundo es el uso del logo de Umbrella como anomalía que rompe positivamente. Sin Embargo la información tiende a quedar ajustada y sin fluidez.