Este documento presenta conceptos básicos sobre diseño web como gestores de contenido, programas de diseño, lenguajes de programación, WordPress y elección de dominio y hosting. Explica los fundamentos de diseño UX/UI como taxonomía, ontología, arquitectura web, wireframing y principios de diseño visual como la ley de Gestalt. Finalmente, propone una actividad práctica de investigación y elaboración de wireframes.

1. Diseño Web I
Conceptos básicos

2. Introducción
Nociones básicas orientadas al diseño de un wireframe
1
2

3. Objetivos
¿Para qué?
Presencia online y
dar a conocer mi
producto
¿Qué secciones
tendrá?
Home
About
Portfolio
Contacto
Blog
¿Qué funciones
necesitaré?
Blog
Portfolio
Anuncios
Formularios, etc
3

4. Gestores de contenido
CMS (Content Management System)
Web content management (WCM): WordPress, Joomla, Ghost, Blogger, Wix…
Learning Management Systems (LMS): Moddle, Canvas LMS, Chamilo LMS…
Enterprise content management (ECM): LifeRay, Typo 3, Sitecore CMS…
CMS especializados en comercio electrónico: Magento, Shopify, Opencart,
Prestashop, etc.
CMS para crear Wikis: Mediawiki, TikiWiki…
CMS con foco en foros: phpBB, vBbulletin….
Un sistema de gestión de contenidos (CMS, por sus siglas en inglés) es un programa que permite a uno o varios usuarios
crear, editar y publicar contenido web (texto, vídeo, imagen) sin conocimientos de programación en una interfaz gráfica de
usuario.
4

5. 5

6. Programas de diseño Web
Adobe Dreamweaver
Sugerencias de código para los usuarios
nuevos y ayudas visuales que reducen los
errores y mejoran la legibilidad.
Adobe XD
Diseño de prototipos de interfaces que
servirán de guía para que los desarrolladores
puedan materializar estos prototipos y
convertirlos en aplicaciones o sitios webs
funcionales.
Figma
Figma es una herramienta de prototipado web
y editor de gráficos vectorial, que a diferencia
de las otras herramientas, se aloja en la web.
Muy útil para diseño UX/UI
6

7. Desarrollo web y lenguajes
Front-End
Lo que vemos (diseño creativo)
Back-End
Lo que no vemos (código, server, cloud, data)
Full Stack
Front-End + Back-End
7
https://www.freecodecamp.org/
Javascript HTML
CSS

8. Wordpress
Definición
WordPress es un sistema de gestión de
contenidos web para publicar contenido en la
web de forma sencilla.
Es un software de código abierto que además
podemos tratar de mejorar dentro de su
comunidad. Por lo tanto WordPress es gratuito.
Taxonomía
Categorías: Orden, Jerarquía
Etiquetas: Palabras clave para SEO y búsquedas
Entradas: Publicaciones
Páginas: Estáticas vs dinámicas (Home, about,
compras, contacto, trabajos, etc.)
8

9. Elección de dominio y hosting
DOMINIO
URL de nuestra página:
www.diseñoesdmadrid.com
SEO: Palabras clave
Nombre de marca
Localidad
HOSTING
Servidor en la nube (siempre online)
• Siteground  5,99€/mes
• Profesional Hosting
• Loading
• Hostgate
• Godaddy
• Bluehost
• Hostiger
9

10. Protocolo SSL – Https
SSL
SSL es el acrónimo de Secure Sockets Layer (capa
de sockets seguros), la tecnología estándar para
mantener segura una conexión a Internet, así
como para proteger información confidencial que
se envía entre dos sistemas e impedir que los
delincuentes lean y modifiquen cualquier dato
que se transfiera.
HTTPS
HTTPS (Hyper Text Transfer Protocol Secure o
protocolo seguro de transferencia de hipertexto)
aparece en la dirección URL cuando un sitio web
está protegido por un certificado SSL. Los detalles
del certificado, se pueden ver haciendo clic en el
símbolo de candado de la barra del navegador.
10

11. Diseño UX-UI
Conocimientos básicos, principios, etapas y metodologías
1
11

12. Diseño UX/UI
Usabilidad
(Utilidad)
Interacción
(Relación
producto-usuario)
Accesibilidad
(Facilidad)
12

13. Diferencia entre UX
y UI
UX Diseño de Experiencia de
Usuario  Interacción entre
elementos gráficos del UI
I N V E S T I G A C I Ó N
UI Diseño de Interfaz del
Usuario. Elementos
gráficos
S E N S A C I Ó N
13

14. Diseño UX-UI
Herramientas
• Investigación del usuario
• Pruebas de usabilidad
• Arquitectura de la información
• Diseño de interacción
• Estrategia de contenido
• Diseño visual
• Análisis de datos
14
Factores
• UX
Necesidades del usuario
Necesidades del negocio
Hábitos de uso del usuario
• UI
Dispositivos de entrada y salida
Aspecto visual y diseño de sonido
Diseño de interacciones
Conocimientos básicos
• Psicología
(Relación seres humanos-información)
• Empatía
(Necesidades del potencial cliente)
• Buen comunicador visual con
excelente línea gráfica
• Manejo software diseño
• Design thinking
• CURIOSIDAD
• Coolhunting (Investigación de
tendencias)

