DISEÑO WEB I

CÓDIGO : ISO-305
CRÉDITOS : 4

Universidad APEC
Resumen Ejecutivo Presentación
Este libro se centra en las habilidades necesarias para
desarrollar y cuidar sitios web. Lo que usted necesita saber
para trabajar estratégicamente con su sitio web. La
introducción refleja la historia de la Web y cómo se conecta a la
Web que vemos hoy. Seguido por lo que debería ser de
conocimiento común en la arquitectura de la información, tales
como etiquetado, metadatos, gestión de activos digitales,
estrategia de URL y similares.

Obviamente, las estrategias de diseño web se discuten en

detalle, incluyendo diseño web sensible y cómo diseñar para
ser persuasivo. Junto al último tema sobre cómo optimizar el
rendimiento de un sitio web y por último, pero no por ello
menos importante, la sección del hágalo usted mismo, donde
puede probar una variedad de factores de calidad de su sitio
basándose en la usabilidad, la optimización de motores de
búsqueda y más.
Fuente:https://www.amazon.com/Web-Strategy-Everyone-information-architecture-
ebook/dp/B01GAJLV70/ref=sr_1_1?s=digital-text&ie=UTF8&qid=1504530058&sr=1-1.
Resumen Ejecutivo Presentación
ACLARANDO :

En esta presentación nos vamos a concentrar en 3 (tres), que

tiene como tema principal : DISEÑO WEB.

Hemos realizado un resumen del mismo para plantearlo y

debatirlo en clases.
CAPITULO 3
DISEÑO WEB
Diseño web : Introducción
En los años recientes, hemos tenido claro que no controlamos como los
visitantes deciden conectarse a nuestros sitios web. Pueden acceder
desde cualquier dispositivo móvil mientras toman el autobús hasta una
televisión de 50 pulgadas en la sala de su casa. Y no solo importa el
tamaño de la pantalla, sino también como los visitantes controlan su
dispositivo, la velocidad de la conexión y la resolución máxima de la
pantalla.
Además de satisfacer al visitante en cualquiera de las situaciones
mencionadas, debemos diseñar con los objetivos del negocio en mente,
con constantes actualizaciones para mantenernos a la vanguardia de los
acontecimientos y para que nuestra información sea relevante.
 Diseño web : Principios de Diseño

Hacer el Comienza
Construye Se
Comienza Diseñar con trabajo con poco, Crea un Hacer las
Entender el servicios, consistente,
con lo Haga menos información duro, para luego diseño cosas
context no sitios no
necesario previa hacerlo continúa incluyente abiertas
web uniforme
simple. avanzando
Diseño web : Detalle Principios
1. COMIENZA CON LO NECESARIO : las necesidades reales del usuario y no las de la
organización deben ser el foco de atención. Debemos hacer un análisis a profundidad
para determinar cuáles son las necesidades a las que se les debe prestar atención
antes de comenzar a pensar en el diseño, ya que este será irrelevante si no resuelve
ningún problema

2. HACER MENOS : A veces basta con no hacer nada en lo absoluto. En muchas ocasiones
redundamos presentando opciones repetitivas, o desarrollando soluciones que ya otra
persona ha desarrollado anteriormente en vez de simplemente redireccionar a dicha
solución. Un sitio web funciona mejor si ofrece pocas opciones obvias que el usuario
pueda elegir.

3. DISEÑAR CON INFORMACIÓN PREVIA:

a menudo, un servicio no es diseñado sin tener un
conocimiento previo de cómo funcionará; de seguro existe un servicio homólogo en el
mundo real.

4. HACER EL TRABAJO DURO, PARA HACERLO SIMPLE: cuando se diseña un servicio, es una
excelente idea analizar qué es lo que realmente se necesita hacer y no elegir
soluciones obvias simplemente para cumplir. Un trabajo rápido puede terminar en
una tarea compleja para el usuario el cual prontamente quedará frustrado al
considerar el esfuerzo que debe invertir para utilizar el servicio
Diseño web : Detalle Principios
5. COMIENZA CON POCO, LUEGO CONTINÚA AVANZANDO: la mejor manera de
construir un servicio es comenzando con una pequeña versión de este para luego
continuar con constantes actualizaciones y mejoras al mismo, basado en las
interacciones del usuario real.

