Diseño de páginas web

¿Qué es el diseño web?

El diseño web es el proceso de creación de la interfaz visual de un sitio web. En

otras palabras, los diseñadores web crean todo lo que vemos en línea. El diseño
web no solo incluye la estética, también se refiere a la usabilidad de un sitio web o
aplicación móvil, así como a la estructura y diseño general.El diseño web es
diferente del desarrollo web, que se refiere a la codificación real que hace que un
sitio web funcione. Los diseñadores web se enfocan en los aspectos visuales y de
front-end de un sitio, lo que influye en su usabilidad y UX en general.

Hay dos objetivos principales en el diseño web:

• Para que el sitio web se vea bien.

• Para ayudar a los visitantes a lograr fácilmente sus objetivos en el sitio.

Términos comunes de diseño web

Aquí es donde resulta útil comprender algunos términos de diseño web de uso
común:

Lo que ven los visitantes cuando ingresan a un sitio

Interfaz de
web: el diseño, la navegación, las imágenes, el color, la
usuario (UI)
tipografía, etc.

Experiencia de Cómo se sienten los visitantes cuando se mueven e

usuario (UX) interactúan con la interfaz de un sitio web.

Qué fácil es para los visitantes realizar tareas

básicas. Cuando hay fricción en el diseño (desde
Usabilidad
gráficos mal elegidos hasta menús complicados), esto
interrumpe la UX general.

La persona que diseña la interfaz visual e interactiva de

Diseñador web
un sitio web.
 Desarrollador La persona que escribe el código que convierte el
web diseño visual en un sitio web funcional.

¿Cuáles son los principios del diseño web?

Efecto de usabilidad estética: la gente asume que un sitio web bellamente

diseñado es más fácil de usar que uno que no es atractivo o está desactualizado.

Ley de Jakob: la familiaridad genera confianza. Si existe coherencia en la forma

en que se maneja un elemento de un sitio web a otro, no se desvíe de la norma.

Ley de Fitt: Aumente la interacción y diseñe los objetivos táctiles para que:

• Son lo suficientemente grandes para encontrar.

• Son lo suficientemente grandes como para hacer clic sin errores.
• Están colocados en un área de fácil acceso.
• Hay un amplio espacio entre varios objetivos táctiles en un solo espacio.
Ley de Prägnanz: use formas y elementos reconocibles para evitar que los
visitantes se confundan o se frustren cuando se encuentran con algo demasiado
complejo para comprender.

Ley de Miller: minimice la sobrecarga visual organizando el contenido en grupos

(con cinco a nueve elementos).

Leyes de diseño Gestalt: el cerebro humano toma lo que ve y trata de darle

sentido basándose en la lógica y el orden, por lo que su diseño debe ajustarse a
las siguientes reglas de estructura y patrón:

• Semejanza
• Continuación
• Cierre
• Proximidad
• Figura / suelo
• Simetría y orden
Efecto de posición de serie: coloque las partes más importantes en la parte
superior o inferior de una página web. Estos son los lugares más memorables y
con los que interactuó.

Regla de punta: la primera y la última impresión de un sitio web son las que más
recuerdan los visitantes. Si bien toda la experiencia debe ser de primera categoría,
la entrada de la página de inicio y el punto final de conversión deben ser
impecables.

¿Qué son los estándares web?

Los estándares web establecen las reglas para la web en su

conjunto. Generalmente, giran en torno a los aspectos técnicos de la construcción
de un sitio web, con el objetivo principal de hacer de la web un lugar al que todos

A la vanguardia de los estándares web se encuentra una organización

llamada Consorcio Mundial de la red (W3C), que está dirigido por Tim Berners-Lee
(el tipo que inventó la Web).

Estos son los principales objetivos del W3C:

• Página Web para todos : se logra mediante la creación de sitios web

accesibles y compatibles con todo el mundo.
• Web on Everything : esto se refiere al diseño web receptivo:
compatibilidad total entre navegadores y dispositivos para cada sitio
web.
• Página Web para una interacción enriquecida : pautas para las
técnicas y los lenguajes de programación que se deben utilizar.
• Web de datos y servicios : se refiere a la gestión de datos dentro y
entre sitios web.
• Web of Trust : la priorización de la seguridad y la privacidad en la web.

