Diseño de páginas web: guía de elementos básicos

El diseño de páginas web puede resultar un trabajo muy divertido a la par que complejo.

La tarea del diseñador gráfico reside en desarrollar el diseño visual y de usabilidad de la página web y, una vez terminado, deberá pasar todos los documentos al programador encargado del montaje final de la web.

En esta guía voy a explicarte paso a paso todos los elementos que debes tener en cuenta para el diseño de páginas web, desde el color hasta la tipografía, pasando por la retícula y wireframes.

Sigue leyendo!

Cómo diseñar una página web: estructura

En este gráfico podemos ver los elementos principales de los que se compone una página web: header (cabecera), content (contenido) y footer (pie de página).

Esta es la estructura básica de una página web, pero lo normal es complementarla con columnas laterales o sidebar, donde se colocan otros elementos secundarios como banners, widgets o listados de categorías.

Así pues, la organización de todos estos elementos puede variar en función del objetivo que queramos conseguir con el diseño web. No es lo mismo diseñar un portfolio que una ecommerce de accesorios.

Así, dependiendo de la temática, sí que podemos encontrar elementos relacionados y muy comunes dentro del diseño de páginas web:

Header: logotipo de la empresa, eslogan, menú principal, buscador, perfiles sociales…

Content: todo el contenido de la página (fografías, textos, banners, vídeos…)

Footer: accesos directos, información de contacto, redes sociales, copyright, aviso legal etc.

El ejemplo que os pongo más abajo es un trabajo personal, y en él podéis ver el desarrollo que el diseñador gráfico hace a la hora de diseñar una página web con Photoshop.

Más adelante será la recopilación de todos estos archivos los que el diseñador gráfico dará al desarrollador para que programe todo el código de la web.

Como os he comentado al principio de esta guía, este diseño es un ejemplo de una web que rompe de con la estructura básica dentro del diseño de una página web. En este caso, se trata de un porfolio en el que prima la libertad del diseñador para mostrar sus trabajos que cualquier otro aspecto.

En este diseño concreto podéis ver como en el header está el menú principal de navegación, en el content la galería de proyectos y un submenú de categorías para elegir el tipo de proyecto que quieras ver. Por último, el footer se destina únicamente a la paginación del porfolio.

A la hora de entregar el diseño de una web también es importante especificar los colores hexadecimales. Una buena manera de hacerlo es colocar los colores corporativos en cuadros laterales tal como puedes ver en esta imagen:

Cada diseño es totalmente diferente, y es ahí donde está la labor del diseñador gráfico que se encarga del proyecto: conocer muy bien el producto/objetivo de la página web, el público objetivo que va a navegar por la red, la tipografía y los colores.

Todo ello, son datos fundamentales que debes tener en cuenta a la hora de empezar con el diseño de páginas web.

Diseño de páginas web: partes y elementos

La importancia de tener una web atractiva es fundamental para que el usuario tenga una alta permanencia en página. Es decir, que cuando acceda a nuestra página el contenido le resulte atractivo e interesante y navegue durante más tiempo.

Si el diseño de la web que estamos planteando carece de atractivo visual, el usuario entrará unos pocos segundo.

Por ello, es importante tener una home page atractiva y sugerente. Es lo primero que van a ver en la mayoría de los casos, y debe ser impactante para captar la atención del visitante y que le anime a continuar.

Tal vez puedes emplear una imagen de fondo para romper con la estructura base de la página web, o utilizar las columnas laterales de navegación para romper con la monotonía del resto de webs.

El diseño de páginas web se basa en una estructura formada por cajas, cuadradas o rectangulares, lo que facilitará mucho el trabajo del programador.

Es muy importante diseñar la web bajo una retícula de cuadros para mejorar su programación y la comunicación con el profesional que vaya a darle forma.

La inspiración visual dentro del diseño web la puedes ver tanto a nivel visual como funcional. Arriba, la web de FA Designer enseña su portfolio de una manera limpia y ordenada con una estructura cuadrada y elegante a la vista.