6. CREA UN DISEÑO INCLUYENTE: debemos crear nuestro servicio con todas las
personas en mente, sin importar la situación ni estado de las mismas. Esto suele ser
muy trabajoso para un proyecto, sin embargo, con los lineamientos de accesibilidad
(Web Content Accessibility Guidelines WCAG) se hará más simple. Aquellos con
algunas discapacidades físicas deberían poder utilizar el servicio.

7. ENTENDER EL CONTEXTO: no solo diseñar para un tipo de pantalla y crear un

servicio, sino hacer que este servicio pueda ser utilizado en el diario vivir de los
usuarios. El contexto pudiera ser acceder al servicio sin un ratón, acceder desde un
quiosco o una librería. Y no debemos asumir que el usuario tiene una cuenta de
Facebook que necesitará para poder ingresar.
Diseño web : Detalle Principios
8. CONSTRUYE SERVICIOS, NO SITIOS WEB: no todo gira alrededor de tu sitio web. La
solución a una necesidad puede empezar en el sitio web y terminar en la oficina postal
más cercana.

9. SE CONSISTENTE, NO UNIFORME: tanto como sea posible, utiliza el mismo lenguaje

y el mismo diseño, debido a que esto facilitará el reconocimiento a los usuarios. Por
razones naturales, no podemos hacer que nuestra versión móvil luzca idéntico a la
versión de escritorio pero hay que esforzarnos para que lleve los lineamientos de la
institución y que funcione de manera similar de modo que se evite en la medida de lo
posible que el usuario necesite aprender cosas nuevas.

10. HACER LAS COSAS ABIERTAS: cuando es posible, tener una política abierta, que
comparta la experiencia y el resultado puede facilitar el trabajo futuro. Comparte el
código, los datos, el diseño, las ideas, las fallas y objetivos alcanzados. De esta forma
podemos lograr que otras personas interesadas en obtener los mejores resultados
examinen nuestro trabajo y nos otorguen su análisis.
Diseño web : Keep it simple, stupid (KISS) –
Mantenlo simple y estúpido
Es un principio de diseño creado por la marina estadounidense en los años 60s luego que
descubrieron que la mayoría de los sistemas funcionan mucho mejor cuando son simples y
no complejos. Por lo tanto, la simplicidad debe ser el objetivo principal evitando a todo
costo la complejidad. Cuando se cumple con este principio, el usuario muy difícilmente
puede llegar a equivocarse y de hacerlo, el equipo que diseñó el servicio ha fracasado. A
menudo KISS se trata de no hacer cambios ni agregar características innecesarias, tales
como: una animación tediosa, una imagen decorativa que no aporta un valor concreto,
diseños personalizados de los botones y formularios que ponen en riesgo la capacidad de
entendimiento del usuario.
Diseño web : No Rompas la Web
No debería haber sorpresas para los usuarios ni violaciones de las convenciones que ya han
aprendido. Un ejemplo común de esto es el botón de atrás en el navegador. Por costumbre,
lo más normal es que al momento de pulsar este botón, el navegador debería de
trasladarnos a la página/vista anterior, sin embargo, no siempre es así. Muy pocos
desarrolladores toman en cuenta que sus sitios web deben responder adecuadamente ante
el evento del botón atrás que viene por defecto en el navegador, a menudo, apoyándose de
un botón personalizado que haga esta función pero que no es lo adecuado.
Diseño web : Diseño que convence
El diseño debe convencer al usuario de hacer lo que el desarrollador quiere que hagan. Un ejemplo de esto es mostrar al
usuario cuando un producto está casi al agotarse para crear la sensación de que debe aprovechar la oportunidad como
también mostrar otras ofertas interesantes justo antes de realizar la compra.

1. Se claro en todo: se claro de quien es el que envía, el propósito del servicio, que hace este, etc. Coloca la información
más importante de primero y ponla como header para acaparar la atención.

2. Ten cuidado con cuál es la configuración por defecto: según lo que pongas por defecto, controlaras el comportamiento
de las personas y si este no es el mejor interés del usuario puede crear irritaciones innecesarias. Por ejemplo, si
diseñas un botón para ordenar es mejor que el texto diga “agregar al carrito de compras” en vez de “comprar este
artículo”. Si lo piensas, verás que un usuario pensaría menos en colocar un artículo en el carrito de compras que
directamente hacer un pago.

