HTML5 en proyectos reales

La palabra diseño gráfico en MSN Search

Como siempre Bill Gates desea estar en todos lugares, ahora con su nuevo MSN Search tratará de hacerle la obra a Google.

Al estar pendientes de como trabajará ese método de búsqueda trataremos de checar nuestros sitios para ver como los indexa.
Hasta ahora cuando busco Diseño Gráfico México he visto que tres de mis sitios (Foros en Línea, Vecindad Gráfica y AdanDesign) están en la primer página, eso suena bien.
msn 2

Si busco solo Diseño Gráfico encuentro a Foros en Línea y Vecindad Gráfica en la primer página.
msn 1

Read the rest of this entry »

Rediseñar con Calidad, usabilidad y estándar en la web

webRe.jpg

¿Cuantas veces quisiéramos que existiera una clase de ISO en cuanto a la calidad de los sitios web?

Eso mismo lo requerimos urgentemente en nuestro diseño gráfico, sea impreso, multimedia o web.

Aunque sería difícil crear recetas de un “buen” diseño por lo menos se crearían referencias de calidad para una buena práctica en nuestro medio y no solo crear o recrear los mismos errores.

En nuestra era existen clientes que ya se dan cuenta si un sitio tiene calidad o solo es un “template” bajado de algún sitio “todo gratis”. Por ese motivo estamos comprometidos éticamente a entregarle a cualquier cliente, aunque no sepa nada de diseño web y como obtenemos los recursos un trabajo de calidad, que demuestre su filosofía y su presencia en Internet en una forma única, que no sea del montón en cuanto a diseño web “express”.

Cuando se pide un re-diseño de páginas web tenemos que tomar en cuenta lo que ya está diseñado para ver si se puede rescatar algo o de plano recrear todo el sitio.

Un buen lugar para ver ejercicios de cómo se han cambiado algunos sitios en relación a la calidad de accesibilidad es Dracos – Accessibility, donde el autor nos muestra diferentes ejercicios de cómo mejorar en cuanto a una más rápida respuesta por parte de la página web.

Para comenzar a re-diseñar debemos tomar en cuenta los estándares que deberíamos saber y partiendo de ahí localizar en donde son necesarios e implementarlos correctamente.
Un buen sitio para ver lo que debemos tomar en cuenta es Max Design – A webstandards checklist

Como vemos el re-diseño de un sitio no nada más es cambiar colores e imágenes, envuelve todo un estudio de Usabilidad, Arquitectura del sitio y estándares web.
Así que cuando nos pidan un proyecto similar pensaremos en que tarde o temprano si existe un organismo en calidad como el ISO, podemos estar tranquilos, ya que nuestro diseño se apega a lo establecido en forma creativa.

Es el mismo lenguaje de representación entre diseño web y editorial?

webSurvey2.gif

En una conferencia existió una discusión entre un colega y su servidor, él me decía que el web está solo copiando los parámetros del diseño editorial y los lleva a sus páginas. Le contesté que eso no es posible, cada medio tiene su propio lenguaje. Si él ha visto que un catálogo impreso lo lleven tal como está a una página web, ese sería un error por parte del diseñador.

En primer lugar porque la información del documento impreso se debe sintetizar para un medio como la Web donde no se tiene el mismo tiempo para leer, otra es que en Internet se puede llegar por diferentes lugares a la información expuesta, no es lineal.

Las imágenes tiene que ser muy pequeñas para las personas que no tengan una conexión rápida a Internet y darles opciones de verlas más grandes, si el usuario así lo considera.

Otra es que se puede valer de métodos multimedia para sustituir grandes pasajes de texto, imagínense como una pequen”?? animación en Flash puede explicar algún tópico difícil de representar verbalmente.

El colega estaba tan enojado conmigo que solo dijo “para mí es una copia y con eso basta” además ni siquiera existen libros que te hagan ver qué es diseño web y sus parámetros.
Le contesté que esos parámetros se logran con la experiencia diaria y que van quedando como una regla que por supuesto en cualquier momento están por romperse.

Read the rest of this entry »

¿Estamos sobre utilizando el Diseño Retro?

retro

Últimamente hemos visto sitios con lo que se puede llamar “diseño retro”.
Algunos manejan muy bien ese “look”, pero otros verdaderamente solo copian un anuncio publicitario de antaño y lo pegan a su diseño.

En diferentes sitios el manejo del color también nos recuerda los autos de esa época, como los chevys de color pistache.

retro3
La tipografía es con la apariencia de haberse rotulado a mano y qué decir de los personajes, parecen sacados de los años 50s.

