INSTITUTO DEPARTAMENTAL DE

OCCIDENTE

I AVANCE

Diseño Web II
12º GRADO BTPI
GRUPO Nº 1-2-3
 Diseño Web II-12 BTPI-1-2

I Diseño de páginas
Introducción al diseño web
Definición
El diseño es fundamental para el éxito de un sitio web. Se entiende por diseño la forma y el
estilo de la página, es decir, no basta con crear una página mediante HTML y CSS, sino que la
página debe resultar útil y atractiva para el usuario.

Entran dentro del diseño, aspectos tales como la maquetación, los colores, la distribución de
elementos, el tamaño y forma de los mismos, y otros elementos del estilo y composición del
sitio.

Un buen diseño
El éxito de un sitio web no depende sólamente de que se muestren buenos contenidos,
sino que gran parte del éxito se debe a un buen diseño. Una página con un buen diseño debe
ser a la vez útil y atractiva, para ello debemos tener en cuenta no sólo la usabilidad o
funcionalidad, sino también la estética. Al crear una página debemos pensar sobre todo en el
punto de vista del usuario, es decir que a éste la página le resulte fácil de usar, y atractiva, no
sólo por sus contenidos, sino también visualmente.
Un buen diseño no es sólo cuestión de aplicar el buen gusto y el sentido común. Sin
embargo esto puede no ser suficiente ya que en el diseño, existen una serie de normas y
directrices que van más allá de gustos personales o de modas.

Limitaciones del diseño web

Como en cualquier otro tipo de diseño, el diseño web también tiene sus limitaciones, hay
una serie de condicionantes que depenen del medio o material con el que diseñamos, así como
el tipo de diseño.
En el diseño web dependemos de un medio, que es Internet, así como de unos lenguajes
de programación: HTML, CSS, Javascript, PHP. Estos condicionantes hacen que el diseño web
tenga una serie de características.
 Descarga desde un servidor: Las páginas web deben descargarse desde un servidor web
remoto, esto hace que el ancho de banda de la conexión del usuario sea un factor importante.
Tendremos que tener en cuenta el tamaño o "peso" de la página (Kb que ocupa), para que ésta
no tarde mucho en cargarse.
 Tamaño de las imágenes: El "peso" de la página depende del "peso" de la suma de todos
sus componentes o archivos. Sin duda los archivos de mayor peso son las imágenes y archivos
multimedia. No podemos prescindir de las imágenes en la página, pero sí que podemos reducir
su peso sin disminuir por ello su calidad.
 Los Navegadores: Las páginas web son archivos que deben ser visualizados en unas
aplicaciones llamadas navegadores. No todos los navegadores visualizan las páginas de la
misma manera. A esto se añade que cada vez más usuarios se conectan a Internet a través de
otros dispositivos que no son ordenadores (móviles, tablets, I-Phones, etc); Las páginas puede
que no se visualicen de la misma manera en estos dispositivos.
 Interactividad: Toda página tiene una serie de elementos interactivos que debemos tener en
cuenta. Algunos de éstos suelen ser listas de enlaces, formularios, u otros elementos que
pueden hacer la página más dinámica. La colocación de estos elementos debemos hacerlo de
forma que estén integrados en la página.
 Otros elementos: entre ellos, la resolución de pantalla del usuario, el tipo de letra empleado,
los colores y líneas dominantes, la distribución de los contenidos, etc.

Utilidad y estética
Como utilidad se entiende también la funcionalidad y la usabilidad, es decir la página
debe ser fácil de ver y de utilizar por el usuario, es decir, que el usuario encuentre en un primer

1
 Diseño Web II-12 BTPI-1-2
vistazo lo que busca, que los enlaces y demás elementos estén claros, de forma que el usuario
no abandone la página por falta de claridad.
La estética de una página tiene que ver con la maquetación, los colores, la distribución de
los elementos, tipo de letra, etc. Todo esto debe estar en función de los contenidos, del tipo de
usuario al que va dirigida la página, del tipo de sitio web al que pertenece, etc. La página debe
resultar atractiva para el usuario, de forma que su diseño esté en concordancia con los
contenidos.

SEO friendly:
El éxito de una web no reside solo en que esté bien diseñada, sino también en que se
posicione bien en los buscadores. El SEO es una parte muy importante del éxito de una web
pues los usuarios clican en aquellos resultados que se muestran primero. El buen diseño de
una web también está relacionado con si este permite que Google y demás lean la información
de manera sencilla o no.

