NEGOCIOS POR INTERNET

Unidades II y III: B2C & B2B

Fase 3: Diseño visual y pruebas.

Equipo:
•Núñez Rodríguez Sergio Gerardo
•Méndez Villanueva Francisco
•Urbina Méndez Eloy 1

Contenido
• Iniciar el proceso creativo.

• Confirmar el flujo y la funcionalidad.

• Crear plantillas graficas.

• Crear una guía de estilos de diseño.

ITDurango, .México. 2009. 2

1
 Iniciar el proceso creativo.

Iniciar el proceso creativo

• He aquí lo que el cliente ha estado esperando tan
pacientemente: un esbozo del sitio rediseñado. Pero
antes de que esto ocurra, el equipo de diseño necesita
Capítulo 1. No me hagas pensar

establecer una discusión de ideas orientada a

proponer soluciones a nivel creativo y técnico. La
creatividad no se produce en serie.
No espere rediseñar la interfaz visual de golpe y
tampoco deje que el cliente piense que esto es
posible.

2
 Definir el diseño inteligente
• El diseño web visual debe ser algo más que una mera
interfaz bonita; también debe seguir los objetivos
generales del sitio a la vez que ser funcional. Es aquí

Capítulo 1. No me hagas pensar

donde los diseñadores web hacen su magia. También
es aquí donde salirse del camino puede llevarle a
pasarse en el presupuesto.

Definir el diseño inteligente

• El diseño inteligente sirve para el entorno y la
capacidad del usuario. El diseño inteligente es
funcional y se carga rápidamente. El diseño inteligente
Capítulo 1. No me hagas pensar

se centra en la experiencia del usuario, más que en la

ambición del diseñador.
• ¿Cómo se aplica el diseño inteligente? Muy sencillo.
• Póngase en el lugar del usuario. Navegue, haga clic y
descargue como si fuera el usuario. Incorpore el
diseño de la información en vez de luchar contra él.

3
 Revisar los objetivos del sitio.
• El resumen de creatividad también enumera los
objetivos de rediseño del cliente, incluyendo los
objetivos visuales, como un aspecto y sensación

Capítulo 1. No me hagas pensar

mucho más profesional, gráficos más actuales, un
área más viva para el contenido, etc. Durante la
discusión de ideas creativas, el equipo de diseño
deberá ver e identificar los problemas visuales del
sitio existente, revisar los objetivos de rediseño, ver
los sitios de la competencia y discutir las soluciones
propuestas.

Revisar los objetivos del sitio.

• Cuando discutan las ideas sobre los colores de las
materias y formas, los diseñadores visuales también
deberán emplear soluciones técnicas y estructurales
Capítulo 1. No me hagas pensar

(por ejemplo, el uso de DHTML, flash, java-script,

etc.). Y, recuerde, no emplee soluciones tecnológicas
solo porque sean actuales. Deberá asegurarse de que
facilitan los objetivos de rediseño y que son
apropiadas para la audiencia.

4
 Desarrollar conceptos
• El desarrollo del aspecto y la sensación puede
empezar por reunir los colores y plasmar las ideas en
papel o en la pantalla sin preocuparse del contenido o

Capítulo 1. No me hagas pensar

las etiquetas que proporcione el diseño de la
información.

No obstante, cuando el mapa del sitio y los conjuntos

de marcos están hechos, es cuando el diseño puede
verdaderamente empezar.

Desarrollar conceptos
• Existen dos campos en lo que respecta a cómo
empezar a diseñar. A los tradicionalistas les gusta el
lápiz y el papel; otros se sientan directamente
Capítulo 1. No me hagas pensar

enfrente de la computadora y crean una seria de

borradores.

En este punto del proceso esencial, los diseñadores

visuales tienen que empezar a experimentar con los
colores y los diseños, tienen que empezar a crear
diseño tras diseño. Los diseñadores visuales deben
discutir las ideas, hasta que haya dos o tres
direcciones solidas.

5
 Confirmar el flujo y la funcionalidad.

Diseñar para el usuario

• Cuando el equipo de diseño ha terminado de
programar, el director creativo o el diseñador deberán
concretar los cinco puntos cordados por el equipo y
Capítulo 1. No me hagas pensar

concentrarse en analizar la información de los

entramados, incluyendo la navegación, los elementos
globales, el contenido, etc. Asegúrese de determinar
cuando y donde colocar las pistas visuales/graficas
(por ejemplo, los botones y los iconos) para ayudar al
usuario a recorrer el sitio.

6
 Diseñar para el usuario
• Mientras se desarrolla el diseño visual, el equipo
deberá dedicar tiempo a visualizar el sitio desde el
punto de vista de la audiencia. Por ejemplo, si la

