Posteado por: Pablo | 4 mayo 2007

9 Pasos para afrontar el Diseño Web

A la hora de comenzar un trabajo, no sólo de diseño gráfico, es de gran importancia tener un plan. Un plan nos ahorra mucho tiempo, ya que sabemos a dónde vamos, qué objetivos hay que cumplir, y nos permite sobre todo organizarnos. Es muy fácil perderse en detalles sin importancia y nimiedades sin un plan. En el diseño encierra lo que los diseñadores llamamos “el proceso de diseño”, pero abarca también aspectos como el briefing, planteamiento de objetivos y fechas de entrega.Cuando uno planea para diseñar en CSS, la traducción de un diseño hecho en Photoshop a códigos HTML y CSS se hace mil veces más fácil.

Este proceso va así:

Paso 1. Definir qué layout va a tener el sitio. A esto hacerlo en papel, más o menos ubicando en un dibujo muy simple secciones del sitio. Es necesaria la información de lo que el cliente necesita. Comenzamos definiendo lo más simple: 1 columna, 2 columnas, o 3 columnas.

Paso 2. Realizar el draft en Photoshop. Esto permite hacer cambios rápidos moviendo las cosas. SIEMPRE usando líneas guías ya que más adelante, junto a

la Herramienta Regla serán de suma importancia para establecer las medidas en código.

Paso 3. Una vez terminado el draft o drafts, debemos pasar el diseño a código. Para esto agarramos una hoja y un lapiz. Cada sección irá en una caja o div, así que escribo los nombres de todas esas secciones, y escribo los números a usar. Ancho de la caja prinipal, márgenes, divisiones, tipo de letra, etc. Todo en lenguaje “humano”.

Paso 4. Ahora es tiempo de empezar con el editor de páginas Web. Dreamweaver 8 es una exelente opción. Comenzamos con poner código HTML de estructura tal y como quiero que sea visto por los buscadores y gente discapacitada. Así, se evita poner siempre el Sidebar antes que el contenido que es lo más principal. Gracias al CSS es posible hacer esto sin importar que el Sidebar aparezca antes.

En otras palabras, lo que se arma es solo la estructura, el esqueleto.

Paso 5. Es hora de poner el contenido. Nada de estilos, nada de fonts, nada de colores. El contenido se pone usando tags que le den sentido. Usar h1, h2, etc. para encabezados. Los párrafos encerrados en su p tag. La navegación en listas no ordenadas (ul).

Paso 6. Ya etá todo listo para darle el aspecto gráfico que teníamos en mente. Comenzamos entonces armando la estructura, lo que será fácil ya que testán todos los números en nuestro papel.

Paso 7. Trabajar la página sección por sección, definiendo imágenes de fondo, colores, letras, espaciado.  

Paso 8. Una vez que el sitio está terminado hay que probarlo. En realidad lo mejor es ir probando en los varios navegadores mientras se avanza. Una revisión final, librará de cualquier problema que el usuario pueda tener.

Paso 9. El paso final, validar el código. Esto permitirá corregir errores que no veíamos, como cerrar tags por ejemplo. Al final queda nuestra página validada en código XHTML, cumpliendo los estándares.

Anuncios

Responses

  1. Genial explicacion. aunque uno de los pasos mas importantes y necesarios es el grado de motivacion en el proyecto

    suerte


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Categorías

A %d blogueros les gusta esto: