Pasos Para Crear Un Pagian Web

Los 10 Pasos a Seguir en el Diseño de una Web

Por Sandra Guerrero Sanmarti | Publicado: 08/10/2012

El otro día estuve un evento de Meetup para conocer a otros diseñadores web y hablamos sobre cómo empezábamos el diseño de un sitio web. Había quien directamente se ponía a picar código, otros un poco más elaborados que primero hacían el diseño en Photoshop y finalmente los profesionales de verdad que empezaban con un sketch a mano. A raíz de esta reunión me di cuenta que muchas veces no sabemos por dónde empezar y cuál es la manera correcta de hacer las cosas para obtener un buen diseño web .

Este post es una guía práctica que muestra los pasos a seguir en el diseño de una web. Este es el ideal, la guía de referencia, por decirlo de alguna manera, pues muchos son los diseñadores que no los tienen en cuenta. Sin embargo, si pretendemos crear sitios web profesionales, vale la pena tenerlos presentes y valorar la importancia de cada uno de ellos antes de lanzarnos a la aventura.

Paso 1: Definir Objetivos

No hace mucho me encontré a un amigo que me dijo que tenía a una clienta a la que le iría muy bien tener una web. Cuando le pregunté a mi amigo cuáles eran los objetivos de la web, me contestó sin pestañear ni un poco que vender más, porque el futuro estaba en Internet y la floristería de esta amiga estaba perdiendo clientes y que si eso me pasaba unas fotos y yo hacía una web. Historias como esta, por extrañas que parezcan, están a la orden del día en los países latinos donde todavía se cree que con cuatro fotos y tres pinceladas tenemos una web que funciona. Mi consejo: si quieres un buen portafolios, así como ahorrarte dinero en aspirinas, define muy bien los objetivos con el cliente, o abstente de tomar un proyecto en el que no hay objetivos claros.

No son los mismos los objetivos de una tienda online, que el de un bufete de abogados o un estudio de arquitectos. Hay que definir muy claro el qué y el para quién, el cómo ya vendrá después. ¿Quién es nuestro target? ¿En qué lugares del mundo se encuentra? ¿Qué necesita? ¿Qué espera encontrar? Sin una definición clara de objetivos, el sitio web será un fracaso, hazme caso y no te involucres en proyectos perdidos. Y si lo haces, ten ética y déjale claro al cliente que esa no es la mejor opción ni de lejos y no incluyas ese trabajo en tu portafolios.

Paso 2: Definir contenidos

Con el paso del tiempo me he dado cuenta que es un error crear primero el diseño y luego adaptar los contenidos al mismo. El proceso debe ser el inverso, primero debemos saber, ni sea a grosso modo, los contenidos que queremos publicar, para así después adaptar el diseño a los contenidos. Tampoco es necesario tener los textos e imágenes de antemano, ni mucho menos, simplemente tener una idea clara de lo que hay que publicar, para así poder hacernos una mejor idea de las necesidades concretas del cliente.

Paso 3: Dibuja un sketch

Este es uno de los puntos que salió en la reunión del otro día y que reconozco yo había enviado al baúl de los recuerdos. ¿Papel? Uff, alergia. Pero si que es verdad que es más fácil pensar sobre papel que directamente en herramientas de Wireframing y que en reuniones con el cliente puede ser muy útil utilizar un bloc de notas.

Paso 4: Utiliza una herramienta de Wireframing

En el mercado hay un montón de herramientas de wireframing, miraré esta semana de hacer un post con una recopilación de wireframes para que te ayuden en tu trabajo de diseñador web. Estas herramientas lo que hacen básicamente es algo parecido al sketch manual, a partir de aquí se podría abrir una discusión sobre si el paso anterior de dibujar el sketch a mano es necesario o no, pero en el fondo creo que verdaderamente es más fácil crear sobre papel que sobre pantalla, aunque quizás eso sea porque soy de la generación de los dinosaurios:-)

Paso 5: Haz el diseño en Photoshop

Con el diseño web responsive se terminaron los días en que sólo hacíamos un diseño. Ahora necesitamos

...