3. Las jerarquías visuales son importantes: has que las operaciones esperadas que el usuario ejecute sean resaltadas e
inconfundibles. El botón de enviar los datos del formulario debería ser más gráficamente notable que el botón de
limpiar todos los campos. Procura que no sea necesario que el usuario tenga que desplazarse hacia abajo para
encontrar el propósito de la página actual, incluso en pantallas pequeñas.

4. Enfócate en el objetivo común entre tú y el usuario: es muy común encontrar sitios webque cuando te encuentras en el
proceso de pago toda la navegación y decoraciones de laplantilla del sitio desaparecen, con el único objetivo de evitar
distracciones innecesarias.

5. Trata de no esforzar demasiado la atención de los usuarios: diseña tu página de modo que se explique a sí misma.
Web Style Guide
by Patrick J. Lynch
and Sarah Horton
Web Style Guide
Según explicamos en clase, este será nuestro libro que servirá de
base para todo nuestro cuatrimestre.

El contenido de la 3era. Edición se encuentra publicado en la

dirección : http://webstyleguide.com/index.html y actualmente los
autores estan trabajando en la 4ta version del mismo.

El libro contiene una descripción muy clara y precisa de todo lo que

se debe tener en cuenta al momento de trabajar con un proyecto de
naturaleza WEB para empresa de todos los sectores y tamaños, ya
que la perspectiva va desde la gestión y formación del equipo hasta
los aspectos tecnicos a tomar en cuenta para la creación y puesta en
producción del product final.

Durante toda esta presentación estaremos detallando y explicando

el contenido del libro para ser debatido en clases.

Mucha suerte !!!!

 1. Process
2. Universal Usability
3. Information Architecture
4. Interface Design

Web Style 5. Site Structure

Guide 6. Page Structure

Contenido de Libro 7. Page Design
8. Typography
9. Editorial Style
10. Forms and Applications
11. Graphics
12. Multimedia
Web Style Guide- Primer Paso : Proceso
El primer paso en el diseño de cualquier sitio web es definir sus metas. Sin una misión y
objetivos claramente establecidos, el proyecto flotará, se atascará o pasará por un punto final
apropiado.

La Planificación cuidadosa y con un propósito claro son las claves para el éxito en la construcción
de sitios web, especialmente cuando se trabaja como parte de un equipo de desarrollo.

Planificación de un sitio web es un proceso de dos partes:

1. Seleccionar el equipo de desarrollo, analizar sus necesidades y objetivos, y trabajar a través

del proceso de desarrollo perfeccionar sus planes.

2. A continuación, crea un documento de documento de proyecto (acta de constitución) que

detalla lo que piensa hacer y por qué, qué tecnología y contenido necesita, cuánto tiempo
tomará el proceso, qué gastará para hacerlo y cómo evaluará los resultados de su esfuerzos.
El documento de la carta del proyecto es crucial para crear un sitio exitoso: es el plan para
su proceso y la piedra de toque que usará para mantener el proyecto enfocado en los
objetivos y entregables acordados.
WebStyle Guide-Proceso
ACTA CONSTITUTIVA DE UN PROYECTO

¿Qué es el acta de constitución del proyecto?

El acta de constitución de un proyecto documenta las necesidades del área de

