GustavoOsorio速 Estudio y analisis de referentes Web.
Los últimos años el explosivo aumento de los sitios web, nos ha obligado a diseñadores a reestudiar las estructuras, de modo hacer mas funcional la visita de un usuario a los diferentes sitios web, esta documento, rescata las características del nuevo formato Web, entre ellos blog y otros sitios con feedback, lo que ha marcado un quiebre en el antes y el ahora de los sitios web.
indice ¬ Apple ¬ Diseño Emergente ¬ CssElite ¬ FontCube ¬ El Mercurio On Line ¬ EntelPcs ¬ Fender ¬ RollingStone
WWW.APPLE.COM
Diseño del Sitio_ El diseño de este sitio hace honor a la simpleza de su linea corporativa, haciendola atractiva, y tentadora de recorrer. Estructuralmente cuenta con 3 columnas una central para la informacion, catalogo, etc, y dos laterales que son los menús de navegación, aparte del que esta en la parte superior que es fijo. Ademas la información que es entregada esta apoyada en su totalidad por la gráfica, haciendo que sea mas legible por su simpleza y claridad en la entrega del mensaje. Contrastes_
Las tonalidad van sobre un blanco, el cual Apple lo ocupa como color institucional, por lo que aporta a la gráfica sin necesitar bloques neutros, sobre este blanco, va casi siempre el gris, otro tono corporativo, junto tienen un contraste muy legible, como se inscribe el gris en las botoneras y etiquetas, lo hace mucho muy elegante y a la ver comprensible. Rótulos_
En esta parte creo que le falto desarrollo al sitio, ya que no hay algo que rotule el segmento en el que se encuentra, salvo la barra de navegación superior que deja un botón presionado, para poder diferenciar la variedad de items, lo que lo hace un poco confuso cuando se esta leyendo al medio del sitio web.
Navegaci贸n_
La navegaci贸n por el sitio es muy asequible, ya que esta muy bien enlazado un tema con el otro, solo que le falta rotulas con mas potencia cada sector. La estructura es bien simple, 3 columnas, lo que lo hace mucho mas navegable, en cuanto a usabilidad de contenido se trata, ya que Apple tiene varias aristas, cada cual tocada de manera completa, y bastante audiovisual, de modo hacer sentir al usuario mas en un amigo del sitio.
Contenido_
Apple abarca varios aspectos de la tecnolog铆a, siendo el sitio fundamental en la claridad con que la empresa quiere entregar la informacion referente a todos sus productos, y noticias de actualidad tecnol贸gica y nuevos proyectos.
WWW.DISENOEMERGENTE.CL
Rótulos_
Los rótulos explican en 1 o 2 palabras verazmente de que se trata la sección. Además de ser limpios y de buena lecturabilidad. Navegación_
En este sitio se cuenta con 2 vistas una como usuario visitante, en la cual obviamente no se puede acceder a todas las secciones ( tales como Panel de usuario y foros), la otra es como usuario logeado en la cual se tiene acceso a todas las secciones con excepción de Administración del sitio. Barra de navegación_
El menú de navegación esta bien constituido y rotulado, es 100% funcional y apoya a la estética del sitio separando el header de los demás contenidos. Tanto el menú como el header están siempre presentes lo que permite una navegación más rápida y fluida ya que se tiene acceso a todas las secciones en todo momento. Últimos proyectos agregados_ Permite el acceso a los proyectos a través de Thumball´s. esto ayuda a una pre-selección de a lo que se desea acceder. Links y Publicidad_ nados.
Promociona o deriva a sitios de contenidos relacio-
Noticias_
Se entrega una pequeña reseña sobre las noticias publicadas. La cual deriva a un artículo en el cual se profundiza y envía al sitio original. También da la posibilidad de agregar comentarios lo cual da otra instancia de interactividad con el usuario. Buscar proyectos_ Es la sección más importante del sitio. Aquí es donde los usuarios aprueban, comentas e influyen sobre el desarrollo y resultado de los proyectos. Posee un buscador con diferentes filtros de información (como disciplinas, fecha, usuario, etc.) lo que ayuda a facilitar la búsqueda de gran manera. Los trabajos son publicados a través de un thumball con especificaciones como: tipo de trabajo, usuario, nombre, visitas y comentarios. Diseño
_El sitio cuenta con una paleta de colores formada por: negro, rojo y naranjo sobre el blanco de fondo, sin embargo es matizada por los colores de thumb, links e imágenes lo que la hace en algunas ocasiones verse algo saturada pero no interrumpe la lecturabilidad del sitio. Definitivamente el posee una lineatura visual, ya que el home y las diferentes secciones comparten varios códigos cromáticos y estructurales.
WWW.CSSELITE.COM
Diseño del Sitio_
El diseño gráfico del sitio ayuda a la navegación por una razón de contraste del fondo ya que lo que predomina es el menú fotográfico, de modo tal seleccionar la imagen que mas te intereso a simple vista, ya que están en thumb, y cada imagen esta enlazada a la pagina original. Los sponsors le quitan un poco enfoque a la galería, ya que “compiten” un poco con la galería y le quitan prioridad a primera vista. Otro punto importante es el hecho de que la gráfica juega un papel fundamental con la barra de navegación, como esta en el header, tiene que ser una gráfica que se entienda con la barra, ya que esta tiene que ser clara, para una buena usabilidad del usuario. Al ser un blog, las paginas interiores, son completamente coherentes ya que se mantiene todo y solo cambia el espacio del post, por lo que lo hace una. El diseño de la estructura es muy comodo como es un blog de dos columnas se hace mas comodo, porque no se llena la pagina de diferentes contenidos, por lo que uno no recibe un bombardeo, lo que la hace mas nitida en vista panoramica. Contrastes_
Claramente al ser una pagina con un background oscuro le viene bien las tipografías y caracteres claros, lo que hace muy bien este sitio, dejando la información muy legible, los separadores de post también son claros y también quedan muy entendibles. Otro contraste que queda muy bien, es el del background con las imágenes de las diferentes galerías, ya que el gris oscuro es muy neutral para una cantidad importante de elementos coloridos. En cuanto a las tipografías empleadas, conviven bastante bien con el background y los diferentes espacios que ocupan en el sitio, están bastantes definidas, pese a que son tipos delgadas y de palo seco, son muy legibles, ya que el espacio en el que están inscritas, aportan ya sea con un contraste, una textura, un buen diferenciador, todo esto para una excelente navegación.
Rótulos_
Los rótulos de las paginas al ser blog, se pierden un poco, ya que todo el esquema del sitio se mantiene, costando un poco diferenciar cada segmento de la pagina. Algunas de las paginas interiores, son reconocidas solo por el hecho de que dice el rotulo en la parte superior, pero este es esta muy cerca de el seleccionador numérico de paginas, y para empeorar las cosas, entre medio de estos dos se encuentra un espacio publicitario que obviamente compro google, lo que en algunos cosas molesta cuando se ejecuta una operación rápida que sin querer se pasa a llevar estos enlaces haciendo que uno pierda el tiempo. Navegación_
La navegación es muy clara y precisa, como no hay mucho donde adentrarse en lo que a info se refiere, es fácil y entendible la interfaz, ya que tiene un menú bastante reducido, lo mas extenso es el sidebar, que dentro de las categorías se extiende un poco mas. Como es un blog, se repite para la comodidad del usuario el seleccionador de paginas numéricos (en la parte superior e inferior de las galerías) y el subscriptor RSS, pero como no hay mucha información textual, es difícil encontrar enlaces temáticos que interconecten el sitio. Contenido_
Claramente el contenido del sitio es claro y muy cómodo, definitivamente se encuentra lo que se busca, tiene un search bastante bueno, que ubica la info deseada a través de todos los post, y la información y barras de navegación se repiten en las diferentes paginas, por lo que se hace muy fluido el transito por el sitio. En este sitio se puede encontrar gran variedad de galerias de estructuras web con estilos CSS, y ademas Resources para trabajar este lenguaje, y otro lenguajes web, lo que lo hace bastante completo de modo no tener que ir visitando otras paginas.
WWW.FONTCUBES.COM
Rótulos_
Los rótulos explican en 1 palabra verazmente de que se trata la sección. Además de ser limpios y de buena lecturabilidad. Navegación_ En este sitio se tiene acceso a todas las secciones con excepción de Administración del sitio. Barra de navegación_
El menú de navegación esta bien constituido y rotulado, es 100% funcional y apoya a la estética del sitio separando el header de los demás contenidos. Tanto el menú como el header están siempre presentes lo que permite una navegación más rápida y fluida ya que se tiene acceso a todas las secciones en todo momento. Buscador de Fuentes_
Posee un browser que busca fuentes a través de palabras clave y otro estático que organiza las fuentes por orden alfabético. Últimas Fuentes_
Entrega información en imagen y escrita sobre las ultimas fuentes agregadas al sitio. Especifica autor, descargas, puntuación, fecha, familias, plataforma de la fuente. Estadísticas_
Se muestra un control completo sobre las fuentes que se exponen en el sitio. Noticias_
Se entrega una pequeña reseña sobre las noticias publicadas. La cual deriva a un artículo en el cual se profundiza y envía al sitio original.
Fonts_
Se tiene acceso a todas las fuentes que posee el sitio. Sus estadísticas y descripciones. Dingbats_
Sección que cuenta con las fuentes no tipográficas del sitio, con sus estadísticas y descripciones Popular_ sitio.
Sección con un ranking de las fuentes de mas descargadas del
Newest_
Noticias relacionadas con el sitio, se muestran a modo de publicaciones con pequeñas reseñas. Lo que acerca mas al usuario con la totalidad de la información. Designers_
Se reconoce el trabajo de los Tipógrafos que exponen sus trabajos en el sitio. Y se deriva a sus respectivas paginas. Contact_
Sección de contacto con el administrados del sitio. Mediante un formulario Php. Diseño_
El sitio cuenta con una paleta de colores formada por: negro y magenta sobre el blanco de fondo, con una estética minimalista y precisa, esto ayuda a potenciar las tipografías y lograr que el usuario encuentre lo que necesita en menor tiempo posible. Definitivamente el posee una lineatura visual, ya que el home y las diferentes secciones comparten varios códigos cromáticos y estructurales.
WWW.EMOL.COM
Diseño del Sitio_
El diseño estructural del sitio, al ser un diario, es muy complejo, debido a la cantidad de información, segmentos y demás secciones con los que cuenta un periódico, a esto hay que sumarle que al sitio web no se le pone día por lo que los segmentos semanales, tiene que estar presentes todos, lo que al usuario le puede resulta confuso ver tanta info. Por lo que primero se ve es la información del día, lo que en la versión impresa es la portada, las noticias mas relevantes, que en este caso si son las mas relevantes, por la linea editorial del periódico. Lo que predomina en un sitio web de esta envergadura es la entrega de la información por lo que la gráfica se ve un poco sobrepasada por la completa usabilidad de modo tal el usuario recibe esa noticia hoy, que mañana ya habrá otra. En simples palabras la estructura de la pagina se compone en teoría de un header, una barra de navegación, cuatro columnas horizontales, y a estas se van atravesando otras columnas, por lo que se puede decir que a medida que se va bajando se van encontrando diferentes estructuras, dependiendo del tipo de información que se de, ademas en la portada solo vemos los titulares de las diferentes noticias o secciones. Las estructuras una ves estando en la noticia solo cambia una columna, haciendo de esto mas legible, y mucho mas enfocado a la noticia, se mantienen los cuerpos y estilos tipográficos y los diferentes enlaces y menús se adaptan y se resumen, creando una jerarquía visual netamente orientada a la noticia tal. Un gran apoyo a la noticia, es el buscador automático de noticias similares o relevantes para aquella noticia.
Contrastes_
Los contrastes son bien marcados debido a que las tipografías ocupan tonalidades bastantes oscuras, y los background son en algunos casos nulos o con tonalidades muy claras, bordeando los cían y uno que otro tono mas amagentado, dando claro apoyo a la legibilidad de sus tipos que en este caso son lo fundamental de un periódico, la entrega de info.
Rótulos_
El rotulado es un aspecto bien trabajo en este sitio, no de un modo tan metafórico, sino bien etiquetado y resaltando y repitiendo esa etiqueta a través de la navegación de la sección. Las secciones, segmentos y suplementos están muy bien rotulados, dando un color a todo el cuerpo, estando la marca de cada sección, y otorgando una linea gráfica, que la identifica, esto hace sentir al usuario realmente en ese segmento, de una forma muy clara y dirigida a ese publico. Navegación_
Habiendo tantas entradas a diversos temas, secciones u otro segmentos del diario, emol.com trata de orientar al usuario a la columna central a la información principal del día, en la parte superior a esta, el menú de navegación por las secciones del diario, dejando el borde izquierdo fijo al igual que la barra superior, pero esta tiene mas relación con el tema institucional de El Mercurio, como lo son los diferentes diarios los que son manejado por ellos es el caso de LUN, La Segunda, entre otros, ademas de subscripciones, y otro servicios que entrega la empresa. Contenido_
Claramente el contenido es abarca mucha info , al ser un diario tan completo como lo es El mercurio. Abarcando toda lo buscado, algunos como actualidad ,servicios clasificados, y otro tipo de información pueda otorgar un diario, ademas, complementa los artículos de la versión impresa con archivos de audio y video, que profundizan y entregan aportes a los contenidos. El contenido esta muy interrelacionado entre si cada noticia, ya que en una de sus columna a la derecha del contenido, el sitio propone temas relacionados, de modo dejar al usuario mas informado.
WWW.ENTELPCS.CL
Diseño del Sitio_
Su gráfica es bastante coherente con la linea gráfica de Entel, mucho tono cian sobre blancos, pero es coherente, en su portada como en sus paginas interiores. Es una gráfica muy limpia, permite una lectura muy legible, con buenas tipos, la información es muy precisa, no ensucia la gráfica el bombardeo de info. y hace que esto lo haga muy fácil de usar.
Contrastes_
Los tonos de la identidad corporativo de Entel son muy bien tratados en esta pagina, siendo colores muy buenos en lo que ha contraste se refiere, ya que la mayoría del tiempo se esta en presencia de los fondos blancos, pero bien ocupados, no hay espacio perdidos. Las tipografías oscuras se ven muy bien en este entorno haciendo muy clara la comprensión del mensaje a entregar en cada sección.
Rótulos_
Si bien no esta rotulada con algún tono, si lo esta con información, ya que los menús que aquí se manejan son exclusivas para el tema, o sea, que cada tema tiene su propio, menú, navegador de profundidad de tema ( Personas / Medios de Recarga / Recarga Familiar por ej.), el nombre del item o sección tiene una tipografía bastante legible y un buen cuerpo, no se diferencia un h1 de un item del otro, al menos tipográficamente y de tamaño, mantiene el estilo. En algunos casos su rotulación esta ligada a un cierto tipo de imagen, que ayuda a comprender de una forma “metafórica” el tema de la sección o de que trata.
Navegación_
La navegación es bastante cómoda, tiene muy buena barra de navegación, que permite desplazarse de una lado a otro de la pagina sin tener que volver a un home o algo así. Tiene las opciones precisas para cada segmento del sitio, haciendo de esto algo mucho mas estudiado, cada necesidad de los clientes esta desarrollada. El footer del sitio es variable, según la sección en donde se encuentre en el momento ayudando a no parar y devolverse al header para seguir con la búsqueda.
Contenido_
El contenido del sitio web es bastante completo, por ser una compañía telefónica, que brinda una cantidad importantes de servicios, tenia que estar bien estructurada para entregarle toda la información al usuario, cumpliendo de manera bien completa, ya que es prácticamente una sucursal, tienes tu acceso personal, para ver estados de tu cuenta, entre otras opciones personalizadas, también cuenta con catálogos de modelos y planes, lo que los hace una sucursal virtual.
WWW.FENDER.COM
Diseño del Sitio_
El diseño del sitio es bastante atractivo, mantiene esa esencia rockera, desordenada, pero bastante legible. un tanto saturado de imágenes, pero lo amerita el tema, ya que hay muchos modelos de instrumentos y bandas, lo que lo hace muy funcional a la hora de buscar información. La gráfica convive muy bien y hace bastante entendible los diferentes espacios, y secciones de la pagina. Gráfica con una lineatura bastante coherente con sus paginas interiores y con los diversos items que aqui convergen.
Contrastes_
Los contrastes si no existiese un contenedor blanco, seria un poco dificultoso la lectura, ya que las tonalidad que maneja la gráfica del sitio son bastante oscuros, por lo que se hace necesario algún bloque neutro y demasiado contrario en tonalidad.
Rótulos_
Los rótulos del sitio se componen del nombre del item, con una tipografía, que mantiene el estilo a través de casi todos los items, algunos tienen tipografía propia del segmento, ademas de una imagen que hace alusión al tema de la sección o alguna ilustración de carácter mas metafórico.
Navegación_
La navegación y sus barras son bastante cómodas ya que se despliegan bastante bien por todo el sitio, haciendolo muy navegable, cuenta también con un sidebar izquierdo, que despliega un submenu por categoría, lo que lo hace rotular el item con la ayuda del contenido especifico del sector.
Contenido_
El árbol de contenido de este sitio es bastante completo, en el sentido, histórico, de actualidad y como shopping, cumpliendo con muchas de las necesidades que tiene un cliente de este tipo de producto. Los contenidos del sitio web de Fender es bastante asequibles y amigable, en lo que a densidad de información se refiere, ya que la marca tiene bastante trayectoria y eso lo deja claro a través del sitio.
WWW.ROLLINGSTONE.CL
Diseño del Sitio_
La gráfica de la web de la RollingStone no es ta tan logrado ya que el background del body es un tono, y es necesario otro color para la caja contenedora, ademas de darle el estilo de la revista como tal, su estructura CSS da para llenarla demasiado, dejando muy pocos márgenes entre las diferentes temática a abordar, dejando al usuario bombardeado por un montón de información, ni siquiera tiene un orden de navegación, ya que esta todo tan revuelto, que el usuario va a tender a clickear lo mas grande que vea. Claramente en la portada tocaran los temas mas relevantes, pero aun con esto no se entiende muy bien la estructura, solo los títulos tienen el enlace a la información completa, salvo la info principal que tiene en enlace en la imagen, eso tampoco esta muy claro. Contrastes_
Los contrastes son buenos, ya que ocuparon un blanco puro en el background del Contenedor, las tipografías, los rótulos, imágenes, y todo le queda bien a este fondo, lo que hace muy legible la información que se esta leyendo. Los contrastes en la barra de navegación son muy buenos, no así su tipografía ni su tamaño, son tan pequeñas que no tienen jerarquía ni una posición visual clara, es mas a primera vista solo se ve porque esta situado abajo del logo de la revista, y también en el footer de la pagina, de hecho abajo es mas claro ya que no tiene un caja que lo contenga por ende se lee mejor. Rótulos_
Los rótulos de las paginas son muy poco claros, ya que solo es una caja de color que contiene el nombre de la sección, por lo que si esta leyendo mas abajo, no sabes en que sección estas, por lo que el usuario puede sentirse “perdido”, solo en algunos esta mas comprensible el rotulo, como lo es el caso de la sección “Fotos & más” que acá se entiende un poco mas el rotulo, pero no es por originalidad, sino por su repetición. Aunque la versión estadounidense tiene el tema de los rótulos un poco mas acabado, pero aun así le falta, pero al menos tiene el tema de los cuerpos tipográficos de las secciones mas jerarquizadas, de modo que se entiende en que lugar se esta.
Navegación_
La navegación y las barras de navegación son muy pobres en lo que a usabilidad se refieren, ya que la potencia o ubicación visual que estas proponen son bajas, la barra de navegación superior, abajo del logo, lo primero, su tipografía, un cuerpo débil, pequeño, que no nos da la sensación de estar pasando a otro sector de la pagina, al menos la versión estadounidense de la revista tiene el tema de la barra de navegación mas completa, en el sentido que a través de la barra se puede navegar en la pagina, pudiendo acceder a sectores, no siendo necesario pasar por subtemas para entrar a este. La repetición del footer de la barra, completamente necesario en un sitio que se pretenda dar un material informativo o que básicamente quiera otorgar una usabilidad mas completa al usuario de modo este pretenda investigar y adentrarse en el sitio. La barra lateral, en este caso derecho, solo le da espacio a los temas menos relevantes, como el ranking, publicidad, información de contacto con la revista, y lo que es importante y no se le da la importancia necesaria es el acceso a la subscripción de los lectores. El mejor aspecto en cuanto a la navegación se trate es el motor de búsqueda con el que cuenta la pagina, siendo este muy abierto en las opciones con que se dispongan para una resultado de búsqueda mas exacto. Contenido_
Que se puede decir, es una revista, como tal no va a “tirar toda la carne a la parrilla”, por lo que dejara algo para la obtención del la versión impresa, no así como un periódico. Por lo que si se encontró lo que se busco, si, pero de forma incompleta, aunque al ser un medio navegable como el internet, los enlaces con sitios externos a la revista son importantísimo y complementan muy bien la revista. Pero si muestra al menos todos los item de la revista, y lo que es mas importante ocupa un motor de blog, por lo que tiene la opción de comentarios, Por lo que cada noticia funciona como un post, lo que lo hace mucho mas rápido en su edición.