Os recomiendo también que visitéis regularmente webs como siteinspire.com, awwwards y abduzeedo para estar al tanto de todas las novedades sobre el mundo del diseño web.

No te olvides que un punto clave en el diseño de cualquier web desde los últimos tiempos es que ésta debe cumplir las normas del responsive web design, que es lo que conocemos por adaptar una web a los diferentes formatos en los que se va a poder web: móvil, desktop y Tablet.

Con ello, una web maquetada a 4 columnas puede pasar a una web a 1 columna en el caso de su adaptación a móvil. Es importante diseñar estas estructuras responsive para que el usuario tenga una experiencia de navegación similar en cualquier dispositivo, y porque además Google penaliza las webs que no están adaptadas con peores resultados en las SERP.

En www.responsinator.com puedes previsualizar cómo va a quedar tu web tanto en móvil, tablet como ordenador. Consúltala y guárdala en tus marcadores, es un recurso muy útil para el diseño web adaptable.

Cómo diseñar una página web: organizar el contenido

Lo primero que tienes que hacer es decidir qué elementos quieres mostrar en la web que estás diseñando y cuál va a ser su contenido.

Debe tener una estructura clara, basada en un retícula de cuadros e intentar captar la atención del usuario.

Por ello no debes cargar la página principal de la web con muchos elementos y colores diversos, si no simplificarla en elementos que atraigan la atención al usuario.

Recuerda una norma fundamental del diseño: menos es más. Ten en cuenta que la permanencia en página de una web es primordial para conseguir tu objetivo.

Una vez tengas tu web diseñada en Photoshop es imprescindible contactar con un programador y tener comunicación directa y constante con él, porque los archivos por sí solos no sirven para explicar la configuración y el objetivo que perseguimos con nuestro diseño.

Los elementos gráficos que deben componer cualquier página web, y en los que te debes basar para bocetar un sitemap ordenado y limpio son los siguientes:

Wireframes

Esquema en detalle de las páginas que hemos decidido en el mapa de contenido. ¡Coge lápiz y papel y haz el desarrollo de la web!

Apunta los menús, secciones, categorías y relaciónalos para tener claras todas las partes de la web.

Retícula

Nos ayuda a componer y desarrollar un proyecto web de manera limpia y ordenada, y permitirá a los programadores desarrollarla fácilmente.

Es una herramienta fundamental para implementar todos los elementos dentro de la web. Antes se usaban las retículas físicas, ahora se adaptan.

Elementos internos

• Colores. Apunta la gama cromática que vas a utilizar para ofrecer una imagen homogénea y acorde a la imagen corporativa.
• Botones. Plantea su forma, bordes, sombreados, función over y animaciones por CSS.
• Imágenes. Ajusta su tamaño a proporciones estándar, y guárdalas para web para optimizar su peso.
• Tipografias. Selecciona y establece los tipos y tamaños tipográficos para todos los elementos (texto, encabezados, destacados, citas etc.)

Cómo diseñar una página web: elementos gráficos

Tipografía

Intenta mantener consistencia entre los tamaños y los estilos de tipografía:

• Serif

No son muy recomendables para textos largos: son menos legibles y ofrecen una imagen más borrosa por su similitud con un escrito.

Sin embargo, si sabes cuándo utilizarlas pueden darle a tu página un estilo clásico o tradicional.

• Sans Serif

La mayoría de las páginas emplean tipografía sin serifa (sans serif) para el texto del cuerpo de la página, ya que son más legibles en la pantalla y dan la sensación de páginas modernas.

Son muy recomendables por ser limpias, legibles y versátiles sin resultar aburridas.

• Egipcias

Son atractivas y guardan un toque clásico. En combinación con tipografías sans serif ofrecen como resultado una web muy convincente.

No la utilices para texto largo y corrido, ya que cansan la lectura al no ser cómoda y amena.

• Manuscrita

Para títulos o frases cortas, pero no para textos largos y destacados.

• Decorativas

Cuidado al usarlas en páginas profesionales, ya que no ofrecen una imagen de seriedad.

