Fundamentos de diseño web tercera parte: aspectos formales de diseño
Teniendo en cuenta los actuales estándares de usabilidad, tras la planificación y el desarrollo de un proyecto web, llega la hora de adentrarse en la verdadera materia central del diseño: su aspecto visual. En la percepción de un sitio web juegan un papel determinante los logos, las formas y los colores que lo componen. Junto al contenido (textos, imágenes, vídeos) y su colocación, la estética es fundamental. El diseño visual contribuye en gran medida a la percepción general de la web, de los contenidos y de la empresa o marca que hay detrás. Para ello, todo administrador web dispone de algunas pautas que pueden ayudarle a encontrar el diseño más adecuado para tu proyecto.
Crea tu página web con IONOS
Con asesor personal incluido, IONOS MyWebsite es la solución completa para una página web profesional.
Requisitos para un buen concepto de diseño
A la hora de definir la apariencia visual de una página web, es fundamental tener una idea clara y precisa de los contenidos principales, ya que el contenido determina en gran medida la forma. Hay que aclarar en primer lugar qué es lo que distingue la información, los servicios que se ofrecen o los productos que se muestran. ¿Qué caracteriza a nuestra empresa o a nuestra marca? y, ¿qué diferencia a nuestra oferta de la de la competencia? Es importante que el diseño de una web se corresponda exactamente con el contenido y la imagen que se quiere transmitir. En este sentido, las compañías deberían cuidar que el diseño de su página refleje la imagen corporativa, el llamado Corporate Design.
Corporate Design
Por imagen o cultura corporativa se entiende la imagen general que transmite una empresa y consiste en su identidad visual –también se habla de imagen corporativa en el caso de instituciones, organizaciones, asociaciones y marcas. El diseño de los logos, de los medios de promoción impresa, de los productos y de su empaquetamiento, así como también de su presencia online, viene determinado por un diseño corporativo previamente definido, compuesto por ciertas constantes estéticas (como pueden ser determinados colores, formas y tipografías) que aparecen en todos los productos y medios de comunicación de la marca. Así, la página web constituye por regla general, una parte del Corporate Design. Si diseñas una página para una compañía, entonces probablemente podrás partir de su diseño corporativo tal y como se muestra, por ejemplo, en la paleta cromática del logo o en la tipografía usada en folletos, anuncios o notas de prensa.
Algunas pautas para el diseño web corporativo
El diseño corporativo refleja siempre una imagen determinada y promete un alto nivel de reconocimiento. Este, aplicado de forma consecuente, transmite una imagen coherente en todos los medios de promoción y comunicación de la compañía. En este sentido el diseño corporativo sigue la famosa premisa “form follows function” –donde los elementos de diseño han de ser reconocibles y funcionales. Aquí, logos y tipografías siempre han de ser legibles, independientemente del formato en que se muestren.
A continuación te mostramos los componentes principales del diseño web corporativo.
El logo
El logotipo es un signo gráfico, compuesto generalmente por trazos o letras, y por algún un símbolo o tipo de imagen. Este constituye el núcleo central del diseño corporativo ya que, usando sus colores en todos los materiales de promoción, determina en gran medida la identidad visual del resto de publicaciones. En una página web, el logotipo debe ser visible en todas sus páginas (el Header suele usarse para este fin).
Un buen logo es conciso y otorga identidad propia. El carácter único de su diseño dependerá de cómo tratemos a sus componentes gráficos. En su diseño deberían observarse ciertos principios básicos:
- Inteligibilidad: El logotipo es la representación de una marca y su función consiste en distinguirla y hacerle referencia. En él pueden figurar de forma estilizada sus productos y servicios en aras de una mayor comprensión y claridad.
- Originalidad: Es fundamental que el logo no se parezca a ningún otro. Copiando el logo de otra compañía y adaptándolo a nuestros servicios no lograremos construir una identidad propia –sin mencionar las consecuencias legales que esto implica.
- Simplicidad: “Keep it simple”. Un logo demasiado elaborado o detallado es más difícil de recordar que uno sencillo.
- Adaptabilidad: Un logo ha de ser reproducible en todos los medios de forma óptima, ya sean tarjetas de visita o pósters. Para evitar errores de impresión se recomienda guardarlos siempre en alta resolución y en diferentes formatos (JPG, PNG, PDF).
Si quieres diseñar un logo tú mismo pero no dispones de los conocimientos necesarios en diseño ni de los programas adecuados, puedes recurrir a páginas como freelogoservices, logaster o logotipogratis. Estas y otras páginas cuentan con editores en línea para ensayar bocetos e ideas y, en general, se pueden descargar archivos en baja resolución de forma gratuita. Para otros servicios suele solicitarse algún tipo de pago.
Crea tu propio logo gratuitamente y en sólo unos pasos con el generador de logo IONOS. ¡Pruébalo ya!
Comunicación visual de la identidad corporativa
El diseño corporativo contiene, además del logo, otros elementos importantes en lo que se refiere a diseño web. Estos son los más importantes:
- Tipografía corporativa: Del inglés corporate font, la tipografía corporativa define el tipo de fuente utilizado por la compañía de forma mayoritaria o exclusiva. Además de reconocible y legible (también en diferentes tamaños) la tipografía debe adecuarse a la imagen de la empresa, a su filosofía y al efecto que se busca. Es la fuente que debería usarse en todos los textos, con frecuencia también se encuentra en el logo.
- Identidad visual: En muchos casos es conveniente incluir imágenes en la página web, las cuales, además de aportar diversidad, son un medio para despertar emociones en el receptor. La identidad visual se compone por el conjunto de imágenes, fotos, motivos y símbolos que se usan y, como la tipografía, deben mostrarse de forma unitaria y coherente. Tanto el contenido como el estilo de las imágenes deberían subrayar la imagen que transmite la compañía en la web. Hay que evitar, por ello, imágenes en baja resolución que denoten poca profesionalidad.
- Paleta cromática: Los colores han de estar escogidos en función del concepto general de comunicación visual, ya que el diseño del logo, las imágenes, los fondos y otros elementos visuales tomarán como referencia esta paleta de colores.
Este último punto constituye por sí solo un extenso campo temático, del que cabe ocuparse si se trabaja en el ámbito del diseño web, ya que el uso de unos colores u otros nos lleva a alcanzar diferentes objetivos. Por su poder para despertar asociaciones en el receptor, los colores que constituyan la elección final permitirán destacar determinados aspectos de la identidad de la compañía. La paleta de colores determina en gran medida la primera impresión que un usuario tiene de una página web, por lo que se convierte en un aspecto imprescindible para el diseño web corporativo.
Los colores en el diseño web
No se debe subestimar la importancia de los colores de una página web, ya que estos suelen asociarse con emociones y recuerdos diferentes, ya sea consciente o inconscientemente. Se diferencian tradicionalmente en cálidos (amarillo, naranja, rojo) y fríos (verde, azul, violeta), mientras que los llamados acromáticos (negro, gris, blanco) y el marrón se consideran neutrales.
Todos los colores despiertan ciertas asociaciones en el receptor. En el caso del color rojo, en sentido positivo se suele relacionar con el amor, la calidez, la atención, la energía o el valor, pero, por otro lado, también es un color de alerta: peligro, fuego, violencia, sangre, arrogancia o ira constituyen las asociaciones negativas de este color. En diseño web, el rojo se usa para atraer la atención.
Es posible asociar todos los colores a ideas positivas y negativas, así que, a la hora de escoger la paleta más adecuada para un proyecto, conviene fijarse también en esos aspectos y no ceñirse únicamente a un criterio estético.
El efecto de los colores
Las asociaciones que despiertan los colores en el receptor dependen del contexto y del entorno, variando sus significados de forma notable de una cultura a otra.
En esta visión general se muestra una panorámica de los colores básicos con sus connotaciones en el contexto occidental y el ámbito del diseño web donde suelen encontrar más aplicación:
| Color | Asociaciones positivas | Asociaciones negativas | Dónde suele usarse |
| Blanco | Limpieza, pureza, inocencia, paz, seguridad, amabilidad, minimalismo, sencillez, neutralidad | Vacío, frialdad, esterilidad | El blanco se adapta en teoría a cualquier tipo de página, ya que su efecto depende mucho de los colores que lo acompañan. Se usa mucho en medicina y salud, tecnología, religión, jurisprudencia, ciencia, artículos de lujo |
| Negro | Seriedad, clasicismo, elegancia, objetividad, funcionalidad, modernidad, autoritarismo, profesionalidad | Soledad, tristeza, duelo, oscuridad, maldad, ilegalidad, rebeldía | Como el blanco, depende de los otros colores. Se usa a menudo en el ámbito de la moda, de la cosmética, del comercio de lujo y de la música |
| Gris | Atemporalidad, sofisticación, nobleza, competencia, profesionalidad, objetividad, neutralidad | Monotonía, melancolía, vejez, sin emoción, distancia | Este color está indicado para compañías de negocios o artículos de lujo |
| Marrón | Naturaleza, madurez, calidez, sensatez, estabilidad, acogida, comodidad, placer, creatividad | Pereza, pesadez, antigüedad, suciedad | Temas relacionados con animales, naturaleza y medioambiente |
| Rojo | Llamativo, pasión, tentación, afectividad, calidez, dinamismo, atención, complacencia, energía, valentía | Peligro, agresividad, arrogancia, furia, ruido | Servicios de urgencias y de salud, moda, entretenimiento, deporte, alimentación |
| Naranja | Amistad, alegría, juventud, calidez, energía, acogedor, económico | Poca seriedad, urgencia, intranquilidad, barato | Industria automovilística, entretenimiento, tecnología, alimentación, niños |
| Amarillo | Alegría, amistad, juventud, optimismo | Venenoso, urgencia, inestabilidad, cobardía | El amarillo se usa poco porque requiere un mayor esfuerzo de percepción pero se presta bien si el tema o el servicio lo requieren (una empresa de taxis o un establecimiento de apicultura) |
| Verde | Naturaleza, vitalidad, frescura, alegría, esperanza, positivismo, generosidad, tranquilidad, relax, paz | Venenoso, inmadurez, sin experiencia, amargo, agrio, áspero | Temas que tengan que ver con animales, naturaleza o medioambiente, ciencia, turismo, medicina |
| Azul | Fiabilidad, fortaleza, competencia, seriedad, simpatía, armonía, amabilidad, relajamiento, silencio | Frialdad, dificultad, depresión, distancia | Economía, derecho, administración, ciencia, tecnología, medicina |
| Violeta | Fantasía, magia, espiritualidad, extraordinario, creatividad, sofisticación | Artificioso, subjetividad | Moda, cosmética, artículos de lujo |
Esta tabla representa las múltiples facetas que pueden tener los colores. La elección de los colores siempre será personal y dependerá de las necesidades propias. Sin embargo, siempre es recomendable reducir la paleta de colores a unos pocos y aplicarla de forma harmoniosa. Recuerda que un exceso de colores puede causar confusión o hacerla parecer sobrecargada.
Otros aspectos a tener en cuenta en la creación de una web
Un buen diseño web requiere tiempo y trabajo aunque, con un poco de paciencia, es posible lograr una página profesional propia. Los principios que hemos presentado en la serie dedicada al diseño web sientan las bases de la realización de un proyecto web, pero hay otros métodos con los que se puede optimizar la presencia en la red. En nuestra guía dedicamos algunos artículos a temas como las herramietnas de SEO más importantes, el aviso legal o los cinco sistemas de gestión de contenido más usados, entre otros.
Artículos similares
Fundamentos de diseño web segunda parte: el diseño userfriendly
Visitar una página web, incluso cuando lo hacemos por primera vez, significa en gran parte navegar por ella de forma intuitiva gracias al uso de plantillas convencionales que todos conocemos. Estos estándares, ya tan extendidos, son los que garantizan la usabilidad de una página y deberían, por eso, ser conocidos por todo diseñador web.
Fundamentos del diseño web primera parte: planificación
Para crear una página web, es fundamental considerar su propósito y sus objetivos, así como las funciones y servicios que deberán estar a disposición de los visitantes. La planificación será el primer paso para dar luz verde al diseño web y a la concepción de cualquier web. ¿Qué se debe considerar y en qué se debe hacer hincapié? Invertir el tiempo necesario en la planificación de una web…
Las tendencias de diseño web más populares en 2023
Con las tendencias de diseño web de 2023 podrás dar rienda suelta a tu creatividad: desde diseños maximalistas que recuerdan al pasado, hasta una técnica delicada como el parallax scrolling y los chatbots. A este respecto, el prinicipal desafío reside en cómo incorporar los componentes seleccionados a tu propio proyecto de la forma más coherente posible. Te enseñamos qué tendencias de diseño web…
Imagen de marca: conoce el impacto de los logos más conocidos
Los logos de las marcas están por todas partes. No obstante, no sabemos hasta qué punto somos capaces de fijarnos en ellos. El estudio Branded Memory ha llevado a cabo una investigación para comprobarlo en la que han participado un total de 150 hombres y mujeres pertenecientes a diferentes grupos de edad. En ella se determinaba con qué exactitud podían recordar los participantes los logos de…
RGB: tres colores base para (casi) todo
El modelo RGB del color, con los tres colores RGB, rojo, verde y azul, genera todos los colores que se pueden mostrar en una pantalla. El principio físico en el que se basa es la síntesis aditiva de color a partir de componentes definidos de la luz visible. Con los diferentes espacios de color, se consigue reproducir el color con la mayor aproximación posible a la realidad.