Diseño Web

El Diseño web es aquella actividad consistente en planificar, diseñar, mantener y crear

páginas web.
La experiencia del usuario con el sitio es la principal disciplina a tener en cuenta a la hora de
montar una web, ya que de ella depende el grado de usabilidad de la misma y la mejora de cara
al visitante. Si este no recibe una experiencia agradable, con una interactividad, arquitectura de
información, navegabilidad y usabilidad adecuadas, probablemente se desplace a la
competencia o no saque real partido de lo que brinda la página.
Para qué sirve el Diseño Web

El Diseño web sirve para ofrecer a los usuarios una experiencia adecuada, suave y atractiva a la hora
de moverse por una página en Internet. Es algo capaz de transmitir la imagen de una marca y su
mensaje, a la vez que muestra el grado de compromiso de una firma por la buena experiencia de
sus consumidores.
Un buen diseño, además, es capaz de responder bien a las necesidades del público actual, así como
también marca la presencia de una firma en la red, ayudando en su posicionamiento para poder
conseguir un mayor alcance y visibilidad.
Reglas básicas a tener en cuenta

Como punto de partida piensa: que vas a diseñar y para quienes vas a diseñar.
No podemos comenzar a diseñar sin antes tener en claro el producto final que se desea conseguir.
Es fundamental entender los objetivos del proyecto y quienes van a ser los principales usuarios del
sitio. Qué características tienen, cómo consumen la información y que desean ver.

Para ello establece cual es la PROPUESTA DE VALOR

La propuesta de valor está relacionada con el producto, más precisamente en su capacidad de atraer
la atención de los consumidores. Es importante pensar que sea útil, atractivo y, al mismo tiempo,
viable, que pueda ser aprovechado por el público.
Diseña tu mapa de navegación

El mapa de navegación es, básicamente, un gráfico o esquema en forma de árbol que representa la
estructura o arquitectura general de un sistema.
En él entendemos las relación de cada uno de los contenidos que se deben diseñar, las pantallas, el
recorrido del usuario, las jerarquías del contenido.

*VER PRESENTACIÓN DE MAPA DE NAVEGACIÓN.

Diseña tu prototipo

Un prototipo es un primer modelo que sirve como representación o simulación del producto final y
que nos permite verificar el diseño y confirmar que cuenta con las características específicas
planteadas.

1. Wireframes de baja fidelidad:

El Wireframe de baja fidelidad es el núcleo de la visualización del diseño. Incluyen los elementos visuales y el
contenido estático necesario. Los desarrolladores los utilizan para emplear la estructura de la interfaz y la
arquitectura de la información.

2. Wireframes de alta fidelidad:

Los wireframes de alta fidelidad se utilizan antes de llegar a la fase final del desarrollo para validar las pruebas
de usuario del producto.
Diseña tu prototipo

1. Wireframes de baja fidelidad

2. Wireframes de alta fidelidad
3. Wireframes de alta fidelidad
con interactividad
Reglas a considerar

Regla 1: Evitar el desorden

Los diseños desordenados con una serie de imágenes, botones y otros elementos no sólo hacen que
los diseños parezcan desequilibrados. También impiden que los visitantes lleguen al siguiente paso
que quieres que den, ya sea entrar en tu página de contacto o añadir un producto a su carrito.
Recuerda que el espacio en blanco es tu amigo.

Regla 2: Priorizar el diseño por encima del pliegue

El «pliegue» se refiere al borde inferior del navegador*. Cualquier contenido por debajo del pliegue
sólo se puede alcanzar desplazándose, lo que significa que el usuario tiene que verse obligado a
hacerlo en primer lugar. Coloque siempre el contenido y la información clave por encima de esta
línea. Tenga en cuenta que el pliegue es más corto en los sitios móviles, lo que le da aún menos
espacio para convencer al visitante de que siga desplazándose. Haz que cuente.
Reglas a considerar

Regla 3: Tenga en cuenta la Ley de Hick

La Ley de Hick establece que el aumento del número de opciones aumentará el tiempo que tarda
una persona en tomar una decisión. Asegúrese de que la atención de su visitante no se dirija a otra
parte de la web limitando las opciones en cada etapa de la experiencia del usuario. Un botón de
llamada a la acción es mucho más eficaz que las largas opciones del menú.

Regla 4: Fomenta el desplazamiento, no el clic

El desplazamiento permite que el diseño de la web continúe sin interrupciones. Compárelo con el
clic, que puede añadir tiempo de carga a la experiencia. El desplazamiento también es más intuitivo
en el móvil.

Sobre todo, el desplazamiento es más perezoso que el clic, lo que significa que los usuarios
permanecen en un sitio durante más tiempo.
Reglas a considerar

Regla nº 5: Utilizar señales visuales

El uso de imágenes o gráficos para dirigir a los usuarios, como fotos de personas mirando hacia un
botón o flechas que apuntan a una opción de menú, es una técnica probada para guiar a los
visitantes hacia acciones importantes. ¿Obvio? Tal vez. ¿Eficaz? Sin duda.

Regla 6: El tipo de letra debe ser legible en primer lugar, y elegante en segundo lugar

¿Alguna vez has entrado en una página web muy moderna y te has encontrado con el cuello torcido
al intentar leer una serifa cursiva ilegible? Hay muchas fuentes web bonitas, pero muchas de ellas no
tienen cabida en los sitios web.

Un texto legible y claro no ofrece distracciones y garantiza que la información clave sea legible en
distintos tamaños de pantalla. Las fuentes limpias y geométricas sin serifas o los tipos de pantalla
gruesos son las mejores para los sitios web, en comparación con las serifas o las cursivas.
Reglas a considerar

Regla 7: Diseñar primero para móviles

La mayoría de los diseñadores web noveles se imaginan que su sitio web se ve en un ordenador de
sobremesa de generosas proporciones, pero en realidad alrededor de la mitad de las sesiones de navegación
en todo el mundo se realizan en dispositivos móviles. En algunos sectores, la proporción de usuarios móviles
puede ser mucho mayor.

Muchos diseñadores web profesionales aconsejan diseñar el sitio web pensando primero en el móvil, pero si
se presta la misma atención a ambos, se garantizará que el sitio sea eficaz y bonito en toda la gama de
dispositivos.