domingo, 28 de diciembre de 2008

Principios de diseño básicos para la creación de sitios web.

Hoy en día las páginas web se han convertido en una necesidad para cualquier empresa o persona que desee darse a conocer o simplemente quiera tener presencia en la red, esto se debe al bajo costo en relación a otros medios y el alcance que tiene, puesto que el fácil acceso a Internet, la unión de diversos medios (multimedia) y la requerida interacción del usuario hacen que el proceso de comunicación sea mucho más concreto.

Como todo proceso de creación es necesario llevar a cabo ciertos pasos o una metodología para llegar a un resultado que verdaderamente tenga frutos. Generalmente se cree que las páginas web son resultado del trabajo de una sola persona, pero en realidad es o debe ser el trabajo de distintos grupos: investigadores, escritores, formadores, diseñadores y programadores.

La primera medida que se debe tomar es la fijación de objetivos a mediano y largo plazo, ya que sin una idea clara de los propósitos el proyecto no llegara a ninguna parte y se alejara de las intenciones iniciales, una vez identificados los objetivos es necesario establecer una estrategia de trabajó o ruta crítica, se debe determinar cuál será el tiempo estimado para cada actividad. Una vez atendidas las posibles rutas en la estrategia comienza la fase de desarrollo que implica:

Definición del sitio.

En esta etapa se definen las metas y se recaba información para justificar el presupuesto y los recursos que se requerirán, es necesario saber cuál será el público potencial, establecer quien dirigirá el proyecto y quienes serán los encargados de cada área.

La creación de páginas web es una actividad sujeta a los continuos cambios que se producen en Internet. Actualmente las páginas Web profesionales deben ser accesibles y estar bien posicionadas, estas dos premisas hacen que algunas de los diseños que se utilizaban hace algunos años hayan quedado completamente obsoletas y sea necesario implementar nuevas tecnologías, es por eso que se debe tener presente para que navegadores y sistemas operativos se construirá el sitio, el tipo de conexión a internet necesario para cargar la página, que tipo de lenguaje de programación se implementara, como contactaría el usuario a la empresa, que tipo de contenido audiovisual será útil además del tipo de host y los servicios posteriores a la producción.

Arquitectura de la información.

En este momento se debe establecer el contenido de la página para ello es necesario clasificar los elementos y hacerse prototipos de pequeñas partes de la pagina para comprobar su funcionamiento con dos finalidades, una que es probar la navegación y la otra empezar a desarrollar la interfaz grafica.

Un elemento importante en la mayoría de páginas web es desarrollar un mapa de navegación para evitar repetir links innecesarios y no hacer una telaraña revuelta que termine por perder al usuario. Anteriormente mencioné la necesidad de ver cuál es la tecnología necesaria y cuál sería el lenguaje de programación que se adecua a la propuesta del diseño de interfaz. Nos encontramos en la parte experimental, pues teniendo cierta estructura del contenido se puede dar la elección, siempre y cuando se adecue a las necesidades y disposición del propietario de la página ya que la decisión final no es del diseñador.

Diseño.

En esta etapa es donde se comienza a ver la interfaz acercándose a lo que va a ser el producto terminado, ya escogido el tipo de mapa de navegación se determina la retícula (grid) que es fundamental porque en algunos casos determina el camino por la que van seguir las demás páginas, se establece el orden de lectura, la tipografía, el color, contrastes y elementos convencionales del diseño que en conjunto proveen de identidad a la página, aquí se tiene que editar el contenido y tomar en cuenta que el diseño requiere de la programación puesto que estas dos partes en conjunto hacen más funcional la interfaz. El contenido de esta etapa debe seguir un esquema similar:

· Texto editado.

· Especificación sobre el diseño del sitio con los elementos gráficos de cada tipo de página.

· Especificar la composición en detalle del contenido por lo menos de las páginas principales (tipografía, color, etc.).

· Diseño de la interfaz y plantilla maestra acabada.

· Proporcionar las ilustraciones y material fotográfico requerido.

· Establecer los componentes lógicos y funcionales tales como aplicaciones Java, formularios y motores de búsqueda dependiendo de las necesidades.

Construcción.

Se podría decir que ya casi está todo concluido pero sería precipitado, en cierto grado parece que el proceso es repetitivo, sin embargo, a la llegada de esta etapa ya se debieron minimizaran los posibles problemas.