FORMAS DE CONSTRUIR UN SITIO

Tenemos básicamente dos formas de construir un sitio, o aprendiendo los lenguajes y
códigos en los que están hechas las páginas, o por medio de una serie de aplicaciones llamadas
"Gestores de contenido".

Ventajas o desventajas de cada uno de estos sistemas

Lenguajes de programación
Aunque en principio puede parecer más costoso, utilizar lenguajes de programación da
más libertad para construir el sitio a nuestro gusto, Nos aseguramos de que nuestro sitio no se
parecerá a ningún otro, y lo hacemos completamente como queremos.
Con los lenguajes de programación controlamos en todo momento lo que va a aparecer en
nuestra web, tanto en contenido como en estilo y maquetación. Nada se escapa a nuestro
control y las páginas aparecerán exactamente con el diseño que hayamos dado.
Si realmente somos exigentes con el diseño, o queremos algo distinto del resto, lo mejor
es hacer nuestra web con lenguajes de programación, ya que sólo así estamos controlando lo
que realmente tenemos en nuestro sitio.
Como desventaja tenemos que si bien incorporar contenido estático en la página (texto,
imágenes, enlaces, etc) puede resultar fácil (uso de HTML y CSS), si queremos incorporar
contenido dinámico la cosa se complica, ya que tenemos que utilizar otros lenguajes de
programación más complejos, como Javascript o PHP.
Gestores de contenido
Estas son aplicaciones que podemos encontrar en la web para poder crear nuestra página
web. La mayoría de ellos están diseñados para crear un tipo de sitios web específicos que son
los blogs, aunque también pueden servir para crear una web personal.
Sin duda si lo que pretendes crear es un blog, al que puedes añadirle algunas páginas,
esta es la mejor opción, ya que no hace falta aprender ningún código.
Como desventaja está que las páginas se realizan a partir de plantillas, y aunque estas son
personalizables y hay multitud de plantillas para elegir, el diseño está supeditado a éstas. No
podemos elegir algunas cosas, y otras, vienen por defecto. Si no eres muy exigente con el
diseño, es posible que esta sea la mejor opción, pero si quieres algo más personalizado o
distinto es difícil encontrar algo completamente a tu gusto.

II Diseño De Un Sitio Web

Características y elementos básicos
Los elementos fundamentales son:
 Claridad en los objetivos del sitio.
 Información básica correspondiente al contenido.
 Selección de un nombre de dominio correcto.
2
 Diseño Web II-12 BTPI-1-2
 Selección de la tecnología para el diseño y la programación.
 Selección adecuada de un alojamiento Web (hosting)
 Claridad de los buscadores, directorios de Internet y el SEO, optimización para los motores de
búsqueda.
 Realización de un diseño en función de los requerimientos del sitio y de los usuarios.
 La navegabilidad.
 Realización de la programación en determinación de los requerimientos del sitio y de los
usuarios.
 Aplicación de técnicas de SEO para lograr una mayor visibilidad en Internet.
 Actualizar los contenidos periódicamente.

Características del Diseño Web Exitoso

Las Características del Diseño Web pueden ser la diferencia entre el éxito y el fracaso de tu
emprendimiento. Hay dos factores claves a la hora de diseñar uno es las expectativas de los
clientes y por el otro, diseñadores que trabajan con lo básico y/o más económico para adaptarse
a la solicitud de sus clientes.

Características del Diseño Web

1. Objetivos Claros
Definitivamente, tu sitio web debe estar centrado en tus objetivos. Debes diseñar tu estrategia
de forma que el sitio web sea efectivo y te genere beneficios. Por ejemplo, si requieres que los
usuarios llenen un formulario, este debe ser de fácil de encontrar y de llenar.
2. Calidad del Contenido – Una de las Principales Características del Diseño Web
Exitoso
Siempre ten en cuenta que los usuarios que usan los motores de búsqueda están “buscando”
información de calidad. Incluye información relevante, bien y sencillamente redactada y por
supuesto, debe ser confiable.

