Introducci√≥n al Dise√Īo Web | Dise√Īo Paginas Web WebKreativo

Introducci√≥n al dise√Īo web

El t√©rmino ‚Äúdise√Īo web‚ÄĚ se refiere a la actividad que consiste en estructurar los elementos gr√°ficos de un sitio web para expresar est√©ticamente la identidad visual de una compa√Ī√≠a u organizaci√≥n. Se trata de una etapa de dise√Īo virtualm√°s que de dise√Īo funcional (ergonom√≠a, navegaci√≥n).

El objetivo del dise√Īo web es realzar la imagen de una compa√Ī√≠a u organizaci√≥n a trav√©s de elementos gr√°ficos con el objeto de reforzar su identidad visual y despertar una sensaci√≥n de confianza en el usuario. A√ļn as√≠ y junto con el criterio de ergonom√≠a, un sitio web debe, sobre todo, cubrir las expectativas del usuario y permitirle encontrar f√°cilmente la informaci√≥n que busca.

Por eso, el dise√Īo web consiste en encontrar un t√©rmino medio entre una presentaci√≥n que tenga gr√°ficos impresionantes -y que le proporcione a la compa√Ī√≠a tanto credibilidad como imagen de marca- y una presentaci√≥n simple y sencilla que permita a los usuarios encontrar lo que est√°n buscando.

Por extensi√≥n, el t√©rmino dise√Īador web se refiere a la persona cuyo trabajo es dise√Īar sitios web.

Inspiración necesaria

Dise√Īar una p√°gina web es principalmente una tarea art√≠stica que combina inventiva y creatividad. El objetivo de esta gu√≠a es listar varios elementos clave que se usan para obtener un dise√Īo eficaz. De cualquier modo, tambi√©n puede encontrarse inspiraci√≥n en una visita a los sitios web de referencia, en especial los sitios web profesionales. Es muy interesante observar c√≥mo cada sitio web organiza la informaci√≥n, c√≥mo se presentan los men√ļs y los bloques de informaci√≥n y, en general, determinar qu√© le brinda una apariencia ‚Äúprofesional‚ÄĚ a un sitio web.

Organización de la página

Generalmente al dise√Īar un sitio web se crean plantillas que se usan como modelo. Las plantillas son im√°genes en ‚Äúcarb√≥nico‚ÄĚ o p√°ginas web que representan el esquema gr√°fico de un modelo de p√°gina.

La estructura tradicional de una p√°gina web es la siguiente:

  • Un logotipo ubicado en la esquina superior izquierda. Los usuarios pueden hacer clic en la mayor√≠a de los logotipos y volver a la p√°gina de inicio.
  • Un men√ļ localizado a la derecha o a la izquierda.
  • Un encabezado que contiene el nombre del sitio web, un banner de navegaci√≥n y un √°rea reservada para un banner (publicitario o de otro tipo).
  • El cuerpo principal de la p√°gina que contiene la mayor parte de la informaci√≥n.
  • Un pie de p√°gina que incluye informaci√≥n √ļtil como ser, la √ļltima actualizaci√≥n, un v√≠nculo a un formulario de contacto, un v√≠nculo al mapa del sitio, etc√©tera.

Organización de la página

El dise√Īador debe definir en la plantilla qu√© elementos no cambian y son id√©nticos en cada p√°gina y qu√© elementos var√≠an de una p√°gina a la otra.

Estatuto gr√°fico

Un ‚Äúestatuto gr√°fico‚ÄĚ es un documento integral que detalla las reglas de presentaci√≥n para los elementos gr√°ficos que transmiten la identidad visual de un sitio web.

El estatuto gr√°fico define el equipamiento gr√°fico de un sitio web, en particular los tama√Īos, colores y apariencia del texto, las im√°genes y botones del sitio y tambi√©n la ubicaci√≥n que tienen con respecto a otros objetos en la p√°gina.

Boceto

Un bocetoes un modelo o prototipo de un sitio web que presenta los gr√°ficos y la navegaci√≥n del sitio. Los bocetos permiten a los dise√Īadores formalizar el dise√Īo del sitio web y casi siempre se usan para validar la fase de dise√Īo antes de pasar a la fase de ‚Äúrealizaci√≥n‚ÄĚ.

El boceto incluye p√°ginas est√°ticas que representan las p√°ginas principales del sitio web (sin contenido), las cuales se usan para simular la navegaci√≥n. Durante la simulaci√≥n, elementos din√°micos tales como el motor de b√ļsqueda, pueden conducir a una p√°gina que contiene resultados inventados, por ejemplo.

Tama√Īos de la p√°gina

El tama√Īo de una p√°gina web depende principalmente de la definici√≥n que tenga la pantalla del usuario (no de su resoluci√≥n).