Capítulo 1. No me hagas pensar

audiencia de destino está utilizando líneas T1 en la
oficina, tenga en cuenta el tiempo de descarga del
diseño. Quizá pueda resolverlo con más imágenes y
menos texto. Los destinatarios ¿suele estar en sus
domicilios provistos de módems de 56k? Considere
que haya más páginas con menos diseño en cada una.
No obstante, las limitaciones de ancho de banda
necesitan compromisos. Asegúrese de que los
diseñadores visuales rediseñan para la audiencia de
destino.

Presentar diseños y reunir información.

• Antes de presentar las primeras direcciones visuales al
cliente, los diseños deberán haber pasado ya por
varios filtros a nivel interno. Recuerde dos cosas muy
Capítulo 1. No me hagas pensar

importantes: en primer lugar, la presentación inicial

de demasiadas opciones relentiza todo el proceso, ya
que estará promoviendo la indecisión del cliente. Tres
direcciones de diseño es lo conveniente. En segundo
lugar, no presente un diseño que le disguste, ya que
entonces necesitara otro diseño. Publique los diseños
en el área divisoria del cliente e invítele a que lo
revise.

7
 Presentar diseños y reunir información.
• Con algunos clientes, obtendrá la información de una
sola vez; con otros, poco a poco. En este segundo
escenario, el cliente argumenta unos cuantos puntos

Capítulo 1. No me hagas pensar

menores, y usted depura el diseño en función de ello,
vuelve a consultar a producción para garantizar la
viabilidad y lo presenta al cliente, quien, a su vez,
adecue cuantos puntos menos más.

Confirmar e flujo y la funcionalidad.

• No hay necesidad de esperar hasta que haya
terminado el diseño, se haya optimizado y codificado
para probar la funcionalidad ligera, el contenido o la
Capítulo 1. No me hagas pensar

navegación. Modifique lo que no funcione bien

mientas este armando el diseño visual, no tendrá
tiempo de ajustar el aspecto y la sensación durante la
producción. Le recomendamos dos formas de probar.

8
 Confirmar e flujo y la funcionalidad.
• Haga que los diseñadores de producción trabajen
probando DHTML, los conjuntos de múltiples tramas;
básicamente, lo que tenga que probarse en las

Capítulo 1. No me hagas pensar

distintas plataformas. Conviene que construya un
prototipo del sitio.

El prototipo del sitio en HTML.

• Como extensión de los entramados de la fase 2, el
prototipo del sitio se emplea para confirmar el flujo
de las páginas, la navegación y el contenido. El
Capítulo 1. No me hagas pensar

prototipo del sitio no suele incluir la funcionalidad,

aunque a veces existe una automatización ligera.
Normalmente, el prototipo del sitio es un entramado
sencillo (no orientado al diseño; unos pocos colores
bastan para separar la navegación) que se puede
hacer con HTML.

9
 El prototipo del sitio en HTML.
• El prototipo del sitio, también llamado esquema
HTML, es una representación del sitio que permite
trabajar con el contenido, la navegación y la

Capítulo 1. No me hagas pensar

funcionalidad ligera (o la funcionalidad que se desee)
para estableces si tiene sentido o no el modelo
informático. En este punto del proceso esencial,
tendrá una idea clara de que información va en cada
página. Cuando los diseñadores de producción
construyen el prototipo del sitio (al menos de las
páginas principales y secundarias), está tratando de
determinar si el sitio esta adaptándose a lo que ha
planificado.

PROBAR LA FUNCIONALIDAD.

10
 Tema
• Conviene probar la funcionalidad de las características
individuales antes de generar la producción HTML. La
compatibilidad con los distintos navegadores, la

Capítulo 1. No me hagas pensar

velocidad de las conexiones, las plataformas y los
plug-ins son cuestiones de funcionalidad
problemáticas a nivel histórico y que tienen que ser
comprobadas frente a la capacidad de la audiencia y
la viabilidad de la producción.

Tema
Es preciso probar cualquiera de los siguientes
escenarios:
Capítulo 1. No me hagas pensar

• Conjunto de tramas complejas(Solo que sea

necesario)

• Menús desplegables funcionales en DHTML o Java

Script.

• Ventanas emergentes, especialmente si dependen del

tamaño o la colocación.

11
• Hojas de estilos o cualquier tratamiento dependiente
del navegador.

• Menús desplegables(Especialmente los que cargan las

paginas automáticamente)

• Características sencillas de cesta de la compra.

• Todo aquello que necesite una automatización.

ITDurango, .México. 2009. 23

CREAR PLANTILLAS GRAFICAS.