Imágenes

Prepara y optimiza las imágenes para la web: en color RGB, con el tamaño exacto al que se va a visualizar, escaladas a 72 píxeles por pulgada y guardadas en .png o jpg.

Recuerda usar también programas o plugins de compresión para optimizar al máximo su peso. Smush It para WordPress es una muy buena opción, ya que automatiza el proceso en el mismo momento que subes las fotos.

Colores

La importancia del color dentro de una página web es fundamental no solo para que el usuario esté más tiempo en tu web, sino también para mostrar una imagen homogénea con la marca empresarial o personal.

Al igual que en una marca gráfica, una correcta elección de colores otorga calidad y confianza, mientras que otros provocan el efecto contrario.

Rojo

Se asocia con la emoción, la pasión, el amor, la energía y el movimiento. Utilízalo para llamar la atención de algo, crear expectación.

El rojo puede ser bueno para webs de comida, de moda, de deportes o de marketing. Ten cuidado en la cantidad del color en la web, mucha saturación de este color puede provocar malas reacciones.

Amarillo

Es el color más luminoso y se asocia con la felicidad, la alegría, el optimismo y la juventud.

Úsalo para transmitir tranquilidad y calma en el usuario; puede dar buenos resultados en los botones de llamada a la acción.

No lo uses mucho porque puede resultar muy cargante.

Naranja

Se trata de un color energético y lleno de vida. Empléalo para crear llamadas de atención en la web como, por ejemplo, ventas.

Es ideal para tiendas, automoción, entretenimiento o cuidado de niños. No abuses de él porque, al igual que el amarillo, puede resultar cargante.

Verde

Tiene un efecto armónico, se asocia con la salud, la naturaleza,la calma, la generosidad o la paz. De echo, se trata del color que los ojos procesan mejor.

Un correcto uso es en webs relacionadas con el turismo, la medicina o el medioambiente.

Azul

Es un color refrescante que se asocia a la masculinidad, calidad, calma y confianza.

Muchos bancos emplean este color y es correcto utilizarlo también en temas de salud, tecnología, medicina y en servicios públicos.

Ten cuidado con un uso excesivo: puede darle un aspecto poco atractivo a tu web.

No es muy aconsejable para webs de comidas.

Morado

Trasmite creatividad, imaginación y sotisficación. Puedes ver que se aplica en webs de productos de belleza, masaje, yoga, y contenido relacionado con chicas adolescentes y marcas femeninas.

Marrón

Color natural y cálido que puede llegar a estimular el apetito. Por ello, se enfoca hacia el diseño de páginas webs que tengan contenido alimentario, contenido de animales y en veterinarios.

En ocasiones, puede resultar un color demasiado conservador.

Negro

Asociado siempre con la sofisticación, la elegancia, la autoridad y el poder. Web para productos de lujo, moda, marketing y cosméticos son los que más lo utilizan, aunque en la mayoría de ocasiones combinado con otro color.

Blanco

Limpieza, pureza, sinceridad es lo que transmite este color pulcro.

Páginas webs de dentistas emplean mucho este color, que si se combina con negro o con el color oro es perfecto para webs de productos de lujo.

Gris

Se asocia a la formalidad, profesionalidad y la sofisticación. Para páginas webs de profesiones o de creativos puede resultar muy aburrido.

Rosa

Romance, amor, sofisticación. Webs relacionadas con las mujeres y chicas adolescentes. Intenta evitarlo en páginas webs serias y formales.

Tras esta breve guía sobre las pautas básicas para diseñar una página web espero que tengas una idea más aproximada de lo que conlleva este tipo de diseño, y que te sea útil para consultar en tus próximos trabajos.

Puedes seguir algunos de mis trabajos en mi web personal macuera.es donde dentro de poco abriré el apartado de blog para tratar temas relacionados con el diseño.

Si te ha sido útil este post no te olvides de compartirlo en las redes sociales para que llegue a más gente que, de igual manera, está interesada como tú en el diseño web.

Imagen | Freepik