negocio (el cliente) que dieron origen a la iniciativa, las premisas (supuestos),
restricciones (de tiempo, presupuesto, etc.), los requisitos de alto nivel del
cliente y los requisitos de alto nivel del producto, servicio o resultado que el
proyecto debe proporcionar.
Siguiendo con la definición del acta de proyecto en la guía del PMBOK 5ta
edición, el acta de constitución establece la relación de colaboración entre la
organización solicitante del proyecto y la organización ejecutora. Cuando el
proyecto es contratado externo, generalmente se opta por un contrato formal
para establecer este acuerdo, sin embargo, el acta de constitución del
proyecto no es ese contrato. El establecimiento de un contrato con un ente
externo suele comenzar con la solicitud y presentación de una propuesta de
servicios.
Asimismo, el acta de constitución de un proyecto se utiliza para establecer
acuerdos internos en el seno de la organización para asegurar la entrega
adecuada de acuerdo al contrato.
Web Style Guide- Primer Paso : Proceso
The Site Development
Team
(Equipo de Desarrollo Web)
Fuente Imagen : https://www.h2tic.com/
La importancia estratégica y el presupuesto del proyecto para sus esfuerzos en
la web determinarán en gran medida el tamaño y la profundidad de habilidad
de su equipo de desarrollo de sitios web. Sin embargo, incluso para un proyecto
más pequeño, necesitará cubrir las disciplinas del equipo central. En la mayoría
de proyectos pequeños a medianos, una persona puede manejar múltiples
tareas o alguien con conocimientos especializados (diseño gráfico, por ejemplo)
es contratado para tareas específicas. Muchos gerentes a quienes se les asigna
la responsabilidad de crear un sitio web no tienen el lujo de elegir a los
miembros del equipo de especialistas. Inventar las habilidades y aptitudes en el
equipo que monta, y considerar la externalización cuidadosa para proporcionar
cualquier experiencia que su equipo carece.
Los conjuntos de habilidades básicas que se necesitan en un equipo de
desarrollo de sitios web son:
1. Estrategia y planificación
2. Gestión de proyectos
3. Arquitectura de la información y diseño de la interfaz de usuario
4. Diseño gráfico para la web
5. Tecnología web
6. Producción del sitio
 Web Style Guide- Primer Paso : Proceso
The Site Development Team

Project
Web Project Information Web technology
stakeholder or Usability Lead Art Director
Manager architect lead
sponsor

Site
Production
Lead Site Editor
 PROJECT STAKEHOLDER OR SPONSOR
El patrocinador del proyecto o parte interesada es la persona o grupo responsable de
iniciar el proyecto del sitio web. En la mayoría de los casos, el patrocinador es el
cliente para el trabajo de desarrollo del sitio web, pero en proyectos de
PROJECT STAKEHOLDER OR departamento más pequeños, el administrador patrocinador y el gerente de proyecto
SPONSOR web pueden ser la misma persona. El patrocinador proporciona la VISIó
ESTRATEGICA general y el propósito del proyecto de desarrollo del sitio, aprueba el
contrato o el plan de trabajo, es responsable del presupuesto y del calendario del
proyecto y proporciona los recursos para apoyar el trabajo del equipo de desarrollo
del sitio.
 WEB PROJECT MANAGEMENT

1. Coordina y comunica la implementación táctica cotidiana del proyecto,

actuando dentro de las restricciones de las cartas y objetivos del proyecto,
presupuesto del proyecto, calendario de desarrollo y objetivos de calidad
establecidos en las etapas de planificación.

2. Es el miembro del equipo responsable en última instancia de mantener las

WEB PROJECT MANAGEMENT actividades generales del equipo centradas en los objetivos estratégicos del
sitio y los resultados acordados, y él o ella monitorea continuamente el alcance
de las actividades del proyecto para asegurar que el equipo se mantenga "a
tiempo y dentro del presupuesto.

3. Actúa como el principal contacto entre el equipo web y el patrocinador y

gestiona la comunicación general entre los elementos creativos, técnicos y de
producción del equipo del sitio web.

4. Los directores de proyecto crean y mantienen los documentos de planificación

y estrategia del proyecto, hojas de cálculo presupuestarias, planificaciones de
proyectos y diagramas de Gantt, notas de reunión, registros de facturación y
otra documentación del proyecto que detalla las actividades del equipo

En proyectos web más grandes, el gerente del proyecto normalmente no forma parte del equipo de producción práctico, pero en
proyectos internos más pequeños el patrocinador, el líder del diseño o el jefe técnico también pueden actuar como el gerente del
proyecto para el equipo del sitio.
 LIDER DE USABILIDAD

1. Como principal defensor del usuario en el equipo de desarrollo, tiene la

responsabilidad de las pruebas con los usuarios, la investigación el desarrollo
de los mismos, así como que sean aplicados los estándares universales de
usabilidad para el proyecto del sitio.

2. En las etapas iniciales de diseño, es responsable de realizar entrevistas,

USABILITY LEAD (Líder de estudios de campo y pruebas de usabilidad para informar los requisitos del
usabilidad) proyecto. Actúa como el principal contacto entre el equipo web y el
patrocinador y gestiona la comunicación general entre los elementos creativos,
técnicos y de producción del equipo del sitio web.

3. En las etapas finales de un proyecto, evalúa la eficacia de los diseños mediante

estudios de campo adicionales y pruebas de usuario y asegura que se cumplan
los objetivos universales de usabilidad.

El rol del líder de usabilidad es dar forma a la experiencia general del usuario. equipo del sitio.
Una vez que los diseños se conceptualizan en forma de diagramas, wireframes y prototipos, el líder de usabilidad prueba los diseños
con los usuarios y reúne comentarios para los diseñadores y desarrolladores del sitio.

Luego de la puesta en producción del site, el líder de usabilidad con los demás miembros del equipo deberán responder a las
siguientes preguntas…
¿El sitio cumple las metas? ¿Están los usuarios satisfechos con el diseño? ¿Son más los usuarios que visitan el sitio?. ¿El sitio produce
más ingresos?
 ARQUITECTO DE INFORMACION

1. Como principal defensor del usuario en el equipo de desarrollo, tiene la

responsabilidad de las pruebas con los usuarios, la investigación el desarrollo
de los mismos, así como que sean aplicados los estándares universales de
ARQUITECTO DE INFORMACIÓN usabilidad para el proyecto del sitio.

2. En las etapas iniciales de diseño, es responsable de realizar entrevistas,

estudios de campo y pruebas de usabilidad para informar los requisitos del
proyecto. Actúa como el principal contacto entre el equipo web y el
patrocinador y gestiona la comunicación general entre los elementos creativos,
técnicos y de producción del equipo del sitio web.

3. En las etapas finales de un proyecto, evalúa la eficacia de los diseños mediante

estudios de campo adicionales y pruebas de usuario y asegura que se cumplan
los objetivos universales de usabilidad.

metas? ¿Están los usuarios satisfechos con el diseño? ¿Son más los usuarios que visitan el sitio?. ¿El sitio produce más ingresos?
 LA PRINCIPAL RESPONSABILIDAD DEL DIRECTOR DE ARTE ES

1. La apariencia general del sitio web, estableciendo la

tipografía del sitio.
DIRECTOR DE ARTE
2. El diseño de interfaz visual, las normas de la paleta de
colores.

3. El director de arte suele ser la persona responsable de

asegurar que el nuevo trabajo de diseño web sea consistente
con cualquier identidad corporativa establecida y estándares
de interfaz de usuario.

En proyectos más pequeños, un director de arte web con experiencia suele asumir la arquitectura de la información y los roles de
usabilidad, además de dirigir el diseño visual de un sitio.
 EL WEB TECHNOLOGY LEAD

1. Debe tener una amplia comprensión de los

entornos web, lenguajes de desarrollo y
WEB TECHNOLOGY LEAD
frameworks de desarrollo web y base de datos.

2. Actúa como puente, traductor y comunicador

entre los tecnólogos y los diseñadores y el equipo
de gestión de proyectos.
Como parte del proceso de planificación del sitio, el Web Technology Lead crea los planos generales para la recopilación de tecnologías que soportarán el framework de
tecnología de sitio web elegido, incluyendo la gestión de contenido, RSS (Really Simple Syndication) u otros formatos de contenido XML, integración y soporte de bases de
datos, programación web personalizada e integración con otras aplicaciones o bases de datos que proporcionan contenido o características interactivas al sitio web.

El Web Technology Lead proporciona la arquitectura de procesamiento de datos primaria para el proyecto, determinando las especificaciones técnicas para el marco
general de desarrollo web, evaluando la estrategia y los objetivos de desarrollo y adaptando esas necesidades a soluciones tecnológicas apropiadas.

En proyectos de mayor envergadura, el Web Technology Lead suele administrar equipos de programadores, ingenieros de redes o servidores, administradores de bases de
datos, testers de software y otros profesionales de la tecnología de la información que apoyan a los equipos de producción y diseño
 SITE PRODUCTION LEAD

1. Responsable de convertir los mockups, los diseños, y los wireframes iniciales

de la página del Web en las páginas del html.

