En el mundo de la web, el diseño es una parte integral de la experiencia de usuario. El diseño web es una de las principales formas en que los usuarios interactúan con un sitio web, lo que hace que sea crucial para cualquier empresa o negocio. Por lo tanto, comprender los principales conceptos de diseño web es importante para cualquier profesional de la web.
En este artículo, examinaremos los principales conceptos de diseño web, como la usabilidad, la jerarquía, la coherencia y el diseño adaptativo. Explicaremos cada concepto, así como cómo se aplica en el diseño web. Si desea obtener una comprensión mejorada de los principios de diseño web y cómo pueden mejorar su sitio web, este artículo es un excelente lugar para comenzar. ¡Sigue leyendo para obtener todos los detalles!
Paso 1. Conceptos básicos del diseño web
En píxeles hablarás
El píxel, a menudo abreviado px o p, es la unidad básica en el diseño web. Una imagen está formada por un conjunto de píxeles.
En RGB verás
RGB es un formato de codificación de colores.
Un píxel está compuesto por 3 puntos de diferentes colores: Rojo, Verde, Azul, y es jugando con la intensidad del rojo, verde o azul, que un píxel es capaz de componer millones de colores diferentes. Es la asociación de estos pequeños píxeles, lo que hace posible mostrar todo lo que vemos en una pantalla.
En 72 DPI estarás
Esta resolución de 72 DPI es una especie de valor estándar para el diseño web, al igual que un documento destinado a la impresión deberá crearse en una resolución de 300 DPI (o más, en algunos casos excepcionales).
¿Qué significa DPI?
Las abreviaturas DPI y DPI significan lo mismo: puntos por pulgada o puntos por pulgada. La resolución de una imagen es, por tanto, el número de píxeles que contiene. Cuanto mayor sea este número, más píxeles habrá y mejor será la imagen cuando se imprima.
En diseño web nos conformamos por el momento con 72 DPI, al saber que este estándar está en proceso de evolución, pronto estaremos hablando de una resolución ya no en 72 DPI, sino en 96 o incluso 100 DPI, porque las tecnologías están evolucionando. Nuestras antiguas pantallas CRT eran de 72 DPI, pero nuestras pantallas actuales tienen una resolución más alta.
La fuente que elijas
¡La evolución de las tecnologías, en particular gracias a la CSS3 y la propiedad rostro, recientemente ha hecho posible utilizar todo un repertorio de fuentes nuevas, adiós a la restricción a las 10 fuentes estándar, hola a cientos de fuentes nuevas!
Pero debes conocer algunas reglas en el diseño web:
- En diseño web, usamos tipografías… ¡Web! Sí, hasta ahora estamos de acuerdo. Esto, por lo tanto, significa que las fuentes diseñadas para la publicación como DIN, Interface, Garamond… no son en absoluto recomendables para su uso en la web.
Fueron diseñados para leer en papel, no en pantalla. En consecuencia, su interpretación no es la más bonita; Caracteres fluidos e irregulares, difíciles de leer… - Tenga cuidado con las representaciones de fuentes en diferentes navegadores, algunas fuentes cambian completamente de tamaño según el navegador, o incluso algunos navegadores no las muestran (Internet Explorer, si puede escucharme, sepa que estamos hablando de usted).
Tener cientos de fuentes para elegir es genial, pero no te excedas. ¡No es necesario usar docenas de ellos en el mismo sitio! No solo se alterará la legibilidad, sino que cargarlas, también ralentizará su sitio (antes de mostrar la página, un sitio carga todas las fuentes utilizadas, por lo que cuantas más haya, más tardará en cargarse). Se recomienda usar solo 2 o 3 fuentes, diferentes es mucho más agradable para la lectura y para la vista.
Dos sitios entre muchos otros, donde descargar tipografías web gratuitas, gratuitas o de pago:
- fonts.google.com (gratis)
- fontsquirrel.com (gratis)
- myfonts.com (pagado)
- fonts.com (pagado)
Para probar las fuentes instaladas y ver cómo se ven en la red:
Paso 2. Construcción en diseño web
Una página web generalmente se divide en 3 partes principales:
El encabezado
En un sitio, el encabezamiento (encabezado en francés) designa la parte del sitio generalmente ubicada en la parte superior, que contiene el título y, a menudo, la navegación (menú y submenú) y el logotipo. Es importante cuidar su presentación y su organización porque es lo primero que miran los internautas.
El pie de página
los pie de página es la parte inferior de la página, puede encontrar recordatorios de enlaces de menú, derechos de autor, avisos legales, mapa del sitio, etc.
El contenedor
Los contenedores son el interior de las páginas, el contenido con los textos, las imágenes… todo entre el encabezamiento y el pie de página de hecho. ¿Necesitas un diseño limpio?
Carta gráfica, logotipo, web y materiales impresos…
¡Envíanos tu resumen!
Paso 3. Contenido en diseño web
El contenido es extremadamente importante y define todo el diseño y la organización del sitio. Por eso es mejor tener una idea del contenido antes de embarcarse en una creación. Un sitio con poco texto no funcionará de la misma manera que un sitio con mucha información.
Tenga en cuenta que el contenido también es importante para la referencia natural, es un elemento clave en la optimización de un sitio web.
Los elementos de información deben clasificarse por nivel de importancia, la información más importante debe aparecer en la parte superior de la página.
Es fundamental hacer un sitio despejado y aireado. Aquí hay algunas formas de hacerlo (hay muchas más, no dude en compartirlas con nosotros):
- El espacio entre líneas adecuado siempre es mejor para leer que un bloque de texto condensado
- Encabezados de párrafo y de nivel para analizar el contenido de un vistazo
- Algunas imágenes para energizar todo un poco
- un poco de color
- etc.
En resumen, ningún secreto, necesitas un diseño trabajado.
Dependiendo del contenido, hay que pensar en:
La estructura tipo árbol
El árbol es la lista de las diferentes páginas y menú(s) del sitio, organizadas de forma lógica y jerárquica. Deberías encontrar todo el contenido allí. Ejemplo :
La estructura de árbol también permite no olvidar ciertas páginas como la página 404, los avisos legales, el mapa del sitio, la página de contacto, las páginas de resultados de búsqueda (con o sin resultados)…
te invito a leer el artículo de cristina mozzati que resume muy bien la lista de páginas para no olvidar, principalmente para WordPress, pero que, sin embargo, da ideas para un sitio html “normal”.
Ergonomía de navegación y diseño web
Navegación y ergonomía son dos conceptos muy similares.
En un sitio web, la navegación se compone de un conjunto de enlaces que le permiten navegar/acceder a los diversos contenidos del sitio, esto se denomina menú, a veces con submenús.
Un sitio web se califica de ergonómico cuando ofrece un modo de navegación fácil e intuitivo que permite a sus visitantes familiarizarse rápidamente con sus funcionalidades.
La ergonomía tiene como objetivo tanto una mejor eficiencia como una mayor comodidad de uso.
Servicios adicionales de marketing digital
Paso 4. Cultura visual e inspiración para el diseño web
El contenido es importante, el diseño es igual de importante. La calidad del diseño refleja la credibilidad del sitio. Un diseño es el primer contacto entre el usuario de Internet y la empresa, por lo tanto, el usuario de Internet juzga su llegada al sitio y forma su opinión en unos minutos.
Las noticias de la web, y las tendencias gráficas evolucionan extremadamente rápido, por eso es importante estar al tanto de lo que está pasando en este momento, esto es lo que llamamos para mantener la vigilia».
Comparto contigo algunos enlaces útiles (entre cientos estamos de acuerdo, no dudes en compartir tus fuentes de inspiración en los comentarios) y prácticas que seguro te serán de utilidad.
Inspiración en diseño gráfico/web
- behance.net
- dribble.com
- pinterest.com
- awwwards.com (web)
- thefwa.com (web)
- onepagelove.com (web)
- pttrns.com (móvil)
- reallygoodemails.com (correo electrónico)
Cuadrícula de diseño
Construir diseños utilizando una cuadrícula ayuda a crear un sitio estructurado, con bloques, márgenes y columnas regulares, ¡son posibles cientos de diseños!
Las cuadrículas son aún más útiles ahora con la sensible (seguramente abordaremos el tema en un próximo artículo).
Inspiración de color (porque a veces es difícil encontrar colores que armonicen entre sí)
Principales bancos de íconos para ayudarte a ilustrar tus sitios
Quieres saber más ?
¿Te gustaría saber más sobre la creación de diseño web? Envíanos un mensaje, estaremos encantados de discutir tu proyecto juntos
Artículos relacionados:
