09. Planificación de un sitio web

<< 08. Entorno de trabajo (V)                         10. El guión gráfico (mapa del sitio) >>

Planificar

Una vez visto cómo Dreamweaver crea el código web automáticamente y hemos echado un vistazo al entorno de trabajo, empezamos a planificar la web. Antes que nada hay que tener una idea de lo que queremos hacer. Para ello empezamos con un lápiz y un papel en blanco y desarrollamos la idea, definiendo las necesidades reales y generando un mapa del sitio.

La planificación del diseño de un sitio web, al igual que en el resto de procesos de diseño, resulta esencial. Reducirá considerablemente el tiempo utilizado, hará más fácil que todas las páginas tengan un aspecto uniforme y su uso será más sencillo e intuitivo.

Los pasos a seguir son:
1./ Definir el sitio.
2./ Crear la estructura con un mapa del sitio.
3./ Generar los contenidos.
4./ Diseñar el sitio.
5./ Desarrollar el sitio.
6./ Publicarlo y promocionarlo.

Es prioritario tener en cuenta tres puntos de vital importancia:

El contenido, la audiencia y los recursos.

Contenido

Plantearse qué queremos comunicar. Mientras más clara sea la idea del mensaje más directa será. Resulta útil por lo tanto resumir en una frase el contenido de la web.
Ejem. “mi Web con currículum, trabajos y prácticas del curso“.

Llegados a este punto tendremos que responder a varias preguntas (que también le formularíamos a un potencial cliente para crearle una web):

-¿Para quién? Es una página personal, por lo tanto ha de reflejar mi perfil. (Si fuera un potencial cliente obtendríamos su perfil).

-¿Para qué se necesita el sitio? Una web de autopromoción. El fin es el de encontrar trabajo como diseñador gráfico. Nos damos a conocer en línea ofreciendo una imagen más profesional y consolidada de nosotros como profesionales (también pueden ser sitios informativos, de ventas, educativos, de entretenimiento, de promoción, etc., por lo que tenemos que saber cuáles son las necesidades reales del sitio, haciendo un trabajo exhaustivo).

-¿Qué vamos a hacer? Una web que incluya nuestro currículum, ejemplos de nuestros trabajos y pruebas de algunas de las prácticas del curso.

Audiencia

Tener claro a quién va dirigido el contenido. Hay que distinguir entre el cliente y el usuario final, que es para quien tendremos que diseñar el sitio.
En nuestro caso a los departamentos de recursos humanos y a mi para que me sirva de referencia y repaso de lo que he aprendido. Por lo tanto buscaremos el perfil del usuario final:

Edad: Más o menos entre 25-55 años.

Nivel de educación: Medio – alto.

Nivel social: Medio – alto.

Conocimiento de Internet: Medio alto aprox. el 70% y bajo aprox. el 30%.

Vamos a dirigirnos a alguien que lea nuestro currículum, por lo que ha de ser una web fácil, intuitiva y que nos lleve directamente a la información.

Recursos

Un diseñador debe trabajar adaptándose a un presupuesto. Esto hace que el tiempo dedicado al desarrollo del sitio por los diseñadores y programadores, los materiales (fotos, logos, tratamientos de imagen, Flash, etc.) y el mantenimiento varíe considerablemente.

Por ejemplo: Se puede hacer un sitio de grandes dimensiones creado sobre una base de datos (Joomla, WordPress, Blogger ) y utilizando plantillas preestablecidas, simplificando de este modo su mantenimiento. O bien crear un reducido número de páginas basadas en un entorno gráfico llamativo, siendo necesaria la actualización manual de su contenido (Dreamweaver, Flash, Photoshop, Fireworks), y es probable que el presupuesto en ambos casos sea parecido.

Los presupuestos los aplicaremos en función del tiempo que dediquemos al proyecto y también según los márgenes en los plazos de entrega.

En nuestro caso somos el cliente y el proveedor, con lo que decidiremos el tiempo que le dedicaremos a la web.

