Creando un Boceto

A la hora de hacer un boceto existen algunos pasos que suelen ser obviados la mayoría de las veces, lo que trae como consecuencia atrasos a la hora de definir un diseño para nuestro sitio web.

Tres simples pasos a seguir que podrán ahorrar muchos dolores de cabeza. Para este caso vamos a tomar como ejemplo la tarea de hacer un boceto para la página principal de un sitio web.

1. Contenido

Para empezar debemos tener claro el contenido, esto a veces es un inconveniente pues en algunos casos algún cliente cree que se le puede hacer un diseño a medida sin conocer el contenido. Necesitamos saber que es lo que se va a presentar en el diseño y con que secciones debemos trabajar, este contenido también tendrá un orden de relevancia dependiendo de su importancia. Con el contenido claro podemos pasar al siguiente paso que es estructura.

2. Estructura

Aún sin haber jugado con colores ni fuentes vamos a plantear la estructura, de modo tal que empezamos a distribuir el contenido guiados por la importancia que tenga cada parte de este, papel y lápiz o wireframes nos serán de utilidad. Este paso es muy importante pues vamos a empezar a definir la interfaz con la que va a interactuar el usuario.

Por ejemplo si el sitio se encargará de fomentar la descarga de algún software pues un botón grande de descarga se encontrará a primera vista en la parte superior izquierda ó si el caso implica dar a conocer y fomentar el uso de alguna red social de seguro un pequeño formulario de registro con algún texto de incentivo tomarán toda la parte superior de nuestra estructura.

Una vez que tenemos clara la estructura podemos dar pase al diseño gráfico. Tener una estructura es muy importante, conocido problema de los diseñadores es que se haga cambiar el diseño una y otra y otra vez por no haber definido una estructura previamente, ya que dicha estructura deberá reflejar los objetivos del sitio web habiendo usado el criterio y por lo que no habrá motivo para ser replanteada por simples gustos personales.

3. Diseño

Y me refiero a colores, fondos, tipografías y demás. Es el momento en el que hay que inspirarse y es que teniendo una estructura definida podemos dar rienda suelta a nuestra creatividad, claro que siempre respetando dicha estructura y las relevancias que esta propone, por ejemplo si en nuestra estructura se plantea un botón grande de descarga sera nuestro trabajo enfatizar eso con el uso de los colores, fondos o lo que consideremos necesario.

Acá podremos hacer algunas variantes del diseño, pero al tener una estructura definida será mas simple realizar una elección.

Usualmente se cae en el error, y eso de seguro por presión o apuro, de abrir el software gráfico y empezar a diseñar si haber planteado nada antes de esto. Eso en la mayoría de los casos trae desorden al trabajo, además del riesgo de crear un diseño poco efectivo que puede dar como consecuencia malos resultados para los intereses del sitio web.

Así como antes de emprender algún negocio o algún viaje planeamos y analizamos las cosas, a la hora de crear un nuevo proyecto debemos tomarnos un poco de tiempo para no caer en errores que a la larga nos hagan perder mas que solo tiempo.

5 responses to “Creando un Boceto

  1. hola amigo, estuve googleando y encontre tu pagina, la verdad tienes muy buena informacion aqui, esto me ha motivado al diseno web en codigo abierto, ya que era un windiotisado. espero que sigas publicando temas relacionados a diseno web en codigo abierto, pues debemos salir de la esclavitud de windows y sus herramientas indiotisadas, si eres tan amable de escribirme a mi correo para que me ayudes mas en el diseno web en codigo abierto te lo agradeceria bastante, gracias anticipadas

  2. Christian

    hola @Miguel, si estas interesado en diseño web con alternativas libres puedes revisar.

    http://webinperu.com/2008/06/14/diseno-web-en-ubuntu-con-software-libre/

    Donde hago una lista de herramientas que nos serán de utilidad para el caso.

    Y en serio, diseño web en linux?, claro que se hace y se hace muy bien, si alguien dice que no se puede y que no hay alternativas pues es simplemente que no ha leído lo suficiente.

    En cuanto a lo windiotisado, dejemos que cada uno elija su sistema operativo y trabaje como más se sienta cómodo, pero en mi caso llevo años con ubuntu linux en diseño web y y frontend y no podría estar más satisfecho.

    saludos, y gracias por comentar.

  3. ares3ag

    Hola, acabo de pasarme a ubuntu hace una semana y la verdad que andube buscando el equivalente a la suite de Adobe CS(X) sobre todo al Dreamweaver y no le encontre parecido, ahora mi alternativa es entrarle a puro código (que aunque conosco a nivel medio) se que el cambio será algo brusco, espero no morir en el intento.

    Te felicito por tu blog, buena información y sirve de guia para los que recien iniciamos con linux.

    Salud2 y suerte.

  4. Comparto el contenido del artículo.. hay que pensar las cosas antes de ponerse a hacerlas. así cuanto te metes a la realización puedes ir con todo bien claro.

  5. Muy buenos consejos, y es cierto que siempre caemos con el software gráfico antes de saber que es lo que vamos a diseñar…

    Muchas gracias!!!

    Te Felicito por tu blog muy bueno y muy buena info!

    saludos!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>