12
 Tema

• Aquí es donde las necesidades establecidas de

Capítulo 1. No me hagas pensar

aspecto y sensación tienen que ser trasladadas
y aplicadas a múltiples paginas. El tamaño de la
descarga y la viabilidad de la optimización
tendrán que haber sido tenidos en cuenta
cuando se creó el diseño.

Tema

• Pero ahora que ya se ha decidido esa dirección,

Capítulo 1. No me hagas pensar

la aplicación y el establecimiento de estándares

en el sitio es un deber, ya que construyen
plantillas graficas para los distintos tipos de
páginas. Si hay varias personas que trabajan en
este paso, el potencial de division de los
estándares es un factor importante.

13
• En primer lugar, establezcamos la diferencia entre un
aspecto y sensación y una plantilla grafica. En e l primer
paso de esta fase, presento al cliente las direcciones de
diseño.

• El aspecto y la sensación es una dirección aprobada;

tienen que ser depuradas ( sin duda habrá detalles con
los que tranajar8 y luego reprobadas.

ITDurango, .México. 2009. 27

• Una plantilla grafica toma el aspecto y sensación

aprobados y los prepara para la producción HTML. Se le
llama plantilla puesto que va ser usada tanto en la
pagina HTML que este designada como en las paginas
similares que haya.

• Es un archivo grafico maestro que pronto se entregara a

producción para su fragmentación y optimización
durante la siguiente fase del proceso esencial.

ITDurango, .México. 2009. 28

14
• La creación de una plantilla grafica consiste en refinar el
aspecto y sensación con el fin de conseguir un archivo
en capas listo para la producción.

• Las primeras partes de la plantilla grafica a designar son

las globales.

• Refine la barra de navegación con los estados

activado/desactivado/presionado.

ITDurango, .México. 2009. 29

Plantillas Graficas

ITDurango, .México. 2009. 30

15
 CREAR UNA GUIA DE ESTILOS DE DISEÑO.

Cada una de las páginas del sitio rediseñado es distinta,

y cada una de ellas contiene elementos globales.

Es prioritario mantener la coherencia. Asegúrese de que

establece la coordinación de todos los estados,
enlazando colores, fuentes, encabezados y texto de
tamaño HTML. Los diseñadores de producción no
deberían tener motivos para formular demasiadas
preguntas al respecto.

ITDurango, .México. 2009. 32

16
Una guía de estilos es un elemento clave para el
mantenimiento posterior al lanzamiento, pero también
es extremadamente útil como referencia en la medida
en que se construyan paginas en producción.

Creada en dos partes tanto por el equipo de diseño

como por el equipo de producción(una parte por cada
equipo), una guía de estilos puede ser muy detallada o
muy sencilla( depende del nivel de estandarización y
dirección que se desee dar al ciclo de vida del rediseño
y, evidentemente, del presupuesto y los recursos).

ITDurango, .México. 2009. 33

Cuanto mas detallada sea la guía de estilos, mas a salvo

estará el sitio de la eventualidad de que haya una
interrupción del diseño durante el mantenimiento(esto
se vera mas adelante en la fase 5 sobre el
mantenimiento).

Los clientes suelen realizar el mantenimiento de sus

propios sitios y generalmente no son diseñadores. HAY
QUE AYUDARLES.

ITDurango, .México. 2009. 34

17
 ESTABLECER ESTANDARES.

Los tratamientos estandarizados de los elementos y

gráficos globales(estados, colores hexadecimales HTML,
tamaños de opción de fuente, encabezados,
funcionalidad de fondo, todos ellos deberían ser
establecidos, de forma que se puedan aplicar en todas
las paginas.

ITDurango, .México. 2009. 36

18
• Sin embargo, aparte de definir los tratamientos gráficos
para los elementos globales, deberá haber resuelto
cualquier cuestión concreta de diseño no definida y
haber aprobado el aspecto y la sensación.

Aquí se deberán incluir aquellos elementos que

aparezcan en una página pero no en la otra, un
formulario aleatorio, una pantalla desplegable o un
mensaje de error.

ITDurango, .México. 2009. 37

Además podría haber gráficos adicionales que no se

hubieran diseñado en el aspecto y sensación finales, y
obviamente tendrá que haber cambios en el contenido
final.

Si no existen estándares para todos los elementos, cada

cual generara su propia forma de afrontar las
cuestiones todavía no estandarizadas.

ITDurango, .México. 2009. 38

19
COMPONENTES RECOMENDADOS DE LA GUIA DE ESTILOS

ITDurango, .México. 2009. 39

Bibliografía
Rediseño de sitios web. Kelly Goto. Prentice Hall.

20