Teniendo en cuenta el ancho, es preferible seleccionar un tama√Īo menor que la definici√≥n horizontal de la pantalla de la mayor√≠a de los visitantes para que √©stos no tengan que desplazar la pantalla con la barra de desplazamiento. Una p√°gina angosta permite a los visitantes hojear la informaci√≥n f√°cilmente para encontrar lo que les interesa.

Con respecto al largo, es aconsejable no exceder de tres a cinco veces la altura de la pantalla. De hecho, las p√°ginas excesivamente largas corren el riesgo de no leerse por completo y adem√°s toma mucho tiempo descargarlas.

Existen varias estrategias para garantizar que la página se vea de manera óptima en la mayoría de los equipos de los visitantes:

  • Elegir el ancho m√°s peque√Īo admitido por la mayor√≠a de los equipos (por ejemplo: entre 600 y 800 p√≠xeles de ancho).
  • Elegir una p√°gina que contenga tablas invisibles con ancho variable (definido por porcentaje).
  • Usar un script (por ejemplo, JavaScript) para detectar la resoluci√≥n de la pantalla del usuario y redireccionarlo a una p√°gina con el ancho adecuado. Este m√©todo requiere que el visitante utilice un navegador con JavaScript activado y la creaci√≥n de tantas p√°ginas como anchos solicitados.

El posicionamiento de la información

C√≥mo se posiciona la informaci√≥n es un elemento importante en el dise√Īo web. Si se tiene en cuenta la direcci√≥n en la que los usuarios leen la informaci√≥n (en diagonal desde la esquina superior izquierda hacia la esquina inferior derecha), la informaci√≥n que est√© ubicada en la parte superior de la p√°gina tendr√° m√°s probabilidades de ser le√≠da por los usuarios de Internet.

Elección de los colores

No se recomienda usar más de tres colores distintos en un sitio web para cumplir con el criterio de simplicidad. Los colores deben corresponderse con los colores de la organización, especialmente los del logotipo, y es recomendable que expresen una sensación en particular.

Sin importar qué colores se elijan, debe elegirse un color dominante y usarse como el color principal de la página web. Se deben elegir uno o varios colores secundarios más brillantes y dinámicos y usarse en proporciones menores para destacar los elementos de la página.

Los colores tienen un simbolismo implícito. Por este motivo, se los debe elegir en función de objetivo. Los colores tienen influencia sobre el comportamiento de los individuos:

  • A nivel f√≠sico (sobre el apetito, el descanso, la temperatura corporal, etc√©tera).
  • A nivel emocional (sobre sensaciones de miedo, seguridad, alegr√≠a, etc√©tera).
  • A nivel psicol√≥gico (sobre la energ√≠a, la concentraci√≥n, etc√©tera).

La tabla que sigue es una lista de los significados que se asocian característicamente con colores específicos:

Color Significados positivos Significados negativos √Āreas
Azul calma, confianza, autoridad, pacificaci√≥n, serenidad, protecci√≥n, seriedad, misticismo, amabilidad, agua, cielo, paz, fr√≠o, sue√Īo navegaci√≥n, nuevas tecnolog√≠as, IT, medicina
Violeta delicadeza, pasión, discreción, modestia, religión melancolía, tristeza, pena, decepción Cultura, política
Rosa encanto, intimidad, feminidad, belleza ingenuidad diarios íntimos, mujer
Rojo calor, fuerza, coraje, dinamismo, triunfo, amor, entusiasmo violencia, rabia, peligro, urgencia, restricción, sangre, infierno lujo, moda, deportes, marketing, medios
Naranja tibieza, bienestar, virtud, felicidad, riqueza, placer, cítricos, aroma, energía, vitalidad fuego, advertencia entretenimiento, deportes, viajes
Amarillo luz, alegr√≠a, sol, vida, potencia, dignidad, oro, riqueza, inmortalidad enga√Īo, ego√≠smo, celos, soberbia, advertencia turismo
Verde naturaleza, vida vegetal, ayuda, equilibrio, pacificación, descanso, confianza, tolerancia, esperanza, orgullo, juventud, caridad descubrimientos, naturaleza, viajes, educación
Marrón calma, filosofía, campo suciedad medio ambiente
Blanco pureza, inocencia, nieve, pulcritud, frescura, riqueza modas, noticias
Gris neutralidad, respeto dise√Īo, asociaciones, organizaciones sin fines de lucro
Negro simpleza, lujo, noche muerte, oscuridad, tristeza, monotonía cine, arte, fotografía, restricción

La composici√≥n de colores tambi√©n tiene influencia sobre c√≥mo se perciben los vol√ļmenes. La composici√≥n de colores puede dar una sensaci√≥n de bienestar, tanto en una casa hermosamente decorada como en un sitio web.