¿Cuáles son las habilidades más importantes para dominar?

Las habilidades duras se refieren al conocimiento técnico y la técnica. Estos son los
más importantes para dominar:

• Diseño de interfaz de usuario: crea una interfaz atractiva y moderna.

 • Diseño UX: cree un viaje en el sitio web y hágalo sin fricciones.
• Composición: diseñe un sitio web para que sea atractivo y fácil de
seguir.
• Tipografía: seleccione y par de fuentes para establecer un estado de
ánimo y crear una interfaz legible.
• Teoría del color: desarrolle una paleta de color que aporta la emoción y
el ambiente adecuados a un sitio web sin desequilibrar las cosas.
• Diseño web receptivo: diseñe un sitio web que no solo se vea bien en
todos los dispositivos y navegadores, sino que brinde una experiencia
consistente de una plataforma a otra.
• Optimización y edición de imágenes: gestione la estética, el tamaño y
el peso de las imágenes para mejorar la usabilidad.
• SEO: mejore la clasificación de un sitio web con mejoras técnicas, como
compresión de imágenes, metadatos de búsqueda optimizados y diseño
receptivo.
• HTML & CSS: Código con los lenguajes de programación básicos: HTML
para manipular texto y CSS para cambiar el estilo de la página web.
• JavaScript: agregue interactividad a una página web con JavaScript.
• Herramientas de diseño web: crear wireframes, maquetas y prototipos
para un sitio web con software de diseño profesional.
• Sistemas de gestión de contenido: utilice un creador de sitios web que
le permita crear constantemente sitios web de alto rendimiento para los
clientes.

Habilidades blandas que necesitan los diseñadores web principiantes

Las habilidades blandas se refieren a los rasgos de personalidad que le permiten

tener éxito como diseñador web. Estos son los más importantes en los que
centrarse:

• Gestión de proyectos: planifique los trabajos del sitio web y manténgalos

encaminados con un proceso bien documentado y plataformas gestión de
proyectos como Trello de uso gratuito.
• Disciplina: Comprométase al 100% con su trabajo, con cada proyecto,
con cada cliente y con todos los principios y estándares de diseño web
que le han allanado el camino.
• Ingenio: sepa cómo salir de un aprieto y hacer que las cosas sucedan
incluso cuando parezca que hay obstáculos en todas partes.
 • Atención al detalle: Marque cada “i” y cruce cada “t” para que los clientes
nunca tengan una razón para estar descontentos con usted.
• Empatía: no haga suposiciones sobre su cliente o su audiencia; tómese
el tiempo para conocer a quiénes sirven para que pueda crear el mejor
sitio web que pueda.
• Comunicación: aprenda a comunicarse con los clientes en un idioma que
comprendan y que genere confianza.
• Servicio al cliente: brinde una experiencia superior al cliente al hacerse
cargo el día 1 y estar preparado para responder sus preguntas y
tranquilizarlos en el camino.

¿Qué implica el proceso de diseño web para principiantes?

Los diseñadores web generalmente siguen un proceso similar de un proyecto a

otro. La duración de cada fase puede diferir al igual que la intensidad de lo que
está involucrado, pero los pasos siguen siendo los mismos.

Esto es lo que incluirá su proceso de diseño web:

Paso 1: Desarrolle las especificaciones del proyecto

Esta es la etapa en la que toma el negocio y las necesidades de la empresa y

determina qué tipo de sitio necesitan (por ejemplo, blog, sitio web, comercio
electrónico, etc.) y qué es exactamente lo que necesita construir en términos de
páginas y características. Por ejemplo:

• Un sitio web educativo de cinco páginas para una organización sin fines
de lucro.
• A sitio web de la cartera para un fotógrafo profesional que permite a
los clientes reservar sesiones con ellos.
• Un sitio web de gran tamaño para una empresa de software que
proporciona a los clientes información sobre características de productos,
precios, preguntas frecuentes y más.

Paso 2: programar el proyecto