15. 15
Principios de diseño
• Clasificación  Temática/ Orientada a la tarea/ Orientada a la audiencia
• Color  Número de colores y combinación, saturación…
• Eficiencia  Minimizar nº de campos, establecer valores por defecto, organización, tamaño
• Error humano  Limitar posibilidades, orientar al usuario, solicitar confirmación, guardar trabajo usuario, permitir
deshacer, mensajes de error comprensibles
• Estética  Proporciones armoniosas, espacio en blanco, Gestalt
• Fotografías  Mensaje, utilidad, eficacia, credibilidad
• Iconos  Planos o volumétricos, ubicación
• Inteligencia colectiva  Etiquetado social, sistemas de valoración, colaboración implícita
• Jerarquía visual  Movimiento, animación, tamaño, color, orientación, posición, forma
• Legibilidad  Fuente tipográfica, tamaño de texto, contraste, interlineado, mayúsculas…
• Ley de Fitts  Conforme menor es el área clicable, mayor esfuerzo y tiempo para accionarlos
• Ordenación  Alfabética, geográfica, cronológica
• Relevancia  Prioridad visual y organizativa
• Taxonomías  Plana, jerárquica, relacional
• Toma de decisiones, visibilidad y retroalimentación  Reconocer mejor que recordar, opciones visibles y
evidentes

16. 16
Gestalt
• Ley de proximidad: Los elementos próximos entre sí, y distanciados del resto, son percibidos conjuntamente.
• Ley de similitud: Los elementos que comparten características visuales (forma, color, tamaño, orientación, textura)
tienden a ser agrupados perceptualmente.
• Ley de cierre: Nuestra mente tiende a completar formas inacabadas.
• Ley de simetría: Los formas asimétricas son percibidas más dificultosamente y como incompletas.
• Ley de continuación: La atención visual tiende a seguir instintivamente la dirección espacial de los elementos.
Cuanto más suaves sean los cambios de dirección más fácilmente serán percibidos y agrupados conjuntamente los
elementos.
• Ley de destino común: Los elementos que se mueven hacia un mismo destino o una misma dirección son
agrupados perceptualmente.
• Ley de región común: Elementos ubicados dentro de una misma región cerrada son percibidos como agrupados.
• Ley de conexión: Elementos conectados por otros elementos (como líneas) son percibidos como una misma unidad.
• Relación figura-fondo: Hace referencia a que nuestro cerebro procesa cada objeto como figura o como fondo, pero
nunca como ambos al mismo tiempo.

17. 17
Cosas a evitar
• Saturación visual de textos e imágenes
• Navegación confusa
• Incompatibilidad con navegadores
• Publicidad excesiva
• Lentitud al cargar
• Plantillas populares (distinción!)
• Contenido poco original
• Ausencia de temática principal
• Web no accesible

18. Fases en diseño UX
18
9
8
7
6
5
4
3
2
1
EMPATIZAR DEFINICIÓN
IDEACIÓN
(Brainstorming) DISEÑO WEB
OBSERVACIÓN DE
ERRORES
INVESTIGACIÓN DE
USUARIOS
ENUNCIADO
DEL
PROBLEMA
PROTOTIPADO
(Wireframes)
TESTING

19. Diseño Web
Arquitectura Web
1
19

20. Partes de una web
3 partes principales
• Header: se sitúa en su parte superior y se
muestra en todas las páginas web del sitio.
El header o cabecera suele tener anchura
completa. Puede ser estándar o flotante, y
tener un bloque o dos.
• Cuerpo: El cuerpo de la página está
limitado en la parte superior con el header
y en la parte inferior con el footer. Cada
página del sitio web tiene un contenido
(cuerpo) diferente.
• Footer: El pie o footer es la parte inferior de
una página web. Se sitúa bajo el cuerpo y
su contenido se repite en todas las páginas.
En las páginas de aterrizaje (Home, Bienvenida,
etc., a veces no tenemos Header o Footer) 20

21. Partes de una web
Header o cabecera
• Logo
Enlaza a inicio
Normalmente a la izquierda o centrado
• Menú de navegación
Enlaces a páginas del sitio web
En móvil es desplegable
• Redes Sociales
• Otros menús secundarios
• Selector de idioma
• Barra de búsqueda
• Carrito de compra
21
Cuerpo
• Contenido
Textos, imágenes, vídeos, etc.
• Elementos de contenido
web
 Migas de pan (posición exacta dentro de
la web)
 Slider o carrusel de imágenes
(diapositivas)
 Iconos
 Botones (Hover Cambios en botón
con puntero encima)
 Acordeón (preguntas con respuestas
desplegable)
 Contadores
 Formularios
 Galerías de imágenes (con flechas o
aspa)
 Recomendaciones/testimonios
• Barra lateral o sidebar
Filtros, Barras de búsqueda, Categorías
Footer
• Widgets
• Información legal
 Aviso legal
 Política de privacidad
 Política de Cookies
 Condiciones de compra
• Datos de contacto
 Teléfono
 E-mail
 Dirección
• Redes sociales
• Créditos al
desarrollador web

22. Sitios web de interés
Color
color.adobe.com
Tipografía
fonts.google.com
Imágenes
unsplash.com
Iconos
thenounproject.com
flaticon.es
22

23. Diseño de arquitectura web
Taxonomía
Distintos temas que
dividen y jerarquizan
un sitio web
Ontología
Relación entre
taxonomías
Arquitectura web
horizontal vs vertical
Niveles de
profundidad
Es recomendable que una web
no tenga más de 3 niveles de
profundidad entendiendo la
página de inicio como el nivel 0.
23

24. Arquitectura web
Diseño de wireframe
Sitio web (conjunto) vs páginas web
24

25. Figma para wireframing
25

26. Actividad
◉ Parte 1. Investigación en grupo
Encontrar sitios web interesantes que promocionen un producto o una
gama de productos
◉ Parte 2. Wireframing
Elaboración de Wireframe (a mano o en Figma/Photoshop…) de las
diferentes páginas de nuestra web
- Home, About, Portfolio, Contacto
- Enlaces y esquema de navegación de la web
26