Tal vez veamos cada día más y más sitios de estos. Por lo pronto tenemos buenos ejemplos de ellos.

retro 4

En muchísimos blogs se están utilizando patrones que asemejan los textiles de esa época. Casi en todos los que visitamos a diario vemos el fondo de ellos con esos patrones.

Cuando se utiliza ese estilo con calidad y sentido común, obtenemos sitios que mezclan imágenes re-diseñadas con animaciones e interacciones de Flash en forma magistral.

En nuestros países también podemos retomar algo de nuestro pasado y hacer uno que otro experimento.
¿no creen?

En este sitio encontrarán gráfica del movimiento retro:. . . Retrolounge | bringing you the best of bygone eras . . .”?

Sitios Pirateados

pirated.jpg

Hace poco en una bitácora se estaba discutiendo que una persona copió el diseño de un blog a otro.
En realidad existen infinidad de “clones”, sobre todo porque en el caso de las bitácoras se utilizan plantillas. En las páginas web no es diferente. Existen ya múltiples sitios que manejan la misma plantilla bajada de Internet, hasta sitios completos en Flash ya están disponibles.

Es muy difícil ser único, sobre todo porque una de las formas de aprender a crear páginas web es tratar de ver el código de los demás para implementarlo en nuestro sitio.

Otra es que los scripts de CGI, PHP, JavaScript, etc. se vuelven de dominio público y casi todo mundo los utiliza.

Una forma de “copiar” es buscar el CSS, estudiar como hicieron tal o cual efecto e implementarlo en nuestros sitios. Para eso existen ciertas reglas éticas, que sería tratar de ver como lo hacen y al recrearlo en nuestros proyectos, por lo menos cambiarle algo, pero existen gentes sin escrúpulos que se dedican a copiar hasta el copyright de la página víctima.

En este sitio se muestran diferentes sitios que copian o han sido copiados Pirated Sites!! Aaarrgghh….

¿Cuantos de nosotros hemos hecho lo mismo?

Evolución de una revista en línea

digitalWeb.gif En nuestro medio Internet, unos cuantos meses significan grandes cambios en la tecnología y en los parámetros del lenguaje visual.
En este link se muestra como ha evolucionado una revista en línea, desde las páginas clásicas en donde utilizaban imágenes enormes, que tardaban siglos en llegar por medio de nuestro modem de 14000 kbps hasta la implementación de usabilidad, arquitectura del sitio, optimización, etc.

Sería bueno que todos los sitios tuvieran una historia gráfica de como fueron evolucionando en su presencia en línea.

En el inicio de los años 90′s nos acostumbramos a ver páginas con fondo gris “Netscape” que fué la evolución del primer navegador visual el MOSAIC. Ahora existen grandes competidores en el ambiente de navegadores, por supuesto que Internet Explorer es el número uno porque ya saben como trabaja Bill Gates para meternos a fuerza un programa en su sistema Windows.

Posteriormente llegaron los GIFS animados y los fondos de textura. En nuestra era lo que se ha vuelto un estandar es el diseño de un sitio en Flash, su alternativo en HTML o en su nueva encarnación XHTML y en un gran número sitios dinámicos por medio de ASP o PHP.

En fín, estamos viendo el inicio de otra evolución. Así que siempre seremos pioneros no importando cuando nos iniciemos en este mundo Web.
Digital Web Magazine – The Transformation of an Industry

Crear un Favicon facilmente

favicones.gif

Cada vez que visitamos un sitio y notamos un pequeño icono en la dirección del navegador o en la lista de favoritos, es lo que se llama FavIcon, existen infinidad de formas de crearlos, con diferente software, haciendo magia en Photoshop, en Graphic Converter, etc.

Pero en el sitio mencionado es tan facil como escoger una imagen de nuestro disco duro y seguir las instrucciones para ubicarlo dentro de nuestro sitio.
Chami.com FavIcon from Pics

Fuentes Comunes Mac y Windows

fontsWinMac.gif

Al crear un sitio web nos preguntamos qué fuentes trabajan en ambos lados de las plataformas?
En este sitio se puede ver un ejemplo de fuentes que funcionan en ambos mundos.
Como sabemos no todas las fuentes que tenemos en nuestra biblioteca funcionarán en Internet, por ese motivo se tienen que escoger las que son comunes en nuestro mundo de la computación.
Así nos podemos librar de la Times que se lee muy bien en un impreso, pero se visualiza terrible en un monitor.
Common
fonts to all versions of Windows & Mac equivalents