SITE PRODUCTION LEAD 2. Gestiona el trabajo de construcción de las páginas del sitio, directamente en
HTML o en un sistema de gestión de contenido web (cms) software de
producción de sitios como Adobe Dreamweaver.

3. En coordinación con el equipo técnico del sitio, suele ser responsable de crear
las plantillas maestras en xhtml (Extensible HyperText Markup Language) y
Cascading Style Sheets (css),validar el código de la página y ensamblar el
trabajo de los arquitectos de la información y diseñadores gráficos del sitio en
las plantillas terminadas de la paginación listas para ser llenado con el
contenido.

En proyectos de mayor envergadura, el site production lead generalmente administra un equipo de diseñadores web que llenan páginas con contenido,
integrando texto terminado, gráficos y elementos audiovisuales en cada página y enlazando páginas con el sitio web más grande y (normalmente) con otras
páginas web en la página, también gestiona el trabajo de los editores de sitios y redactores.
 SITE EDITOR

1. Tiene la responsabilidad general del contenido escrito y la calidad editorial del

sitio terminado.

2. Él o ella crea el tono editorial para el sitio web, determina directrices de estilo
y trabaja con clientes y expertos en el dominio de contenido para recopilar,
organizar y entregar el texto terminado al equipo de producción.

3. En equipos más pequeños, entrevista a los expertos del dominio para crear
SITE EDITOR contenido y puede ser responsable de crear noticias y material para el sitio.

4. Los editores experimentados también desempeñan un papel cada vez más

importante en los aspectos técnicos y de producción del contenido del sitio,
garantizando que el contenido escrito de la organización patrocinadora se
proporcione a tiempo, en el formato editorial y técnico especificado y con
suficiente calidad para cumplir con las metas del sitio. Este aspecto técnico del
formato de contenido es particularmente importante en sitios donde el
contenido se entrega en última instancia a través de un cms, en xml o desde
vínculos dinámicos a una base de datos de contenido.

Debido a que la mayoría de los esfuerzos de optimización de motores de búsqueda se basan en un uso cuidadoso y consistente del lenguaje de palabras clave
y del marcado de encabezado, el editor de web es el miembro del equipo que más probablemente conducirá los esfuerzos cotidianos para hacer que el sitio
sea amigable para la búsqueda como sea posible.
Mantener el sitio optimizado tanto para la visibilidad del motor de búsqueda local (utilizando sus propias herramientas de búsqueda local dentro de su sitio)
como para mantener los sitios públicos al máximo visibles para los motores de búsqueda generales como Google y Yahoo! son componentes estratégicos
cruciales de hacer el nuevo contenido accesible y encontrar para su audiencia.
Web Style Guide- Segundo Paso : Universal
Usability
UNIVERSAL USABILITY
 UNIVERSAL USABILITY
La usabilidad es una medida de efectividad. Describe cómo las herramientas y las fuentes de información
son eficaces en ayudarnos a realizar tareas. Cuanto más útil sea la herramienta, mejor seremos capaces de
alcanzar nuestros objetivos. Muchas herramientas nos ayudan a superar las limitaciones físicas haciéndonos
más fuertes, más rápidos y más perspicaces. Pero las herramientas pueden ser frustrantes o incluso
UNIVERSAL USABILITY incapacitantes. Cuando nos encontramos con una herramienta con la que no podemos trabajar, ya sea
porque está mal diseñada o porque su diseño no tiene en cuenta nuestras necesidades, estamos limitados en
lo que podemos lograr.
En el diseño de sitios web nuestro trabajo es reducir las limitaciones funcionales a través del diseño. Cuando
apuntamos a la usabilidad universal, mejoramos la calidad de vida para más personas más del tiempo. En la
web, podemos trabajar hacia la usabilidad universal adoptando un enfoque de diseño universal para la
usabilidad.
Aquí cubrimos los conceptos, principios y procesos para la usabilidad universal.

En proyectos de mayor envergadura, el site production lead generalmente administra un equipo de diseñadores web que llenan páginas con contenido,
integrando texto terminado, gráficos y elementos audiovisuales en cada página y enlazando páginas con el sitio web más grande y (normalmente) con otras
páginas web en la página, también gestiona el trabajo de los editores de sitios y redactores.