Google proporciona directrices generales para esta tarea pero recuerda que “Más Contenido no
significa Mejor Contenido”. Desarrolla el contenido principalmente para los usuarios de tu sitio
web y no para los motores de búsqueda. Haz que su sitio se destaque de otros en su campo.
Tu sitio web debe proporcionar información útil y más valiosa que los otros. Debe ser creíble,
mostrar fuentes originales, bibliografías, citas, reseñas, testimonios, etc. Por otro lado, siempre
debes analizar tu sitio para verificar si ha sido hackeado y eliminar contenido pirateado tan
pronto como aparezca.
3. Llamadas a la Acción (CTA) – Importante Característica Web
Incluye “Llamadas a la Acción” efectivas para que logres una mayor cantidad de conversiones.
Elementos como Formularios, Consultas Gratuitas, Solicitudes de Cotización, etc. son
excelentes oportunidades para hacer Llamadas a la Acción (CTA). Incorpóralos en el diseño de
tu sitio web de forma estratégica.
4. Diseño Concepto
Tu sitio web debe ser atractivo pero el diseño debe ser lo más sencillo y plano posible. Evita el
uso de sombras aunque si puedes utilizarlas de forma sutil. Los visitantes llegan a tu sitio
buscando algo y al encontrarse con un sitio muy adornado, podrían irse al no encontrar con
facilidad lo que fueron a buscar.
Una de las Característica de Páginas Web Exitosas es que son simples, atractiva pero sin
excesos.
También es efectivo usar espacios en blanco, es decir, áreas vacías aunque no necesariamente
deben ser de color blanco. Por ejemplo, espacios entre las imágenes y los bloques de texto.
Son efectivos para que tu sitio no parezca abarrotado ni desagradable. Así, los visitantes
dirigirán con mayor facilidad su atención a lo que realmente es importante.

3
 Diseño Web II-12 BTPI-1-2
El uso de sonidos como campanas y silbidos no es buena idea pues no le agregan valor al
diseño y causa distracción.
En resumen, una de las Características del Diseño Web Exitoso es implementar en los diseños,
un equilibrio en el uso de contenido, gráficos e imágenes.
A veces, lo convencional es lo mejor – Características Web Tradicionales
Aunque ser único y original es genial, tu sitio debe adaptarse a las costumbres de los usuarios.
Por ejemplo, el menú de navegación debe colocarse en la parte superior y la información de
contacto en la parte inferior. Los enlaces siempre debes resaltarlos con color diferente o
cambiar de color cuando el usuario se desplace sobre él. ¡Ah, y siempre usa el icono del carrito
de compras convencional!.
Igual ocurre con las palabras. Por ejemplo, no es usual la palabra “comuníquese”, lo
convencional es “contáctenos”.
Tu sitio web debe ser fácilmente entendible para los usuarios a fin de facilitar las conversiones.
Los Colores
Puedes utilizar colores fuertes pero con limitación. Los colores fuertes serán llamativos y
ayudarán a tu negocio.
Pero, no utilices demasiados colores, en el diseño. Lo óptimo son dos o máximo tres colores
principales. Luego, para no repetir el mismo esquema en todas las páginas, experimenta con
tonos y matices de los colores principales.
Además de tener en cuenta la imagen de tu marca y los Colores de tu Logo, investiga el efecto
psicológico de los colores sobre las personas. Por ejemplo, los tonos cálidos como rosas y
amarillos nos energizan, mientras que los tonos fríos como el azul, el verde y el violeta nos
calman. El rojo y el naranja abren el apetito y por eso son usados por empresas de alimentos
en sus imágenes.
Coherencia
Los elementos del diseño deben ser coherentes en todas las páginas del sitio web. La barra de
navegación siempre en el mismo lugar, la misma paleta de colores, la misma tipografía. Los
temas deben ser coherentes con tu marca, tu sitio web y los anuncios publicitarios.
Imágenes
Las imágenes hablan con los visitantes de tu sitio web, les transmiten sensaciones. Por tal
razón es una de las principales Características del Diseño Web Exitoso.
Deben ser de excelente calidad, alta resolución y ser coherentes con tu sitio.
El uso de infografías es genial. Puedes utilizar algunas en vez de imágenes pues transmiten
gran información y son sencillas de leer y entender.
La imagen principal debe ser grande y atractiva, con texto en vez de botones.
Por otro lado, si las imágenes de productos son grandes será más sencillo resaltar las diferentes
características de un producto. Son imágenes que pueden escanearse. Además, los visitantes
comprenderán más fácilmente los beneficios de su producto.
Nuestro consejo es que trates de utilizar la regla de los tercios que dice que si tuvieras que
colocar una cuadrícula de tres por tres sobre una imagen (o página web), los puntos más
llamativos serían los puntos donde se intersecan las líneas de la cuadrícula. Esto es porque la
imagen es más atractiva si no es simétrica.
La Tipografía – Características del Diseño Web
La tipografía también forma parte de la imagen de tu marca. Toma en cuenta las siguientes
reglas que aunque no son definitivas, si son bastante relevantes.
 De ser posible, utiliza una fuente única que caracterice tu marca, seria, elegante, divertida
