Diseño de un sitio web

Por: Ma. de la Luz Mendoza Uribe

Antes de diseñar un sitio web es importante retomar y considerar algunas interrogantes que se propusieron
en el plan de comercio electrónico. Recuerda que no se deben perder de vista los siguientes objetivos: ¿por
qué quiero crear un comercio electrónico?, ¿para qué es mi comercio electrónico?, ¿qué quiero mostrar a
mis usuarios?

Ahora bien, aunque la idea es crear o plantear la generación de un comercio electrónico, es importante
primero contar con un sitio web. Para poder desarrollar uno considera los requisitos mostrados en la figura
1.

Figura 1. Requerimientos de un sitio web.

Diseño de la interfaz

En este momento ya tienes una clara idea de lo que se pretendes reunir en el sitio web de un comercio
electrónico.

1
©UVEG. Derechos reservados. Esta obra no puede ser reproducida, modificada, distribuida, ni transmitida, parcial o totalmente, mediante cualquier medio, método o
sistema impreso, electrónico, magnético, incluyendo el fotocopiado, la fotografía, la grabación o un sistema de recuperación de la información, sin la autorización por escrito
de la Universidad Virtual del Estado de Guanajuato.
Antes de iniciar el diseño de la interfaz es importante analizar el plan de negocio electrónico, los principios
de usabilidad, el análisis de mercado y requerimientos, las soluciones de comercio electrónico y los
elementos de un comercio electrónico. Con base en ello, la primera propuesta a realizar es el diseño del sitio
en papel y en ella se especificará lo siguiente:

1. Nombre de la organización
2. Nombre del dominio
3. Diseño (prototipo) del sitio
4. Descripción del sitio

Diseño del sitio

El diseño del primer prototipo se elabora en papel (en este caso se puede realizar en PowerPoint), pero
debes especificar lo siguiente:

1. Los botones (secciones) que contendrá el sitio.

2. La ubicación de los botones, es decir, si aparecen en la parte inferior, izquierda, o derecha
de la página web.
3. Asimismo, se indica el lugar de animaciones, videos e imágenes.
4. La primera página a desarrollar será la página principal del sitio, que se refiere a la que
ingresa el usuario en primera instancia.
5. Se puede decir que cada botón o sección es una página web, o sea una página
independiente.
6. Después de desarrollar la página principal se realiza cada una de las páginas en las que se
indica si hay texto (por medio de cuadros), imágenes, videos, etcétera.
7. Este es un bosquejo del acomodo y contenido del sitio web.

Recomendaciones

1. Es pertinente que la ubicación de los botones y los temas de fondo sea la misma en todo el sitio
web para evitar que el usuario se pierda dentro del sitio.
2. No saturar la página de texto, por lo que cada párrafo debe contener como máximo cinco líneas.
3. No saturar la página de imágenes y videos que tarden mucho tiempo en descargar.
4. Los nombres de los botones e hipervínculos deben indicar al usuario lo que contiene esa página;
por ejemplo, el botón Contacto debe traer los datos de la organización.
5. Considerar que existen nombres estandarizados como:
o Inicio (home), que lleva a la página principal
o Contacto, que lleva a la página en donde pueden tener los datos de la información y mandar
dudas o sugerencias
o Aviso legal, que contiene el contrato legal
6. La navegación, es decir de un link a otro, debe ser muy fácil. Para realizar cualquier actividad se
recomienda que el usuario no aplique más de tres clics, excepto en una transacción puede dar
un mayor número de clic, pero hay que diseñar para que se consideren los principios de
usabilidad, sin perder de vista las necesidades del usuario.
7. Lo más sencillo es lo más visitado.

2
©UVEG. Derechos reservados. Esta obra no puede ser reproducida, modificada, distribuida, ni transmitida, parcial o totalmente, mediante cualquier medio, método o
sistema impreso, electrónico, magnético, incluyendo el fotocopiado, la fotografía, la grabación o un sistema de recuperación de la información, sin la autorización por escrito
de la Universidad Virtual del Estado de Guanajuato.
Para realizar el diseño (bosquejo) en papel del sitio web debes considerar dos aspectos:

1. La navegación
2. El contenido

La navegación

