CÓMO DISEÑAR UN SITIO WEB “FROM SCRATCH” - Parte 1

Objetivo: Diseñar el sitio Web de COMPUTERS 4 GEEKS, al estilo Web 2.0. Requerimientos para este proyecto:

• Pluma/lápiz y papel.
• Un ambiente cómodo de trabajo, donde la inspiración pueda fluir libremente.
• Photoshop.
• Dreamweaver.

Dibujar una plantilla Recuerdo una profesora de programación que tuve en la universidad, en una de sus clases de Programación 1 dijo unas palabras en una clase de C++ y, por más cliché que suene lo que voy a decir, jamás lo olvidaré: “El primer compilador fue el papel y no habrá mejor”. Aún cuando entendí el significado de estas palabras desde que las escuché, en verdad nunca pensé que utilizaría el papel para compilar algo jamás. Para mi eso era algo obsoleto y sólo imaginarme utilizando un papel para programar me parecía absurdo, más sin embargo tenía razón. Ahora ya no programo, pues me di cuenta que no es mi vocación, pero me atrevo a decir que para diseñar el mejor “compilador” es el papel, incluso para el diseño Web. Utilizo la palabra compilar porque hay cosas de la ingeniería de las cuales aún no me puedo deshacer. Es como tratar de hacerme pensar que la suma del cuadrado de los catetos no es igual al cuadrado de la hipotenusa de un triángulo rectángulo, hay cosas que nunca se olvidan, ustedes saben. Bueno, volviendo al tema yo, en particular tengo una manera digamos algo peculiar de utilizar mi hoja en blanco para “compilar” mi diseño, es simple: doblar la hoja de en cuatro partes iguales; de esta forma tengo ocho espacios para dibujar 8 opciones distintas, sin que una opción interfiera con la otra. Es una cuestión visual, algo muy personal. Me molesta ver varios diseños al mismo tiempo, no puedo concentrarme en ninguno. Ahora bien, utilicemos estos ocho espacios para dibujar diferentes plantillas, creamos un encabezado (header), un menú de navegación (menu), un cuerpo para la página (body), y un pie de página (footer). En cada espacio podemos crear diseños totalmente distintos entre sí o bien, podemos crear variantes de un mismo diseño, todo depende de nuestra creatividad. Igualmente, no es necesario ocupar los ochos espacios, bien podemos utilizar uno, dos o cuatro, hasta lograr un diseño con el cual nos sintamos satisfechos. Tampoco tiene que ser una obra de arte nuestro dibujo, no queremos crear un Botero o un Dalí, sólo queremos hacer una página Web.

Como pueden apreciar en las imágenes, no es que yo haya hecho el mejor dibujo, simplemente necesitamos una representación gráfica preliminar de nuestro diseño. Una vez tenemos nuestros bocetos listos, escogemos uno y lo desarrollamos en nuestro programa de diseño. Yo he escogido el diseño 2. Generar una paleta de colores. Ahora que ya hicimos nuestros bocetos y hemos escogido uno, tenemos que generar una paleta de color en la cual basarnos. En Photoshop podemos generar una paleta de colores fácil y rápidamente, sólo necesitaremos el logo de nuestra página Web.

1. Abrimos nuestro logo con photoshop
   
2. Vamos al menú ARCHIVO y elegimos la opción GUARDAR PARA WEB Y DISPOSITIVOS.

   Elegimos la opción GIF, automáticamente nos aparecerá una paleta de colores en la parte inferior. Escogemos la cantidad de colores que deseemos para nuestra paleta, en esta caso yo escogí, 64 colores.

3. En la parte superior derecha de la paleta de colores hay un botón con una flechita, hacemos clic sobre él y elegimos la opción GUARDAR TABLA DE COLORES…, buscamos una ubicación para nuestra paleta y la guardamos en la computadora.

   

   Cargar la paleta de colores en Photoshop.

Al guardar la tabla de colores se generó un archivo *.act que ahora debemos cargar como una muestra para utilizarlo en nuestro diseño. Para esto, seguiremos los siguientes pasos:

• 1. Abrimos el panel de MUESTRAS. Vamos al menú VENTANA > MUESTRAS.

  

• En nuestro espacio de trabajo en Photoshop se desplegará un nuevo panel llamado MUESTRAS.

  

• Este panel nos muestra una paleta de colores predeterminada, Photoshop viene con una librería de paletas predeterminadas. Ahora bien carguemos nuestra paleta personalizada. Hacemos clic en el botón MOSTRAR OPCIONES del panel y elegimos la opción SUSTITUIR MUESTRAS.

  

• Buscamos la carpeta donde guardamos el archivo *.act. Para poder ver el archivo debemos elegir la opción TIPO: TABLA DE COLORES (.*ACT). Luego hacemos clic en el botón CARGAR.

  

• Ahora, nuestra paleta de colores ha sido cargada a nuestra área de trabajo.

Digitalizar el diseño. Ya tenemos todo listo para empezar a darle vida al dibujo que hicimos en papel hace un rato. Personalmente me gusta trabajar sobre un lienzo de 900x900 píxeles y optimizar mis páginas Web para resoluciones de 1024 en adelante. Espera mi próxima entrada para ver el resultado de mi diseño y la Parte 2 de este artículo. Y para finalizar mi artículo. Algo de cultura general. ¡Espero sus comentarios! Un abrazo grande. Definiciones:

1. Cliché: (derivado del francés cliché) se refiere a una frase, expresión, acción o idea que ha sido usada en exceso, hasta el punto en que pierde la fuerza o novedad pretendida, especialmente si en un principio fue considerada notoriamente poderosa o innovadora.
2. Compilador: programa informático que traduce un programa escrito en un lenguaje de programación a otro lenguaje de programación, generando un programa equivalente que la máquina será capaz de interpretar.
3. C++: lenguaje de programación diseñado con mecanismos que permiten la manipulación de objetos.
4. Fernando Botero: pintor, escultor y dibujante colombiano nacido el 19 de abril de 1932 en Medellín (Antioquia). Considerado el artista vivo originario de Latinoamérica más cotizado actualmente en el mundo.
5. Salvador Dalí: Marqués de Dalí de Púbol, pintor, escultor, diseñador, escritor y cineasta español.
6. Bocetos: dibujo realizado de forma esquemática y sin preocuparse de los detalles o terminaciones para representar ideas, lugares, personas u objetos.

Una canción: “The loving kind” – Girls Aloud. Una frase: “La música hace de la vida un autopista fluida, por eso es importante crear un soundtrack diario de la nuestra.” – Ritchie. Un libro: Typ – Ritchie.