o sofisticada. Hoy en día hay una mayor cantidad disponible de ellas.
 Las fuentes adornadas y cursivas dan un aire de sofisticación y seriedad.
 Las fuentes Sans Serif proporcionan una sensación más moderna y optimizada.
 Utiliza las fuentes Sans Serif para el texto del cuerpo, un máximo de tres tipos de letra y un
tamaño de fuente de 12-16 pts.
 Las fuentes Sans Serif como Arial y Verdana tienden a ser más fáciles de leer en línea que
las fuentes Serif como Courier y Garamond.
4
 Diseño Web II-12 BTPI-1-2
 Trata de redactar párrafos con un máximo de 18 palabras o 50-80 caracteres por línea y
mantén los párrafos cortos y separados con espacios en blanco estratégicos.
 Dependiendo de tu audiencia, utiliza tamaños y colores acorde con ella.
Menús
Una de las Características del Diseño Exitoso se encuentra en el diseño del menú. Aunque la
tendencia hasta hace poco fue la de usar menús visibles grandes con muchas opciones,
actualmente se usa el menú oculto o el tipo hamburguesa. De esta forma no se ocupa mucho
espacio y el visitante irá hacia dónde quiere ir con mayor facilidad. Incluso en Google Chrome
puedes ver un menú de hamburguesas en el lado derecho.
5. Diseño de Tarjetas
Las Tarjetas ayudan a visualizar el producto ofrecido de forma que el visitante puede consumir
aquellas que le interesan. Tu sitio web se mantendrá bien organizado. Es ideal para
negocios B2B y B2C. Un ejemplo de este uso es el que aplica Pinterest.
Ten en cuenta que tus tarjetas deben ser o adaptables, es decir, deben poder verse en cualquier
tipo de dispositivo móvil.
6. Navegación Clara y Sencilla – Básica Característica Web
Los visitantes deben encontrar fácilmente lo que están buscando. Tu sitio debe seguir un patrón
lógico y fácil de seguir.

Si tienes una gran cantidad de contenido en tu sitio web, es buena opción utilizar cuadros de
búsqueda o llamadas de acción que lleven a contenidos específicos.

Diseña tu sitio pensando en el Formato Tipo “F” que utilizan las personas para leer los sitios
web de acuerdo con el estudio realizado por Ramón Salaverría y Francisco Sancho y expuesto
en el Libro “Primer manual en español sobre el diseño periodístico en internet”. Los visitantes
“escanean”, no leen linealmente. Primero, leen de forma horizontal la parte superior de la
pantalla. Luego, estando a la izquierda, bajan la mirada y realizan un segundo vistazo de forma
horizontal. Por último, visualizan la parte izquierda de la página. Dependiendo del interés,
regresan a través de la página una o más veces.
7. Velocidad de carga del sitio web
Si la velocidad de carga de tu sitio web es lenta, es muy probable que tus visitantes se aburran
y lo abandonen. Por esta razón, esta es una de las Características del Diseño Web que hacen
la diferencia entre el éxito y el fracaso.

Algunos factores que afectan la velocidad de carga son:

 El tráfico del sitio web.
 Imágenes no optimizadas, siempre optimiza, incluso a las más pequeñas.
 Archivos no comprimidos, para superar este factor, habilita la compresión para minimizarlos
y que se abran más rápido.
 Reduce las solicitudes HTTP en las herramientas de desarrollo de Google Chrome.
 Selecciona el servicio de hosting adecuado.
Si tu sitio web tarda más de tres segundos en cargar, podrías estar perdiendo clientes valiosos.
Puedes utilizar herramientas como GTmetrix, Pingdom o Pagespeed Insights de Google para
verificar el rendimiento de tu sitio web y ver cómo puede mejorar.
8. Responsive o Adaptable
Una de las Características del Diseño Web Exitoso es que debe ser compatible con todos los
diferentes sistemas operativos, navegadores y dispositivos.
El usuario debe poder ver bien el sitio web independientemente de si accede usando su PC, su
tablet o su teléfono móvil.
Necesitas un diseño flexible y responsive o adaptable para maximizar las conversiones.
9. El Sitio Web debe estar SEO Optimizado para los Motores de Búsqueda /
Características del Diseño Web que potencian SEO