El c√≠rculo crom√°tico es una herramienta √ļtil para comprender c√≥mo interact√ļan los colores. Es una representaci√≥n de los colores en forma circular. Incluye los siguientes colores:

  • Los colores primarios (rojo, azul, verde) o ‚Äúpuros‚ÄĚ, que no pueden obtenerse mezclando otros colores.
  • Los colores secundarios (cian, magenta, amarillo), que se obtienen al mezclar en partes iguales dos colores adyacentes. Los colores secundarios son diametralmente opuestos a sus colores complementarios (sustractivos) en el c√≠rculo crom√°tico.
  • Los colores terciarios, que se obtienen al mezclar un color primario con uno secundario.

Los colores tambi√©n se dividen en ‚Äúc√°lidos‚ÄĚ (tonos que se acercan al rojo) y ‚Äúfr√≠os‚ÄĚ (tonos m√°s pr√≥ximos al azul).

Circulo crom√°tico

Existen leyes universales que dominan la armon√≠a entre los colores y que responden a las propiedades f√≠sicas del ojo. Cuando el ojo ve un color, crea autom√°ticamente un filtro para el color complementario a su alrededor. Esto se llama ‚Äúcontraste simult√°neo‚ÄĚ. Por eso, la forma en que se percibe un color depende de los colores que lo rodean. As√≠, el amarillo se ver√° m√°s anaranjado al lado de un azul y el azul se ver√° m√°s p√ļrpura. El azul al lado de el rojo se ver√° m√°s verdoso, etc√©tera.

Adem√°s, los colores lindantes en el diagrama crom√°tico crean una sensaci√≥n de equilibrio para el ojo debido a la ausencia de contraste; esto es lo que se llama ‚Äúarmon√≠a de colores‚ÄĚ.

A grandes rasgos, existen dos maneras de elegir colores que armonicen:

  • Seleccionar matices del mismo color o colores dentro de la misma gama con tonalidades similares.
  • Mezclar colores complementarios (c√°lidos y fr√≠os), o sea, colores que est√©n lejos unos de otros dentro del c√≠rculo crom√°tico. Cuando se elijan dos colores, estos deben ser diametralmente opuestos, complementarios; para tres colores, los colores seleccionados deben estar ubicados en un tri√°ngulo equil√°tero, etc√©tera.

Para finalizar, en términos generales, los objetos de colores cálidos perecerán más grandes que aquellos de colores fríos.

Selección de imágenes

Las imágenes sirven para darle vitalidad y hacer más alegre un sitio web. Tomando eso en cuenta, imágenes mal utilizadas pueden perturbar la comodidad visual como también la descarga de una página.

Los webmaster principiantes gustan de vitalizar sus sitios web con divertidas imágenes animadas encontradas en la Web. Esto se debe evitar al máximo porque dichas imágenes pueden molestar a los lectores y provocar que el sitio web transmita una sensación de poco profesionalismo.

Colores de fondo

La correcta elección de los colores de fondo es vital ya que un fondo mal elegido puede dificultar la lectura. Es esencial elegir un contraste apropiado entre el color de primer plano y el color de fondo dominante. Es por esto que se aconseja no elegir un fondo con gráficos, porque puede obstaculizar la lectura y transmitir una sensación general de amateurismo. Generalmente, el color de fondo debe ser algo pálido.

Tipografía

Se recomienda no usar más de dos tipos de fuente en un sitio web. Las fuentes estilizadas se deben usar con moderación (por ejemplo, para un título) y para la mayor parte del sitio web conviene utilizar una fuente clásica (arial, verdana, helvética, etcétera).

En los textos impresos tradicionales, las fuentes con serifas (serif), o peque√Īos adornos, suelen facilitar la lectura ya que las serifas ayudan a los lectores a seguir el texto.

Pero no se recomienda usar serifas en Internet porque, dependiendo de la definición de la pantalla del usuario, pueden deformarse y parecer garabatos que obstaculizan la lectura. Por lo tanto, es una opción más adecuada usar fuentes de palo seco o sin serifas (sans-serif) más redondeadas.

Por √ļltimo, tenga en cuenta que con las fuentes no est√°ndar se corre el riesgo de que no se visualicen correctamente en algunas pantallas. Si se desea crear t√≠tulos con este tipo de fuente y para evitar la limitaci√≥n mencionada antes, se pueden crear im√°genes transparentes que contengan el texto.

Símbolos gráficos

Se recomienda usar pictogramas e íconos para establecer signos visuales. De cualquier manera, se debe tener cuidado al elegir símbolos porque los usuarios pueden malinterpretarlos, en especial si se trata de sitios web internacionales. Estos son los pictogramas que más se usan:

  • Una lupa simboliza caracter√≠sticamente la funci√≥n de b√ļsqueda.
  • Un sobre representa la opci√≥n de contactar al webmaster a trav√©s del correo electr√≥nico.
  • Un signo de interrogaci√≥n simboliza la ayuda en l√≠nea
  • Una casa representa el v√≠nculo a la p√°gina de inicio.
  • Una bandera simboliza el idioma de la p√°gina actual o la posibilidad de cambiarla a otro idioma.