Una vez que sepa lo que está diseñando, creará una línea de tiempo para ello. Esto
no solo le permite equilibrar de manera más efectiva varios proyectos de sitios web
a la vez, sino que esta información es muy útil para los clientes que tienen hitos
tangibles que pueden esperar.

En cuanto a la creación del cronograma, realmente depende del alcance del trabajo
y de su disponibilidad. Sin embargo, en general, cada paso del proyecto lleva más
tiempo que el anterior.

Para determinar la cantidad correcta de tiempo para cada uno, use una herramienta
de seguimiento del tiempo cada vez que diseñe un nuevo sitio web (incluso si es el
suyo propio o uno gratuito que está haciendo para un amigo o familiar). Esto le
ayudará a calcular cuánto tiempo necesita programar para cada fase. No olvide que
en proyectos para clientes, también debe dejar tiempo para comentarios.

Paso 3: Investigue

El proceso de incorporación es fundamental para los diseñadores web. Si no hace

las preguntas correctas por adelantado, podría encontrarse haciendo muchas
revisiones más adelante (lo que puede llevar no solo a incumplir la fecha límite, sino
también a alcance fluencia y lucro cesante).

Antes de comenzar su investigación, primero debe crear un cuestionario de

diseño de sitios web para recopilar toda la información, archivos e inicios de sesión
esenciales de su cliente. Esto formará la base de su investigación.

Durante esta etapa, querrá analizar:

• El cliente y su marca (si tiene historia)

• La audiencia a la que se dirigen
• La competencia
• La industria
• en su conjunto
Una vez que tenga una idea de a qué se enfrenta su cliente, puede formular un
plan para el diseño y el enfoque del sitio web.

Paso 4: crea una guía de estilo

La guía de estilo de la marca es donde documentará la estrategia visual de una

marca y su sitio web.

Hay varias razones por las que una guía de estilo es útil:
 • Le permite establecer una visión clara del sitio web desde el principio.
• Le permite colaborar con otros diseñadores y no tener que preocuparse
por producir un trabajo consistente.
• Es algo que puede brindarle a su cliente para asegurarse de que ellos (o
su futuro diseñador) mantengan la identidad visual que ha creado para
ellos.
Para crear una guía de estilo, deberá armar reglas para los elementos visuales
clave en el sitio (como tipografía, uso del logo, colores, etc.).

Paso 5: crea el mapa del sitio

Como quiera llamarlo (arquitectura de la información, mapa del sitio, navegación o

menú), este es el primer componente importante que establecerá para el sitio web.

El mapa del sitio no es solo una lista de páginas para incluir en el sitio
web. Establece la jerarquía y las relaciones entre páginas. Esto es importante ya
que la forma en que conecta las páginas entre sí puede mejorar o erosionar la
usabilidad de su sitio web.

Paso 6: cree wireframes, maquetas y prototipos para su sitio

En realidad, esta es una fase de tres pasos que le permite crear un sitio web de
forma incremental desde cero.

• Wireframes

Los wireframes son esqueletos de sus páginas. Esboza la composición, usa

marcadores de posición para mostrar a dónde va el contenido y determina
cómo colocar y dimensionar cada bloque y elemento.

• Maquetas

Las maquetas son archivos de diseño estáticos. Tienen el mismo aspecto

que una página web, excepto que no son interactivas.

• Prototipos

Los prototipos son la versión interactiva de las maquetas. En la creación de

prototipos, crea conexiones entre las páginas y anima otros elementos
interactivos en la página.
Paso 7: Construya el sitio web

Desarrollar el prototipo final con software de diseño web de su preferencia.

Paso 8: QA el sitio

QA significa Quality Assurance y su función no solo abarca el control de

calidad del desarrollo Web sino también ayudar al equipo para que las cosas
funcionen bien.

A lo largo del proceso de diseño web, querrá comunicarse con el cliente cuando
alcance hitos clave. Al recopilar comentarios y aprobación durante todo el trabajo,
reducirá la necesidad de revisiones excesivas en esta etapa.

Paso 9: Lanzamiento

Con todas las aprobaciones necesarias en la mano, es hora de lanzar.