Cómo iniciar el desarrollo gráfico de un sitio?

[gmansi]

Hola a todos, me gustaría si brevemente me pueden indicar cómo hacen para desarrollar gráficamente un sitio.

Es decir, una vez que el sitio armado, diferentes gráficos ubicados en celdas contiguas se entrelazan para dar un aspecto de uniformidad al sitio, y evitar que parezca demasiado "cuadrado".

Ahora bien, cómo hacen ustedes? Primero diseñan un bosquejo gráfico y luego de ahí cortan y arman imágenes pequeñas que luego serán usadas en las celdas del sitio?

Como para tener un ejemplo pego una imagen de un sitio ya diseñado:

[fer10]

hola, yo no soy diseñador pero consco unos que hacen bosquejos, y principalmente antes de comenzar con el diseño es necesario conocer el punto de vista del cliente para saber que tipo de imagen quiere dar, depues que es lo que necesita de la pagina (para saber las secciones que quieres colocar y a donde) cuales se repite en todas las paginas, cuales no .. etc.. y el diseño se implementa a partir de esas necesidades.

[gmansi]

Ya veo, y problablemente se use también el apoyo de programas como Fireworks no?

"Dividir y exportar componentes de páginas.

Divida un diseño de página de Fireworks y exporte a un editor HTML la página entera o divisiones seleccionadas de la misma (incluidos gráficos, formatos HTML y el código para los efectos rollover), al igual que con Dreamweaver o Microsoft FrontPage). "

[JavierGuerrero]

Hola gmansi

Cuando me dispongo a desarrollar un sitio web, empiezo por hacer el PLANEAMIENTO, donde defino los objetivos, la audiencia y los requisitos. Seguidamente elaboro un mapa del sitio, donde se reflejarán las secciones del sitio y a partir de esto creo los wireframes los cuales son esquemas que muestran la estructura de navegación y la disposición de los contenidos, estos representan una guía de como debería quedar el sitio web.

Teniendo bien claro todo lo visto en el planeamiento, a partir de los wireframes empiezo por definir el aspecto visual del sitio, es decir, entro a la etapa de DISEÑO donde se deben de tener en cuenta temas como tipografìa, teoría de colores, etc. Para el diseño utilizarías una herramienta gráfica como Photoshop o Gimp, al final tendrás como resultado un boceto, nada de código aún.

Continuando con el proceso entraría en la etapa de pasar el boceto a código, la CODIFICACION, de tal manera que pueda ser visualizado en un navegador web. Empiezo cortando el boceto para de esta forma obtener las imágenes necesarias, yo utilizo el Image Ready para esta tarea.
Un principio fundamental que sigo para escribir código es separar mi código en tres capas:

Estructura - XHTML
Apariencia - CSS
Comportamiento - Javascript

De esta manera obtengo un código limpio y de fácil mantenimiento. Otra cosa muy importante durante la etapa de codificación es que debes guiarte según los estándares establecidos por el W3C y no codificar para que se vea sólo en un navegador, sino en todos. Firefox, Opera y Safari son los navegadores que se apegan más a los estándares, por esto primero verifico que mi diseño se vea bien en Firefox y para el caso de Internet Explorer, que siempre es una joda, utilizo los comentarios condicionales para IE en CSS para arreglar los problemas de este jodido navegador.

El proceso continúa...

Saludos.

Javier Guerrero

[gmansi]

Javier, muy interesante tu aporte, das lineamientos generales para tener en cuenta.

Si más adelante sigues desarrollando el tema podemos reunir tus post y agruparlos luego en uno solo.

Muchas gracias.

[juaniquillo]

Siguiendo con lo que dijo JavierGuerrero, después de tener el diseño listo, trato de ver en que caso voy a usar (x)html y css, y que en caso utilizaré imágenes. Mientras menos imágenes uses mejor, ya que la página cargará mas rápido, así que yo intento usar recursos html lo más posible.
Después empiezo a hacer el html de lo general a lo particular, osea, que empiezo por lo más amplio y después hago los detalles.