La navegación es el primer esquema que se recomienda realizar, el cual puede ser creado en papel, en
Word, Excel, PowerPoint. En este esquema se definen las páginas que tendrá el sitio y la navegación
(conexión) del mismo, es decir, al partir de la página principal se indicarán las secciones, subsecciones y sub
subsecciones que se pueden tener, lo cual te permitirá plantear un esquema de navegación para saber cómo
conectar (ligar por medio de enlaces) tus páginas web e integrarlas en un sitio, tal como se muestra en la
figura 2.

Es importante mencionar que a este diagrama se le denomina esquema de navegación o árbol de

navegación.

Figura 2. Esquema de navegación.

3
©UVEG. Derechos reservados. Esta obra no puede ser reproducida, modificada, distribuida, ni transmitida, parcial o totalmente, mediante cualquier medio, método o
sistema impreso, electrónico, magnético, incluyendo el fotocopiado, la fotografía, la grabación o un sistema de recuperación de la información, sin la autorización por escrito
de la Universidad Virtual del Estado de Guanajuato.
Para observar algunos ejemplos de un esquema de navegación, te sugiero visitar las siguientes páginas web:

• http://www.neopixel.com.mx/articulos-neopixel/articulos-internet/1867-tipos-de-navegaci%C3%B3n-
para-un-sitio-web.html

• http://2.bp.blogspot.com/_D2Of-qFXz90/SZhU6UxyNLI/AAAAAAAAAEY/Ld48w2eYAKM/s1600-
h/Mapa+de+navegaci%C3%B3n..jpg

• http://www.desarrolloweb.com/articulos/2423.php

• http://www.esandra.com/consejos-para-el-diseno-de-un-menu-de-navegacion-web

El contenido

El contenido se refiere a detallar en papel el acomodo de los botones (secciones que pueden contener
subsecciones), indicar en dónde se pondrán los textos, imágenes, videos y los links que tendrá. Este
bosquejo en papel se realiza de cada una de las hojas del sitio.

En la figura 3 se ejemplifica la página principal de un sitio. Te reitero que este dibujo o bosquejo se realiza
para cada una de las páginas que comprenden el sitio web, por lo que te aconsejo numerarlas para más
adelante realizar el diseño de navegación del sitio.

4
©UVEG. Derechos reservados. Esta obra no puede ser reproducida, modificada, distribuida, ni transmitida, parcial o totalmente, mediante cualquier medio, método o
sistema impreso, electrónico, magnético, incluyendo el fotocopiado, la fotografía, la grabación o un sistema de recuperación de la información, sin la autorización por escrito
de la Universidad Virtual del Estado de Guanajuato.
 Blog Contacto Buscar en la
web

Arte y
Inicio Oficinas Qué hacer cultura Naturaleza Promociones

Fotos que van cambiando

Texto Introducción

Secciones Oficinas

Figura 3. Página principal de un sitio web.

5
©UVEG. Derechos reservados. Esta obra no puede ser reproducida, modificada, distribuida, ni transmitida, parcial o totalmente, mediante cualquier medio, método o
sistema impreso, electrónico, magnético, incluyendo el fotocopiado, la fotografía, la grabación o un sistema de recuperación de la información, sin la autorización por escrito
de la Universidad Virtual del Estado de Guanajuato.
Para observar otros ejemplos, te sugiero revisar los siguientes sitios web:

• http://www.creativosonline.org/blog/18-bocetos-de-calidad-para-aprender.html
• https://courses.p2pu.org/es/groups/bosquejar-una-pagina-web/content/realizar-los-primeros-
bosquejos/?pagination_page_number=1#10434
• http://es.ccm.net/faq/7823-herramientas-para-crear-bocetos-de-sitios-web
• http://tecnologiasweb.jsenso.es/mockup-arquitectura-web/

Bibliografía
Cavazos, J., y Reyes, S. (2008). Comercio electrónico: un enfoque de modelos de
negocio. México: Grupo Editorial Patria.

Laudon, K. y Guercio, C. (2009). E-commerce: negocios, tecnología, sociedad (4.ª

ed.). México: Pearson Educación.

6
©UVEG. Derechos reservados. Esta obra no puede ser reproducida, modificada, distribuida, ni transmitida, parcial o totalmente, mediante cualquier medio, método o
sistema impreso, electrónico, magnético, incluyendo el fotocopiado, la fotografía, la grabación o un sistema de recuperación de la información, sin la autorización por escrito
de la Universidad Virtual del Estado de Guanajuato.