Es aquí donde se trabajara en un plano de conjunto para comprobar por medio de un testeo la estructura final evitando así redundancias y gastos de energía innecesarios que podrían presentarse después de su publicación, como pueden ser enlaces rotos, imágenes que no cargan, formularios sin servicio, etc.

Marketing.

Queda claro que una página web por sí sola no es un medio omnipresente y que no todo mundo sabe encontrarla, para lo que es necesario desarrollar una campaña que de alguna manera complemente al sitio o lo dé a conocer por medio de la dirección url, con esto hablamos de folletería, anuncios de TV o radio, anuncios en zonas públicas, envases o embalajes, etc.

Evaluación.

En la actualidad hay servicios de host que incluyen software adicional permitiendo así medir la cantidad de visitantes en un periodo de tiempo incluso determinar la zona geográfica más activa que visita tu sitio, lo cual ayuda a saber si la página web cumple o no con las expectativas. Dentro de la red encontramos graficas y parámetros que nos ayudan a saber cuál es el navegador más usado o cuáles son las aplicaciones web del momento, datos que son significativos y que en cierto grado llegan determinar el desempeño de la página.

Propuesta y justificación.

Propuesta de pagina principal "HOME"

Como antecedente se encuentran los colores del logotipo que automáticamente generan un contraste cálido-frio (para evitar problemas con los colores de la marca no mencionare el código RGB) y la fuente que es Eurostyle LTS, generando una lectura de izquierda a derecha coloque 2 gráficos que considero deben ser animados para completar el movimiento, aparecerán una serie de líneas que se desplazaran guiando la lectura, llegando a un mapa que se completara de arriba hacia abajo punto por punto reforzando la idea de que es una empresa internacional, en la parte superior izquierda aparecerá el logotipo sobre una sombra exterior con la finalidad de enviar el logotipo a primer plano, en el otro extremo se encuentra el slogan a 17pts. Para completar la cabeza introduje una botonera en la parte inferior que presenta una transparencia sobre una sombra exterior para generar el mismo efecto que el logotipo con la tipografía a 12 pts. aparecerá de izquierda a derecha, una vez terminada la animación quedara todo estático, los elementos mencionados se encontraran sobre un rectángulo con un degradado sobre una sombra exterior del mismo tamaño, este tipo de sombras exteriores genera la idea de una superposición de planos.

En las 3 columnas de la parte inferior se integraran iframes y un scroll para mostrar el contenido, la fuente se encuentran a 10 y 14 pts. lo cual no impide la legibilidad, realice pruebas con otros tamaños pero perdía el orden jerárquico que debía presentar el texto.

Mas adelante quiero que las páginas posteriores tengan otra retícula para así ocupar el espacio necesario para cada apartado y no delimitar la página con la estructura inicial.



viernes, 26 de diciembre de 2008

Proyección.

La empresa UNISEAL requiere de una página (como todo diseño corporativo) que mantenga una misma línea de diseño, se utilizaran los colores del logotipo en este caso rojo y azul manteniendo así un contraste cálido-frio. Es necesario realizar gráficos que refuercen la identidad que promueve la empresa, el carácter de modernidad y la intensión de internacionalizar sus productos y puntos de venta.

Se requiere de una página inicial que tenga dos opciones: ingles y español, el logotipo, algunos elementos distintivos que conforman el diseño propio de la página y los requerimientos para la visualización de la misma; por el tipo de empresa considero que no es necesario un intro, ya que muchas veces termina por fastidiar al usuario. La estructura de la página principal o home es de 800 x 600 pixeles estará dividida en dos partes, la primera y más importante (superior) será el banner o cabeza que contiene a su vez la botonera principal. En la segunda mitad se ubican 3 elementos que contendrán pequeños fragmentos de información, en el primero de estos se ubicaran los productos nuevos, en el segundo los certificados (ISO y demás), y en el tercero las noticias más importantes de la empresa; en la parte inferior de la pagina irán los legales.

Grids.

Esquema de pagina principal.

Competencia directa.


Planteamiento del problema.

Actualizar la página web de la empresa UNISEAL con la finalidad de reestructurar y unificar el contenido, aumentando el número de visitas y futuros clientes tanto a nivel nacional como internacional que podrán tener contacto de esta manera con la empresa, utilizando elementos básicos de diseño para su composición basándose en el criterio de una fácil navegación y legibilidad además de la reducción del tiempo de carga de la página.