Analizamos, optimizamos y desarrollamos nuestros recursos para la web de auto-promoción:

Textos: Nuestra carta de presentación y nuestro currículum.

Imágenes: Nuestros trabajos, las prácticas del curso y un logo que crearemos.

Multimedia: Animaciones (Flash), Videos, sonidos…

Tiempo: Queremos un sitio limpio y claro, con un aspecto profesional, para poder hacerlo durante el curso, aunque ya sabemos que después tendremos que volver sobre él.

Será un sitio que tendremos que actualizar según vayamos evolucionando profesionalmente.

Navegar

Para empezar a trabajar es muy importante estar al día en Internet (navegar y navegar) por lo que tendremos que ver muchos sitios para inspirarnos. Buscaremos recursos e ideas en la red. Empezaremos examinando páginas de autopromoción de diseñadores gráficos en la red, también visitaremos coolhomepages.com y nos registraremos para crear una colección de favoritos.

papel y web

papel y web

Es recomendable visitar las siguientes páginas que encontramos en … MI_Sitio / 01_Intro / Direcciones.html
http://cssmania.com/http://www.unmatchedstyle.com/ – http://bestwebgallery.com/ –FWA.com http://www.deviantart.com/ – http://www.flickr.com/ – http://sxc.hu/ – http://www.jupiterimages.com/ – http://lalogotheque.com/ – http://www.brandsoftheworld.com/

Sugerencias a tener en cuenta para diseñar una web.

El Plan de la web: Antes de empezar considera el diseño, estructura de la página y cómo los usuarios se mueven de una página a otra a través de las barras de navegación. A continuación esbozar el sitio en un papel.

Conocer a la audiencia: Conocer a la audiencia ayuda a establecer el tono de su contenido y diseño, y permite identificar lo que los visitantes buscan en su sitio. No olvidar a nuestro usuario.

Navegación coherente: Dado que los textos se leen de izquierda a derecha y de arriba a abajo, la parte superior izquierda del sitio es el primer lugar que los visitantes verán. Coloca los botones de navegación aquí, jerarquiza con las opciones de fuente y color, para facilitar la lectura y el movimiento fluido entre las páginas.

Usabilidad: No olvidar a nuestro usuario final. Los sitios tienen que ser intuitivos y no hacer pensar al usuario por donde tiene que seguir, al contrario debe invitarle a navegar. Los botones claros, el texto jerarquizado, indicándole la ruta. Nunca se debe preguntar ¿por dónde sigo?, ya que le perderemos y siempre tendrá otra alternativa en la web que ofrezca lo mismo que nosotros.

Elige un esquema de colores y tipografías: No más de tres a cinco colores en el sitio para evitar distraer a los visitantes con demasiada estimulación visual. Si estamos diseñando el sitio alrededor de una imagen, intenta subirla a una herramienta de paleta de colores (como DeGraeve.com o kuler.com) y mira las sugerencias de colores complementarios. Debes también mantenerte al día de las tendencias tipográficas y de color.

Probar en diferentes navegadores: La página web puede aparecer de manera diferente cuando se ve en los distintos navegadores de Internet, así que nos aseguraremos viendo el sitio en los más importantes – Firefox, Internet Explorer y Google Chrome. Ajustar las resoluciones (1024 x 768 px).

Hacer Tests: Una vez creado o rediseñado un sitio web, preguntar a amigos y familiares. Pueden encontrar cosas que faltan o señalar las áreas de confusión.

Crear las carpetas del curso

C: … / Cursos / Curso_Dreamweaver /  Curso_Final. Contiene los archivos finalizados que vamos a necesitar para completar las prácticas de curso.

C: … / Cursos / Curso_Dreamweaver /  Mi_Sitio. Es donde realizaremos las prácticas.

Si es necesario crea las carpetas que necesites. Es muy importante mantener la estructura de carpetas que recomendamos en estos apuntes, para seguir el curso sin perdidas de tiempo adicionales.

Envia un comentario

Debes ser Conectado Para publicar un comentario.