5
 Diseño Web II-12 BTPI-1-2
Para lograr atraer a más visitantes, un sitio web debe estar optimizado para que los motores
de búsqueda como Google y Bing lo encuentren.
La técnica SEO, se refiere a la metodología que se utiliza para incrementar la cantidad de
visitantes a un Sitio Web mediante la mejora de las clasificaciones en los resultados de
búsqueda “gratuitos”, “orgánicos”, “editoriales” o “naturales” de buscadores como Google,
Yahoo y Bing.
10. Videos
Entre las Características del Diseño Web que marcan la diferencia, los videos son
definitivamente valiosos.
Los Videos de fondo que se reproducen automáticamente en segundo plano atraen al visitante
desde el momento que entra al sitio web. En ellos puedes explicar las características de tu
empresa y los beneficios que ofreces. Son más fáciles de procesar que el texto.
También, puedes incluir videos cortos explicando los beneficios de un producto. Sin embargo,
deben ser cortos, si se extienden serán abrumadores y no lograrán el efecto deseado.
Esta característica ayudará a potenciar el SEO de tu sitio web.
11. Herramientas Analíticas – Esencial dentro de las Características del Diseño Web
La mejor forma de conocer la efectividad de tu sitio web y cómo mejorarlo, es analizar los
resultados analíticos. Información como la cantidad de usuarios que lo visitan, horarios de
mayor tráfico, efectividad de las palabras clave utilizadas y las conversiones son importantes
para analizar las estrategias y hacer las modificaciones que sean necesarias.
Herramientas como Google Analytics y Google Search Console instaladas en tu sitio, te
informarán muchos datos interesantes para tu negocio.
12. Redes Sociales
Una de las Características del Diseño Web Exitoso es que debe estar integrado a las redes
sociales. De esta forma, se logra mejorar el tráfico en el sitio y lograr más conversiones.
Recuerda siempre incluir contenido relevante en tus redes sociales.
13. Seguridad
Esta es la última pero no menos importante de las Características del Diseño Web Exitoso que
hemos presentado. Todo sitio web debe contar con excelentes protocolos de seguridad y
privacidad para proteger tanto al sitio web como a la información que recopila de clientes y
usuarios. Para lograrlo, puedes instalar un Certificado SSL (Secure Sockets Layer), con el cual
se logra obtener una conexión encriptada y así pues, establecer confianza. Con el uso de
un Certificado SSL, lograrás crear un entorno de confianza en el cual tus clientes potenciales
se sientan seguros al entregar su información y realizar alguna conversión. Por ejemplo, si el
sitio web es seguro, Google muestra el icono de un candado cerrado en la barra del navegador,
de lo contrario, el usuario verá una frase que dice que el sitio no es seguro.

6
 Diseño Web II-12 BTPI-1-2
ASIGNACIONES I AVANCE II SEMESTRE
Instrucciones: Realice cada actividad del contenido que se adjunta y presentarlo en la fecha indicada
1. Realizar un Resumen del contenido desarrollado donde explique y analice las Limitaciones del diseño
web.
2. Realizar un Mapa Conceptual de las Características del Diseño Web
3. Desarrollan trabajos de investigación sobre la historia del diseño web. Presentan información en un
video con duración de 5 minutos (incluir imágenes, información, voz).
4. Desarrollan trabajos de investigación y resume sobre software de diseño de sitios web.
5. Realizar en su cuaderno la siguiente guía de estudio y presentarla cuando se presente a clases.
Guía de Trabajo Teórica
Instrucciones: Lea detenidamente cada uno de los enunciados y responda en forma clara y detallada en
su cuaderno, lo que a continuación se le pide.
1. ¿Qué es el diseño?
2. ¿Qué aspectos entran el diseño?
3. Defina la utilidad de un sitio web
4. ¿Con que tiene que ver la estética de una página web?
5. Defina las limitaciones del diseño web
6. Enumere las reglas de la tipografía que son bastante relevantes
7. Enumere las ventajas y desventajas de los lenguajes de programación:
8. Defina que son los gestores de contenido
9. Enumere las ventajas y desventajas de los Gestores de contenido:
10. Enumere los elementos fundamentales del Diseño Web:
11. Realice un resumen sobre las características del Diseño Web.
12. ¿Qué es El SEO?
13. Investigue sobre el programa Wix y los pasos como utilizarlo.
14. Investigue sobre el programa Weebly y los pasos como utilizarlo.